diff --git a/CHANGELOG.md b/CHANGELOG.md
index bf895c1..0218690 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@
 - **Current node (当前节点, formerly Node Assistant)**: the panel no longer splits into "actions" and "parameter sets" tabs; it is one page with the model actions on top and **Parameters** below. Parameters lists every saved set of values for this kind of node in one list — from the material library and from recipes' parameter sets, the same values saved twice shown once — and each entry says exactly what it would change on the selected node ("steps: 20 → 30"). **Apply these N** changes only those; seeds and model files stay (change the model above), and the receipt undoes it. **Save these values** keeps the node's current values in the material library, so the next node of that kind can use them.
 - **Translation moved onto the node (翻译挪到节点上)**: Current node now lists the selected node's prompt boxes, each marked positive or negative by its wiring. A box written in Chinese has **Translate to English**, which writes the English back (the receipt undoes it); an English box has **Show in Chinese**, which shows the meaning underneath and writes nothing. The separate Prompt Translator window is gone; Prompt Studio keeps its own translate buttons.
 - **No more toolbox (工具箱拆掉了)**: every tool now opens from the page it belongs to. Workflow share codes (import / export) are the ⇅ button at the top right of **Workflows** (where a disabled import button used to sit); **Prompt Studio** and **Prompt Notes** are at the top right of **Materials**; **Model Sources** is at the end of the type chips on **Models**, and Model Doctor has **Where to download** for the open workflow's models; translation is on the prompt boxes in **Current node**. The rail keeps scan, Model Doctor and Current node.
+- **One look everywhere (配色统一)**: pages made at different times used their own greys (bluish slate here, neutral grey there) and their own accent (sky blue, violet, indigo). They now all take the Home page's colours: neutral surfaces, the same text greys and one accent for links and selection, and they follow the Abyssal Scarlet theme too (the Material Library, Prompt Studio, voices and several dialogs used to stay blue-grey in it). The workflow share-code dialogs lost their blue and orange buttons for the usual ones. Status colours and prompt-role colours are unchanged.
 - **See it before you let go (拖的时候先看到结果)**: dragging a prompt over a prompt box shows, in that box and in the opposite box on the same sampler, the text releasing would put there; move away and they go back. Dragging saved values over a node of their kind lists what would change, such as "steps 12 → 28, cfg 4.5 → 5.5", or says nothing would change.
 - **The scan page in plain words (扫描页说人话)**: it says what a scan does (the file's fingerprint is looked up on Civitai), and why a model was not found: not published on Civitai (voice, upscale and detection models mostly come from HuggingFace or GitHub), trained or merged by you, or changed after download; it works as usual, and you can add its download link. A model Civitai does not know that is no known image model says it may be a voice or upscale model. Model files in other formats (.pth, .ckpt, .bin…), which scans never read, are listed under **Other formats** with why, so they are no longer a mystery.
 - **Undo what you dropped (拖错了可以撤回)**: anything Anomalous writes on the canvas (a material dropped on a node, a prompt put in a box, values applied in Current node, a model swapped or a LoRA inserted, a recipe or prompt note sent to the canvas) is now one step of ComfyUI's own **Ctrl+Z**; before, a drop was not, and Ctrl+Z could undo the step before it instead. After a drop, the message at the top right has **Undo** and stays while the pointer is on it. Dropping a prompt on empty canvas can be undone the same way. In **Activity**, canvas changes made since the page was opened have **Undo** while nothing has changed them since; entries that removed nodes or rewired existing ones only record.
diff --git a/docs/architecture/frontend.md b/docs/architecture/frontend.md
index 47844b6..f07165e 100644
--- a/docs/architecture/frontend.md
+++ b/docs/architecture/frontend.md
@@ -303,13 +303,22 @@ guards the unique ordered list and byte-for-byte reconstructed bundle. Shared `-
 tokens express surfaces, text, borders and control shapes; theme overrides must
 be scoped to `.theme-abyssal-scarlet` rather than changing unrelated surfaces.
 
+Colours come from the tokens in `00-foundation-models.css`, which both themes define:
+surfaces (`--amb-bg-page`, `-panel`, `-card`, `-card-hover`, `-input`), text
+(`--amb-text-main`, `-soft`, `-muted`, `-dim`), borders (`--amb-border`, `-strong`,
+`-hover`), the primary button (`--amb-btn-primary-*`) and one accent, `--amb-link`, for
+links, selection and focus; its tints are `color-mix(in srgb, var(--amb-link) N%,
+transparent)`. CSS injected from JS and inline styles use the same tokens. Literal
+colours stay only where the colour is the meaning: status (red, green, amber), prompt
+roles, voice emotions, canvas node colours and translucent shadows or overlays.
+
 Studio drawer rules keep the source deck at the screen edge and the assembly
 track next to the canvas. Common geometry is shared between dock directions;
 direction-specific rules set column order and separators. The removed embedded
 composer's `#anomalous-container.anomalous-docked` overrides must not return.
 Before adding an override or `!important`, locate and edit the owning rule.
-Older component and theme overrides elsewhere in the ordered bundle still need a
-separate, visually verified consolidation.
+Older theme overrides in `08-theme-gallery-overrides.css` predate the tokens; many are
+now redundant and can go as the rules they override are touched.
 
 ## Verification
 
diff --git a/web/main.js b/web/main.js
index 1c64a70..fa96553 100644
--- a/web/main.js
+++ b/web/main.js
@@ -235,7 +235,7 @@ const AMB_WorkflowShare = {
         const toast = document.createElement('div');
         toast.textContent = message;
         toast.style.cssText = `
-            position: fixed; bottom: 30px; right: 30px; background: #2a2a2b; color: ${color || '#fff'};
+            position: fixed; bottom: 30px; right: 30px; background: var(--amb-bg-card-hover); color: ${color || '#fff'};
             padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
             font-family: Arial, sans-serif; font-size: 14px; z-index: 9999999;
             opacity: 0; transition: opacity 0.3s ease; border-left: 4px solid ${color || '#fff'};
@@ -248,141 +248,99 @@ const AMB_WorkflowShare = {
         }, 3000);
     },
 
-    showExportModal() {
+    /** A dimmed overlay with one dialog box; looks come from .anomalous-share-* in the styles. */
+    createShareDialog(id, titleText, variant = '') {
         const overlay = document.createElement('div');
-        overlay.id = 'amb-export-modal';
-        overlay.style.cssText = `
-            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
-            background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
-            z-index: 999999; display: flex; justify-content: center; align-items: center;
-            font-family: Arial, sans-serif;
-        `;
-        
+        if (id) overlay.id = id;
+        overlay.className = 'anomalous-share-overlay';
         const content = document.createElement('div');
-        content.style.cssText = `
-            background: #2a2a2b; color: #fff; padding: 30px; border-radius: 12px;
-            width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-            display: flex; flex-direction: column; gap: 20px;
-        `;
-        
+        content.className = `anomalous-share-dialog${variant ? ` ${variant}` : ''}`;
         const title = document.createElement('h2');
-        title.style.margin = '0';
-        title.textContent = t('mainExportTitle');
-        
+        title.className = 'anomalous-share-title';
+        title.textContent = titleText;
+        content.appendChild(title);
+        overlay.appendChild(content);
+        return { overlay, content };
+    },
+
+    shareButton(label, variant = '') {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `anomalous-share-btn${variant ? ` ${variant}` : ''}`;
+        button.textContent = label;
+        return button;
+    },
+
+    showExportModal() {
+        const { overlay, content } = this.createShareDialog('amb-export-modal', t('mainExportTitle'));
+
         const typeSelectContainer = document.createElement('div');
+        typeSelectContainer.className = 'anomalous-share-options';
         typeSelectContainer.innerHTML = `
-            <label style="display: block; margin-bottom: 8px; cursor: pointer;">
+            <label>
                 <input type="radio" name="amb-share-type" value="skeleton" checked />
                 ${t('mainSkeletonOption')}
             </label>
-            <label style="display: block; cursor: pointer;">
+            <label>
                 <input type="radio" name="amb-share-type" value="full" />
                 ${t('mainFullOption')}
             </label>
         `;
-        
+
         const textArea = document.createElement('textarea');
-        textArea.style.cssText = `
-            width: 100%; height: 150px; background: #1e1e1f; color: #eee;
-            border: 1px solid #444; border-radius: 6px; padding: 10px;
-            font-family: monospace; font-size: 12px; resize: none; box-sizing: border-box;
-        `;
+        textArea.className = 'anomalous-share-code';
         textArea.readOnly = true;
-        
+
         const btnGroup = document.createElement('div');
-        btnGroup.style.cssText = `display: flex; gap: 10px; justify-content: flex-end;`;
-        
-        const generateBtn = document.createElement('button');
-        generateBtn.textContent = t('mainGenerate');
-        generateBtn.style.cssText = `padding: 8px 16px; background: #4a90e2; color: #fff; border: none; border-radius: 6px; cursor: pointer;`;
-        
-        const copyBtn = document.createElement('button');
-        copyBtn.textContent = t('mainCopyClipboard');
-        copyBtn.style.cssText = `padding: 8px 16px; background: #5cb85c; color: #fff; border: none; border-radius: 6px; cursor: pointer; display: none;`;
-        
-        const closeBtn = document.createElement('button');
-        closeBtn.textContent = t('mainClose');
-        closeBtn.style.cssText = `padding: 8px 16px; background: #555; color: #fff; border: none; border-radius: 6px; cursor: pointer;`;
-        
+        btnGroup.className = 'anomalous-share-actions';
+        const generateBtn = this.shareButton(t('mainGenerate'), 'is-primary');
+        const copyBtn = this.shareButton(t('mainCopyClipboard'));
+        copyBtn.hidden = true;
+        const closeBtn = this.shareButton(t('mainClose'), 'is-quiet');
+
         closeBtn.onclick = () => overlay.remove();
-        
+
         generateBtn.onclick = async () => {
             const isSkeleton = document.querySelector('input[name="amb-share-type"]:checked').value === 'skeleton';
-            
+
             // Get current workflow from app graph
             const p = await app.graphToPrompt();
             const workflowJson = p.workflow;
-            
+
             try {
                 const code = await AMB_WorkflowShare.encodeShareCode(workflowJson, isSkeleton);
                 textArea.value = code;
-                copyBtn.style.display = 'block';
+                copyBtn.hidden = false;
             } catch (err) {
                 textArea.value = 'Error generating code: ' + err.message;
             }
         };
-        
+
         copyBtn.onclick = () => {
             textArea.select();
             document.execCommand('copy');
             AMB_WorkflowShare.showToast(t('mainCopied'), '#5cb85c');
         };
-        
-        btnGroup.appendChild(generateBtn);
-        btnGroup.appendChild(copyBtn);
-        btnGroup.appendChild(closeBtn);
-        
-        content.appendChild(title);
-        content.appendChild(typeSelectContainer);
-        content.appendChild(textArea);
-        content.appendChild(btnGroup);
-        overlay.appendChild(content);
-        
+
+        btnGroup.append(generateBtn, copyBtn, closeBtn);
+        content.append(typeSelectContainer, textArea, btnGroup);
         document.body.appendChild(overlay);
     },
-    
+
     showImportModal() {
-        const overlay = document.createElement('div');
-        overlay.id = 'amb-import-modal';
-        overlay.style.cssText = `
-            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
-            background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
-            z-index: 999999; display: flex; justify-content: center; align-items: center;
-            font-family: Arial, sans-serif;
-        `;
-        
-        const content = document.createElement('div');
-        content.style.cssText = `
-            background: #2a2a2b; color: #fff; padding: 30px; border-radius: 12px;
-            width: 600px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-            display: flex; flex-direction: column; gap: 20px;
-        `;
-        
-        const title = document.createElement('h2');
-        title.style.margin = '0';
-        title.textContent = t('mainImportTitle');
-        
+        const { overlay, content } = this.createShareDialog('amb-import-modal', t('mainImportTitle'), 'is-wide');
+
         const inputArea = document.createElement('textarea');
+        inputArea.className = 'anomalous-share-code is-input';
         inputArea.placeholder = t('mainSharePlaceholder');
-        inputArea.style.cssText = `
-            width: 100%; height: 100px; background: #1e1e1f; color: #eee;
-            border: 1px solid #444; border-radius: 6px; padding: 10px;
-            font-family: monospace; font-size: 12px; resize: none; box-sizing: border-box;
-        `;
-        
+
         const btnGroup = document.createElement('div');
-        btnGroup.style.cssText = `display: flex; gap: 10px; justify-content: flex-end;`;
-        
-        const loadBtn = document.createElement('button');
-        loadBtn.textContent = t('mainImportLoad');
-        loadBtn.style.cssText = `padding: 8px 16px; background: #e07a5f; color: #fff; border: none; border-radius: 6px; cursor: pointer;`;
-        
-        const closeBtn = document.createElement('button');
-        closeBtn.textContent = t('mainCancel');
-        closeBtn.style.cssText = `padding: 8px 16px; background: #555; color: #fff; border: none; border-radius: 6px; cursor: pointer;`;
-        
+        btnGroup.className = 'anomalous-share-actions';
+        const loadBtn = this.shareButton(t('mainImportLoad'), 'is-primary');
+        const closeBtn = this.shareButton(t('mainCancel'), 'is-quiet');
+
         closeBtn.onclick = () => overlay.remove();
-        
+
         loadBtn.onclick = async () => {
             const code = inputArea.value.trim();
             if (!code) {
@@ -393,10 +351,10 @@ const AMB_WorkflowShare = {
                 const pendingWorkflow = await AMB_WorkflowShare.decodeShareCode(code);
                 app.loadGraphData(pendingWorkflow);
                 overlay.remove();
-                
+
                 const nodesCount = pendingWorkflow.nodes ? pendingWorkflow.nodes.length : 0;
                 AMB_WorkflowShare.showToast(t('mainImportedNodes', { count: nodesCount }), '#5cb85c');
-                
+
                 // Auto close the main browser panel
                 const mainCloseBtn = document.getElementById('anomalous-close');
                 if (mainCloseBtn) mainCloseBtn.click();
@@ -404,58 +362,24 @@ const AMB_WorkflowShare = {
                 AMB_WorkflowShare.showToast(t('mainDecodeFailed') + err.message, '#ff6b6b');
             }
         };
-        
-        btnGroup.appendChild(loadBtn);
-        btnGroup.appendChild(closeBtn);
-        
-        content.appendChild(title);
-        content.appendChild(inputArea);
-        content.appendChild(btnGroup);
-        overlay.appendChild(content);
-        
+
+        btnGroup.append(loadBtn, closeBtn);
+        content.append(inputArea, btnGroup);
         document.body.appendChild(overlay);
     },
     showUnifiedModal() {
-        const overlay = document.createElement('div');
-        overlay.style.cssText = `
-            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
-            background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
-            z-index: 999999; display: flex; justify-content: center; align-items: center;
-            font-family: Arial, sans-serif;
-        `;
-        
-        const content = document.createElement('div');
-        content.style.cssText = `
-            background: #2a2a2b; color: #fff; padding: 30px; border-radius: 12px;
-            width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-            display: flex; flex-direction: column; gap: 20px; text-align: center;
-        `;
-        
-        const title = document.createElement('h2');
-        title.style.margin = '0';
-        title.textContent = t('mainUnifiedTitle');
-        
-        const exportBtn = document.createElement('button');
-        exportBtn.textContent = t('mainExportWorkflow');
-        exportBtn.style.cssText = `padding: 12px; background: #4a90e2; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px;`;
+        const { overlay, content } = this.createShareDialog('', t('mainUnifiedTitle'), 'is-menu');
+
+        const exportBtn = this.shareButton(t('mainExportWorkflow'), 'is-primary is-large');
         exportBtn.onclick = () => { overlay.remove(); this.showExportModal(); };
-        
-        const importBtn = document.createElement('button');
-        importBtn.textContent = t('mainImportWorkflow');
-        importBtn.style.cssText = `padding: 12px; background: #e07a5f; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px;`;
+
+        const importBtn = this.shareButton(t('mainImportWorkflow'), 'is-large');
         importBtn.onclick = () => { overlay.remove(); this.showImportModal(); };
-        
-        const closeBtn = document.createElement('button');
-        closeBtn.textContent = t('mainClose');
-        closeBtn.style.cssText = `padding: 8px; background: #555; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; margin-top: 10px;`;
+
+        const closeBtn = this.shareButton(t('mainClose'), 'is-quiet');
         closeBtn.onclick = () => overlay.remove();
-        
-        content.appendChild(title);
-        content.appendChild(exportBtn);
-        content.appendChild(importBtn);
-        content.appendChild(closeBtn);
-        overlay.appendChild(content);
-        
+
+        content.append(exportBtn, importBtn, closeBtn);
         document.body.appendChild(overlay);
     }
 };
diff --git a/web/modules/browser_entry.js b/web/modules/browser_entry.js
index 2c74272..a59ccc2 100644
--- a/web/modules/browser_entry.js
+++ b/web/modules/browser_entry.js
@@ -252,7 +252,7 @@ export function createBrowserEntry({ translate, getCurrentLanguage }) {
 
     async function setup() {
         removeLegacyTriggerPosition();
-        const cssUrl = '/extensions/Anomalous_Model_Browser/styles.css?v=20260926-canvas-perf-1';
+        const cssUrl = '/extensions/Anomalous_Model_Browser/styles.css?v=20261002-theme-1';
         if (!document.querySelector('link[href^="/extensions/Anomalous_Model_Browser/styles.css"]')) {
             const link = document.createElement('link');
             link.rel = 'stylesheet';
diff --git a/web/modules/ui_detail.js b/web/modules/ui_detail.js
index f812383..aee9724 100644
--- a/web/modules/ui_detail.js
+++ b/web/modules/ui_detail.js
@@ -73,8 +73,8 @@ export function showDetail(model) {
         const header = document.createElement('div');
         header.style.width = '100%';
         header.style.padding = '8px 15px';
-        header.style.background = 'var(--comfy-menu-bg, #333)';
-        header.style.borderBottom = '1px solid var(--border-color, #444)';
+        header.style.background = 'var(--comfy-menu-bg, var(--amb-bg-card-hover))';
+        header.style.borderBottom = '1px solid var(--border-color, var(--amb-border-strong))';
         header.style.display = 'flex';
         header.style.alignItems = 'center';
         header.style.boxSizing = 'border-box';
@@ -101,7 +101,7 @@ export function showDetail(model) {
             backBtn.style.color = '#111827';
         } else {
             backBtn.innerHTML = this.historyStack.length > 0 ? t('backToPrev') : t('back');
-            backBtn.style.background = '#444';
+            backBtn.style.background = 'var(--amb-bg-card-hover)';
             backBtn.style.color = '#fff';
         }
         backBtn.style.padding = '6px 12px';
@@ -210,7 +210,7 @@ export function showDetail(model) {
         jumpBtn.innerHTML = '⬇️';
         jumpBtn.title = t('detailJumpToBottom');
         jumpBtn.style.padding = '6px 12px';
-        jumpBtn.style.background = '#444';
+        jumpBtn.style.background = 'var(--amb-bg-card-hover)';
         jumpBtn.style.color = '#fff';
         jumpBtn.style.border = 'none';
         jumpBtn.style.borderRadius = '4px';
@@ -277,7 +277,7 @@ export function showDetail(model) {
                     leftPanel.appendChild(img);
                 }
             } else {
-                leftPanel.innerHTML = `<div style="color:#aaa; text-align:center; margin-top:50px;">${t('noPreview')}</div>`;
+                leftPanel.innerHTML = `<div style="color:var(--amb-text-muted); text-align:center; margin-top:50px;">${t('noPreview')}</div>`;
             }
         };
 
@@ -339,7 +339,7 @@ export function showDetail(model) {
         topRow.style.gap = '10px';
         topRow.style.paddingBottom = '10px';
         topRow.style.marginBottom = '10px';
-        topRow.style.borderBottom = '1px solid #444';
+        topRow.style.borderBottom = '1px solid var(--amb-border-strong)';
 
         const titleEl = document.createElement('h3');
         titleEl.style.margin = '0';
@@ -363,7 +363,7 @@ export function showDetail(model) {
             cBtn.style.marginLeft = 'auto';
             cBtn.style.padding = '4px 8px';
             cBtn.style.background = 'rgba(255, 255, 255, 0.1)';
-            cBtn.style.border = '1px solid rgba(255, 255, 255, 0.15)';
+            cBtn.style.border = '1px solid var(--amb-border-strong)';
             cBtn.style.color = '#fff';
             cBtn.style.textDecoration = 'none';
             cBtn.style.borderRadius = '4px';
@@ -376,7 +376,7 @@ export function showDetail(model) {
         editMetaBtn.textContent = t('detailEdit');
         editMetaBtn.style.marginLeft = m.civitai_url ? '10px' : 'auto';
         editMetaBtn.style.padding = '4px 8px';
-        editMetaBtn.style.background = '#444';
+        editMetaBtn.style.background = 'var(--amb-bg-card-hover)';
         editMetaBtn.style.color = '#fff';
         editMetaBtn.style.border = 'none';
         editMetaBtn.style.borderRadius = '4px';
@@ -398,8 +398,8 @@ export function showDetail(model) {
             notesCard.style.marginBottom = '15px';
             notesCard.style.padding = '12px 16px';
             // Dark yellowish/khaki paper background for dark mode notebook feel
-            notesCard.style.background = 'linear-gradient(135deg, #262522 0%, #202124 100%)';
-            notesCard.style.border = '1px solid #3c4043';
+            notesCard.style.background = 'linear-gradient(135deg, var(--amb-bg-card-hover) 0%, var(--amb-bg-card) 100%)';
+            notesCard.style.border = '1px solid var(--amb-border-strong)';
             notesCard.style.borderLeft = '4px solid #a38d53';
             notesCard.style.borderRadius = '4px 8px 8px 4px';
             notesCard.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
@@ -473,11 +473,11 @@ export function showDetail(model) {
         galleryBtn.style.alignItems = 'center';
         galleryBtn.style.gap = '8px';
         galleryBtn.style.padding = '10px';
-        galleryBtn.style.background = '#2a2b2f';
-        galleryBtn.style.border = '1px solid #3c4043';
+        galleryBtn.style.background = 'var(--amb-bg-card-hover)';
+        galleryBtn.style.border = '1px solid var(--amb-border-strong)';
         galleryBtn.textContent = t('detailGeneratedGallery');
-        galleryBtn.onmouseover = () => { galleryBtn.style.background = '#3c4043'; galleryBtn.style.borderColor = 'rgba(255, 255, 255, 0.3)'; };
-        galleryBtn.onmouseout = () => { galleryBtn.style.background = '#2a2b2f'; galleryBtn.style.borderColor = '#3c4043'; };
+        galleryBtn.onmouseover = () => { galleryBtn.style.background = 'var(--amb-bg-card-hover)'; galleryBtn.style.borderColor = 'var(--amb-border-strong)'; };
+        galleryBtn.onmouseout = () => { galleryBtn.style.background = 'var(--amb-bg-card-hover)'; galleryBtn.style.borderColor = 'var(--amb-border-strong)'; };
 
         galleryBtn.onclick = () => {
             this.showGeneratedGallery(model);
@@ -504,7 +504,7 @@ export function showDetail(model) {
             copyAll.innerText = t('copyAll');
             copyAll.style.marginLeft = '10px';
             copyAll.style.padding = '2px 6px';
-            copyAll.style.background = '#444';
+            copyAll.style.background = 'var(--amb-bg-card-hover)';
             copyAll.style.color = '#fff';
             copyAll.style.border = 'none';
             copyAll.style.borderRadius = '3px';
@@ -529,17 +529,17 @@ export function showDetail(model) {
             m.trainedWords.forEach(w => {
                 const tag = document.createElement('span');
                 tag.innerText = w;
-                tag.style.background = '#333';
+                tag.style.background = 'var(--amb-bg-card-hover)';
                 tag.style.padding = '2px 6px';
                 tag.style.borderRadius = '4px';
                 tag.style.fontSize = '0.85em';
                 tag.style.cursor = 'pointer';
-                tag.style.border = '1px solid #555';
+                tag.style.border = '1px solid var(--amb-border-strong)';
                 tag.title = t('clickToCopy') + w;
                 tag.onclick = () => {
                     navigator.clipboard.writeText(w).then(() => {
                         tag.style.background = '#28a745';
-                        setTimeout(() => { tag.style.background = '#333'; }, 500);
+                        setTimeout(() => { tag.style.background = 'var(--amb-bg-card-hover)'; }, 500);
                     });
                 };
                 tagsCont.appendChild(tag);
@@ -564,10 +564,10 @@ export function showDetail(model) {
             const descText = document.createElement('div');
             descText.style.flex = 'none';
 
-            descText.style.background = '#222';
+            descText.style.background = 'var(--amb-bg-card)';
             descText.style.padding = '10px';
             descText.style.borderRadius = '6px';
-            descText.style.border = '1px solid #333';
+            descText.style.border = '1px solid var(--amb-border-strong)';
             descText.style.fontSize = '0.95em';
             descText.style.lineHeight = '1.4';
             setSafeRichHtml(descText, m.description);
@@ -610,7 +610,7 @@ export function showDetail(model) {
 
             const compList = document.createElement('div');
             compList.className = 'anomalous-compatible-list';
-            compList.innerHTML = `<span style="color:#888;">${t('loadingCompatible') || 'Loading...'}</span>`;
+            compList.innerHTML = `<span style="color:var(--amb-text-muted);">${t('loadingCompatible') || 'Loading...'}</span>`;
 
             compSec.appendChild(compTitle);
             compSec.appendChild(compList);
@@ -642,7 +642,7 @@ export function showDetail(model) {
                             if (isVid) thumb = `<video src="${m_comp.preview_url}" muted loop playsinline></video>`;
                             else thumb = `<img src="${m_comp.preview_url}" />`;
                         } else {
-                            thumb = `<div style="width:30px; height:30px; background:#222; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#555;">?</div>`;
+                            thumb = `<div style="width:30px; height:30px; background:var(--amb-bg-card); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--amb-text-dim);">?</div>`;
                         }
 
                         mItem.innerHTML = `${thumb}<div class="anomalous-compatible-item-name">${escapeHtml(m_comp.filename)}</div>`;
diff --git a/web/modules/ui_dialog.js b/web/modules/ui_dialog.js
index 7f74e17..078c8b3 100644
--- a/web/modules/ui_dialog.js
+++ b/web/modules/ui_dialog.js
@@ -21,7 +21,7 @@ export function anomalousAlert(message, title = 'Anomalous') {
         
         const dialog = document.createElement('div');
         dialog.style.background = 'linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98))';
-        dialog.style.border = '1px solid rgba(255, 255, 255, 0.12)';
+        dialog.style.border = '1px solid var(--amb-border-strong)';
         dialog.style.borderRadius = '16px';
         dialog.style.padding = '24px';
         dialog.style.maxWidth = '400px';
@@ -88,7 +88,7 @@ export function anomalousConfirm(message, title = 'Anomalous', options = {}) {
         
         const dialog = document.createElement('div');
         dialog.style.background = 'linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98))';
-        dialog.style.border = '1px solid rgba(255, 255, 255, 0.12)';
+        dialog.style.border = '1px solid var(--amb-border-strong)';
         dialog.style.borderRadius = '16px';
         dialog.style.padding = '24px';
         dialog.style.maxWidth = '400px';
@@ -172,7 +172,7 @@ export function anomalousPrompt(message, defaultValue = '', title = 'Anomalous',
 
         const dialog = document.createElement('div');
         dialog.style.background = 'linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98))';
-        dialog.style.border = '1px solid rgba(255, 255, 255, 0.12)';
+        dialog.style.border = '1px solid var(--amb-border-strong)';
         dialog.style.borderRadius = '16px';
         dialog.style.padding = '24px';
         dialog.style.maxWidth = '420px';
@@ -202,7 +202,7 @@ export function anomalousPrompt(message, defaultValue = '', title = 'Anomalous',
         input.style.width = '100%';
         input.style.padding = '10px 14px';
         input.style.borderRadius = '8px';
-        input.style.border = '1px solid rgba(255, 255, 255, 0.18)';
+        input.style.border = '1px solid var(--amb-border-strong)';
         input.style.background = 'rgba(0, 0, 0, 0.35)';
         input.style.color = '#fff';
         input.style.fontSize = '14px';
@@ -210,7 +210,7 @@ export function anomalousPrompt(message, defaultValue = '', title = 'Anomalous',
         input.style.outline = 'none';
         if (options.multiline) input.style.resize = 'vertical';
         input.onfocus = () => input.style.borderColor = '#1a73e8';
-        input.onblur = () => input.style.borderColor = 'rgba(255, 255, 255, 0.18)';
+        input.onblur = () => input.style.borderColor = 'var(--amb-border-strong)';
 
         const footer = document.createElement('div');
         footer.style.display = 'flex';
diff --git a/web/modules/ui_folder_manager.js b/web/modules/ui_folder_manager.js
index 7c81f37..83dd7e0 100644
--- a/web/modules/ui_folder_manager.js
+++ b/web/modules/ui_folder_manager.js
@@ -23,7 +23,7 @@ export async function openFolderManager() {
     modal.style.fontFamily = 'Roboto, "Segoe UI", sans-serif';
 
     const content = document.createElement('div');
-    content.style.background = '#1e1e1e';
+    content.style.background = 'var(--amb-bg-card)';
     content.style.borderRadius = '12px';
     content.style.padding = '24px';
     content.style.width = '500px';
@@ -54,10 +54,10 @@ export async function openFolderManager() {
     toggleContainer.style.justifyContent = 'center';
     toggleContainer.style.marginBottom = '15px';
     toggleContainer.style.gap = '20px';
-    toggleContainer.style.background = '#222';
+    toggleContainer.style.background = 'var(--amb-bg-card)';
     toggleContainer.style.padding = '10px';
     toggleContainer.style.borderRadius = '8px';
-    toggleContainer.style.border = '1px solid #444';
+    toggleContainer.style.border = '1px solid var(--amb-border-strong)';
 
     const abstractRadio = document.createElement('input');
     abstractRadio.type = 'radio';
@@ -104,9 +104,9 @@ export async function openFolderManager() {
     const listContainer = document.createElement('div');
     listContainer.style.flex = '1';
     listContainer.style.overflowY = 'auto';
-    listContainer.style.border = '1px solid #444';
+    listContainer.style.border = '1px solid var(--amb-border-strong)';
     listContainer.style.borderRadius = '8px';
-    listContainer.style.background = '#2a2a2a';
+    listContainer.style.background = 'var(--amb-bg-card-hover)';
     listContainer.style.padding = '8px';
 
     content.appendChild(listContainer);
@@ -173,7 +173,7 @@ export async function openFolderManager() {
             row.style.justifyContent = 'space-between';
             row.style.padding = '10px 12px';
             row.style.margin = '4px 0';
-            row.style.background = '#333';
+            row.style.background = 'var(--amb-bg-card-hover)';
             row.style.borderRadius = '6px';
             row.style.cursor = 'grab';
             row.style.border = '1px solid transparent';
@@ -275,7 +275,7 @@ export async function openFolderManager() {
     cancelBtn.style.padding = '8px 16px';
     cancelBtn.style.background = 'transparent';
     cancelBtn.style.color = '#ccc';
-    cancelBtn.style.border = '1px solid #555';
+    cancelBtn.style.border = '1px solid var(--amb-border-strong)';
     cancelBtn.style.borderRadius = '6px';
     cancelBtn.style.cursor = 'pointer';
     cancelBtn.onclick = () => modal.remove();
diff --git a/web/modules/ui_gallery.js b/web/modules/ui_gallery.js
index ae61018..cc75a5f 100644
--- a/web/modules/ui_gallery.js
+++ b/web/modules/ui_gallery.js
@@ -237,7 +237,7 @@ export async function loadGalleryImages(page = 1, reset = false, { refresh = res
 
                         const cancelBtn = document.createElement('button');
                         cancelBtn.textContent = t('galleryCancel');
-                        cancelBtn.style.background = '#444';
+                        cancelBtn.style.background = 'var(--amb-bg-card-hover)';
                         cancelBtn.style.color = '#fff';
                         cancelBtn.style.border = 'none';
                         cancelBtn.style.padding = '10px 16px';
@@ -245,7 +245,7 @@ export async function loadGalleryImages(page = 1, reset = false, { refresh = res
                         cancelBtn.style.cursor = 'pointer';
                         cancelBtn.style.transition = 'background 0.2s';
                         cancelBtn.onmouseover = () => cancelBtn.style.background = '#666';
-                        cancelBtn.onmouseout = () => cancelBtn.style.background = '#444';
+                        cancelBtn.onmouseout = () => cancelBtn.style.background = 'var(--amb-bg-card-hover)';
 
                         cancelBtn.onclick = (ce) => {
                             ce.stopPropagation();
@@ -360,7 +360,7 @@ export async function showGeneratedGallery(model) {
             modalBox.id = 'anomalous-generated-gallery-modal';
             modalBox.style.width = '95%';
             modalBox.style.maxHeight = '95%';
-            modalBox.style.backgroundColor = 'var(--comfy-menu-bg, #222)';
+            modalBox.style.backgroundColor = 'var(--comfy-menu-bg, var(--amb-bg-card))';
             modalBox.style.borderRadius = '12px';
             modalBox.style.display = 'flex';
             modalBox.style.flexDirection = 'column';
@@ -369,11 +369,11 @@ export async function showGeneratedGallery(model) {
 
             const header = document.createElement('div');
             header.style.padding = '15px 25px';
-            header.style.background = '#333';
+            header.style.background = 'var(--amb-bg-card-hover)';
             header.style.display = 'flex';
             header.style.justifyContent = 'space-between';
             header.style.alignItems = 'center';
-            header.style.borderBottom = '1px solid #444';
+            header.style.borderBottom = '1px solid var(--amb-border-strong)';
 
             const title = document.createElement('h2');
             title.id = 'anomalous-generated-gallery-title';
@@ -491,7 +491,7 @@ export async function showGeneratedGallery(model) {
                 setCoverBtn.style.right = '5px';
                 setCoverBtn.style.background = 'rgba(40, 167, 69, 0.85)';
                 setCoverBtn.style.color = '#fff';
-                setCoverBtn.style.border = '1px solid rgba(255,255,255,0.3)';
+                setCoverBtn.style.border = '1px solid var(--amb-border-strong)';
                 setCoverBtn.style.borderRadius = '4px';
                 setCoverBtn.style.padding = '4px 8px';
                 setCoverBtn.style.cursor = 'pointer';
diff --git a/web/modules/ui_help.js b/web/modules/ui_help.js
index 1a17050..0e95116 100644
--- a/web/modules/ui_help.js
+++ b/web/modules/ui_help.js
@@ -24,8 +24,8 @@ export function showHelp() {
         this.helpModal.style.justifyContent = 'center';
 
         const box = document.createElement('div');
-        box.style.background = 'var(--bg-color, #222)';
-        box.style.border = '1px solid var(--border-color, #444)';
+        box.style.background = 'var(--bg-color, var(--amb-bg-card))';
+        box.style.border = '1px solid var(--border-color, var(--amb-border-strong))';
         box.style.borderRadius = '8px';
         box.style.width = '550px';
         box.style.maxWidth = '90%';
@@ -36,8 +36,8 @@ export function showHelp() {
 
         const header = document.createElement('div');
         header.style.padding = '15px 20px';
-        header.style.borderBottom = '1px solid #444';
-        header.style.background = '#333';
+        header.style.borderBottom = '1px solid var(--amb-border-strong)';
+        header.style.background = 'var(--amb-bg-card-hover)';
         header.style.display = 'flex';
         header.style.alignItems = 'center';
         header.style.justifyContent = 'space-between';
@@ -69,7 +69,7 @@ export function showHelp() {
 
         const footer = document.createElement('div');
         footer.style.padding = '15px';
-        footer.style.borderTop = '1px solid #444';
+        footer.style.borderTop = '1px solid var(--amb-border-strong)';
         footer.style.display = 'flex';
         footer.style.alignItems = 'center';
         footer.style.justifyContent = 'space-between';
@@ -95,7 +95,7 @@ export function showHelp() {
         replayGuideBtn.style.padding = '8px 12px';
         replayGuideBtn.style.background = 'transparent';
         replayGuideBtn.style.color = '#cbd5e1';
-        replayGuideBtn.style.border = '1px solid rgba(255,255,255,0.2)';
+        replayGuideBtn.style.border = '1px solid var(--amb-border-strong)';
         replayGuideBtn.style.borderRadius = '4px';
         replayGuideBtn.style.cursor = 'pointer';
         replayGuideBtn.onclick = () => {
@@ -109,7 +109,7 @@ export function showHelp() {
         const closeBtn = document.createElement('button');
         closeBtn.innerHTML = t('closeHelp');
         closeBtn.style.padding = '8px 16px';
-        closeBtn.style.background = '#444';
+        closeBtn.style.background = 'var(--amb-bg-card-hover)';
         closeBtn.style.color = '#fff';
         closeBtn.style.border = 'none';
         closeBtn.style.borderRadius = '4px';
diff --git a/web/modules/ui_material_application.js b/web/modules/ui_material_application.js
index 4f18c5c..643d224 100644
--- a/web/modules/ui_material_application.js
+++ b/web/modules/ui_material_application.js
@@ -247,7 +247,7 @@ function openMaterialChoiceDialog(owner, node, blocks, payload, droppedNode, gra
     for (const block of blocks) {
         const itemCard = document.createElement('div');
         itemCard.className = 'anomalous-material-choice-card';
-        itemCard.style.cssText = 'background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;transition:border-color 0.2s;';
+        itemCard.style.cssText = 'background:rgba(255,255,255,0.04);border:1px solid var(--amb-border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;transition:border-color 0.2s;';
 
         const headerRow = document.createElement('div');
         headerRow.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;';
@@ -259,8 +259,8 @@ function openMaterialChoiceDialog(owner, node, blocks, payload, droppedNode, gra
         }[block.promptRole] || '';
 
         const heading = document.createElement('div');
-        heading.style.cssText = 'font-weight:700;font-size:13px;color:#f3f4f6;display:flex;align-items:center;gap:6px;';
-        heading.innerHTML = `${roleBadge}<span>${escapeHtml(materialNodeHeading(block))} <small style="color:#9ca3af;font-size:11px;">#${block.node_id}</small></span>`;
+        heading.style.cssText = 'font-weight:700;font-size:13px;color:var(--amb-text-main);display:flex;align-items:center;gap:6px;';
+        heading.innerHTML = `${roleBadge}<span>${escapeHtml(materialNodeHeading(block))} <small style="color:var(--amb-text-muted);font-size:11px;">#${block.node_id}</small></span>`;
         headerRow.appendChild(heading);
         itemCard.appendChild(headerRow);
 
@@ -277,7 +277,7 @@ function openMaterialChoiceDialog(owner, node, blocks, payload, droppedNode, gra
         if (textContent) {
             const previewBox = document.createElement('div');
             previewBox.className = 'anomalous-material-snippet-box';
-            previewBox.style.cssText = 'background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.08);border-radius:6px;padding:8px 10px;font-size:11px;color:#d1d5db;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:80px;overflow:hidden;position:relative;transition:max-height 0.25s ease;';
+            previewBox.style.cssText = 'background:rgba(0,0,0,0.3);border:1px solid var(--amb-border);border-radius:6px;padding:8px 10px;font-size:11px;color:var(--amb-text-soft);line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:80px;overflow:hidden;position:relative;transition:max-height 0.25s ease;';
 
             const textSpan = document.createElement('span');
             textSpan.textContent = textContent;
@@ -287,7 +287,7 @@ function openMaterialChoiceDialog(owner, node, blocks, payload, droppedNode, gra
             if (textContent.length > 80 || textContent.includes('\n')) {
                 const toggleBtn = document.createElement('button');
                 toggleBtn.type = 'button';
-                toggleBtn.style.cssText = 'background:none;border:none;color:#60a5fa;cursor:pointer;font-size:11px;padding:2px 0;align-self:flex-start;text-decoration:underline;';
+                toggleBtn.style.cssText = 'background:none;border:none;color:var(--amb-link);cursor:pointer;font-size:11px;padding:2px 0;align-self:flex-start;text-decoration:underline;';
                 toggleBtn.textContent = t('expandText') || '展开全部 ▾';
                 let expanded = false;
                 toggleBtn.onclick = (e) => {
@@ -307,7 +307,7 @@ function openMaterialChoiceDialog(owner, node, blocks, payload, droppedNode, gra
             }
         } else if (Array.isArray(block.widgets_values) && block.widgets_values.length > 0) {
             const paramsSummary = document.createElement('div');
-            paramsSummary.style.cssText = 'font-size:11px;color:#9ca3af;background:rgba(0,0,0,0.2);padding:6px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+            paramsSummary.style.cssText = 'font-size:11px;color:var(--amb-text-muted);background:rgba(0,0,0,0.2);padding:6px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
             paramsSummary.textContent = block.widgets_values.slice(0, 5).join(' · ');
             itemCard.appendChild(paramsSummary);
         }
diff --git a/web/modules/ui_materials.js b/web/modules/ui_materials.js
index cc069ba..cd631bd 100644
--- a/web/modules/ui_materials.js
+++ b/web/modules/ui_materials.js
@@ -161,7 +161,7 @@ function ensureMaterialGuideStyles() {
             margin: 32px auto;
             padding: 28px 24px;
             background: rgba(255, 255, 255, 0.025);
-            border: 1px solid rgba(255, 255, 255, 0.08);
+            border: 1px solid var(--amb-border);
             border-radius: 16px;
             text-align: center;
             box-sizing: border-box;
@@ -174,8 +174,8 @@ function ensureMaterialGuideStyles() {
             width: 52px;
             height: 52px;
             border-radius: 50%;
-            background: rgba(59, 130, 246, 0.1);
-            border: 1px solid rgba(59, 130, 246, 0.25);
+            background: color-mix(in srgb, var(--amb-link) 10%, transparent);
+            border: 1px solid color-mix(in srgb, var(--amb-link) 25%, transparent);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -186,14 +186,14 @@ function ensureMaterialGuideStyles() {
             margin: 0;
             font-size: 16px;
             font-weight: 600;
-            color: #f1f5f9;
+            color: var(--amb-text-main);
             letter-spacing: 0.2px;
         }
         .anomalous-material-empty-subtitle {
             margin: 0;
             font-size: 12.5px;
             line-height: 1.55;
-            color: #94a3b8;
+            color: var(--amb-text-muted);
             max-width: 440px;
         }
         .anomalous-material-empty-steps {
@@ -206,7 +206,7 @@ function ensureMaterialGuideStyles() {
         }
         .anomalous-material-empty-step {
             background: rgba(255, 255, 255, 0.03);
-            border: 1px solid rgba(255, 255, 255, 0.06);
+            border: 1px solid var(--amb-border);
             border-radius: 10px;
             padding: 14px 14px;
             display: flex;
@@ -216,7 +216,7 @@ function ensureMaterialGuideStyles() {
         }
         .anomalous-material-empty-step:hover {
             background: rgba(255, 255, 255, 0.05);
-            border-color: rgba(255, 255, 255, 0.12);
+            border-color: var(--amb-border-strong);
         }
         .anomalous-material-step-icon {
             font-size: 20px;
@@ -225,14 +225,14 @@ function ensureMaterialGuideStyles() {
         }
         .anomalous-material-empty-step strong {
             font-size: 13px;
-            color: #e2e8f0;
+            color: var(--amb-text-main);
             font-weight: 600;
         }
         .anomalous-material-empty-step p {
             margin: 0;
             font-size: 11.5px;
             line-height: 1.5;
-            color: #94a3b8;
+            color: var(--amb-text-muted);
         }
         .anomalous-material-card {
             cursor: grab !important;
diff --git a/web/modules/ui_model_editor.js b/web/modules/ui_model_editor.js
index 17746fc..4aefd40 100644
--- a/web/modules/ui_model_editor.js
+++ b/web/modules/ui_model_editor.js
@@ -22,12 +22,12 @@ export function showEditModal(model) {
         modal.style.justifyContent = 'center';
 
         const content = document.createElement('div');
-        content.style.background = '#202124';
+        content.style.background = 'var(--amb-bg-card)';
         content.style.padding = '24px';
         content.style.borderRadius = '12px';
         content.style.width = '720px';
         content.style.maxWidth = '90%';
-        content.style.border = '1px solid #3c4043';
+        content.style.border = '1px solid var(--amb-border-strong)';
         content.style.boxShadow = '0 8px 32px rgba(0,0,0,0.5)';
         content.style.display = 'flex';
         content.style.flexDirection = 'row';
@@ -45,13 +45,13 @@ export function showEditModal(model) {
         const previewContainer = document.createElement('div');
         previewContainer.style.width = '100%';
         previewContainer.style.height = '320px';
-        previewContainer.style.background = '#303134';
+        previewContainer.style.background = 'var(--amb-bg-card-hover)';
         previewContainer.style.borderRadius = '8px';
         previewContainer.style.display = 'flex';
         previewContainer.style.alignItems = 'center';
         previewContainer.style.justifyContent = 'center';
         previewContainer.style.overflow = 'hidden';
-        previewContainer.style.border = '1px solid #3c4043';
+        previewContainer.style.border = '1px solid var(--amb-border-strong)';
         previewContainer.style.position = 'relative';
 
         if (model.preview_url) {
@@ -113,15 +113,15 @@ export function showEditModal(model) {
         const galleryBtn = document.createElement('button');
         galleryBtn.innerHTML = `<svg style="width:13px;height:13px;margin-right:6px;vertical-align:-2px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>${t('detailPickGallery')}`;
         galleryBtn.style.padding = '8px';
-        galleryBtn.style.background = '#303134';
+        galleryBtn.style.background = 'var(--amb-bg-card-hover)';
         galleryBtn.style.color = '#e5e7eb';
         galleryBtn.style.border = '1px solid #5f6368';
         galleryBtn.style.borderRadius = '6px';
         galleryBtn.style.cursor = 'pointer';
         galleryBtn.style.fontWeight = '500';
         galleryBtn.style.fontSize = '0.9em';
-        galleryBtn.onmouseover = () => galleryBtn.style.background = '#3c4043';
-        galleryBtn.onmouseout = () => galleryBtn.style.background = '#303134';
+        galleryBtn.onmouseover = () => galleryBtn.style.background = 'var(--amb-bg-card-hover)';
+        galleryBtn.onmouseout = () => galleryBtn.style.background = 'var(--amb-bg-card-hover)';
         galleryBtn.onclick = () => {
             document.body.removeChild(modal);
             this.showGallerySelectMode(model);
@@ -130,15 +130,15 @@ export function showEditModal(model) {
         const localBtn = document.createElement('button');
         localBtn.innerHTML = `<svg style="width:13px;height:13px;margin-right:6px;vertical-align:-2px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>${t('detailUploadLocal')}`;
         localBtn.style.padding = '8px';
-        localBtn.style.background = '#303134';
+        localBtn.style.background = 'var(--amb-bg-card-hover)';
         localBtn.style.color = '#e5e7eb';
         localBtn.style.border = '1px solid #5f6368';
         localBtn.style.borderRadius = '6px';
         localBtn.style.cursor = 'pointer';
         localBtn.style.fontWeight = '500';
         localBtn.style.fontSize = '0.9em';
-        localBtn.onmouseover = () => localBtn.style.background = '#3c4043';
-        localBtn.onmouseout = () => localBtn.style.background = '#303134';
+        localBtn.onmouseover = () => localBtn.style.background = 'var(--amb-bg-card-hover)';
+        localBtn.onmouseout = () => localBtn.style.background = 'var(--amb-bg-card-hover)';
         localBtn.onclick = () => {
             const fileInput = document.createElement('input');
             fileInput.type = 'file';
@@ -205,7 +205,7 @@ export function showEditModal(model) {
         const inputStyle = `
             width: 100%;
             padding: 12px 14px;
-            background: #303134;
+            background: var(--amb-bg-card-hover);
             color: #e8eaed;
             border: 1px solid #5f6368;
             border-radius: 6px;
@@ -230,10 +230,10 @@ export function showEditModal(model) {
         notesInput.style.minHeight = '150px';
         notesInput.style.resize = 'vertical';
         // Notebook styling override
-        notesInput.style.background = 'linear-gradient(135deg, #262522 0%, #202124 100%)';
+        notesInput.style.background = 'linear-gradient(135deg, var(--amb-bg-card-hover) 0%, var(--amb-bg-card) 100%)';
         notesInput.style.backgroundImage = 'repeating-linear-gradient(transparent, transparent 23px, rgba(163, 141, 83, 0.04) 23px, rgba(163, 141, 83, 0.04) 24px)';
         notesInput.style.backgroundAttachment = 'local';
-        notesInput.style.border = '1px solid #3c4043';
+        notesInput.style.border = '1px solid var(--amb-border-strong)';
         notesInput.style.borderLeft = '4px solid #a38d53';
         notesInput.style.borderRadius = '4px 8px 8px 4px';
         notesInput.style.color = '#d1c9b4';
@@ -247,7 +247,7 @@ export function showEditModal(model) {
         };
         notesInput.onblur = () => {
             notesInput.style.boxShadow = 'none';
-            notesInput.style.borderColor = '#3c4043';
+            notesInput.style.borderColor = 'var(--amb-border-strong)';
         };
 
         const physicalRow = document.createElement('div');
diff --git a/web/modules/ui_model_selector.js b/web/modules/ui_model_selector.js
index b858368..59dc2f9 100644
--- a/web/modules/ui_model_selector.js
+++ b/web/modules/ui_model_selector.js
@@ -37,7 +37,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
         modal.style.fontFamily = 'Roboto, Inter, sans-serif';
 
         const contentDiv = document.createElement('div');
-        contentDiv.style.background = '#202124';
+        contentDiv.style.background = 'var(--amb-bg-card)';
         contentDiv.style.borderRadius = '8px';
         contentDiv.style.width = '92vw';
         contentDiv.style.height = '88vh';
@@ -49,7 +49,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
         // Header
         const header = document.createElement('div');
         header.style.padding = '16px 24px';
-        header.style.borderBottom = '1px solid #3c4043';
+        header.style.borderBottom = '1px solid var(--amb-border-strong)';
         header.style.display = 'flex';
         header.style.justifyContent = 'space-between';
         header.style.alignItems = 'center';
@@ -90,10 +90,10 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
         // Left Panel
         const leftPanel = document.createElement('div');
         leftPanel.style.width = '280px';
-        leftPanel.style.borderRight = '1px solid #3c4043';
+        leftPanel.style.borderRight = '1px solid var(--amb-border-strong)';
         leftPanel.style.display = 'flex';
         leftPanel.style.flexDirection = 'column';
-        leftPanel.style.background = '#171717';
+        leftPanel.style.background = 'var(--amb-bg-panel)';
         
         const leftTitle = document.createElement('div');
         leftTitle.textContent = t('detailFolders');
@@ -115,12 +115,12 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
         rightPanel.style.flex = '1';
         rightPanel.style.display = 'flex';
         rightPanel.style.flexDirection = 'column';
-        rightPanel.style.background = '#202124';
+        rightPanel.style.background = 'var(--amb-bg-card)';
         
         // Toolbar
         const toolbar = document.createElement('div');
         toolbar.style.padding = '12px 24px';
-        toolbar.style.borderBottom = '1px solid #3c4043';
+        toolbar.style.borderBottom = '1px solid var(--amb-border-strong)';
         toolbar.style.display = 'flex';
         toolbar.style.gap = '12px';
         toolbar.style.alignItems = 'center';
@@ -231,10 +231,10 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
                 } else {
 
                 
-                    card.style.border = '1px solid #3c4043';
+                    card.style.border = '1px solid var(--amb-border-strong)';
 
                 
-                    card.style.background = '#303134';
+                    card.style.background = 'var(--amb-bg-card-hover)';
 
                 
                     cbWrapper.style.background = 'rgba(0,0,0,0.3)';
@@ -297,7 +297,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
         toolbar.appendChild(createTBtn(t('detailSelectNoDesc'), () => handleBatchSelect('no_desc'), true));
         
         const divi = document.createElement('div');
-        divi.style.width = '1px'; divi.style.height = '24px'; divi.style.background = '#3c4043'; divi.style.margin = '0 8px';
+        divi.style.width = '1px'; divi.style.height = '24px'; divi.style.background = 'var(--amb-bg-card-hover)'; divi.style.margin = '0 8px';
         toolbar.appendChild(divi);
 
         toolbar.appendChild(createTBtn(t('detailSelectAll'), () => handleBatchSelect('all')));
@@ -320,7 +320,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
         grid.style.gridAutoRows = 'max-content';
         grid.style.gap = '20px';
         grid.style.alignContent = 'start';
-        grid.style.background = '#171717';
+        grid.style.background = 'var(--amb-bg-panel)';
         rightPanel.appendChild(grid);
 
         body.appendChild(leftPanel);
@@ -330,7 +330,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
         // Footer (Confirm)
         const footer = document.createElement('div');
         footer.style.padding = '12px 24px';
-        footer.style.borderTop = '1px solid #3c4043';
+        footer.style.borderTop = '1px solid var(--amb-border-strong)';
         footer.style.display = 'flex';
         footer.style.justifyContent = 'flex-end';
         footer.style.gap = '12px';
@@ -385,11 +385,11 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
                 card.dataset.mpathidx = m.path_idx;
                 card.dataset.msubfolder = m.subfolder;
                 
-                card.style.background = '#303134';
+                card.style.background = 'var(--amb-bg-card-hover)';
                 card.style.borderRadius = '8px';
                 card.style.overflow = 'hidden';
                 card.style.position = 'relative';
-                card.style.border = '1px solid #3c4043';
+                card.style.border = '1px solid var(--amb-border-strong)';
                 card.style.display = 'flex';
                 card.style.flexDirection = 'column';
                 card.style.aspectRatio = '2 / 3';
@@ -399,7 +399,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
                 
                 const imgContainer = document.createElement('div');
                 imgContainer.style.flex = '1';
-                imgContainer.style.background = '#202124';
+                imgContainer.style.background = 'var(--amb-bg-card)';
                 imgContainer.style.display = 'flex';
                 imgContainer.style.justifyContent = 'center';
                 imgContainer.style.alignItems = 'center';
@@ -478,13 +478,13 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
                 
                 const nameBar = document.createElement('div');
                 nameBar.style.padding = '12px';
-                nameBar.style.background = '#303134';
+                nameBar.style.background = 'var(--amb-bg-card-hover)';
                 nameBar.style.fontSize = '13px';
                 nameBar.style.color = '#e8eaed';
                 nameBar.style.whiteSpace = 'nowrap';
                 nameBar.style.overflow = 'hidden';
                 nameBar.style.textOverflow = 'ellipsis';
-                nameBar.style.borderTop = '1px solid #3c4043';
+                nameBar.style.borderTop = '1px solid var(--amb-border-strong)';
                 nameBar.innerText = m.filename;
                 card.appendChild(nameBar);
                 
diff --git a/web/modules/ui_node_assistant.js b/web/modules/ui_node_assistant.js
index cefd191..8d05008 100644
--- a/web/modules/ui_node_assistant.js
+++ b/web/modules/ui_node_assistant.js
@@ -41,7 +41,7 @@ if (!this._assistantPanelHooked) {
 
         const placeholder = document.createElement('div');
         placeholder.id = 'anomalous-assistant-placeholder';
-        placeholder.style.cssText = 'display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:#666;font-size:15px;gap:12px;padding:40px;text-align:center;';
+        placeholder.style.cssText = 'display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--amb-text-dim);font-size:15px;gap:12px;padding:40px;text-align:center;';
         placeholder.innerHTML = `<div style="font-size:48px;">🤖</div><div>${t('assistantSelectNode')}</div>`;
         this.assistantPanel.appendChild(placeholder);
 
@@ -57,11 +57,11 @@ export function renderAssistantModelCard(node, w, container) {
         const pickerType = inferPickerModelType(node, w);
 
         const wrapper = document.createElement('div');
-        wrapper.style.cssText = 'margin:12px 16px 16px;padding:10px;border:1px solid rgba(255,255,255,0.075);border-radius:14px;background:linear-gradient(160deg,rgba(31,33,42,0.96),rgba(20,21,27,0.96));display:flex;flex-direction:column;gap:12px;box-shadow:0 16px 35px rgba(0,0,0,0.2);';
+        wrapper.style.cssText = 'margin:12px 16px 16px;padding:10px;border:1px solid var(--amb-border);border-radius:14px;background:linear-gradient(160deg,rgba(31,33,42,0.96),rgba(20,21,27,0.96));display:flex;flex-direction:column;gap:12px;box-shadow:0 16px 35px rgba(0,0,0,0.2);';
 
         // Preview image
         const previewBox = document.createElement('div');
-        previewBox.style.cssText = 'width:100%;aspect-ratio:1.65;max-height:260px;background:radial-gradient(circle at 50% 20%,#252a3b,#0b0c10 70%);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,0.05);';
+        previewBox.style.cssText = 'width:100%;aspect-ratio:1.65;max-height:260px;background:radial-gradient(circle at 50% 20%,#252a3b,var(--amb-bg-page) 70%);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--amb-border);';
         previewBox.innerHTML = `<span style="color:#444;font-size:13px;">${t('doctorLoadingPreview')}</span>`;
         wrapper.appendChild(previewBox);
 
@@ -80,7 +80,7 @@ export function renderAssistantModelCard(node, w, container) {
         pathEl.innerText = val;
         const modelTypeBadge = document.createElement('span');
         modelTypeBadge.textContent = pickerType.label;
-        modelTypeBadge.style.cssText = 'padding:5px 8px;border-radius:999px;background:rgba(138,180,248,0.1);border:1px solid rgba(138,180,248,0.22);color:#a9c7ff;font-size:9px;font-weight:750;white-space:nowrap;';
+        modelTypeBadge.style.cssText = 'padding:5px 8px;border-radius:999px;background:color-mix(in srgb, var(--amb-link) 10%, transparent);border:1px solid color-mix(in srgb, var(--amb-link) 22%, transparent);color:var(--amb-link);font-size:9px;font-weight:750;white-space:nowrap;';
         identityCopy.append(nameEl, pathEl);
         identityRow.append(identityCopy, modelTypeBadge);
         wrapper.appendChild(identityRow);
@@ -95,7 +95,7 @@ export function renderAssistantModelCard(node, w, container) {
         actionRow.style.cssText = 'display:flex;gap:8px;flex-wrap:wrap;';
         const profileBtn = document.createElement('button');
         profileBtn.textContent = t('doctorProfile');
-        profileBtn.style.cssText = 'flex:1;padding:10px 12px;background:rgba(138,180,248,0.09);color:#a9c7ff;border:1px solid rgba(138,180,248,0.22);border-radius:9px;cursor:pointer;font-size:12px;font-weight:700;transition:filter 0.2s;';
+        profileBtn.style.cssText = 'flex:1;padding:10px 12px;background:color-mix(in srgb, var(--amb-link) 9%, transparent);color:var(--amb-link);border:1px solid color-mix(in srgb, var(--amb-link) 22%, transparent);border-radius:9px;cursor:pointer;font-size:12px;font-weight:700;transition:filter 0.2s;';
         profileBtn.onmouseover = () => profileBtn.style.filter = 'brightness(1.2)';
         profileBtn.onmouseout = () => profileBtn.style.filter = 'brightness(1)';
 
@@ -163,7 +163,7 @@ if (triggers && triggers.length > 0) {
                         const trigSection = document.createElement('div');
                         trigSection.style.cssText = 'background:rgba(255,255,255,0.04);border-radius:6px;padding:10px 12px;';
                         const trigTitle = document.createElement('div');
-                        trigTitle.style.cssText = 'color:#aaa;font-size:11px;margin-bottom:8px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;';
+                        trigTitle.style.cssText = 'color:var(--amb-text-muted);font-size:11px;margin-bottom:8px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;';
                         trigTitle.textContent = t('doctorTriggerWords');
                         const tagList = document.createElement('div');
                         tagList.style.cssText = 'display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;';
@@ -179,7 +179,7 @@ if (triggers && triggers.length > 0) {
                             tagList.appendChild(tag);
                         });
                         const copyAll = document.createElement('button');
-                        copyAll.style.cssText = 'background:transparent;border:1px solid #444;color:#888;border-radius:4px;padding:3px 8px;font-size:11px;cursor:pointer;margin-top:4px;';
+                        copyAll.style.cssText = 'background:transparent;border:1px solid var(--amb-border-strong);color:var(--amb-text-muted);border-radius:4px;padding:3px 8px;font-size:11px;cursor:pointer;margin-top:4px;';
                         copyAll.textContent = t('doctorCopyAll');
                         copyAll.onclick = () => {
                             navigator.clipboard.writeText(words.join(', ')).then(() => { copyAll.textContent = '✅'; setTimeout(() => copyAll.textContent = t('doctorCopyAll'), 1500); });
@@ -194,7 +194,7 @@ if (triggers && triggers.length > 0) {
                     const textNotes = meta.custom_notes || meta.notes;
 if (textNotes) {
                         const notesCard = document.createElement('div');
-                        notesCard.style.cssText = 'background:linear-gradient(135deg,#262522 0%,#202124 100%);border:1px solid #3c4043;border-left:4px solid #a38d53;border-radius:4px 8px 8px 4px;padding:12px 14px;';
+                        notesCard.style.cssText = 'background:linear-gradient(135deg,var(--amb-bg-card-hover) 0%,var(--amb-bg-card) 100%);border:1px solid var(--amb-border-strong);border-left:4px solid #a38d53;border-radius:4px 8px 8px 4px;padding:12px 14px;';
                         const notesTitle = document.createElement('div');
                         notesTitle.style.cssText = 'color:#a38d53;font-size:11px;font-weight:bold;margin-bottom:6px;';
                         notesTitle.textContent = t('doctorNotes');
@@ -232,7 +232,7 @@ export function _loadAssistantHistory(filename, container, model) {
                 const sectionHeader = document.createElement('div');
                 sectionHeader.style.cssText = 'display:flex;align-items:center;justify-content:space-between;';
                 const sectionTitle = document.createElement('div');
-                sectionTitle.style.cssText = 'color:#aaa;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;';
+                sectionTitle.style.cssText = 'color:var(--amb-text-muted);font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;';
                 sectionTitle.textContent = t('assistantHistoryTitle', { count: images.length });
                 sectionHeader.appendChild(sectionTitle);
 
@@ -240,7 +240,7 @@ export function _loadAssistantHistory(filename, container, model) {
 if (model) {
                     const viewAllBtn = document.createElement('button');
                     viewAllBtn.textContent = t('assistantViewAll');
-                    viewAllBtn.style.cssText = 'background:transparent;border:1px solid rgba(255,255,255,0.2);color:#e5e7eb;font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer;transition:all 0.2s;';
+                    viewAllBtn.style.cssText = 'background:transparent;border:1px solid var(--amb-border-strong);color:var(--amb-text-main);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer;transition:all 0.2s;';
                     viewAllBtn.onmouseover = () => { viewAllBtn.style.background = 'rgba(255,255,255,0.1)'; };
                     viewAllBtn.onmouseout = () => { viewAllBtn.style.background = 'transparent'; };
                     viewAllBtn.onclick = () => this.showGeneratedGallery(model);
@@ -252,7 +252,7 @@ if (model) {
                 grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;';
                 images.slice(0, 16).forEach(img => {
                     const card = document.createElement('div');
-                    card.style.cssText = 'border-radius:6px;overflow:hidden;aspect-ratio:1;background:#111;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;';
+                    card.style.cssText = 'border-radius:6px;overflow:hidden;aspect-ratio:1;background:var(--amb-bg-page);cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;';
                     card.onmouseover = () => { 
                         card.style.transform = 'scale(1.05)'; card.style.boxShadow = '0 4px 12px rgba(0,0,0,0.5)'; 
                         const v = card.querySelector('video'); if (v) v.play().catch(()=>{}); 
@@ -378,8 +378,8 @@ for (const w of node.widgets) {
         nodeContent.innerHTML = '';
 
         const titleBar = document.createElement('div');
-        titleBar.style.cssText = 'margin:14px 16px 0;padding:16px;border:1px solid rgba(255,255,255,0.1);border-radius:12px;background:rgba(255,255,255,0.04);display:flex;align-items:center;gap:12px;flex-shrink:0;box-shadow:0 8px 24px rgba(0,0,0,0.25);';
-        titleBar.innerHTML = `<span style="width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);">🤖</span><span style="display:flex;flex-direction:column;min-width:0;gap:3px;"><span style="font-size:10px;letter-spacing:0.11em;text-transform:uppercase;color:#9ca3af;">${t('assistantSelectedNode')}</span><span class="ast-title" style="font-weight:700;color:#f3f4f6;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span></span><span class="ast-type" style="font-size:10px;color:#d1d5db;margin-left:auto;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);max-width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span>`;
+        titleBar.style.cssText = 'margin:14px 16px 0;padding:16px;border:1px solid var(--amb-border);border-radius:12px;background:rgba(255,255,255,0.04);display:flex;align-items:center;gap:12px;flex-shrink:0;box-shadow:0 8px 24px rgba(0,0,0,0.25);';
+        titleBar.innerHTML = `<span style="width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(255,255,255,0.08);border:1px solid var(--amb-border-strong);">🤖</span><span style="display:flex;flex-direction:column;min-width:0;gap:3px;"><span style="font-size:10px;letter-spacing:0.11em;text-transform:uppercase;color:var(--amb-text-muted);">${t('assistantSelectedNode')}</span><span class="ast-title" style="font-weight:700;color:var(--amb-text-main);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span></span><span class="ast-type" style="font-size:10px;color:var(--amb-text-soft);margin-left:auto;padding:4px 8px;border-radius:999px;border:1px solid var(--amb-border-strong);background:rgba(255,255,255,0.06);max-width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span>`;
         titleBar.querySelector('.ast-title').textContent = node.title || node.type || 'Node';
         titleBar.querySelector('.ast-type').textContent = node.type || '';
 
@@ -410,8 +410,8 @@ for (const w of node.widgets) {
             button.disabled = !enabled;
             const gridPlacement = primary ? 'grid-column:1/-1;' : '';
             button.style.cssText = gridPlacement + (enabled
-                ? `min-width:0;padding:${primary ? '13px 14px' : '11px 10px'};background:${accent};color:#fff;border:1px solid rgba(255,255,255,0.14);border-radius:11px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;transition:transform 0.15s,filter 0.15s,box-shadow 0.15s;box-shadow:0 8px 18px rgba(0,0,0,0.14);`
-                : 'min-width:0;padding:11px 10px;background:rgba(255,255,255,0.035);color:#656b78;border:1px solid rgba(255,255,255,0.055);border-radius:11px;cursor:not-allowed;text-align:left;display:flex;align-items:center;gap:9px;');
+                ? `min-width:0;padding:${primary ? '13px 14px' : '11px 10px'};background:${accent};color:#fff;border:1px solid var(--amb-border-strong);border-radius:11px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;transition:transform 0.15s,filter 0.15s,box-shadow 0.15s;box-shadow:0 8px 18px rgba(0,0,0,0.14);`
+                : 'min-width:0;padding:11px 10px;background:rgba(255,255,255,0.035);color:#656b78;border:1px solid var(--amb-border);border-radius:11px;cursor:not-allowed;text-align:left;display:flex;align-items:center;gap:9px;');
             const iconEl = document.createElement('span');
             iconEl.textContent = icon;
             iconEl.style.cssText = `width:${primary ? '34px' : '28px'};height:${primary ? '34px' : '28px'};border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,${enabled ? '0.14' : '0.04'});font-size:${primary ? '17px' : '14px'};flex-shrink:0;`;
diff --git a/web/modules/ui_node_model_picker.js b/web/modules/ui_node_model_picker.js
index 65c6ade..3954e28 100644
--- a/web/modules/ui_node_model_picker.js
+++ b/web/modules/ui_node_model_picker.js
@@ -105,10 +105,10 @@ export function _openGalleryReplacer(node, w, options = {}) {
             : t('pickerChangeTitle');
         const typeBadge = document.createElement('span');
         typeBadge.textContent = pickerType.label;
-        typeBadge.style.cssText = 'padding:5px 10px;border-radius:20px;background:rgba(138,180,248,0.1);border:1px solid rgba(138,180,248,0.25);color:#a9c7ff;font-size:10px;font-weight:750;';
+        typeBadge.style.cssText = 'padding:5px 10px;border-radius:20px;background:color-mix(in srgb, var(--amb-link) 10%, transparent);border:1px solid color-mix(in srgb, var(--amb-link) 25%, transparent);color:var(--amb-link);font-size:10px;font-weight:750;';
         const closeBtn = document.createElement('button');
         closeBtn.textContent = '✕';
-        closeBtn.style.cssText = 'margin-left:auto;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);color:#aaa;font-size:20px;cursor:pointer;';
+        closeBtn.style.cssText = 'margin-left:auto;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid var(--amb-border);color:var(--amb-text-muted);font-size:20px;cursor:pointer;';
         closeBtn.onclick = closeModal;
         headerCopy.append(eyebrow, title);
         header.append(headerIcon, headerCopy, typeBadge, closeBtn);
@@ -121,30 +121,30 @@ export function _openGalleryReplacer(node, w, options = {}) {
         const body = document.createElement('div');
         body.style.cssText = 'display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:14px;min-height:0;flex:1;';
         const folderPanel = document.createElement('aside');
-        folderPanel.style.cssText = 'background:rgba(20,22,29,0.92);border:1px solid rgba(255,255,255,0.075);border-radius:13px;overflow:auto;padding:10px;box-shadow:0 14px 35px rgba(0,0,0,0.18);';
+        folderPanel.style.cssText = 'background:rgba(20,22,29,0.92);border:1px solid var(--amb-border);border-radius:13px;overflow:auto;padding:10px;box-shadow:0 14px 35px rgba(0,0,0,0.18);';
         const folderTitle = document.createElement('div');
         folderTitle.textContent = t('pickerFolders');
-        folderTitle.style.cssText = 'font-size:13px;font-weight:700;color:#ddd;padding:8px 10px 10px;';
+        folderTitle.style.cssText = 'font-size:13px;font-weight:700;color:var(--amb-text-soft);padding:8px 10px 10px;';
         const folderList = document.createElement('div');
         folderList.style.cssText = 'display:flex;flex-direction:column;gap:3px;';
         folderPanel.append(folderTitle, folderList);
 
         const content = document.createElement('section');
-        content.style.cssText = 'display:flex;flex-direction:column;min-width:0;min-height:0;background:rgba(18,20,27,0.92);border:1px solid rgba(255,255,255,0.075);border-radius:13px;overflow:hidden;box-shadow:0 14px 35px rgba(0,0,0,0.18);';
+        content.style.cssText = 'display:flex;flex-direction:column;min-width:0;min-height:0;background:rgba(18,20,27,0.92);border:1px solid var(--amb-border);border-radius:13px;overflow:hidden;box-shadow:0 14px 35px rgba(0,0,0,0.18);';
         const toolbar = document.createElement('div');
-        toolbar.style.cssText = 'display:flex;gap:10px;padding:12px;border-bottom:1px solid #333;flex-wrap:wrap;align-items:center;';
+        toolbar.style.cssText = 'display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--amb-border-strong);flex-wrap:wrap;align-items:center;';
         const searchInput = document.createElement('input');
         searchInput.type = 'search';
         searchInput.placeholder = t('pickerSearch');
-        searchInput.style.cssText = 'flex:1;min-width:220px;padding:10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,0.1);background:#222631;color:#fff;font-size:13px;outline:none;';
+        searchInput.style.cssText = 'flex:1;min-width:220px;padding:10px 12px;border-radius:9px;border:1px solid var(--amb-border);background:var(--amb-bg-card-hover);color:#fff;font-size:13px;outline:none;';
         const baseFilterSelect = document.createElement('select');
-        baseFilterSelect.style.cssText = `display:${pickerType.isLora ? 'block' : 'none'};padding:10px 12px;border-radius:9px;border:1px solid rgba(0,220,180,0.2);background:#1d292b;color:#9be8d9;font-size:12px;max-width:230px;`;
+        baseFilterSelect.style.cssText = `display:${pickerType.isLora ? 'block' : 'none'};padding:10px 12px;border-radius:9px;border:1px solid rgba(0,220,180,0.2);background:var(--amb-bg-card-hover);color:#9be8d9;font-size:12px;max-width:230px;`;
         const allBaseOption = document.createElement('option');
         allBaseOption.value = '';
         allBaseOption.textContent = t('pickerMainAll');
         baseFilterSelect.appendChild(allBaseOption);
         const sortSelect = document.createElement('select');
-        sortSelect.style.cssText = 'padding:10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,0.1);background:#222631;color:#fff;font-size:12px;';
+        sortSelect.style.cssText = 'padding:10px 12px;border-radius:9px;border:1px solid var(--amb-border);background:var(--amb-bg-card-hover);color:#fff;font-size:12px;';
         [
             ['name-asc', t('pickerNameAsc')],
             ['name-desc', t('pickerNameDesc')],
@@ -156,13 +156,13 @@ export function _openGalleryReplacer(node, w, options = {}) {
             sortSelect.appendChild(option);
         });
         const resultCount = document.createElement('span');
-        resultCount.style.cssText = 'color:#888;font-size:12px;white-space:nowrap;';
+        resultCount.style.cssText = 'color:var(--amb-text-muted);font-size:12px;white-space:nowrap;';
         toolbar.append(searchInput, baseFilterSelect, sortSelect, resultCount);
         content.appendChild(toolbar);
 
         const loadingText = document.createElement('div');
         loadingText.textContent = t('pickerLoadingCovers');
-        loadingText.style.cssText = 'color:#888;font-size:13px;padding:10px 14px 0;';
+        loadingText.style.cssText = 'color:var(--amb-text-muted);font-size:13px;padding:10px 14px 0;';
         const gridScroll = document.createElement('div');
         gridScroll.style.cssText = 'overflow:auto;min-height:0;flex:1;padding:14px;';
         const grid = document.createElement('div');
@@ -175,10 +175,10 @@ export function _openGalleryReplacer(node, w, options = {}) {
         const footer = document.createElement('div');
         footer.style.cssText = 'display:flex;align-items:center;gap:12px;margin-top:14px;flex-shrink:0;';
         const selectionText = document.createElement('div');
-        selectionText.style.cssText = 'min-width:0;flex:1;color:#aaa;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+        selectionText.style.cssText = 'min-width:0;flex:1;color:var(--amb-text-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
         const cancelBtn = document.createElement('button');
         cancelBtn.textContent = t('pickerCancel');
-        cancelBtn.style.cssText = 'padding:10px 18px;background:#333;color:#ddd;border:1px solid #555;border-radius:7px;cursor:pointer;';
+        cancelBtn.style.cssText = 'padding:10px 18px;background:var(--amb-bg-card-hover);color:var(--amb-text-soft);border:1px solid var(--amb-border-strong);border-radius:7px;cursor:pointer;';
         cancelBtn.onclick = closeModal;
         const confirmBtn = document.createElement('button');
         confirmBtn.textContent = mode === 'insert'
@@ -318,9 +318,9 @@ export function _openGalleryReplacer(node, w, options = {}) {
                     const card = document.createElement('div');
                     card.tabIndex = 0;
                     card.setAttribute('role', 'button');
-                    card.style.cssText = `position:relative;background:linear-gradient(160deg,#252935,#1b1d24);border-radius:11px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;border:1px solid ${isSelected ? '#6ea8ff' : isCurrent ? '#e9b949' : 'rgba(255,255,255,0.09)'};box-shadow:${isSelected ? '0 0 0 2px rgba(88,151,255,0.22),0 14px 28px rgba(0,0,0,0.28)' : '0 8px 20px rgba(0,0,0,0.16)'};transition:transform 0.12s,box-shadow 0.12s;min-width:0;`;
+                    card.style.cssText = `position:relative;background:linear-gradient(160deg,var(--amb-bg-card-hover),var(--amb-bg-card));border-radius:11px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;border:1px solid ${isSelected ? '#6ea8ff' : isCurrent ? '#e9b949' : 'rgba(255,255,255,0.09)'};box-shadow:${isSelected ? '0 0 0 2px rgba(88,151,255,0.22),0 14px 28px rgba(0,0,0,0.28)' : '0 8px 20px rgba(0,0,0,0.16)'};transition:transform 0.12s,box-shadow 0.12s;min-width:0;`;
                     const previewBox = document.createElement('div');
-                    previewBox.style.cssText = 'height:150px;background:radial-gradient(circle at 50% 15%,#2b3041,#0d0e13 72%);display:flex;align-items:center;justify-content:center;font-size:30px;position:relative;overflow:hidden;';
+                    previewBox.style.cssText = 'height:150px;background:radial-gradient(circle at 50% 15%,#2b3041,var(--amb-bg-page) 72%);display:flex;align-items:center;justify-content:center;font-size:30px;position:relative;overflow:hidden;';
                     const previewUrl = info.preview_url || previews[path];
                     if (/\.(mp4|webm)(?:$|\?|&|#)/i.test(previewUrl || '')) {
                         const video = document.createElement('video');
@@ -352,7 +352,7 @@ export function _openGalleryReplacer(node, w, options = {}) {
                     badgeStack.style.cssText = 'position:absolute;top:6px;right:6px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:76%;';
                     const categoryBadge = document.createElement('span');
                     categoryBadge.textContent = formatModelTypeLabel(info.type, pickerType.label);
-                    categoryBadge.style.cssText = 'padding:3px 6px;border-radius:5px;background:rgba(25,34,54,0.9);border:1px solid rgba(138,180,248,0.28);color:#b8d0ff;font-size:9px;font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,0.22);';
+                    categoryBadge.style.cssText = 'padding:3px 6px;border-radius:5px;background:rgba(25,34,54,0.9);border:1px solid color-mix(in srgb, var(--amb-link) 28%, transparent);color:#b8d0ff;font-size:9px;font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,0.22);';
                     badgeStack.appendChild(categoryBadge);
                     if (baseModel) {
                         const baseBadge = document.createElement('span');
@@ -400,7 +400,7 @@ export function _openGalleryReplacer(node, w, options = {}) {
             else {
                 const empty = document.createElement('div');
                 empty.textContent = t('pickerNoMatches');
-                empty.style.cssText = 'color:#777;padding:30px;text-align:center;grid-column:1/-1;';
+                empty.style.cssText = 'color:var(--amb-text-dim);padding:30px;text-align:center;grid-column:1/-1;';
                 grid.appendChild(empty);
             }
         };
diff --git a/web/modules/ui_notebook_editor.js b/web/modules/ui_notebook_editor.js
index cdb3a55..df23867 100644
--- a/web/modules/ui_notebook_editor.js
+++ b/web/modules/ui_notebook_editor.js
@@ -599,7 +599,7 @@ export function fillNotebookGalleries(baseModel, mainGallery, loraGallery, data)
             if (isVid) return `<video src="${m.preview_url}" muted loop playsinline></video>`;
             return `<img src="${m.preview_url}" />`;
         }
-        return `<div style="width:30px; height:30px; background:#222; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#555;">?</div>`;
+        return `<div style="width:30px; height:30px; background:var(--amb-bg-card); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--amb-text-dim);">?</div>`;
     };
 
     fetch(`/anomalous/compatible_models?base_model=${encodeURIComponent(baseModel)}&target_type=checkpoints,unet,diffusion_models`)
@@ -650,7 +650,7 @@ export function fillNotebookGalleries(baseModel, mainGallery, loraGallery, data)
 
                         let badgeHtml = '';
                         if (isSelected) {
-                            badgeHtml = `<div style="position:absolute; top:-5px; right:-5px; background:linear-gradient(135deg, #f59e0b, #d97706); color:#180808; border-radius:50%; width:20px; height:20px; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:bold; z-index:10; box-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 6px rgba(245,158,11,0.4); border: 1px solid rgba(255,255,255,0.3);">${loraIndex + 1}</div>`;
+                            badgeHtml = `<div style="position:absolute; top:-5px; right:-5px; background:linear-gradient(135deg, #f59e0b, #d97706); color:#180808; border-radius:50%; width:20px; height:20px; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:bold; z-index:10; box-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 6px rgba(245,158,11,0.4); border: 1px solid var(--amb-border-strong);">${loraIndex + 1}</div>`;
                         }
 
                         card.innerHTML = `${badgeHtml}${buildThumbHtml(m)}<div class="anomalous-nb-minilora-name" title="${escapeHtml(m.filename)}">${escapeHtml(m.filename)}</div>`;
diff --git a/web/modules/ui_notebooks.js b/web/modules/ui_notebooks.js
index 2439f88..93478a2 100644
--- a/web/modules/ui_notebooks.js
+++ b/web/modules/ui_notebooks.js
@@ -39,9 +39,9 @@ function createNotebookSidebar(ctx) {
     createInput.style.display = 'none';
     createInput.style.flex = '1';
     createInput.style.padding = '4px';
-    createInput.style.background = '#222';
+    createInput.style.background = 'var(--amb-bg-card)';
     createInput.style.color = '#fff';
-    createInput.style.border = '1px solid #555';
+    createInput.style.border = '1px solid var(--amb-border-strong)';
     createInput.style.borderRadius = '4px';
 
     createBtn.onclick = () => {
diff --git a/web/modules/ui_recipe_cards.js b/web/modules/ui_recipe_cards.js
index 9fcaf13..0157b09 100644
--- a/web/modules/ui_recipe_cards.js
+++ b/web/modules/ui_recipe_cards.js
@@ -144,8 +144,8 @@ export function ensureRecipeGuideStyles() {
             background: rgba(10, 12, 16, 0.75);
             backdrop-filter: blur(6px);
             -webkit-backdrop-filter: blur(6px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            color: #cbd5e1;
+            border: 1px solid var(--amb-border);
+            color: var(--amb-text-soft);
             display: inline-flex;
             align-items: center;
             gap: 3px;
@@ -157,8 +157,8 @@ export function ensureRecipeGuideStyles() {
         .anomalous-recipe-card:hover .anomalous-recipe-drag-badge {
             opacity: 1;
             background: rgba(15, 23, 42, 0.9);
-            border-color: rgba(99, 102, 241, 0.4);
-            color: #e2e8f0;
+            border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
+            color: var(--amb-text-main);
         }
         /* 修复封面底部模型就绪状态徽标对比度与穿透：深色高对比毛玻璃底板 */
         .anomalous-recipe-readiness-pill {
@@ -168,11 +168,11 @@ export function ensureRecipeGuideStyles() {
             background: rgba(10, 12, 18, 0.88) !important;
             backdrop-filter: blur(8px);
             -webkit-backdrop-filter: blur(8px);
-            border: 1px solid rgba(255, 255, 255, 0.16) !important;
+            border: 1px solid var(--amb-border-strong) !important;
             padding: 2.5px 8px !important;
             border-radius: 6px !important;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
-            color: #f1f5f9 !important;
+            color: var(--amb-text-main) !important;
         }
         .anomalous-recipe-readiness-pill.is-ready {
             background: rgba(10, 12, 18, 0.9) !important;
@@ -212,9 +212,9 @@ export function ensureRecipeGuideStyles() {
             margin: 8px 16px 4px 16px;
             border-radius: 8px;
             font-size: 12px;
-            color: #94a3b8;
+            color: var(--amb-text-muted);
             background: rgba(30, 41, 59, 0.5);
-            border: 1px solid rgba(255, 255, 255, 0.08);
+            border: 1px solid var(--amb-border);
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
             flex-shrink: 0;
             line-height: 1.4;
@@ -231,13 +231,13 @@ export function ensureRecipeGuideStyles() {
             flex-shrink: 0;
         }
         .anomalous-recipe-drag-hint-text {
-            color: #cbd5e1;
+            color: var(--amb-text-soft);
             font-size: 12px;
         }
         .anomalous-recipe-drag-hint-close {
             background: transparent;
             border: none;
-            color: #64748b;
+            color: var(--amb-text-dim);
             font-size: 16px;
             line-height: 1;
             cursor: pointer;
@@ -250,7 +250,7 @@ export function ensureRecipeGuideStyles() {
             justify-content: center;
         }
         .anomalous-recipe-drag-hint-close:hover {
-            color: #f1f5f9;
+            color: var(--amb-text-main);
             background: rgba(255, 255, 255, 0.08);
         }
         .anomalous-recipe-empty-guide {
@@ -259,7 +259,7 @@ export function ensureRecipeGuideStyles() {
             margin: 32px auto;
             padding: 28px 24px;
             background: rgba(255, 255, 255, 0.025);
-            border: 1px solid rgba(255, 255, 255, 0.08);
+            border: 1px solid var(--amb-border);
             border-radius: 16px;
             text-align: center;
             box-sizing: border-box;
@@ -272,8 +272,8 @@ export function ensureRecipeGuideStyles() {
             width: 52px;
             height: 52px;
             border-radius: 50%;
-            background: rgba(99, 102, 241, 0.1);
-            border: 1px solid rgba(99, 102, 241, 0.25);
+            background: color-mix(in srgb, var(--amb-link) 10%, transparent);
+            border: 1px solid color-mix(in srgb, var(--amb-link) 25%, transparent);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -284,14 +284,14 @@ export function ensureRecipeGuideStyles() {
             margin: 0;
             font-size: 16px;
             font-weight: 600;
-            color: #f1f5f9;
+            color: var(--amb-text-main);
             letter-spacing: 0.2px;
         }
         .anomalous-recipe-empty-subtitle {
             margin: 0;
             font-size: 12.5px;
             line-height: 1.55;
-            color: #94a3b8;
+            color: var(--amb-text-muted);
             max-width: 440px;
         }
         .anomalous-recipe-empty-steps {
@@ -304,7 +304,7 @@ export function ensureRecipeGuideStyles() {
         }
         .anomalous-recipe-empty-step {
             background: rgba(255, 255, 255, 0.03);
-            border: 1px solid rgba(255, 255, 255, 0.06);
+            border: 1px solid var(--amb-border);
             border-radius: 10px;
             padding: 14px 14px;
             display: flex;
@@ -314,7 +314,7 @@ export function ensureRecipeGuideStyles() {
         }
         .anomalous-recipe-empty-step:hover {
             background: rgba(255, 255, 255, 0.05);
-            border-color: rgba(255, 255, 255, 0.12);
+            border-color: var(--amb-border-strong);
         }
         .anomalous-recipe-step-icon {
             font-size: 20px;
@@ -323,14 +323,14 @@ export function ensureRecipeGuideStyles() {
         }
         .anomalous-recipe-empty-step strong {
             font-size: 13px;
-            color: #e2e8f0;
+            color: var(--amb-text-main);
             font-weight: 600;
         }
         .anomalous-recipe-empty-step p {
             margin: 0;
             font-size: 11.5px;
             line-height: 1.5;
-            color: #94a3b8;
+            color: var(--amb-text-muted);
         }
         .anomalous-recipe-empty-action-btn {
             margin-top: 6px;
@@ -340,8 +340,8 @@ export function ensureRecipeGuideStyles() {
             padding: 8px 18px;
             font-size: 13px;
             font-weight: 500;
-            color: #fff;
-            background: #4f46e5;
+            color: var(--amb-btn-primary-text);
+            background: var(--amb-btn-primary-bg);
             border: none;
             border-radius: 8px;
             cursor: pointer;
diff --git a/web/modules/ui_recipe_detail.js b/web/modules/ui_recipe_detail.js
index 5de0120..82c4ebc 100644
--- a/web/modules/ui_recipe_detail.js
+++ b/web/modules/ui_recipe_detail.js
@@ -77,7 +77,7 @@ function openOriginEditDialog(owner, recipe, reference, finish) {
     
     const dialog = document.createElement('div');
     dialog.style.background = 'linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98))';
-    dialog.style.border = '1px solid rgba(255, 255, 255, 0.12)';
+    dialog.style.border = '1px solid var(--amb-border-strong)';
     dialog.style.borderRadius = '16px';
     dialog.style.padding = '24px';
     dialog.style.maxWidth = '400px';
@@ -133,15 +133,15 @@ function openOriginEditDialog(owner, recipe, reference, finish) {
         input.type = 'text';
         input.value = value || '';
         input.style.background = 'rgba(0, 0, 0, 0.2)';
-        input.style.border = '1px solid rgba(255, 255, 255, 0.1)';
+        input.style.border = '1px solid var(--amb-border)';
         input.style.padding = '10px 12px';
         input.style.borderRadius = '8px';
         input.style.color = '#fff';
         input.style.fontSize = '14px';
         input.style.outline = 'none';
         input.style.transition = 'border-color 0.2s';
-        input.onfocus = () => input.style.borderColor = 'var(--anomalous-accent, #6366f1)';
-        input.onblur = () => input.style.borderColor = 'rgba(255, 255, 255, 0.1)';
+        input.onfocus = () => input.style.borderColor = 'var(--anomalous-accent, var(--amb-link))';
+        input.onblur = () => input.style.borderColor = 'var(--amb-border)';
         group.appendChild(label);
         group.appendChild(input);
         return { group, input };
@@ -411,7 +411,7 @@ function renderModelComposition(container, owner, recipe, references, finish, pa
         editOriginBtn.title = t('recipeOriginDialogTitle');
         editOriginBtn.style.marginLeft = '8px';
         editOriginBtn.style.background = 'transparent';
-        editOriginBtn.style.border = '1px solid rgba(255,255,255,0.1)';
+        editOriginBtn.style.border = '1px solid var(--amb-border)';
         editOriginBtn.style.color = 'rgba(255,255,255,0.7)';
         editOriginBtn.onclick = (e) => {
             e.stopPropagation();
@@ -534,7 +534,7 @@ function renderModelComposition(container, owner, recipe, references, finish, pa
         if (container.children.length > 1) { // Skip divider for the very first section
             const divider = document.createElement('hr');
             divider.className = 'anomalous-recipe-model-divider';
-            divider.style.borderTop = '1px solid rgba(255, 255, 255, 0.1)';
+            divider.style.borderTop = '1px solid var(--amb-border)';
             divider.style.margin = '20px 0 16px 0';
             container.appendChild(divider);
         }
diff --git a/web/modules/ui_recipe_parameters.js b/web/modules/ui_recipe_parameters.js
index b6a98cc..b2e635a 100644
--- a/web/modules/ui_recipe_parameters.js
+++ b/web/modules/ui_recipe_parameters.js
@@ -1135,7 +1135,7 @@ export function renderRecipeParameters(content, owner, recipe, gallery, refreshG
         if (baseModelVal) {
             const modelCard = document.createElement('div');
             modelCard.className = 'anomalous-recipe-model-highlight-card';
-            modelCard.innerHTML = `<div style="display:flex;align-items:center;gap:8px;"><span style="display:inline-flex;align-items:center;color:#dc143c;"><svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg></span><span style="font-size:0.75rem;color:#94a3b8;text-transform:uppercase;font-weight:600;">${t('recipeDetailBaseModel') || '底模'}</span></div><div style="font-size:0.9rem;font-weight:600;color:#f8fafc;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escapeHtml(String(baseModelVal))}">${escapeHtml(String(baseModelVal))}</div>`;
+            modelCard.innerHTML = `<div style="display:flex;align-items:center;gap:8px;"><span style="display:inline-flex;align-items:center;color:#dc143c;"><svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg></span><span style="font-size:0.75rem;color:var(--amb-text-muted);text-transform:uppercase;font-weight:600;">${t('recipeDetailBaseModel') || '底模'}</span></div><div style="font-size:0.9rem;font-weight:600;color:var(--amb-text-main);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escapeHtml(String(baseModelVal))}">${escapeHtml(String(baseModelVal))}</div>`;
             modelsDeck.appendChild(modelCard);
         }
 
diff --git a/web/modules/ui_settings_hub.js b/web/modules/ui_settings_hub.js
index 3d42150..ae087ff 100644
--- a/web/modules/ui_settings_hub.js
+++ b/web/modules/ui_settings_hub.js
@@ -122,7 +122,7 @@ export function createSettingsHub(owner, {
 
     const styleHubBtn = (btn) => {
         btn.style.background = 'transparent';
-        btn.style.border = '1px solid rgba(255,255,255,0.05)';
+        btn.style.border = '1px solid var(--amb-border)';
         btn.style.color = '#ccc';
         btn.style.textAlign = 'left';
         btn.style.padding = '8px 10px';
@@ -266,7 +266,7 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
     viewModeContainer.style.background = 'rgba(255, 255, 255, 0.03)';
     viewModeContainer.style.padding = '8px 10px';
     viewModeContainer.style.borderRadius = '8px';
-    viewModeContainer.style.border = '1px solid rgba(255, 255, 255, 0.08)';
+    viewModeContainer.style.border = '1px solid var(--amb-border)';
     viewModeContainer.style.marginBottom = '4px';
 
     const viewModeHeader = document.createElement('div');
@@ -289,7 +289,7 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
     viewModeGroup.style.background = 'rgba(0, 0, 0, 0.35)';
     viewModeGroup.style.padding = '3px';
     viewModeGroup.style.borderRadius = '6px';
-    viewModeGroup.style.border = '1px solid rgba(255, 255, 255, 0.06)';
+    viewModeGroup.style.border = '1px solid var(--amb-border)';
 
     const modeDefinitions = [
         { id: 'compact', key: 'sidebarViewModeCompact' },
@@ -349,7 +349,7 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
     scaleContainer.style.background = 'rgba(255, 255, 255, 0.03)';
     scaleContainer.style.padding = '8px 10px';
     scaleContainer.style.borderRadius = '8px';
-    scaleContainer.style.border = '1px solid rgba(255, 255, 255, 0.08)';
+    scaleContainer.style.border = '1px solid var(--amb-border)';
     scaleContainer.style.marginBottom = '4px';
 
     const scaleLabel = document.createElement('span');
@@ -375,9 +375,9 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
     const createScaleBtn = (text, delta) => {
         const btn = document.createElement('button');
         btn.innerText = text;
-        btn.style.background = '#333';
+        btn.style.background = 'var(--amb-bg-card-hover)';
         btn.style.color = '#fff';
-        btn.style.border = '1px solid #555';
+        btn.style.border = '1px solid var(--amb-border-strong)';
         btn.style.borderRadius = '4px';
         btn.style.width = '24px';
         btn.style.height = '24px';
@@ -385,8 +385,8 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
         btn.style.display = 'flex';
         btn.style.alignItems = 'center';
         btn.style.justifyContent = 'center';
-        btn.onmouseover = () => btn.style.background = '#444';
-        btn.onmouseout = () => btn.style.background = '#333';
+        btn.onmouseover = () => btn.style.background = 'var(--amb-bg-card-hover)';
+        btn.onmouseout = () => btn.style.background = 'var(--amb-bg-card-hover)';
         btn.onclick = () => {
             currentScale = Math.max(0.5, Math.min(1.5, currentScale + delta));
             scaleVal.innerText = `${Math.round(currentScale * 100)}%`;
@@ -413,7 +413,7 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
     bgOpacityContainer.style.background = 'rgba(255, 255, 255, 0.03)';
     bgOpacityContainer.style.padding = '8px 10px';
     bgOpacityContainer.style.borderRadius = '8px';
-    bgOpacityContainer.style.border = '1px solid rgba(255, 255, 255, 0.08)';
+    bgOpacityContainer.style.border = '1px solid var(--amb-border)';
     bgOpacityContainer.style.marginBottom = '4px';
 
     const bgOpacityLabel = document.createElement('span');
@@ -439,9 +439,9 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
     const createBgBtn = (text, delta) => {
         const btn = document.createElement('button');
         btn.innerText = text;
-        btn.style.background = '#333';
+        btn.style.background = 'var(--amb-bg-card-hover)';
         btn.style.color = '#fff';
-        btn.style.border = '1px solid #555';
+        btn.style.border = '1px solid var(--amb-border-strong)';
         btn.style.borderRadius = '4px';
         btn.style.width = '24px';
         btn.style.height = '24px';
@@ -449,8 +449,8 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
         btn.style.display = 'flex';
         btn.style.alignItems = 'center';
         btn.style.justifyContent = 'center';
-        btn.onmouseover = () => btn.style.background = '#444';
-        btn.onmouseout = () => btn.style.background = '#333';
+        btn.onmouseover = () => btn.style.background = 'var(--amb-bg-card-hover)';
+        btn.onmouseout = () => btn.style.background = 'var(--amb-bg-card-hover)';
         btn.onclick = () => {
             currentBgOpacity = Math.max(0, Math.min(1, Math.round((currentBgOpacity + delta) * 100) / 100));
             bgOpacityVal.innerText = `${Math.round(currentBgOpacity * 100)}%`;
diff --git a/web/modules/ui_sidebar.js b/web/modules/ui_sidebar.js
index 27dc578..b949316 100644
--- a/web/modules/ui_sidebar.js
+++ b/web/modules/ui_sidebar.js
@@ -270,13 +270,13 @@ export function renderSidebar() {
         collapseAllBtn.style.padding = '4px 9px';
         collapseAllBtn.style.background = 'rgba(255, 255, 255, 0.08)';
         collapseAllBtn.style.color = '#e2e8f0';
-        collapseAllBtn.style.border = '1px solid rgba(255, 255, 255, 0.12)';
+        collapseAllBtn.style.border = '1px solid var(--amb-border-strong)';
         collapseAllBtn.style.borderRadius = '3px 8px 3px 8px';
         collapseAllBtn.style.cursor = 'pointer';
         collapseAllBtn.style.fontSize = '0.82em';
         collapseAllBtn.style.transition = 'all 0.2s ease';
-        collapseAllBtn.onmouseover = () => { collapseAllBtn.style.background = 'rgba(255, 255, 255, 0.15)'; collapseAllBtn.style.borderColor = 'rgba(255, 255, 255, 0.25)'; };
-        collapseAllBtn.onmouseout = () => { collapseAllBtn.style.background = 'rgba(255, 255, 255, 0.08)'; collapseAllBtn.style.borderColor = 'rgba(255, 255, 255, 0.12)'; };
+        collapseAllBtn.onmouseover = () => { collapseAllBtn.style.background = 'rgba(255, 255, 255, 0.15)'; collapseAllBtn.style.borderColor = 'var(--amb-border-strong)'; };
+        collapseAllBtn.onmouseout = () => { collapseAllBtn.style.background = 'rgba(255, 255, 255, 0.08)'; collapseAllBtn.style.borderColor = 'var(--amb-border-strong)'; };
         collapseAllBtn.onclick = () => {
             if (isAllCollapsed) {
                 (this.foldersData || []).forEach(typeGroup => {
@@ -304,14 +304,14 @@ export function renderSidebar() {
         searchInput.style.width = '100%';
         searchInput.style.padding = '8px 12px';
         searchInput.style.borderRadius = '8px';
-        searchInput.style.border = '1px solid rgba(255,255,255,0.1)';
+        searchInput.style.border = '1px solid var(--amb-border)';
         searchInput.style.background = 'rgba(0,0,0,0.2)';
         searchInput.style.color = '#fff';
         searchInput.style.boxSizing = 'border-box';
         searchInput.style.outline = 'none';
         searchInput.style.transition = 'border-color 0.2s';
         searchInput.onfocus = () => searchInput.style.border = '1px solid #007aff';
-        searchInput.onblur = () => searchInput.style.border = '1px solid rgba(255,255,255,0.1)';
+        searchInput.onblur = () => searchInput.style.border = '1px solid var(--amb-border)';
 
         searchInput.oninput = (e) => {
             if (this.currentDetailModel) {
@@ -382,12 +382,12 @@ export function renderSidebar() {
 
                 let toggleIcon = '';
                 if (hasChildren) {
-                    toggleIcon = `<span class="anomalous-folder-toggle" style="margin-right: 8px; width: 12px; display: inline-block; font-size: 0.8em; color: #888;">${isExpanded ? '▼' : '▶'}</span>`;
+                    toggleIcon = `<span class="anomalous-folder-toggle" style="margin-right: 8px; width: 12px; display: inline-block; font-size: 0.8em; color: var(--amb-text-muted);">${isExpanded ? '▼' : '▶'}</span>`;
                 } else {
                     toggleIcon = `<span style="margin-right: 8px; width: 12px; display: inline-block;"></span>`;
                 }
 
-                item.innerHTML = `${toggleIcon}<span class="anomalous-folder-name" style="color: #ddd;">${escapeHtml(info.name)}</span> <span style="opacity:0.4; font-size:0.8em; margin-left: 5px;">${escapeHtml(info.model_count)}</span>`;
+                item.innerHTML = `${toggleIcon}<span class="anomalous-folder-name" style="color: var(--amb-text-soft);">${escapeHtml(info.name)}</span> <span style="opacity:0.4; font-size:0.8em; margin-left: 5px;">${escapeHtml(info.model_count)}</span>`;
 
                 const scope = this.modelScope;
                 if (scope?.subfolder === path && scope.type === typeGroup.type && scope.path_idx === typeGroup.path_idx) {
diff --git a/web/modules/ui_spotlight_tour.js b/web/modules/ui_spotlight_tour.js
index ecc9a63..3bb4709 100644
--- a/web/modules/ui_spotlight_tour.js
+++ b/web/modules/ui_spotlight_tour.js
@@ -114,8 +114,8 @@ export function ensureTourStyles() {
             position: absolute;
             border-radius: 10px;
             box-shadow: 0 0 0 9999px rgba(10, 12, 18, 0.78),
-                        0 0 0 2px rgba(96, 165, 250, 0.9),
-                        0 0 22px rgba(59, 130, 246, 0.45);
+                        0 0 0 2px color-mix(in srgb, var(--amb-link) 90%, transparent),
+                        0 0 22px color-mix(in srgb, var(--amb-link) 45%, transparent);
             transition: all 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
             pointer-events: none;
             box-sizing: border-box;
@@ -124,11 +124,11 @@ export function ensureTourStyles() {
             position: absolute;
             width: 330px;
             max-width: calc(100vw - 32px);
-            background: #18181f;
-            border: 1px solid rgba(255, 255, 255, 0.14);
+            background: var(--amb-bg-panel);
+            border: 1px solid var(--amb-border-strong);
             border-radius: 12px;
             box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.2);
-            color: #f1f5f9;
+            color: var(--amb-text-main);
             padding: 16px 18px;
             display: flex;
             flex-direction: column;
@@ -151,16 +151,16 @@ export function ensureTourStyles() {
             gap: 5px;
             font-size: 11px;
             font-weight: 600;
-            color: #60a5fa;
-            background: rgba(59, 130, 246, 0.15);
-            border: 1px solid rgba(59, 130, 246, 0.3);
+            color: var(--amb-link);
+            background: color-mix(in srgb, var(--amb-link) 15%, transparent);
+            border: 1px solid color-mix(in srgb, var(--amb-link) 30%, transparent);
             border-radius: 9999px;
             padding: 2px 8px;
         }
         .anomalous-spotlight-card-close {
             background: transparent;
             border: none;
-            color: #94a3b8;
+            color: var(--amb-text-muted);
             font-size: 16px;
             cursor: pointer;
             padding: 2px 6px;
@@ -168,14 +168,14 @@ export function ensureTourStyles() {
             transition: color 0.15s, background 0.15s;
         }
         .anomalous-spotlight-card-close:hover {
-            color: #fff;
+            color: var(--amb-text-main);
             background: rgba(255, 255, 255, 0.1);
         }
         .anomalous-spotlight-card-title {
             margin: 0;
             font-size: 15px;
             font-weight: 700;
-            color: #f8fafc;
+            color: var(--amb-text-main);
             display: flex;
             align-items: center;
             gap: 6px;
@@ -185,7 +185,7 @@ export function ensureTourStyles() {
             margin: 0;
             font-size: 13px;
             line-height: 1.55;
-            color: #cbd5e1;
+            color: var(--amb-text-soft);
         }
         .anomalous-spotlight-card-footer {
             display: flex;
@@ -194,7 +194,7 @@ export function ensureTourStyles() {
             gap: 8px;
             margin-top: 4px;
             padding-top: 10px;
-            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            border-top: 1px solid var(--amb-border);
         }
         .anomalous-spotlight-dots {
             display: flex;
@@ -210,7 +210,7 @@ export function ensureTourStyles() {
         }
         .anomalous-spotlight-dot.active {
             width: 14px;
-            background: #3b82f6;
+            background: var(--amb-btn-primary-bg);
         }
         .anomalous-spotlight-btn-group {
             display: flex;
@@ -228,20 +228,20 @@ export function ensureTourStyles() {
         }
         .anomalous-spotlight-btn-secondary {
             background: rgba(255, 255, 255, 0.08);
-            color: #cbd5e1;
+            color: var(--amb-text-soft);
         }
         .anomalous-spotlight-btn-secondary:hover:not(:disabled) {
             background: rgba(255, 255, 255, 0.15);
-            color: #fff;
+            color: var(--amb-text-main);
         }
         .anomalous-spotlight-btn-secondary:disabled {
             opacity: 0.35;
             cursor: not-allowed;
         }
         .anomalous-spotlight-btn-primary {
-            background: #2563eb;
-            color: #fff;
-            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
+            background: var(--amb-btn-primary-bg);
+            color: var(--amb-btn-primary-text);
+            box-shadow: 0 2px 8px color-mix(in srgb, var(--amb-link) 40%, transparent);
         }
         .anomalous-spotlight-btn-primary:hover {
             background: #1d4ed8;
@@ -251,9 +251,9 @@ export function ensureTourStyles() {
             align-items: center;
             justify-content: center;
             gap: 6px;
-            background: #2563eb;
-            color: #ffffff;
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            background: var(--amb-btn-primary-bg);
+            color: var(--amb-btn-primary-text);
+            border: 1px solid var(--amb-border-strong);
             border-radius: 6px;
             padding: 7px 16px;
             font-size: 12px;
@@ -273,9 +273,9 @@ export function ensureTourStyles() {
             margin: 2px auto 14px auto;
             padding: 6px 16px;
             background: rgba(255, 255, 255, 0.04);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            border: 1px solid var(--amb-border);
             border-radius: 20px;
-            color: #94a3b8;
+            color: var(--amb-text-muted);
             font-size: 11.5px;
             font-weight: 500;
             cursor: pointer;
@@ -289,15 +289,15 @@ export function ensureTourStyles() {
             display: none;
         }
         .anomalous-update-guide-tour-banner:hover {
-            background: rgba(59, 130, 246, 0.12);
-            border-color: rgba(96, 165, 250, 0.4);
-            color: #93c5fd;
+            background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+            border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
+            color: var(--amb-link);
             transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
         }
         .anomalous-update-guide-tour-banner:active {
             transform: translateY(0);
-            background: rgba(59, 130, 246, 0.2);
+            background: color-mix(in srgb, var(--amb-link) 20%, transparent);
         }
     `;
     (document.head || document.body)?.appendChild(style);
diff --git a/web/styles.css b/web/styles.css
index 9a71b08..71b7353 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -1,21 +1,21 @@
-@import url("./styles/00-foundation-models.css?v=20260921-flicker-free-1");
-@import url("./styles/01-shell-tools.css?v=20260926-canvas-perf-1");
-@import url("./styles/02-notebooks.css?v=20260927-unet-hint");
-@import url("./styles/03-gallery-recipes.css?v=20260918-model-sources-1");
-@import url("./styles/04-dialogs-materials.css?v=20260926-material-apply-1");
-@import url("./styles/05-recipe-studio-overrides.css?v=20260918-model-sources-1");
-@import url("./styles/06-material-workbench.css?v=20260918-model-sources-1");
-@import url("./styles/07-prompt-studio.css?v=20260918-model-sources-1");
-@import url("./styles/08-theme-gallery-overrides.css?v=20260929-audio-tabs");
-@import url("./styles/09-prompt-drawers.css?v=20260918-model-sources-1");
-@import url("./styles/10-model-sources.css?v=20260918-model-sources-1");
-@import url("./styles/11-audio-studio.css?v=20260929-gpt-sovits-only");
-@import url("./styles/12-tts-setup.css?v=20260929-folder-layout");
-@import url("./styles/13-script-director.css?v=20260929-wide-side");
-@import url("./styles/14-version-manager.css");
-@import url("./styles/15-shell-rail.css?v=20260929-shell-4");
-@import url("./styles/16-activity.css?v=20260929-activity-1");
-@import url("./styles/17-model-types.css?v=20260930-types-1");
-@import url("./styles/18-scan-page.css?v=20261002-scan-1");
-@import url("./styles/19-model-doctor.css?v=20261002-doctor-1");
-@import url("./styles/20-current-node.css?v=20261002-node-1");
+@import url("./styles/00-foundation-models.css?v=20261002-theme-1");
+@import url("./styles/01-shell-tools.css?v=20261002-theme-1");
+@import url("./styles/02-notebooks.css?v=20261002-theme-1");
+@import url("./styles/03-gallery-recipes.css?v=20261002-theme-1");
+@import url("./styles/04-dialogs-materials.css?v=20261002-theme-1");
+@import url("./styles/05-recipe-studio-overrides.css?v=20261002-theme-1");
+@import url("./styles/06-material-workbench.css?v=20261002-theme-1");
+@import url("./styles/07-prompt-studio.css?v=20261002-theme-1");
+@import url("./styles/08-theme-gallery-overrides.css?v=20261002-theme-1");
+@import url("./styles/09-prompt-drawers.css?v=20261002-theme-1");
+@import url("./styles/10-model-sources.css?v=20261002-theme-1");
+@import url("./styles/11-audio-studio.css?v=20261002-theme-1");
+@import url("./styles/12-tts-setup.css?v=20261002-theme-1");
+@import url("./styles/13-script-director.css?v=20261002-theme-1");
+@import url("./styles/14-version-manager.css?v=20261002-theme-1");
+@import url("./styles/15-shell-rail.css?v=20261002-theme-1");
+@import url("./styles/16-activity.css?v=20261002-theme-1");
+@import url("./styles/17-model-types.css?v=20261002-theme-1");
+@import url("./styles/18-scan-page.css?v=20261002-theme-1");
+@import url("./styles/19-model-doctor.css?v=20261002-theme-1");
+@import url("./styles/20-current-node.css?v=20261002-theme-1");
diff --git a/web/styles/00-foundation-models.css b/web/styles/00-foundation-models.css
index 71d056a..e254607 100644
--- a/web/styles/00-foundation-models.css
+++ b/web/styles/00-foundation-models.css
@@ -26,9 +26,13 @@
     --amb-bg-card-hover: #28282d;
     --amb-bg-input: #151517;
     --amb-text-main: #f3f4f6;
+    --amb-text-soft: #d1d5db; /* secondary text that still reads as content */
     --amb-text-muted: #9ca3af;
+    --amb-text-dim: #6b7280; /* hints, timestamps, placeholders */
     --amb-border: rgba(255, 255, 255, 0.08);
+    --amb-border-strong: rgba(255, 255, 255, 0.16); /* controls and dividers that must show at rest */
     --amb-border-hover: rgba(255, 255, 255, 0.16);
+    --amb-link: #a5b4fc; /* the one accent for links, selection and focus; tints via color-mix */
     --amb-btn-primary-bg: #e5e7eb;
     --amb-btn-primary-hover: #ffffff;
     --amb-btn-primary-text: #111827;
@@ -50,9 +54,13 @@ html.theme-abyssal-scarlet,
     --amb-bg-card-hover: #362530;
     --amb-bg-input: #1c1319;
     --amb-text-main: #ECE4E8;
+    --amb-text-soft: #D8CBD1;
     --amb-text-muted: #B9A7B0;
+    --amb-text-dim: #8E7A85;
     --amb-border: rgba(255, 245, 247, 0.10);
+    --amb-border-strong: rgba(255, 235, 240, 0.16);
     --amb-border-hover: rgba(220, 20, 60, 0.35);
+    --amb-link: #F28CA0;
     --amb-btn-primary-bg: #87384E;
     --amb-btn-primary-hover: #9c425b;
     --amb-btn-primary-text: #FFF5F7;
@@ -87,8 +95,8 @@ html.theme-abyssal-scarlet,
     background: rgba(18, 21, 30, 0.85);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
-    color: var(--fg-color, #f1f5f9);
-    border: 1px solid rgba(255, 255, 255, 0.16);
+    color: var(--fg-color, var(--amb-text-main));
+    border: 1px solid var(--amb-border-strong);
     font-size: var(--anomalous-trigger-font-size);
     cursor: pointer;
     z-index: 2147483000 !important;
@@ -173,9 +181,9 @@ html.theme-abyssal-scarlet #anomalous-trigger-btn:hover {
 #anomalous-trigger-btn:hover {
     transform: scale(1.08) translateY(-4px);
     background: rgba(25, 29, 42, 0.94);
-    border-color: rgba(100, 200, 255, 0.45);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 18px rgba(80, 190, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    color: #ffffff;
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 18px color-mix(in srgb, var(--amb-link) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    color: var(--amb-text-main);
 }
 
 #anomalous-trigger-btn:hover .anomalous-trigger-icon {
@@ -247,8 +255,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     padding: 0.38rem 0.65rem;
     border: 1px solid var(--border-default, #4b5563);
     border-radius: 0.4rem;
-    background: var(--comfy-input-bg, #101113);
-    color: var(--fg-color, #f3f4f6);
+    background: var(--comfy-input-bg, var(--amb-bg-page));
+    color: var(--fg-color, var(--amb-text-main));
     font: 600 0.78rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
     text-align: center;
     white-space: nowrap;
@@ -258,13 +266,13 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     padding: 0.42rem 0.72rem;
     border: 1px solid var(--border-default, #4b5563);
     border-radius: 0.4rem;
-    background: var(--comfy-input-bg, #24262b);
-    color: var(--fg-color, #f3f4f6);
+    background: var(--comfy-input-bg, var(--amb-bg-card-hover));
+    color: var(--fg-color, var(--amb-text-main));
     cursor: pointer;
 }
 
 .anomalous-shortcut-customize:hover:not(:disabled) {
-    border-color: var(--p-primary-color, #60a5fa);
+    border-color: var(--p-primary-color, var(--amb-link));
 }
 
 .anomalous-shortcut-customize:disabled {
@@ -291,8 +299,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 #anomalous-container {
     width: 90%;
     height: 90%;
-    background-color: var(--amb-bg-page, #131315);
-    border: 1px solid rgba(255, 255, 255, 0.09);
+    background-color: var(--amb-bg-page, var(--amb-bg-page));
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     display: flex;
     flex-direction: row;
@@ -347,11 +355,11 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 
 #anomalous-header {
     height: 48px;
-    background: var(--comfy-menu-bg, #333);
+    background: var(--comfy-menu-bg, var(--amb-bg-card-hover));
     display: flex;
     align-items: center;
     padding: 0 50px 0 20px;
-    border-bottom: 1px solid var(--border-color, #555);
+    border-bottom: 1px solid var(--border-color, var(--amb-border-strong));
     cursor: move;
     position: relative;
 }
@@ -370,8 +378,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 }
 
 #anomalous-settings-box {
-    background: var(--comfy-menu-bg, #2a2a2a);
-    border: 1px solid var(--border-color, #444);
+    background: var(--comfy-menu-bg, var(--amb-bg-card-hover));
+    border: 1px solid var(--border-color, var(--amb-border-strong));
     padding: 30px;
     border-radius: 12px;
     display: flex;
@@ -398,8 +406,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     right: 4px;
     width: 10px;
     height: 10px;
-    border-right: 2px solid #666;
-    border-bottom: 2px solid #666;
+    border-right: 2px solid var(--amb-border-strong);
+    border-bottom: 2px solid var(--amb-border-strong);
 }
 
 .anomalous-header-group {
@@ -415,7 +423,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     box-sizing: border-box;
     background: rgba(255, 255, 255, 0.04);
     color: #c0c4cc;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
     cursor: pointer;
     white-space: nowrap;
@@ -431,16 +439,16 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 
 #anomalous-header button:hover {
     background: rgba(255, 255, 255, 0.09);
-    border-color: rgba(255, 255, 255, 0.2);
-    color: #ffffff;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-main);
     transform: translateY(-1px);
     box-shadow: none;
 }
 
 #anomalous-header button.active {
     background: rgba(255, 255, 255, 0.14) !important;
-    border-color: rgba(255, 255, 255, 0.28) !important;
-    color: #ffffff !important;
+    border-color: var(--amb-border-strong) !important;
+    color: var(--amb-text-main) !important;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
 }
 
@@ -491,7 +499,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 #anomalous-grid::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.16);
     border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
 }
 
 #anomalous-grid::-webkit-scrollbar-thumb:hover {
@@ -501,8 +509,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 
 .anomalous-card {
     position: relative;
-    background: var(--amb-bg-card, #202024);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: var(--amb-bg-card, var(--amb-bg-card));
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     overflow: hidden;
     display: flex;
@@ -516,7 +524,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 
 .anomalous-card:hover {
     transform: translateY(-2px);
-    border-color: rgba(255, 255, 255, 0.2);
+    border-color: var(--amb-border-strong);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
@@ -668,12 +676,12 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     background: rgba(28, 28, 32, 0.85);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.09);
+    border: 1px solid var(--amb-border);
 }
 
 #anomalous-container.view-mode-aesthetic .anomalous-card:hover {
     background: rgba(34, 34, 38, 0.92);
-    border-color: rgba(255, 255, 255, 0.22);
+    border-color: var(--amb-border-strong);
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
 }
 
@@ -710,7 +718,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 .anomalous-card-title {
     font-size: 0.88rem;
     font-weight: 600;
-    color: #f3f4f6;
+    color: var(--amb-text-main);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -719,7 +727,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 
 .anomalous-card-filename {
     font-size: 0.72rem;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -737,8 +745,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     font-weight: 600;
     letter-spacing: 0.4px;
     background: rgba(18, 20, 26, 0.85);
-    color: #cbd5e1;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: var(--amb-text-soft);
+    border: 1px solid var(--amb-border-strong);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
@@ -749,32 +757,32 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 }
 
 .anomalous-card:hover .anomalous-card-badge {
-    border-color: rgba(255, 255, 255, 0.3);
-    color: #ffffff;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-main);
 }
 
 .anomalous-card-badge.badge-gold {
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     background: rgba(30, 32, 40, 0.9);
-    border-color: rgba(255, 255, 255, 0.2);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-card-badge.badge-amber {
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     background: rgba(30, 32, 40, 0.9);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-card-badge.badge-flux {
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     background: rgba(30, 32, 40, 0.9);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-card-badge.badge-rose {
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     background: rgba(30, 32, 40, 0.9);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: var(--amb-border-strong);
 }
 
 /* Card Action Buttons - Normal Mode (Neutral Glass) */
@@ -789,8 +797,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     align-items: center;
     justify-content: center;
     background: rgba(20, 22, 28, 0.88);
-    color: #e2e8f0;
-    border: 1px solid rgba(255, 255, 255, 0.18);
+    color: var(--amb-text-main);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 6px;
     cursor: pointer;
     font-size: 13px;
@@ -824,21 +832,21 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 .anomalous-card-action-btn:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: rgba(255, 255, 255, 0.4);
-    color: #ffffff;
+    color: var(--amb-text-main);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
 
 .anomalous-card-action-btn.action-apply:hover {
-    background: rgba(37, 99, 235, 0.9) !important;
-    border-color: rgba(96, 165, 250, 0.85) !important;
-    color: #ffffff !important;
-    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.5) !important;
+    background: color-mix(in srgb, var(--amb-link) 90%, transparent) !important;
+    border-color: color-mix(in srgb, var(--amb-link) 85%, transparent) !important;
+    color: var(--amb-text-main) !important;
+    box-shadow: 0 2px 10px color-mix(in srgb, var(--amb-link) 50%, transparent) !important;
 }
 
 .anomalous-card-action-btn.action-scan:hover {
     background: rgba(245, 158, 11, 0.9) !important;
     border-color: rgba(251, 191, 36, 0.85) !important;
-    color: #ffffff !important;
+    color: var(--amb-text-main) !important;
     box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
 }
 
@@ -850,7 +858,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     width: min(380px, calc(100vw - 32px));
     box-sizing: border-box;
     padding: 16px;
-    border: 1px solid rgba(138, 180, 248, 0.35);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
     border-radius: 12px;
     background: rgba(24, 24, 27, 0.96);
     color: #f1f3f4;
@@ -906,7 +914,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 .anomalous-scan-progress-action {
     margin-top: 8px;
     padding: 4px 12px;
-    border: 1px solid rgba(138, 180, 248, 0.45);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 45%, transparent);
     border-radius: 999px;
     background: transparent;
     color: #d7dde8;
@@ -915,8 +923,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 }
 
 .anomalous-scan-progress-action:hover {
-    background: rgba(138, 180, 248, 0.14);
-    color: #ffffff;
+    background: color-mix(in srgb, var(--amb-link) 14%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-scan-progress.is-complete .anomalous-scan-progress-fill {
@@ -937,7 +945,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 }
 
 .anomalous-card-title {
-    color: var(--fg-color, #fff);
+    color: var(--fg-color, var(--amb-text-main));
     font-size: 0.9em;
     font-weight: 650;
     line-height: 1.25;
diff --git a/web/styles/01-shell-tools.css b/web/styles/01-shell-tools.css
index c5ba28e..0cbace8 100644
--- a/web/styles/01-shell-tools.css
+++ b/web/styles/01-shell-tools.css
@@ -7,7 +7,7 @@
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     position: relative;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 10px;
     display: flex;
     flex-direction: column;
@@ -19,21 +19,21 @@
 
 #anomalous-doctor-panel,
 #anomalous-assistant-panel {
-    background: var(--amb-bg-page, #131315) !important;
+    background: var(--amb-bg-page, var(--amb-bg-page)) !important;
     position: relative;
     z-index: 2;
 }
 
 #anomalous-sidebar input[type="text"] {
     background: rgba(255, 255, 255, 0.05) !important;
-    border: 1px solid rgba(255, 255, 255, 0.09) !important;
+    border: 1px solid var(--amb-border) !important;
     backdrop-filter: blur(8px) !important;
-    color: #f3f4f6 !important;
+    color: var(--amb-text-main) !important;
     transition: all 0.2s ease !important;
 }
 
 #anomalous-sidebar input[type="text"]:focus {
-    border-color: rgba(255, 255, 255, 0.3) !important;
+    border-color: var(--amb-border-strong) !important;
     background: rgba(255, 255, 255, 0.08) !important;
     box-shadow: 0 0 8px rgba(255, 255, 255, 0.06) !important;
 }
@@ -59,7 +59,7 @@
     background: rgba(24, 24, 28, 0.98);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 10px;
     padding: 12px;
     box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
@@ -99,35 +99,35 @@ button:active::after,
 }
 
 #anomalous-settings {
-    border-top: 1px solid var(--border-color, #444);
-    background: var(--bg-color, #111);
+    border-top: 1px solid var(--border-color, var(--amb-border-strong));
+    background: var(--bg-color, var(--amb-bg-page));
 }
 
 .anomalous-lang-btn {
     width: 100% !important;
-    border: 2px solid #555 !important;
+    border: 2px solid var(--amb-border-strong) !important;
     padding: 12px !important;
     font-weight: bold;
     border-radius: 4px !important;
-    background: #1a1a1a !important;
+    background: var(--amb-bg-panel) !important;
     cursor: pointer;
-    color: #fff;
+    color: var(--amb-text-main);
     margin-bottom: 15px;
 }
 
 .anomalous-type-header {
     padding: 10px 15px;
     background: rgba(255, 255, 255, 0.03);
-    color: var(--fg-color, #fff);
+    color: var(--fg-color, var(--amb-text-main));
     font-weight: bold;
     font-size: 0.9em;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--amb-border);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-folder-item {
     padding: 8px 15px;
-    color: var(--fg-color, #cbd5e1);
+    color: var(--fg-color, var(--amb-text-soft));
     cursor: pointer;
     font-size: 0.9em;
     transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -136,13 +136,13 @@ button:active::after,
 
 .anomalous-folder-item:hover {
     background: rgba(255, 255, 255, 0.06);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 /* Clean Neutral Active Indicator on Selected Menu (Normal Mode) */
 .anomalous-folder-item.active {
     background: rgba(255, 255, 255, 0.08);
-    color: #fff;
+    color: var(--amb-text-main);
     font-weight: 600;
     border-left: 2px solid #e5e7eb;
     box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.03);
@@ -150,7 +150,7 @@ button:active::after,
 }
 
 .anomalous-folder-item.active .anomalous-folder-name {
-    color: #fff !important;
+    color: var(--amb-text-main) !important;
     text-shadow: none;
 }
 
@@ -169,7 +169,7 @@ button:active::after,
 /* Sidebar Icons & Actions - Normal Mode (Neutral & Clean) */
 .anomalous-folder-item svg,
 #anomalous-sidebar h3 svg {
-    color: #94a3b8 !important;
+    color: var(--amb-text-muted) !important;
     filter: none;
 }
 
@@ -184,7 +184,7 @@ button:active::after,
 #anomalous-doctor-btn,
 #anomalous-assistant-btn,
 #anomalous-global-settings-btn {
-    color: #94a3b8 !important;
+    color: var(--amb-text-muted) !important;
     transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
 }
 
@@ -193,7 +193,7 @@ button:active::after,
 #anomalous-doctor-btn:hover,
 #anomalous-assistant-btn:hover,
 #anomalous-global-settings-btn:hover {
-    color: #f8fafc !important;
+    color: var(--amb-text-main) !important;
     filter: none !important;
     background: rgba(255, 255, 255, 0.08) !important;
 }
@@ -249,7 +249,7 @@ button:active::after,
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    background: var(--bg-color, #222);
+    background: var(--bg-color, var(--amb-bg-card));
 }
 
 .anomalous-split-container {
@@ -264,13 +264,13 @@ button:active::after,
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #000;
+    background: var(--amb-bg-page);
     overflow: hidden;
 }
 
 .anomalous-resizer {
     width: 5px;
-    background: var(--border-color, #444);
+    background: var(--border-color, var(--amb-bg-card-hover));
     cursor: col-resize;
     transition: background 0.2s;
 }
@@ -285,7 +285,7 @@ button:active::after,
 
 .anomalous-split-right {
     width: 60%;
-    background: var(--bg-color, #222);
+    background: var(--bg-color, var(--amb-bg-card));
     overflow: auto;
 }
 
@@ -299,9 +299,9 @@ button:active::after,
 }
 
 #anomalous-api-key {
-    background: #333;
-    border: 1px solid #555;
-    color: #fff;
+    background: var(--amb-bg-card-hover);
+    border: 1px solid var(--amb-border-strong);
+    color: var(--amb-text-main);
     padding: 8px;
     border-radius: 4px;
     width: 150px;
@@ -309,7 +309,7 @@ button:active::after,
 }
 
 #anomalous-api-key::placeholder {
-    color: #999;
+    color: var(--amb-text-muted);
 }
 
 @container (max-width: 750px) {
@@ -373,11 +373,11 @@ button:active::after,
 .anomalous-compatible-section {
     margin-top: 20px;
     padding-top: 20px;
-    border-top: 1px solid var(--border-color, #444);
+    border-top: 1px solid var(--border-color, var(--amb-border-strong));
 }
 
 .anomalous-compatible-title {
-    color: var(--fg-color, #fff);
+    color: var(--fg-color, var(--amb-text-main));
     font-size: 1.1em;
     margin-bottom: 10px;
     display: flex;
@@ -392,8 +392,8 @@ button:active::after,
 }
 
 .anomalous-compatible-item {
-    background: var(--comfy-menu-bg, #333);
-    border: 1px solid var(--border-color, #555);
+    background: var(--comfy-menu-bg, var(--amb-bg-card-hover));
+    border: 1px solid var(--border-color, var(--amb-border-strong));
     border-radius: 6px;
     padding: 6px 10px;
     display: flex;
@@ -405,8 +405,8 @@ button:active::after,
 }
 
 .anomalous-compatible-item:hover {
-    border-color: rgba(255, 255, 255, 0.3);
-    background: var(--bg-color, #444);
+    border-color: var(--amb-border-strong);
+    background: var(--bg-color, var(--amb-bg-card-hover));
     transform: translateY(-2px);
 }
 
@@ -423,7 +423,7 @@ button:active::after,
 }
 
 .anomalous-compatible-item-name {
-    color: var(--fg-color, #fff);
+    color: var(--fg-color, var(--amb-text-main));
     font-size: 0.85em;
     white-space: nowrap;
     overflow: hidden;
diff --git a/web/styles/02-notebooks.css b/web/styles/02-notebooks.css
index e71cd96..d92287b 100644
--- a/web/styles/02-notebooks.css
+++ b/web/styles/02-notebooks.css
@@ -6,7 +6,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    background: var(--amb-bg-page, #131315);
+    background: var(--amb-bg-page, var(--amb-bg-page));
     z-index: 10001;
     display: flex;
     align-items: center;
@@ -16,8 +16,8 @@
 .anomalous-nb-container {
     width: 95%;
     height: 95%;
-    background: var(--bg-color, #222);
-    border: 1px solid var(--border-color, #444);
+    background: var(--bg-color, var(--amb-bg-card));
+    border: 1px solid var(--border-color, var(--amb-border-strong));
     border-radius: 12px;
     display: flex;
     flex-direction: column;
@@ -28,20 +28,20 @@
 .anomalous-prompt-studio-container {
     padding: 0;
     position: relative;
-    background: var(--amb-bg-page, #141519);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
+    background: var(--amb-bg-page, var(--amb-bg-panel));
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
     box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85);
 }
 
 .anomalous-nb-header {
     height: 50px;
-    background: var(--comfy-menu-bg, #333);
-    border-bottom: 1px solid #444;
+    background: var(--comfy-menu-bg, var(--amb-bg-card-hover));
+    border-bottom: 1px solid var(--amb-border-strong);
     display: flex;
     align-items: center;
     padding: 0 20px;
     justify-content: space-between;
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-nb-close {
@@ -59,8 +59,8 @@
 
 .anomalous-nb-sidebar {
     width: 250px;
-    background: #111;
-    border-right: 1px solid #444;
+    background: var(--amb-bg-page);
+    border-right: 1px solid var(--amb-border-strong);
     display: flex;
     flex-direction: column;
     transition: width 0.3s;
@@ -166,7 +166,7 @@
 
 .anomalous-nb-sidebar-nav-group {
     flex-shrink: 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--amb-border);
     padding: 12px 10px;
     background: rgba(0, 0, 0, 0.2);
 }
@@ -174,7 +174,7 @@
 .anomalous-nb-nav-header {
     font-size: 0.74rem;
     font-weight: 700;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     letter-spacing: 0.03em;
     text-transform: uppercase;
     margin-bottom: 8px;
@@ -196,7 +196,7 @@
     border-radius: 6px;
     background: transparent;
     border: 1px solid transparent;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 0.82rem;
     cursor: pointer;
     text-align: left;
@@ -208,14 +208,14 @@
 
 .anomalous-nb-nav-item:hover {
     background: rgba(255, 255, 255, 0.06);
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-nb-nav-item.active {
-    background: rgba(139, 92, 246, 0.16);
+    background: color-mix(in srgb, var(--amb-link) 16%, transparent);
     color: #c084fc;
     font-weight: 600;
-    border-color: rgba(139, 92, 246, 0.35);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
 }
 
 .anomalous-nb-nav-icon {
@@ -238,11 +238,11 @@
 
 .anomalous-nb-item {
     padding: 10px;
-    color: #ccc;
+    color: var(--amb-text-soft);
     cursor: pointer;
     border-radius: 4px;
     margin-bottom: 5px;
-    background: #222;
+    background: var(--amb-bg-card);
     display: flex;
     align-items: center;
     white-space: nowrap;
@@ -261,12 +261,12 @@
 }
 
 .anomalous-nb-item:hover {
-    background: #333;
+    background: var(--amb-bg-card-hover);
 }
 
 .anomalous-nb-item.active {
     background: rgba(255, 255, 255, 0.12);
-    color: #fff;
+    color: var(--amb-text-main);
     font-weight: bold;
 }
 
@@ -276,10 +276,10 @@
 
 .anomalous-nb-editor {
     flex: 1;
-    background: #222;
+    background: var(--amb-bg-card);
     overflow-y: auto;
     padding: 20px;
-    color: #eee;
+    color: var(--amb-text-main);
 }
 
 .anomalous-nb-toolbar {
@@ -289,10 +289,10 @@
     position: sticky;
     top: 0;
     z-index: 20;
-    background: var(--amb-bg-page, #18181b);
+    background: var(--amb-bg-page, var(--amb-bg-panel));
     padding: 12px 20px;
     margin: -20px -20px 16px -20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--amb-border);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 
@@ -312,7 +312,7 @@
     position: relative;
     background: var(--amb-btn-primary-bg, #D7D9E0);
     color: var(--amb-btn-primary-text, #15171C);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid var(--amb-border-strong);
     height: 32px;
     padding: 0 14px;
     border-radius: var(--amb-radius-control, 6px);
@@ -331,7 +331,7 @@
 }
 
 .anomalous-btn-primary:hover {
-    background: var(--amb-btn-primary-hover, #E5E7EB);
+    background: var(--amb-btn-primary-hover, var(--amb-btn-primary-bg));
     border-color: rgba(255, 255, 255, 0.4);
     box-shadow: none;
 }
@@ -365,7 +365,7 @@
 .anomalous-btn-danger:hover {
     background: #991b1b;
     border-color: rgba(239, 68, 68, 0.6);
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-btn-success {
@@ -400,8 +400,8 @@
 .anomalous-nb-more-btn {
     position: relative;
     background: rgba(255, 255, 255, 0.06);
-    color: #cbd5e1;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: var(--amb-text-soft);
+    border: 1px solid var(--amb-border-strong);
     height: 32px;
     padding: 0 12px;
     border-radius: var(--amb-radius-control, 6px);
@@ -419,8 +419,8 @@
 .anomalous-nb-more-btn:hover,
 .anomalous-nb-more-btn.active {
     background: rgba(255, 255, 255, 0.12);
-    border-color: rgba(255, 255, 255, 0.25);
-    color: #ffffff;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-main);
 }
 
 .anomalous-nb-dropdown-menu {
@@ -433,7 +433,7 @@
     background: rgba(24, 24, 28, 0.96);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
     padding: 4px;
@@ -465,7 +465,7 @@
     padding: 8px 12px;
     border: none;
     background: transparent;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 0.82rem;
     font-weight: 500;
     border-radius: 5px;
@@ -478,7 +478,7 @@
 
 .anomalous-nb-dropdown-item:hover {
     background: rgba(255, 255, 255, 0.08);
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-nb-dropdown-item-danger {
@@ -492,7 +492,7 @@
 
 .anomalous-nb-dropdown-item-danger.confirming {
     background: #991b1b;
-    color: #ffffff;
+    color: var(--amb-text-main);
     font-weight: 600;
     animation: anomalous-nb-pulse 1s infinite alternate;
 }
@@ -507,8 +507,8 @@
 }
 
 .anomalous-nb-section {
-    background: #2a2a2a;
-    border: 1px solid #444;
+    background: var(--amb-bg-card-hover);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     padding: 15px;
     margin-bottom: 20px;
@@ -519,10 +519,10 @@
 }
 
 .anomalous-nb-select {
-    background: #111;
-    color: #fff;
+    background: var(--amb-bg-page);
+    color: var(--amb-text-main);
     padding: 6px;
-    border: 1px solid #555;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 4px;
 }
 
@@ -549,8 +549,8 @@
     align-items: center;
     gap: 12px;
     padding: 8px 12px 8px 8px;
-    background: #222630;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: var(--amb-bg-card-hover);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     cursor: pointer;
     flex: 1 1 220px;
@@ -562,7 +562,7 @@
 
 .anomalous-nb-minicheck:hover,
 .anomalous-nb-minilora:hover {
-    border-color: rgba(255, 255, 255, 0.2);
+    border-color: var(--amb-border-strong);
     background: #2a3140;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
@@ -571,9 +571,9 @@
 
 .anomalous-nb-minicheck.selected,
 .anomalous-nb-minilora.selected {
-    border-color: #8b5cf6;
-    background: rgba(139, 92, 246, 0.15);
-    box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
+    border-color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 15%, transparent);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--amb-link) 25%, transparent);
 }
 
 .anomalous-nb-minicheck img,
@@ -590,7 +590,7 @@
 
 .anomalous-nb-minicheck-name,
 .anomalous-nb-minilora-name {
-    color: #eee;
+    color: var(--amb-text-main);
     font-size: 0.95em;
     line-height: 1.3;
     overflow: hidden;
@@ -603,7 +603,7 @@
 
 .anomalous-nb-minicheck.selected .anomalous-nb-minicheck-name,
 .anomalous-nb-minilora.selected .anomalous-nb-minilora-name {
-    color: #8b5cf6;
+    color: var(--amb-link);
     font-weight: bold;
 }
 
@@ -611,9 +611,9 @@
     width: 100%;
     min-height: 120px;
     max-height: 360px;
-    background: #121316;
-    color: #f1f5f9;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--amb-bg-page);
+    color: var(--amb-text-main);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
     padding: 10px 12px;
     margin-top: 6px;
@@ -629,13 +629,13 @@
 }
 
 .anomalous-nb-textarea:focus {
-    border-color: rgba(139, 92, 246, 0.5);
+    border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
 }
 
 /* Flat Card Containers */
 .anomalous-nb-card {
     background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 10px;
     padding: 16px;
     margin-bottom: 16px;
@@ -649,12 +649,12 @@
     margin-bottom: 12px;
     font-size: 0.92rem;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-nb-hint {
     margin: 0 0 12px 0;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.82rem;
     line-height: 1.4;
 }
@@ -667,7 +667,7 @@
     flex-wrap: wrap;
     padding: 8px 12px;
     background: rgba(0, 0, 0, 0.22);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     scroll-margin-top: 70px;
 }
@@ -680,7 +680,7 @@
     background: rgba(22, 26, 35, 0.95);
     padding: 10px;
     border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     box-sizing: border-box;
     gap: 6px;
 }
@@ -694,8 +694,8 @@
 }
 
 .anomalous-nb-gallery-box {
-    background: #1e1e1e;
-    border: 1px solid #444;
+    background: var(--amb-bg-card);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     padding: 12px;
     margin-bottom: 15px;
@@ -715,7 +715,7 @@
 /* Notebook Model Fold & Sections Enhancement */
 .anomalous-nb-models-fold {
     background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 10px;
     padding: 0;
     margin-bottom: 16px;
@@ -724,7 +724,7 @@
 }
 
 .anomalous-nb-models-fold[open] {
-    border-color: rgba(139, 92, 246, 0.35);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
     background: rgba(255, 255, 255, 0.03);
 }
 
@@ -737,7 +737,7 @@
     cursor: pointer;
     font-size: 0.92rem;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     user-select: none;
     list-style: none;
     transition: background 0.18s;
@@ -754,22 +754,22 @@
 .anomalous-nb-models-badge {
     font-size: 0.76rem;
     font-weight: 500;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     background: rgba(255, 255, 255, 0.06);
     padding: 2px 8px;
     border-radius: 999px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-nb-fold-arrow {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.88rem;
 }
 
 .anomalous-nb-models-fold .anomalous-nb-section {
     background: transparent;
     border: none;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--amb-border);
     border-radius: 0;
     padding: 16px;
     margin-bottom: 0;
@@ -777,7 +777,7 @@
 
 .anomalous-nb-prompt-section {
     background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 10px;
     padding: 16px;
     margin-bottom: 16px;
@@ -785,7 +785,7 @@
 
 .anomalous-nb-capture-fold {
     background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     border-radius: 10px;
     padding: 0;
     margin-bottom: 16px;
@@ -797,19 +797,19 @@
     cursor: pointer;
     font-size: 0.88rem;
     font-weight: 500;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     list-style: none;
     transition: background 0.18s, color 0.18s;
 }
 
 .anomalous-nb-capture-fold > summary:hover {
     background: rgba(255, 255, 255, 0.05);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-nb-capture-content {
     padding: 12px 16px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--amb-border);
 }
 
 .anomalous-nb-tools-fold {
@@ -817,17 +817,17 @@
     padding: 8px 12px;
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-nb-tools-fold > summary {
     font-size: 0.82rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     cursor: pointer;
 }
 
 .anomalous-nb-tools-fold > summary:hover {
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-nb-selected-badge {
@@ -835,15 +835,15 @@
     padding: 2px 8px;
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-nb-visual-tag {
-    background: #222630;
-    color: #e2e8f0;
+    background: var(--amb-bg-card-hover);
+    color: var(--amb-text-main);
     padding: 6px 10px;
     border-radius: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     cursor: pointer;
     transition: all 0.18s ease;
     min-height: 34px;
@@ -856,8 +856,8 @@
 
 .anomalous-nb-visual-tag.hover {
     background: #2a3140;
-    border-color: rgba(139, 92, 246, 0.5);
-    color: #ffffff;
+    border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
+    color: var(--amb-text-main);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
@@ -884,8 +884,8 @@
 
 .anomalous-nb-tag-edit {
     background: #111827;
-    color: #f1f5f9;
-    border: 1px solid rgba(139, 92, 246, 0.6);
+    color: var(--amb-text-main);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 60%, transparent);
     border-radius: 4px;
     padding: 6px;
     width: 100%;
diff --git a/web/styles/03-gallery-recipes.css b/web/styles/03-gallery-recipes.css
index 7744e29..15e6f5a 100644
--- a/web/styles/03-gallery-recipes.css
+++ b/web/styles/03-gallery-recipes.css
@@ -4,7 +4,7 @@
     display: none;
     flex-direction: column;
     overflow: hidden;
-    background: var(--bg-color, #222);
+    background: var(--bg-color, var(--amb-bg-card));
 }
 
 .anomalous-gallery-grid {
@@ -30,8 +30,8 @@
 
 .anomalous-gallery-card {
     position: relative;
-    background: #111;
-    border: 1px solid #444;
+    background: var(--amb-bg-page);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     overflow: hidden;
     cursor: pointer;
@@ -44,7 +44,7 @@
 
 .anomalous-gallery-card:hover {
     transform: translateY(-3px);
-    border-color: rgba(255, 255, 255, 0.25);
+    border-color: var(--amb-border-strong);
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
     transition-delay: 0.08s;
 }
@@ -58,7 +58,7 @@
     width: 100%;
     height: 100%;
     object-fit: contain;
-    background: #000;
+    background: var(--amb-bg-page);
 }
 
 .anomalous-gallery-delete {
@@ -94,10 +94,10 @@
     gap: 6px;
     max-width: calc(100% - 16px);
     padding: 6px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.16);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 999px;
     background: rgba(15, 20, 30, 0.82);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 11.5px;
     font-weight: 600;
     line-height: 1;
@@ -126,9 +126,9 @@
 
 .anomalous-gallery-details:hover {
     background: rgba(20, 29, 44, 0.94);
-    border-color: rgba(139, 92, 246, 0.55);
+    border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
     color: #fca5a5;
-    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
+    box-shadow: 0 4px 16px color-mix(in srgb, var(--amb-link) 25%, transparent);
     transform: translateY(-1px);
 }
 
@@ -165,7 +165,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #888;
+    color: var(--amb-text-muted);
     font-size: 0.9em;
 }
 
@@ -199,14 +199,14 @@ dialog.anomalous-gallery-viewer[open] {
     top: 20px;
     right: 30px;
     font-size: 40px;
-    color: #ccc;
+    color: var(--amb-text-soft);
     cursor: pointer;
     transition: color 0.2s;
     user-select: none;
 }
 
 .anomalous-gallery-viewer-close:hover {
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 @container (max-width: 750px) {
@@ -250,13 +250,13 @@ dialog.anomalous-gallery-viewer[open] {
     border: 0;
     border-radius: 6px;
     background: transparent;
-    color: #aaa;
+    color: var(--amb-text-muted);
     cursor: pointer;
 }
 
 .anomalous-nb-section-tab.active {
     background: rgba(255, 255, 255, 0.15);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 .theme-abyssal-scarlet .anomalous-nb-section-tab.active {
@@ -270,7 +270,7 @@ dialog.anomalous-gallery-viewer[open] {
     min-height: 0;
     flex-direction: column;
     font-family: Inter, Roboto, "Segoe UI", sans-serif;
-    background: #111317;
+    background: var(--amb-bg-page);
     overflow: hidden;
 }
 
@@ -286,7 +286,7 @@ dialog.anomalous-gallery-viewer[open] {
     background: rgba(18, 22, 32, 0.65);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--amb-border);
     flex-shrink: 0;
     flex-wrap: wrap;
     z-index: 10;
@@ -307,14 +307,14 @@ dialog.anomalous-gallery-viewer[open] {
     background: rgba(255, 255, 255, 0.02);
     padding: 3px 4px;
     border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-recipe-pill {
     padding: 3px 11px;
     border-radius: 14px;
     font-size: 12px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     background: transparent;
     border: none;
     cursor: pointer;
@@ -323,7 +323,7 @@ dialog.anomalous-gallery-viewer[open] {
 }
 
 .anomalous-recipe-pill:hover {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.05);
 }
 
@@ -332,7 +332,7 @@ dialog.anomalous-gallery-viewer[open] {
     text-shadow: none;
     font-weight: 600;
     box-shadow: none;
-    border: 1px solid rgba(165, 180, 252, 0.35);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
     background: var(--amb-bg-card-hover);
     border-color: var(--amb-border-hover);
 }
@@ -357,7 +357,7 @@ dialog.anomalous-gallery-viewer[open] {
     position: absolute;
     left: 10px;
     pointer-events: none;
-    color: #64748b;
+    color: var(--amb-text-dim);
     display: flex;
     align-items: center;
     font-size: 13px;
@@ -368,16 +368,16 @@ dialog.anomalous-gallery-viewer[open] {
     height: 30px;
     padding: 0 12px 0 30px;
     background: rgba(0, 0, 0, 0.28);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 16px;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 12px;
     outline: none;
     transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .anomalous-recipe-search-input:focus {
-    border-color: rgba(99, 102, 241, 0.45);
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
     background: rgba(0, 0, 0, 0.4);
 }
 
@@ -385,9 +385,9 @@ dialog.anomalous-gallery-viewer[open] {
     height: 30px;
     padding: 0 10px;
     background: rgba(0, 0, 0, 0.28);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 16px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 12px;
     outline: none;
     cursor: pointer;
@@ -395,7 +395,7 @@ dialog.anomalous-gallery-viewer[open] {
 }
 
 .anomalous-recipe-tag-select:hover {
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-recipe-topbar-right {
@@ -410,7 +410,7 @@ dialog.anomalous-gallery-viewer[open] {
     display: inline-flex;
     align-items: center;
     background: rgba(0, 0, 0, 0.32);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     padding: 2px;
 }
@@ -423,19 +423,19 @@ dialog.anomalous-gallery-viewer[open] {
     justify-content: center;
     border: none;
     background: transparent;
-    color: #64748b;
+    color: var(--amb-text-dim);
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
 }
 
 .anomalous-recipe-view-btn:hover {
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-recipe-view-btn.is-active {
     background: rgba(255, 255, 255, 0.09);
-    color: #a5b4fc;
+    color: var(--amb-link);
 }
 
 .anomalous-recipe-topbar-btn {
@@ -449,14 +449,14 @@ dialog.anomalous-gallery-viewer[open] {
     font-weight: 500;
     cursor: pointer;
     transition: all 0.15s ease;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.03);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-recipe-topbar-btn:hover {
     background: rgba(255, 255, 255, 0.08);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-recipe-topbar-btn.is-primary {
@@ -480,12 +480,12 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-node-details {
     margin-top: 2px;
-    border-top: 1px solid #3c3c3c;
+    border-top: 1px solid var(--amb-border-strong);
     padding-top: 7px;
 }
 
 .anomalous-recipe-node-details > summary {
-    color: #a9cdff;
+    color: var(--amb-link);
     cursor: pointer;
     user-select: none;
 }
@@ -499,7 +499,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-node {
     padding: 8px;
-    border: 1px solid #3f3f3f;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 7px;
     background: rgba(0, 0, 0, 0.18);
 }
@@ -527,7 +527,7 @@ dialog.anomalous-gallery-viewer[open] {
     align-items: start;
     gap: 8px;
     padding: 7px 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-recipe-edit-param .anomalous-nb-select,
@@ -546,7 +546,7 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-widget-name {
     flex: 0 0 34%;
     overflow: hidden;
-    color: #aaa;
+    color: var(--amb-text-muted);
     text-overflow: ellipsis;
     white-space: nowrap;
 }
@@ -554,13 +554,13 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-widget-value {
     flex: 1;
     overflow: hidden;
-    color: #eee;
+    color: var(--amb-text-main);
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .anomalous-recipe-copy-param {
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.05);
     color: #9ec8ff;
     cursor: pointer;
@@ -586,7 +586,7 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-node-hint {
     display: block;
     margin-top: 4px;
-    color: #888;
+    color: var(--amb-text-muted);
 }
 
 @container (max-width: 680px) {
@@ -600,13 +600,13 @@ dialog.anomalous-gallery-viewer[open] {
 }
 
 .anomalous-recipe-notes {
-    color: #aaa;
+    color: var(--amb-text-muted);
     font-size: 0.8rem;
 }
 
 .anomalous-recipe-empty {
     grid-column: 1 / -1;
-    color: #aaa;
+    color: var(--amb-text-muted);
     text-align: center;
 }
 
@@ -629,10 +629,10 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 12px;
     overflow-y: auto;
     padding: 18px;
-    border: 1px solid #555;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 10px;
-    background: #272727;
-    color: #eee;
+    background: var(--amb-bg-card-hover);
+    color: var(--amb-text-main);
     box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
 }
 
@@ -684,10 +684,10 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 4px;
     overflow: hidden;
     padding: 4px;
-    border: 1px solid #4a4a4a;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 7px;
-    background: #191919;
-    color: #bbb;
+    background: var(--amb-bg-panel);
+    color: var(--amb-text-muted);
     cursor: pointer;
 }
 
@@ -700,7 +700,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-cover-choice.selected {
     border-color: #e5e7eb;
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
 }
 
@@ -711,13 +711,13 @@ dialog.anomalous-gallery-viewer[open] {
 }
 
 .anomalous-recipe-pin-picker {
-    border: 1px solid #444;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     padding: 9px;
 }
 
 .anomalous-recipe-pin-picker > summary {
-    color: #a9cdff;
+    color: var(--amb-link);
     cursor: pointer;
 }
 
@@ -733,8 +733,8 @@ dialog.anomalous-gallery-viewer[open] {
     top: 0;
     z-index: 1;
     padding: 5px 2px;
-    background: #272727;
-    color: #ddd;
+    background: var(--amb-bg-card-hover);
+    color: var(--amb-text-soft);
 }
 
 .anomalous-recipe-pin-choice {
@@ -743,7 +743,7 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 7px;
     padding: 4px 6px;
     border-radius: 5px;
-    color: #bbb;
+    color: var(--amb-text-muted);
     cursor: pointer;
 }
 
@@ -756,7 +756,7 @@ dialog.anomalous-gallery-viewer[open] {
     flex-direction: column;
     gap: 3px;
     padding: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 7px;
     background: rgba(255, 255, 255, 0.04);
 }
@@ -779,7 +779,7 @@ dialog.anomalous-gallery-viewer[open] {
     justify-content: space-between;
     gap: 8px;
     padding: 7px;
-    border: 1px solid #3f3f3f;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 7px;
     color: #c9c9c9;
     font-size: 0.82rem;
@@ -799,7 +799,7 @@ dialog.anomalous-gallery-viewer[open] {
     flex: 1;
     flex-direction: column;
     overflow: hidden;
-    background: #202020;
+    background: var(--amb-bg-card);
     font-family: Inter, Roboto, "Segoe UI", sans-serif;
 }
 
@@ -814,7 +814,7 @@ dialog.anomalous-gallery-viewer[open] {
     flex: 0 0 auto;
     justify-content: space-between;
     padding: 14px 18px;
-    border-bottom: 1px solid #3d3d3d;
+    border-bottom: 1px solid var(--amb-border-strong);
 }
 
 .anomalous-recipe-detail-header h3,
@@ -828,23 +828,23 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 4px;
     overflow-x: auto;
     padding: 8px 52px 8px 18px;
-    border-bottom: 1px solid #3d3d3d;
-    background: #252525;
+    border-bottom: 1px solid var(--amb-border-strong);
+    background: var(--amb-bg-card-hover);
 }
 
 .anomalous-recipe-detail-tab {
     padding: 7px 11px;
     border: 1px solid transparent;
     border-radius: 7px;
-    color: #aaa;
+    color: var(--amb-text-muted);
     background: transparent;
     cursor: pointer;
     white-space: nowrap;
 }
 
 .anomalous-recipe-detail-tab.active {
-    border-color: rgba(255, 255, 255, 0.25);
-    color: #ffffff;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.1);
 }
 
@@ -881,9 +881,9 @@ dialog.anomalous-gallery-viewer[open] {
     width: 100%;
     margin: 0 0 12px;
     overflow: hidden;
-    border: 1px solid #404040;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 9px;
-    background: #171717;
+    background: var(--amb-bg-panel);
     break-inside: avoid;
 }
 
@@ -893,7 +893,7 @@ dialog.anomalous-gallery-viewer[open] {
     max-height: 480px;
     cursor: zoom-in;
     object-fit: contain;
-    background: #101010;
+    background: var(--amb-bg-page);
 }
 
 .anomalous-recipe-gallery-card-actions {
@@ -920,8 +920,8 @@ dialog.anomalous-gallery-viewer[open] {
     max-height: 260px;
     overflow-y: auto;
     padding: 10px;
-    border-top: 1px solid #3d3d3d;
-    background: #202020;
+    border-top: 1px solid var(--amb-border-strong);
+    background: var(--amb-bg-card);
     font-size: 0.82rem;
 }
 
@@ -932,7 +932,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-gallery-diff-row {
     padding: 7px 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--amb-border);
 }
 
 .anomalous-recipe-gallery-diff-values {
@@ -963,7 +963,7 @@ dialog.anomalous-gallery-viewer[open] {
     min-height: 120px;
     border-radius: 9px;
     object-fit: contain;
-    background: #111;
+    background: var(--amb-bg-page);
 }
 
 .anomalous-recipe-detail-hero video {
@@ -972,7 +972,7 @@ dialog.anomalous-gallery-viewer[open] {
     min-height: 120px;
     border-radius: 9px;
     object-fit: contain;
-    background: #111;
+    background: var(--amb-bg-page);
 }
 
 .anomalous-recipe-detail-hero-copy {
@@ -1005,7 +1005,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-inline-title:hover,
 .anomalous-recipe-inline-editable:hover {
-    color: #a9cdff;
+    color: var(--amb-link);
 }
 
 .anomalous-recipe-inline-input {
@@ -1016,7 +1016,7 @@ dialog.anomalous-gallery-viewer[open] {
     border: 1px solid rgba(112, 178, 255, 0.7);
     border-radius: 7px;
     color: #f4f4f4;
-    background: #161616;
+    background: var(--amb-bg-panel);
     font: inherit;
 }
 
@@ -1040,9 +1040,9 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-inline-edit-button {
     padding: 2px 6px;
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 6px;
-    color: #a9cdff;
+    color: var(--amb-link);
     background: transparent;
     cursor: pointer;
     font-size: 0.72rem;
@@ -1050,7 +1050,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-detail-advanced,
 .anomalous-recipe-advanced-info {
-    color: #aaa;
+    color: var(--amb-text-muted);
     font-size: 0.78rem;
 }
 
@@ -1058,12 +1058,12 @@ dialog.anomalous-gallery-viewer[open] {
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    color: #a9cdff;
+    color: var(--amb-link);
     cursor: pointer;
     user-select: none;
     padding: 6px 12px;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s;
     outline: none;
@@ -1072,8 +1072,8 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-advanced-info > summary:hover,
 .anomalous-recipe-advanced-info > summary:focus-visible {
-    background: rgba(169, 205, 255, 0.15);
-    border-color: rgba(169, 205, 255, 0.3);
+    background: color-mix(in srgb, var(--amb-link) 15%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
     color: #cce0ff;
 }
 
@@ -1085,7 +1085,7 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 7px;
     margin-top: 7px;
     padding: 7px 8px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 7px;
     background: rgba(0, 0, 0, 0.14);
 }
@@ -1120,7 +1120,7 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-detail-notes p { flex: 1; }
 
 .anomalous-recipe-detail-muted {
-    color: #999;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-recipe-detail-stats,
@@ -1138,21 +1138,21 @@ dialog.anomalous-gallery-viewer[open] {
     align-items: start;
     gap: 4px;
     padding: 9px 10px;
-    border: 1px solid #3e3e3e;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     background: rgba(0, 0, 0, 0.16);
 }
 
 .anomalous-recipe-detail-stat-label,
 .anomalous-recipe-detail-label {
-    color: #999;
+    color: var(--amb-text-muted);
     font-size: 0.8rem;
     word-break: break-all;
     overflow-wrap: anywhere;
 }
 
 .anomalous-recipe-detail-stat strong {
-    color: #eee;
+    color: var(--amb-text-main);
 }
 
 .anomalous-recipe-detail-stat-good { color: #6ee7b7 !important; }
@@ -1166,7 +1166,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-model-composition h5 {
     margin: 0;
-    color: #ddd;
+    color: var(--amb-text-soft);
     font-size: 0.9rem;
 }
 
@@ -1182,7 +1182,7 @@ dialog.anomalous-gallery-viewer[open] {
     min-width: 0;
     gap: 5px;
     padding: 9px 10px;
-    border: 1px solid #414141;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     background: rgba(0, 0, 0, 0.14);
 }
@@ -1221,9 +1221,9 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-detail-section {
     margin-bottom: 12px;
     padding: 12px;
-    border: 1px solid #3d3d3d;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 10px;
-    background: #292929;
+    background: var(--amb-bg-card-hover);
 }
 
 .anomalous-recipe-detail-section-heading {
@@ -1307,7 +1307,7 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-identity-help:hover,
 .anomalous-recipe-identity-help:focus-visible {
     opacity: 1;
-    outline: 2px solid rgba(255, 255, 255, 0.3);
+    outline: 2px solid var(--amb-border-strong);
     outline-offset: 1px;
 }
 
@@ -1316,9 +1316,9 @@ dialog.anomalous-gallery-viewer[open] {
     flex: 0 0 100%;
     max-width: min(340px, calc(100vw - 48px));
     padding: 9px 11px;
-    border: 1px solid rgba(255, 255, 255, 0.18);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 7px;
-    color: #fff;
+    color: var(--amb-text-main);
     background: rgba(20, 22, 28, 0.98);
     box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
     font-size: 0.78rem;
@@ -1393,7 +1393,7 @@ dialog.anomalous-gallery-viewer[open] {
     flex-direction: column;
     gap: 8px;
     padding: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 12px;
     background: linear-gradient(180deg, rgba(28, 30, 36, 0.75), rgba(18, 19, 23, 0.85));
     backdrop-filter: blur(10px);
@@ -1420,7 +1420,7 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 7px;
     margin-bottom: 12px;
     padding: 10px 12px;
-    border: 1px solid var(--border-color, #444);
+    border: 1px solid var(--border-color, var(--amb-border-strong));
     border-radius: 7px;
     background: rgba(255, 255, 255, 0.025);
 }
@@ -1450,10 +1450,10 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-model-location-copy {
     justify-self: start;
     padding: 4px 9px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 5px;
     background: rgba(255, 255, 255, 0.06);
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     cursor: pointer;
     font-size: 0.75em;
 }
@@ -1480,9 +1480,9 @@ dialog.anomalous-gallery-viewer[open] {
     align-items: flex-start;
     gap: 3px;
     padding: 8px 9px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 7px;
-    color: #ddd;
+    color: var(--amb-text-soft);
     background: rgba(255, 255, 255, 0.03);
     text-align: left;
     cursor: pointer;
@@ -1515,7 +1515,7 @@ dialog.anomalous-gallery-viewer[open] {
     place-items: center;
     min-width: 30px;
     padding: 0;
-    border: 1px solid rgba(255, 255, 255, 0.09);
+    border: 1px solid var(--amb-border);
     border-radius: 7px;
     color: #9da5b1;
     background: rgba(255, 255, 255, 0.025);
@@ -1527,9 +1527,9 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-parameter-notebook-rename:hover,
 .anomalous-recipe-parameter-notebook-rename:focus-visible {
-    border-color: rgba(96, 165, 250, 0.55);
+    border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
     color: #bfdbfe;
-    background: rgba(96, 165, 250, 0.12);
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
 }
 
 .anomalous-recipe-parameter-notebook-delete:hover,
@@ -1624,17 +1624,17 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 10px;
     align-items: center;
     margin-bottom: 12px;
-    color: #bbb;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-recipe-parameter-editor-name input,
 .anomalous-recipe-parameter-editor-input {
     min-width: 0;
     padding: 8px 10px;
-    border: 1px solid #4a4a4a;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 7px;
-    color: #eee;
-    background: #181818;
+    color: var(--amb-text-main);
+    background: var(--amb-bg-panel);
     font: inherit;
 }
 
@@ -1661,7 +1661,7 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-detail-parameter-node,
 .anomalous-recipe-version-row {
     padding: 9px 10px;
-    border: 1px solid #414141;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     background: rgba(0, 0, 0, 0.15);
 }
@@ -1698,10 +1698,10 @@ dialog.anomalous-gallery-viewer[open] {
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    border: 1px solid #464646;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 7px;
-    color: #a9cdff;
-    background: #151515;
+    color: var(--amb-link);
+    background: var(--amb-bg-page);
     text-align: center;
 }
 
@@ -1729,7 +1729,7 @@ dialog.anomalous-gallery-viewer[open] {
     overflow: hidden;
     padding: 2px 4px;
     border-radius: 4px;
-    color: #ddd;
+    color: var(--amb-text-soft);
     background: rgba(0, 0, 0, 0.68);
     font-size: 0.64rem;
     text-overflow: ellipsis;
@@ -1740,7 +1740,7 @@ dialog.anomalous-gallery-viewer[open] {
     position: static;
     max-width: calc(100% - 12px);
     padding: 0;
-    color: #888;
+    color: var(--amb-text-muted);
     background: transparent;
     white-space: normal;
 }
@@ -1783,8 +1783,8 @@ dialog.anomalous-gallery-viewer[open] {
 }
 
 .anomalous-recipe-model-name.is-unresolved {
-    border-color: rgba(255, 255, 255, 0.08);
-    color: #999;
+    border-color: var(--amb-border);
+    color: var(--amb-text-muted);
     background: rgba(0, 0, 0, 0.12);
 }
 
@@ -1812,12 +1812,12 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-civitai-btn {
     font-size: 0.75rem;
-    color: #3b82f6;
+    color: var(--amb-link);
     text-decoration: none;
-    border: 1px solid rgba(59, 130, 246, 0.3);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 30%, transparent);
     padding: 2px 8px;
     border-radius: 4px;
-    background: rgba(59, 130, 246, 0.1);
+    background: color-mix(in srgb, var(--amb-link) 10%, transparent);
     transition: all 0.2s ease;
     white-space: nowrap;
     display: inline-flex;
@@ -1826,9 +1826,9 @@ dialog.anomalous-gallery-viewer[open] {
 }
 
 .anomalous-recipe-civitai-btn:hover {
-    background: rgba(59, 130, 246, 0.2);
-    border-color: rgba(59, 130, 246, 0.5);
-    color: #60a5fa;
+    background: color-mix(in srgb, var(--amb-link) 20%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
+    color: var(--amb-link);
 }
 
 .anomalous-recipe-model-reference.is-unresolved {
@@ -1856,7 +1856,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-model-reference-meta {
     flex-wrap: wrap;
-    color: #aaa;
+    color: var(--amb-text-muted);
     font-size: 0.8rem;
 }
 
@@ -1864,10 +1864,10 @@ dialog.anomalous-gallery-viewer[open] {
     min-width: 180px;
     flex: 1;
     padding: 7px 9px;
-    border: 1px solid #555;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 6px;
-    color: #eee;
-    background: #161616;
+    color: var(--amb-text-main);
+    background: var(--amb-bg-panel);
 }
 
 .anomalous-recipe-detail-parameter-node {
@@ -1881,7 +1881,7 @@ dialog.anomalous-gallery-viewer[open] {
     grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr);
     align-items: start;
     padding-top: 6px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--amb-border);
 }
 
 .anomalous-recipe-detail-parameter-row .anomalous-recipe-detail-label {
@@ -1899,7 +1899,7 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-detail-full-value {
     min-width: 0;
     padding: 6px 8px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
     color: #e7e7e7;
     background: rgba(0, 0, 0, 0.18);
@@ -1941,7 +1941,7 @@ dialog.anomalous-gallery-viewer[open] {
     flex-direction: column;
     gap: 10px;
     padding: 14px 16px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-left: 4px solid #7d8796;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.025);
@@ -1951,7 +1951,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-detail-prompt:hover {
     background: rgba(255, 255, 255, 0.035);
-    border-color: rgba(255, 255, 255, 0.14);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-recipe-detail-prompt.is-saving { opacity: 0.55; }
@@ -1989,19 +1989,19 @@ dialog.anomalous-gallery-viewer[open] {
     display: inline-flex;
     align-items: center;
     gap: 5px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 6px;
     padding: 3px 8px;
     font-size: 0.74rem;
     font-weight: 600;
     background: rgba(255, 255, 255, 0.05);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     transition: all 0.15s ease;
 }
 
 .anomalous-recipe-prompt-role-badge.is-interactive:hover {
     background: rgba(255, 255, 255, 0.12);
-    border-color: rgba(255, 255, 255, 0.25);
+    border-color: var(--amb-border-strong);
     transform: translateY(-1px);
 }
 
@@ -2020,12 +2020,12 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-prompt-card-node-title {
     font-size: 0.84rem;
     font-weight: 600;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
 }
 
 .anomalous-recipe-prompt-card-node-type {
     font-size: 0.74rem;
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-recipe-prompt-card-body {
@@ -2043,11 +2043,11 @@ dialog.anomalous-gallery-viewer[open] {
     padding: 12px 14px;
     border-radius: 8px;
     background: rgba(0, 0, 0, 0.22);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     font-size: 0.84rem;
     line-height: 1.6;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-recipe-prompt-meta {
@@ -2067,9 +2067,9 @@ dialog.anomalous-gallery-viewer[open] {
     display: inline-flex;
     width: fit-content;
     padding: 2px 7px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 999px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     background: rgba(255, 255, 255, 0.05);
     font-size: 0.72rem;
 }
@@ -2085,7 +2085,7 @@ dialog.anomalous-gallery-viewer[open] {
     border: 1px solid rgba(159, 196, 255, 0.3);
     border-radius: 7px;
     color: var(--input-text, #e8eef7);
-    background: var(--comfy-input-bg, #24272d);
+    background: var(--comfy-input-bg, var(--amb-bg-card-hover));
     cursor: pointer;
 }
 
@@ -2160,10 +2160,10 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-model-settings-dialog {
     width: min(560px, 100%);
     padding: 24px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 16px;
     box-sizing: border-box;
-    color: #f3f4f6;
+    color: var(--amb-text-main);
     background: linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98));
     box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
 }
@@ -2186,7 +2186,7 @@ dialog.anomalous-gallery-viewer[open] {
     justify-content: space-between;
     gap: 18px;
     padding: 16px 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--amb-border);
 }
 
 .anomalous-model-setting-copy {
@@ -2206,10 +2206,10 @@ dialog.anomalous-gallery-viewer[open] {
     width: 190px;
     max-width: 44%;
     padding: 9px 10px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     color: #f5f5f5;
-    background: #17181c;
+    background: var(--amb-bg-panel);
     cursor: pointer;
 }
 
@@ -2228,9 +2228,9 @@ dialog.anomalous-gallery-viewer[open] {
     min-width: 96px;
     margin: 20px 0 0 auto;
     padding: 9px 18px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
-    color: #fff;
+    color: var(--amb-text-main);
     background: #3f73b9;
     cursor: pointer;
 }
@@ -2269,9 +2269,9 @@ dialog.anomalous-gallery-viewer[open] {
 }
 
 .anomalous-recipe-filter-tag {
-    border: 1px solid rgba(138, 180, 248, 0.42);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 42%, transparent);
     border-radius: 999px;
-    background: rgba(138, 180, 248, 0.08);
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent);
     color: #cfe1ff;
     padding: 3px 9px;
     cursor: pointer;
@@ -2279,8 +2279,8 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-filter-tag:hover,
 .anomalous-recipe-filter-tag.active {
-    background: rgba(138, 180, 248, 0.28);
-    color: #fff;
+    background: color-mix(in srgb, var(--amb-link) 28%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-recipe-filter-summary {
@@ -2297,7 +2297,7 @@ dialog.anomalous-gallery-viewer[open] {
     flex: 1 1 100%;
     margin-top: 8px;
     padding: 9px;
-    border-left: 2px solid rgba(138, 180, 248, 0.42);
+    border-left: 2px solid color-mix(in srgb, var(--amb-link) 42%, transparent);
     background: rgba(0, 0, 0, 0.14);
 }
 
@@ -2318,7 +2318,7 @@ dialog.anomalous-gallery-viewer[open] {
     margin-top: 6px;
     padding: 8px;
     min-width: 0;
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
     border-radius: 7px;
     background: rgba(0, 0, 0, 0.1);
 }
@@ -2400,8 +2400,8 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-more-btn {
     position: relative;
     background: rgba(255, 255, 255, 0.06);
-    color: #cbd5e1;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: var(--amb-text-soft);
+    border: 1px solid var(--amb-border-strong);
     height: 32px;
     padding: 0 12px;
     border-radius: var(--amb-radius-control, 6px);
@@ -2420,8 +2420,8 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-recipe-more-btn:hover,
 .anomalous-recipe-more-btn.active {
     background: rgba(255, 255, 255, 0.12);
-    border-color: rgba(255, 255, 255, 0.25);
-    color: #ffffff;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-main);
 }
 
 .anomalous-recipe-dropdown-menu {
@@ -2434,7 +2434,7 @@ dialog.anomalous-gallery-viewer[open] {
     background: rgba(24, 24, 28, 0.96);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
     padding: 4px;
@@ -2466,7 +2466,7 @@ dialog.anomalous-gallery-viewer[open] {
     padding: 8px 12px;
     border: none;
     background: transparent;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 0.82rem;
     font-weight: 500;
     border-radius: 5px;
@@ -2479,7 +2479,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-dropdown-item:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.08);
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-recipe-dropdown-item:disabled {
@@ -2504,7 +2504,7 @@ dialog.anomalous-gallery-viewer[open] {
     width: 32px;
     height: 32px;
     padding: 0;
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.09));
+    border: 1px solid var(--amb-border, var(--amb-border));
     border-radius: var(--amb-radius-control, 6px);
     background: rgba(255, 255, 255, 0.04);
     color: var(--amb-text-muted, #A7AAB5);
@@ -2516,7 +2516,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-btn-icon:hover {
     background: rgba(255, 255, 255, 0.10);
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.20));
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
     color: var(--amb-text-main, #E7E8ED);
 }
 
@@ -2533,9 +2533,9 @@ dialog.anomalous-gallery-viewer[open] {
 }
 
 .anomalous-btn-icon.anomalous-btn-export:hover {
-    color: #60a5fa;
-    border-color: rgba(96, 165, 250, 0.35);
-    background: rgba(96, 165, 250, 0.1);
+    color: var(--amb-link);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 10%, transparent);
 }
 
 /* Ghost Button (secondary text button) */
@@ -2543,7 +2543,7 @@ dialog.anomalous-gallery-viewer[open] {
     position: relative;
     background: rgba(255, 255, 255, 0.05);
     color: var(--amb-text-main, #E7E8ED);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
     border-radius: var(--amb-radius-control, 6px);
     height: 32px;
     padding: 0 14px;
@@ -2562,8 +2562,8 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-btn-ghost:hover {
     background: rgba(255, 255, 255, 0.09);
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.22));
-    color: #ffffff;
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
+    color: var(--amb-text-main);
 }
 
 .anomalous-btn-ghost:active {
@@ -2616,7 +2616,7 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 16px;
     padding: 16px;
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     margin-bottom: 24px;
 }
@@ -2631,7 +2631,7 @@ dialog.anomalous-gallery-viewer[open] {
     padding: 16px;
     margin-bottom: 16px;
     background: rgba(0, 0, 0, 0.25);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     transition: max-height 0.3s ease;
 }
@@ -2640,8 +2640,8 @@ dialog.anomalous-gallery-viewer[open] {
     display: block;
     margin-bottom: 12px;
     font-size: 1.05rem;
-    color: #e0e0e0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    color: var(--amb-text-soft);
+    border-bottom: 1px solid var(--amb-border);
     padding-bottom: 8px;
 }
 
@@ -2652,9 +2652,9 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 8px;
     margin-top: 10px;
     padding: 9px 10px;
-    border: 1px solid rgba(139, 92, 246, 0.16);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 16%, transparent);
     border-radius: 8px;
-    background: rgba(139, 92, 246, 0.045);
+    background: color-mix(in srgb, var(--amb-link) 4%, transparent);
 }
 
 .anomalous-recipe-material-selection .anomalous-workbench-node-selection-count {
@@ -2667,7 +2667,7 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 9px;
     margin-bottom: 12px;
     padding-bottom: 8px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-recipe-material-node-header .anomalous-recipe-detail-node-title {
@@ -2686,7 +2686,7 @@ dialog.anomalous-gallery-viewer[open] {
     flex: 0 0 16px;
     margin: 0;
     border-radius: 4px;
-    border: 1.5px solid rgba(255, 255, 255, 0.22);
+    border: 1.5px solid var(--amb-border-strong);
     background-color: rgba(20, 10, 16, 0.6);
     cursor: pointer;
     position: relative;
@@ -2698,22 +2698,22 @@ dialog.anomalous-gallery-viewer[open] {
 }
 
 .anomalous-recipe-material-node-select:hover {
-    border-color: rgba(139, 92, 246, 0.6);
-    background-color: rgba(139, 92, 246, 0.08);
+    border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
+    background-color: color-mix(in srgb, var(--amb-link) 8%, transparent);
 }
 
 .anomalous-recipe-material-node-select:checked {
-    background-color: #8b5cf6;
-    border-color: #8b5cf6;
+    background-color: var(--amb-btn-primary-bg);
+    border-color: var(--amb-link);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b0f17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
     background-size: 11px 11px;
     background-position: center;
     background-repeat: no-repeat;
-    box-shadow: 0 0 8px rgba(139, 92, 246, 0.35);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--amb-link) 35%, transparent);
 }
 
 .anomalous-recipe-material-node-select:focus-visible {
-    outline: 2px solid #8b5cf6;
+    outline: 2px solid var(--amb-link);
     outline-offset: 2px;
 }
 
@@ -2747,18 +2747,18 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-recipe-detail-node-expand button {
     background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 12px;
     padding: 4px 16px;
     font-size: 0.8rem;
-    color: #ccc;
+    color: var(--amb-text-soft);
     cursor: pointer;
     transition: background 0.2s, color 0.2s;
 }
 
 .anomalous-recipe-detail-node-expand button:hover {
     background: rgba(255, 255, 255, 0.2);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 /* Hero Section Styling */
@@ -2791,8 +2791,8 @@ dialog.anomalous-gallery-viewer[open] {
     bottom: 16px;
     right: 16px;
     background: rgba(0, 0, 0, 0.6);
-    color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: var(--amb-text-main);
+    border: 1px solid var(--amb-border-strong);
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 0.9rem;
@@ -2816,14 +2816,14 @@ dialog.anomalous-gallery-viewer[open] {
     gap: 6px;
     padding: 5px 10px;
     border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(0, 0, 0, 0.25);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     cursor: text;
 }
 
 .anomalous-search-chips:focus-within {
-    border-color: rgba(129, 140, 248, 0.5);
+    border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
 }
 
 .anomalous-search-chips-icon {
@@ -2840,7 +2840,7 @@ dialog.anomalous-gallery-viewer[open] {
     background: transparent;
     border: none;
     outline: none;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 13px;
     padding: 3px 0;
 }
@@ -2852,9 +2852,9 @@ dialog.anomalous-gallery-viewer[open] {
     max-width: 100%;
     padding: 2px 4px 2px 9px;
     border-radius: 999px;
-    border: 1px solid rgba(129, 140, 248, 0.4);
-    background: rgba(99, 102, 241, 0.18);
-    color: #e0e7ff;
+    border: 1px solid color-mix(in srgb, var(--amb-link) 40%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 18%, transparent);
+    color: var(--amb-text-main);
     font-size: 12px;
     line-height: 1.5;
 }
@@ -2914,7 +2914,7 @@ dialog.anomalous-gallery-viewer[open] {
 
 .anomalous-search-chips-count {
     font-size: 12px;
-    color: #a5b4fc;
+    color: var(--amb-link);
     white-space: nowrap;
 }
 
@@ -2926,3 +2926,126 @@ dialog.anomalous-gallery-viewer[open] {
     margin: 12px 20px 0;
     flex-shrink: 0;
 }
+
+/* Workflow share codes (main.js AMB_WorkflowShare): the menu, export and import dialogs. */
+.anomalous-share-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(5px);
+}
+
+.anomalous-share-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    width: min(500px, calc(100vw - 32px));
+    box-sizing: border-box;
+    padding: 26px;
+    border: 1px solid var(--amb-border);
+    border-radius: var(--amb-radius-panel);
+    background: var(--amb-bg-panel);
+    color: var(--amb-text-main);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
+
+.anomalous-share-dialog.is-wide {
+    width: min(600px, calc(100vw - 32px));
+}
+
+.anomalous-share-dialog.is-menu {
+    width: min(400px, calc(100vw - 32px));
+    gap: 12px;
+    text-align: center;
+}
+
+.anomalous-share-title {
+    margin: 0 0 4px;
+    font-size: 1.15em;
+    font-weight: 600;
+}
+
+.anomalous-share-options {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    color: var(--amb-text-soft);
+}
+
+.anomalous-share-options label {
+    cursor: pointer;
+}
+
+.anomalous-share-code {
+    width: 100%;
+    height: 150px;
+    box-sizing: border-box;
+    padding: 10px;
+    border: 1px solid var(--amb-border-strong);
+    border-radius: var(--amb-radius-control);
+    background: var(--amb-bg-input);
+    color: var(--amb-text-main);
+    font-family: monospace;
+    font-size: 12px;
+    resize: none;
+}
+
+.anomalous-share-code.is-input {
+    height: 100px;
+}
+
+.anomalous-share-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.anomalous-share-btn {
+    padding: 8px 16px;
+    border: 1px solid var(--amb-border-strong);
+    border-radius: var(--amb-radius-control);
+    background: var(--amb-bg-card);
+    color: var(--amb-text-main);
+    font-size: 13px;
+    cursor: pointer;
+}
+
+.anomalous-share-btn:hover {
+    border-color: var(--amb-border-hover);
+    background: var(--amb-bg-card-hover);
+}
+
+.anomalous-share-btn.is-primary {
+    border-color: transparent;
+    background: var(--amb-btn-primary-bg);
+    color: var(--amb-btn-primary-text);
+    font-weight: 600;
+}
+
+.anomalous-share-btn.is-primary:hover {
+    background: var(--amb-btn-primary-hover);
+}
+
+.anomalous-share-btn.is-large {
+    padding: 12px;
+    font-size: 14px;
+}
+
+.anomalous-share-btn.is-quiet {
+    border-color: transparent;
+    background: transparent;
+    color: var(--amb-text-muted);
+}
+
+.anomalous-share-btn.is-quiet:hover {
+    background: var(--amb-bg-card);
+    color: var(--amb-text-main);
+}
+
+.anomalous-share-btn[hidden] {
+    display: none;
+}
diff --git a/web/styles/04-dialogs-materials.css b/web/styles/04-dialogs-materials.css
index d470305..b58b7e8 100644
--- a/web/styles/04-dialogs-materials.css
+++ b/web/styles/04-dialogs-materials.css
@@ -1,8 +1,8 @@
 /* Modal Gallery Dialog Styling */
 .anomalous-recipe-gallery-dialog {
-    background: #1e1e1e;
-    color: #eee;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--amb-bg-card);
+    color: var(--amb-text-main);
+    border: 1px solid var(--amb-border);
     border-radius: 12px;
     padding: 24px;
     width: 90vw;
@@ -95,7 +95,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    background: #111317;
+    background: var(--amb-bg-page);
 }
 
 /* 1. 一体化 Studio 顶栏 (精简纯净，杜绝层层大框堆叠) */
@@ -109,8 +109,8 @@
     min-height: 48px;
     padding: 9px 16px;
     box-sizing: border-box;
-    background: #16181f;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+    background: var(--amb-bg-panel);
+    border-bottom: 1px solid var(--amb-border);
     flex-shrink: 0;
     z-index: 10;
 }
@@ -129,14 +129,14 @@
     background: rgba(0, 0, 0, 0.32);
     padding: 3px 4px;
     border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-material-pill {
     padding: 3px 11px;
     border-radius: 14px;
     font-size: 12px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     background: transparent;
     border: none;
     cursor: pointer;
@@ -145,12 +145,12 @@
 }
 
 .anomalous-material-pill:hover {
-    color: #e2e8f0;
+    color: var(--amb-text-main);
 }
 
 .anomalous-material-pill.is-active {
-    background: rgba(139, 92, 246, 0.18);
-    color: #8b5cf6;
+    background: color-mix(in srgb, var(--amb-link) 18%, transparent);
+    color: var(--amb-link);
     font-weight: 600;
     box-shadow: none;
 }
@@ -175,7 +175,7 @@
     position: absolute;
     left: 10px;
     pointer-events: none;
-    color: #64748b;
+    color: var(--amb-text-dim);
     display: flex;
     align-items: center;
     font-size: 13px;
@@ -186,16 +186,16 @@
     height: 30px;
     padding: 0 12px 0 30px;
     background: rgba(0, 0, 0, 0.28);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 16px;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 12px;
     outline: none;
     transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .anomalous-material-search-input:focus {
-    border-color: rgba(139, 92, 246, 0.45);
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
     background: rgba(0, 0, 0, 0.4);
 }
 
@@ -203,9 +203,9 @@
     height: 30px;
     padding: 0 10px;
     background: rgba(0, 0, 0, 0.28);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 16px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 12px;
     outline: none;
     cursor: pointer;
@@ -213,7 +213,7 @@
 }
 
 .anomalous-material-tag-select:hover {
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-material-topbar-right {
@@ -228,7 +228,7 @@
     display: inline-flex;
     align-items: center;
     background: rgba(0, 0, 0, 0.32);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     padding: 2px;
 }
@@ -241,19 +241,19 @@
     justify-content: center;
     border: none;
     background: transparent;
-    color: #64748b;
+    color: var(--amb-text-dim);
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
 }
 
 .anomalous-material-view-btn:hover {
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-material-view-btn.is-active {
     background: rgba(255, 255, 255, 0.09);
-    color: #8b5cf6;
+    color: var(--amb-link);
 }
 
 .anomalous-material-topbar-btn {
@@ -268,33 +268,33 @@
     font-weight: 500;
     cursor: pointer;
     transition: all 0.15s ease;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.03);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-material-topbar-btn:hover {
     background: rgba(255, 255, 255, 0.08);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-material-studio-toggle {
-    border-color: rgba(139, 92, 246, 0.3);
-    color: #8b5cf6;
-    background: rgba(139, 92, 246, 0.08);
+    border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
+    color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent);
 }
 
 .anomalous-material-studio-toggle:hover {
-    background: rgba(139, 92, 246, 0.16);
-    border-color: rgba(139, 92, 246, 0.5);
+    background: color-mix(in srgb, var(--amb-link) 16%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
     color: #fca5a5;
 }
 
 .anomalous-material-studio-toggle.is-active {
     background: linear-gradient(135deg, rgba(20, 184, 166, 0.35), rgba(13, 148, 136, 0.45));
-    border-color: rgba(139, 92, 246, 0.6);
-    color: #ffffff;
-    box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
+    border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
+    color: var(--amb-text-main);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--amb-link) 25%, transparent);
 }
 
 /* 2. 主区域分屏容器 */
@@ -324,8 +324,8 @@
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    border-left: 1px solid rgba(255, 255, 255, 0.08);
-    background: #13151b;
+    border-left: 1px solid var(--amb-border);
+    background: var(--amb-bg-panel);
     transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
     pointer-events: none;
     z-index: 5;
@@ -403,8 +403,8 @@
     display: flex;
     min-width: 0;
     overflow: hidden;
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08));
-    background: var(--amb-bg-card, #24262E);
+    border: 1px solid var(--amb-border, var(--amb-border));
+    background: var(--amb-bg-card, var(--amb-bg-card-hover));
     border-radius: var(--amb-radius-card, 10px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     cursor: pointer;
@@ -413,12 +413,12 @@
 }
 
 .anomalous-material-card:hover {
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.2));
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
 }
 
 .anomalous-material-card:focus-visible {
-    outline: 2px solid var(--amb-accent-gold, #8b5cf6);
+    outline: 2px solid var(--amb-accent-gold, var(--amb-link));
     outline-offset: 2px;
 }
 
@@ -460,7 +460,7 @@
 }
 
 .anomalous-material-list.is-grid .anomalous-material-card:hover {
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.22));
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
 }
 
 .anomalous-material-list.is-grid .anomalous-material-card-preview {
@@ -471,7 +471,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    background: #0d0f14;
+    background: var(--amb-bg-page);
     position: relative;
 }
 
@@ -553,7 +553,7 @@
     overflow-wrap: anywhere;
     font-size: 13px;
     line-height: 17px;
-    color: var(--amb-text-main, #f1f5f9);
+    color: var(--amb-text-main, var(--amb-text-main));
     font-weight: 500;
 }
 
@@ -571,12 +571,12 @@
     justify-content: space-between;
     gap: 6px;
     font-size: 11px;
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-material-list.is-grid .anomalous-material-card-date {
     font-size: 11px;
-    color: #64748b;
+    color: var(--amb-text-dim);
     white-space: nowrap;
 }
 
@@ -604,7 +604,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    background: #0d0f14;
+    background: var(--amb-bg-page);
 }
 
 .anomalous-material-list.is-list .anomalous-material-card-preview img {
@@ -642,7 +642,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 13px;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-material-list.is-list .anomalous-material-card-meta {
@@ -681,9 +681,9 @@
     align-items: center;
     justify-content: center;
     border-radius: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     background: rgba(18, 20, 26, 0.85);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     cursor: pointer;
     font-size: 12px;
     backdrop-filter: blur(6px);
@@ -717,8 +717,8 @@
     top: 8px;
     left: 8px;
     z-index: 5;
-    color: #8b5cf6;
-    border-color: rgba(139, 92, 246, 0.3);
+    color: var(--amb-link);
+    border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
     opacity: 0;
 }
 
@@ -727,8 +727,8 @@
 }
 
 .anomalous-material-card-quick-load:hover {
-    background: rgba(139, 92, 246, 0.28);
-    border-color: rgba(139, 92, 246, 0.6);
+    background: color-mix(in srgb, var(--amb-link) 28%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
     color: #fca5a5;
 }
 
@@ -737,8 +737,8 @@
     top: 8px;
     left: 38px;
     z-index: 5;
-    color: #cbd5e1;
-    border-color: rgba(255, 255, 255, 0.2);
+    color: var(--amb-text-soft);
+    border-color: var(--amb-border-strong);
     opacity: 0;
 }
 
@@ -749,7 +749,7 @@
 .anomalous-material-card-send-studio:hover {
     background: rgba(255, 255, 255, 0.15);
     border-color: rgba(255, 255, 255, 0.4);
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 .theme-abyssal-scarlet .anomalous-material-card-send-studio {
@@ -775,9 +775,9 @@
     margin-top: 5px;
     font-size: 11px;
     font-weight: 600;
-    color: #ffffff;
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(79, 70, 229, 0.95) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: var(--amb-text-main);
+    background: linear-gradient(135deg, color-mix(in srgb, var(--amb-link) 90%, transparent) 0%, color-mix(in srgb, var(--amb-link) 95%, transparent) 100%);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 6px;
     cursor: pointer;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
@@ -786,9 +786,9 @@
 }
 
 .anomalous-material-card-apply-btn:hover {
-    background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(67, 56, 202, 1) 100%);
+    background: linear-gradient(135deg, var(--amb-link) 0%, rgba(67, 56, 202, 1) 100%);
     transform: translateY(-1px);
-    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
+    box-shadow: 0 4px 10px color-mix(in srgb, var(--amb-link) 40%, transparent);
 }
 
 .anomalous-material-card-apply-btn:disabled {
@@ -805,7 +805,7 @@
 
 .anomalous-material-header-apply-btn {
     font-weight: 600 !important;
-    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
+    box-shadow: 0 2px 8px color-mix(in srgb, var(--amb-link) 35%, transparent);
 }
 
 /* 徽标、标签与来源标记通用定义 */
@@ -813,17 +813,17 @@
     max-width: 100%;
     overflow: hidden;
     padding: 2px 6px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.035);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.65rem;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .anomalous-material-source-mark.is-current {
-    border-color: rgba(139, 92, 246, 0.25);
+    border-color: color-mix(in srgb, var(--amb-link) 25%, transparent);
     color: #fca5a5;
 }
 
@@ -836,17 +836,17 @@
 
 .anomalous-material-meta-pill {
     padding: 2px 6px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.035);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.65rem;
     white-space: nowrap;
 }
 
 .anomalous-material-types {
     overflow: hidden;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 0.72rem;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -866,8 +866,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     border-radius: 4px;
-    background: #232731;
-    color: #94a3b8;
+    background: var(--amb-bg-card-hover);
+    color: var(--amb-text-muted);
     padding: 1px 6px;
     font-size: 11px;
 }
@@ -880,10 +880,10 @@
     justify-content: center;
     gap: 12px;
     padding: 8px 16px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    background: #14161c;
+    border-top: 1px solid var(--amb-border);
+    background: var(--amb-bg-panel);
     font-size: 12px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-material-pager button:disabled {
@@ -895,7 +895,7 @@
     grid-column: 1 / -1;
     padding: 48px 16px;
     text-align: center;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 14px;
 }
 
@@ -919,9 +919,9 @@
     box-sizing: border-box;
     min-width: 0;
     max-width: 100%;
-    border: 1px solid #3d4350;
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
-    background: #1d2028;
+    background: var(--amb-bg-card);
     color: #e5e9f0;
     padding: 8px 10px;
     font: inherit;
@@ -937,7 +937,7 @@
     flex: 1;
     flex-direction: column;
     overflow: hidden;
-    background: #111318;
+    background: var(--amb-bg-page);
 }
 
 .anomalous-library-detail-header {
@@ -946,21 +946,21 @@
     gap: 14px;
     min-height: 72px;
     padding: 12px 18px;
-    border-bottom: 1px solid rgba(255,255,255,.08);
+    border-bottom: 1px solid var(--amb-border);
     background: rgba(25,27,33,.96);
 }
 
 .anomalous-library-detail-back {
     flex: 0 0 auto;
     padding: 8px 11px;
-    border: 1px solid rgba(255,255,255,.1);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     background: rgba(255,255,255,.04);
     color: #c9cfda;
     cursor: pointer;
 }
 
-.anomalous-library-detail-back:hover { border-color: rgba(81,221,190,.42); color: #fff; }
+.anomalous-library-detail-back:hover { border-color: rgba(81,221,190,.42); color: var(--amb-text-main); }
 .anomalous-library-detail-heading { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; }
 .anomalous-library-detail-heading h2 {
     margin: 0;
@@ -986,8 +986,8 @@
 
 .anomalous-library-detail-layout.is-parameter .anomalous-library-detail-image-stage {
     flex: 0 0 180px;
-    border-color: rgba(139, 92, 246, 0.18);
-    background: radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.12), rgba(13, 15, 20, 0.9) 72%);
+    border-color: color-mix(in srgb, var(--amb-link) 18%, transparent);
+    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--amb-link) 12%, transparent), rgba(13, 15, 20, 0.9) 72%);
     cursor: default;
 }
 
@@ -998,7 +998,7 @@
     flex-direction: column;
     gap: 12px;
     padding: 18px;
-    border-right: 1px solid rgba(255,255,255,.08);
+    border-right: 1px solid var(--amb-border);
     background: radial-gradient(circle at 50% 35%, #242a35, #0d0f14 72%);
 }
 
@@ -1010,9 +1010,9 @@
     justify-content: center;
     overflow: hidden;
     padding: 0;
-    border: 1px solid rgba(255,255,255,.1);
+    border: 1px solid var(--amb-border);
     border-radius: 12px;
-    background: #090a0d;
+    background: var(--amb-bg-page);
     color: #647083;
     font-size: 42px;
     cursor: zoom-in;
@@ -1031,7 +1031,7 @@
     justify-content: space-between;
     gap: 4px;
     padding: 10px 12px;
-    border: 1px solid rgba(255,255,255,.07);
+    border: 1px solid var(--amb-border);
     border-radius: 9px;
     background: rgba(0,0,0,.24);
 }
@@ -1141,7 +1141,7 @@
     flex-wrap: wrap;
     gap: 6px;
     padding-top: 6px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--amb-border);
 }
 
 #anomalous-container.anomalous-docked .anomalous-library-detail-actions .anomalous-btn-primary,
@@ -1166,7 +1166,7 @@
     padding: 10px;
     gap: 8px;
     min-height: 0;
-    border-right: 1px solid rgba(255, 255, 255, 0.08);
+    border-right: 1px solid var(--amb-border);
 }
 
 #anomalous-container.anomalous-docked .anomalous-library-detail-image-stage {
@@ -1251,7 +1251,7 @@
         flex-wrap: wrap;
         gap: 6px;
         padding-top: 6px;
-        border-top: 1px solid rgba(255, 255, 255, 0.06);
+        border-top: 1px solid var(--amb-border);
     }
     .anomalous-library-detail-layout {
         grid-template-columns: clamp(180px, 30%, 205px) minmax(0, 1fr) !important;
@@ -1280,7 +1280,7 @@
     .anomalous-library-detail-media {
         min-height: 220px;
         border-right: 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        border-bottom: 1px solid var(--amb-border);
     }
     .anomalous-library-detail-inspector {
         overflow: visible;
@@ -1291,7 +1291,7 @@
     .anomalous-library-detail-header { align-items: flex-start; flex-wrap: wrap; }
     .anomalous-library-detail-heading { order: -1; flex-basis: 100%; }
     .anomalous-library-detail-layout { grid-template-columns: 1fr; overflow-y: auto; }
-    .anomalous-library-detail-media { min-height: 390px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
+    .anomalous-library-detail-media { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--amb-border); }
     .anomalous-library-detail-layout.is-parameter .anomalous-library-detail-media { min-height: 260px; }
     .anomalous-library-detail-inspector { overflow: visible; }
 }
@@ -1310,7 +1310,7 @@
     justify-content: space-between;
     gap: 8px;
     padding: 7px 9px;
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
     border-radius: 7px;
     background: rgba(0, 0, 0, 0.16);
 }
@@ -1354,9 +1354,9 @@
     width: min(1420px, 96vw);
     height: min(900px, 92vh);
     max-height: 92vh;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 16px;
-    background: #101217;
+    background: var(--amb-bg-page);
     box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72);
     overflow: hidden;
 }
@@ -1368,10 +1368,10 @@
     z-index: 10;
     width: 34px;
     height: 34px;
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 50%;
     background: rgba(18, 20, 26, 0.7);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 20px;
     line-height: 1;
     display: flex;
@@ -1384,7 +1384,7 @@
 
 .anomalous-material-detail-close:hover {
     background: rgba(255, 255, 255, 0.18);
-    color: #fff;
+    color: var(--amb-text-main);
     transform: scale(1.06);
 }
 
@@ -1423,8 +1423,8 @@
     flex-direction: column;
     gap: 8px;
     padding: 10px 12px 12px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
-    background: #0c0e13;
+    border-top: 1px solid var(--amb-border);
+    background: var(--amb-bg-page);
 }
 
 .anomalous-material-filmstrip {
@@ -1444,9 +1444,9 @@
     width: 56px;
     height: 56px;
     overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
-    background: #111318;
+    background: var(--amb-bg-page);
 }
 
 .anomalous-material-film-thumb.is-clickable {
@@ -1500,7 +1500,7 @@
     gap: 10px;
     min-width: 0;
     font-size: 0.76rem;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-material-media-bar > span {
@@ -1522,13 +1522,13 @@
     flex-direction: column;
     height: 100%;
     min-height: 0;
-    background: #14161c;
-    border-left: 1px solid rgba(255, 255, 255, 0.08);
+    background: var(--amb-bg-panel);
+    border-left: 1px solid var(--amb-border);
 }
 
 .anomalous-material-side-header {
     padding: 20px 52px 14px 22px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid var(--amb-border);
     flex-shrink: 0;
 }
 
@@ -1551,7 +1551,7 @@
     max-width: 100%;
     overflow: hidden;
     padding: 3px 8px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.04);
     color: #b4becc;
@@ -1585,8 +1585,8 @@
 /* Sticky Footer */
 .anomalous-material-side-footer {
     padding: 12px 22px 16px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
-    background: #111318;
+    border-top: 1px solid var(--amb-border);
+    background: var(--amb-bg-page);
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
@@ -1604,17 +1604,17 @@
 .anomalous-material-side-footer label {
     display: grid;
     gap: 6px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 0.78rem;
     font-weight: 600;
 }
 
 .anomalous-material-side-footer input {
     padding: 9px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.04);
-    color: #ffffff;
+    color: var(--amb-text-main);
     font-size: 0.82rem;
     outline: none;
     transition: border-color 0.15s;
@@ -1706,8 +1706,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     display: flex;
     min-width: 0;
     overflow: hidden;
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08));
-    background: var(--amb-bg-card, #24262E);
+    border: 1px solid var(--amb-border, var(--amb-border));
+    background: var(--amb-bg-card, var(--amb-bg-card-hover));
     border-radius: var(--amb-radius-card, 10px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     cursor: pointer;
@@ -1716,12 +1716,12 @@ dialog.anomalous-gallery-viewer::backdrop {
 }
 
 .anomalous-recipe-card:hover {
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.22));
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
 }
 
 .anomalous-recipe-card:focus-visible {
-    outline: 2px solid var(--amb-accent-gold, #818cf8);
+    outline: 2px solid var(--amb-accent-gold, var(--amb-link));
     outline-offset: 2px;
 }
 
@@ -1757,7 +1757,7 @@ dialog.anomalous-gallery-viewer::backdrop {
     width: 100%;
     height: 136px;
     flex-shrink: 0;
-    background: #0d0f14;
+    background: var(--amb-bg-page);
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -1817,10 +1817,10 @@ dialog.anomalous-gallery-viewer::backdrop {
     background: rgba(12, 14, 20, 0.78);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     font-size: 0.65rem;
     font-weight: 500;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     white-space: nowrap;
     box-shadow: none;
 }
@@ -1828,7 +1828,7 @@ dialog.anomalous-gallery-viewer::backdrop {
 .anomalous-recipe-readiness-text {
     font-size: 0.64rem;
     line-height: 1;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-recipe-cover-pill {
@@ -1838,8 +1838,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     background: rgba(12, 14, 18, 0.82);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    color: #e2e8f0;
+    border: 1px solid var(--amb-border-strong);
+    color: var(--amb-text-main);
     font-size: 0.66rem;
     font-weight: 500;
     max-width: 140px;
@@ -1860,8 +1860,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     font-weight: 600;
     background: rgba(10, 12, 16, 0.85);
     backdrop-filter: blur(6px);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border-strong);
+    color: var(--amb-text-muted);
     pointer-events: none;
 }
 
@@ -1871,8 +1871,8 @@ dialog.anomalous-gallery-viewer::backdrop {
 }
 
 .anomalous-recipe-scope-pill.is-complete {
-    border-color: rgba(99, 102, 241, 0.4);
-    color: #a5b4fc;
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
+    color: var(--amb-link);
 }
 
 /* 网格卡片信息区 */
@@ -1904,7 +1904,7 @@ dialog.anomalous-gallery-viewer::backdrop {
     overflow-wrap: anywhere;
     font-size: 13px;
     line-height: 17px;
-    color: var(--amb-text-main, #f1f5f9);
+    color: var(--amb-text-main, var(--amb-text-main));
     font-weight: 500;
 }
 
@@ -1950,15 +1950,15 @@ dialog.anomalous-gallery-viewer::backdrop {
     padding: 1px 5px;
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     white-space: nowrap;
 }
 
 .anomalous-recipe-spec-tag.is-lora {
-    color: #93c5fd;
-    background: rgba(59, 130, 246, 0.08);
-    border-color: rgba(59, 130, 246, 0.2);
+    color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 20%, transparent);
 }
 
 .anomalous-recipe-spec-tag.is-step {
@@ -1988,8 +1988,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     padding: 2px 6px;
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     cursor: pointer;
     transition: all 0.15s ease;
     flex-shrink: 0;
@@ -1997,7 +1997,7 @@ dialog.anomalous-gallery-viewer::backdrop {
 
 .anomalous-recipe-badge-tag:hover {
     background: rgba(255, 255, 255, 0.1);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 /* 网格卡片底部主动作与悬浮微操作 */
@@ -2008,7 +2008,7 @@ dialog.anomalous-gallery-viewer::backdrop {
     gap: 6px;
     margin-top: 2px;
     padding-top: 6px;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-top: 1px solid var(--amb-border);
 }
 
 .anomalous-recipe-btn-primary-action {
@@ -2019,7 +2019,7 @@ dialog.anomalous-gallery-viewer::backdrop {
     border-radius: var(--amb-radius-control, 6px);
     background: var(--amb-btn-primary-bg, #D7D9E0);
     color: var(--amb-btn-primary-text, #15171C);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid var(--amb-border-strong);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.2px;
@@ -2037,7 +2037,7 @@ dialog.anomalous-gallery-viewer::backdrop {
 }
 
 .anomalous-recipe-btn-primary-action:hover {
-    background: var(--amb-btn-primary-hover, #E5E7EB);
+    background: var(--amb-btn-primary-hover, var(--amb-btn-primary-bg));
     border-color: rgba(255, 255, 255, 0.4);
     box-shadow: none;
 }
@@ -2068,8 +2068,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     justify-content: center;
     border-radius: 5px;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.09);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     cursor: pointer;
     font-size: 11px;
     transition: all 0.15s ease;
@@ -2077,7 +2077,7 @@ dialog.anomalous-gallery-viewer::backdrop {
 
 .anomalous-recipe-card-mini-btn:hover {
     background: rgba(255, 255, 255, 0.12);
-    color: #fff;
+    color: var(--amb-text-main);
     transform: translateY(-1px);
 }
 
@@ -2108,7 +2108,7 @@ dialog.anomalous-gallery-viewer::backdrop {
     border-radius: 6px;
     flex-shrink: 0;
     overflow: hidden;
-    background: #0d0f14;
+    background: var(--amb-bg-page);
 }
 
 .anomalous-recipe-list.is-list .anomalous-recipe-cover-pill,
@@ -2142,7 +2142,7 @@ dialog.anomalous-gallery-viewer::backdrop {
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 13px;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-recipe-list.is-list .anomalous-recipe-card-footer {
@@ -2229,12 +2229,12 @@ dialog.anomalous-gallery-viewer::backdrop {
     padding: 10px 12px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-recipe-metric-label {
     font-size: 0.74rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -2242,7 +2242,7 @@ dialog.anomalous-gallery-viewer::backdrop {
 .anomalous-recipe-metric-value {
     font-size: 1.1rem;
     font-weight: 600;
-    color: #f8fafc;
+    color: var(--amb-text-main);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2253,8 +2253,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     padding: 10px 14px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #93c5fd;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-link);
     cursor: pointer;
     user-select: none;
     font-size: 0.85rem;
@@ -2272,8 +2272,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     padding: 9px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #cbd5e1;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-soft);
     font-size: 0.82rem;
     cursor: pointer;
     transition: background 0.2s, border-color 0.2s;
@@ -2281,7 +2281,7 @@ dialog.anomalous-gallery-viewer::backdrop {
 
 .anomalous-recipe-lazy-expand-btn:hover {
     background: rgba(255, 255, 255, 0.09);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-recipe-readiness-pill.is-ready {
@@ -2309,7 +2309,7 @@ dialog.anomalous-gallery-viewer::backdrop {
     gap: 8px;
     margin-top: auto;
     padding-top: 8px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--amb-border);
 }
 
 .anomalous-recipe-btn-primary-action {
@@ -2317,8 +2317,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     padding: 8px 14px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.18);
-    color: #f1f5f9;
+    border: 1px solid var(--amb-border-strong);
+    color: var(--amb-text-main);
     font-size: 0.82rem;
     font-weight: 500;
     cursor: pointer;
@@ -2328,8 +2328,8 @@ dialog.anomalous-gallery-viewer::backdrop {
 
 .anomalous-recipe-btn-primary-action:hover {
     background: rgba(255, 255, 255, 0.16);
-    border-color: rgba(255, 255, 255, 0.28);
-    color: #ffffff;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-main);
 }
 
 .anomalous-recipe-card-mini-actions {
@@ -2342,8 +2342,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     padding: 6px 8px;
     border-radius: 6px;
     background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     cursor: pointer;
     font-size: 0.85rem;
     line-height: 1;
@@ -2352,20 +2352,20 @@ dialog.anomalous-gallery-viewer::backdrop {
 
 .anomalous-recipe-card-mini-btn:hover {
     background: rgba(255, 255, 255, 0.1);
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.15);
+    color: var(--amb-text-main);
+    border-color: var(--amb-border-strong);
 }
 
 
 .anomalous-recipe-banner-btn.is-match-all {
     background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.14);
-    color: #e2e8f0;
+    border: 1px solid var(--amb-border-strong);
+    color: var(--amb-text-main);
 }
 
 .anomalous-recipe-banner-btn.is-match-all:hover {
     background: rgba(255, 255, 255, 0.14);
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 /* Metric Cards for Sampling Parameters */
@@ -2383,12 +2383,12 @@ dialog.anomalous-gallery-viewer::backdrop {
     padding: 10px 12px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-recipe-metric-label {
     font-size: 0.74rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -2396,7 +2396,7 @@ dialog.anomalous-gallery-viewer::backdrop {
 .anomalous-recipe-metric-value {
     font-size: 1.1rem;
     font-weight: 600;
-    color: #f8fafc;
+    color: var(--amb-text-main);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2407,8 +2407,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     padding: 10px 14px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #93c5fd;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-link);
     cursor: pointer;
     user-select: none;
     font-size: 0.85rem;
@@ -2426,8 +2426,8 @@ dialog.anomalous-gallery-viewer::backdrop {
     padding: 9px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #cbd5e1;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-soft);
     font-size: 0.82rem;
     cursor: pointer;
     transition: all 0.2s;
@@ -2435,6 +2435,6 @@ dialog.anomalous-gallery-viewer::backdrop {
 
 .anomalous-recipe-lazy-expand-btn:hover {
     background: rgba(255, 255, 255, 0.1);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
diff --git a/web/styles/05-recipe-studio-overrides.css b/web/styles/05-recipe-studio-overrides.css
index bfcbcb9..90bf9ad 100644
--- a/web/styles/05-recipe-studio-overrides.css
+++ b/web/styles/05-recipe-studio-overrides.css
@@ -7,7 +7,7 @@
     padding: 16px !important;
     border-radius: 14px !important;
     background: linear-gradient(145deg, rgba(30, 32, 38, 0.7), rgba(18, 19, 23, 0.85)) !important;
-    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border: 1px solid var(--amb-border) !important;
     margin-bottom: 16px !important;
     backdrop-filter: blur(12px);
 }
@@ -18,8 +18,8 @@
     height: 220px;
     border-radius: 10px;
     overflow: hidden;
-    background: #0d0e11;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: var(--amb-bg-page);
+    border: 1px solid var(--amb-border);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -54,12 +54,12 @@
     padding: 8px 10px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.035);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-recipe-studio-metric-label {
     font-size: 0.72rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     text-transform: uppercase;
     letter-spacing: 0.3px;
 }
@@ -67,7 +67,7 @@
 .anomalous-recipe-studio-metric-val {
     font-size: 0.96rem;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -83,14 +83,14 @@
     line-height: 1.6;
     word-break: break-word;
     background: rgba(255, 255, 255, 0.025);
-    border: 1px solid rgba(255, 255, 255, 0.07);
-    color: #cbd5e1;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-soft);
     transition: border-color 0.2s ease, background 0.2s ease;
 }
 
 .anomalous-recipe-prompt-box:hover {
     background: rgba(255, 255, 255, 0.035);
-    border-color: rgba(255, 255, 255, 0.12);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-recipe-prompt-box.is-positive {
@@ -110,16 +110,16 @@
     padding: 0;
     border-radius: 6px;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     cursor: pointer;
     transition: all 0.18s ease;
 }
 
 .anomalous-recipe-prompt-micro-copy:hover {
     background: rgba(255, 255, 255, 0.15);
-    border-color: rgba(255, 255, 255, 0.25);
-    color: #ffffff;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-main);
     transform: translateY(-1px);
 }
 
@@ -168,8 +168,8 @@
     padding: 8px 14px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.18);
-    color: #f1f5f9;
+    border: 1px solid var(--amb-border-strong);
+    color: var(--amb-text-main);
     font-size: 0.82rem;
     font-weight: 500;
     cursor: pointer;
@@ -179,8 +179,8 @@
 
 .anomalous-preset-btn-primary:hover {
     background: rgba(255, 255, 255, 0.18);
-    border-color: rgba(255, 255, 255, 0.28);
-    color: #ffffff;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-main);
 }
 
 .anomalous-preset-btn-secondary {
@@ -191,8 +191,8 @@
     padding: 8px 12px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.035);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     font-size: 0.82rem;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -201,8 +201,8 @@
 
 .anomalous-preset-btn-secondary:hover {
     background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 255, 255, 0.15);
-    color: #cbd5e1;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-soft);
 }
 
 .anomalous-preset-item-card {
@@ -215,7 +215,7 @@
     padding: 10px 12px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
     cursor: pointer;
     transition: all 0.15s ease;
     margin-bottom: 6px;
@@ -223,7 +223,7 @@
 
 .anomalous-preset-item-card:hover {
     background: rgba(255, 255, 255, 0.045);
-    border-color: rgba(255, 255, 255, 0.14);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-preset-item-card.is-active {
@@ -257,16 +257,16 @@
     padding: 2px 7px;
     border-radius: 6px;
     background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     font-size: 0.74rem;
     transition: all 0.15s ease;
 }
 
 .anomalous-recipe-info-bubble:hover {
     background: rgba(255, 255, 255, 0.08);
-    color: #e2e8f0;
-    border-color: rgba(255, 255, 255, 0.16);
+    color: var(--amb-text-main);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-preset-item-main {
@@ -280,7 +280,7 @@
 .anomalous-preset-item-title {
     font-size: 0.86rem;
     font-weight: 500;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     min-width: 0;
     flex: 1;
     overflow: hidden;
@@ -289,7 +289,7 @@
 }
 
 .anomalous-preset-item-card.is-active .anomalous-preset-item-title {
-    color: #ffffff;
+    color: var(--amb-text-main);
     font-weight: 600;
 }
 
@@ -298,14 +298,14 @@
     align-items: center;
     gap: 6px;
     font-size: 0.72rem;
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-preset-item-badge {
     padding: 1px 6px;
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.08);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.68rem;
     font-weight: 500;
 }
@@ -332,8 +332,8 @@
     padding: 0;
     border-radius: 6px;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #cbd5e1;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-soft);
     cursor: pointer;
     font-size: 0.78rem;
     line-height: 1;
@@ -343,7 +343,7 @@
 
 .anomalous-preset-item-btn:hover {
     background: rgba(255, 255, 255, 0.16);
-    color: #fff;
+    color: var(--amb-text-main);
     transform: translateY(-1px);
 }
 
@@ -355,8 +355,8 @@
 
 /* Modern Parameter Bento Matrix */
 .anomalous-preset-bento-deck {
-    background: var(--amb-bg-panel, #1C1E24) !important;
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)) !important;
+    background: var(--amb-bg-panel, var(--amb-bg-card)) !important;
+    border: 1px solid var(--amb-border, var(--amb-border)) !important;
     border-radius: var(--amb-radius-panel, 12px) !important;
     padding: 12px 14px !important;
     margin-bottom: 12px !important;
@@ -376,8 +376,8 @@
     gap: 4px;
     padding: 9px 12px;
     border-radius: var(--amb-radius-control, 8px);
-    background: var(--amb-bg-card, #24262E);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.07));
+    background: var(--amb-bg-card, var(--amb-bg-card-hover));
+    border: 1px solid var(--amb-border, var(--amb-border));
     transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }
 
@@ -386,8 +386,8 @@
 }
 
 .anomalous-recipe-bento-tile:hover {
-    background: var(--amb-bg-card-hover, #2d303a);
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.18));
+    background: var(--amb-bg-card-hover, var(--amb-bg-card-hover));
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
     transform: translateY(-1px);
 }
 
@@ -402,7 +402,7 @@
     display: inline-flex;
     align-items: center;
     font-size: 0.7rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     text-transform: uppercase;
     letter-spacing: 0.3px;
     font-weight: 600;
@@ -415,7 +415,7 @@
 .anomalous-recipe-bento-val {
     font-size: 0.98rem;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -431,8 +431,8 @@
 .anomalous-recipe-model-highlight-card {
     padding: 10px 14px;
     border-radius: 8px;
-    background: rgba(99, 102, 241, 0.08);
-    border: 1px solid rgba(99, 102, 241, 0.2);
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 20%, transparent);
     min-width: 0;
 }
 
@@ -452,21 +452,21 @@
     padding: 8px 12px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     font-size: 0.82rem;
     transition: all 0.15s ease;
 }
 
 .anomalous-recipe-lora-pill:hover {
     background: rgba(255, 255, 255, 0.06);
-    border-color: rgba(99, 102, 241, 0.3);
+    border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
     transform: translateY(-1px);
 }
 
 .anomalous-recipe-lora-name {
     flex: 1;
     min-width: 0;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-weight: 500;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -479,7 +479,7 @@
     align-items: center;
     gap: 8px;
     font-size: 0.72rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-family: ui-monospace, monospace;
 }
 
@@ -492,7 +492,7 @@
     padding: 16px 18px;
     border-radius: 12px;
     background: linear-gradient(145deg, rgba(30, 32, 38, 0.7), rgba(18, 19, 23, 0.85));
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     margin-bottom: 14px;
     backdrop-filter: blur(12px);
     flex-wrap: wrap;
@@ -516,7 +516,7 @@
 .anomalous-preset-console-title {
     font-size: 1.15rem;
     font-weight: 600;
-    color: #f8fafc;
+    color: var(--amb-text-main);
     margin: 0;
     min-width: 0;
     overflow: hidden;
@@ -537,7 +537,7 @@
     height: 80px;
     border-radius: 8px;
     overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     cursor: pointer;
     flex-shrink: 0;
     align-self: flex-start;
@@ -548,7 +548,7 @@
 
 .anomalous-preset-compact-gallery:hover {
     transform: scale(1.03);
-    border-color: rgba(99, 102, 241, 0.5);
+    border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
 }
 
 .anomalous-preset-compact-gallery img {
@@ -565,7 +565,7 @@
     padding: 2px 6px;
     border-radius: 4px;
     background: rgba(0, 0, 0, 0.75);
-    color: #fff;
+    color: var(--amb-text-main);
     font-size: 0.68rem;
     backdrop-filter: blur(4px);
     white-space: nowrap;
@@ -579,7 +579,7 @@
     padding: 10px 0;
     background: rgba(32, 32, 32, 0.92);
     backdrop-filter: blur(8px);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--amb-border);
     margin-bottom: 12px;
     display: flex;
     align-items: center;
diff --git a/web/styles/06-material-workbench.css b/web/styles/06-material-workbench.css
index 5de7069..8e877c2 100644
--- a/web/styles/06-material-workbench.css
+++ b/web/styles/06-material-workbench.css
@@ -23,7 +23,7 @@
     padding: 9px 10px;
     border-radius: 9px;
     background: rgba(255, 255, 255, 0.035);
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-material-metric-card.is-wide {
@@ -47,17 +47,17 @@
 .anomalous-material-prompt-card {
     position: relative;
     padding: 10px 12px 10px 13px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-left-width: 3px;
     border-radius: 9px;
     background: rgba(255, 255, 255, 0.03);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 0.8rem;
     line-height: 1.5;
 }
 
 .anomalous-material-prompt-card.is-positive {
-    border-left-color: #8b5cf6;
+    border-left-color: var(--amb-link);
 }
 
 .anomalous-material-prompt-card.is-negative {
@@ -89,7 +89,7 @@
 .anomalous-material-prompt-bar-label {
     font-size: 0.75rem;
     font-weight: 600;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-material-prompt-bar-btns {
@@ -102,8 +102,8 @@
     padding: 2px 7px;
     border-radius: 5px;
     background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #cbd5e1;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-soft);
     font-size: 0.7rem;
     cursor: pointer;
     transition: all 0.15s;
@@ -111,7 +111,7 @@
 
 .anomalous-material-mini-btn:hover {
     background: rgba(255, 255, 255, 0.14);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-material-model-peek {
@@ -122,7 +122,7 @@
 
 .anomalous-material-model-card-item.is-primary {
     padding: 9px 11px;
-    border-color: rgba(255, 255, 255, 0.12);
+    border-color: var(--amb-border-strong);
     background: rgba(255, 255, 255, 0.04);
 }
 
@@ -147,7 +147,7 @@
 .anomalous-material-accordion {
     border-radius: 9px;
     background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-material-accordion > summary {
@@ -158,7 +158,7 @@
     padding: 9px 12px;
     font-size: 0.78rem;
     font-weight: 500;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     cursor: pointer;
     user-select: none;
     list-style: none;
@@ -184,11 +184,11 @@
 
 .anomalous-material-accordion > summary:hover {
     background: rgba(255, 255, 255, 0.05);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-material-accordion[open] > summary {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid var(--amb-border);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -216,8 +216,8 @@
     padding: 3px 8px;
     border-radius: 6px;
     background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     font-size: 0.73rem;
 }
 
@@ -236,14 +236,14 @@
 
 .anomalous-material-node-detail {
     overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
     border-radius: 7px;
     background: rgba(5, 7, 11, 0.22);
 }
 
 .anomalous-material-node-detail.is-selected {
-    border-color: rgba(139, 92, 246, 0.34);
-    background: rgba(139, 92, 246, 0.045);
+    border-color: color-mix(in srgb, var(--amb-link) 34%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 4%, transparent);
 }
 
 .anomalous-material-node-select {
@@ -254,7 +254,7 @@
     flex: 0 0 16px;
     margin: 0;
     border-radius: 4px;
-    border: 1.5px solid rgba(255, 255, 255, 0.22);
+    border: 1.5px solid var(--amb-border-strong);
     background-color: rgba(20, 10, 16, 0.6);
     cursor: pointer;
     position: relative;
@@ -266,22 +266,22 @@
 }
 
 .anomalous-material-node-select:hover {
-    border-color: rgba(139, 92, 246, 0.6);
-    background-color: rgba(139, 92, 246, 0.08);
+    border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
+    background-color: color-mix(in srgb, var(--amb-link) 8%, transparent);
 }
 
 .anomalous-material-node-select:checked {
-    background-color: #8b5cf6;
-    border-color: #8b5cf6;
+    background-color: var(--amb-btn-primary-bg);
+    border-color: var(--amb-link);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b0f17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
     background-size: 11px 11px;
     background-position: center;
     background-repeat: no-repeat;
-    box-shadow: 0 0 8px rgba(139, 92, 246, 0.35);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--amb-link) 35%, transparent);
 }
 
 .anomalous-material-node-select:focus-visible {
-    outline: 2px solid #8b5cf6;
+    outline: 2px solid var(--amb-link);
     outline-offset: 2px;
 }
 
@@ -302,7 +302,7 @@
 }
 
 .anomalous-material-node-detail > summary:hover { background: rgba(255, 255, 255, 0.035); }
-.anomalous-material-node-detail[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
+.anomalous-material-node-detail[open] > summary { border-bottom: 1px solid var(--amb-border); }
 
 .anomalous-material-node-heading {
     display: flex;
@@ -336,9 +336,9 @@
 .anomalous-workbench-save-selected-btn {
     flex: 0 0 auto;
     padding: 5px 9px;
-    border: 1px solid rgba(139, 92, 246, 0.24);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 24%, transparent);
     border-radius: 6px;
-    background: rgba(139, 92, 246, 0.08);
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent);
     color: #8fe1d4;
     font-size: 0.66rem;
     cursor: pointer;
@@ -346,8 +346,8 @@
 
 .anomalous-material-node-save:hover,
 .anomalous-workbench-save-selected-btn:hover:not(:disabled) {
-    border-color: rgba(139, 92, 246, 0.42);
-    background: rgba(139, 92, 246, 0.14);
+    border-color: color-mix(in srgb, var(--amb-link) 42%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 14%, transparent);
     color: #d8fff8;
 }
 
@@ -415,7 +415,7 @@
     overflow: auto;
     margin: 0;
     padding: 6px 8px;
-    border: 1px solid rgba(255, 255, 255, 0.055);
+    border: 1px solid var(--amb-border);
     border-radius: 5px;
     background: rgba(0, 0, 0, 0.18);
     color: #d5dae4;
@@ -444,10 +444,10 @@
 
 .anomalous-material-toggle-all-btn {
     padding: 3px 9px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 6px;
     background: rgba(255, 255, 255, 0.04);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.68rem;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -456,7 +456,7 @@
 .anomalous-material-toggle-all-btn:hover {
     border-color: rgba(81, 221, 190, 0.35);
     background: rgba(81, 221, 190, 0.08);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
 }
 
 /* Material Prompt Station */
@@ -491,7 +491,7 @@
 
 .anomalous-material-prompt-count {
     font-size: 0.68rem;
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-material-copy-prompt-btn {
@@ -508,7 +508,7 @@
 .anomalous-material-copy-prompt-btn:hover {
     background: rgba(81, 221, 190, 0.22);
     border-color: rgba(81, 221, 190, 0.5);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-material-prompt-body {
@@ -517,13 +517,13 @@
     font-family: inherit;
     font-size: 0.74rem;
     line-height: 1.45;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     white-space: pre-wrap;
     word-break: break-word;
     padding: 7px 9px;
     background: rgba(0, 0, 0, 0.28);
     border-radius: 5px;
-    border: 1px solid rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--amb-border);
 }
 
 /* Model Categorized Groups */
@@ -544,9 +544,9 @@
     gap: 6px;
     font-size: 0.72rem;
     font-weight: 600;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     padding-bottom: 3px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-material-model-card-item {
@@ -557,7 +557,7 @@
     padding: 6px 10px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.025);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-material-model-card-item.is-clickable {
@@ -565,8 +565,8 @@
 }
 
 .anomalous-material-model-card-item.is-active {
-    border-color: rgba(56, 189, 248, 0.45);
-    background: rgba(56, 189, 248, 0.08);
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent);
 }
 
 .theme-abyssal-scarlet .anomalous-material-model-card-item.is-active {
@@ -579,9 +579,9 @@
     width: 48px;
     height: 48px;
     overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 7px;
-    background: #0b0c10;
+    background: var(--amb-bg-page);
 }
 
 .anomalous-material-model-thumb img,
@@ -619,7 +619,7 @@
 }
 
 .anomalous-material-model-filename {
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 0.79rem;
     font-weight: 500;
     overflow: hidden;
@@ -632,7 +632,7 @@
     align-items: center;
     gap: 8px;
     font-size: 0.71rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-material-model-tag-badge {
@@ -645,8 +645,8 @@
 
 .anomalous-tag-base {
     background: rgba(255, 255, 255, 0.08);
-    color: #cbd5e1;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: var(--amb-text-soft);
+    border: 1px solid var(--amb-border-strong);
 }
 
 .theme-abyssal-scarlet .anomalous-tag-base {
@@ -668,14 +668,14 @@
 }
 
 .anomalous-tag-clip {
-    background: rgba(139, 92, 246, 0.12);
-    color: #8b5cf6;
-    border: 1px solid rgba(139, 92, 246, 0.25);
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    color: var(--amb-link);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 25%, transparent);
 }
 
 .anomalous-tag-other {
     background: rgba(148, 163, 184, 0.12);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     border: 1px solid rgba(148, 163, 184, 0.25);
 }
 
@@ -711,9 +711,9 @@
     flex-direction: column;
     width: min(1600px, 96vw);
     height: min(940px, 94vh);
-    background: #0b0d14;
+    background: var(--amb-bg-page);
     border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     box-shadow: 0 32px 96px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(255, 255, 255, 0.05);
     overflow: hidden;
 }
@@ -726,8 +726,8 @@
     flex-shrink: 0;
     height: 54px;
     padding: 0 18px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    background: #0f121a;
+    border-bottom: 1px solid var(--amb-border);
+    background: var(--amb-bg-page);
     gap: 16px;
 }
 
@@ -746,9 +746,9 @@
     width: 32px;
     height: 32px;
     border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.04);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 20px;
     cursor: pointer;
     transition: all 0.15s;
@@ -757,8 +757,8 @@
 
 .anomalous-workbench-back-btn:hover {
     background: rgba(255, 255, 255, 0.1);
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.2);
+    color: var(--amb-text-main);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-workbench-title-box {
@@ -772,7 +772,7 @@
 .anomalous-workbench-title-filename {
     font-size: 0.92rem;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -789,16 +789,16 @@
     padding: 2px 7px;
     border-radius: 5px;
     background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     font-size: 0.68rem;
     font-weight: 500;
 }
 
 .anomalous-workbench-tag.is-ext {
     background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 255, 255, 0.16);
-    color: #cbd5e1;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-soft);
     font-weight: 700;
 }
 
@@ -817,7 +817,7 @@
     background: rgba(0, 0, 0, 0.35);
     padding: 3px 8px;
     border-radius: 999px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-workbench-nav-btn {
@@ -829,7 +829,7 @@
     border-radius: 50%;
     border: none;
     background: transparent;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 18px;
     cursor: pointer;
     transition: all 0.15s;
@@ -838,7 +838,7 @@
 
 .anomalous-workbench-nav-btn:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.12);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-workbench-nav-btn:disabled {
@@ -849,7 +849,7 @@
 .anomalous-workbench-counter {
     font-size: 0.8rem;
     font-weight: 600;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-variant-numeric: tabular-nums;
     padding: 0 4px;
 }
@@ -869,9 +869,9 @@
     width: 32px;
     height: 32px;
     border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.04);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 15px;
     cursor: pointer;
     transition: all 0.15s;
@@ -879,9 +879,9 @@
 
 .anomalous-workbench-tool-btn:hover,
 .anomalous-workbench-tool-btn.is-active {
-    background: rgba(139, 92, 246, 0.15);
-    border-color: rgba(139, 92, 246, 0.35);
-    color: #8b5cf6;
+    background: color-mix(in srgb, var(--amb-link) 15%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
+    color: var(--amb-link);
 }
 
 .anomalous-workbench-close-btn {
@@ -891,7 +891,7 @@
     width: 32px;
     height: 32px;
     border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(239, 68, 68, 0.1);
     color: #fca5a5;
     font-size: 20px;
@@ -902,7 +902,7 @@
 
 .anomalous-workbench-close-btn:hover {
     background: rgba(239, 68, 68, 0.25);
-    color: #fff;
+    color: var(--amb-text-main);
     border-color: rgba(239, 68, 68, 0.4);
     transform: scale(1.05);
 }
@@ -962,8 +962,8 @@
     border-radius: 12px;
     background: rgba(15, 18, 26, 0.55);
     backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #e2e8f0;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-main);
     font-size: 32px;
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -976,11 +976,11 @@
 
 .anomalous-workbench-float-nav:hover {
     opacity: 1;
-    background: rgba(139, 92, 246, 0.2);
-    border-color: rgba(139, 92, 246, 0.45);
-    color: #fff;
+    background: color-mix(in srgb, var(--amb-link) 20%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    color: var(--amb-text-main);
     transform: translateY(-50%) scale(1.08);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(139, 92, 246, 0.25);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px color-mix(in srgb, var(--amb-link) 25%, transparent);
 }
 
 /* Floating Zoom Bar */
@@ -996,7 +996,7 @@
     border-radius: 9px;
     background: rgba(14, 17, 24, 0.85);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
 }
 
@@ -1005,7 +1005,7 @@
     border-radius: 5px;
     border: 1px solid transparent;
     background: transparent;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 0.72rem;
     font-weight: 500;
     cursor: pointer;
@@ -1014,7 +1014,7 @@
 
 .anomalous-workbench-zoom-bar button:hover {
     background: rgba(255, 255, 255, 0.1);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 /* Left Filmstrip Rail */
@@ -1023,8 +1023,8 @@
     height: 100%;
     min-height: 0;
     padding: 12px 10px;
-    border-right: 1px solid rgba(255, 255, 255, 0.08);
-    background: #080a0f;
+    border-right: 1px solid var(--amb-border);
+    background: var(--amb-bg-page);
     overflow-x: hidden;
     overflow-y: auto;
     box-sizing: border-box;
@@ -1057,7 +1057,7 @@
 }
 
 .anomalous-workbench-filmstrip::-webkit-scrollbar-thumb:hover {
-    background: rgba(139, 92, 246, 0.45);
+    background: color-mix(in srgb, var(--amb-link) 45%, transparent);
 }
 
 .anomalous-workbench-filmstrip-track {
@@ -1075,8 +1075,8 @@
     height: 92px;
     border-radius: 10px;
     overflow: hidden;
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    background: #12151e;
+    border: 2px solid var(--amb-border);
+    background: var(--amb-bg-panel);
     cursor: pointer;
     box-sizing: border-box;
     transition: border-color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
@@ -1095,8 +1095,8 @@
 }
 
 .anomalous-workbench-filmstrip-thumb.is-active {
-    border-color: #8b5cf6;
-    box-shadow: 0 0 8px rgba(139, 92, 246, 0.35), inset 0 0 0 1px #8b5cf6;
+    border-color: var(--amb-link);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--amb-link) 35%, transparent), inset 0 0 0 1px var(--amb-link);
     transform: scale(1.04);
 }
 
@@ -1107,7 +1107,7 @@
     font-size: 10px;
     font-weight: 700;
     line-height: 1;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     background: rgba(10, 13, 20, 0.82);
     backdrop-filter: blur(4px);
     padding: 2px 5px;
@@ -1117,7 +1117,7 @@
 }
 
 .anomalous-workbench-filmstrip-thumb.is-active .anomalous-workbench-thumb-index {
-    color: #8b5cf6;
+    color: var(--amb-link);
     background: rgba(13, 23, 27, 0.92);
     font-weight: 800;
 }
@@ -1128,8 +1128,8 @@
     flex-direction: column;
     min-height: 0;
     height: 100%;
-    border-left: 1px solid rgba(255, 255, 255, 0.08);
-    background: #0e1118;
+    border-left: 1px solid var(--amb-border);
+    background: var(--amb-bg-page);
 }
 
 .anomalous-workbench-inspector-body {
@@ -1160,9 +1160,9 @@
     height: 36px;
     padding: 0 14px;
     border-radius: 3px 10px 3px 10px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     background: rgba(255, 255, 255, 0.05);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 0.8rem;
     font-weight: 600;
     cursor: pointer;
@@ -1188,8 +1188,8 @@
 
 .anomalous-workbench-action-btn:hover {
     background: rgba(255, 255, 255, 0.09);
-    color: #ffffff;
-    border-color: rgba(255, 255, 255, 0.22);
+    color: var(--amb-text-main);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-workbench-action-btn.is-primary {
@@ -1212,25 +1212,25 @@
 
 .anomalous-workbench-action-btn.is-save {
     background: rgba(255, 255, 255, 0.04);
-    border-color: rgba(255, 255, 255, 0.12);
+    border-color: var(--amb-border-strong);
     box-shadow: none;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     flex: 0 0 auto;
 }
 
 .anomalous-workbench-action-btn.is-save:hover {
     background: rgba(255, 255, 255, 0.09);
-    color: #ffffff;
-    border-color: rgba(165, 180, 252, 0.4);
+    color: var(--amb-text-main);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
     box-shadow: none;
     transform: translateY(-1px);
 }
 
 .anomalous-workbench-action-btn.is-save.is-active,
 .anomalous-workbench-action-btn.is-save[aria-expanded="true"] {
-    background: rgba(99, 102, 241, 0.2);
-    border-color: rgba(129, 140, 248, 0.5);
-    color: #c7d2fe;
+    background: color-mix(in srgb, var(--amb-link) 20%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
+    color: var(--amb-text-main);
     box-shadow: none;
 }
 
@@ -1244,7 +1244,7 @@
     background: rgba(0, 0, 0, 0.38);
     padding: 3px;
     border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     gap: 3px;
     flex-shrink: 0;
 }
@@ -1255,7 +1255,7 @@
     border-radius: 7px;
     border: none;
     background: transparent;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.74rem;
     font-weight: 600;
     cursor: pointer;
@@ -1265,13 +1265,13 @@
 }
 
 .anomalous-workbench-tab-btn:hover {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.04);
 }
 
 .anomalous-workbench-tab-btn.is-active {
     background: rgba(255, 255, 255, 0.09);
-    color: #8b5cf6;
+    color: var(--amb-link);
     box-shadow: none;
 }
 
@@ -1299,16 +1299,16 @@
     gap: 5px;
     padding: 8px 10px;
     border-radius: var(--amb-radius-control, 6px);
-    background: var(--amb-bg-card, #24262E);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08));
+    background: var(--amb-bg-card, var(--amb-bg-card-hover));
+    border: 1px solid var(--amb-border, var(--amb-border));
     transition: background-color 0.15s ease, border-color 0.15s ease;
     position: relative;
     user-select: text;
 }
 
 .anomalous-workbench-spec-card:hover {
-    background: var(--amb-bg-card-hover, #2d303a);
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.16));
+    background: var(--amb-bg-card-hover, var(--amb-bg-card-hover));
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
 }
 
 .anomalous-workbench-spec-card.is-wide {
@@ -1326,8 +1326,8 @@
 }
 
 .anomalous-workbench-spec-card.is-res {
-    border-color: rgba(56, 189, 248, 0.25);
-    background: rgba(56, 189, 248, 0.035);
+    border-color: color-mix(in srgb, var(--amb-link) 25%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 4%, transparent);
 }
 
 .theme-abyssal-scarlet .anomalous-workbench-spec-card.is-res {
@@ -1349,9 +1349,9 @@
 }
 
 .anomalous-workbench-spec-card.is-copied {
-    border-color: rgba(139, 92, 246, 0.6) !important;
-    background: rgba(139, 92, 246, 0.08) !important;
-    box-shadow: 0 0 14px rgba(139, 92, 246, 0.25) !important;
+    border-color: color-mix(in srgb, var(--amb-link) 60%, transparent) !important;
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent) !important;
+    box-shadow: 0 0 14px color-mix(in srgb, var(--amb-link) 25%, transparent) !important;
 }
 
 .anomalous-workbench-spec-header {
@@ -1376,7 +1376,7 @@
     gap: 4px;
     opacity: 0;
     transition: opacity 0.15s ease, transform 0.15s ease;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     pointer-events: none;
 }
 
@@ -1387,7 +1387,7 @@
 }
 
 .anomalous-workbench-spec-card.is-copyable:focus-visible {
-    outline: 2px solid rgba(139, 92, 246, 0.55);
+    outline: 2px solid color-mix(in srgb, var(--amb-link) 55%, transparent);
     outline-offset: 1px;
 }
 
@@ -1398,7 +1398,7 @@
 }
 
 .anomalous-workbench-spec-copy-icon.is-success {
-    stroke: #8b5cf6;
+    stroke: var(--amb-link);
 }
 
 .anomalous-workbench-spec-copy-icon.is-error {
@@ -1408,7 +1408,7 @@
 .anomalous-workbench-copy-badge {
     font-size: 10px;
     font-weight: 600;
-    color: #8b5cf6;
+    color: var(--amb-link);
     animation: anomalous-fade-in 0.15s ease forwards;
 }
 
@@ -1427,7 +1427,7 @@
 }
 
 .anomalous-workbench-spec-val {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 0.94rem;
     font-weight: 600;
     line-height: 1.25;
@@ -1448,16 +1448,16 @@
     gap: 12px;
     padding: 10px 14px;
     border-radius: 10px;
-    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(56, 189, 248, 0.04) 100%);
-    border: 1px solid rgba(139, 92, 246, 0.2);
+    background: linear-gradient(135deg, color-mix(in srgb, var(--amb-link) 6%, transparent) 0%, color-mix(in srgb, var(--amb-link) 4%, transparent) 100%);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 20%, transparent);
     margin-top: 4px;
     transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
 }
 
 .anomalous-workbench-generation-save:hover {
-    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(56, 189, 248, 0.08) 100%);
-    border-color: rgba(139, 92, 246, 0.35);
-    box-shadow: 0 3px 12px rgba(139, 92, 246, 0.08);
+    background: linear-gradient(135deg, color-mix(in srgb, var(--amb-link) 10%, transparent) 0%, color-mix(in srgb, var(--amb-link) 8%, transparent) 100%);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
+    box-shadow: 0 3px 12px color-mix(in srgb, var(--amb-link) 8%, transparent);
 }
 
 .anomalous-workbench-generation-info {
@@ -1474,13 +1474,13 @@
     gap: 6px;
     font-size: 0.78rem;
     font-weight: 700;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-workbench-generation-icon {
     width: 13px;
     height: 13px;
-    stroke: #8b5cf6;
+    stroke: var(--amb-link);
     flex-shrink: 0;
 }
 
@@ -1495,7 +1495,7 @@
     padding: 6px 13px;
     border-radius: 7px;
     background: var(--amb-btn-primary-bg);
-    border: 1px solid rgba(139, 92, 246, 0.45);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 45%, transparent);
     color: var(--amb-btn-primary-text);
     font-size: 0.74rem;
     font-weight: 600;
@@ -1537,13 +1537,13 @@
     padding: 12px 14px;
     border-radius: 11px;
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-left-width: 3.5px;
 }
 
 .anomalous-workbench-prompt-card.is-positive {
-    border-left-color: #8b5cf6;
-    background: linear-gradient(90deg, rgba(139, 92, 246, 0.04) 0%, rgba(255, 255, 255, 0.02) 40%);
+    border-left-color: var(--amb-link);
+    background: linear-gradient(90deg, color-mix(in srgb, var(--amb-link) 4%, transparent) 0%, rgba(255, 255, 255, 0.02) 40%);
 }
 
 .anomalous-workbench-prompt-card.is-negative {
@@ -1567,7 +1567,7 @@
 .anomalous-workbench-prompt-title {
     font-size: 0.78rem;
     font-weight: 700;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
 }
 
 .anomalous-workbench-prompt-count {
@@ -1586,9 +1586,9 @@
 .anomalous-workbench-mini-action-btn {
     padding: 3px 8px;
     border-radius: 5px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.04);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 0.7rem;
     font-weight: 500;
     cursor: pointer;
@@ -1597,14 +1597,14 @@
 
 .anomalous-workbench-mini-action-btn:hover {
     background: rgba(255, 255, 255, 0.12);
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.22);
+    color: var(--amb-text-main);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-workbench-mini-action-btn.is-copied {
-    background: rgba(139, 92, 246, 0.2);
-    color: #8b5cf6;
-    border-color: #8b5cf6;
+    background: color-mix(in srgb, var(--amb-link) 20%, transparent);
+    color: var(--amb-link);
+    border-color: var(--amb-link);
 }
 
 .anomalous-workbench-prompt-content {
@@ -1640,7 +1640,7 @@
 .anomalous-workbench-model-group-title {
     font-size: 0.72rem;
     font-weight: 700;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     margin-bottom: 2px;
 }
 
@@ -1651,13 +1651,13 @@
     padding: 8px 10px;
     border-radius: 9px;
     background: rgba(255, 255, 255, 0.025);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     transition: all 0.15s;
 }
 
 .anomalous-workbench-model-card:hover {
     background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.12);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-workbench-model-thumb {
@@ -1666,8 +1666,8 @@
     height: 46px;
     border-radius: 7px;
     overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: #090b10;
+    border: 1px solid var(--amb-border);
+    background: var(--amb-bg-page);
 }
 
 .anomalous-workbench-model-thumb img,
@@ -1688,7 +1688,7 @@
 .anomalous-workbench-model-name {
     font-size: 0.8rem;
     font-weight: 600;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1732,8 +1732,8 @@
 
 .anomalous-workbench-model-tag.is-base {
     background: rgba(255, 255, 255, 0.08);
-    color: #cbd5e1;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: var(--amb-text-soft);
+    border: 1px solid var(--amb-border-strong);
 }
 
 .theme-abyssal-scarlet .anomalous-workbench-model-tag.is-base {
@@ -1749,9 +1749,9 @@
 }
 
 .anomalous-workbench-model-tag.is-clip {
-    background: rgba(139, 92, 246, 0.12);
-    color: #8b5cf6;
-    border: 1px solid rgba(139, 92, 246, 0.25);
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    color: var(--amb-link);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 25%, transparent);
 }
 
 .anomalous-workbench-model-tag.is-vae {
@@ -1762,7 +1762,7 @@
 
 .anomalous-workbench-model-tag.is-other {
     background: rgba(148, 163, 184, 0.12);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     border: 1px solid rgba(148, 163, 184, 0.25);
 }
 
@@ -1790,9 +1790,9 @@
     flex-wrap: wrap;
     gap: 7px;
     padding: 8px 10px;
-    border: 1px solid rgba(139, 92, 246, 0.14);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 14%, transparent);
     border-radius: 8px;
-    background: rgba(139, 92, 246, 0.035);
+    background: color-mix(in srgb, var(--amb-link) 4%, transparent);
 }
 
 .anomalous-workbench-node-selection-count {
@@ -1809,8 +1809,8 @@
 .anomalous-workbench-inspector-footer {
     flex-shrink: 0;
     padding: 12px 18px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
-    background: #0c0e14;
+    border-top: 1px solid var(--amb-border);
+    background: var(--amb-bg-page);
 }
 
 .anomalous-workbench-save-row {
@@ -1842,14 +1842,14 @@
     border: 1px solid rgba(148, 163, 184, 0.24);
     border-radius: 999px;
     background: rgba(148, 163, 184, 0.08);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 0.65rem;
     white-space: nowrap;
 }
 
 .anomalous-material-scope-badge.is-workflow {
-    border-color: rgba(96, 165, 250, 0.24);
-    background: rgba(96, 165, 250, 0.08);
+    border-color: color-mix(in srgb, var(--amb-link) 24%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent);
     color: #9cc7ff;
 }
 
@@ -1862,7 +1862,7 @@
 .anomalous-material-scope-badge.is-nodes {
     border-color: rgba(148, 163, 184, 0.24);
     background: rgba(148, 163, 184, 0.08);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-material-card-title-row {
@@ -1877,7 +1877,7 @@
     margin: 0;
     font-size: 0.94rem;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1890,7 +1890,7 @@
     border: none;
     padding: 3px;
     cursor: pointer;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     border-radius: 4px;
     display: inline-flex;
     align-items: center;
@@ -1910,7 +1910,7 @@
 }
 
 .anomalous-material-card-edit-btn:hover {
-    color: #ffffff;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.1);
 }
 
@@ -1920,11 +1920,11 @@
     padding: 4px 8px;
     font-size: 0.88rem;
     background: rgba(10, 12, 18, 0.92);
-    border: 1px solid rgba(139, 92, 246, 0.55);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 55%, transparent);
     border-radius: 6px;
-    color: #ffffff;
+    color: var(--amb-text-main);
     outline: none;
-    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--amb-link) 20%, transparent);
 }
 
 .anomalous-material-card-subinfo {
@@ -1933,12 +1933,12 @@
     gap: 8px;
     flex-wrap: wrap;
     font-size: 0.68rem;
-    color: #64748b;
+    color: var(--amb-text-dim);
     margin-top: -2px;
 }
 
 .anomalous-material-card-date {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 0.68rem;
 }
 
@@ -1953,17 +1953,17 @@
     box-sizing: border-box;
     padding: 8px 12px;
     border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     background: rgba(0, 0, 0, 0.35);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 0.82rem;
     outline: none;
     transition: all 0.15s;
 }
 
 .anomalous-workbench-save-input-wrap input:focus {
-    border-color: #8b5cf6;
-    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
+    border-color: var(--amb-link);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--amb-link) 20%, transparent);
 }
 
 /* Loading & Error Box */
@@ -1974,7 +1974,7 @@
     justify-content: center;
     gap: 14px;
     padding: 40px 20px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.82rem;
     text-align: center;
 }
@@ -1983,8 +1983,8 @@
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    border: 3px solid rgba(139, 92, 246, 0.15);
-    border-top-color: #8b5cf6;
+    border: 3px solid color-mix(in srgb, var(--amb-link) 15%, transparent);
+    border-top-color: var(--amb-link);
     animation: anomalous-spin 0.8s linear infinite;
 }
 
@@ -2000,7 +2000,7 @@
 }
 
 .anomalous-workbench-muted {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 0.78rem;
     font-style: italic;
 }
@@ -2019,8 +2019,8 @@
 .anomalous-material-receipt button { cursor: pointer; color: inherit; background: transparent; border: 0; white-space: nowrap; }
 .anomalous-material-receipt button:first-of-type { text-decoration: underline; }
 .anomalous-notebook-fold, .anomalous-secondary-actions { padding: 8px; }
-.anomalous-notebook-fold > summary, .anomalous-secondary-actions > summary { cursor: pointer; color: var(--input-text, #ddd); padding: 4px; }
-.anomalous-notebook-fold > p { color: #aaa; font-size: 13px; }
+.anomalous-notebook-fold > summary, .anomalous-secondary-actions > summary { cursor: pointer; color: var(--input-text, var(--amb-text-soft)); padding: 4px; }
+.anomalous-notebook-fold > p { color: var(--amb-text-muted); font-size: 13px; }
 .anomalous-notebook-fold > button { margin: 6px 8px 0 0; }
 /* duplicate workbench-generation-save selector cleaned up */
 .anomalous-material-note-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.7; }
@@ -2057,10 +2057,10 @@
     box-sizing: border-box;
     max-width: 100%;
     padding: 8px 10px;
-    border: 1px solid var(--border-color, #454545);
+    border: 1px solid var(--border-color, var(--amb-border-strong));
     border-radius: 6px;
-    background: var(--comfy-input-bg, #222);
-    color: var(--input-text, #ddd);
+    background: var(--comfy-input-bg, var(--amb-bg-card));
+    color: var(--input-text, var(--amb-text-soft));
     font: inherit;
 }
 .anomalous-prompt-composer textarea { width: 100%; resize: vertical; min-height: 72px; }
@@ -2068,26 +2068,26 @@
 .anomalous-prompt-parts { display: flex; flex-direction: column; gap: 10px; }
 .anomalous-prompt-part {
     padding: 12px;
-    border: 1px solid var(--border-color, #454545);
+    border: 1px solid var(--border-color, var(--amb-border-strong));
     border-radius: 8px;
 }
 .anomalous-prompt-part > *:not(summary) { margin-top: 10px; }
 .anomalous-prompt-part summary { cursor: pointer; overflow-wrap: anywhere; }
 .anomalous-prompt-part summary input { margin-right: 8px; }
-.anomalous-prompt-part summary small { margin-left: 10px; color: var(--descrip-text, #aaa); }
-.anomalous-material-target-context { padding: 12px 16px; border-bottom: 1px solid var(--border-color, #454545); }
+.anomalous-prompt-part summary small { margin-left: 10px; color: var(--descrip-text, var(--amb-text-muted)); }
+.anomalous-material-target-context { padding: 12px 16px; border-bottom: 1px solid var(--border-color, var(--amb-border-strong)); }
 .anomalous-material-target-context > button { margin-left: 10px; }
-.anomalous-material-target-context > small { display: block; margin-top: 6px; color: var(--descrip-text, #aaa); }
+.anomalous-material-target-context > small { display: block; margin-top: 6px; color: var(--descrip-text, var(--amb-text-muted)); }
 .anomalous-material-application-result { margin-top: 10px; }
 .anomalous-material-choice {
     max-width: min(560px, calc(100vw - 32px));
     max-height: 80vh;
     overflow-y: auto;
-    border: 1px solid var(--border-color, #454545);
+    border: 1px solid var(--border-color, var(--amb-border-strong));
     border-radius: 10px;
     padding: 20px;
-    background: var(--comfy-menu-bg, #222);
-    color: var(--input-text, #ddd);
+    background: var(--comfy-menu-bg, var(--amb-bg-card));
+    color: var(--input-text, var(--amb-text-soft));
 }
 .anomalous-material-choice > button { display: block; margin: 10px 0; }
 .anomalous-material-choice::backdrop { background: rgba(0, 0, 0, .55); }
@@ -2104,8 +2104,8 @@
     padding: 10px 14px;
     border: 1px solid #68cdb9;
     border-radius: 8px;
-    background: #202428;
-    color: #eee;
+    background: var(--amb-bg-card-hover);
+    color: var(--amb-text-main);
 }
 
 /* ==========================================================================
@@ -2150,10 +2150,10 @@
     gap: 8px;
     padding: 6px 12px;
     border-radius: var(--amb-radius-control, 6px);
-    background: var(--amb-bg-panel, #18191e);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.15));
+    background: var(--amb-bg-panel, var(--amb-bg-panel));
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
-    color: var(--amb-text-main, #f1f5f9);
+    color: var(--amb-text-main, var(--amb-text-main));
     font-size: 0.8rem;
     font-weight: 500;
     line-height: 1.2;
@@ -2162,10 +2162,10 @@
 }
 
 .anomalous-material-drag-hint.is-target-valid {
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.3));
-    background: var(--amb-bg-card-hover, #282a34);
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
+    background: var(--amb-bg-card-hover, var(--amb-bg-card-hover));
     box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-material-drag-hint.is-target-refused {
diff --git a/web/styles/07-prompt-studio.css b/web/styles/07-prompt-studio.css
index a489ed0..8f489a4 100644
--- a/web/styles/07-prompt-studio.css
+++ b/web/styles/07-prompt-studio.css
@@ -6,7 +6,7 @@
     padding: 8px 12px 10px;
     overflow-y: auto;
     max-height: 100%;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
 }
 
 .anomalous-prompt-topbar {
@@ -19,7 +19,7 @@
     gap: 8px;
     height: 44px;
     padding: 0 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--amb-border);
     background: rgba(20, 22, 27, 0.98);
     box-sizing: border-box;
     flex-shrink: 0;
@@ -37,8 +37,8 @@
     right: 0 !important;
     z-index: 1000005 !important;
     min-width: 165px !important;
-    background: #181a20 !important;
-    border: 1px solid rgba(255, 255, 255, 0.18) !important;
+    background: var(--amb-bg-panel) !important;
+    border: 1px solid var(--amb-border-strong) !important;
     border-radius: 8px !important;
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
     padding: 6px !important;
@@ -66,7 +66,7 @@
     border-radius: 6px !important;
     border: none !important;
     background: transparent !important;
-    color: #cbd5e1 !important;
+    color: var(--amb-text-soft) !important;
     font-size: 0.78rem !important;
     font-weight: 500 !important;
     cursor: pointer !important;
@@ -77,7 +77,7 @@
 
 .anomalous-prompt-more-item:hover {
     background: rgba(255, 255, 255, 0.08) !important;
-    color: #ffffff !important;
+    color: var(--amb-text-main) !important;
 }
 
 .anomalous-prompt-more-pos {
@@ -87,16 +87,16 @@
     gap: 8px !important;
     padding: 8px 10px 4px !important;
     margin-top: 4px !important;
-    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-top: 1px solid var(--amb-border) !important;
     font-size: 0.76rem !important;
-    color: #94a3b8 !important;
+    color: var(--amb-text-muted) !important;
 }
 
 .anomalous-prompt-more-pos select {
     background: rgba(0, 0, 0, 0.4) !important;
-    border: 1px solid rgba(255, 255, 255, 0.14) !important;
+    border: 1px solid var(--amb-border-strong) !important;
     border-radius: 5px !important;
-    color: #f1f5f9 !important;
+    color: var(--amb-text-main) !important;
     padding: 3px 6px !important;
     font-size: 0.74rem !important;
     cursor: pointer !important;
@@ -115,7 +115,7 @@
     margin: 0;
     font-size: 0.92rem;
     font-weight: 700;
-    color: #f8fafc;
+    color: var(--amb-text-main);
     letter-spacing: 0.02em;
     white-space: nowrap;
     flex-shrink: 0;
@@ -133,7 +133,7 @@
     font-size: 1.1rem;
     line-height: 1;
     padding: 3px 8px;
-    color: var(--amb-text-muted, #94a3b8);
+    color: var(--amb-text-muted, var(--amb-text-muted));
     transition: all 0.2s ease;
 }
 
@@ -144,11 +144,11 @@
 
 .anomalous-prompt-name-input {
     background: var(--amb-bg-input, rgba(0, 0, 0, 0.35));
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.14));
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
     border-radius: var(--amb-radius-control, 6px);
     padding: 2px 8px;
     height: 26px;
-    color: var(--amb-text-main, #f1f5f9);
+    color: var(--amb-text-main, var(--amb-text-main));
     font-size: 0.78rem;
     outline: none;
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
@@ -159,7 +159,7 @@
 }
 
 .anomalous-prompt-name-input:focus {
-    border-color: #38bdf8;
+    border-color: var(--amb-link);
     background: rgba(0, 0, 0, 0.55);
 }
 
@@ -173,15 +173,15 @@
     align-items: center;
     gap: 4px;
     font-size: 0.76rem;
-    color: var(--amb-text-muted, #94a3b8);
+    color: var(--amb-text-muted, var(--amb-text-muted));
 }
 
 .anomalous-prompt-insert-pos select {
-    background: var(--amb-bg-input, #181a22);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
+    background: var(--amb-bg-input, var(--amb-bg-panel));
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
     border-radius: var(--amb-radius-control, 6px);
     padding: 4px 8px;
-    color: var(--amb-text-main, #f1f5f9);
+    color: var(--amb-text-main, var(--amb-text-main));
     font-size: 0.78rem;
     outline: none;
     cursor: pointer;
@@ -200,7 +200,7 @@
     flex-direction: column;
     border-radius: 12px;
     background: linear-gradient(175deg, #1c2028 0%, #15181f 100%);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 10px -2px rgba(0, 0, 0, 0.25);
     overflow: hidden;
     transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s ease;
@@ -210,7 +210,7 @@
 .anomalous-paper-note:hover {
     transform: translateY(-2px);
     box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.55), 0 6px 14px -2px rgba(0, 0, 0, 0.35);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: var(--amb-border-strong);
 }
 
 /* Note Top Accent Border */
@@ -221,7 +221,7 @@
 }
 
 .anomalous-paper-note.is-positive .anomalous-paper-note-tape {
-    background: #38bdf8;
+    background: var(--amb-btn-primary-bg);
 }
 
 .anomalous-paper-note.is-negative .anomalous-paper-note-tape {
@@ -262,7 +262,7 @@
 
 .anomalous-paper-note-count {
     font-size: 0.72rem;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-family: monospace;
     padding: 2px 6px;
     background: rgba(0, 0, 0, 0.25);
@@ -272,9 +272,9 @@
 .anomalous-paper-note-btn {
     padding: 3px 8px;
     border-radius: 5px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     background: rgba(255, 255, 255, 0.05);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 0.74rem;
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
@@ -282,8 +282,8 @@
 
 .anomalous-paper-note-btn:hover {
     background: rgba(255, 255, 255, 0.12);
-    color: #f8fafc;
-    border-color: rgba(255, 255, 255, 0.25);
+    color: var(--amb-text-main);
+    border-color: var(--amb-border-strong);
 }
 
 /* Note Textarea */
@@ -301,7 +301,7 @@
     border: none;
     outline: none;
     background: rgba(0, 0, 0, 0.2);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 0.85rem;
     line-height: 1.5;
     padding: 10px;
@@ -322,15 +322,15 @@
     justify-content: space-between;
     padding: 6px 14px 10px;
     font-size: 0.73rem;
-    color: #64748b;
-    border-top: 1px dashed rgba(255, 255, 255, 0.06);
+    color: var(--amb-text-dim);
+    border-top: 1px dashed var(--amb-border);
 }
 
 .anomalous-paper-note-drag-prompt {
     display: inline-flex;
     align-items: center;
     gap: 5px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 /* 6. Active Target Status & Injection Bar (Unified Action Dock Element) */
@@ -347,9 +347,9 @@
 .anomalous-target-node-badge {
     font-size: 0.72rem;
     font-weight: 500;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     padding: 2px 6px;
     border-radius: 4px;
     white-space: nowrap;
@@ -366,11 +366,11 @@
 }
 
 .anomalous-prompt-target-actions select {
-    background: var(--amb-bg-input, #181a22);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.14));
+    background: var(--amb-bg-input, var(--amb-bg-panel));
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
     border-radius: var(--amb-radius-control, 4px);
     padding: 2px 6px;
-    color: var(--amb-text-main, #f1f5f9);
+    color: var(--amb-text-main, var(--amb-text-main));
     font-size: 0.72rem;
     outline: none;
     cursor: pointer;
@@ -386,7 +386,7 @@
     max-width: 90vw;
     height: 100vh;
     background: rgba(20, 10, 16, 0.96);
-    border-left: 1px solid rgba(255, 255, 255, 0.12);
+    border-left: 1px solid var(--amb-border-strong);
     box-shadow: -10px 0 40px rgba(0, 0, 0, 0.75);
     z-index: 10005;
     display: flex;
@@ -405,19 +405,19 @@
     align-items: center;
     justify-content: space-between;
     padding: 14px 18px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-drawer-header h4 {
     margin: 0;
     font-size: 0.98rem;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-drawer-search {
     padding: 10px 18px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-drawer-search input {
@@ -426,14 +426,14 @@
     padding: 7px 12px;
     border-radius: 6px;
     background: rgba(22, 10, 18, 0.65);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    color: #f1f5f9;
+    border: 1px solid var(--amb-border-strong);
+    color: var(--amb-text-main);
     font-size: 0.82rem;
     outline: none;
 }
 
 .anomalous-drawer-search input:focus {
-    border-color: #8b5cf6;
+    border-color: var(--amb-link);
 }
 
 .anomalous-drawer-list {
@@ -449,7 +449,7 @@
     padding: 12px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.035);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -458,18 +458,18 @@
 
 .anomalous-drawer-item:hover {
     background: rgba(255, 255, 255, 0.06);
-    border-color: rgba(139, 92, 246, 0.3);
+    border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
 }
 
 .anomalous-drawer-item-title {
     font-size: 0.84rem;
     font-weight: 600;
-    color: #f8fafc;
+    color: var(--amb-text-main);
 }
 
 .anomalous-drawer-item-preview {
     font-size: 0.76rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 3;
@@ -491,9 +491,9 @@
 .anomalous-drawer-item-btn {
     padding: 4px 9px;
     border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     background: rgba(255, 255, 255, 0.05);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 0.72rem;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -501,8 +501,8 @@
 
 .anomalous-drawer-item-btn:hover {
     background: var(--amb-bg-card-hover, rgba(255, 255, 255, 0.12));
-    color: #ffffff;
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.25));
+    color: var(--amb-text-main);
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
     font-weight: 500;
 }
 
@@ -519,7 +519,7 @@
     gap: 8px;
     padding: 8px 12px;
     background: rgba(22, 10, 18, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 10px;
     flex-wrap: wrap;
     backdrop-filter: blur(8px);
@@ -532,7 +532,7 @@
     background: rgba(0, 0, 0, 0.25);
     padding: 3px;
     border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-mixer-tab-btn {
@@ -540,7 +540,7 @@
     border-radius: 6px;
     border: none;
     background: transparent;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.78rem;
     font-weight: 500;
     cursor: pointer;
@@ -549,16 +549,16 @@
 }
 
 .anomalous-mixer-tab-btn:hover {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.06);
 }
 
 .anomalous-mixer-tab-btn.is-active {
     background: rgba(255, 255, 255, 0.12);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-weight: 600;
     box-shadow: none;
-    border: 1px solid rgba(255, 255, 255, 0.18);
+    border: 1px solid var(--amb-border-strong);
 }
 
 .theme-abyssal-scarlet .anomalous-mixer-tab-btn.is-active {
@@ -583,9 +583,9 @@
 .anomalous-mixer-smart-sort-btn {
     padding: 4px 10px;
     border-radius: var(--amb-radius-control, 6px);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
-    background: var(--amb-bg-card, #24262E);
-    color: var(--amb-text-main, #e2e8f0);
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
+    background: var(--amb-bg-card, var(--amb-bg-card-hover));
+    color: var(--amb-text-main, var(--amb-text-main));
     font-size: 0.76rem;
     font-weight: 500;
     cursor: pointer;
@@ -597,9 +597,9 @@
 }
 
 .anomalous-mixer-smart-sort-btn:hover {
-    background: var(--amb-bg-card-hover, #2c2f38);
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.2));
-    color: #ffffff;
+    background: var(--amb-bg-card-hover, var(--amb-bg-card-hover));
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
+    color: var(--amb-text-main);
 }
 
 .anomalous-mixer-smart-sort-btn.is-animating {
@@ -627,29 +627,29 @@
     padding: 32px 16px;
     text-align: center;
     background: rgba(0, 0, 0, 0.15);
-    border: 1px dashed var(--amb-border, rgba(255, 255, 255, 0.1));
+    border: 1px dashed var(--amb-border, var(--amb-border));
     border-radius: var(--amb-radius-control, 6px);
-    color: var(--amb-text-muted, #94a3b8);
+    color: var(--amb-text-muted, var(--amb-text-muted));
 }
 
 /* 3. Individual Lego Prompt Block (Compact Card for Easy Stacking) */
 .anomalous-mixer-block {
     position: relative;
     border-radius: var(--amb-radius-control, 6px);
-    background: var(--amb-bg-card, #24262E);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.09));
+    background: var(--amb-bg-card, var(--amb-bg-card-hover));
+    border: 1px solid var(--amb-border, var(--amb-border));
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
     flex-shrink: 0;
 }
 
 .anomalous-mixer-block:hover {
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.18));
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 .anomalous-mixer-block.is-role-positive {
-    border-left: 3px solid #38bdf8;
+    border-left: 3px solid var(--amb-link);
 }
 
 .theme-abyssal-scarlet .anomalous-mixer-block.is-role-positive {
@@ -664,12 +664,12 @@
 .anomalous-mixer-block.is-bypassed {
     opacity: 0.7;
     background: rgba(18, 19, 24, 0.6);
-    border-color: rgba(255, 255, 255, 0.05);
+    border-color: var(--amb-border);
     border-left-color: #64748b !important;
 }
 
 .anomalous-mixer-block.is-bypassed .anomalous-mixer-block-textarea {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 /* Dragging & Reorder Indicators */
@@ -686,7 +686,7 @@
     right: 0;
     height: 3px;
     border-radius: 2px;
-    background: #38bdf8;
+    background: var(--amb-btn-primary-bg);
     z-index: 10;
 }
 
@@ -702,7 +702,7 @@
     right: 0;
     height: 3px;
     border-radius: 2px;
-    background: #38bdf8;
+    background: var(--amb-btn-primary-bg);
     z-index: 10;
 }
 
@@ -716,7 +716,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 5px 8px 4px 6px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--amb-border);
     gap: 6px;
 }
 
@@ -732,13 +732,13 @@
     cursor: grab;
     user-select: none;
     font-size: 0.95rem;
-    color: #64748b;
+    color: var(--amb-text-dim);
     padding: 2px 4px;
     transition: color 0.15s ease;
 }
 
 .anomalous-mixer-drag-handle:hover {
-    color: #38bdf8;
+    color: var(--amb-link);
 }
 
 .theme-abyssal-scarlet .anomalous-mixer-drag-handle:hover {
@@ -758,7 +758,7 @@
 
 .anomalous-mixer-block-toggle input[type="checkbox"] {
     cursor: pointer;
-    accent-color: #8b5cf6;
+    accent-color: var(--amb-link);
     width: 14px;
     height: 14px;
     margin: 0;
@@ -789,7 +789,7 @@
     background: transparent;
     border: 1px solid transparent;
     border-radius: 4px;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 0.8rem;
     font-weight: 500;
     padding: 2px 6px;
@@ -799,7 +799,7 @@
 
 .anomalous-mixer-block-title-input:hover,
 .anomalous-mixer-block-title-input:focus {
-    border-color: rgba(255, 255, 255, 0.15);
+    border-color: var(--amb-border-strong);
     background: rgba(0, 0, 0, 0.25);
 }
 
@@ -813,9 +813,9 @@
 .anomalous-mixer-block-btn {
     padding: 2px 6px;
     border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.04);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.7rem;
     cursor: pointer;
     line-height: 1.2;
@@ -824,8 +824,8 @@
 
 .anomalous-mixer-block-btn:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.12);
-    color: #ffffff;
-    border-color: rgba(255, 255, 255, 0.2);
+    color: var(--amb-text-main);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-mixer-block-btn:disabled {
@@ -852,7 +852,7 @@
     border: none;
     outline: none;
     background: rgba(0, 0, 0, 0.22);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 0.76rem;
     line-height: 1.35;
     padding: 4px 6px;
@@ -864,7 +864,7 @@
 
 .anomalous-mixer-block-textarea:focus {
     background: rgba(0, 0, 0, 0.38);
-    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amb-link) 30%, transparent);
     min-height: 52px;
     height: 52px;
 }
@@ -879,10 +879,10 @@
     bottom: 0;
     z-index: 10;
     border-radius: var(--amb-radius-control, 6px);
-    background: var(--amb-bg-card, #20222a);
+    background: var(--amb-bg-card, var(--amb-bg-card-hover));
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
     box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
     padding: 6px 10px;
     display: flex;
@@ -903,8 +903,8 @@
 }
 
 .anomalous-mixer-deck-output:hover {
-    border-color: #38bdf8;
-    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
+    border-color: var(--amb-link);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--amb-link) 20%, transparent);
 }
 
 .theme-abyssal-scarlet .anomalous-mixer-deck-output {
@@ -949,13 +949,13 @@
 
 .anomalous-mixer-output-title {
     font-size: 0.78rem;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     white-space: nowrap;
 }
 
 .anomalous-mixer-output-stats {
     font-size: 0.7rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-family: monospace;
     white-space: nowrap;
 }
@@ -964,7 +964,7 @@
     display: flex;
     flex-direction: column;
     gap: 6px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--amb-border);
     padding-top: 6px;
     margin-top: 2px;
 }
@@ -976,9 +976,9 @@
 .anomalous-mixer-output-textarea {
     width: 100%;
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
-    color: #93c5fd;
+    color: var(--amb-link);
     font-size: 0.78rem;
     font-family: inherit;
     line-height: 1.4;
@@ -998,14 +998,14 @@
 }
 
 .anomalous-mixer-drag-hint {
-    color: #64748b;
+    color: var(--amb-text-dim);
     display: flex;
     align-items: center;
     gap: 4px;
 }
 
 .anomalous-mixer-drag-hint strong {
-    color: #38bdf8;
+    color: var(--amb-link);
 }
 
 .theme-abyssal-scarlet .anomalous-mixer-drag-hint strong {
@@ -1014,15 +1014,15 @@
 
 .anomalous-mixer-final-btn.is-active {
     background: var(--amb-bg-card-hover, rgba(255, 255, 255, 0.15)) !important;
-    border-color: #38bdf8 !important;
-    color: #38bdf8 !important;
+    border-color: var(--amb-link) !important;
+    color: var(--amb-link) !important;
 }
 
 .anomalous-btn-toggle-output {
     font-size: 0.72rem !important;
     padding: 2px 7px !important;
-    color: #38bdf8 !important;
-    border-color: rgba(56, 189, 248, 0.25) !important;
+    color: var(--amb-link) !important;
+    border-color: color-mix(in srgb, var(--amb-link) 25%, transparent) !important;
 }
 
 .anomalous-btn-quick-copy {
@@ -1037,9 +1037,9 @@
     right: 24px;
     padding: 8px 14px;
     border-radius: var(--amb-radius-control, 6px);
-    background: var(--amb-bg-panel, #18191e);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.15));
-    color: #f1f5f9;
+    background: var(--amb-bg-panel, var(--amb-bg-panel));
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
+    color: var(--amb-text-main);
     font-size: 0.82rem;
     font-weight: 500;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
@@ -1092,7 +1092,7 @@
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    background: var(--amb-bg-page, #141519);
+    background: var(--amb-bg-page, var(--amb-bg-panel));
     container-type: inline-size;
     container-name: prompt-workbench;
     overflow: hidden;
@@ -1172,8 +1172,8 @@
     min-height: 0;
     height: 100%;
     border-radius: var(--amb-radius-panel, 12px);
-    background: var(--amb-bg-panel, #1C1E24);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08));
+    background: var(--amb-bg-panel, var(--amb-bg-card));
+    border: 1px solid var(--amb-border, var(--amb-border));
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     padding: 10px 10px 8px;
     box-sizing: border-box;
@@ -1191,13 +1191,13 @@
     justify-content: space-between;
     gap: 6px;
     padding-bottom: 6px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--amb-border);
     flex-shrink: 0;
 }
 
 .anomalous-workbench-col-title {
     font-size: 0.94rem;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     display: flex;
     align-items: center;
     gap: 6px;
@@ -1207,7 +1207,7 @@
 
 .anomalous-sub-counter {
     font-size: 0.76rem;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-weight: normal;
 }
 
@@ -1227,15 +1227,15 @@
     padding: 6px 10px;
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #f1f5f9;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-main);
     font-size: 0.78rem;
     outline: none;
     transition: border-color 0.15s ease;
 }
 
 .anomalous-workbench-search-input:focus {
-    border-color: #38bdf8;
+    border-color: var(--amb-link);
     background: rgba(0, 0, 0, 0.45);
 }
 
@@ -1254,9 +1254,9 @@
 .anomalous-workbench-pill {
     padding: 3px 8px;
     border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.04);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.72rem;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -1264,7 +1264,7 @@
 }
 
 .anomalous-workbench-pill:hover {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.09);
 }
 
@@ -1284,8 +1284,8 @@
     gap: 8px;
     padding: 10px 12px;
     border-radius: var(--amb-radius-control, 6px);
-    background: var(--amb-bg-card, #20222a);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
+    background: var(--amb-bg-card, var(--amb-bg-card-hover));
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
     animation: fadeInSlideDown 0.18s ease;
     flex-shrink: 0;
@@ -1299,7 +1299,7 @@
 .anomalous-form-title {
     font-size: 0.82rem;
     font-weight: 600;
-    color: var(--amb-text-main, #f1f5f9);
+    color: var(--amb-text-main, var(--amb-text-main));
 }
 
 .anomalous-form-input,
@@ -1310,8 +1310,8 @@
     padding: 6px 8px;
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.35);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    color: #f1f5f9;
+    border: 1px solid var(--amb-border-strong);
+    color: var(--amb-text-main);
     font-size: 0.78rem;
     outline: none;
     font-family: inherit;
@@ -1322,7 +1322,7 @@
     align-items: center;
     gap: 6px;
     font-size: 0.78rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-form-btn-row {
@@ -1350,11 +1350,11 @@
     position: relative;
     padding: 36px 16px;
     text-align: center;
-    color: var(--amb-text-muted, #94a3b8);
+    color: var(--amb-text-muted, var(--amb-text-muted));
     font-size: 0.82rem;
     background: rgba(0, 0, 0, 0.18);
     border-radius: var(--amb-radius-control, 6px);
-    border: 1px dashed var(--amb-border, rgba(255, 255, 255, 0.1));
+    border: 1px dashed var(--amb-border, var(--amb-border));
     overflow: hidden;
     isolation: isolate;
 }
@@ -1380,11 +1380,11 @@
     gap: 6px;
     padding: 6px 10px;
     margin: 2px 0 8px;
-    background: rgba(56, 189, 248, 0.07);
-    border: 1px solid rgba(56, 189, 248, 0.2);
+    background: color-mix(in srgb, var(--amb-link) 7%, transparent);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 20%, transparent);
     border-radius: var(--amb-radius-control, 6px);
     font-size: 0.72rem;
-    color: #93c5fd;
+    color: var(--amb-link);
     line-height: 1.35;
     user-select: none;
 }
@@ -1393,14 +1393,14 @@
     width: 14px;
     height: 14px;
     flex-shrink: 0;
-    color: #38bdf8;
+    color: var(--amb-link);
 }
 
 /* Individual Source Prompt Card (Tactile Skewed Glassmorphic Card Aesthetics) */
 .anomalous-source-prompt-card {
     border-radius: 8px;
     background: linear-gradient(180deg, #262935 0%, #1e2029 100%);
-    border: 1px solid rgba(255, 255, 255, 0.11);
+    border: 1px solid var(--amb-border-strong);
     border-left: 4px solid #64748b;
     padding: 8px 10px;
     display: flex;
@@ -1413,8 +1413,8 @@
 }
 
 .anomalous-source-prompt-card.is-cat-base {
-    border-left-color: #38bdf8;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    border-left-color: var(--amb-link);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px color-mix(in srgb, var(--amb-link) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 .theme-abyssal-scarlet .anomalous-source-prompt-card.is-cat-base {
@@ -1439,7 +1439,7 @@
 
 .anomalous-source-prompt-card:hover {
     background: linear-gradient(180deg, #2e3242 0%, #232633 100%);
-    border-color: rgba(255, 255, 255, 0.22);
+    border-color: var(--amb-border-strong);
     transform: translateY(-2px);
     box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
 }
@@ -1451,8 +1451,8 @@
 
 .anomalous-source-prompt-card.is-clicked {
     transform: scale(0.97);
-    border-color: #38bdf8 !important;
-    box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
+    border-color: var(--amb-link) !important;
+    box-shadow: 0 0 16px color-mix(in srgb, var(--amb-link) 45%, transparent) !important;
 }
 
 .anomalous-source-prompt-card.is-dragging-source {
@@ -1467,7 +1467,7 @@
 }
 
 .anomalous-source-card-grip {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11px;
     line-height: 1;
     margin-right: 1px;
@@ -1479,7 +1479,7 @@
 
 .anomalous-source-prompt-card:hover .anomalous-source-card-grip {
     opacity: 0.95;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-source-card-badge {
@@ -1494,7 +1494,7 @@
 .anomalous-source-card-title {
     font-size: 0.82rem;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1504,14 +1504,14 @@
 .anomalous-source-card-snippet {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     font-size: 0.72rem;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     line-height: 1.45;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     background: rgba(0, 0, 0, 0.32);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     padding: 5px 8px;
     border-radius: 5px;
 }
@@ -1526,7 +1526,7 @@
 }
 
 .anomalous-source-card-drag-hint {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 0.66rem;
     display: inline-flex;
     align-items: center;
@@ -1542,9 +1542,9 @@
 .anomalous-source-action-btn {
     padding: 2px 6px;
     border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.04);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 0.68rem;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -1552,13 +1552,13 @@
 
 .anomalous-source-action-btn:hover {
     background: rgba(255, 255, 255, 0.12);
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-source-action-btn.is-dock {
-    background: rgba(56, 189, 248, 0.12);
-    border-color: rgba(56, 189, 248, 0.35);
-    color: #38bdf8;
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
+    color: var(--amb-link);
     font-weight: 600;
     border-radius: 5px;
     padding: 3px 8px;
@@ -1570,29 +1570,29 @@
 }
 
 .anomalous-source-action-btn.is-dock:hover {
-    background: #38bdf8;
+    background: var(--amb-btn-primary-hover);
     color: #0b1329;
-    border-color: #38bdf8;
-    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
+    border-color: var(--amb-link);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--amb-link) 45%, transparent);
 }
 
 .anomalous-source-action-btn.is-dock.is-success {
     background: #22c55e !important;
     border-color: #22c55e !important;
-    color: #ffffff !important;
+    color: var(--amb-text-main) !important;
     box-shadow: 0 0 12px rgba(34, 197, 94, 0.5) !important;
 }
 
 .anomalous-source-action-btn.is-save-lib {
     background: rgba(255, 255, 255, 0.04);
-    border-color: rgba(255, 255, 255, 0.1);
-    color: var(--amb-text-muted, #94a3b8);
+    border-color: var(--amb-border);
+    color: var(--amb-text-muted, var(--amb-text-muted));
     font-weight: 500;
 }
 
 .anomalous-source-action-btn.is-save-lib:hover {
     background: rgba(255, 255, 255, 0.1);
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 .theme-abyssal-scarlet .anomalous-source-action-btn.is-save-lib {
@@ -1625,14 +1625,14 @@
     align-items: center;
     gap: 4px;
     font-size: 0.76rem;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     cursor: pointer;
     user-select: none;
 }
 
 .anomalous-role-label input[type="radio"] {
     cursor: pointer;
-    accent-color: #38bdf8;
+    accent-color: var(--amb-link);
     margin: 0;
 }
 
@@ -1671,7 +1671,7 @@
 
 .anomalous-prompt-workbench:has(.is-dragging-source) .anomalous-assembly-track,
 .is-source-dragging .anomalous-assembly-track {
-    border: 2px dashed var(--amb-border-hover, rgba(255, 255, 255, 0.25)) !important;
+    border: 2px dashed var(--amb-border-hover, var(--amb-border-strong)) !important;
     background: rgba(255, 255, 255, 0.02) !important;
 }
 
@@ -1686,7 +1686,7 @@
     text-align: center;
     padding: 24px 16px;
     border-radius: var(--amb-radius-control, 6px);
-    border: 1.5px dashed var(--amb-border, rgba(255, 255, 255, 0.12));
+    border: 1.5px dashed var(--amb-border, var(--amb-border-strong));
     background: rgba(0, 0, 0, 0.15);
     transition: border-color 0.15s ease, background-color 0.15s ease;
 }
@@ -1708,29 +1708,29 @@
     justify-content: center;
     min-height: 44px;
     padding: 8px 14px;
-    border: 1.5px dashed rgba(255, 255, 255, 0.14);
+    border: 1.5px dashed var(--amb-border-strong);
     border-radius: 8px;
     background: rgba(0, 0, 0, 0.15);
     cursor: pointer;
     user-select: none;
     transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
     margin-top: 6px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.74rem;
 }
 
 .anomalous-assembly-snap-dock:hover {
-    border-color: rgba(255, 255, 255, 0.28);
+    border-color: var(--amb-border-strong);
     background: rgba(255, 255, 255, 0.04);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
 }
 
 .anomalous-assembly-snap-dock.is-drag-over,
 .anomalous-assembly-track.is-drag-over-end .anomalous-assembly-snap-dock {
-    border-color: #38bdf8 !important;
-    background: rgba(56, 189, 248, 0.12) !important;
-    box-shadow: 0 0 18px rgba(56, 189, 248, 0.25), inset 0 0 10px rgba(56, 189, 248, 0.05) !important;
-    color: #38bdf8 !important;
+    border-color: var(--amb-link) !important;
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent) !important;
+    box-shadow: 0 0 18px color-mix(in srgb, var(--amb-link) 25%, transparent), inset 0 0 10px color-mix(in srgb, var(--amb-link) 5%, transparent) !important;
+    color: var(--amb-link) !important;
     transform: scale(1.01);
 }
 
@@ -1793,9 +1793,9 @@
 .anomalous-btn-extract-node {
     position: relative;
     background-color: rgba(255, 255, 255, 0.04) !important;
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)) !important;
+    border: 1px solid var(--amb-border, var(--amb-border-strong)) !important;
     border-radius: var(--amb-radius-control, 6px) !important;
-    color: var(--amb-text-main, #f1f5f9) !important;
+    color: var(--amb-text-main, var(--amb-text-main)) !important;
     font-weight: 500 !important;
     height: 28px !important;
     padding: 0 10px !important;
@@ -1811,8 +1811,8 @@
 
 .anomalous-btn-extract-node:hover {
     background-color: var(--amb-bg-card-hover, rgba(255, 255, 255, 0.1)) !important;
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.25)) !important;
-    color: #ffffff !important;
+    border-color: var(--amb-border-hover, var(--amb-border-strong)) !important;
+    color: var(--amb-text-main) !important;
 }
 
 /* ==========================================================================
@@ -1834,8 +1834,8 @@
     background: rgba(18, 22, 34, 0.94);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.18);
-    color: #ffffff;
+    border: 1px solid var(--amb-border-strong);
+    color: var(--amb-text-main);
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.5px;
diff --git a/web/styles/08-theme-gallery-overrides.css b/web/styles/08-theme-gallery-overrides.css
index ec7f5c8..0fa8d08 100644
--- a/web/styles/08-theme-gallery-overrides.css
+++ b/web/styles/08-theme-gallery-overrides.css
@@ -480,13 +480,13 @@ button:hover .anomalous-btn-icon {
     transform: translateX(-50%) translateY(4px);
     padding: 6px 12px;
     background: rgba(18, 20, 26, 0.98);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 12px;
     font-weight: 500;
     line-height: 1.35;
     white-space: nowrap;
     border-radius: var(--amb-radius-control, 6px);
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
     opacity: 0;
     pointer-events: none;
@@ -691,7 +691,7 @@ button:hover .anomalous-btn-icon {
     align-items: center !important;
     justify-content: space-between !important;
     padding: 0 16px !important;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-bottom: 1px solid var(--amb-border) !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
     cursor: move;
     position: relative;
@@ -735,7 +735,7 @@ button:hover .anomalous-btn-icon {
     box-sizing: border-box !important;
     background: rgba(255, 255, 255, 0.04) !important;
     color: #c0c4cc !important;
-    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border: 1px solid var(--amb-border) !important;
     border-radius: 6px !important;
     cursor: pointer;
     white-space: nowrap;
@@ -752,16 +752,16 @@ button:hover .anomalous-btn-icon {
 
 #anomalous-header button:hover {
     background: rgba(255, 255, 255, 0.09) !important;
-    border-color: rgba(255, 255, 255, 0.2) !important;
-    color: #ffffff !important;
+    border-color: var(--amb-border-strong) !important;
+    color: var(--amb-text-main) !important;
     transform: translateY(-1px);
     box-shadow: none !important;
 }
 
 #anomalous-header button.active {
     background: rgba(255, 255, 255, 0.14) !important;
-    border-color: rgba(255, 255, 255, 0.28) !important;
-    color: #ffffff !important;
+    border-color: var(--amb-border-strong) !important;
+    color: var(--amb-text-main) !important;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
 }
 
@@ -783,13 +783,13 @@ button:hover .anomalous-btn-icon {
     justify-content: center !important;
     border-radius: 6px !important;
     background: rgba(255, 255, 255, 0.04) !important;
-    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border: 1px solid var(--amb-border) !important;
 }
 
 #anomalous-dock-btn:hover {
     background: rgba(255, 255, 255, 0.09) !important;
-    border-color: rgba(255, 255, 255, 0.2) !important;
-    color: #ffffff !important;
+    border-color: var(--amb-border-strong) !important;
+    color: var(--amb-text-main) !important;
 }
 
 #anomalous-dock-btn svg {
@@ -878,7 +878,7 @@ button:hover .anomalous-btn-icon {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background: #0d1117;
+    background: var(--amb-bg-page);
     position: relative;
 }
 
@@ -911,8 +911,8 @@ button:hover .anomalous-btn-icon {
 
 .anomalous-recipe-topbar-close {
     background: transparent !important;
-    border: 1px solid rgba(255, 255, 255, 0.12) !important;
-    color: #94a3b8 !important;
+    border: 1px solid var(--amb-border-strong) !important;
+    color: var(--amb-text-muted) !important;
     padding: 4px 10px !important;
     font-size: 0.88rem !important;
     cursor: pointer;
diff --git a/web/styles/09-prompt-drawers.css b/web/styles/09-prompt-drawers.css
index 1e79fe4..e4ccde2 100644
--- a/web/styles/09-prompt-drawers.css
+++ b/web/styles/09-prompt-drawers.css
@@ -6,8 +6,8 @@
 
 .anomalous-mixer-block-btn.is-translate:hover {
     opacity: 1;
-    color: #38bdf8;
-    background: rgba(56, 189, 248, 0.18);
+    color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 18%, transparent);
 }
 
 /* ==========================================================================
@@ -31,8 +31,8 @@
     width: 580px;
     max-width: 90vw;
     height: 100vh;
-    background: var(--amb-bg-page, #121316);
-    border-left: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
+    background: var(--amb-bg-page, var(--amb-bg-page));
+    border-left: 1px solid var(--amb-border, var(--amb-border-strong));
     box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
     pointer-events: auto;
     display: flex;
@@ -45,7 +45,7 @@
     right: auto;
     left: 0;
     border-left: none;
-    border-right: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
+    border-right: 1px solid var(--amb-border, var(--amb-border-strong));
     box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6);
 }
 
@@ -68,8 +68,8 @@
 
 .anomalous-studio-resize-handle:hover,
 .anomalous-studio-resize-handle.is-resizing {
-    background: #38bdf8;
-    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
+    background: var(--amb-btn-primary-hover);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--amb-link) 60%, transparent);
 }
 
 /* Drawer Workbench Base */
@@ -115,7 +115,7 @@
 
 .anomalous-prompt-studio-drawer.is-dock-left .anomalous-workbench-left-panel {
     order: 1 !important;
-    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-right: 1px solid var(--amb-border) !important;
 }
 
 .anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-left-panel {
@@ -141,7 +141,7 @@
 
 .anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-right-panel {
     order: 1 !important;
-    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-right: 1px solid var(--amb-border) !important;
     border-left: none !important;
 }
 
@@ -162,13 +162,13 @@
     gap: 5px;
     font-size: 0.84rem;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     white-space: nowrap;
 }
 
 .anomalous-workbench-col-title .anomalous-sub-counter {
     font-size: 0.72rem;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-weight: normal;
 }
 
@@ -187,17 +187,17 @@
     height: 24px;
     padding: 0;
     border-radius: 5px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     cursor: pointer;
     transition: all 0.15s ease;
 }
 
 .anomalous-workbench-header-actions button.anomalous-icon-btn:hover {
-    color: #ffffff;
-    background: rgba(56, 189, 248, 0.18);
-    border-color: rgba(56, 189, 248, 0.4);
+    color: var(--amb-text-main);
+    background: color-mix(in srgb, var(--amb-link) 18%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
 }
 
 /* Category Pills: 5 equal 2-char chips */
@@ -214,9 +214,9 @@
     text-align: center;
     padding: 3px 0;
     border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.03);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.72rem;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -225,14 +225,14 @@
 }
 
 .anomalous-workbench-pill:hover {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.08);
 }
 
 .anomalous-workbench-pill.is-active {
-    color: #38bdf8;
-    background: rgba(56, 189, 248, 0.15);
-    border-color: rgba(56, 189, 248, 0.4);
+    color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 15%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
     font-weight: 600;
 }
 
@@ -252,7 +252,7 @@
     gap: 7px;
     padding: 6px 9px;
     background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-left: 3px solid #64748b;
     border-radius: 6px;
     cursor: pointer;
@@ -263,7 +263,7 @@
 }
 
 .anomalous-source-card-compact.is-cat-base {
-    border-left-color: #38bdf8 !important;
+    border-left-color: var(--amb-link) !important;
 }
 
 .anomalous-source-card-compact.is-cat-style {
@@ -281,15 +281,15 @@
 .anomalous-source-card-compact:hover,
 .anomalous-source-card-compact.is-preview-active {
     background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 255, 255, 0.22);
+    border-color: var(--amb-border-strong);
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
     transform: translateX(2px);
 }
 
 .anomalous-source-card-compact.is-cat-base:hover,
 .anomalous-source-card-compact.is-cat-base.is-preview-active {
-    border-color: rgba(56, 189, 248, 0.4);
-    background: rgba(56, 189, 248, 0.12);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
 }
 
 .anomalous-source-card-compact.is-cat-style:hover,
@@ -326,7 +326,7 @@
 
 .anomalous-source-origin,
 .anomalous-source-sync-status {
-    color: var(--amb-text-muted, #94a3b8);
+    color: var(--amb-text-muted, var(--amb-text-muted));
     font-size: 0.68rem;
     overflow-wrap: anywhere;
 }
@@ -338,7 +338,7 @@
 .anomalous-source-card-name {
     font-size: 0.76rem;
     font-weight: 500;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -347,12 +347,12 @@
 
 .anomalous-source-card-compact:hover .anomalous-source-card-name,
 .anomalous-source-card-compact.is-preview-active .anomalous-source-card-name {
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-source-card-add-icon {
     font-size: 0.72rem;
-    color: #64748b;
+    color: var(--amb-text-dim);
     opacity: 0;
     transition: opacity 0.15s;
     flex-shrink: 0;
@@ -363,8 +363,8 @@
 .anomalous-source-card-compact:hover .anomalous-source-card-add-icon,
 .anomalous-source-card-compact.is-preview-active .anomalous-source-card-add-icon {
     opacity: 1;
-    color: #38bdf8;
-    background: rgba(56, 189, 248, 0.18);
+    color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 18%, transparent);
 }
 
 /* Eye-Catching Prompt Card Hover Preview Popover (Replaces unstyled browser tooltip) */
@@ -376,9 +376,9 @@
     background: rgba(18, 20, 26, 0.98);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(56, 189, 248, 0.35);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
     border-radius: 10px;
-    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(56, 189, 248, 0.18);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px color-mix(in srgb, var(--amb-link) 18%, transparent);
     display: flex;
     flex-direction: column;
     overflow: visible;
@@ -392,17 +392,17 @@
 }
 
 .anomalous-card-preview-popover.is-pinned {
-    border-color: #38bdf8 !important;
-    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 24px rgba(56, 189, 248, 0.35) !important;
+    border-color: var(--amb-link) !important;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 24px color-mix(in srgb, var(--amb-link) 35%, transparent) !important;
 }
 
 .anomalous-popover-copy-btn,
 .anomalous-popover-pin-btn,
 .anomalous-popover-add-btn {
     background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 4px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 0.7rem;
     font-weight: 500;
     padding: 2px 7px;
@@ -413,22 +413,22 @@
 
 .anomalous-popover-copy-btn:hover,
 .anomalous-popover-pin-btn:hover {
-    background: rgba(56, 189, 248, 0.15);
-    border-color: rgba(56, 189, 248, 0.4);
-    color: #38bdf8;
+    background: color-mix(in srgb, var(--amb-link) 15%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
+    color: var(--amb-link);
 }
 
 .anomalous-popover-pin-btn.is-active {
-    background: rgba(56, 189, 248, 0.25) !important;
-    border-color: #38bdf8 !important;
-    color: #38bdf8 !important;
+    background: color-mix(in srgb, var(--amb-link) 25%, transparent) !important;
+    border-color: var(--amb-link) !important;
+    color: var(--amb-link) !important;
     font-weight: 600;
 }
 
 .anomalous-popover-close-btn {
     background: transparent;
     border: 1px solid transparent;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.75rem;
     padding: 1px 6px;
     cursor: pointer;
@@ -444,15 +444,15 @@
 }
 
 .anomalous-popover-add-btn {
-    background: rgba(56, 189, 248, 0.15);
-    border-color: rgba(56, 189, 248, 0.35);
-    color: #38bdf8;
+    background: color-mix(in srgb, var(--amb-link) 15%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
+    color: var(--amb-link);
 }
 
 .anomalous-popover-add-btn:hover {
-    background: rgba(56, 189, 248, 0.28);
-    border-color: rgba(56, 189, 248, 0.6);
-    color: #ffffff;
+    background: color-mix(in srgb, var(--amb-link) 28%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
+    color: var(--amb-text-main);
 }
 
 @keyframes anmPopoverIn {
@@ -463,7 +463,7 @@
 .anomalous-popover-header {
     padding: 10px 12px 6px;
     background: rgba(255, 255, 255, 0.02);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid var(--amb-border);
     display: flex;
     flex-direction: column;
     gap: 4px;
@@ -493,9 +493,9 @@
 }
 
 .anomalous-popover-role.is-positive {
-    background: rgba(56, 189, 248, 0.15);
-    color: #38bdf8;
-    border: 1px solid rgba(56, 189, 248, 0.35);
+    background: color-mix(in srgb, var(--amb-link) 15%, transparent);
+    color: var(--amb-link);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
 }
 
 .anomalous-popover-role.is-negative {
@@ -507,7 +507,7 @@
 .anomalous-popover-title {
     font-size: 0.86rem;
     font-weight: 600;
-    color: #f8fafc;
+    color: var(--amb-text-main);
     line-height: 1.35;
     word-break: break-word;
 }
@@ -520,9 +520,9 @@
     margin: 0;
     padding: 8px 10px;
     background: rgba(0, 0, 0, 0.45);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
-    color: #38bdf8;
+    color: var(--amb-link);
     font-family: Consolas, Monaco, "Courier New", monospace;
     font-size: 0.76rem;
     line-height: 1.45;
@@ -535,11 +535,11 @@
 .anomalous-popover-footer {
     padding: 6px 12px 7px;
     font-size: 0.7rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     display: flex;
     align-items: center;
     background: rgba(0, 0, 0, 0.25);
-    border-top: 1px solid rgba(255, 255, 255, 0.04);
+    border-top: 1px solid var(--amb-border);
 }
 
 /* Assembly Dropzone Notice */
@@ -551,10 +551,10 @@
     flex: 1;
     min-height: 260px;
     padding: 40px 20px;
-    border: 1px dashed rgba(255, 255, 255, 0.1);
+    border: 1px dashed var(--amb-border);
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.015);
-    color: #64748b;
+    color: var(--amb-text-dim);
     text-align: center;
     box-sizing: border-box;
     transition: all 0.2s ease;
@@ -562,8 +562,8 @@
 
 .anomalous-assembly-dropzone:hover,
 .anomalous-assembly-dropzone.is-drag-over {
-    border-color: rgba(56, 189, 248, 0.4);
-    background: rgba(56, 189, 248, 0.04);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 4%, transparent);
 }
 
 /* Weight Wheel Pill in Assembled Blocks */
@@ -571,12 +571,12 @@
     display: inline-flex;
     align-items: center;
     background: rgba(0, 0, 0, 0.45);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 12px;
     padding: 0 4px;
     font-size: 0.72rem;
     font-family: monospace, sans-serif;
-    color: #38bdf8;
+    color: var(--amb-link);
     cursor: ns-resize;
     user-select: none;
     gap: 2px;
@@ -584,14 +584,14 @@
 }
 
 .anomalous-block-weight-pill:hover {
-    border-color: #38bdf8;
-    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
+    border-color: var(--amb-link);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--amb-link) 30%, transparent);
 }
 
 .anomalous-block-weight-btn {
     background: transparent;
     border: none;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     cursor: pointer;
     font-size: 0.7rem;
     padding: 0 2px;
@@ -600,7 +600,7 @@
 }
 
 .anomalous-block-weight-btn:hover {
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 /* Floating Action Dock (Slides up only when blocks exist) */
@@ -612,9 +612,9 @@
     height: 38px;
     background: rgba(22, 25, 32, 0.94);
     backdrop-filter: blur(16px);
-    border: 1px solid rgba(56, 189, 248, 0.35);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
     border-radius: 20px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(56, 189, 248, 0.18);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px color-mix(in srgb, var(--amb-link) 18%, transparent);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -629,7 +629,7 @@
     align-items: center;
     gap: 6px;
     font-size: 0.72rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     white-space: nowrap;
 }
 
@@ -660,8 +660,8 @@
     max-width: 92vw;
     height: 520px;
     max-height: 88vh;
-    background: var(--amb-bg-panel, #181a20);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.16));
+    background: var(--amb-bg-panel, var(--amb-bg-panel));
+    border: 1px solid var(--amb-border, var(--amb-border-strong));
     border-radius: 14px;
     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.2);
     display: flex;
@@ -676,7 +676,7 @@
     justify-content: space-between;
     padding: 10px 16px;
     background: rgba(255, 255, 255, 0.03);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-inspector-body {
@@ -693,9 +693,9 @@
     width: 100%;
     box-sizing: border-box;
     background: rgba(0, 0, 0, 0.35);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-family: Consolas, Monaco, "Courier New", monospace;
     font-size: 0.88rem;
     line-height: 1.6;
@@ -706,8 +706,8 @@
 }
 
 .anomalous-inspector-textarea:focus {
-    border-color: #38bdf8;
-    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
+    border-color: var(--amb-link);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--amb-link) 25%, transparent);
 }
 
 .anomalous-inspector-footer {
@@ -716,7 +716,7 @@
     justify-content: space-between;
     padding: 10px 16px;
     background: rgba(255, 255, 255, 0.03);
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--amb-border);
 }
 
 @keyframes anmScaleUp {
@@ -742,9 +742,9 @@
 }
 
 .anomalous-card-role-tag.is-positive {
-    color: #38bdf8;
-    background: rgba(56, 189, 248, 0.14);
-    border: 1px solid rgba(56, 189, 248, 0.28);
+    color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 14%, transparent);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 28%, transparent);
 }
 
 .anomalous-card-role-tag.is-negative {
@@ -754,10 +754,10 @@
 }
 
 .anomalous-mixer-tab-btn.is-role-positive.is-active {
-    background: rgba(56, 189, 248, 0.16) !important;
-    color: #38bdf8 !important;
-    border: 1px solid rgba(56, 189, 248, 0.35) !important;
-    box-shadow: 0 0 10px rgba(56, 189, 248, 0.15) !important;
+    background: color-mix(in srgb, var(--amb-link) 16%, transparent) !important;
+    color: var(--amb-link) !important;
+    border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent) !important;
+    box-shadow: 0 0 10px color-mix(in srgb, var(--amb-link) 15%, transparent) !important;
 }
 
 .anomalous-mixer-tab-btn.is-role-negative.is-active {
@@ -774,8 +774,8 @@
 }
 
 .anomalous-mixer-block.is-role-positive.is-cross-role {
-    border-color: rgba(56, 189, 248, 0.45);
-    background: rgba(56, 189, 248, 0.05);
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 5%, transparent);
 }
 
 .anomalous-mixer-role-badge {
@@ -808,9 +808,9 @@
 }
 
 .anomalous-mixer-role-badge.is-positive {
-    color: #38bdf8;
-    background: rgba(56, 189, 248, 0.14);
-    border-color: rgba(56, 189, 248, 0.28);
+    color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 14%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 28%, transparent);
 }
 
 .anomalous-mixer-role-badge.is-negative {
@@ -830,8 +830,8 @@
 }
 
 .anomalous-mixer-block-btn.is-transfer:hover {
-    color: #38bdf8;
-    background: rgba(56, 189, 248, 0.15);
+    color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 15%, transparent);
 }
 
 /* ========================================================================= */
diff --git a/web/styles/10-model-sources.css b/web/styles/10-model-sources.css
index 6886e7f..73a2862 100644
--- a/web/styles/10-model-sources.css
+++ b/web/styles/10-model-sources.css
@@ -19,19 +19,19 @@
     width: 880px;
     max-width: 96vw;
     max-height: 88vh;
-    background: #0e1017;
+    background: var(--amb-bg-page);
     border: 1px solid rgba(244, 63, 94, 0.35);
     border-radius: 12px;
     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 32px rgba(190, 20, 55, 0.18);
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
 }
 
 .anomalous-sources-header {
     padding: 14px 18px 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--amb-border);
     background: rgba(18, 20, 28, 0.9);
     flex-shrink: 0;
 }
@@ -47,13 +47,13 @@
     margin: 0;
     font-size: 1.05rem;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-sources-close-btn {
     background: transparent;
     border: none;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 1.1rem;
     cursor: pointer;
     padding: 4px 8px;
@@ -62,7 +62,7 @@
 }
 
 .anomalous-sources-close-btn:hover {
-    color: #fff;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.1);
 }
 
@@ -75,7 +75,7 @@
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     padding: 8px 16px;
     font-size: 0.88rem;
     font-weight: 500;
@@ -87,12 +87,12 @@
 }
 
 .anomalous-sources-scope-tab:hover {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-sources-scope-tab.is-active {
-    color: #38bdf8;
-    border-bottom-color: #38bdf8;
+    color: var(--amb-link);
+    border-bottom-color: var(--amb-link);
     font-weight: 600;
 }
 
@@ -101,7 +101,7 @@
     padding: 1px 6px;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.08);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-sources-filter-bar {
@@ -110,7 +110,7 @@
     justify-content: space-between;
     gap: 12px;
     padding: 10px 18px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--amb-border);
     background: rgba(14, 16, 23, 0.95);
     flex-shrink: 0;
 }
@@ -122,8 +122,8 @@
 
 .anomalous-sources-pill {
     background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     border-radius: 16px;
     padding: 3px 10px;
     font-size: 0.78rem;
@@ -132,22 +132,22 @@
 }
 
 .anomalous-sources-pill:hover {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.08);
 }
 
 .anomalous-sources-pill.is-active {
-    background: rgba(56, 189, 248, 0.18);
-    border-color: rgba(56, 189, 248, 0.4);
-    color: #38bdf8;
+    background: color-mix(in srgb, var(--amb-link) 18%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
+    color: var(--amb-link);
     font-weight: 600;
 }
 
 .anomalous-sources-search-input {
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 0.8rem;
     padding: 5px 10px;
     width: 220px;
@@ -156,7 +156,7 @@
 }
 
 .anomalous-sources-search-input:focus {
-    border-color: #38bdf8;
+    border-color: var(--amb-link);
 }
 
 .anomalous-sources-body {
@@ -170,7 +170,7 @@
 
 .anomalous-source-row-item {
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     padding: 10px 14px;
     display: flex;
@@ -206,7 +206,7 @@
 
 .anomalous-source-model-name {
     font-size: 0.88rem;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     word-break: break-all;
 }
 
@@ -216,7 +216,7 @@
     border-radius: 4px;
     background: rgba(148, 163, 184, 0.08);
     border: 1px solid rgba(148, 163, 184, 0.2);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-source-badge-danger {
@@ -230,7 +230,7 @@
 
 .anomalous-source-hash-chip {
     font-size: 0.72rem;
-    color: #64748b;
+    color: var(--amb-text-dim);
     margin-left: auto;
     font-family: monospace;
 }
@@ -251,9 +251,9 @@
 .anomalous-source-url-input {
     width: 100%;
     background: rgba(0, 0, 0, 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 0.82rem;
     padding: 6px 10px;
     padding-right: 96px;
@@ -263,26 +263,26 @@
 }
 
 .anomalous-source-url-input:focus {
-    border-color: #38bdf8;
+    border-color: var(--amb-link);
     background: rgba(0, 0, 0, 0.6);
 }
 
 .anomalous-source-url-input.is-locked {
     background: rgba(0, 0, 0, 0.25);
-    border-color: rgba(255, 255, 255, 0.07);
-    color: #94a3b8;
+    border-color: var(--amb-border);
+    color: var(--amb-text-muted);
     cursor: default;
 }
 
 .anomalous-source-url-input.is-locked:hover {
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-source-url-input.is-editing {
     border-color: #f59e0b;
     background: rgba(245, 158, 11, 0.08);
     box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
-    color: #f8fafc;
+    color: var(--amb-text-main);
 }
 
 .anomalous-source-edit-badge {
@@ -299,7 +299,7 @@
 .anomalous-btn-save-local {
     background: linear-gradient(135deg, #f59e0b, #d97706) !important;
     border-color: rgba(245, 158, 11, 0.6) !important;
-    color: #fff !important;
+    color: var(--amb-text-main) !important;
     font-weight: 600;
     animation: anomalousSourcesPulse 1.6s ease-in-out infinite;
 }
@@ -328,9 +328,9 @@
 }
 
 .anomalous-btn-jump {
-    background: linear-gradient(135deg, #0284c7, #0369a1);
-    border: 1px solid rgba(56, 189, 248, 0.4);
-    color: #fff;
+    background: linear-gradient(135deg, var(--amb-link), #0369a1);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 40%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-btn-jump:disabled {
@@ -340,7 +340,7 @@
 
 .anomalous-sources-footer {
     padding: 10px 18px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--amb-border);
     background: rgba(18, 20, 28, 0.95);
     display: flex;
     align-items: center;
@@ -350,7 +350,7 @@
 
 .anomalous-sources-footer-stats {
     font-size: 0.82rem;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-sources-footer-actions {
@@ -361,16 +361,16 @@
 .anomalous-sources-empty {
     padding: 40px 20px;
     text-align: center;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 0.9rem;
 }
 
 .anomalous-sources-library-hint {
     padding: 8px 12px;
     margin-bottom: 8px;
-    color: var(--amb-text-secondary, #94a3b8);
+    color: var(--amb-text-secondary, var(--amb-text-muted));
     background: rgba(255, 255, 255, 0.025);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     border-radius: 7px;
     font-size: 0.78rem;
 }
@@ -384,7 +384,7 @@
     gap: 10px;
     margin-top: 8px;
     padding: 11px 12px;
-    color: var(--amb-text-secondary, #cbd5e1);
+    color: var(--amb-text-secondary, var(--amb-text-soft));
     background: rgba(148, 163, 184, 0.07);
     border: 1px solid rgba(148, 163, 184, 0.18);
     border-radius: 8px;
@@ -394,12 +394,12 @@
 }
 
 .anomalous-sources-components-toggle:hover {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     background: rgba(148, 163, 184, 0.11);
 }
 
 .anomalous-sources-components-toggle:focus-visible {
-    outline: 2px solid var(--amb-accent, #38bdf8);
+    outline: 2px solid var(--amb-accent, var(--amb-link));
     outline-offset: 2px;
 }
 
@@ -410,7 +410,7 @@
 }
 
 .anomalous-sources-components-label small {
-    color: var(--amb-text-muted, #64748b);
+    color: var(--amb-text-muted, var(--amb-text-dim));
     font-size: 0.7rem;
     font-weight: 400;
 }
@@ -422,7 +422,7 @@
 
 .anomalous-sources-components-empty {
     padding: 14px 10px;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 0.8rem;
 }
 
@@ -435,8 +435,8 @@
     min-width: 32px;
     padding: 0 !important;
     background: transparent !important;
-    border-color: rgba(255, 255, 255, 0.15) !important;
-    color: var(--amb-text-primary, #e2e8f0) !important;
+    border-color: var(--amb-border-strong) !important;
+    color: var(--amb-text-primary, var(--amb-text-main)) !important;
 }
 #anomalous-header button.anomalous-update-notice-btn:hover {
     background: rgba(255, 255, 255, 0.08) !important;
@@ -454,8 +454,8 @@
 #anomalous-help-replay-guide-btn {
     padding: 8px 14px;
     background: rgba(255, 255, 255, 0.05);
-    color: #cbd5e1;
-    border: 1px solid rgba(255, 255, 255, 0.16);
+    color: var(--amb-text-soft);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 4px;
     cursor: pointer;
     font-size: 12px;
@@ -463,13 +463,13 @@
 }
 #anomalous-help-replay-guide-btn:hover {
     background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.3);
-    color: #fff;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-main);
 }
 #anomalous-update-notice-btn:focus-visible,
 #anomalous-help-replay-guide-btn:focus-visible,
 .anomalous-update-guide button:focus-visible {
-    outline: 2px solid var(--amb-accent, #38bdf8);
+    outline: 2px solid var(--amb-accent, var(--amb-link));
     outline-offset: 2px;
 }
 
@@ -494,13 +494,13 @@ dialog.anomalous-update-guide {
     height: fit-content;
     max-height: 85vh;
     padding: 0;
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 16px;
     background: linear-gradient(145deg, rgba(28, 30, 38, 0.98), rgba(16, 18, 24, 0.98));
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.12);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     outline: none;
     overflow-y: auto;
     box-sizing: border-box;
@@ -539,17 +539,17 @@ dialog.anomalous-update-guide::backdrop {
     justify-content: space-between;
     padding: 14px 20px;
     background: rgba(255, 255, 255, 0.02);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--amb-border);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.5px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-update-guide-close {
     background: transparent;
     border: none;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 20px;
     line-height: 1;
     cursor: pointer;
@@ -559,7 +559,7 @@ dialog.anomalous-update-guide::backdrop {
 }
 
 .anomalous-update-guide-close:hover {
-    color: #ffffff;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.1);
 }
 
@@ -569,13 +569,13 @@ dialog.anomalous-update-guide::backdrop {
     margin: 24px auto 14px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     user-select: none;
     flex-shrink: 0;
 }
@@ -584,7 +584,7 @@ dialog.anomalous-update-guide::backdrop {
     margin: 0 24px 10px;
     font-size: 17px;
     font-weight: 600;
-    color: #ffffff;
+    color: var(--amb-text-main);
     text-align: center;
     letter-spacing: 0.2px;
 }
@@ -593,7 +593,7 @@ dialog.anomalous-update-guide::backdrop {
     margin: 0 24px 16px;
     font-size: 13px;
     line-height: 1.65;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     text-align: center;
     min-height: 60px;
 }
@@ -601,7 +601,7 @@ dialog.anomalous-update-guide::backdrop {
 .anomalous-update-guide-progress {
     margin: 0 24px 20px;
     font-size: 11px;
-    color: #64748b;
+    color: var(--amb-text-dim);
     text-align: center;
     font-weight: 500;
     letter-spacing: 0.4px;
@@ -614,7 +614,7 @@ dialog.anomalous-update-guide::backdrop {
     flex-wrap: wrap;
     padding: 14px 20px;
     background: rgba(0, 0, 0, 0.28);
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--amb-border);
     gap: 10px;
 }
 
@@ -622,17 +622,17 @@ dialog.anomalous-update-guide::backdrop {
     padding: 7px 15px;
     font-size: 12px;
     border-radius: 6px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     cursor: pointer;
     transition: all 0.15s ease;
 }
 
 .anomalous-update-guide-footer .anomalous-btn-ghost:hover:not(:disabled) {
-    color: #ffffff;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-update-guide-footer .anomalous-btn-ghost:disabled {
diff --git a/web/styles/11-audio-studio.css b/web/styles/11-audio-studio.css
index 4d1171e..9b12ce8 100644
--- a/web/styles/11-audio-studio.css
+++ b/web/styles/11-audio-studio.css
@@ -44,7 +44,7 @@
     justify-content: space-between;
     gap: 12px;
     padding-bottom: 14px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid var(--amb-border);
     flex-shrink: 0;
 }
 
@@ -62,21 +62,21 @@
     height: 32px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #cbd5e1;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-soft);
     box-shadow: none;
 }
 
 .anomalous-audio-title-text {
     font-size: 15px;
     font-weight: 600;
-    color: #f8fafc;
+    color: var(--amb-text-main);
     letter-spacing: 0.3px;
 }
 
 .anomalous-audio-sub-text {
     font-size: 12px;
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-audio-title-stack {
@@ -96,17 +96,17 @@
     align-items: center;
     gap: 6px;
     background: rgba(0, 0, 0, 0.25);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     padding: 4px 10px;
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-audio-search input {
     background: transparent;
     border: none;
     outline: none;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 12px;
     width: 140px;
 }
@@ -117,9 +117,9 @@
     gap: 6px;
     padding: 5px 12px;
     border-radius: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.05);
-    color: #d1d5db;
+    color: var(--amb-text-soft);
     font-size: 12px;
     font-weight: 500;
     cursor: pointer;
@@ -129,13 +129,13 @@
 
 .anomalous-audio-tool-btn:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.2);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-audio-tool-btn.active {
-    background: rgba(56, 189, 248, 0.15);
-    color: #38bdf8;
-    border-color: rgba(56, 189, 248, 0.3);
+    background: color-mix(in srgb, var(--amb-link) 15%, transparent);
+    color: var(--amb-link);
+    border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
 }
 
 .anomalous-audio-tool-btn:disabled {
@@ -146,7 +146,7 @@
 .anomalous-audio-status {
     padding: 40px 20px;
     text-align: center;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 12px;
 }
 
@@ -157,7 +157,7 @@
 .anomalous-audio-empty {
     padding: 70px 20px;
     text-align: center;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 13px;
 }
 
@@ -169,7 +169,7 @@
 }
 
 .anomalous-audio-empty-title {
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 6px;
@@ -191,7 +191,7 @@
 
 .anomalous-character-voice-card {
     background: rgba(18, 18, 23, 0.75);
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
     border-radius: 12px;
     padding: 16px;
     display: flex;
@@ -203,8 +203,8 @@
 }
 
 .anomalous-character-voice-card:hover {
-    border-color: rgba(99, 102, 241, 0.25);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(99, 102, 241, 0.08);
+    border-color: color-mix(in srgb, var(--amb-link) 25%, transparent);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 15px color-mix(in srgb, var(--amb-link) 8%, transparent);
 }
 
 .anomalous-voice-slice-row {
@@ -214,13 +214,13 @@
     padding: 8px 12px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--amb-border);
     transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .anomalous-voice-slice-row:hover {
     background: rgba(255, 255, 255, 0.06);
-    border-color: rgba(255, 255, 255, 0.12);
+    border-color: var(--amb-border-strong);
 }
 
 .anomalous-character-voice-header {
@@ -244,11 +244,11 @@
     height: 32px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     flex-shrink: 0;
 }
 
@@ -261,20 +261,20 @@
 .anomalous-character-voice-name {
     font-size: 14px;
     font-weight: 600;
-    color: #f8fafc;
+    color: var(--amb-text-main);
     overflow-wrap: anywhere;
 }
 
 .anomalous-character-voice-folder {
     font-size: 11px;
     font-weight: 400;
-    color: #818cf8;
+    color: var(--amb-link);
 }
 
 .anomalous-character-voice-hint {
     overflow: hidden;
     font-size: 11px;
-    color: #64748b;
+    color: var(--amb-text-dim);
     text-overflow: ellipsis;
     white-space: nowrap;
 }
@@ -284,8 +284,8 @@
     padding: 3px 8px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #94a3b8;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-muted);
     white-space: nowrap;
 }
 
@@ -315,11 +315,11 @@
 .anomalous-eq-bar {
     width: 2px;
     border-radius: 1px;
-    background: #38bdf8;
+    background: var(--amb-btn-primary-bg);
 }
 
 .anomalous-eq-bar-2 {
-    background: #818cf8;
+    background: var(--amb-btn-primary-bg);
 }
 
 .anomalous-voice-emotion-tag {
@@ -335,7 +335,7 @@
     flex: 1;
     min-width: 0;
     font-size: 12px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -347,9 +347,9 @@
     gap: 4px;
     padding: 2px 8px;
     border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     background: rgba(0, 0, 0, 0.3);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 11px;
     font-family: monospace;
     cursor: pointer;
@@ -370,26 +370,26 @@
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     background: rgba(255, 255, 255, 0.04);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     cursor: pointer;
     flex-shrink: 0;
     transition: all 0.15s ease;
 }
 
 .anomalous-audio-play-btn:hover {
-    background: rgba(56, 189, 248, 0.15);
-    border-color: rgba(56, 189, 248, 0.4);
-    color: #38bdf8;
+    background: color-mix(in srgb, var(--amb-link) 15%, transparent);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
+    color: var(--amb-link);
     transform: scale(1.06);
 }
 
 .anomalous-audio-play-btn.is-playing {
-    background: rgba(56, 189, 248, 0.2);
-    border-color: #38bdf8;
-    color: #38bdf8;
-    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
+    background: color-mix(in srgb, var(--amb-link) 20%, transparent);
+    border-color: var(--amb-link);
+    color: var(--amb-link);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--amb-link) 30%, transparent);
 }
 
 /* Audio Gallery Tracks */
@@ -400,7 +400,7 @@
     padding: 10px 14px;
     border-radius: 10px;
     background: rgba(22, 22, 28, 0.7);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     backdrop-filter: blur(14px);
     transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
@@ -408,7 +408,7 @@
 
 .anomalous-audio-track-item:hover {
     background: rgba(28, 28, 36, 0.85);
-    border-color: rgba(129, 140, 248, 0.3);
+    border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
 }
 
@@ -471,9 +471,9 @@
     font-size: 10px;
     padding: 1px 7px;
     border-radius: 999px;
-    background: rgba(99, 102, 241, 0.18);
-    border: 1px solid rgba(129, 140, 248, 0.35);
-    color: #c7d2fe;
+    background: color-mix(in srgb, var(--amb-link) 18%, transparent);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
+    color: var(--amb-text-main);
     white-space: nowrap;
     flex-shrink: 0;
 }
@@ -493,7 +493,7 @@
     text-align: left;
     font: inherit;
     font-size: 13px;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -501,7 +501,7 @@
 }
 
 .anomalous-track-speech.is-expanded .anomalous-track-speech-summary {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-track-speech-full {
@@ -512,7 +512,7 @@
     padding: 8px 10px;
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.25);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
 }
 
 .anomalous-track-speech-line {
@@ -521,7 +521,7 @@
     gap: 8px;
     font-size: 12px;
     line-height: 1.6;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-audio-play-btn.is-done {
@@ -569,7 +569,7 @@
 
 .anomalous-track-previews-hint {
     font-size: 11px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-track-list-section {
@@ -581,7 +581,7 @@
 .anomalous-track-name {
     font-size: 13px;
     font-weight: 500;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -593,19 +593,19 @@
     flex-wrap: wrap;
     gap: 8px;
     font-size: 11px;
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-track-folder {
-    background: rgba(99, 102, 241, 0.12);
-    color: #818cf8;
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    color: var(--amb-link);
     padding: 1px 5px;
     border-radius: 3px;
 }
 
 .anomalous-track-time {
     font-size: 11px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-family: monospace;
     min-width: 90px;
     text-align: right;
@@ -629,7 +629,7 @@
 
 .anomalous-track-count {
     font-size: 11px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     background: rgba(255, 255, 255, 0.05);
     padding: 3px 8px;
     border-radius: 12px;
@@ -642,7 +642,7 @@
 .anomalous-track-progress-fill {
     height: 100%;
     width: 0%;
-    background: linear-gradient(90deg, #38bdf8, #818cf8);
+    background: linear-gradient(90deg, var(--amb-link), var(--amb-link));
     border-radius: 2px;
     transition: width 0.1s linear;
 }
@@ -653,11 +653,11 @@
     justify-content: space-between;
     align-items: center;
     padding: 12px 14px 10px 14px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-audio-sidebar-title {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     margin: 0;
     font-size: 12px;
     font-weight: 600;
@@ -669,13 +669,13 @@
 
 .anomalous-audio-sidebar-title-icon {
     display: inline-flex;
-    color: #818cf8;
+    color: var(--amb-link);
 }
 
 .anomalous-audio-sidebar-refresh {
     background: transparent;
     border: none;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     cursor: pointer;
     padding: 4px;
     border-radius: 4px;
@@ -685,7 +685,7 @@
 }
 
 .anomalous-audio-sidebar-refresh:hover {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     background: rgba(255, 255, 255, 0.06);
 }
 
@@ -701,7 +701,7 @@
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-audio-nav-section.is-error {
@@ -725,7 +725,7 @@
     font: inherit;
     font-size: 12px;
     text-align: left;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease;
 }
@@ -745,26 +745,26 @@
 
 .anomalous-audio-nav-count {
     font-size: 10px;
-    color: #64748b;
+    color: var(--amb-text-dim);
     background: rgba(255, 255, 255, 0.05);
     padding: 1px 6px;
     border-radius: 8px;
 }
 
 .anomalous-audio-nav-item.active .anomalous-audio-nav-count {
-    color: #818cf8;
-    background: rgba(99, 102, 241, 0.2);
+    color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 20%, transparent);
 }
 
 .anomalous-audio-nav-item:hover {
     background: rgba(255, 255, 255, 0.04);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-audio-nav-item.active {
-    background: rgba(99, 102, 241, 0.14);
-    color: #818cf8;
-    border-left-color: #818cf8;
+    background: color-mix(in srgb, var(--amb-link) 14%, transparent);
+    color: var(--amb-link);
+    border-left-color: var(--amb-link);
     font-weight: 600;
 }
 
@@ -775,10 +775,10 @@
     gap: 6px;
     margin: 8px 12px 0;
     padding: 5px 10px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     background: rgba(0, 0, 0, 0.25);
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-audio-sidebar-search input {
@@ -787,7 +787,7 @@
     border: none;
     outline: none;
     background: transparent;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 12px;
 }
 
@@ -808,7 +808,7 @@
     border: none;
     border-radius: 6px;
     background: transparent;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font: inherit;
     font-size: 11px;
     font-weight: 600;
@@ -817,12 +817,12 @@
 
 .anomalous-audio-nav-bucket-head:hover {
     background: rgba(255, 255, 255, 0.04);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
 }
 
 .anomalous-audio-nav-bucket-count {
     margin-left: auto;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 10px;
     font-weight: 500;
 }
@@ -830,7 +830,7 @@
 .anomalous-audio-nav-chevron {
     display: inline-flex;
     flex-shrink: 0;
-    color: #64748b;
+    color: var(--amb-text-dim);
     transition: transform 0.15s ease;
 }
 
@@ -858,7 +858,7 @@
 
 .anomalous-audio-nav-item > .anomalous-audio-nav-chevron:hover {
     background: rgba(255, 255, 255, 0.08);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
 }
 
 .anomalous-audio-nav-item .anomalous-audio-nav-label {
@@ -877,7 +877,7 @@
     display: flex;
     flex-direction: column;
     margin: 0 8px 4px 30px;
-    border-left: 1px solid rgba(255, 255, 255, 0.06);
+    border-left: 1px solid var(--amb-border);
 }
 
 .anomalous-audio-nav-clip {
@@ -889,7 +889,7 @@
     border: none;
     border-radius: 0 6px 6px 0;
     background: transparent;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font: inherit;
     font-size: 11px;
     text-align: left;
@@ -898,44 +898,44 @@
 
 .anomalous-audio-nav-clip:hover {
     background: rgba(255, 255, 255, 0.04);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
 }
 
 .anomalous-audio-nav-clip-play {
     display: inline-flex;
     flex-shrink: 0;
-    color: #818cf8;
+    color: var(--amb-link);
 }
 
 .anomalous-audio-nav-clip-tag {
     flex-shrink: 0;
-    color: #c4b5fd;
+    color: var(--amb-link);
     font-weight: 600;
 }
 
 .anomalous-audio-nav-clip-text {
     min-width: 0;
     overflow: hidden;
-    color: #64748b;
+    color: var(--amb-text-dim);
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .anomalous-audio-nav-empty {
     padding: 10px 16px;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11px;
 }
 
 .anomalous-audio-nav-list.is-file-dragover {
-    outline: 2px dashed rgba(129, 140, 248, 0.6);
+    outline: 2px dashed color-mix(in srgb, var(--amb-link) 60%, transparent);
     outline-offset: -4px;
     border-radius: 10px;
 }
 
 .anomalous-audio-nav-character.is-file-target > .anomalous-audio-nav-item {
-    background: rgba(99, 102, 241, 0.2);
-    box-shadow: inset 0 0 0 1px #818cf8;
+    background: color-mix(in srgb, var(--amb-link) 20%, transparent);
+    box-shadow: inset 0 0 0 1px var(--amb-link);
 }
 
 .anomalous-audio-sidebar-settings {
@@ -947,9 +947,9 @@
     margin: 0;
     padding: 10px 16px;
     border: none;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-top: 1px solid var(--amb-border);
     background: transparent;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font: inherit;
     font-size: 12px;
     text-align: left;
@@ -958,7 +958,7 @@
 
 .anomalous-audio-sidebar-settings:hover {
     background: rgba(255, 255, 255, 0.04);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 /* Amber: pretrained files worth a look (dismissable); red: missing Python packages. */
@@ -976,7 +976,7 @@
 
 .anomalous-audio-sidebar-settings-busy {
     padding-left: 21px;
-    color: #38bdf8;
+    color: var(--amb-link);
     font-size: 10px;
 }
 
@@ -1004,26 +1004,26 @@
 }
 
 .anomalous-voice-modal {
-    background: #141722;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: var(--amb-bg-panel);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 16px;
     padding: 24px;
     width: 520px;
     max-width: 92vw;
     max-height: 90vh;
     overflow-y: auto;
-    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(129, 140, 248, 0.15);
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px color-mix(in srgb, var(--amb-link) 15%, transparent);
     display: flex;
     flex-direction: column;
     gap: 16px;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-voice-modal-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--amb-border);
     padding-bottom: 14px;
 }
 
@@ -1040,13 +1040,13 @@
 
 .anomalous-voice-modal-subtitle {
     font-size: 12px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-voice-modal-close {
     background: none;
     border: none;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 18px;
     cursor: pointer;
     padding: 4px 8px;
@@ -1054,7 +1054,7 @@
 }
 
 .anomalous-voice-modal-close:hover {
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-voice-modal-footer {
@@ -1062,14 +1062,14 @@
     justify-content: flex-end;
     gap: 10px;
     margin-top: 8px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--amb-border);
     padding-top: 14px;
 }
 
 .anomalous-voice-modal-cancel {
     background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #cbd5e1;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-soft);
     padding: 8px 16px;
     border-radius: 8px;
     cursor: pointer;
@@ -1077,15 +1077,15 @@
 }
 
 .anomalous-voice-modal-submit {
-    background: linear-gradient(135deg, #6366f1, #38bdf8);
+    background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
     border: none;
-    color: #fff;
+    color: var(--amb-text-main);
     font-weight: 600;
     padding: 8px 20px;
     border-radius: 8px;
     cursor: pointer;
     font-size: 13px;
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+    box-shadow: 0 4px 12px color-mix(in srgb, var(--amb-link) 30%, transparent);
 }
 
 .anomalous-voice-modal-submit:disabled {
@@ -1097,7 +1097,7 @@
 .anomalous-voice-grip {
     display: inline-flex;
     flex: none;
-    color: #475569;
+    color: var(--amb-text-dim);
     opacity: 0.8;
 }
 
@@ -1112,12 +1112,12 @@
 }
 
 .anomalous-character-voice-header.is-draggable:hover {
-    border-color: rgba(129, 140, 248, 0.45);
-    background: rgba(129, 140, 248, 0.06);
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 6%, transparent);
 }
 
 .anomalous-character-voice-header.is-draggable:hover .anomalous-voice-grip {
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-character-voice-header.is-draggable:active {
@@ -1133,26 +1133,26 @@
     margin: 28px auto;
     padding: 18px 20px;
     border-radius: 12px;
-    border: 1px dashed rgba(129, 140, 248, 0.4);
-    background: rgba(129, 140, 248, 0.05);
-    color: #cbd5e1;
+    border: 1px dashed color-mix(in srgb, var(--amb-link) 40%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 5%, transparent);
+    color: var(--amb-text-soft);
     font-size: 12.5px;
     line-height: 1.6;
 }
 
 .anomalous-audio-install-title {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 13.5px;
     font-weight: 700;
 }
 
 .anomalous-audio-install-how {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-audio-install-link {
     align-self: flex-start;
-    color: #a5b4fc;
+    color: var(--amb-link);
     text-decoration: underline;
     text-underline-offset: 2px;
 }
@@ -1188,7 +1188,7 @@
 
 .anomalous-tts-section {
     margin-top: 6px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 12px;
     font-weight: 700;
 }
@@ -1211,7 +1211,7 @@
 }
 
 .anomalous-tts-row-name {
-    color: #a5b4fc;
+    color: var(--amb-link);
     font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
@@ -1219,18 +1219,18 @@
     min-width: 0;
     padding: 6px 8px;
     border-radius: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(0, 0, 0, 0.25);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 12px;
 }
 
 .anomalous-tts-remove,
 .anomalous-tts-add {
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
     background: rgba(255, 255, 255, 0.04);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     cursor: pointer;
 }
 
@@ -1246,7 +1246,7 @@
 }
 
 .anomalous-tts-hint {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11px;
     line-height: 1.5;
 }
@@ -1261,15 +1261,15 @@
 }
 
 .anomalous-tts-arrow {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 12px;
 }
 
 .anomalous-tts-listen {
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
     background: rgba(255, 255, 255, 0.04);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     cursor: pointer;
     font-size: 11px;
     padding: 4px 8px;
@@ -1278,8 +1278,8 @@
 
 .anomalous-tts-listen:hover,
 .anomalous-tts-listen.is-busy {
-    border-color: rgba(56, 189, 248, 0.4);
-    color: #38bdf8;
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
+    color: var(--amb-link);
 }
 
 .anomalous-tts-pronounce-language {
@@ -1287,7 +1287,7 @@
     align-items: center;
     gap: 8px;
     font-size: 12px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 @media (max-width: 560px) {
diff --git a/web/styles/12-tts-setup.css b/web/styles/12-tts-setup.css
index 6fdd075..9503ad5 100644
--- a/web/styles/12-tts-setup.css
+++ b/web/styles/12-tts-setup.css
@@ -11,7 +11,7 @@
     flex-direction: column;
     gap: 16px;
     margin-top: 12px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 12px;
 }
 
@@ -28,7 +28,7 @@
 .anomalous-tts-reminder-text {
     flex: 1 1 260px;
     min-width: 0;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     line-height: 1.5;
 }
 
@@ -66,14 +66,14 @@
     flex: 1;
     min-width: 0;
     overflow: hidden;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .anomalous-tts-setup-meta {
     flex-shrink: 0;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-tts-setup-command {
@@ -82,7 +82,7 @@
     padding: 4px 8px;
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.3);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     overflow-wrap: anywhere;
 }
@@ -104,8 +104,8 @@
     flex-shrink: 0;
     padding: 1px 6px;
     border-radius: 4px;
-    background: rgba(129, 140, 248, 0.12);
-    color: #a5b4fc;
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    color: var(--amb-link);
     font-size: 10.5px;
     white-space: nowrap;
 }
@@ -117,7 +117,7 @@
 }
 
 .anomalous-tts-state.is-ok { color: #34d399; }
-.anomalous-tts-state.is-busy { color: #38bdf8; }
+.anomalous-tts-state.is-busy { color: var(--amb-link); }
 .anomalous-tts-state.is-missing { color: #f59e0b; }
 .anomalous-tts-state.is-error { color: #f87171; cursor: help; }
 
@@ -131,7 +131,7 @@
     padding: 0;
     border: none;
     background: none;
-    color: #a5b4fc;
+    color: var(--amb-link);
     font: inherit;
     font-size: 12px;
     text-decoration: underline;
@@ -172,7 +172,7 @@
     align-items: center;
     gap: 8px;
     min-width: 0;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 12px;
 }
 
@@ -191,7 +191,7 @@
     justify-content: center;
     width: 22px;
     height: 22px;
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 50%;
     font-size: 11px;
     font-weight: 700;
@@ -202,19 +202,19 @@
 }
 
 .anomalous-tts-step.is-current {
-    color: #e0e7ff;
+    color: var(--amb-text-main);
     font-weight: 600;
 }
 
 .anomalous-tts-step.is-current .anomalous-tts-step-no {
     border-color: transparent;
-    background: linear-gradient(135deg, #6366f1, #38bdf8);
-    color: #fff;
-    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
+    background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
+    color: var(--amb-text-main);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--amb-link) 18%, transparent);
 }
 
 .anomalous-tts-step.is-done {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-tts-step.is-done .anomalous-tts-step-no {
@@ -248,10 +248,10 @@
     width: 26px;
     height: 26px;
     padding: 0;
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 50%;
     background: transparent;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font: inherit;
     font-size: 13px;
     font-weight: 700;
@@ -259,8 +259,8 @@
 }
 
 .anomalous-tts-help:hover {
-    border-color: #818cf8;
-    color: #e0e7ff;
+    border-color: var(--amb-link);
+    color: var(--amb-text-main);
 }
 
 .anomalous-tts-choose {
@@ -274,7 +274,7 @@
 
 .anomalous-tts-choose-title {
     margin-bottom: 6px;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 19px;
     font-weight: 700;
     text-align: center;
@@ -285,10 +285,10 @@
     align-items: center;
     gap: 16px;
     padding: 16px 18px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 14px;
     background: rgba(255, 255, 255, 0.03);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font: inherit;
     text-align: left;
     cursor: pointer;
@@ -296,8 +296,8 @@
 }
 
 .anomalous-tts-mode:hover:not(:disabled) {
-    border-color: rgba(129, 140, 248, 0.55);
-    background: rgba(99, 102, 241, 0.1);
+    border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 10%, transparent);
     transform: translateY(-1px);
 }
 
@@ -314,8 +314,8 @@
     width: 48px;
     height: 48px;
     border-radius: 12px;
-    background: rgba(99, 102, 241, 0.16);
-    color: #a5b4fc;
+    background: color-mix(in srgb, var(--amb-link) 16%, transparent);
+    color: var(--amb-link);
 }
 
 .anomalous-tts-mode-words {
@@ -332,13 +332,13 @@
 }
 
 .anomalous-tts-mode-desc {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 12px;
     line-height: 1.5;
 }
 
 .anomalous-tts-mode-go {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 22px;
 }
 
@@ -347,7 +347,7 @@
     flex-direction: column;
     gap: 8px;
     padding: 12px 14px;
-    border: 1px dashed rgba(129, 140, 248, 0.35);
+    border: 1px dashed color-mix(in srgb, var(--amb-link) 35%, transparent);
     border-radius: 12px;
 }
 
@@ -356,7 +356,7 @@
 }
 
 .anomalous-tts-pick-character-title {
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 12px;
     font-weight: 600;
 }
@@ -371,22 +371,22 @@
 
 .anomalous-tts-pick-character-item {
     padding: 5px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 999px;
     background: rgba(0, 0, 0, 0.2);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font: inherit;
     font-size: 12px;
     cursor: pointer;
 }
 
 .anomalous-tts-pick-character-item:hover {
-    border-color: #818cf8;
-    background: rgba(99, 102, 241, 0.16);
+    border-color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 16%, transparent);
 }
 
 .anomalous-tts-toolbar-hint {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11.5px;
 }
 
@@ -403,10 +403,10 @@
     justify-content: center;
     gap: 14px;
     padding: 32px 24px;
-    border: 2px dashed rgba(129, 140, 248, 0.35);
+    border: 2px dashed color-mix(in srgb, var(--amb-link) 35%, transparent);
     border-radius: 18px;
     background:
-        radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.12), transparent 60%),
+        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--amb-link) 12%, transparent), transparent 60%),
         rgba(255, 255, 255, 0.015);
     text-align: center;
     transition: border-color 0.15s ease, background 0.15s ease;
@@ -419,12 +419,12 @@
     width: 72px;
     height: 72px;
     border-radius: 50%;
-    background: rgba(99, 102, 241, 0.16);
-    color: #a5b4fc;
+    background: color-mix(in srgb, var(--amb-link) 16%, transparent);
+    color: var(--amb-link);
 }
 
 .anomalous-tts-hero-title {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 19px;
     font-weight: 700;
 }
@@ -441,21 +441,21 @@
     align-items: baseline;
     gap: 6px;
     padding: 5px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 999px;
     background: rgba(0, 0, 0, 0.25);
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11.5px;
 }
 
 .anomalous-tts-hero-need b {
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-weight: 600;
 }
 
 .anomalous-tts-hero-desc {
     max-width: 540px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 12.5px;
     line-height: 1.7;
 }
@@ -477,19 +477,19 @@
     justify-content: center;
     align-items: baseline;
     gap: 8px;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 12px;
 }
 
 .anomalous-tts-hero-dot {
-    color: #475569;
+    color: var(--amb-text-dim);
 }
 
 /* Suggested folder layout under the batch drop area. */
 .anomalous-tts-layout {
     width: 100%;
     max-width: 540px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 12px;
     text-align: left;
 }
@@ -497,7 +497,7 @@
 .anomalous-tts-layout summary {
     width: fit-content;
     margin: 0 auto;
-    color: #a5b4fc;
+    color: var(--amb-link);
     cursor: pointer;
 }
 
@@ -507,19 +507,19 @@
     gap: 4px 18px;
     margin-top: 10px;
     padding: 10px 14px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 10px;
     background: rgba(0, 0, 0, 0.25);
 }
 
 .anomalous-tts-layout-name {
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-family: ui-monospace, Consolas, monospace;
     white-space: nowrap;
 }
 
 .anomalous-tts-layout-note {
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-tts-layout-foot {
@@ -535,10 +535,10 @@
     display: none;
     align-items: center;
     justify-content: center;
-    border: 2px dashed #818cf8;
+    border: 2px dashed var(--amb-link);
     border-radius: 14px;
     background: rgba(20, 23, 34, 0.88);
-    color: #e0e7ff;
+    color: var(--amb-text-main);
     font-size: 18px;
     font-weight: 700;
     pointer-events: none;
@@ -557,17 +557,17 @@
 
 .anomalous-tts-toolbar-title {
     margin-right: auto;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 13px;
     font-weight: 700;
 }
 
 .anomalous-tts-ghost {
     padding: 6px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.04);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font: inherit;
     font-size: 12px;
     cursor: pointer;
@@ -575,9 +575,9 @@
 }
 
 .anomalous-tts-ghost:hover {
-    border-color: rgba(129, 140, 248, 0.45);
-    background: rgba(99, 102, 241, 0.12);
-    color: #e0e7ff;
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-tts-ghost.is-large {
@@ -598,9 +598,9 @@
     flex-direction: column;
     min-width: 240px;
     padding: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 12px;
-    background: #1b1f2e;
+    background: var(--amb-bg-card);
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
 }
 
@@ -616,7 +616,7 @@
     border: none;
     border-radius: 8px;
     background: none;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font: inherit;
     font-size: 12.5px;
     text-align: left;
@@ -624,16 +624,16 @@
 }
 
 .anomalous-tts-menu-item:hover {
-    background: rgba(99, 102, 241, 0.16);
+    background: color-mix(in srgb, var(--amb-link) 16%, transparent);
 }
 
 .anomalous-tts-menu-hint {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11px;
 }
 
 .anomalous-tts-note {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 11.5px;
 }
 
@@ -650,20 +650,20 @@
 
 .anomalous-tts-card {
     flex-shrink: 0;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.025);
     transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .anomalous-tts-card.is-open {
-    border-color: rgba(129, 140, 248, 0.35);
-    background: rgba(99, 102, 241, 0.04);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 4%, transparent);
 }
 
 .anomalous-tts-card.is-drop-target {
-    border-color: #818cf8;
-    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.35);
+    border-color: var(--amb-link);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--amb-link) 35%, transparent);
 }
 
 .anomalous-tts-card[data-tone="done"] {
@@ -693,7 +693,7 @@
     padding: 0;
     border: none;
     background: none;
-    color: #64748b;
+    color: var(--amb-text-dim);
     cursor: pointer;
 }
 
@@ -719,8 +719,8 @@
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    background: linear-gradient(135deg, #6366f1, #38bdf8);
-    color: #fff;
+    background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
+    color: var(--amb-text-main);
     font-size: 14px;
     font-weight: 700;
 }
@@ -737,7 +737,7 @@
     gap: 8px;
     min-width: 0;
     overflow: hidden;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 14px;
     font-weight: 700;
     text-overflow: ellipsis;
@@ -745,7 +745,7 @@
 }
 
 .anomalous-tts-card-addto {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 12px;
     font-weight: 500;
 }
@@ -758,18 +758,18 @@
     border: 1px solid transparent;
     border-radius: 7px;
     background: transparent;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font: inherit;
     font-size: 14px;
     font-weight: 700;
 }
 
 .anomalous-tts-card-name-input:hover {
-    border-color: rgba(255, 255, 255, 0.1);
+    border-color: var(--amb-border);
 }
 
 .anomalous-tts-card-name-input:focus {
-    border-color: rgba(129, 140, 248, 0.6);
+    border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
     background: rgba(0, 0, 0, 0.25);
     outline: none;
 }
@@ -784,7 +784,7 @@
     padding: 2px 9px;
     border-radius: 999px;
     background: rgba(148, 163, 184, 0.12);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 11px;
     font-weight: 600;
     white-space: nowrap;
@@ -793,11 +793,11 @@
 .anomalous-tts-card[data-tone="ready"] .anomalous-tts-card-pill { background: rgba(52, 211, 153, 0.14); color: #34d399; }
 .anomalous-tts-card[data-tone="needed"] .anomalous-tts-card-pill { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
 .anomalous-tts-card[data-tone="error"] .anomalous-tts-card-pill { background: rgba(248, 113, 113, 0.14); color: #f87171; }
-.anomalous-tts-card[data-tone="busy"] .anomalous-tts-card-pill { background: rgba(56, 189, 248, 0.14); color: #38bdf8; }
+.anomalous-tts-card[data-tone="busy"] .anomalous-tts-card-pill { background: color-mix(in srgb, var(--amb-link) 14%, transparent); color: var(--amb-link); }
 
 .anomalous-tts-card-meta {
     flex-shrink: 0;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11px;
     white-space: nowrap;
 }
@@ -811,7 +811,7 @@
     border: none;
     border-radius: 6px;
     background: none;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 15px;
     line-height: 1;
     cursor: pointer;
@@ -838,10 +838,10 @@
 
 .anomalous-tts-pick {
     padding: 6px 14px;
-    border: 1px solid rgba(129, 140, 248, 0.4);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 40%, transparent);
     border-radius: 8px;
-    background: rgba(99, 102, 241, 0.14);
-    color: #e0e7ff;
+    background: color-mix(in srgb, var(--amb-link) 14%, transparent);
+    color: var(--amb-text-main);
     font: inherit;
     font-size: 12px;
     font-weight: 600;
@@ -849,7 +849,7 @@
 }
 
 .anomalous-tts-pick:hover {
-    background: rgba(99, 102, 241, 0.26);
+    background: color-mix(in srgb, var(--amb-link) 26%, transparent);
 }
 
 .anomalous-tts-card-section {
@@ -860,13 +860,13 @@
 }
 
 .anomalous-tts-card-section-title {
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 12px;
     font-weight: 700;
 }
 
 .anomalous-tts-card-section-hint {
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11px;
 }
 
@@ -882,7 +882,7 @@
 
 /* ---- folded rows: files left out, and the unassigned files of one folder ---- */
 .anomalous-tts-card-fold {
-    border: 1px dashed rgba(255, 255, 255, 0.1);
+    border: 1px dashed var(--amb-border);
     border-radius: 10px;
 }
 
@@ -891,7 +891,7 @@
     align-items: center;
     gap: 10px;
     padding: 7px 10px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 12px;
     cursor: pointer;
 }
@@ -927,7 +927,7 @@
     padding: 5px 8px;
     border: 1px solid transparent;
     border-radius: 8px;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 12.5px;
 }
 
@@ -938,7 +938,7 @@
     justify-content: center;
     width: 22px;
     height: 22px;
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 50%;
     font-size: 11px;
     font-weight: 700;
@@ -968,7 +968,7 @@
 }
 
 .anomalous-tts-check-item.is-done {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-tts-check-item.is-done .anomalous-tts-check-mark {
@@ -978,17 +978,17 @@
 }
 
 .anomalous-tts-check-item.is-next {
-    border-color: rgba(129, 140, 248, 0.5);
-    background: rgba(99, 102, 241, 0.12);
-    color: #e0e7ff;
+    border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    color: var(--amb-text-main);
     font-weight: 600;
 }
 
 .anomalous-tts-check-item.is-next .anomalous-tts-check-mark {
     border-color: transparent;
-    background: linear-gradient(135deg, #6366f1, #38bdf8);
-    color: #fff;
-    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
+    background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
+    color: var(--amb-text-main);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--amb-link) 18%, transparent);
 }
 
 .anomalous-tts-card[data-tone="error"] .anomalous-tts-check-item.is-next {
@@ -1015,7 +1015,7 @@
     align-items: stretch;
     gap: 6px;
     padding: 8px 10px;
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
     border-left: 3px solid rgba(52, 211, 153, 0.7);
     border-radius: 9px;
     background: rgba(0, 0, 0, 0.18);
@@ -1023,12 +1023,12 @@
 
 .anomalous-tts-card-files > .anomalous-tts-file:not(.is-audio) {
     padding: 6px 10px;
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid var(--amb-border);
     border-radius: 9px;
     background: rgba(0, 0, 0, 0.18);
 }
 
-.anomalous-tts-file[data-tone="busy"] { border-left-color: #38bdf8; }
+.anomalous-tts-file[data-tone="busy"] { border-left-color: var(--amb-link); }
 .anomalous-tts-file[data-tone="skip"] { border-left-color: #64748b; opacity: 0.7; }
 .anomalous-tts-file[data-tone="idle"] { border-left-color: #475569; }
 
@@ -1062,30 +1062,30 @@
     width: 26px;
     height: 26px;
     padding: 0 0 0 2px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.04);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 9px;
     cursor: pointer;
 }
 
 .anomalous-tts-file-play:hover {
-    border-color: #818cf8;
-    color: #fff;
+    border-color: var(--amb-link);
+    color: var(--amb-text-main);
 }
 
 /* The clip being listened to: its button is "stop". */
 .anomalous-tts-file.is-playing {
-    border-color: rgba(129, 140, 248, 0.45);
-    background: rgba(129, 140, 248, 0.08);
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent);
 }
 
 .anomalous-tts-file.is-playing .anomalous-tts-file-play {
     padding: 0;
-    border-color: #818cf8;
-    background: #818cf8;
-    color: #fff;
+    border-color: var(--amb-link);
+    background: var(--amb-btn-primary-bg);
+    color: var(--amb-btn-primary-text);
 }
 
 .anomalous-tts-file-play.is-failed {
@@ -1103,7 +1103,7 @@
 
 .anomalous-tts-file-name {
     overflow: hidden;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 12.5px;
     font-weight: 600;
     text-overflow: ellipsis;
@@ -1112,7 +1112,7 @@
 
 .anomalous-tts-file-meta {
     flex-shrink: 0;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11px;
 }
 
@@ -1128,7 +1128,7 @@
     flex-shrink: 1;
     max-width: 180px;
     overflow: hidden;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 11px;
     font-weight: 600;
     text-overflow: ellipsis;
@@ -1139,17 +1139,17 @@
     display: none;
 }
 
-.anomalous-tts-file[data-tone="busy"] .anomalous-tts-file-state { color: #38bdf8; }
+.anomalous-tts-file[data-tone="busy"] .anomalous-tts-file-state { color: var(--amb-link); }
 .anomalous-tts-file[data-tone="merge"] .anomalous-tts-file-state { color: #34d399; }
 .anomalous-tts-file[data-tone="error"] .anomalous-tts-file-state { color: #f87171; }
 
 .anomalous-tts-file-main {
     flex-shrink: 0;
     padding: 3px 10px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 999px;
     background: transparent;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font: inherit;
     font-size: 11px;
     cursor: pointer;
@@ -1185,17 +1185,17 @@
 .anomalous-tts-card-language {
     min-width: 0;
     padding: 5px 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 7px;
     background: rgba(0, 0, 0, 0.25);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font: inherit;
     font-size: 12px;
 }
 
 .anomalous-tts-file input:focus,
 .anomalous-tts-card-language:focus {
-    border-color: rgba(129, 140, 248, 0.6);
+    border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
     outline: none;
 }
 
@@ -1223,8 +1223,8 @@
 }
 
 .anomalous-tts-file-text.dragover {
-    border-color: #818cf8;
-    background: rgba(99, 102, 241, 0.12);
+    border-color: var(--amb-link);
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
 }
 
 .anomalous-tts-file-move {
@@ -1233,7 +1233,7 @@
     padding: 3px 6px;
     border-color: transparent;
     background: transparent;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11px;
     cursor: pointer;
 }
@@ -1242,9 +1242,9 @@
 .anomalous-tts-file:hover .anomalous-tts-file-move,
 .anomalous-tts-file-move:focus,
 .anomalous-tts-card.is-tray .anomalous-tts-file-move {
-    border-color: rgba(255, 255, 255, 0.12);
+    border-color: var(--amb-border-strong);
     background: rgba(0, 0, 0, 0.25);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-tts-card.is-tray .anomalous-tts-file-move {
@@ -1260,7 +1260,7 @@
     justify-content: space-between;
     gap: 10px 20px;
     padding-top: 10px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--amb-border);
 }
 
 .anomalous-tts-card-lines,
@@ -1274,7 +1274,7 @@
 
 .anomalous-tts-card-lines > .anomalous-tts-file {
     padding: 2px 4px 2px 10px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 999px;
     background: rgba(0, 0, 0, 0.2);
 }
@@ -1285,13 +1285,13 @@
 }
 
 .anomalous-tts-card-extra-label {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 12px;
     font-weight: 600;
 }
 
 .anomalous-tts-card-note {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 11.5px;
     line-height: 1.6;
 }
@@ -1359,7 +1359,7 @@
 
 .anomalous-tts-footer-path {
     overflow: hidden;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1400,10 +1400,10 @@
     flex: 1;
     min-width: 0;
     padding: 6px 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.25);
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 12px;
 }
 
@@ -1412,7 +1412,7 @@
     flex-direction: column;
     height: 320px;
     overflow-y: auto;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     background: rgba(0, 0, 0, 0.2);
 }
@@ -1424,9 +1424,9 @@
     gap: 8px;
     padding: 6px 10px;
     border: none;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+    border-bottom: 1px solid var(--amb-border);
     background: none;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font: inherit;
     font-size: 12px;
     text-align: left;
@@ -1435,7 +1435,7 @@
 
 .anomalous-tts-picker-item:hover,
 .anomalous-tts-picker-item:focus-visible {
-    background: rgba(129, 140, 248, 0.1);
+    background: color-mix(in srgb, var(--amb-link) 10%, transparent);
 }
 
 .anomalous-tts-picker-icon {
@@ -1453,7 +1453,7 @@
 
 .anomalous-tts-picker-meta {
     flex-shrink: 0;
-    color: #64748b;
+    color: var(--amb-text-dim);
     font-size: 11px;
 }
 
@@ -1464,7 +1464,7 @@
 /* ---------- Dropping files on the studio ---------- */
 .anomalous-audio-studio-wrapper.is-file-dragover {
     position: relative;
-    outline: 2px dashed rgba(129, 140, 248, 0.6);
+    outline: 2px dashed color-mix(in srgb, var(--amb-link) 60%, transparent);
     outline-offset: -2px;
     border-radius: 12px;
 }
@@ -1477,8 +1477,8 @@
     z-index: 2;
     padding: 6px 14px;
     border-radius: 999px;
-    background: #4f46e5;
-    color: #fff;
+    background: var(--amb-btn-primary-bg);
+    color: var(--amb-btn-primary-text);
     font-size: 12px;
     font-weight: 600;
     white-space: nowrap;
@@ -1496,6 +1496,6 @@
 }
 
 .anomalous-character-voice-card.is-file-target {
-    outline: 2px solid #818cf8;
+    outline: 2px solid var(--amb-link);
     outline-offset: 1px;
 }
diff --git a/web/styles/13-script-director.css b/web/styles/13-script-director.css
index ee5e5b5..d9c5f3d 100644
--- a/web/styles/13-script-director.css
+++ b/web/styles/13-script-director.css
@@ -5,8 +5,8 @@
     right: 12px;
     bottom: 12px;
     width: min(1000px, calc(100% - 24px));
-    background: var(--amb-bg-panel, #1e1e24);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--amb-bg-panel, var(--amb-bg-card));
+    border: 1px solid var(--amb-border);
     border-radius: 12px;
     display: flex;
     flex-direction: column;
@@ -45,7 +45,7 @@
     flex-direction: column;
     gap: 8px;
     padding: 8px 16px 10px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--amb-border);
     background: rgba(0, 0, 0, 0.2);
 }
 
@@ -59,7 +59,7 @@
     max-height: none;
     padding: 12px 14px;
     border-top: none;
-    border-left: 1px solid rgba(255, 255, 255, 0.06);
+    border-left: 1px solid var(--amb-border);
 }
 
 .anomalous-sd-header {
@@ -69,32 +69,32 @@
     gap: 8px;
     padding: 12px 16px;
     background: rgba(0, 0, 0, 0.2);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-sd-title {
     font-size: 14px;
     font-weight: 600;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-sd-subtitle {
     font-size: 11px;
-    color: #64748b;
+    color: var(--amb-text-dim);
     margin-top: 2px;
 }
 
 .anomalous-sd-close-btn {
     background: transparent;
     border: none;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 20px;
     line-height: 1;
     cursor: pointer;
 }
 
 .anomalous-sd-close-btn:hover {
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 /* Character */
@@ -108,7 +108,7 @@
 .anomalous-sd-step {
     font-size: 12px;
     font-weight: 600;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     flex-shrink: 0;
 }
 
@@ -116,9 +116,9 @@
     flex: 1;
     min-width: 0;
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 6px;
-    color: #f1f5f9;
+    color: var(--amb-text-main);
     font-size: 13px;
     padding: 5px 8px;
 }
@@ -127,8 +127,8 @@
     padding: 0 16px 10px;
     font-size: 11px;
     line-height: 1.5;
-    color: #64748b;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    color: var(--amb-text-dim);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-sd-character-hint.is-warning {
@@ -150,10 +150,10 @@
     flex: 1;
     min-height: 160px;
     background: rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 6px;
     padding: 10px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 13px;
     line-height: 1.6;
     resize: none;
@@ -169,8 +169,8 @@
 
 .anomalous-sd-btn {
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #e2e8f0;
+    border: 1px solid var(--amb-border);
+    color: var(--amb-text-main);
     padding: 6px 12px;
     border-radius: 6px;
     cursor: pointer;
@@ -189,24 +189,24 @@
 }
 
 .anomalous-sd-btn.primary {
-    background: rgba(56, 189, 248, 0.1);
-    color: #38bdf8;
-    border-color: rgba(56, 189, 248, 0.25);
+    background: color-mix(in srgb, var(--amb-link) 10%, transparent);
+    color: var(--amb-link);
+    border-color: color-mix(in srgb, var(--amb-link) 25%, transparent);
 }
 
 .anomalous-sd-btn.primary:hover:not(:disabled) {
-    background: rgba(56, 189, 248, 0.2);
+    background: color-mix(in srgb, var(--amb-link) 20%, transparent);
 }
 
 .anomalous-sd-btn.accent {
-    background: rgba(99, 102, 241, 0.18);
-    color: #a5b4fc;
-    border-color: rgba(99, 102, 241, 0.35);
+    background: color-mix(in srgb, var(--amb-link) 18%, transparent);
+    color: var(--amb-link);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
     font-weight: 600;
 }
 
 .anomalous-sd-btn.accent:hover:not(:disabled) {
-    background: rgba(99, 102, 241, 0.3);
+    background: color-mix(in srgb, var(--amb-link) 30%, transparent);
 }
 
 .anomalous-sd-btn.is-success {
@@ -222,14 +222,14 @@
     justify-content: space-between;
     padding: 10px 16px 0;
     font-size: 12px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-sd-link-btn {
     background: none;
     border: none;
     padding: 0;
-    color: #38bdf8;
+    color: var(--amb-link);
     font-size: 12px;
     cursor: pointer;
 }
@@ -256,7 +256,7 @@
 
 .anomalous-sd-line-card {
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     padding: 8px 10px 10px;
     display: flex;
@@ -265,7 +265,7 @@
 }
 
 .anomalous-sd-line-card:focus-within {
-    border-color: rgba(56, 189, 248, 0.35);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
 }
 
 .anomalous-sd-line-head {
@@ -278,7 +278,7 @@
     flex: 1;
     font-size: 11px;
     font-family: monospace;
-    color: #64748b;
+    color: var(--amb-text-dim);
 }
 
 .anomalous-sd-icon-btn {
@@ -288,9 +288,9 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.04);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 14px;
     line-height: 1;
     cursor: pointer;
@@ -298,8 +298,8 @@
 
 .anomalous-sd-icon-btn:hover,
 .anomalous-sd-icon-btn.is-playing {
-    color: #38bdf8;
-    border-color: rgba(56, 189, 248, 0.4);
+    color: var(--amb-link);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
 }
 
 .anomalous-sd-icon-btn.is-danger:hover {
@@ -316,7 +316,7 @@
     border: 1px solid transparent;
     border-radius: 4px;
     padding: 2px 4px;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font: inherit;
     font-size: 13px;
     line-height: 1.6;
@@ -325,7 +325,7 @@
 
 .anomalous-sd-line-text:hover,
 .anomalous-sd-line-text:focus {
-    border-color: rgba(255, 255, 255, 0.1);
+    border-color: var(--amb-border);
     background: rgba(0, 0, 0, 0.2);
     outline: none;
 }
@@ -339,23 +339,23 @@
 .anomalous-sd-emotion-chip {
     padding: 2px 9px;
     border-radius: 999px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     background: rgba(255, 255, 255, 0.04);
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 11px;
     cursor: pointer;
     transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
 
 .anomalous-sd-emotion-chip:hover {
-    color: #e2e8f0;
-    border-color: rgba(129, 140, 248, 0.4);
+    color: var(--amb-text-main);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
 }
 
 .anomalous-sd-emotion-chip.active {
-    background: rgba(99, 102, 241, 0.3);
-    border-color: #818cf8;
-    color: #fff;
+    background: color-mix(in srgb, var(--amb-link) 30%, transparent);
+    border-color: var(--amb-link);
+    color: var(--amb-text-main);
     font-weight: 600;
 }
 
@@ -373,7 +373,7 @@
 
 .anomalous-sd-package-summary {
     font-size: 12px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-sd-package-summary.is-error {
@@ -400,9 +400,9 @@
     gap: 6px;
     padding: 3px 8px;
     border-radius: 6px;
-    border: 1px dashed rgba(129, 140, 248, 0.5);
-    background: rgba(99, 102, 241, 0.08);
-    color: #a5b4fc;
+    border: 1px dashed color-mix(in srgb, var(--amb-link) 50%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent);
+    color: var(--amb-link);
     font-size: 11px;
     cursor: grab;
     user-select: none;
@@ -428,9 +428,9 @@
     margin-right: auto;
     min-width: 0;
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 6px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 12px;
     padding: 5px 6px;
 }
@@ -439,16 +439,16 @@
     align-self: stretch;
     padding: 7px;
     border-radius: 8px;
-    border: 1px dashed rgba(255, 255, 255, 0.15);
+    border: 1px dashed var(--amb-border-strong);
     background: transparent;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 12px;
     cursor: pointer;
 }
 
 .anomalous-sd-add-line:hover {
-    color: #e2e8f0;
-    border-color: rgba(56, 189, 248, 0.45);
+    color: var(--amb-text-main);
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
 }
 
 /* Generate here (GPT-SoVITS): ui_script_run.js */
@@ -471,14 +471,14 @@
     flex-shrink: 0;
     padding: 6px 10px;
     border-radius: 8px;
-    background: rgba(99, 102, 241, 0.06);
-    border: 1px solid rgba(99, 102, 241, 0.18);
+    background: color-mix(in srgb, var(--amb-link) 6%, transparent);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 18%, transparent);
 }
 
 .anomalous-sd-run-settings summary {
     cursor: pointer;
     font-size: 12px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
 }
 
 .anomalous-sd-run-actions {
@@ -491,8 +491,8 @@
 .anomalous-sd-run-select,
 .anomalous-sd-run-number {
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    color: #e2e8f0;
+    border: 1px solid var(--amb-border-strong);
+    color: var(--amb-text-main);
     border-radius: 6px;
     padding: 4px 6px;
     font-size: 12px;
@@ -515,7 +515,7 @@
     justify-content: space-between;
     gap: 6px;
     font-size: 11px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-family: ui-monospace, monospace;
 }
 
@@ -523,18 +523,18 @@
     margin: 6px 0 4px;
     font-size: 11px;
     line-height: 1.5;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-sd-run-status,
 .anomalous-sd-run-saved {
     font-size: 12px;
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     word-break: break-all;
 }
 
 .anomalous-sd-run-saved {
-    color: #94a3b8;
+    color: var(--amb-text-muted);
     font-size: 11px;
 }
 
@@ -554,5 +554,5 @@
 .anomalous-sd-take-no {
     margin-left: 2px;
     font-size: 10px;
-    color: #a5b4fc;
+    color: var(--amb-link);
 }
diff --git a/web/styles/14-version-manager.css b/web/styles/14-version-manager.css
index cd17e0f..0beb2d3 100644
--- a/web/styles/14-version-manager.css
+++ b/web/styles/14-version-manager.css
@@ -8,13 +8,13 @@
     align-items: center;
     gap: 8px;
     padding: 10px 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid var(--amb-border);
     font-size: 12px;
-    color: #94a3b8;
+    color: var(--amb-text-muted);
 }
 
 .anomalous-version-line-value {
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
@@ -22,9 +22,9 @@
     margin-left: auto;
     padding: 4px 10px;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 6px;
-    color: #e2e8f0;
+    color: var(--amb-text-main);
     font-size: 12px;
     cursor: pointer;
     white-space: nowrap;
@@ -56,9 +56,9 @@
     padding: 18px 20px;
     box-sizing: border-box;
     overflow: hidden;
-    background: var(--amb-bg-panel, #1a1a1d);
-    color: var(--amb-text-main, #f3f4f6);
-    border: 1px solid var(--amb-border-hover, rgba(255, 255, 255, 0.16));
+    background: var(--amb-bg-panel, var(--amb-bg-panel));
+    color: var(--amb-text-main, var(--amb-text-main));
+    border: 1px solid var(--amb-border-hover, var(--amb-border-strong));
     border-radius: var(--amb-radius-panel, 10px);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
     font-size: 13px;
@@ -84,7 +84,7 @@
     height: 28px;
     padding: 0;
     background: transparent;
-    color: var(--amb-text-muted, #9ca3af);
+    color: var(--amb-text-muted, var(--amb-text-muted));
     border: 1px solid transparent;
     border-radius: var(--amb-radius-control, 6px);
     font-size: 18px;
@@ -92,8 +92,8 @@
 }
 
 .anomalous-version-close:hover {
-    color: var(--amb-text-main, #f3f4f6);
-    border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.16));
+    color: var(--amb-text-main, var(--amb-text-main));
+    border-color: var(--amb-border-hover, var(--amb-border-strong));
 }
 
 .anomalous-version-current {
@@ -101,8 +101,8 @@
     flex-direction: column;
     gap: 6px;
     padding: 12px 14px;
-    background: var(--amb-bg-card, #202024);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08));
+    background: var(--amb-bg-card, var(--amb-bg-card));
+    border: 1px solid var(--amb-border, var(--amb-border));
     border-radius: var(--amb-radius-card, 8px);
 }
 
@@ -121,7 +121,7 @@
 .anomalous-version-date,
 .anomalous-version-release-name,
 .anomalous-version-empty {
-    color: var(--amb-text-muted, #9ca3af);
+    color: var(--amb-text-muted, var(--amb-text-muted));
 }
 
 .anomalous-version-meta {
@@ -149,8 +149,8 @@
     height: 30px;
     padding: 0 12px;
     background: rgba(255, 255, 255, 0.04);
-    color: var(--amb-text-main, #f3f4f6);
-    border: 1px solid var(--amb-border-hover, rgba(255, 255, 255, 0.16));
+    color: var(--amb-text-main, var(--amb-text-main));
+    border: 1px solid var(--amb-border-hover, var(--amb-border-strong));
     border-radius: var(--amb-radius-control, 6px);
     font-size: 12px;
     cursor: pointer;
@@ -162,8 +162,8 @@
 }
 
 .anomalous-version-action.primary {
-    background: var(--amb-btn-primary-bg, #e5e7eb);
-    color: var(--amb-btn-primary-text, #111827);
+    background: var(--amb-btn-primary-bg, var(--amb-btn-primary-bg));
+    color: var(--amb-btn-primary-text, var(--amb-btn-primary-text));
     border-color: transparent;
     font-weight: 600;
 }
@@ -179,7 +179,7 @@
 
 .anomalous-version-status {
     min-height: 18px;
-    color: var(--amb-text-muted, #9ca3af);
+    color: var(--amb-text-muted, var(--amb-text-muted));
     line-height: 1.45;
     white-space: pre-wrap;
 }
@@ -196,7 +196,7 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    color: var(--amb-text-muted, #9ca3af);
+    color: var(--amb-text-muted, var(--amb-text-muted));
     cursor: pointer;
 }
 
@@ -224,8 +224,8 @@
     flex-direction: column;
     gap: 8px;
     padding: 10px 12px;
-    background: var(--amb-bg-card, #202024);
-    border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08));
+    background: var(--amb-bg-card, var(--amb-bg-card));
+    border: 1px solid var(--amb-border, var(--amb-border));
     border-radius: var(--amb-radius-card, 8px);
 }
 
@@ -264,12 +264,12 @@
 .anomalous-version-badge {
     padding: 2px 7px;
     border-radius: 999px;
-    border: 1px solid var(--amb-border-hover, rgba(255, 255, 255, 0.16));
+    border: 1px solid var(--amb-border-hover, var(--amb-border-strong));
 }
 
 .anomalous-version-badge.is-current {
-    color: var(--amb-btn-primary-text, #111827);
-    background: var(--amb-btn-primary-bg, #e5e7eb);
+    color: var(--amb-btn-primary-text, var(--amb-btn-primary-text));
+    background: var(--amb-btn-primary-bg, var(--amb-btn-primary-bg));
     border-color: transparent;
 }
 
@@ -287,7 +287,7 @@
     padding: 0;
     background: none;
     border: none;
-    color: var(--amb-text-muted, #9ca3af);
+    color: var(--amb-text-muted, var(--amb-text-muted));
     font-size: 12px;
     text-decoration: underline;
     text-underline-offset: 2px;
@@ -295,7 +295,7 @@
 }
 
 .anomalous-version-link:hover {
-    color: var(--amb-text-main, #f3f4f6);
+    color: var(--amb-text-main, var(--amb-text-main));
 }
 
 .anomalous-version-release-footer .anomalous-version-action {
@@ -307,7 +307,7 @@
     margin: 0;
     padding: 8px 10px;
     overflow: auto;
-    background: var(--amb-bg-input, #151517);
+    background: var(--amb-bg-input, var(--amb-bg-page));
     border-radius: var(--amb-radius-control, 6px);
     font: 12px/1.5 system-ui, sans-serif;
     white-space: pre-wrap;
diff --git a/web/styles/15-shell-rail.css b/web/styles/15-shell-rail.css
index c0f163a..6b6e3a2 100644
--- a/web/styles/15-shell-rail.css
+++ b/web/styles/15-shell-rail.css
@@ -15,7 +15,7 @@
     gap: 2px;
     padding: 10px 0;
     box-sizing: border-box;
-    border-right: 1px solid rgba(255, 255, 255, 0.06);
+    border-right: 1px solid var(--amb-border);
     background: rgba(16, 16, 19, 0.92);
 }
 
@@ -24,10 +24,10 @@
     width: 32px;
     height: 32px;
     margin-bottom: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 9px;
     background: linear-gradient(135deg, #3a3a42, #1c1c22);
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
@@ -66,7 +66,7 @@
     border: none;
     border-radius: 9px;
     background: transparent;
-    color: #8b8f98;
+    color: var(--amb-text-muted);
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease;
 }
@@ -88,18 +88,18 @@
 .anomalous-rail-tools button:hover,
 .anomalous-rail-foot button:hover {
     background: rgba(255, 255, 255, 0.06);
-    color: #e5e7eb;
+    color: var(--amb-text-main);
 }
 
 .anomalous-rail-item.active,
 .anomalous-rail-tools button.is-active,
 .anomalous-rail-foot button.is-active {
     background: rgba(255, 255, 255, 0.1);
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-rail-item.active {
-    box-shadow: inset 2px 0 0 #a5b4fc;
+    box-shadow: inset 2px 0 0 var(--amb-link);
 }
 
 .anomalous-rail-label {
@@ -128,7 +128,7 @@
 
 #anomalous-rail #anomalous-materials-btn.active {
     background: rgba(255, 255, 255, 0.1) !important;
-    color: #fff !important;
+    color: var(--amb-text-main) !important;
 }
 
 /* List column: beside the page, or gone when closed. It also steps aside while a workspace
@@ -199,7 +199,7 @@
 
 .anomalous-page-title {
     overflow: hidden;
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     font-size: 0.92em;
     font-weight: 600;
     white-space: nowrap;
@@ -225,7 +225,7 @@
 
 .anomalous-home-title {
     margin: 0;
-    color: #f3f4f6;
+    color: var(--amb-text-main);
     font-size: 1.75em;
     font-weight: 600;
     text-align: center;
@@ -234,7 +234,7 @@
 .anomalous-home-lead {
     max-width: 540px;
     margin: 0 auto;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 0.88em;
     line-height: 1.7;
     text-align: center;
@@ -252,7 +252,7 @@
     align-items: flex-start;
     gap: 12px;
     padding: 14px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.03);
     color: inherit;
@@ -262,7 +262,7 @@
 }
 
 .anomalous-home-card:hover {
-    border-color: rgba(165, 180, 252, 0.35);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
     background: rgba(255, 255, 255, 0.07);
     transform: translateY(-1px);
 }
@@ -274,8 +274,8 @@
     justify-content: center;
     height: 34px;
     border-radius: 9px;
-    background: rgba(165, 180, 252, 0.12);
-    color: #c7d2fe;
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-home-card-icon svg {
@@ -291,13 +291,13 @@
 }
 
 .anomalous-home-card-title {
-    color: #f3f4f6;
+    color: var(--amb-text-main);
     font-size: 0.92em;
     font-weight: 600;
 }
 
 .anomalous-home-card-body {
-    color: #8b8f98;
+    color: var(--amb-text-muted);
     font-size: 0.8em;
     line-height: 1.55;
 }
@@ -309,7 +309,7 @@
     justify-content: center;
     gap: 6px 14px;
     margin-top: 6px;
-    color: #6b7280;
+    color: var(--amb-text-dim);
     font-size: 0.85em;
 }
 
@@ -317,7 +317,7 @@
     padding: 2px 0;
     border: none;
     background: none;
-    color: #a5b4fc;
+    color: var(--amb-link);
     font-size: inherit;
     cursor: pointer;
 }
diff --git a/web/styles/16-activity.css b/web/styles/16-activity.css
index 2455036..bc1fd13 100644
--- a/web/styles/16-activity.css
+++ b/web/styles/16-activity.css
@@ -18,7 +18,7 @@
 
 .anomalous-activity-lead {
     margin: 0;
-    color: #8b8f98;
+    color: var(--amb-text-muted);
     font-size: 0.82em;
     line-height: 1.6;
 }
@@ -40,10 +40,10 @@
 .anomalous-activity-clear,
 .anomalous-activity-locate {
     padding: 4px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 999px;
     background: transparent;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 0.8em;
     cursor: pointer;
 }
@@ -51,14 +51,14 @@
 .anomalous-activity-chip:hover,
 .anomalous-activity-clear:hover,
 .anomalous-activity-locate:hover {
-    border-color: rgba(255, 255, 255, 0.25);
-    color: #e5e7eb;
+    border-color: var(--amb-border-strong);
+    color: var(--amb-text-main);
 }
 
 .anomalous-activity-chip.active {
-    border-color: rgba(165, 180, 252, 0.45);
-    background: rgba(165, 180, 252, 0.12);
-    color: #e0e7ff;
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-activity-list {
@@ -69,14 +69,14 @@
 
 .anomalous-activity-day {
     margin: 10px 0 2px;
-    color: #6b7280;
+    color: var(--amb-text-dim);
     font-size: 0.75em;
     font-weight: 600;
     letter-spacing: 0.4px;
 }
 
 .anomalous-activity-entry {
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--amb-border);
     border-radius: 9px;
     background: rgba(255, 255, 255, 0.025);
 }
@@ -100,7 +100,7 @@
 
 .anomalous-activity-time {
     flex-shrink: 0;
-    color: #6b7280;
+    color: var(--amb-text-dim);
     font-variant-numeric: tabular-nums;
 }
 
@@ -109,13 +109,13 @@
     padding: 0 6px;
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.06);
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 0.85em;
 }
 
 .anomalous-activity-entry.is-canvas .anomalous-activity-source {
-    background: rgba(165, 180, 252, 0.14);
-    color: #c7d2fe;
+    background: color-mix(in srgb, var(--amb-link) 14%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-activity-undo,
@@ -144,7 +144,7 @@
 
 .anomalous-activity-summary {
     overflow: hidden;
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     white-space: nowrap;
     text-overflow: ellipsis;
 }
@@ -166,7 +166,7 @@
     gap: 10px;
     min-width: 0;
     padding: 3px 0;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 0.8em;
 }
 
@@ -185,13 +185,13 @@
 
 .anomalous-activity-more,
 .anomalous-activity-note {
-    color: #6b7280;
+    color: var(--amb-text-dim);
     font-size: 0.78em;
 }
 
 .anomalous-activity-empty {
     padding: 18px 12px;
-    color: #6b7280;
+    color: var(--amb-text-dim);
     font-size: 0.85em;
     text-align: center;
 }
@@ -208,7 +208,7 @@
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 0.85em;
     font-weight: 600;
 }
diff --git a/web/styles/17-model-types.css b/web/styles/17-model-types.css
index 2e662ff..b972b7d 100644
--- a/web/styles/17-model-types.css
+++ b/web/styles/17-model-types.css
@@ -19,10 +19,10 @@
     gap: 6px;
     height: 28px;
     padding: 0 11px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.03);
-    color: #cbd5e1;
+    color: var(--amb-text-soft);
     font-size: 12.5px;
     font-weight: 500;
     white-space: nowrap;
@@ -32,15 +32,15 @@
 
 .anomalous-model-type-chip:hover,
 .anomalous-model-type-crumb:hover {
-    border-color: rgba(165, 180, 252, 0.35);
+    border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
     background: rgba(255, 255, 255, 0.07);
-    color: #f1f5f9;
+    color: var(--amb-text-main);
 }
 
 .anomalous-model-type-chip.is-active {
-    border-color: rgba(165, 180, 252, 0.45);
-    background: rgba(165, 180, 252, 0.14);
-    color: #e0e7ff;
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 14%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-model-type-chip[aria-pressed="true"] {
@@ -53,12 +53,12 @@
 }
 
 .anomalous-model-type-chip.is-active .anomalous-model-type-count {
-    color: #a5b4fc;
+    color: var(--amb-link);
 }
 
 .anomalous-model-type-crumb {
     border-style: dashed;
-    color: #e0e7ff;
+    color: var(--amb-text-main);
 }
 
 .anomalous-model-type-crumb-x {
@@ -73,7 +73,7 @@
 .anomalous-grid-empty {
     grid-column: 1 / -1;
     padding: 20px;
-    color: #fff;
+    color: var(--amb-text-main);
 }
 
 /* Card badges for the exceptions: base model inferred from the file, model not scanned yet.
@@ -87,7 +87,7 @@
 
 .anomalous-card-badge.is-unscanned {
     background: rgba(18, 20, 26, 0.7);
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     text-transform: none;
 }
 
diff --git a/web/styles/18-scan-page.css b/web/styles/18-scan-page.css
index 91a2f0b..329ac34 100644
--- a/web/styles/18-scan-page.css
+++ b/web/styles/18-scan-page.css
@@ -4,7 +4,7 @@
     flex: 1;
     flex-direction: column;
     overflow-y: auto;
-    background: var(--amb-bg-page, #131315);
+    background: var(--amb-bg-page, var(--amb-bg-page));
 }
 
 .anomalous-scan-page {
@@ -19,14 +19,14 @@
 
 .anomalous-scan-title {
     margin: 0;
-    color: #f3f4f6;
+    color: var(--amb-text-main);
     font-size: 1.6em;
     font-weight: 600;
 }
 
 .anomalous-scan-lead {
     margin: 0;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     line-height: 1.6;
 }
 
@@ -58,7 +58,7 @@
     flex-direction: column;
     gap: 4px;
     padding: 14px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.03);
     font: inherit;
@@ -71,24 +71,24 @@ button.anomalous-scan-stat {
 }
 
 button.anomalous-scan-stat:hover {
-    border-color: rgba(165, 180, 252, 0.4);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
     background: rgba(255, 255, 255, 0.06);
 }
 
 .anomalous-scan-stat-value {
-    color: #f3f4f6;
+    color: var(--amb-text-main);
     font-size: 1.5em;
     font-variant-numeric: tabular-nums;
 }
 
 .anomalous-scan-stat-label {
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 12px;
 }
 
 .anomalous-scan-stat.is-ok .anomalous-scan-stat-value { color: #86efac; }
 .anomalous-scan-stat.is-warn .anomalous-scan-stat-value { color: #fcd34d; }
-.anomalous-scan-stat.is-new .anomalous-scan-stat-value { color: #a5b4fc; }
+.anomalous-scan-stat.is-new .anomalous-scan-stat-value { color: var(--amb-link); }
 
 .anomalous-scan-actions {
     display: flex;
@@ -109,8 +109,8 @@ button.anomalous-scan-stat:hover {
 
 .anomalous-scan-primary {
     border: 1px solid transparent;
-    background: #e5e7eb;
-    color: #111827;
+    background: var(--amb-btn-primary-bg);
+    color: var(--amb-btn-primary-text);
 }
 
 .anomalous-scan-primary:hover:not(:disabled) {
@@ -118,13 +118,13 @@ button.anomalous-scan-stat:hover {
 }
 
 .anomalous-scan-secondary {
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     background: rgba(255, 255, 255, 0.04);
-    color: #e5e7eb;
+    color: var(--amb-text-main);
 }
 
 .anomalous-scan-secondary:hover:not(:disabled) {
-    border-color: rgba(165, 180, 252, 0.4);
+    border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
     background: rgba(255, 255, 255, 0.08);
 }
 
@@ -136,7 +136,7 @@ button.anomalous-scan-stat:hover {
 
 .anomalous-scan-muted {
     margin: 0;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 12.5px;
     line-height: 1.6;
 }
@@ -155,20 +155,20 @@ button.anomalous-scan-stat:hover {
 }
 
 .anomalous-scan-advanced {
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.02);
 }
 
 .anomalous-scan-advanced > summary {
     padding: 12px 16px;
-    color: #d1d5db;
+    color: var(--amb-text-soft);
     font-weight: 600;
     cursor: pointer;
 }
 
 .anomalous-scan-advanced[open] > summary {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid var(--amb-border);
 }
 
 .anomalous-scan-advanced > :not(summary) {
@@ -178,7 +178,7 @@ button.anomalous-scan-stat:hover {
 .anomalous-scan-group-title {
     margin-top: 14px;
     margin-bottom: 6px;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.02em;
@@ -189,7 +189,7 @@ button.anomalous-scan-stat:hover {
     align-items: center;
     gap: 8px;
     padding: 4px 0;
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     cursor: pointer;
 }
 
@@ -221,13 +221,13 @@ button.anomalous-scan-stat:hover {
 }
 
 .anomalous-scan-option-copy strong {
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     font-size: 13.5px;
     font-weight: 600;
 }
 
 .anomalous-scan-option-copy small {
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 12px;
     line-height: 1.55;
 }
@@ -239,7 +239,7 @@ button.anomalous-scan-stat:hover {
 .anomalous-scan-advanced > .anomalous-scan-online {
     margin-left: 42px;
     padding-left: 12px;
-    border-left: 2px solid rgba(255, 255, 255, 0.06);
+    border-left: 2px solid var(--amb-border);
 }
 
 .anomalous-scan-online.is-disabled {
@@ -254,7 +254,7 @@ button.anomalous-scan-stat:hover {
     gap: 12px;
     margin: 6px 16px 16px;
     padding-top: 12px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--amb-border);
 }
 
 /* The scan page's cards: the last scan's result and the model lists. */
@@ -263,18 +263,18 @@ button.anomalous-scan-stat:hover {
     flex-direction: column;
     gap: 8px;
     padding: 14px 16px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.02);
 }
 
 .anomalous-scan-card-title {
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 12.5px;
 }
 
 .anomalous-scan-result-counts {
-    color: #f3f4f6;
+    color: var(--amb-text-main);
     font-size: 15px;
     font-weight: 600;
 }
@@ -305,18 +305,18 @@ button.anomalous-scan-stat:hover {
 
 .anomalous-scan-tab {
     padding: 5px 14px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 999px;
     background: transparent;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 13px;
     cursor: pointer;
 }
 
 .anomalous-scan-tab[aria-selected="true"] {
-    border-color: rgba(165, 180, 252, 0.45);
-    background: rgba(165, 180, 252, 0.12);
-    color: #e5e7eb;
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-scan-tab:disabled {
@@ -334,7 +334,7 @@ button.anomalous-scan-stat:hover {
     align-items: center;
     gap: 10px;
     padding: 8px 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-top: 1px solid var(--amb-border);
 }
 
 .anomalous-scan-row-mark {
@@ -346,7 +346,7 @@ button.anomalous-scan-stat:hover {
 
 .anomalous-scan-row.is-matched .anomalous-scan-row-mark { color: #86efac; }
 .anomalous-scan-row.is-failed .anomalous-scan-row-mark { color: #fca5a5; }
-.anomalous-scan-row.is-unchanged .anomalous-scan-row-mark { color: #9ca3af; }
+.anomalous-scan-row.is-unchanged .anomalous-scan-row-mark { color: var(--amb-text-muted); }
 
 .anomalous-scan-row-copy {
     display: flex;
@@ -365,18 +365,18 @@ button.anomalous-scan-stat:hover {
 }
 
 .anomalous-scan-row-name {
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     font-size: 13px;
     font-weight: 600;
 }
 
 .anomalous-scan-row-where {
-    color: #6b7280;
+    color: var(--amb-text-dim);
     font-size: 11.5px;
 }
 
 .anomalous-scan-row-detail {
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 12px;
 }
 
@@ -389,18 +389,18 @@ button.anomalous-scan-stat:hover {
 .anomalous-scan-row-btn,
 .anomalous-scan-more {
     padding: 3px 10px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 999px;
     background: transparent;
-    color: #d1d5db;
+    color: var(--amb-text-soft);
     font-size: 12px;
     cursor: pointer;
 }
 
 .anomalous-scan-row-btn:hover:not(:disabled),
 .anomalous-scan-more:hover {
-    border-color: rgba(165, 180, 252, 0.45);
-    color: #ffffff;
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-scan-row-btn:disabled {
diff --git a/web/styles/19-model-doctor.css b/web/styles/19-model-doctor.css
index 41b3869..5f6a37c 100644
--- a/web/styles/19-model-doctor.css
+++ b/web/styles/19-model-doctor.css
@@ -4,7 +4,7 @@
     flex: 1;
     flex-direction: column;
     overflow-y: auto;
-    background: var(--amb-bg-page, #131315);
+    background: var(--amb-bg-page, var(--amb-bg-page));
 }
 
 .anomalous-scan-stat.is-bad .anomalous-scan-stat-value { color: #fca5a5; }
@@ -15,19 +15,19 @@
 
 .anomalous-doctor-row .anomalous-scan-row-mark { margin-top: 1px; }
 .anomalous-doctor-row.is-ready .anomalous-scan-row-mark { color: #86efac; }
-.anomalous-doctor-row.is-fixable .anomalous-scan-row-mark { color: #a5b4fc; }
+.anomalous-doctor-row.is-fixable .anomalous-scan-row-mark { color: var(--amb-link); }
 .anomalous-doctor-row.is-conflict .anomalous-scan-row-mark,
 .anomalous-doctor-row.is-missing .anomalous-scan-row-mark { color: #fca5a5; }
 
 .anomalous-doctor-why {
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 12px;
     line-height: 1.5;
     overflow-wrap: anywhere;
 }
 
 .anomalous-doctor-proof {
-    color: #6b7280;
+    color: var(--amb-text-dim);
     font-size: 11.5px;
 }
 
@@ -44,9 +44,9 @@
 }
 
 .anomalous-scan-row-btn.is-main {
-    border-color: rgba(165, 180, 252, 0.45);
-    background: rgba(165, 180, 252, 0.12);
-    color: #e5e7eb;
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    background: color-mix(in srgb, var(--amb-link) 12%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-doctor-to-scan {
@@ -73,7 +73,7 @@
     border-radius: 12px;
     background: rgba(24, 24, 27, 0.96);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     font-size: 13px;
     transform: translateX(-50%);
     box-sizing: border-box;
@@ -93,10 +93,10 @@
 
 .anomalous-doctor-banner-btn {
     padding: 5px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.16);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.05);
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     font-size: 12.5px;
     white-space: nowrap;
     cursor: pointer;
@@ -104,8 +104,8 @@
 
 .anomalous-doctor-banner-btn.is-main {
     border-color: transparent;
-    background: #e5e7eb;
-    color: #111827;
+    background: var(--amb-btn-primary-bg);
+    color: var(--amb-btn-primary-text);
     font-weight: 600;
 }
 
@@ -117,13 +117,13 @@
     border: none;
     border-radius: 6px;
     background: transparent;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     cursor: pointer;
 }
 
 .anomalous-doctor-banner-close:hover {
     background: rgba(255, 255, 255, 0.08);
-    color: #ffffff;
+    color: var(--amb-text-main);
 }
 
 @media (max-width: 640px) {
diff --git a/web/styles/20-current-node.css b/web/styles/20-current-node.css
index e29175b..ecbe8be 100644
--- a/web/styles/20-current-node.css
+++ b/web/styles/20-current-node.css
@@ -34,25 +34,25 @@
 
 .anomalous-node-section-btn {
     padding: 4px 10px;
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--amb-border-strong);
     border-radius: 999px;
     background: transparent;
-    color: #d1d5db;
+    color: var(--amb-text-soft);
     font-size: 11.5px;
     cursor: pointer;
 }
 
 .anomalous-node-section-btn:hover {
-    border-color: rgba(165, 180, 252, 0.45);
-    color: #ffffff;
+    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
+    color: var(--amb-text-main);
 }
 
 .anomalous-node-param-search {
     padding: 7px 10px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--amb-border);
     border-radius: 8px;
     background: rgba(0, 0, 0, 0.25);
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     font-size: 12px;
 }
 
@@ -67,7 +67,7 @@
     flex-direction: column;
     gap: 6px;
     padding: 10px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.035);
 }
@@ -81,7 +81,7 @@
 
 .anomalous-node-param-name {
     overflow: hidden;
-    color: #f3f4f6;
+    color: var(--amb-text-main);
     font-size: 12.5px;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -92,7 +92,7 @@
     padding: 1px 7px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.06);
-    color: #c4b5fd;
+    color: var(--amb-link);
     font-size: 10px;
 }
 
@@ -107,9 +107,9 @@
 
 .anomalous-node-param-sources span {
     padding: 1px 7px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 999px;
-    color: #9ca3af;
+    color: var(--amb-text-muted);
     font-size: 10px;
 }
 
@@ -120,7 +120,7 @@
     margin: 0;
     padding: 0;
     list-style: none;
-    color: #d1d5db;
+    color: var(--amb-text-soft);
     font-size: 11.5px;
 }
 
@@ -144,19 +144,19 @@
 .anomalous-node-param-apply {
     align-self: flex-end;
     padding: 5px 12px;
-    border: 1px solid rgba(165, 180, 252, 0.45);
+    border: 1px solid color-mix(in srgb, var(--amb-link) 45%, transparent);
     border-radius: 7px;
-    background: rgba(165, 180, 252, 0.14);
-    color: #e5e7eb;
+    background: color-mix(in srgb, var(--amb-link) 14%, transparent);
+    color: var(--amb-text-main);
     font-size: 11.5px;
     font-weight: 600;
     cursor: pointer;
 }
 
 .anomalous-node-param-apply:disabled {
-    border-color: rgba(255, 255, 255, 0.08);
+    border-color: var(--amb-border);
     background: transparent;
-    color: #6b7280;
+    color: var(--amb-text-dim);
     cursor: default;
 }
 
@@ -166,15 +166,15 @@
     flex-direction: column;
     gap: 6px;
     padding: 10px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--amb-border);
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.035);
 }
 
-.anomalous-node-param-role.is-plain { color: #d1d5db; }
+.anomalous-node-param-role.is-plain { color: var(--amb-text-soft); }
 
 .anomalous-node-prompt-name {
-    color: #6b7280;
+    color: var(--amb-text-dim);
     font-size: 10.5px;
 }
 
@@ -183,7 +183,7 @@
     display: -webkit-box;
     margin: 0;
     overflow: hidden;
-    color: #e5e7eb;
+    color: var(--amb-text-main);
     font-size: 12px;
     line-height: 1.5;
     overflow-wrap: anywhere;
@@ -191,13 +191,13 @@
     -webkit-line-clamp: 4;
 }
 
-.anomalous-node-prompt-text.is-empty { color: #6b7280; }
+.anomalous-node-prompt-text.is-empty { color: var(--amb-text-dim); }
 
 .anomalous-node-prompt-note {
     padding: 6px 8px;
     border-radius: 6px;
-    background: rgba(165, 180, 252, 0.08);
-    color: #c7d2fe;
+    background: color-mix(in srgb, var(--amb-link) 8%, transparent);
+    color: var(--amb-text-main);
     -webkit-line-clamp: 8;
 }