feat: add visual theme indicators and fix logo colors for dev/staging environments

src/components/layouts/PublicLayout.tsx

@@ -1,15 +1,19 @@
 import { Outlet, Link } from "react-router-dom";
 import { SecuirdLogo } from "@/components/branding/SecuirdLogo";
+import { ThemeIndicator } from "@/components/branding/ThemeIndicator";
 import { config } from "@/config";
 
 export default function PublicLayout() {
   return (
     <div className="min-h-screen bg-background flex flex-col">
+      {/* Theme indicator banner for dev/staging */}
+      <ThemeIndicator />
+      
       {/* Subtle gradient background */}
       <div className="fixed inset-0 bg-gradient-to-br from-background via-background to-secondary/30 pointer-events-none" />
       
-      {/* Header */}
-      <header className="relative z-10 w-full py-6 px-4">
+      {/* Header with theme-colored border */}
+      <header className="relative z-10 w-full py-6 px-4 marketing-header">
         <div className="max-w-md mx-auto">
           <Link to="/" className="flex items-center gap-2.5 justify-center">
             <SecuirdLogo size="md" />