diff --git a/web/css/css-variables.css b/web/css/css-variables.css
index 2312891..0340c9d 100644
--- a/web/css/css-variables.css
+++ b/web/css/css-variables.css
@@ -207,4 +207,20 @@
     --mr-type-guider-text: #c7ffff;
     --mr-type-taesd-rgb: 220, 194, 116;
     --mr-type-taesd-text: #efd991;
+
+    --mr-badge-success-bg: rgba(34, 197, 94, 0.1);
+    --mr-badge-success-border: rgba(34, 197, 94, 0.24);
+    --mr-badge-success-text: #43d184;
+    --mr-badge-error-bg: rgba(239, 68, 68, 0.16);
+    --mr-badge-error-border: rgba(239, 68, 68, 0.34);
+    --mr-badge-info-bg: rgba(96, 165, 250, 0.1);
+    --mr-badge-info-border: rgba(78, 161, 255, 0.3);
+    --mr-gradient-blue-primary: linear-gradient(180deg, rgba(37, 99, 190, 0.88) 0%, rgba(25, 72, 144, 0.92) 100%);
+    --mr-gradient-blue-hover: linear-gradient(180deg, rgba(47, 117, 218, 0.96) 0%, rgba(30, 85, 166, 0.98) 100%);
+    --mr-gradient-dock-preview: linear-gradient(180deg, rgba(38, 77, 50, 0.82), rgba(18, 35, 24, 0.88));
+    --mr-surface-glass-02: rgba(255, 255, 255, 0.025);
+    --mr-surface-glass-03: rgba(255, 255, 255, 0.035);
+    --mr-surface-glass-05: rgba(255, 255, 255, 0.052);
+    --mr-surface-slate-dark: rgba(15, 23, 42, 0.20);
 }
+
diff --git a/web/css/resolver-main.css b/web/css/resolver-main.css
index fbb1b9c..76d224a 100644
--- a/web/css/resolver-main.css
+++ b/web/css/resolver-main.css
@@ -161,7 +161,7 @@
 .mr-copy-mode.active,
 #model-resolver-modal .mr-btn-filter.active,
 #model-resolver-modal .mr-copy-mode.active {
-    color: #dffbe5;
+    color: var(--mr-accent);
     background: rgba(114, 211, 138, 0.13);
     border-color: rgba(114, 211, 138, 0.32);
 }
@@ -239,7 +239,7 @@
 }
 
 .mr-model-count-pill.is-active {
-    color: #c9f6d0;
+    color: var(--mr-type-lora-text);
     border-color: rgba(114, 211, 138, 0.25);
     background: rgba(114, 211, 138, 0.09);
 }
@@ -663,7 +663,7 @@
     height: 16px;
     padding: 0 var(--mr-spacing-4);
     border-radius: var(--mr-missing-chip-radius);
-    color: #c9f6d0;
+    color: var(--mr-type-lora-text);
     background: rgba(114, 211, 138, 0.12);
     font-style: normal;
     font-size: var(--mr-font-xs);
@@ -701,7 +701,7 @@
 }
 
 .mr-missing-stat-partial {
-    color: #f1cf64;
+    color: var(--mr-warning);
 }
 
 .mr-missing-list-head,
@@ -985,7 +985,7 @@
 }
 
 .mr-missing-row-match-partial strong {
-    color: #f1cf64;
+    color: var(--mr-warning);
     background: rgba(241, 207, 100, 0.13);
 }
 
@@ -1340,7 +1340,7 @@
     border-radius: var(--mr-missing-chip-radius);
     border: 1px solid rgba(114, 211, 138, 0.28);
     background: rgba(114, 211, 138, 0.105);
-    color: #c9f6d0;
+    color: var(--mr-type-lora-text);
     font-size: var(--mr-font-xs);
     font-weight: 800;
     line-height: 1;
@@ -1673,7 +1673,7 @@
     margin-bottom: var(--mr-spacing-8);
     padding-bottom: var(--mr-spacing-8);
     border-bottom: 1px solid var(--mr-missing-line, var(--mr-divider));
-    color: #bdbdbd;
+    color: var(--mr-text-muted);
     font-size: var(--mr-font-lg);
     letter-spacing: 0.08em;
 }
@@ -1907,7 +1907,7 @@
 }
 
 .mr-match-status-partial {
-    color: #f1cf64;
+    color: var(--mr-warning);
     background: rgba(241, 207, 100, 0.10);
 }
 
@@ -2192,7 +2192,7 @@
 
 .mr-btn-danger,
 #model-resolver-modal .mr-btn-danger {
-    background: #f44336;
+    background: var(--mr-color-danger-bright);
     border-color: rgba(244, 67, 54, 0.52);
     color: white;
 }
