diff --git a/adminfront/src/index.css b/adminfront/src/index.css
index 20ef470f..61376c48 100644
--- a/adminfront/src/index.css
+++ b/adminfront/src/index.css
@@ -1,3 +1,5 @@
+@import "../../../common/theme/base.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -24,37 +26,8 @@
     --input: 215 25% 24%;
     --ring: 209 79% 52%;
     --radius: 0.75rem;
-  }
-
-  .light {
-    --background: 0 0% 98%;
-    --foreground: 223 25% 12%;
-    --card: 0 0% 100%;
-    --card-foreground: 223 25% 12%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 223 25% 12%;
-    --primary: 209 79% 52%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 220 17% 94%;
-    --secondary-foreground: 223 25% 20%;
-    --muted: 223 15% 45%;
-    --muted-foreground: 223 15% 45%;
-    --accent: 40 96% 62%;
-    --accent-foreground: 223 25% 12%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 220 17% 90%;
-    --input: 220 17% 90%;
-    --ring: 209 79% 52%;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply min-h-screen bg-background font-sans text-foreground antialiased;
-    background-image: radial-gradient(
+    --app-background-image:
+      radial-gradient(
         circle at 10% 18%,
         rgba(54, 211, 153, 0.16),
         transparent 28%
@@ -70,14 +43,4 @@
         transparent 30%
       );
   }
-
-  a {
-    @apply text-inherit no-underline;
-  }
-}
-
-@layer components {
-  .glass-panel {
-    @apply rounded-2xl border border-border bg-card/85 shadow-card backdrop-blur;
-  }
 }
diff --git a/common/theme/.gitkeep b/common/theme/.gitkeep
deleted file mode 100644
index 8b137891..00000000
--- a/common/theme/.gitkeep
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/common/theme/base.css b/common/theme/base.css
new file mode 100644
index 00000000..4dad08ee
--- /dev/null
+++ b/common/theme/base.css
@@ -0,0 +1,64 @@
+@layer base {
+  .light {
+    --background: 0 0% 98%;
+    --foreground: 223 25% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 223 25% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 223 25% 12%;
+    --primary: 209 79% 52%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 220 17% 94%;
+    --secondary-foreground: 223 25% 20%;
+    --muted: 223 15% 45%;
+    --muted-foreground: 223 15% 45%;
+    --accent: 40 96% 62%;
+    --accent-foreground: 223 25% 12%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 220 17% 90%;
+    --input: 220 17% 90%;
+    --ring: 209 79% 52%;
+  }
+
+  .dark {
+    --background: 210 25% 6%;
+    --foreground: 210 35% 96%;
+    --card: 215 32% 9%;
+    --card-foreground: 210 35% 96%;
+    --popover: 215 32% 9%;
+    --popover-foreground: 210 35% 96%;
+    --primary: 209 79% 52%;
+    --primary-foreground: 210 35% 96%;
+    --secondary: 215 25% 16%;
+    --secondary-foreground: 210 35% 96%;
+    --muted: 215 15% 65%;
+    --muted-foreground: 215 15% 65%;
+    --accent: 42 95% 57%;
+    --accent-foreground: 215 25% 10%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 210 35% 96%;
+    --border: 215 25% 24%;
+    --input: 215 25% 24%;
+    --ring: 209 79% 52%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply min-h-screen bg-background font-sans text-foreground antialiased;
+    background-image: var(--app-background-image, none);
+  }
+
+  a {
+    @apply text-inherit no-underline;
+  }
+}
+
+@layer components {
+  .glass-panel {
+    @apply rounded-2xl border border-border bg-card/85 shadow-card backdrop-blur;
+  }
+}
diff --git a/devfront/src/index.css b/devfront/src/index.css
index 20ef470f..61376c48 100644
--- a/devfront/src/index.css
+++ b/devfront/src/index.css
@@ -1,3 +1,5 @@
+@import "../../../common/theme/base.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -24,37 +26,8 @@
     --input: 215 25% 24%;
     --ring: 209 79% 52%;
     --radius: 0.75rem;
-  }
-
-  .light {
-    --background: 0 0% 98%;
-    --foreground: 223 25% 12%;
-    --card: 0 0% 100%;
-    --card-foreground: 223 25% 12%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 223 25% 12%;
-    --primary: 209 79% 52%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 220 17% 94%;
-    --secondary-foreground: 223 25% 20%;
-    --muted: 223 15% 45%;
-    --muted-foreground: 223 15% 45%;
-    --accent: 40 96% 62%;
-    --accent-foreground: 223 25% 12%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 220 17% 90%;
-    --input: 220 17% 90%;
-    --ring: 209 79% 52%;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply min-h-screen bg-background font-sans text-foreground antialiased;
-    background-image: radial-gradient(
+    --app-background-image:
+      radial-gradient(
         circle at 10% 18%,
         rgba(54, 211, 153, 0.16),
         transparent 28%
@@ -70,14 +43,4 @@
         transparent 30%
       );
   }
-
-  a {
-    @apply text-inherit no-underline;
-  }
-}
-
-@layer components {
-  .glass-panel {
-    @apply rounded-2xl border border-border bg-card/85 shadow-card backdrop-blur;
-  }
 }
diff --git a/orgfront/src/index.css b/orgfront/src/index.css
index 16b46338..df0c3490 100644
--- a/orgfront/src/index.css
+++ b/orgfront/src/index.css
@@ -1,3 +1,5 @@
+@import "../../../common/theme/base.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -24,72 +26,10 @@
     --input: 220 17% 90%;
     --ring: 209 79% 52%;
     --radius: 0.75rem;
-  }
-
-  .light {
-    --background: 0 0% 98%;
-    --foreground: 223 25% 12%;
-    --card: 0 0% 100%;
-    --card-foreground: 223 25% 12%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 223 25% 12%;
-    --primary: 209 79% 52%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 220 17% 94%;
-    --secondary-foreground: 223 25% 20%;
-    --muted: 223 15% 45%;
-    --muted-foreground: 223 15% 45%;
-    --accent: 40 96% 62%;
-    --accent-foreground: 223 25% 12%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 220 17% 90%;
-    --input: 220 17% 90%;
-    --ring: 209 79% 52%;
-  }
-
-  .dark {
-    --background: 210 25% 6%;
-    --foreground: 210 35% 96%;
-    --card: 215 32% 9%;
-    --card-foreground: 210 35% 96%;
-    --popover: 215 32% 9%;
-    --popover-foreground: 210 35% 96%;
-    --primary: 209 79% 52%;
-    --primary-foreground: 210 35% 96%;
-    --secondary: 215 25% 16%;
-    --secondary-foreground: 210 35% 96%;
-    --muted: 215 15% 65%;
-    --muted-foreground: 215 15% 65%;
-    --accent: 42 95% 57%;
-    --accent-foreground: 215 25% 10%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 210 35% 96%;
-    --border: 215 25% 24%;
-    --input: 215 25% 24%;
-    --ring: 209 79% 52%;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply min-h-screen bg-background font-sans text-foreground antialiased;
-    background-image: linear-gradient(
+    --app-background-image: linear-gradient(
       180deg,
       hsl(var(--background)) 0%,
       hsl(var(--secondary) / 0.35) 100%
     );
   }
-
-  a {
-    @apply text-inherit no-underline;
-  }
-}
-
-@layer components {
-  .glass-panel {
-    @apply rounded-2xl border border-border bg-card/85 shadow-card backdrop-blur;
-  }
 }