style(ui): eliminate cool-blue cast and switch to neutral dark charcoal obsidian palette

2026-09-11 01:01:43 +08:00
parent 31d8b3737c
commit bd4abead45
6 changed files with 179 additions and 187 deletions
@@ -88,12 +88,15 @@ DOM or live LiteGraph state.
  (5) Settings Hub (`#anomalous-global-settings-btn`): Precision 8-tooth mechanical engineering gear with elevated popover (`#anomalous-settings-hub-modal`) mounted directly to container with `z-index: 999999` and dynamic responsive offset; hosts a clean 3-way Display Mode segmented controller (`#anomalous-view-mode-container` for Standard, Compact, and Aesthetic modes), UI scale controls, dynamic background atmosphere controls, folder manager, and language toggles;
  (6) Models & Floating Trigger: 4D Anomalous Hypercube Core SVG;
  adhering to a "low-stimulus idle, subtle-illumination on hover" philosophy where icons use calm `currentColor` in idle state and gently illuminate on interaction;
-  critical tool workbenches (`#anomalous-doctor-panel`, `#anomalous-assistant-panel`) strictly enforce 100% opaque, solid backgrounds (`background: var(--amb-bg-page, #0b0d13) !important`) to eliminate background distraction during diagnostics;
+  critical tool workbenches (`#anomalous-doctor-panel`, `#anomalous-assistant-panel`) strictly enforce 100% opaque, solid backgrounds (`background: var(--amb-bg-page, #131315) !important`) to eliminate background distraction during diagnostics;
+  the UI palette strictly adheres to a true neutral dark charcoal / obsidian studio aesthetic (`#131315`, `#1a1a1d`, `#202024`, `#28282d`) with zero cool-blue/navy cast, matching ComfyUI, Blender, and DaVinci Resolve workstation standards;
+  the sidebar action bar's circular astrological runic compass watermark (`#anomalous-sidebar-actions::before`) is completely disabled (`display: none !important`), and any backdrop textures are desaturated with `grayscale(100%)` to prevent blue color bleeding;
+  all primary action highlights, scan wizard controls, and switches use titanium white (`#e5e7eb` / `#ffffff`) with warm studio amber (`#f59e0b`) accents instead of cold blue/cyan;
  the modal adopts a disciplined "workshop / archive" aesthetic: removing exaggerated `clip-path` chamfers in favor of clean 8px architectural engineering geometry (`border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1)`);
  supports 3 unified Display Modes sharing identical DOM structure and UX logic:
  - Standard Mode (标准模式, default): Balanced 200px cards, 340px height, pure solid obsidian canvas with zero wallpaper distraction;
  - Compact Mode (高密度模式, power users): 140px min-width, 220px card height, 10px gaps, optimized for high-density scanning;
-  - Aesthetic Mode (沉浸模式): Subtle 12% ambient archive watermark with frosted glass borders;
+  - Aesthetic Mode (沉浸模式): Subtle 8% grayscale ambient archive watermark with frosted glass borders;
  cards feature unified 8px geometry (`border-radius: 8px`), restrained elevation (`translateY(-2px)`, `scale(1.02)`), spatial depth shadows (`0 4px 14px rgba(0,0,0,0.35)`),
  seamless docking fallbacks, and a micro-floating capsule tooltip system
  (`.anomalous-tooltip-target`) providing unambiguous, bilingual action semantics across all vector tools.
