diff --git a/src/app/globals.css b/src/app/globals.css
index 51fcd5e..381a2be 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -43,10 +43,16 @@
 /* Source the JS config for extended theme values */
 @config "../../tailwind.config.ts";
 
-/* Tremor generates Tailwind utility classes dynamically (fill-blue-500, bg-emerald-500, etc.)
-   Tailwind v4 needs to scan Tremor's compiled JS to include them in the output. */
+/* Tremor generates Tailwind utility classes dynamically via template literals
+   (e.g. `fill-${color}-${shade}`). Tailwind v4's scanner cannot detect these,
+   so we must explicitly safelist every color+shade+property combination. */
 @source "../../node_modules/@tremor/react/dist/**/*.js";
 
+/* Safelist Tremor chart color utilities — all colors × key shades × fill/stroke/bg */
+@source inline("{fill,stroke,bg,text}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
+@source inline("hover:{bg,text,border}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
+@source inline("{border,ring}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
+
 /* Theme variables - using CSS custom properties with Tailwind v4 @theme */
 @theme {
   /* Container */