@@ -2617,7 +2617,7 @@
 
 .mr-missing-browser .mr-search-results-table th {
     background: var(--mr-missing-surface-raised, rgba(255, 255, 255, 0.04));
-    color: #bdbdbd;
+    color: var(--mr-text-muted);
 }
 
 .mr-search-results-table tr:last-child td {
@@ -2794,7 +2794,7 @@
 }
 
 .mr-search-match-medium {
-    color: #f1cf64;
+    color: var(--mr-warning);
 }
 
 .mr-search-match-weak {
@@ -2917,7 +2917,7 @@
 }
 
 .mr-search-progress-list-compact .mr-search-progress-error::before {
-    background: #ff8a80;
+    background: var(--mr-color-error-lighter);
 }
 
 .mr-search-progress-list-compact .mr-search-progress-cancelled::before {
@@ -2947,7 +2947,7 @@
 }
 
 .mr-search-progress-list-compact .mr-search-progress-error .mr-search-progress-status {
-    color: #ff8a80;
+    color: var(--mr-color-error-lighter);
 }
 
 .mr-search-progress-head {
@@ -2990,7 +2990,7 @@
     border-radius: var(--mr-radius-md);
     border-color: rgba(255, 120, 112, 0.28);
     background: rgba(255, 120, 112, 0.055);
-    color: #ff8a80;
+    color: var(--mr-color-error-lighter);
 }
 
 #model-resolver-modal .mr-search-result-action-btn.mr-search-progress-cancel:hover:not(:disabled),
