Fixed Forest Theme

src/app/client-portal/settings/page.tsx

@@ -34,6 +34,7 @@ const bgOptions = [
   { value: "cyber2", label: "Cyber 2.0", color: "bg-gradient-to-r from-cyan-400 to-fuchsia-500", ring: "ring-cyan-400", desc: "Neon grid with glow" },
   { value: "pumpkin", label: "Pumpkin Spice", color: "bg-gradient-to-r from-orange-600 to-amber-500", ring: "ring-orange-600", desc: "Warm autumn orange" },
   { value: "bw", label: "Black & White", color: "bg-gradient-to-r from-gray-900 to-gray-400", ring: "ring-gray-500", desc: "Clean monochrome" },
+  { value: "forest", label: "Forest", color: "bg-gradient-to-r from-green-700 to-green-400", ring: "ring-green-600", desc: "Earthy greens with tree silhouettes" },
 ]
 
 function getStoredColorTheme(): string {

src/app/layout.tsx

@@ -12,6 +12,7 @@ import "../../Web_Backgrounds/cyber2-theme.css"
 import "../../Web_Backgrounds/pumpkin-theme.css"
 import "../../Web_Backgrounds/bw-theme.css"
 import "../../Web_Backgrounds/luminous-theme.css"
+import "../../Web_Backgrounds/forest-theme.css"
 
 const inter = Inter({
   variable: "--font-inter",

src/components/settings/theme-settings.tsx

@@ -39,6 +39,7 @@ const backgroundOptions = [
   { value: "pumpkin", label: "Pumpkin Spice", icon: Shield, color: "bg-gradient-to-r from-orange-600 to-amber-500", ring: "ring-orange-600", desc: "Warm autumn orange with spicy accents" },
   { value: "bw", label: "Black & White", icon: Shield, color: "bg-gradient-to-r from-gray-900 to-gray-400", ring: "ring-gray-500", desc: "Clean monochrome with subtle texture" },
   { value: "luminous", label: "Luminous", icon: Shield, color: "bg-gradient-to-r from-blue-500 to-teal-400", ring: "ring-blue-500", desc: "Deep Glass 2.0 — blue-teal-amber with specular highlights and 3D bevel borders" },
+  { value: "forest", label: "Forest", icon: Shield, color: "bg-gradient-to-r from-green-700 to-green-400", ring: "ring-green-600", desc: "Earthy greens with tree silhouettes and wood textures" },
 ]
 
 function getStoredColorTheme(): string {

src/providers/website-theme-provider.tsx

@@ -12,6 +12,7 @@ const themeClasses: Record<string, string> = {
   pumpkin: "theme-pumpkin",
   bw: "theme-bw",
   luminous: "theme-luminous",
+  forest: "theme-forest",
 }
 
 interface WebsiteThemeContextValue {