diff --git a/frontend/index.html b/frontend/index.html
index 3bc1144..bb83021 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,9 +9,9 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <title>UMBRA</title>
     <script>
-      // Inject a <style> tag with accent color vars before React hydrates.
-      // Uses a style element (not inline style attr) because Vite's CSS
-      // injection strips the html element's style attribute.
+      // Apply accent color with !important inline styles — highest CSS priority.
+      // Beats all stylesheet rules regardless of @layer, specificity, or source order.
+      // useTheme.ts updates these with !important when settings load from the API.
       (function() {
         var h = '187', s = '85.7%', l = '53.3%';
         try {
@@ -23,10 +23,10 @@
             if (p.l) l = p.l;
           }
         } catch(e) {}
-        var el = document.createElement('style');
-        el.id = 'umbra-accent';
-        el.textContent = ':root{--accent-h:' + h + ';--accent-s:' + s + ';--accent-l:' + l + '}';
-        document.head.appendChild(el);
+        var d = document.documentElement.style;
+        d.setProperty('--accent-h', h, 'important');
+        d.setProperty('--accent-s', s, 'important');
+        d.setProperty('--accent-l', l, 'important');
       })();
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
index 743a18f..b1d0590 100644
--- a/frontend/src/hooks/useTheme.ts
+++ b/frontend/src/hooks/useTheme.ts
@@ -16,8 +16,8 @@ export function useTheme() {
   const { settings } = useSettings();
 
   // Only apply accent color once settings have loaded from the API.
-  // The <style id="umbra-accent"> tag in index.html handles initial paint.
-  // Firing this effect with settings=undefined would overwrite the cache with cyan.
+  // The inline script in index.html handles initial paint from localStorage.
+  // Both use !important inline styles — the highest CSS cascade priority.
   useEffect(() => {
     if (!settings) return;
 
@@ -29,15 +29,10 @@ export function useTheme() {
     const s = `${preset.s}%`;
     const l = `${preset.l}%`;
 
-    // Update the injected <style> tag (survives Vite CSS injection, unlike inline styles)
-    const el = document.getElementById('umbra-accent');
-    if (el) {
-      el.textContent = `:root{--accent-h:${h};--accent-s:${s};--accent-l:${l}}`;
-    }
-    // Also set inline styles as a belt-and-suspenders fallback
-    document.documentElement.style.setProperty('--accent-h', h);
-    document.documentElement.style.setProperty('--accent-s', s);
-    document.documentElement.style.setProperty('--accent-l', l);
+    const d = document.documentElement.style;
+    d.setProperty('--accent-h', h, 'important');
+    d.setProperty('--accent-s', s, 'important');
+    d.setProperty('--accent-l', l, 'important');
 
     try {
       localStorage.setItem('umbra-accent-color', JSON.stringify({ h, s, l }));