fix: Simplify Gitea variables and improve staging banner design

- Remove branch-specific variable names (not needed)
- Each workflow uses its own default based on branch
- Users only need to set general variables, not branch-specific ones
- Redesign staging banner as floating box in bottom-right corner
- Better UX: doesn't block content, dismissible, modern design

components/StagingBanner.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import { AlertTriangle, X } from 'lucide-react';
 
 export function StagingBanner() {
@@ -31,32 +31,43 @@ export function StagingBanner() {
   }
 
   return (
-    <motion.div
-      initial={{ y: -100, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      exit={{ y: -100, opacity: 0 }}
-      className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-yellow-500 via-orange-500 to-red-500 text-white shadow-lg"
-    >
-      <div className="container mx-auto px-4 py-2 md:py-3 flex items-center justify-between gap-4">
-            <div className="flex items-center gap-3">
-          <AlertTriangle className="w-5 h-5 animate-pulse flex-shrink-0" />
-          <div className="flex-1 min-w-0">
-            <p className="font-bold text-sm md:text-base">
-              🧪 TEST / DEVELOPMENT VERSION
+    <AnimatePresence>
+      <motion.div
+        initial={{ scale: 0, opacity: 0, x: 20, y: 20 }}
+        animate={{ scale: 1, opacity: 1, x: 0, y: 0 }}
+        exit={{ scale: 0, opacity: 0 }}
+        transition={{ type: "spring", damping: 20, stiffness: 300 }}
+        className="fixed bottom-6 right-6 z-50 max-w-sm"
+      >
+        <div className="bg-gradient-to-br from-yellow-500 via-orange-500 to-red-500 text-white rounded-xl shadow-2xl border-2 border-white/20 backdrop-blur-sm overflow-hidden">
+          {/* Header */}
+          <div className="bg-black/20 px-4 py-2 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="w-4 h-4 animate-pulse" />
+              <span className="font-bold text-xs uppercase tracking-wide">
+                Test Environment
+              </span>
+            </div>
+            <button
+              onClick={() => setIsVisible(false)}
+              className="p-1 hover:bg-white/20 rounded transition-colors"
+              aria-label="Close banner"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+          
+          {/* Content */}
+          <div className="px-4 py-3">
+            <p className="text-sm font-semibold mb-1">
+              🧪 Development Version
             </p>
-            <p className="text-xs md:text-sm text-white/90">
+            <p className="text-xs text-white/90 leading-relaxed">
               This is a staging environment. Not production-ready. Data may be unstable.
             </p>
           </div>
         </div>
-        <button
-          onClick={() => setIsVisible(false)}
-          className="p-1 hover:bg-white/20 rounded transition-colors"
-          aria-label="Close banner"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </div>
-    </motion.div>
+      </motion.div>
+    </AnimatePresence>
   );
 }