@@ -3036,7 +3036,7 @@
 }
 
 .mr-search-progress-error .mr-search-progress-fill {
-    background: #ff8a80;
+    background: var(--mr-color-error-lighter);
 }
 
 .mr-search-progress-cancelled .mr-search-progress-fill {
@@ -3240,7 +3240,7 @@
 .mr-status-success {
     background: rgba(76, 175, 80, 0.1);
     border: 1px solid rgba(76, 175, 80, 0.3);
-    color: #a5d6a7;
+    color: var(--mr-accent-hover);
 }
 
 .mr-status-info {
@@ -3354,7 +3354,7 @@
     align-items: center;
     gap: var(--mr-spacing-7);
     min-width: 0;
-    color: #9f9f9f;
+    color: var(--mr-color-gray-400);
     font-size: var(--mr-font-sm);
     line-height: 1.2;
     text-decoration: none;
@@ -3846,7 +3846,7 @@
     padding: 0 var(--mr-spacing-7);
     border-radius: var(--mr-missing-chip-radius);
     background: rgba(114, 211, 138, 0.12);
-    color: #dffbe5;
+    color: var(--mr-accent);
     font-size: var(--mr-font-xs);
 }
 
@@ -4214,12 +4214,12 @@ button.mr-info-link:disabled {
 
 .mr-info-tag.-basemodel-sdxl {
     background: rgba(33, 150, 243, 0.2);
-    color: #64B5F6;
+    color: var(--mr-color-primary);
 }
 
 .mr-info-tag.-basemodel-sdxl-turbo {
     background: rgba(33, 150, 243, 0.2);
-    color: #64B5F6;
+    color: var(--mr-color-primary);
 }
 
 .mr-info-tag.-basemodel-flux\.1 {
@@ -4844,7 +4844,7 @@ button.mr-info-link:disabled {
     overflow-y: auto;
     padding: var(--mr-spacing-10);
     font-size: var(--mr-font-sm);
-    color: #e9eef5;
+    color: var(--mr-text);
     background: linear-gradient(180deg, rgba(7, 10, 14, 0) 0%, rgba(7, 10, 14, 0.82) 16%, rgba(7, 10, 14, 0.94) 100%);
     opacity: 0;
     transform: translateY(10px);
@@ -4954,7 +4954,7 @@ button.mr-info-link:disabled {
 }
 
 .mr-info-error {
-    color: #f44336;
+    color: var(--mr-color-danger-bright);
     font-size: var(--mr-font-md);
 }
 
@@ -5203,7 +5203,7 @@ button.mr-info-link:disabled {
 }
 
 .mr-image-preview-resource-name {
-    color: #e8e8eb;
+    color: var(--mr-text);
     font-size: var(--mr-font-md);
     font-weight: 800;
     min-width: 0;
@@ -5279,7 +5279,7 @@ a.mr-image-preview-resource-name:hover {
 
 .mr-image-preview-card p {
     margin: 0;
-    color: #b9bbc4;
+    color: var(--mr-text-muted);
     font-size: var(--mr-font-md);
     line-height: 1.55;
     white-space: pre-wrap;
@@ -5495,7 +5495,7 @@ a.mr-image-preview-resource-name:hover {
     border: 1px solid rgba(255, 255, 255, 0.11);
     border-radius: var(--mr-radius-lg);
     background: var(--mr-missing-control-bg-hover);
-    color: #e8e8eb;
+    color: var(--mr-text);
     cursor: pointer;
     text-align: left;
 }
@@ -5725,7 +5725,7 @@ a.mr-image-preview-resource-name:hover {
     padding: var(--mr-spacing-3) var(--mr-spacing-7);
     border-radius: var(--mr-radius-md);
     background: var(--mr-border);
-    color: #ececf0;
+    color: var(--mr-text);
     font-size: var(--mr-font-sm);
     font-weight: 800;
 }
@@ -5838,7 +5838,7 @@ a.mr-image-preview-resource-name:hover {
 
 .mr-model-details-file-table-row.is-target .mr-model-details-file-table-badges span:first-child {
     background: rgba(114, 211, 138, 0.18);
-    color: #9cf2b2;
+    color: var(--mr-accent-hover);
 }
 
 .mr-model-details-file-table-badges .is-empty {
@@ -5951,7 +5951,7 @@ a.mr-image-preview-resource-name:hover {
 
 .mr-model-details-file.is-target .mr-model-details-file-summary-badges span:first-child {
     background: rgba(114, 211, 138, 0.18);
-    color: #9cf2b2;
+    color: var(--mr-accent-hover);
 }
 
 .mr-model-details-file-body {
@@ -6162,7 +6162,7 @@ a.mr-image-preview-resource-name:hover {
 }
 
 .mr-model-details-mirror.is-dead .mr-model-details-mirror-action {
-    color: #f87171;
+    color: var(--mr-color-error-lighter);
 }
 
 .mr-model-details-mirror.is-gated .mr-model-details-mirror-action {
@@ -7221,12 +7221,12 @@ a.mr-image-preview-resource-name:hover {
 
 .mr-options-history-action.is-created {
     color: var(--mr-color-success);
-    background: rgba(34, 197, 94, 0.1);
+    background: var(--mr-badge-success-bg);
 }
 
 .mr-options-history-action.is-updated {
     color: var(--mr-accent);
-    background: rgba(96, 165, 250, 0.1);
+    background: var(--mr-badge-info-bg);
 }
 
 .mr-options-history-action.is-skipped,
@@ -7581,7 +7581,7 @@ a.mr-image-preview-resource-name:hover {
 
 .mr-options-audit-empty {
     padding: var(--mr-spacing-12);
-    border: 1px solid rgba(34, 197, 94, 0.24);
+    border: 1px solid var(--mr-badge-success-border);
     border-radius: var(--mr-radius-lg);
     color: var(--mr-color-success);
     background: rgba(34, 197, 94, 0.08);
@@ -7762,7 +7762,7 @@ a.mr-image-preview-resource-name:hover {
 .mr-tooltip-badge:focus-visible {
     background: rgba(78, 161, 255, 0.18);
     color: #d9ecff;
-    border-color: rgba(78, 161, 255, 0.3);
+    border-color: var(--mr-badge-info-border);
     outline: none;
 }
 
@@ -7924,7 +7924,7 @@ a.mr-image-preview-resource-name:hover {
 }
 
 .mr-options-template-detect-status.is-valid {
-    color: #c9f6d0;
+    color: var(--mr-type-lora-text);
     border-color: rgba(114, 211, 138, 0.28);
     background: rgba(114, 211, 138, 0.08);
 }
@@ -7987,7 +7987,7 @@ a.mr-image-preview-resource-name:hover {
 
 .mr-options-mapping-remove:hover {
     background: rgba(255, 0, 0, 0.18);
-    color: #ff6b6b;
+    color: var(--mr-color-danger-bright);
 }
 
 .mr-options-placeholder-badge {
@@ -7997,7 +7997,7 @@ a.mr-image-preview-resource-name:hover {
     padding: var(--mr-spacing-3) var(--mr-spacing-7);
     border-radius: var(--mr-radius-md);
     background: rgba(0, 122, 204, 0.9);
-    color: #eaf6ff;
+    color: var(--mr-text);
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
     font-size: var(--mr-font-sm);
     font-weight: 700;
@@ -8098,7 +8098,7 @@ a.mr-image-preview-resource-name:hover {
 
 .mr-options-visibility-btn[aria-pressed="true"],
 #model-resolver-modal .mr-options-visibility-btn[aria-pressed="true"] {
-    color: #dffbe5;
+    color: var(--mr-accent);
     border-color: rgba(114, 211, 138, 0.32);
     background: rgba(114, 211, 138, 0.13);
 }
@@ -8214,7 +8214,7 @@ a.mr-image-preview-resource-name:hover {
     width: 46px;
     height: 26px;
     border-radius: var(--mr-missing-chip-radius);
-    background: #555560;
+    background: var(--mr-color-gray-700);
     border: 1px solid var(--mr-missing-control-bg-hover);
     transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
 }
@@ -8233,8 +8233,8 @@ a.mr-image-preview-resource-name:hover {
 }
 
 .mr-options-switch-input:checked+.mr-options-switch {
-    background: #4c97ff;
-    border-color: #4c97ff;
+    background: var(--mr-color-primary);
+    border-color: var(--mr-color-primary);
     box-shadow: none;
 }
 
@@ -8317,7 +8317,7 @@ a.mr-image-preview-resource-name:hover {
 }
 
 .mr-options-status.is-saved {
-    color: #9dd8a9;
+    color: var(--mr-accent-hover);
 }
 
 @media (max-width: 980px) {
@@ -9020,7 +9020,7 @@ a.mr-image-preview-resource-name:hover {
     font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
     font-size: var(--mr-font-sm);
     font-weight: 650;
-    color: #e7e7e7;
+    color: var(--mr-text-soft);
 }
 
 #model-resolver-modal .mr-missing-detail-pane .mr-badge,
@@ -9324,7 +9324,7 @@ a.mr-image-preview-resource-name:hover {
     display: inline-flex;
     width: 17px;
     height: 17px;
-    color: #43d184;
+    color: var(--mr-badge-success-text);
 }
 
 #model-resolver-modal .mr-missing-detail-pane .mr-selected-status-icon svg {
@@ -9339,7 +9339,7 @@ a.mr-image-preview-resource-name:hover {
     padding: 0;
     overflow: hidden;
     background: transparent;
-    color: #ededed;
+    color: var(--mr-text);
     font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
     font-size: var(--mr-font-lg);
     font-weight: 700;
@@ -9377,7 +9377,7 @@ a.mr-image-preview-resource-name:hover {
 }
 
 #model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn-primary {
-    background: linear-gradient(180deg, rgba(37, 99, 190, 0.88) 0%, rgba(25, 72, 144, 0.92) 100%);
+    background: var(--mr-gradient-blue-primary);
     border-color: rgba(88, 151, 255, 0.46);
     color: #edf5ff;
     box-shadow:
@@ -9386,14 +9386,14 @@ a.mr-image-preview-resource-name:hover {
 }
 
 #model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn-primary:hover:not(:disabled) {
-    background: linear-gradient(180deg, rgba(47, 117, 218, 0.96) 0%, rgba(30, 85, 166, 0.98) 100%);
+    background: var(--mr-gradient-blue-hover);
     border-color: rgba(111, 170, 255, 0.62);
     color: var(--mr-color-white);
 }
 
 #model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn-danger {
-    background: rgba(239, 68, 68, 0.16);
-    border-color: rgba(239, 68, 68, 0.34);
+    background: var(--mr-badge-error-bg);
+    border-color: var(--mr-badge-error-border);
     color: #fee2e2;
 }
 
@@ -9441,7 +9441,7 @@ a.mr-image-preview-resource-name:hover {
 #model-resolver-modal .mr-missing-detail-pane .mr-search-results-table th {
     padding: 9px var(--mr-spacing-10);
     background: rgba(255, 255, 255, 0.04);
-    color: #bdbdbd;
+    color: var(--mr-text-muted);
     font-size: var(--mr-font-xs);
     letter-spacing: 0.02em;
 }
@@ -9641,7 +9641,7 @@ a.mr-image-preview-resource-name:hover {
 }
 
 #model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-local-alternatives-label {
-    color: #bdbdbd;
+    color: var(--mr-text-muted);
 }
 
 .litegraph.litecontextmenu .litemenu-entry.mr-model-resolver-node-menu::before {
diff --git a/web/css/resolver-shell.css b/web/css/resolver-shell.css
index 8e9490d..a287462 100644
--- a/web/css/resolver-shell.css
+++ b/web/css/resolver-shell.css
@@ -23,7 +23,7 @@
     visibility: hidden;
     opacity: 0;
     color: var(--mr-text, #f3f3f3);
-    background: linear-gradient(180deg, rgba(38, 77, 50, 0.82), rgba(18, 35, 24, 0.88));
+    background: var(--mr-gradient-dock-preview);
     border: 2px solid rgba(114, 211, 138, 0.72);
     border-radius: var(--mr-radius-xl);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
@@ -622,7 +622,7 @@
     max-width: 92px;
     padding: var(--mr-spacing-2) var(--mr-spacing-6);
     overflow: hidden;
-    color: #c9f5d2;
+    color: var(--mr-type-lora-text);
     font-size: var(--mr-font-xs);
     font-weight: 800;
     line-height: 1.2;