minecodex 2.0.2 → 2.0.4

package/features/images/web/styles.css

@@ -1,125 +1,125 @@
 :root {
   color-scheme: light;
-  --codex-base-accent: #339cff;
-  --color-token-main-surface-primary: #fff;
-  --color-token-bg-primary: #f9f9f9;
-  --color-token-bg-secondary: color-mix(in srgb, #f9f9f9 92%, transparent);
-  --color-surface-tertiary: #f0f0f0;
-  --color-surface-elevated-secondary: #fff;
-  --color-border-subtle: color-mix(in oklab, #1a1c1f 4%, transparent);
-  --color-background-primary-ghost-hover: color-mix(in oklab, #1a1c1f 5%, transparent);
-  --color-chart-blue: #339cff;
-  --color-text-inverse: #fff;
-  --color-background-elevated-primary-opaque: #fff;
-  --color-background-panel: #f5f5f5;
-  --color-background-primary-solid: #1a1c1f;
-  --color-text-primary-solid: #fff;
-  --color-background-button-secondary: color-mix(in oklab, #1a1c1f 5%, transparent);
-  --color-background-button-secondary-hover: color-mix(in oklab, #1a1c1f 8%, transparent);
-  --color-background-button-tertiary-hover: color-mix(in oklab, #1a1c1f 7%, transparent);
-  --color-text-foreground: #1a1c1f;
-  --color-text-foreground-secondary: color-mix(in oklab, #1a1c1f 70%, transparent);
-  --color-text-foreground-tertiary: color-mix(in oklab, #1a1c1f 50%, transparent);
-  --color-icon-tertiary: rgb(13 13 13 / 48.4%);
-  --color-text-accent: #087ccf;
-  --color-border: color-mix(in oklab, #1a1c1f 8%, transparent);
-  --color-border-heavy: color-mix(in oklab, #1a1c1f 14%, transparent);
-  --color-border-focus: #339cff;
-  --color-token-scrollbar-slider-background: var(--color-border);
-  --color-token-scrollbar-slider-hover-background: var(--color-border-heavy);
-  --color-token-scrollbar-slider-active-background: var(--color-border-heavy);
-  --color-token-list-hover-background: color-mix(in oklab, #1a1c1f 5%, transparent);
-  --color-token-input-background: #f3f3f3;
-  --color-token-input-border: color-mix(in oklab, #1a1c1f 14%, transparent);
-  --color-token-input-foreground: #1a1c1f;
-  --color-token-input-placeholder-foreground: color-mix(in oklab, #1a1c1f 50%, transparent);
-  --font-sans-default: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --default-mono-font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
-  --text-heading-md: 20px;
+  --mcx-codex-base-accent: #339cff;
+  --mcx-color-token-main-surface-primary: #fff;
+  --mcx-color-token-bg-primary: #f9f9f9;
+  --mcx-color-token-bg-secondary: color-mix(in srgb, #f9f9f9 92%, transparent);
+  --mcx-color-surface-tertiary: #f0f0f0;
+  --mcx-color-surface-elevated-secondary: #fff;
+  --mcx-color-border-subtle: color-mix(in oklab, #1a1c1f 4%, transparent);
+  --mcx-color-background-primary-ghost-hover: color-mix(in oklab, #1a1c1f 5%, transparent);
+  --mcx-color-chart-blue: #339cff;
+  --mcx-color-text-inverse: #fff;
+  --mcx-color-background-elevated-primary-opaque: #fff;
+  --mcx-color-background-panel: #f5f5f5;
+  --mcx-color-background-primary-solid: #1a1c1f;
+  --mcx-color-text-primary-solid: #fff;
+  --mcx-color-background-button-secondary: color-mix(in oklab, #1a1c1f 5%, transparent);
+  --mcx-color-background-button-secondary-hover: color-mix(in oklab, #1a1c1f 8%, transparent);
+  --mcx-color-background-button-tertiary-hover: color-mix(in oklab, #1a1c1f 7%, transparent);
+  --mcx-color-text-foreground: #1a1c1f;
+  --mcx-color-text-foreground-secondary: color-mix(in oklab, #1a1c1f 70%, transparent);
+  --mcx-color-text-foreground-tertiary: color-mix(in oklab, #1a1c1f 50%, transparent);
+  --mcx-color-icon-tertiary: rgb(13 13 13 / 48.4%);
+  --mcx-color-text-accent: #087ccf;
+  --mcx-color-border: color-mix(in oklab, #1a1c1f 8%, transparent);
+  --mcx-color-border-heavy: color-mix(in oklab, #1a1c1f 14%, transparent);
+  --mcx-color-border-focus: #339cff;
+  --mcx-color-token-scrollbar-slider-background: var(--mcx-color-border);
+  --mcx-color-token-scrollbar-slider-hover-background: var(--mcx-color-border-heavy);
+  --mcx-color-token-scrollbar-slider-active-background: var(--mcx-color-border-heavy);
+  --mcx-color-token-list-hover-background: color-mix(in oklab, #1a1c1f 5%, transparent);
+  --mcx-color-token-input-background: #f3f3f3;
+  --mcx-color-token-input-border: color-mix(in oklab, #1a1c1f 14%, transparent);
+  --mcx-color-token-input-foreground: #1a1c1f;
+  --mcx-color-token-input-placeholder-foreground: color-mix(in oklab, #1a1c1f 50%, transparent);
+  --mcx-font-sans-default: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --mcx-default-mono-font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
+  --mcx-text-heading-md: 20px;
   --text-heading-sm: 18px;
-  --text-base: 14px;
-  --text-sm: 13px;
-  --text-xs: 12px;
-  --radius-md: 10px;
-  --radius-lg: 12.5px;
-  --radius-xl: 15px;
-  --shadow-xl: 0 8px 30px rgb(0 0 0 / 14%);
+  --mcx-text-base: 14px;
+  --mcx-text-sm: 13px;
+  --mcx-text-xs: 12px;
+  --mcx-radius-md: 10px;
+  --mcx-radius-lg: 12.5px;
+  --mcx-radius-xl: 15px;
+  --mcx-shadow-xl: 0 8px 30px rgb(0 0 0 / 14%);
   --library-gutter: clamp(20px, 4vw, 56px);
   --library-card-radius: 16px;
-  --library-canvas: color-mix(in srgb, var(--color-token-main-surface-primary) 98.8%, var(--color-text-foreground));
-  --library-card-border: light-dark(rgb(0 0 0 / 5%), var(--color-border-subtle));
+  --library-canvas: color-mix(in srgb, var(--mcx-color-token-main-surface-primary) 98.8%, var(--mcx-color-text-foreground));
+  --library-card-border: light-dark(rgb(0 0 0 / 5%), var(--mcx-color-border-subtle));
   --library-card-shadow: 0 4px 16px 0 light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 16%));
   --library-detail-gutter: clamp(20px, 3vw, 40px);
-  font-family: var(--font-sans-default);
-  background: var(--color-token-main-surface-primary);
-  color: var(--color-text-foreground);
+  font-family: var(--mcx-font-sans-default);
+  background: var(--mcx-color-token-main-surface-primary);
+  color: var(--mcx-color-text-foreground);
 }
 
 :root[data-theme="dark"] {
   color-scheme: dark;
-  --color-token-main-surface-primary: #181818;
-  --color-token-bg-primary: #141414;
-  --color-token-bg-secondary: color-mix(in srgb, #141414 92%, transparent);
-  --color-surface-tertiary: rgb(40 40 40);
-  --color-surface-elevated-secondary: rgb(45 45 45);
-  --color-border-subtle: rgb(255 255 255 / 4.2%);
-  --color-background-primary-ghost-hover: rgb(255 255 255 / 7.8%);
-  --color-chart-blue: #339cff;
-  --color-text-inverse: rgb(13 13 13);
-  --color-background-elevated-primary-opaque: #363636;
-  --color-background-panel: #232323;
-  --color-background-primary-solid: #fff;
-  --color-text-primary-solid: #2d2d2d;
-  --color-background-button-secondary: rgb(255 255 255 / 5.2%);
-  --color-background-button-secondary-hover: rgb(255 255 255 / 7.8%);
-  --color-background-button-tertiary-hover: rgb(255 255 255 / 6.8%);
-  --color-text-foreground: #fff;
-  --color-text-foreground-secondary: rgb(255 255 255 / 71%);
-  --color-text-foreground-tertiary: rgb(255 255 255 / 49.8%);
-  --color-icon-tertiary: color-mix(in oklab, #fff 50%, transparent);
-  --color-text-accent: #83c3ff;
-  --color-border: rgb(255 255 255 / 8.4%);
-  --color-border-heavy: rgb(255 255 255 / 15.6%);
-  --color-border-focus: rgb(131 195 255 / 76%);
-  --color-token-list-hover-background: rgb(255 255 255 / 7.8%);
-  --color-token-input-background: rgb(45 45 45 / 96%);
-  --color-token-input-border: rgb(255 255 255 / 15.6%);
-  --color-token-input-foreground: #fff;
-  --color-token-input-placeholder-foreground: rgb(255 255 255 / 49.8%);
+  --mcx-color-token-main-surface-primary: #181818;
+  --mcx-color-token-bg-primary: #141414;
+  --mcx-color-token-bg-secondary: color-mix(in srgb, #141414 92%, transparent);
+  --mcx-color-surface-tertiary: rgb(40 40 40);
+  --mcx-color-surface-elevated-secondary: rgb(45 45 45);
+  --mcx-color-border-subtle: rgb(255 255 255 / 4.2%);
+  --mcx-color-background-primary-ghost-hover: rgb(255 255 255 / 7.8%);
+  --mcx-color-chart-blue: #339cff;
+  --mcx-color-text-inverse: rgb(13 13 13);
+  --mcx-color-background-elevated-primary-opaque: #363636;
+  --mcx-color-background-panel: #232323;
+  --mcx-color-background-primary-solid: #fff;
+  --mcx-color-text-primary-solid: #2d2d2d;
+  --mcx-color-background-button-secondary: rgb(255 255 255 / 5.2%);
+  --mcx-color-background-button-secondary-hover: rgb(255 255 255 / 7.8%);
+  --mcx-color-background-button-tertiary-hover: rgb(255 255 255 / 6.8%);
+  --mcx-color-text-foreground: #fff;
+  --mcx-color-text-foreground-secondary: rgb(255 255 255 / 71%);
+  --mcx-color-text-foreground-tertiary: rgb(255 255 255 / 49.8%);
+  --mcx-color-icon-tertiary: color-mix(in oklab, #fff 50%, transparent);
+  --mcx-color-text-accent: #83c3ff;
+  --mcx-color-border: rgb(255 255 255 / 8.4%);
+  --mcx-color-border-heavy: rgb(255 255 255 / 15.6%);
+  --mcx-color-border-focus: rgb(131 195 255 / 76%);
+  --mcx-color-token-list-hover-background: rgb(255 255 255 / 7.8%);
+  --mcx-color-token-input-background: rgb(45 45 45 / 96%);
+  --mcx-color-token-input-border: rgb(255 255 255 / 15.6%);
+  --mcx-color-token-input-foreground: #fff;
+  --mcx-color-token-input-placeholder-foreground: rgb(255 255 255 / 49.8%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     color-scheme: dark;
-    --color-token-main-surface-primary: #181818;
-    --color-token-bg-primary: #141414;
-    --color-token-bg-secondary: color-mix(in srgb, #141414 92%, transparent);
-    --color-surface-tertiary: rgb(40 40 40);
-    --color-surface-elevated-secondary: rgb(45 45 45);
-    --color-border-subtle: rgb(255 255 255 / 4.2%);
-    --color-background-primary-ghost-hover: rgb(255 255 255 / 7.8%);
-    --color-chart-blue: #339cff;
-    --color-text-inverse: rgb(13 13 13);
-    --color-background-elevated-primary-opaque: #363636;
-    --color-background-panel: #232323;
-    --color-background-primary-solid: #fff;
-    --color-text-primary-solid: #2d2d2d;
-    --color-background-button-secondary: rgb(255 255 255 / 5.2%);
-    --color-background-button-secondary-hover: rgb(255 255 255 / 7.8%);
-    --color-background-button-tertiary-hover: rgb(255 255 255 / 6.8%);
-    --color-text-foreground: #fff;
-    --color-text-foreground-secondary: rgb(255 255 255 / 71%);
-    --color-text-foreground-tertiary: rgb(255 255 255 / 49.8%);
-    --color-icon-tertiary: color-mix(in oklab, #fff 50%, transparent);
-    --color-text-accent: #83c3ff;
-    --color-border: rgb(255 255 255 / 8.4%);
-    --color-border-heavy: rgb(255 255 255 / 15.6%);
-    --color-border-focus: rgb(131 195 255 / 76%);
-    --color-token-list-hover-background: rgb(255 255 255 / 7.8%);
-    --color-token-input-background: rgb(45 45 45 / 96%);
-    --color-token-input-border: rgb(255 255 255 / 15.6%);
-    --color-token-input-foreground: #fff;
-    --color-token-input-placeholder-foreground: rgb(255 255 255 / 49.8%);
+    --mcx-color-token-main-surface-primary: #181818;
+    --mcx-color-token-bg-primary: #141414;
+    --mcx-color-token-bg-secondary: color-mix(in srgb, #141414 92%, transparent);
+    --mcx-color-surface-tertiary: rgb(40 40 40);
+    --mcx-color-surface-elevated-secondary: rgb(45 45 45);
+    --mcx-color-border-subtle: rgb(255 255 255 / 4.2%);
+    --mcx-color-background-primary-ghost-hover: rgb(255 255 255 / 7.8%);
+    --mcx-color-chart-blue: #339cff;
+    --mcx-color-text-inverse: rgb(13 13 13);
+    --mcx-color-background-elevated-primary-opaque: #363636;
+    --mcx-color-background-panel: #232323;
+    --mcx-color-background-primary-solid: #fff;
+    --mcx-color-text-primary-solid: #2d2d2d;
+    --mcx-color-background-button-secondary: rgb(255 255 255 / 5.2%);
+    --mcx-color-background-button-secondary-hover: rgb(255 255 255 / 7.8%);
+    --mcx-color-background-button-tertiary-hover: rgb(255 255 255 / 6.8%);
+    --mcx-color-text-foreground: #fff;
+    --mcx-color-text-foreground-secondary: rgb(255 255 255 / 71%);
+    --mcx-color-text-foreground-tertiary: rgb(255 255 255 / 49.8%);
+    --mcx-color-icon-tertiary: color-mix(in oklab, #fff 50%, transparent);
+    --mcx-color-text-accent: #83c3ff;
+    --mcx-color-border: rgb(255 255 255 / 8.4%);
+    --mcx-color-border-heavy: rgb(255 255 255 / 15.6%);
+    --mcx-color-border-focus: rgb(131 195 255 / 76%);
+    --mcx-color-token-list-hover-background: rgb(255 255 255 / 7.8%);
+    --mcx-color-token-input-background: rgb(45 45 45 / 96%);
+    --mcx-color-token-input-border: rgb(255 255 255 / 15.6%);
+    --mcx-color-token-input-foreground: #fff;
+    --mcx-color-token-input-placeholder-foreground: rgb(255 255 255 / 49.8%);
   }
 }
 
@@ -129,13 +129,13 @@ html,
 body {
   min-height: 100%;
   margin: 0;
-  background: var(--color-token-main-surface-primary);
+  background: var(--mcx-color-token-main-surface-primary);
 }
 
 body {
   min-width: 320px;
-  color: var(--color-text-foreground);
-  font: 400 var(--text-base)/1.5 var(--font-sans-default);
+  color: var(--mcx-color-text-foreground);
+  font: 400 var(--mcx-text-base)/1.5 var(--mcx-font-sans-default);
   -webkit-font-smoothing: antialiased;
 }
 
@@ -165,7 +165,7 @@ button { color: inherit; }
   height: 100vh;
   display: flex;
   overflow: hidden;
-  background: var(--color-token-main-surface-primary);
+  background: var(--mcx-color-token-main-surface-primary);
 }
 
 /* 侧栏分界不占用布局宽度。 */
@@ -175,7 +175,7 @@ button { color: inherit; }
   z-index: 12;
   inset: 0 auto 0 0;
   width: 1px;
-  background: var(--color-border);
+  background: var(--mcx-color-border);
   pointer-events: none;
 }
 
@@ -211,7 +211,7 @@ button { color: inherit; }
 .library-scroll,
 .drawer-scroll,
 .source-menu {
-  scrollbar-color: var(--color-token-scrollbar-slider-background) transparent;
+  scrollbar-color: var(--mcx-color-token-scrollbar-slider-background) transparent;
 }
 
 .library-scroll::-webkit-scrollbar { width: 12px; }
@@ -227,19 +227,19 @@ button { color: inherit; }
 .library-scroll::-webkit-scrollbar-thumb,
 .drawer-scroll::-webkit-scrollbar-thumb,
 .source-menu::-webkit-scrollbar-thumb {
-  background-color: var(--color-token-scrollbar-slider-background);
+  background-color: var(--mcx-color-token-scrollbar-slider-background);
 }
 
 .library-scroll::-webkit-scrollbar-thumb:hover,
 .drawer-scroll::-webkit-scrollbar-thumb:hover,
 .source-menu::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-token-scrollbar-slider-hover-background);
+  background-color: var(--mcx-color-token-scrollbar-slider-hover-background);
 }
 
 .library-scroll::-webkit-scrollbar-thumb:active,
 .drawer-scroll::-webkit-scrollbar-thumb:active,
 .source-menu::-webkit-scrollbar-thumb:active {
-  background-color: var(--color-token-scrollbar-slider-active-background);
+  background-color: var(--mcx-color-token-scrollbar-slider-active-background);
 }
 
 .library-header,
@@ -247,8 +247,8 @@ button { color: inherit; }
   height: 72px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-token-main-surface-primary);
+  border-bottom: 1px solid var(--mcx-color-border);
+  background: var(--mcx-color-token-main-surface-primary);
 }
 
 .library-header {
@@ -284,7 +284,7 @@ p { margin: 0; }
 
 h1,
 .drawer-header h2 {
-  font-size: var(--text-base);
+  font-size: var(--mcx-text-base);
   font-weight: 600;
   letter-spacing: -0.01em;
 }
@@ -338,17 +338,17 @@ h1,
   align-items: center;
   gap: 6px;
   padding: 0 14px;
-  color: var(--color-text-foreground-secondary);
+  color: var(--mcx-color-text-foreground-secondary);
   background: transparent;
   cursor: pointer;
-  font-size: var(--text-sm);
+  font-size: var(--mcx-text-sm);
   font-weight: 500;
 }
 
 .toolbar-button:hover,
 .toolbar-button[aria-expanded="true"] {
-  color: var(--color-text-foreground);
-  background: var(--color-background-button-tertiary-hover);
+  color: var(--mcx-color-text-foreground);
+  background: var(--mcx-color-background-button-tertiary-hover);
 }
 
 .source-filter-button {
@@ -379,7 +379,7 @@ h1,
 .filter-count,
 .source-option-count,
 .density-button-value {
-  color: var(--color-text-foreground-tertiary);
+  color: var(--mcx-color-text-foreground-tertiary);
   font-variant-numeric: tabular-nums;
 }
 
@@ -400,7 +400,7 @@ h1,
 }
 
 .source-filter-button:hover,
-.source-filter-button[aria-expanded="true"] { background: var(--color-background-button-secondary-hover); }
+.source-filter-button[aria-expanded="true"] { background: var(--mcx-color-background-button-secondary-hover); }
 .source-filter-button[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }
 
 .source-menu {
@@ -409,8 +409,8 @@ h1,
   z-index: 20;
   border: 0;
   border-radius: 16px;
-  background: var(--color-background-elevated-primary-opaque);
-  box-shadow: 0 8px 32px var(--color-border-heavy);
+  background: var(--mcx-color-background-elevated-primary-opaque);
+  box-shadow: 0 8px 32px var(--mcx-color-border-heavy);
 }
 
 .source-menu[hidden] { display: none; }
@@ -440,17 +440,17 @@ h1,
   align-items: center;
   gap: 7px;
   padding: 8px 10px;
-  color: var(--color-text-foreground-secondary);
+  color: var(--mcx-color-text-foreground-secondary);
   background: transparent;
   cursor: pointer;
   text-align: left;
-  font-size: var(--text-sm);
+  font-size: var(--mcx-text-sm);
 }
 
 .source-option:hover,
 .source-option[aria-selected="true"] {
-  color: var(--color-text-foreground);
-  background: var(--color-token-list-hover-background);
+  color: var(--mcx-color-text-foreground);
+  background: var(--mcx-color-token-list-hover-background);
 }
 
 .source-option-label {
@@ -465,15 +465,15 @@ h1,
 .source-menu-divider {
   height: 1px;
   margin: 5px 4px;
-  background: var(--color-border);
+  background: var(--mcx-color-border);
 }
 
 .density-control { display: flex; align-items: center; }
 .density-icon { width: 14px; height: 14px; flex: 0 0 auto; }
 .source-filter-button, .density-trigger {
-  font-size: var(--text-sm);
+  font-size: var(--mcx-text-sm);
   font-weight: 400;
-  color: var(--color-icon-tertiary);
+  color: var(--mcx-color-icon-tertiary);
 }
 .density-trigger { padding-inline: 8px; }
 .density-menu { left: auto; right: 0; width: 76px; }
@@ -482,8 +482,8 @@ h1,
 .density-menu .source-option:focus-visible { outline-offset: -2px; }
 
 .group-button[aria-pressed="true"] {
-  color: var(--color-text-foreground);
-  background: var(--color-background-button-secondary-hover);
+  color: var(--mcx-color-text-foreground);
+  background: var(--mcx-color-background-button-secondary-hover);
 }
 
 .secondary-button,
@@ -491,7 +491,7 @@ h1,
 .icon-button {
   min-height: 32px;
   border: 1px solid transparent;
-  border-radius: var(--radius-md);
+  border-radius: var(--mcx-radius-md);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -499,22 +499,22 @@ h1,
   padding: 0 12px;
   color: inherit;
   cursor: pointer;
-  font-size: var(--text-sm);
+  font-size: var(--mcx-text-sm);
   font-weight: 500;
   text-decoration: none;
   transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
 }
 
 .secondary-button {
-  border-color: var(--color-border);
-  background: var(--color-background-button-secondary);
+  border-color: var(--mcx-color-border);
+  background: var(--mcx-color-background-button-secondary);
 }
 
-.secondary-button:hover { background: var(--color-background-button-secondary-hover); }
+.secondary-button:hover { background: var(--mcx-color-background-button-secondary-hover); }
 
 .primary-button {
-  color: var(--color-text-primary-solid);
-  background: var(--color-background-primary-solid);
+  color: var(--mcx-color-text-primary-solid);
+  background: var(--mcx-color-background-primary-solid);
 }
 
 .primary-button:hover { opacity: 0.88; }
@@ -524,11 +524,11 @@ h1,
   width: 28px;
   min-height: 28px;
   padding: 0;
-  color: var(--color-icon-tertiary);
+  color: var(--mcx-color-icon-tertiary);
   background: transparent;
 }
 
-.icon-button:hover { background: var(--color-background-button-tertiary-hover); }
+.icon-button:hover { background: var(--mcx-color-background-button-tertiary-hover); }
 .icon-button:disabled { opacity: 0.45; cursor: default; }
 
 .lucide {
@@ -542,7 +542,7 @@ h1,
 }
 
 .loading-ring-icon { display: none; }
-.rescan-button.is-loading { color: var(--color-text-foreground-secondary); }
+.rescan-button.is-loading { color: var(--mcx-color-text-foreground-secondary); }
 .rescan-button.is-loading .refresh-icon { display: none; }
 .rescan-button.is-loading .loading-ring-icon {
   display: block;
@@ -561,7 +561,7 @@ h1,
 .density-trigger:focus-visible,
 .image-card:focus-visible,
 .thread-board:focus-visible {
-  outline: 2px solid var(--color-border-focus);
+  outline: 2px solid var(--mcx-color-border-focus);
   outline-offset: 2px;
 }
 
@@ -593,8 +593,8 @@ h1,
   border-radius: var(--library-card-radius);
   box-shadow: var(--library-card-shadow);
   display: block;
-  color: var(--color-text-foreground);
-  background: var(--color-token-main-surface-primary);
+  color: var(--mcx-color-text-foreground);
+  background: var(--mcx-color-token-main-surface-primary);
   cursor: pointer;
   text-align: left;
   transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
@@ -605,7 +605,7 @@ h1,
 }
 
 .image-card.is-selected {
-  outline: 2px solid var(--color-border-focus);
+  outline: 2px solid var(--mcx-color-border-focus);
   outline-offset: 3px;
 }
 
@@ -613,7 +613,7 @@ h1,
   width: 100%;
   height: auto;
   display: block;
-  background: var(--color-token-bg-primary);
+  background: var(--mcx-color-token-bg-primary);
 }
 
 .thread-board-preview {
@@ -622,7 +622,7 @@ h1,
   display: flex;
   flex-direction: column;
   gap: 1px;
-  background: var(--color-border);
+  background: var(--mcx-color-border);
 }
 
 .thread-board-preview img {
@@ -632,7 +632,7 @@ h1,
   aspect-ratio: 16 / 6;
   display: block;
   object-fit: cover;
-  background: var(--color-token-bg-primary);
+  background: var(--mcx-color-token-bg-primary);
 }
 
 .thread-board-preview.is-single img {
@@ -656,7 +656,7 @@ h1,
   color: #fff;
   background: rgb(20 20 20 / 76%);
   backdrop-filter: blur(8px);
-  font-size: var(--text-xs);
+  font-size: var(--mcx-text-xs);
   font-variant-numeric: tabular-nums;
 }
 
@@ -668,14 +668,14 @@ h1,
   flex-direction: column;
   justify-content: center;
   gap: 2px;
-  background: var(--color-token-main-surface-primary);
-  font-size: var(--text-xs);
+  background: var(--mcx-color-token-main-surface-primary);
+  font-size: var(--mcx-text-xs);
   white-space: nowrap;
 }
 
 .thread-board-title {
   overflow: hidden;
-  color: var(--color-text-foreground);
+  color: var(--mcx-color-text-foreground);
   font-weight: 500;
   text-overflow: ellipsis;
 }
@@ -685,7 +685,7 @@ h1,
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  color: var(--color-text-foreground-tertiary);
+  color: var(--mcx-color-text-foreground-tertiary);
   font-variant-numeric: tabular-nums;
 }
 
@@ -694,14 +694,14 @@ h1,
   inset: auto 10px 10px;
   min-height: 48px;
   padding: 8px 12px;
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-lg);
+  border: 1px solid var(--mcx-color-border-subtle);
+  border-radius: var(--mcx-radius-lg);
   display: flex;
   flex-direction: column;
   gap: 2px;
-  background: color-mix(in srgb, var(--color-token-main-surface-primary) 94%, transparent);
+  background: color-mix(in srgb, var(--mcx-color-token-main-surface-primary) 94%, transparent);
   backdrop-filter: blur(12px);
-  font-size: var(--text-xs);
+  font-size: var(--mcx-text-xs);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
   opacity: 0;
@@ -721,7 +721,7 @@ h1,
   display: flex;
   align-items: center;
   gap: 6px;
-  color: var(--color-text-foreground-secondary);
+  color: var(--mcx-color-text-foreground-secondary);
 }
 
 .source-value > span {
@@ -738,7 +738,7 @@ h1,
 }
 
 .card-source { font-weight: 500; }
-.card-time { color: var(--color-text-foreground-tertiary); }
+.card-time { color: var(--mcx-color-text-foreground-tertiary); }
 
 .empty-state {
   width: min(420px, calc(100% - 48px));
@@ -747,8 +747,8 @@ h1,
   text-align: center;
 }
 
-.empty-state h2 { font-size: var(--text-base); font-weight: 600; }
-.empty-state p { margin-top: 6px; color: var(--color-text-foreground-secondary); font-size: var(--text-sm); }
+.empty-state h2 { font-size: var(--mcx-text-base); font-weight: 600; }
+.empty-state p { margin-top: 6px; color: var(--mcx-color-text-foreground-secondary); font-size: var(--mcx-text-sm); }
 
 .status-announcer {
   position: absolute;
@@ -770,8 +770,8 @@ h1,
   bottom: 0;
   width: 80%;
   overflow: hidden;
-  border-left: 1px solid var(--color-border);
-  background: var(--color-token-main-surface-primary);
+  border-left: 1px solid var(--mcx-color-border);
+  background: var(--mcx-color-token-main-surface-primary);
   transform: translateX(32px);
   opacity: 0;
   visibility: hidden;
@@ -800,7 +800,7 @@ h1,
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: var(--color-token-main-surface-primary);
+  background: var(--mcx-color-token-main-surface-primary);
 }
 
 .drawer-open .image-grid {
@@ -839,57 +839,57 @@ h1,
 .image-editor [hidden] { display: none !important; }
 .image-editor-controls { position: sticky; z-index: 6; top: 0; border-radius: var(--library-card-radius) var(--library-card-radius) 0 0; background: transparent; }
 .image-editor-toolbar { position: relative; display: flex; justify-content: center; min-height: 48px; padding: 8px 16px; }
-.image-edit-actions, .image-edit-mode { display: flex; min-width: 0; align-items: center; gap: 2px; padding: 2px; overflow: hidden; border-radius: 9999px; background: color-mix(in srgb, var(--color-surface-tertiary) 95%, transparent); box-shadow: 0 0 0 1px var(--color-border-subtle), var(--shadow-md); backdrop-filter: blur(4px); }
-.image-edit-action, .image-edit-mode button { display: inline-flex; height: 28px; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 999px; padding: 0 6px; background: transparent; color: var(--color-text-foreground); font-family: var(--font-sans-default); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: 18px; white-space: nowrap; cursor: pointer; }
-.image-edit-action:hover, .image-edit-action[aria-expanded="true"], .image-edit-mode button:hover { background: var(--color-background-primary-ghost-hover); }
-.image-edit-action:focus-visible, .image-edit-mode button:focus-visible, .image-zoom-trigger:focus-visible, .image-edit-menu button:focus-visible { outline: 1px solid var(--color-border-focus); outline-offset: 1px; }
-.image-edit-mode button:disabled { color: var(--color-text-foreground-tertiary); cursor: default; }
-.image-edit-mode > span { min-width: 0; overflow: hidden; padding: 0 6px; color: var(--color-text-foreground-tertiary); font-size: var(--text-base); line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
+.image-edit-actions, .image-edit-mode { display: flex; min-width: 0; align-items: center; gap: 2px; padding: 2px; overflow: hidden; border-radius: 9999px; background: color-mix(in srgb, var(--mcx-color-surface-tertiary) 95%, transparent); box-shadow: 0 0 0 1px var(--mcx-color-border-subtle), var(--mcx-shadow-md); backdrop-filter: blur(4px); }
+.image-edit-action, .image-edit-mode button { display: inline-flex; height: 28px; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 999px; padding: 0 6px; background: transparent; color: var(--mcx-color-text-foreground); font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-base); font-weight: var(--mcx-font-weight-normal); line-height: 18px; white-space: nowrap; cursor: pointer; }
+.image-edit-action:hover, .image-edit-action[aria-expanded="true"], .image-edit-mode button:hover { background: var(--mcx-color-background-primary-ghost-hover); }
+.image-edit-action:focus-visible, .image-edit-mode button:focus-visible, .image-zoom-trigger:focus-visible, .image-edit-menu button:focus-visible { outline: 1px solid var(--mcx-color-border-focus); outline-offset: 1px; }
+.image-edit-mode button:disabled { color: var(--mcx-color-text-foreground-tertiary); cursor: default; }
+.image-edit-mode > span { min-width: 0; overflow: hidden; padding: 0 6px; color: var(--mcx-color-text-foreground-tertiary); font-size: var(--mcx-text-base); line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
 .image-edit-mode button { width: 28px; padding: 0; flex: 0 0 auto; }
 .image-edit-mode button > svg { width: 16px; height: 16px; fill: currentColor; }
 .image-edit-mode button[aria-label="Redo"] > svg { transform: scaleX(-1); }
-.image-edit-mode [data-edit-cancel] { color: var(--color-text-foreground-tertiary); }
+.image-edit-mode [data-edit-cancel] { color: var(--mcx-color-text-foreground-tertiary); }
 .image-edit-mode [data-edit-cancel] > svg { width: 14px; height: 14px; }
-.image-edit-mode [data-edit-send] { width: auto; padding: 0 6px; background: var(--color-chart-blue); color: var(--color-text-inverse); }
-.image-edit-mode [data-edit-send]:hover { background: color-mix(in srgb, var(--color-chart-blue) 90%, transparent); }
-.image-edit-mode [data-edit-send]:disabled { color: var(--color-text-inverse); opacity: .4; }
-.image-zoom-trigger { position: absolute; top: 8px; right: 10px; height: 28px; display: inline-flex; align-items: center; gap: 2px; border: 1px solid transparent; border-radius: var(--radius-lg); padding: 0 8px; background: transparent; color: var(--color-text-foreground-tertiary); cursor: pointer; font-family: var(--font-sans-default); font-size: var(--text-sm); font-weight: var(--font-weight-normal); line-height: 20px; font-variant-numeric: tabular-nums; }
-.image-zoom-trigger:hover, .image-zoom-trigger[aria-expanded="true"] { background: var(--color-background-primary-ghost-hover); }
+.image-edit-mode [data-edit-send] { width: auto; padding: 0 6px; background: var(--mcx-color-chart-blue); color: var(--mcx-color-text-inverse); }
+.image-edit-mode [data-edit-send]:hover { background: color-mix(in srgb, var(--mcx-color-chart-blue) 90%, transparent); }
+.image-edit-mode [data-edit-send]:disabled { color: var(--mcx-color-text-inverse); opacity: .4; }
+.image-zoom-trigger { position: absolute; top: 8px; right: 10px; height: 28px; display: inline-flex; align-items: center; gap: 2px; border: 1px solid transparent; border-radius: var(--mcx-radius-lg); padding: 0 8px; background: transparent; color: var(--mcx-color-text-foreground-tertiary); cursor: pointer; font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-sm); font-weight: var(--mcx-font-weight-normal); line-height: 20px; font-variant-numeric: tabular-nums; }
+.image-zoom-trigger:hover, .image-zoom-trigger[aria-expanded="true"] { background: var(--mcx-color-background-primary-ghost-hover); }
 .image-zoom-trigger [data-zoom-chevron] { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .5; }
-.image-edit-menu { position: absolute; z-index: 8; width: 160px; padding: 4px; border: 0; border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-surface-elevated-secondary) 90%, transparent); box-shadow: 0 0 0 .5px var(--color-border), var(--shadow-xl); backdrop-filter: blur(4px); }
-.image-edit-menu button { display: flex; width: 100%; align-items: center; gap: 6px; border: 0; border-radius: var(--radius-lg); padding: 5px 8px; background: transparent; color: var(--color-text-foreground); font-family: var(--font-sans-default); font-size: var(--text-sm); font-weight: var(--font-weight-normal); line-height: var(--text-sm--line-height); text-align: left; cursor: pointer; }
-.image-edit-menu button:hover { background: var(--color-background-primary-ghost-hover); }
+.image-edit-menu { position: absolute; z-index: 8; width: 160px; padding: 4px; border: 0; border-radius: var(--mcx-radius-xl); background: color-mix(in srgb, var(--mcx-color-surface-elevated-secondary) 90%, transparent); box-shadow: 0 0 0 .5px var(--mcx-color-border), var(--mcx-shadow-xl); backdrop-filter: blur(4px); }
+.image-edit-menu button { display: flex; width: 100%; align-items: center; gap: 6px; border: 0; border-radius: var(--mcx-radius-lg); padding: 5px 8px; background: transparent; color: var(--mcx-color-text-foreground); font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-sm); font-weight: var(--mcx-font-weight-normal); line-height: var(--mcx-text-sm--line-height); text-align: left; cursor: pointer; }
+.image-edit-menu button:hover { background: var(--mcx-color-background-primary-ghost-hover); }
 .image-ratio-label { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
-.image-ratio-label small { margin: 0; color: var(--color-text-foreground-tertiary); font-size: inherit; }
+.image-ratio-label small { margin: 0; color: var(--mcx-color-text-foreground-tertiary); font-size: inherit; }
 .image-ratio-icon { display: block; width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; opacity: .75; }
 .image-menu-check { width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; opacity: .75; }
 .image-menu-check.is-hidden { visibility: hidden; }
-.image-menu-separator { height: 1px; margin: 0 8px; background: var(--color-border); }
+.image-menu-separator { height: 1px; margin: 0 8px; background: var(--mcx-color-border); }
 .image-zoom-menu { width: 136px; padding: 6px; border-radius: 10px; }
 .image-zoom-menu button { border-radius: 6px; padding: 5px 5px 5px 8px; line-height: 20px; }
 .image-editor-stage { position: relative; overflow: auto; border-radius: var(--library-card-radius); touch-action: none; }
 .image-editor-stage img { transform-origin: center; transition: transform 120ms ease-out; }
 .image-edit-mask, .image-comment-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
-.image-edit-mask { cursor: crosshair; opacity: .5; color: var(--color-text-accent); }
+.image-edit-mask { cursor: crosshair; opacity: .5; color: var(--mcx-color-text-accent); }
 .image-comment-layer { pointer-events: none; }
-.image-comment-marker { position: absolute; display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; color: var(--color-text-accent); font-family: var(--font-sans-default); transform: translate(-50%, -50%); }
+.image-comment-marker { position: absolute; display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; color: var(--mcx-color-text-accent); font-family: var(--mcx-font-sans-default); transform: translate(-50%, -50%); }
 button.image-comment-marker { pointer-events: auto; cursor: pointer; }
 .image-comment-marker > svg { position: absolute; inset: 0; width: 30px; height: 30px; fill: currentColor; overflow: visible; stroke: white; stroke-width: 1.65; }
 .image-comment-marker > span { position: relative; z-index: 1; color: white; font-size: 10px; font-weight: 700; line-height: 10px; transform: translate(-1px, -1px); }
-.image-comment-popover { position: absolute; z-index: 4; width: min(294px, calc(100% - 16px)); height: 44px; padding: 8px 8px 8px 16px; border: 0; border-radius: 22px; background: var(--color-surface-elevated-secondary); box-shadow: 0 0 0 1px var(--color-border-subtle), var(--shadow-md); }
-.image-comment-popover input { width: 100%; height: 28px; border: 0; padding: 0; outline: 0; background: transparent; color: var(--color-token-input-foreground); font-family: var(--font-sans-default); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: 21px; }
+.image-comment-popover { position: absolute; z-index: 4; width: min(294px, calc(100% - 16px)); height: 44px; padding: 8px 8px 8px 16px; border: 0; border-radius: 22px; background: var(--mcx-color-surface-elevated-secondary); box-shadow: 0 0 0 1px var(--mcx-color-border-subtle), var(--mcx-shadow-md); }
+.image-comment-popover input { width: 100%; height: 28px; border: 0; padding: 0; outline: 0; background: transparent; color: var(--mcx-color-token-input-foreground); font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-base); font-weight: var(--mcx-font-weight-normal); line-height: 21px; }
 .image-comment-popover.is-existing-comment { height: 120px; padding: 8px 12px 8px 16px; }
-.image-comment-popover textarea { display: block; width: 100%; height: 60px; resize: none; border: 0; padding: 2px 0 0; outline: 0; background: transparent; color: var(--color-token-input-foreground); font-family: var(--font-sans-default); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: 24px; }
+.image-comment-popover textarea { display: block; width: 100%; height: 60px; resize: none; border: 0; padding: 2px 0 0; outline: 0; background: transparent; color: var(--mcx-color-token-input-foreground); font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-base); font-weight: var(--mcx-font-weight-normal); line-height: 24px; }
 .image-comment-editor-footer { height: 44px; display: flex; align-items: end; justify-content: space-between; }
 .image-comment-editor-actions { display: flex; gap: 6px; }
-.image-comment-editor-footer button { height: 28px; border: 1px solid var(--color-border); border-radius: 999px; padding: 0 8px; background: color-mix(in srgb, var(--color-token-main-surface-primary) 96%, transparent); color: var(--color-text-foreground); font-family: var(--font-sans-default); font-size: var(--text-sm); font-weight: var(--font-weight-normal); line-height: 18px; cursor: pointer; }
-.image-comment-editor-footer button:hover { background: var(--color-background-primary-ghost-hover); }
+.image-comment-editor-footer button { height: 28px; border: 1px solid var(--mcx-color-border); border-radius: 999px; padding: 0 8px; background: color-mix(in srgb, var(--mcx-color-token-main-surface-primary) 96%, transparent); color: var(--mcx-color-text-foreground); font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-sm); font-weight: var(--mcx-font-weight-normal); line-height: 18px; cursor: pointer; }
+.image-comment-editor-footer button:hover { background: var(--mcx-color-background-primary-ghost-hover); }
 .image-comment-editor-footer .image-comment-delete { width: 28px; padding: 0; border-color: transparent; background: transparent; }
 .image-comment-delete > svg { width: 20px; height: 20px; fill: currentColor; }
-.image-comment-editor-footer .image-comment-save { border-color: transparent; background: var(--color-background-primary-solid); color: var(--color-text-button-primary); }
+.image-comment-editor-footer .image-comment-save { border-color: transparent; background: var(--mcx-color-background-primary-solid); color: var(--mcx-color-text-button-primary); }
 .image-comment-editor-footer button:disabled { cursor: default; opacity: .4; }
 .image-brush-slider { position: absolute; z-index: 3; top: 50%; left: 16px; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
-.image-brush-slider input { accent-color: var(--color-text-accent); }
+.image-brush-slider input { accent-color: var(--mcx-color-text-accent); }
 .image-edit-menu[data-resize-menu] { top: 48px; left: 50%; transform: translateX(-50%); }
 .image-zoom-menu { top: 48px; right: 10px; }
 .image-edit-action > svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
@@ -903,7 +903,7 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
   max-height: min(68vh, 720px);
   display: block;
   object-fit: contain;
-  border-radius: var(--radius-md);
+  border-radius: var(--mcx-radius-md);
 }
 
 .detail-section {
@@ -912,12 +912,12 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
   border-top: 0;
 }
 
-.detail-section + .detail-section { border-top: 1px solid var(--color-border-subtle); }
+.detail-section + .detail-section { border-top: 1px solid var(--mcx-color-border-subtle); }
 
 .detail-section h3 {
   margin-bottom: 10px;
-  color: var(--color-text-foreground);
-  font-size: var(--text-sm);
+  color: var(--mcx-color-text-foreground);
+  font-size: var(--mcx-text-sm);
   font-weight: 600;
 }
 
@@ -938,21 +938,21 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
 }
 
 .prompt-copy-button.is-copied {
-  color: var(--color-text-foreground);
-  background: var(--color-background-button-secondary);
+  color: var(--mcx-color-text-foreground);
+  background: var(--mcx-color-background-button-secondary);
 }
 .prompt-copy-button svg[hidden] { display: none; }
 
 .drawer-prompt {
   overflow-wrap: anywhere;
   white-space: pre-wrap;
-  color: var(--color-text-foreground-secondary);
-  font-size: var(--text-sm);
+  color: var(--mcx-color-text-foreground-secondary);
+  font-size: var(--mcx-text-sm);
   line-height: 1.75;
 }
 
 .drawer-prompt.is-loading,
-.drawer-prompt.is-missing { color: var(--color-text-foreground-tertiary); }
+.drawer-prompt.is-missing { color: var(--mcx-color-text-foreground-tertiary); }
 
 .image-information { margin: 0; }
 
@@ -967,15 +967,15 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
 .image-information div[hidden] { display: none; }
 
 .image-information dt {
-  color: var(--color-text-foreground-tertiary);
-  font-size: var(--text-xs);
+  color: var(--mcx-color-text-foreground-tertiary);
+  font-size: var(--mcx-text-xs);
 }
 
 .image-information dd {
   min-width: 0;
   margin: 0;
-  color: var(--color-text-foreground-secondary);
-  font-size: var(--text-xs);
+  color: var(--mcx-color-text-foreground-secondary);
+  font-size: var(--mcx-text-xs);
   font-variant-numeric: tabular-nums;
 }
 
@@ -987,8 +987,8 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
   grid-template-columns: repeat(2, minmax(0, 144px));
   justify-content: end;
   gap: 12px;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-token-main-surface-primary);
+  border-top: 1px solid var(--mcx-color-border);
+  background: var(--mcx-color-token-main-surface-primary);
 }
 
 .source-action {
@@ -1020,12 +1020,12 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
   width: max-content;
   max-width: min(260px, 70vw);
   padding: 6px 8px;
-  border: 1px solid var(--color-border-heavy);
+  border: 1px solid var(--mcx-color-border-heavy);
   border-radius: 7px;
-  color: var(--color-text-foreground);
-  background: var(--color-background-elevated-primary-opaque);
-  box-shadow: var(--shadow-xl);
-  font-size: var(--text-xs);
+  color: var(--mcx-color-text-foreground);
+  background: var(--mcx-color-background-elevated-primary-opaque);
+  box-shadow: var(--mcx-shadow-xl);
+  font-size: var(--mcx-text-xs);
   font-weight: 400;
   line-height: 1.35;
   text-align: center;
@@ -1102,13 +1102,13 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
 .new-images-chip {
   position: absolute; z-index: 5; top: 12px; left: 50%; transform: translateX(-50%);
   display: flex; align-items: center; gap: 8px;
-  min-height: 36px; padding: 8px 16px; border: 1px solid var(--color-border);
-  border-radius: 999px; background: var(--color-surface-elevated-secondary);
-  color: var(--color-text-foreground); font: 500 13px/18px var(--font-sans-default);
+  min-height: 36px; padding: 8px 16px; border: 1px solid var(--mcx-color-border);
+  border-radius: 999px; background: var(--mcx-color-surface-elevated-secondary);
+  color: var(--mcx-color-text-foreground); font: 500 13px/18px var(--mcx-font-sans-default);
   box-shadow: 0 2px 6px #0000000a, 0 8px 24px #00000014;
   white-space: nowrap; cursor: pointer; -webkit-app-region: no-drag;
 }
-.new-images-chip:hover { background: var(--color-background-panel); }
-.new-images-chip:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 3px; }
+.new-images-chip:hover { background: var(--mcx-color-background-panel); }
+.new-images-chip:focus-visible { outline: 2px solid var(--mcx-color-border-focus); outline-offset: 3px; }
 .new-images-arrow { font-size: 18px; line-height: 18px; }
 .new-images-chip[hidden], .drawer-open .new-images-chip, .thread-context .new-images-chip { display: none; }