@@ -661,7 +661,7 @@ export const i18n = {
        sidebarOfflineDesc: '不消耗任何网络。仅通过本地张量计算极速提取模型内的基础元数据，速度极快但信息较基础。',
        sidebarStep2: 'Step 2. 规范命名',
        sidebarNormalize: '自动规范命名',
-        sidebarNormalizeDesc: '强迫症福音。自动将杂乱无章的模型文件名重命名为 <b>模型名_版本名.safetensors</b> 的标准格式。<br><span style="color:#8AB4F8; display:inline-block; margin-top:4px;">例如：</span> <span style="color:#ff6b6b; text-decoration:line-through;">model_final(1).safetensors</span> ➔ <span style="color:#28a745;">Beautiful_Mix_V1.0.safetensors</span>',
+        sidebarNormalizeDesc: '强迫症福音。自动将杂乱无章的模型文件名重命名为 <b>模型名_版本名.safetensors</b> 的标准格式。<br><span style="color:#f59e0b; display:inline-block; margin-top:4px;">例如：</span> <span style="color:#ff6b6b; text-decoration:line-through;">model_final(1).safetensors</span> ➔ <span style="color:#28a745;">Beautiful_Mix_V1.0.safetensors</span>',
        sidebarVirtualRename: '虚拟重命名 (安全推荐)',
        sidebarVirtualRenameDesc: '仅将标准名称注入浏览器插件中，不修改硬盘上的真实文件名，随时可无损还原。',
        sidebarPhysicalRename: '物理重命名',
@@ -1727,7 +1727,7 @@ export const i18n = {
        sidebarOfflineDesc: 'No network required. Extremely fast extraction of basic metadata via local tensor computation, but info is limited.',
        sidebarStep2: 'Step 2. Normalize Naming',
        sidebarNormalize: 'Auto-Normalize Naming',
-        sidebarNormalizeDesc: 'Automatically rename messy model files to the official standard format: <b>ModelName_VersionName.safetensors</b>.<br><span style="color:#8AB4F8; display:inline-block; margin-top:4px;">e.g. </span> <span style="color:#ff6b6b; text-decoration:line-through;">model_final(1).safetensors</span> ➔ <span style="color:#28a745;">Beautiful_Mix_V1.0.safetensors</span>',
+        sidebarNormalizeDesc: 'Automatically rename messy model files to the official standard format: <b>ModelName_VersionName.safetensors</b>.<br><span style="color:#f59e0b; display:inline-block; margin-top:4px;">e.g. </span> <span style="color:#ff6b6b; text-decoration:line-through;">model_final(1).safetensors</span> ➔ <span style="color:#28a745;">Beautiful_Mix_V1.0.safetensors</span>',
        sidebarVirtualRename: 'Virtual Rename (Safe)',
        sidebarVirtualRenameDesc: 'Inject standard names into the browser only, without modifying actual files on disk. Safely reversible.',
        sidebarPhysicalRename: 'Physical Rename',
@@ -149,12 +149,12 @@ export function showDetail(model) {

        if (isFromDoctor) {
            backBtn.textContent = t('detailBackDoctor');
-            backBtn.style.background = '#8AB4F8';
-            backBtn.style.color = '#000';
+            backBtn.style.background = '#e5e7eb';
+            backBtn.style.color = '#111827';
        } else if (isFromAssistant) {
            backBtn.textContent = t('detailBackAssistant');
-            backBtn.style.background = '#8AB4F8';
-            backBtn.style.color = '#000';
+            backBtn.style.background = '#e5e7eb';
+            backBtn.style.color = '#111827';
        } else {
            backBtn.innerHTML = this.historyStack.length > 0 ? t('backToPrev') : t('back');
            backBtn.style.background = '#444';
@@ -425,7 +425,8 @@ export function showDetail(model) {
            cBtn.innerHTML = '🌐 Civitai';
            cBtn.style.marginLeft = 'auto';
            cBtn.style.padding = '4px 8px';
-            cBtn.style.background = '#1a73e8';
+            cBtn.style.background = 'rgba(255, 255, 255, 0.1)';
+            cBtn.style.border = '1px solid rgba(255, 255, 255, 0.15)';
            cBtn.style.color = '#fff';
            cBtn.style.textDecoration = 'none';
            cBtn.style.borderRadius = '4px';
@@ -538,7 +539,7 @@ export function showDetail(model) {
        galleryBtn.style.background = '#2a2b2f';
        galleryBtn.style.border = '1px solid #3c4043';
        galleryBtn.textContent = t('detailGeneratedGallery');
-        galleryBtn.onmouseover = () => { galleryBtn.style.background = '#3c4043'; galleryBtn.style.borderColor = '#8ab4f8'; };
+        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.onclick = () => {
@@ -861,7 +862,7 @@ export function showEditModal(model) {
        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.color = '#8ab4f8';
+        galleryBtn.style.color = '#e5e7eb';
        galleryBtn.style.border = '1px solid #5f6368';
        galleryBtn.style.borderRadius = '6px';
        galleryBtn.style.cursor = 'pointer';
@@ -878,7 +879,7 @@ export function showEditModal(model) {
        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.color = '#8ab4f8';
+        localBtn.style.color = '#e5e7eb';
        localBtn.style.border = '1px solid #5f6368';
        localBtn.style.borderRadius = '6px';
        localBtn.style.cursor = 'pointer';
@@ -966,7 +967,7 @@ export function showEditModal(model) {
        nameInput.placeholder = t('detailCustomNamePlaceholder');
        nameInput.value = (model.metadata && model.metadata.custom_name) ? model.metadata.custom_name : '';
        nameInput.style.cssText = inputStyle;
-        nameInput.onfocus = () => nameInput.style.borderColor = '#8ab4f8';
+        nameInput.onfocus = () => nameInput.style.borderColor = 'rgba(255, 255, 255, 0.4)';
        nameInput.onblur = () => nameInput.style.borderColor = '#5f6368';

        const notesInput = document.createElement('textarea');
@@ -1099,7 +1100,7 @@ export function showEditModal(model) {
        cancelBtn.textContent = t('detailCancel');
        cancelBtn.style.padding = '8px 16px';
        cancelBtn.style.background = 'transparent';
-        cancelBtn.style.color = '#8ab4f8';
+        cancelBtn.style.color = '#9ca3af';
        cancelBtn.style.border = 'none';
        cancelBtn.style.borderRadius = '4px';
        cancelBtn.style.cursor = 'pointer';
@@ -1112,8 +1113,8 @@ export function showEditModal(model) {
        const saveBtn = document.createElement('button');
        saveBtn.textContent = t('detailSaveChanges');
        saveBtn.style.padding = '8px 24px';
-        saveBtn.style.background = '#8ab4f8';
-        saveBtn.style.color = '#202124';
+        saveBtn.style.background = '#e5e7eb';
+        saveBtn.style.color = '#111827';
        saveBtn.style.border = 'none';
        saveBtn.style.borderRadius = '4px';
        saveBtn.style.cursor = 'pointer';
@@ -1299,9 +1300,9 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
            const b = document.createElement('button');
            b.innerText = text;
            b.style.padding = '6px 16px';
-            b.style.background = primary ? 'rgba(138,180,248,0.15)' : 'rgba(255,255,255,0.04)';
-            b.style.color = primary ? '#8ab4f8' : '#e8eaed';
-            b.style.border = primary ? '1px solid rgba(138,180,248,0.2)' : '1px solid #5f6368';
+            b.style.background = primary ? 'rgba(255, 255, 255, 0.12)' : 'rgba(255,255,255,0.04)';
+            b.style.color = primary ? '#ffffff' : '#e8eaed';
+            b.style.border = primary ? '1px solid rgba(255, 255, 255, 0.25)' : '1px solid #5f6368';
            b.style.borderRadius = '4px';
            b.style.cursor = 'pointer';
            b.style.fontSize = '14px';
@@ -1331,7 +1332,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
            if (total > 0) {
                const countLabel = document.createElement('span');
                countLabel.textContent = total;
-                countLabel.style.color = '#8ab4f8';
+                countLabel.style.color = '#e5e7eb';
                countLabel.style.fontSize = '16px';
                countLabel.style.fontWeight = '500';
                summaryText.replaceChildren(
@@ -1382,16 +1383,16 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
                if (isChecked) {

                
-                    card.style.border = '2px solid #8ab4f8';
+                    card.style.border = '2px solid #ffffff';

                
-                    card.style.background = 'rgba(138,180,248,0.2)';
+                    card.style.background = 'rgba(255, 255, 255, 0.1)';

                
-                    cbWrapper.style.background = '#8ab4f8';
+                    cbWrapper.style.background = '#ffffff';

                
-                    cbWrapper.style.border = '2px solid #8ab4f8';
+                    cbWrapper.style.border = '2px solid #ffffff';

                
                    cbWrapper.querySelector('span').style.color = '#202124';
@@ -1508,29 +1509,29 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
        cancelBtn.textContent = t('detailCancel');
        cancelBtn.style.padding = '8px 24px';
        cancelBtn.style.background = 'transparent';
-        cancelBtn.style.color = '#8ab4f8';
+        cancelBtn.style.color = '#9ca3af';
        cancelBtn.style.border = 'none';
        cancelBtn.style.borderRadius = '4px';
        cancelBtn.style.cursor = 'pointer';
        cancelBtn.style.fontWeight = '500';
        cancelBtn.style.fontSize = '14px';
-        cancelBtn.onmouseover = () => cancelBtn.style.background = 'rgba(138,180,248,0.1)';
+        cancelBtn.onmouseover = () => cancelBtn.style.background = 'rgba(255, 255, 255, 0.08)';
        cancelBtn.onmouseout = () => cancelBtn.style.background = 'transparent';
        cancelBtn.onclick = () => document.body.removeChild(modal);

        const confirmBtn = document.createElement('button');
        confirmBtn.textContent = t('detailConfirm');
        confirmBtn.style.padding = '8px 24px';
-        confirmBtn.style.background = '#8ab4f8';
-        confirmBtn.style.color = '#202124'; // dark text on bright accent button
+        confirmBtn.style.background = '#e5e7eb';
+        confirmBtn.style.color = '#111827'; // dark text on bright accent button
        confirmBtn.style.border = 'none';
        confirmBtn.style.borderRadius = '4px';
        confirmBtn.style.cursor = 'pointer';
        confirmBtn.style.fontWeight = '600';
        confirmBtn.style.fontSize = '14px';
        confirmBtn.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)';
-        confirmBtn.onmouseover = () => { confirmBtn.style.background = '#aecbfa'; confirmBtn.style.boxShadow = '0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15)'; };
-        confirmBtn.onmouseout = () => { confirmBtn.style.background = '#8ab4f8'; confirmBtn.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)'; };
+        confirmBtn.onmouseover = () => { confirmBtn.style.background = '#ffffff'; confirmBtn.style.boxShadow = '0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15)'; };
+        confirmBtn.onmouseout = () => { confirmBtn.style.background = '#e5e7eb'; confirmBtn.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)'; };
        confirmBtn.onclick = () => {
            onConfirm(localSelection);
            document.body.removeChild(modal);
@@ -1825,8 +1826,8 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
                    d.style.color = '#9aa0a6';
                    d.style.fontWeight = '400';
                });
-                fBtn.style.background = 'rgba(138,180,248,0.15)';
-                fBtn.style.color = '#8ab4f8';
+                fBtn.style.background = 'rgba(255, 255, 255, 0.1)';
+                fBtn.style.color = '#ffffff';
                fBtn.style.fontWeight = '500';
                
                currentFolderKey = folderKey;
@@ -1886,8 +1887,8 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
                    
                    const badge = document.createElement('div');
                    badge.className = 'selection-badge';
-                    badge.style.background = '#8ab4f8';
-                    badge.style.color = '#202124';
+                    badge.style.background = '#e5e7eb';
+                    badge.style.color = '#111827';
                    badge.style.fontSize = '11px';
                    badge.style.fontWeight = '500';
                    badge.style.padding = '1px 6px';
@@ -102,10 +102,10 @@ export function initDoctorPanel() {

        const refreshBtn = document.createElement('button');
        refreshBtn.textContent = t('doctorRefresh');
-        refreshBtn.style.cssText = 'background:rgba(138,180,248,0.1);border:1px solid rgba(138,180,248,0.3);color:#8AB4F8;font-size:12px;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all 0.2s; font-weight:600;';
+        refreshBtn.style.cssText = 'background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);color:#e5e7eb;font-size:12px;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all 0.2s; font-weight:600;';
        refreshBtn.title = t('doctorRefreshTitle');
-        refreshBtn.onmouseover = () => { refreshBtn.style.background = 'rgba(138,180,248,0.2)'; };
-        refreshBtn.onmouseout = () => { refreshBtn.style.background = 'rgba(138,180,248,0.1)'; };
+        refreshBtn.onmouseover = () => { refreshBtn.style.background = 'rgba(255,255,255,0.12)'; };
+        refreshBtn.onmouseout = () => { refreshBtn.style.background = 'rgba(255,255,255,0.06)'; };
        refreshBtn.onclick = async () => {
            refreshBtn.disabled = true;
            refreshBtn.style.opacity = '0.5';
@@ -268,8 +268,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(138,180,248,0.16);border-radius:14px;background:linear-gradient(135deg,rgba(48,58,86,0.72),rgba(20,22,31,0.92));display:flex;align-items:center;gap:12px;flex-shrink:0;box-shadow:0 12px 30px rgba(0,0,0,0.18);';
-        titleBar.innerHTML = `<span style="width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;background:linear-gradient(135deg,#8ab4f8,#7c4dff);box-shadow:0 6px 16px rgba(66,133,244,0.3);">🤖</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:#8ab4f8;">${t('assistantSelectedNode')}</span><span class="ast-title" style="font-weight:750;color:#fff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span></span><span class="ast-type" style="font-size:10px;color:#c9d6ff;margin-left:auto;padding:5px 8px;border-radius:999px;border:1px solid rgba(138,180,248,0.24);background:rgba(138,180,248,0.08);max-width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span>`;
+        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.querySelector('.ast-title').textContent = node.title || node.type || 'Node';
        titleBar.querySelector('.ast-type').textContent = node.type || '';

@@ -639,9 +639,9 @@ for (const data of missingNodesData) {
            if (!isHealthy) {
                const deepScanBtn = document.createElement('button');
                deepScanBtn.textContent = t('doctorDeepHashScan');
-                deepScanBtn.style.cssText = 'padding:8px 16px; background:#1a73e8; color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:600; font-size:12px; transition:background 0.2s;';
-                deepScanBtn.onmouseover = () => deepScanBtn.style.background = '#1557b0';
-                deepScanBtn.onmouseout = () => deepScanBtn.style.background = '#1a73e8';
+                deepScanBtn.style.cssText = 'padding:8px 16px; background:#e5e7eb; color:#111827; border:none; border-radius:6px; cursor:pointer; font-weight:600; font-size:12px; transition:background 0.2s;';
+                deepScanBtn.onmouseover = () => deepScanBtn.style.background = '#ffffff';
+                deepScanBtn.onmouseout = () => deepScanBtn.style.background = '#e5e7eb';
                deepScanBtn.onclick = async () => {
                    deepScanBtn.textContent = t('doctorScanStarting');
                    deepScanBtn.disabled = true;
@@ -817,7 +817,7 @@ function openHashDetailDialog(node, widget, val) {
    const metaSection = document.createElement('div');
    metaSection.style.cssText = 'display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,0.03);padding:12px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.05);';
    metaSection.innerHTML = `
-        <div style="font-size:11px;color:#8ab4f8;font-weight:600;">#${escapeHtml(String(node.id))} · ${escapeHtml(node.title || node.type || 'Node')} · ${escapeHtml(widget?.name || '')}</div>
+        <div style="font-size:11px;color:#e5e7eb;font-weight:600;">#${escapeHtml(String(node.id))} · ${escapeHtml(node.title || node.type || 'Node')} · ${escapeHtml(widget?.name || '')}</div>
        <div style="font-size:13px;font-weight:600;word-break:break-all;color:#e8eaed;">${escapeHtml(val)}</div>
    `;
    modal.appendChild(metaSection);
@@ -869,14 +869,14 @@ function openHashDetailDialog(node, widget, val) {
        return card;
    };

-    modal.appendChild(renderHashCard(t('doctorWorkflowHash'), workflowHash, workflowSize, '#8ab4f8', true));
+    modal.appendChild(renderHashCard(t('doctorWorkflowHash'), workflowHash, workflowSize, '#e5e7eb', true));
    modal.appendChild(renderHashCard(t('doctorLocalHash'), localHash, localSize, '#81c995', false));

    const footer = document.createElement('div');
    footer.style.cssText = 'display:flex;justify-content:flex-end;margin-top:4px;';
    const okBtn = document.createElement('button');
    okBtn.textContent = 'OK';
-    okBtn.style.cssText = 'padding:8px 24px;background:#1a73e8;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:12px;';
+    okBtn.style.cssText = 'padding:8px 24px;background:#e5e7eb;color:#111827;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:12px;';
    okBtn.onclick = () => overlay.remove();
    footer.appendChild(okBtn);
    modal.appendChild(footer);
@@ -1113,8 +1113,8 @@ 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(138,180,248,0.3);color:#8AB4F8;font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer;transition:all 0.2s;';
-                    viewAllBtn.onmouseover = () => { viewAllBtn.style.background = 'rgba(138,180,248,0.1)'; };
+                    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.onmouseover = () => { viewAllBtn.style.background = 'rgba(255,255,255,0.1)'; };
                    viewAllBtn.onmouseout = () => { viewAllBtn.style.background = 'transparent'; };
                    viewAllBtn.onclick = () => this.showGeneratedGallery(model);
                    sectionHeader.appendChild(viewAllBtn);
@@ -1643,7 +1643,7 @@ if (!isHealthy) {
                            missingNodes++;
                            const nodeTitle = document.createElement('div');
                            nodeTitle.textContent = `${t('doctorNodeLabel')}: ${node.title || node.type}`;
-                            nodeTitle.style.color = '#8AB4F8';
+                            nodeTitle.style.color = '#e5e7eb';
                            nodeTitle.style.fontWeight = 'bold';
                            nodeTitle.style.marginTop = '10px';
                            content.appendChild(nodeTitle);
@@ -531,8 +531,8 @@ export function createDOM() {
            const createChoiceCard = (id, icon, titleKey, descKey, isSelected) => {
                const card = document.createElement('div');
                card.style.flex = '1';
-                card.style.background = isSelected ? 'rgba(138, 180, 248, 0.15)' : 'rgba(255, 255, 255, 0.05)';
-                card.style.border = `2px solid ${isSelected ? '#8AB4F8' : 'transparent'}`;
+                card.style.background = isSelected ? 'rgba(255, 255, 255, 0.1)' : 'rgba(255, 255, 255, 0.04)';
+                card.style.border = `2px solid ${isSelected ? '#e5e7eb' : 'transparent'}`;
                card.style.borderRadius = '8px';
                card.style.padding = '16px';
                card.style.cursor = 'pointer';
@@ -546,7 +546,7 @@ export function createDOM() {
                    if (!isSelected) card.style.background = 'rgba(255, 255, 255, 0.08)';
                };
                card.onmouseout = () => {
-                    if (!isSelected) card.style.background = 'rgba(255, 255, 255, 0.05)';
+                    if (!isSelected) card.style.background = 'rgba(255, 255, 255, 0.04)';
                };

                const topRow = document.createElement('div');
@@ -562,7 +562,7 @@ export function createDOM() {
                tTitle.textContent = t(titleKey);
                tTitle.style.fontWeight = '500';
                tTitle.style.fontSize = '1.05em';
-                tTitle.style.color = isSelected ? '#8AB4F8' : '#fff';
+                tTitle.style.color = isSelected ? '#ffffff' : '#e5e7eb';

                topRow.appendChild(iconDiv);
                topRow.appendChild(tTitle);
@@ -570,7 +570,7 @@ export function createDOM() {
                const tDesc = document.createElement('div');
                tDesc.textContent = t(descKey);
                tDesc.style.fontSize = '0.85em';
-                tDesc.style.color = '#bbb';
+                tDesc.style.color = '#9ca3af';
                tDesc.style.lineHeight = '1.5';

                card.appendChild(topRow);
@@ -586,7 +586,7 @@ export function createDOM() {
                const sec0Title = document.createElement('div');
                sec0Title.textContent = t('sidebarStep0');
                sec0Title.style.fontWeight = '500';
-                sec0Title.style.color = '#8AB4F8';
+                sec0Title.style.color = '#e5e7eb';
                sec0Title.style.marginBottom = '12px';
                sec0Title.style.fontSize = '0.95em';
                section0.appendChild(sec0Title);
@@ -603,10 +603,10 @@ export function createDOM() {
                
                const openSelectorBtn = document.createElement('button');
                openSelectorBtn.textContent = t('sidebarOpenSelector');
-                openSelectorBtn.style.cssText = 'width:100%;padding:12px;background:#8AB4F8;color:#1E1E1E;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:1.05em;box-shadow:0 2px 4px rgba(0,0,0,0.2);';
+                openSelectorBtn.style.cssText = 'width:100%;padding:12px;background:#e5e7eb;color:#111;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:1.05em;box-shadow:0 2px 4px rgba(0,0,0,0.2);';
                
                const selectedCountSpan = document.createElement('div');
-                selectedCountSpan.style.cssText = 'text-align:center;color:#8AB4F8;margin-top:8px;font-size:0.9em;';
+                selectedCountSpan.style.cssText = 'text-align:center;color:#e5e7eb;margin-top:8px;font-size:0.9em;';
                selectedCountSpan.textContent = t('sidebarSelectedZero');
                
                const updateSelectedCount = () => {
@@ -659,7 +659,7 @@ export function createDOM() {
            const sec1Title = document.createElement('div');
            sec1Title.textContent = t('sidebarStep1');
            sec1Title.style.fontWeight = '500';
-            sec1Title.style.color = '#8AB4F8';
+            sec1Title.style.color = '#e5e7eb';
            sec1Title.style.marginBottom = '12px';
            sec1Title.style.fontSize = '0.95em';
            section1.appendChild(sec1Title);
@@ -696,7 +696,7 @@ export function createDOM() {
                track.style.width = '36px';
                track.style.height = '14px';
                track.style.borderRadius = '7px';
-                track.style.background = initialState ? 'rgba(138, 180, 248, 0.5)' : 'rgba(255,255,255,0.3)';
+                track.style.background = initialState ? 'rgba(255, 255, 255, 0.45)' : 'rgba(255,255,255,0.15)';
                track.style.position = 'relative';
                track.style.cursor = 'pointer';
                track.style.transition = 'background 0.3s';
@@ -707,7 +707,7 @@ export function createDOM() {
                thumb.style.width = '20px';
                thumb.style.height = '20px';
                thumb.style.borderRadius = '50%';
-                thumb.style.background = initialState ? '#8AB4F8' : '#bdbdbd';
+                thumb.style.background = initialState ? '#ffffff' : '#888888';
                thumb.style.position = 'absolute';
                thumb.style.left = initialState ? '16px' : '0px';
                thumb.style.transition = 'left 0.3s, background 0.3s';
@@ -716,8 +716,8 @@ export function createDOM() {
                let state = initialState;
                track.onclick = () => {
                    state = !state;
-                    track.style.background = state ? 'rgba(138, 180, 248, 0.5)' : 'rgba(255,255,255,0.3)';
-                    thumb.style.background = state ? '#8AB4F8' : '#bdbdbd';
+                    track.style.background = state ? 'rgba(255, 255, 255, 0.45)' : 'rgba(255,255,255,0.15)';
+                    thumb.style.background = state ? '#ffffff' : '#888888';
                    thumb.style.left = state ? '16px' : '0px';
                    onChange(state);
                };
@@ -777,7 +777,7 @@ export function createDOM() {
            const sec2Title = document.createElement('div');
            sec2Title.textContent = t('sidebarStep2');
            sec2Title.style.fontWeight = '500';
-            sec2Title.style.color = '#8AB4F8';
+            sec2Title.style.color = '#e5e7eb';
            sec2Title.style.marginBottom = '8px';
            sec2Title.style.fontSize = '0.95em';
            section2.appendChild(sec2Title);
@@ -874,7 +874,7 @@ export function createDOM() {
            const sec3Title = document.createElement('div');
            sec3Title.textContent = t('sidebarStep3');
            sec3Title.style.fontWeight = '500';
-            sec3Title.style.color = '#8AB4F8';
+            sec3Title.style.color = '#e5e7eb';
            sec3Title.style.marginBottom = '8px';
            sec3Title.style.fontSize = '0.95em';
            section3.appendChild(sec3Title);
@@ -1089,7 +1089,7 @@ export function createDOM() {
        closeBtn.textContent = t('sidebarCancel');
            closeBtn.style.padding = '8px 16px';
            closeBtn.style.background = 'transparent';
-            closeBtn.style.color = '#8AB4F8';
+            closeBtn.style.color = '#9ca3af';
            closeBtn.style.border = 'none';
            closeBtn.style.borderRadius = '4px';
            closeBtn.style.cursor = 'pointer';
@@ -1097,30 +1097,30 @@ export function createDOM() {
            closeBtn.style.fontWeight = '500';
            closeBtn.style.textTransform = 'uppercase';
            closeBtn.style.transition = 'background 0.2s';
-            closeBtn.onmouseover = () => closeBtn.style.background = 'rgba(138, 180, 248, 0.08)';
+            closeBtn.onmouseover = () => closeBtn.style.background = 'rgba(255, 255, 255, 0.08)';
            closeBtn.onmouseout = () => closeBtn.style.background = 'transparent';
            closeBtn.onclick = () => document.body.removeChild(wizard);

            const startBtn = document.createElement('button');
        startBtn.textContent = t('sidebarExecute');
            startBtn.style.padding = '8px 24px';
-            startBtn.style.background = '#8AB4F8'; // Material Primary
-            startBtn.style.color = '#1E1E1E';
+            startBtn.style.background = '#e5e7eb';
+            startBtn.style.color = '#111827';
            startBtn.style.border = 'none';
            startBtn.style.borderRadius = '4px';
            startBtn.style.cursor = 'pointer';
            startBtn.style.fontSize = '0.95em';
-            startBtn.style.fontWeight = '500';
+            startBtn.style.fontWeight = '600';
            startBtn.style.textTransform = 'uppercase';
            startBtn.style.transition = 'background 0.2s, box-shadow 0.2s';
-            startBtn.style.boxShadow = '0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)';
+            startBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
            startBtn.onmouseover = () => {
-                startBtn.style.background = '#aecbf9';
-                startBtn.style.boxShadow = '0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)';
+                startBtn.style.background = '#ffffff';
+                startBtn.style.boxShadow = '0 3px 8px rgba(0,0,0,0.4)';
            };
            startBtn.onmouseout = () => {
-                startBtn.style.background = '#8AB4F8';
-                startBtn.style.boxShadow = '0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)';
+                startBtn.style.background = '#e5e7eb';
+                startBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
            };
            startBtn.onclick = doScan;

@@ -2588,7 +2588,7 @@ export async function openFolderManager() {
            });

            row.addEventListener('dragenter', function(e) {
-                this.style.border = '1px dashed #8AB4F8';
+                this.style.border = '1px dashed #e5e7eb';
            });

            row.addEventListener('dragleave', function(e) {
@@ -2675,8 +2675,8 @@ export async function openFolderManager() {
    const saveBtn = document.createElement('button');
    saveBtn.textContent = t('sidebarSaveReload');
    saveBtn.style.padding = '8px 16px';
-    saveBtn.style.background = '#8AB4F8';
-    saveBtn.style.color = '#1e1e1e';
+    saveBtn.style.background = '#e5e7eb';
+    saveBtn.style.color = '#111827';
    saveBtn.style.border = 'none';
    saveBtn.style.borderRadius = '6px';
    saveBtn.style.cursor = 'pointer';
@@ -8,35 +8,36 @@
    --c-cyan-glow: rgba(6, 182, 212, 0.25);
    --c-purple: #8b5cf6;
    --c-purple-glow: rgba(139, 92, 246, 0.25);
-    --c-silver: #94a3b8;
-    --c-silver-glow: rgba(148, 163, 184, 0.2);
-    --c-blue: #38bdf8;
-    --c-blue-glow: rgba(56, 189, 248, 0.25);
+    --c-silver: #9ca3af;
+    --c-silver-glow: rgba(156, 163, 175, 0.2);
+    --c-blue: #9ca3af;
+    --c-blue-glow: rgba(156, 163, 175, 0.2);
    --c-crimson: #ef4444;
    --c-crimson-glow: rgba(239, 68, 68, 0.25);
-    --c-wine: #475569;
-    --c-wine-glow: rgba(71, 85, 105, 0.2);
+    --c-wine: #4b5563;
+    --c-wine-glow: rgba(75, 85, 99, 0.2);
    --c-emerald: #10b981;
    --c-emerald-glow: rgba(16, 185, 129, 0.25);

-    /* AMB Base Design System Tokens - Normal Mode (Dark Neutral Obsidian Studio) */
-    --amb-bg-page: #141519;
-    --amb-bg-panel: #1C1E24;
-    --amb-bg-card: #24262E;
-    --amb-bg-card-hover: #2d303a;
-    --amb-bg-input: #181a22;
-    --amb-text-main: #E7E8ED;
-    --amb-text-muted: #A7AAB5;
-    --amb-border: rgba(255, 255, 255, 0.09);
-    --amb-border-hover: rgba(255, 255, 255, 0.18);
-    --amb-btn-primary-bg: #D7D9E0;
-    --amb-btn-primary-hover: #E5E7EB;
-    --amb-btn-primary-text: #15171C;
+    /* AMB Base Design System Tokens - Normal Mode (Neutral Dark Charcoal & Obsidian Studio) */
+    --amb-bg-page: #131315;
+    --amb-bg-panel: #1a1a1d;
+    --amb-bg-card: #202024;
+    --amb-bg-card-hover: #28282d;
+    --amb-bg-input: #151517;
+    --amb-text-main: #f3f4f6;
+    --amb-text-muted: #9ca3af;
+    --amb-border: rgba(255, 255, 255, 0.08);
+    --amb-border-hover: rgba(255, 255, 255, 0.16);
+    --amb-btn-primary-bg: #e5e7eb;
+    --amb-btn-primary-hover: #ffffff;
+    --amb-btn-primary-text: #111827;
    --amb-accent-gold: rgba(234, 179, 8, 0.65);
-    --amb-accent-line: rgba(215, 217, 224, 0.4);
+    --amb-accent-line: rgba(229, 231, 235, 0.35);
+    --amb-accent: #f59e0b;
    --amb-radius-control: 6px;
-    --amb-radius-card: 10px;
-    --amb-radius-panel: 12px;
+    --amb-radius-card: 8px;
+    --amb-radius-panel: 10px;
 }

 /* Abyssal Scarlet Gothic Theme Overrides */
@@ -260,8 +261,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 #anomalous-container {
    width: 90%;
    height: 90%;
-    background-color: var(--amb-bg-page, #0b0d13);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: var(--amb-bg-page, #131315);
+    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
@@ -272,7 +273,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
    top: 5%;
    container-type: inline-size;
    font-size: calc(16px * var(--anomalous-scale, 1));
-    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
 }

 #anomalous-container::before {
@@ -281,11 +282,12 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
    position: absolute;
    inset: 0;
    background-image: 
-        radial-gradient(ellipse 95% 85% at 50% 35%, rgba(11, 13, 19, 0.15) 0%, rgba(11, 13, 19, 0.65) 100%),
+        radial-gradient(ellipse 95% 85% at 50% 35%, rgba(19, 19, 21, 0.2) 0%, rgba(19, 19, 21, 0.75) 100%),
        url('assets/archive_library_bg.webp');
    background-size: cover;
    background-position: center 25%;
-    opacity: var(--anomalous-bg-opacity, 0.12);
+    filter: grayscale(100%) brightness(0.55) contrast(1.15);
+    opacity: var(--anomalous-bg-opacity, 0.08);
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
@@ -454,14 +456,14 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro

 .anomalous-card {
    position: relative;
-    background: rgba(18, 20, 26, 0.95);
+    background: var(--amb-bg-card, #202024);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 340px;
-    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
    will-change: transform, box-shadow;
    cursor: pointer;
@@ -469,8 +471,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro

 .anomalous-card:hover {
    transform: translateY(-2px);
-    border-color: rgba(255, 255, 255, 0.22);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }

 .theme-abyssal-scarlet .anomalous-card {
@@ -575,16 +577,16 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 #anomalous-container.view-mode-aesthetic .anomalous-card {
    height: 360px;
    border-radius: 8px;
-    background: rgba(18, 20, 28, 0.78);
+    background: rgba(28, 28, 32, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.09);
 }

 #anomalous-container.view-mode-aesthetic .anomalous-card:hover {
-    background: rgba(22, 25, 36, 0.88);
-    border-color: rgba(255, 255, 255, 0.28);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+    background: rgba(34, 34, 38, 0.92);
+    border-color: rgba(255, 255, 255, 0.22);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
 }

 /* Model Card Labels: Always visible at rest, crisp non-blurry gradient mask */
@@ -594,7 +596,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
    left: 0;
    right: 0;
    padding: 26px 10px 8px;
-    background: linear-gradient(to top, rgba(14, 15, 20, 0.96) 0%, rgba(14, 15, 20, 0.72) 65%, transparent 100%);
+    background: linear-gradient(to top, rgba(16, 16, 18, 0.96) 0%, rgba(16, 16, 18, 0.7) 65%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 3px;
@@ -606,7 +608,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 }

 .anomalous-card:hover .anomalous-card-labels {
-    background: linear-gradient(to top, rgba(14, 15, 20, 0.98) 0%, rgba(14, 15, 20, 0.85) 75%, transparent 100%);
+    background: linear-gradient(to top, rgba(16, 16, 18, 0.98) 0%, rgba(16, 16, 18, 0.82) 75%, transparent 100%);
 }

 .theme-abyssal-scarlet .anomalous-card-labels {
@@ -620,7 +622,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 .anomalous-card-title {
    font-size: 0.88rem;
    font-weight: 600;
-    color: #f8fafc;
+    color: #f3f4f6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
@@ -629,7 +631,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro

 .anomalous-card-filename {
    font-size: 0.72rem;
-    color: #94a3b8;
+    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
@@ -778,7 +780,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 .anomalous-scan-progress-fill {
    height: 100%;
    border-radius: inherit;
-    background: #8ab4f8;
+    background: #10b981;
    transition: width 180ms ease;
 }

@@ -859,36 +861,36 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
    flex-direction: row;
 }

-/* Island UI: Floating Sidebar Navigation Console (Unified Frosted Glass Blend) */
+/* Island UI: Floating Sidebar Navigation Console (Neutral Charcoal Frosted Glass) */
 #anomalous-sidebar-wrapper {
    width: 250px;
    margin: 8px 0 8px 8px;
    height: calc(100% - 16px);
-    background: rgba(12, 14, 20, 0.52);
+    background: rgba(22, 22, 25, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
+    border-radius: 10px;
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s ease;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: visible;
    box-sizing: border-box;
 }

 #anomalous-doctor-panel,
 #anomalous-assistant-panel {
-    background: var(--amb-bg-page, #0b0d13) !important;
+    background: var(--amb-bg-page, #131315) !important;
    position: relative;
    z-index: 2;
 }

 .anomalous-brand-badge {
    background: rgba(255, 255, 255, 0.06) !important;
-    border: 1px solid rgba(255, 255, 255, 0.12) !important;
-    color: #e2e8f0 !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    color: #e5e7eb !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(8px) !important;
@@ -897,20 +899,20 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro

 #anomalous-sidebar input[type="text"] {
    background: rgba(255, 255, 255, 0.05) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(8px) !important;
-    color: #fff !important;
+    color: #f3f4f6 !important;
    transition: all 0.2s ease !important;
 }

 #anomalous-sidebar input[type="text"]:focus {
-    border-color: rgba(255, 255, 255, 0.35) !important;
-    background: rgba(255, 255, 255, 0.09) !important;
-    box-shadow: 0 0 10px rgba(255, 255, 255, 0.08) !important;
+    border-color: rgba(255, 255, 255, 0.3) !important;
+    background: rgba(255, 255, 255, 0.08) !important;
+    box-shadow: 0 0 8px rgba(255, 255, 255, 0.06) !important;
 }

 #anomalous-sidebar-actions {
-    background: rgba(12, 14, 20, 0.35) !important;
+    background: rgba(20, 20, 23, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
 }
@@ -942,13 +944,13 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
    max-height: calc(100% - 32px);
    overflow-y: auto;
    box-sizing: border-box;
-    background: rgba(20, 22, 30, 0.96);
+    background: rgba(24, 24, 28, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.14);
-    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    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.06);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 999999 !important;
    transition: left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
@@ -1015,8 +1017,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 600;
-    border-left: 2px solid #94a3b8;
-    box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.05);
+    border-left: 2px solid #e5e7eb;
+    box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.03);
    border-radius: 0 6px 6px 0;
 }

@@ -2452,9 +2454,9 @@ dialog.anomalous-gallery-viewer[open] {
 }

 .anomalous-recipe-cover-choice.selected {
-    border-color: #38bdf8;
-    color: #38bdf8;
-    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35);
+    border-color: #e5e7eb;
+    color: #e5e7eb;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
 }

 .theme-abyssal-scarlet .anomalous-recipe-cover-choice.selected {
@@ -3199,10 +3201,10 @@ dialog.anomalous-gallery-viewer[open] {
 .anomalous-model-location-copy {
    justify-self: start;
    padding: 4px 9px;
-    border: 1px solid rgba(138, 180, 248, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
-    background: rgba(138, 180, 248, 0.08);
-    color: #8ab4f8;
+    background: rgba(255, 255, 255, 0.06);
+    color: #e5e7eb;
    cursor: pointer;
    font-size: 0.75em;
 }
@@ -5664,8 +5666,8 @@ dialog.anomalous-gallery-viewer[open] {
 }

 .anomalous-material-film-thumb.is-selected {
-    border-color: #38bdf8;
-    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4);
+    border-color: #ffffff;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
 }

 .theme-abyssal-scarlet .anomalous-material-film-thumb.is-selected {
@@ -11348,9 +11350,9 @@ html.theme-abyssal-scarlet dialog.anomalous-gallery-viewer {
 }

 #anomalous-scan-btn.anomalous-radar-spinning {
-    color: #38bdf8 !important;
-    background: rgba(56, 189, 248, 0.12) !important;
-    border: 1px solid rgba(56, 189, 248, 0.35) !important;
+    color: #10b981 !important;
+    background: rgba(16, 185, 129, 0.12) !important;
+    border: 1px solid rgba(16, 185, 129, 0.35) !important;
 }

 #anomalous-scan-btn.anomalous-radar-spinning svg {
@@ -11395,6 +11397,15 @@ button:hover .anomalous-btn-icon {
    filter: none;
 }

+#anomalous-sidebar-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 10px 8px;
+    gap: 4px;
+    box-sizing: border-box;
+}
+
 #anomalous-sidebar-actions button {
    display: inline-flex !important;
    align-items: center !important;
@@ -11404,7 +11415,7 @@ button:hover .anomalous-btn-icon {
    border-radius: 6px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
-    color: var(--amb-text-muted, #94a3b8) !important;
+    color: var(--amb-text-muted, #9ca3af) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
@@ -11424,7 +11435,7 @@ button:hover .anomalous-btn-icon {

 #anomalous-sidebar-actions button:hover svg {
    transform: scale(1.08);
-    color: var(--amb-accent, #38bdf8);
+    color: #ffffff !important;
 }

 /* Abyssal Scarlet Mode overrides for Task 8 icon buttons (Sharp Borders & Inner Shadow) */
@@ -11474,19 +11485,7 @@ button:hover .anomalous-btn-icon {
 }

 #anomalous-sidebar-actions::before {
-    content: '';
-    position: absolute;
-    bottom: -15px;
-    right: -15px;
-    width: 90px;
-    height: 90px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='white' stroke-width='1.5'%3E%3Ccircle cx='50' cy='50' r='45' stroke-dasharray='4 3'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='10'/%3E%3Cline x1='50' y1='5' x2='50' y2='95'/%3E%3Cline x1='5' y1='50' x2='95' y2='50'/%3E%3Cpolygon points='50,20 80,50 50,80 20,50'/%3E%3C/svg%3E");
-    background-size: contain;
-    background-repeat: no-repeat;
-    opacity: 0.04;
-    pointer-events: none;
-    z-index: 0;
-    transition: opacity 0.3s ease;
+    display: none !important;
 }

 .theme-abyssal-scarlet #anomalous-sidebar-actions::before {
@@ -11718,10 +11717,10 @@ button:hover .anomalous-btn-icon {
   Easter Egg Mode: Gothic Vampire Abyssal Scarlet Expansion
   ========================================================================== */

-/* 1. Normal Mode Master Header (Unified Frosted Glass Blend) */
+/* 1. Normal Mode Master Header (Neutral Charcoal Frosted Glass) */
 #anomalous-header {
    height: 60px;
-    background: rgba(12, 14, 20, 0.48) !important;
+    background: rgba(20, 20, 23, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    display: flex !important;
@@ -11729,7 +11728,7 @@ button:hover .anomalous-btn-icon {
    justify-content: space-between !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    cursor: move;
    position: relative;
    z-index: 10;
@@ -11768,24 +11767,24 @@ button:hover .anomalous-btn-icon {
 #anomalous-header button {
    margin-right: 0;
    padding: 8px 18px;
-    background: rgba(255, 255, 255, 0.06);
-    color: #e2e8f0;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.05);
+    color: #d1d5db;
+    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
-    font-size: 0.98em;
+    font-size: 0.96em;
    font-weight: 500;
    backdrop-filter: blur(8px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }

 #anomalous-header button:hover {
-    background: rgba(255, 255, 255, 0.12) !important;
-    border-color: rgba(255, 255, 255, 0.25) !important;
+    background: rgba(255, 255, 255, 0.1) !important;
+    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: none !important;
@@ -11799,13 +11798,13 @@ button:hover .anomalous-btn-icon {
 }

 #anomalous-header button.active {
-    background: rgba(255, 255, 255, 0.16) !important;
-    border-color: rgba(255, 255, 255, 0.35) !important;
+    background: rgba(255, 255, 255, 0.15) !important;
+    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
-    box-shadow: none !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
 }

-/* 2. Normal Mode Gallery Container & Panels (Grand Anime Archive Watermark Texture) */
+/* 2. Normal Mode Gallery Container & Panels (Clean Neutral Dark Canvas) */
 #anomalous-gallery-panel,
 .anomalous-gallery-container {
    background-color: transparent !important;
@@ -11818,18 +11817,7 @@ button:hover .anomalous-btn-icon {

 .anomalous-gallery-container::before,
 #anomalous-gallery-panel::before {
-    display: block !important;
-    content: '' !important;
-    position: absolute !important;
-    inset: 0 !important;
-    background-image: 
-        radial-gradient(ellipse 90% 80% at 50% 50%, rgba(11, 13, 19, 0.15) 0%, rgba(11, 13, 19, 0.55) 100%),
-        url('assets/archive_library_bg.webp') !important;
-    background-size: cover !important;
-    background-position: center 25% !important;
-    opacity: 0.65 !important;
-    pointer-events: none !important;
-    z-index: 0 !important;
+    display: none !important;
 }

 .anomalous-gallery-container > *,