diff --git a/.gitignore b/.gitignore
index 921bd2a..bb1658f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -67,3 +67,10 @@ debug*.php
 
 # Session files
 sess_*
+
+# Development server files (created by setup.sh)
+.backend.pid
+.frontend.pid
+backend-server.log
+frontend-server.log
+stop.sh
diff --git a/CLAUDE.md b/CLAUDE.md
index e4bb068..36c7d74 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -183,7 +183,7 @@ All managed by `useProjects.js` hook.
 - Reference images (up to 2: first frame + optional last frame for interpolation)
 - Veo 3.1 Standard or Fast model selection
 - Creative Freedom levels (auto-adjusts guidance strength)
-- Duration constraints: 4s (any), 6s (T2V only), 8s (T2V only)
+- Duration options: 4s, 6s, 8s (all available for both T2V and I2V)
 - Async polling for video completion
 - Frame extraction from generated videos
 
@@ -376,13 +376,8 @@ if ((tabId === 'image' || tabId === 'video') && !activeProjectId) {
 }
 ```
 
-### 4. Video Duration Constraints
-Veo 3.1 I2V (image-to-video) only supports 4 seconds:
-```javascript
-if (referenceImages.length > 0 && duration > 4) {
-  duration = 4;  // Force to 4s for I2V
-}
-```
+### 4. Video Generation Settings
+All durations (4s, 6s, 8s) work for both T2V and I2V modes. Resolution (720p/1080p) is a UI-only setting - only aspectRatio and durationSeconds are sent to the Veo 3.1 API.
 
 ### 5. MIME Type Handling
 Always store and use dynamic MIME type from API response:
diff --git a/backend/.env.example b/backend/.env.example
index ee36b5b..22b6fab 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -12,6 +12,13 @@
 # Start backend with: php -S localhost:${BACKEND_PORT}
 BACKEND_PORT=5015
 
+# ----------------------------------------------------------------------------
+# API Base Path (for video/file streaming URLs)
+# ----------------------------------------------------------------------------
+# For LOCAL development: Use /lux-studio-back (matches Vite proxy)
+# For PRODUCTION: Set to your Apache proxy path (e.g., /lux-studio-back)
+API_BASE_PATH=/lux-studio-back
+
 # ----------------------------------------------------------------------------
 # Google Gemini API Key (REQUIRED)
 # ----------------------------------------------------------------------------
diff --git a/backend/.env.local b/backend/.env.local
index 7984cc8..43be9ad 100644
--- a/backend/.env.local
+++ b/backend/.env.local
@@ -11,6 +11,13 @@
 # Start backend with: php -S localhost:5015
 BACKEND_PORT=5015
 
+# ----------------------------------------------------------------------------
+# API Base Path (for video/file streaming URLs)
+# ----------------------------------------------------------------------------
+# For LOCAL development: Use /lux-studio-back (matches Vite proxy)
+# For PRODUCTION: Set to your Apache proxy path (e.g., /lux-studio-back)
+API_BASE_PATH=/lux-studio-back
+
 # ----------------------------------------------------------------------------
 # Google Gemini API Key (REQUIRED)
 # ----------------------------------------------------------------------------
diff --git a/backend/.env.production b/backend/.env.production
index 8594037..9151eb9 100644
--- a/backend/.env.production
+++ b/backend/.env.production
@@ -14,11 +14,19 @@
 # Port is hardcoded in lux-studio-backend.service, this is for reference only
 BACKEND_PORT=5015
 
+# ----------------------------------------------------------------------------
+# API Base Path (for video/file streaming URLs)
+# ----------------------------------------------------------------------------
+# Apache proxy path - MUST match ProxyPass configuration in apache2.conf
+# Used by video_api.php to generate correct video streaming URLs
+API_BASE_PATH=/lux-studio-back
+
 # ----------------------------------------------------------------------------
 # Google Gemini API Key (REQUIRED)
 # ----------------------------------------------------------------------------
 # Get your API key from: https://aistudio.google.com/app/apikey
-GEMINI_API_KEY=AIzaSyCMKLSJJYEx4c6-TtBACnjdULrLzsr_fts
+GEMINI_API_KEY=AIzaSyDs7EKdC9NLM5UqWlGUqeQO96TmSA-kos8
+# AIzaSyCMKLSJJYEx4c6-TtBACnjdULrLzsr_fts
 
 # ----------------------------------------------------------------------------
 # Frontend URL for CORS (REQUIRED)
diff --git a/backend/.htaccess b/backend/.htaccess
index 8fd2e1e..61a4d6e 100644
--- a/backend/.htaccess
+++ b/backend/.htaccess
@@ -1,8 +1,8 @@
 # ==============================================================================
-# VIDEO OPTIMIZER - FRONTEND SECURITY CONFIGURATION
+# LUX STUDIO BACKEND - SECURITY CONFIGURATION
 # ==============================================================================
-# Location: /var/www/html/lux-studio/.htaccess
-# Purpose: Security hardening for frontend static files
+# Location: /opt/lux-studio-back/.htaccess
+# Purpose: Prevent direct browser access, allow only API endpoints
 # ==============================================================================
 
 # ------------------------------------------------------------------------------
@@ -12,20 +12,68 @@
 # Disable directory browsing
 Options -Indexes
 
-# Follow symbolic links (required for some servers)
-Options +FollowSymLinks
-
 # Disable server signature
 ServerSignature Off
 
 # ------------------------------------------------------------------------------
-# FILE ACCESS CONTROL
+# BLOCK ROOT AND INDEX ACCESS
 # ------------------------------------------------------------------------------
 
-# Default: Allow access to all files (will be restricted below)
+# Block access to index.php (prevents browsing backend UI)
+<Files "index.php">
+    Require all denied
+</Files>
 
-# Deny access to sensitive files and patterns
-<FilesMatch "^\.">
+# Block access to test files
+<FilesMatch "^(test|auth-test|server-check)\.php$">
+    Require all denied
+</FilesMatch>
+
+# Block access to configuration files
+<FilesMatch "^(config|config\.example)\.php$">
+    Require all denied
+</FilesMatch>
+
+# ------------------------------------------------------------------------------
+# API ENDPOINT ACCESS CONTROL
+# ------------------------------------------------------------------------------
+
+# Only allow POST requests to API endpoints
+# GET is allowed only for stream_video.php (video streaming)
+
+<FilesMatch "^(api|video_api|enhance_prompt|auth|webhook_logger)\.php$">
+    <RequireAll>
+        Require all granted
+        <RequireAny>
+            Require method POST OPTIONS
+        </RequireAny>
+    </RequireAll>
+</FilesMatch>
+
+# Allow GET and POST for video streaming
+<Files "stream_video.php">
+    Require all granted
+</Files>
+
+# Allow POST for cleanup and session management
+<FilesMatch "^(cleanup|clear_session|session_manager)\.php$">
+    <RequireAll>
+        Require all granted
+        Require method POST OPTIONS
+    </RequireAll>
+</FilesMatch>
+
+# Allow get_config.php and get_logs.php for debugging (consider disabling in production)
+<FilesMatch "^(get_config|get_logs|get_current_image)\.php$">
+    Require all granted
+</FilesMatch>
+
+# ------------------------------------------------------------------------------
+# PROTECT SENSITIVE FILES
+# ------------------------------------------------------------------------------
+
+# Deny access to environment files
+<FilesMatch "^\.env">
     Require all denied
 </FilesMatch>
 
@@ -34,86 +82,60 @@ ServerSignature Off
     Require all denied
 </FilesMatch>
 
-# Deny access to version control files
-<FilesMatch "(^\.git|^\.svn|^\.hg|^\.bzr)">
+# Deny access to version control
+<FilesMatch "(^\.git|^\.svn|^\.hg|composer\.)">
     Require all denied
 </FilesMatch>
 
-# Deny access to environment and configuration files
-<FilesMatch "^(\.env|\.env\.|config\.json|package\.json|package-lock\.json|composer\.json|composer\.lock)">
+# Deny access to class files (should only be included, not accessed directly)
+<FilesMatch "^(AuthMiddleware|JWTValidator|SessionManager)\.php$">
     Require all denied
 </FilesMatch>
 
-# Deny access to PHP files (if any exist - security measure)
-<FilesMatch "\.php">
-    Require all denied
-</FilesMatch>
-# <FilesMatch "\.php$">
-#     Require all denied
-# </FilesMatch>
-
-# Deny access to Python files (should not be in frontend)
-<FilesMatch "\.py$">
-    Require all denied
-</FilesMatch>
-
-# Deny access to README and documentation that shouldn't be public
-<FilesMatch "^(README|INSTALL|CHANGELOG|LICENSE|CONTRIBUTING)">
-    Require all denied
-</FilesMatch>
-
-# ------------------------------------------------------------------------------
-# ALLOWED FILE TYPES (Explicitly allow necessary files)
-# ------------------------------------------------------------------------------
-
-# Allow HTML files (main application pages)
-<FilesMatch "\.(html|htm)$">
-    Require all granted
-</FilesMatch>
-
-# Allow JavaScript files
-<FilesMatch "\.(js|mjs)$">
-    Require all granted
-</FilesMatch>
-
-# Allow CSS files
-<FilesMatch "\.css$">
-    Require all granted
-</FilesMatch>
-
-# Allow images
-<FilesMatch "\.(jpg|jpeg|png|gif|ico|svg|webp)$">
-    Require all granted
-</FilesMatch>
-
-# Allow fonts
-<FilesMatch "\.(woff|woff2|ttf|otf|eot)$">
-    Require all granted
-</FilesMatch>
-
-# Allow JSON files (only if needed for app functionality)
-<FilesMatch "\.json$">
-    Require all denied
-</FilesMatch>
-
-# ------------------------------------------------------------------------------
-# ERROR DOCUMENTS
-# ------------------------------------------------------------------------------
-
-# Custom error pages (optional - create these files if needed)
-# ErrorDocument 403 /video-optimizer/error/403.html
-# ErrorDocument 404 /video-optimizer/error/404.html
-# ErrorDocument 500 /video-optimizer/error/500.html
-
-# ------------------------------------------------------------------------------
-# ADDITIONAL SECURITY
-# ------------------------------------------------------------------------------
-
-# Prevent access to .htaccess itself
+# Deny access to .htaccess itself
 <Files ".htaccess">
     Require all denied
 </Files>
 
+# ------------------------------------------------------------------------------
+# UPLOADS DIRECTORY PROTECTION
+# ------------------------------------------------------------------------------
+
+# Block direct access to uploads directory (videos/images should be streamed via PHP)
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+
+    # Block direct access to uploads folder
+    RewriteRule ^uploads/ - [F,L]
+</IfModule>
+
+# ------------------------------------------------------------------------------
+# SECURITY HEADERS (if not set by Apache)
+# ------------------------------------------------------------------------------
+
+<IfModule mod_headers.c>
+    # Prevent MIME type sniffing
+    Header set X-Content-Type-Options "nosniff"
+
+    # Prevent clickjacking
+    Header set X-Frame-Options "DENY"
+
+    # XSS Protection
+    Header set X-XSS-Protection "1; mode=block"
+</IfModule>
+
+# ------------------------------------------------------------------------------
+# ERROR HANDLING
+# ------------------------------------------------------------------------------
+
+# Return 403 Forbidden instead of showing file listings
+<IfModule mod_autoindex.c>
+    Options -Indexes
+</IfModule>
+
+# Custom error document (returns JSON for API errors)
+ErrorDocument 403 "Forbidden: Direct access to backend is not allowed. Use API endpoints only."
+ErrorDocument 404 "Not Found: API endpoint does not exist."
 
 # ==============================================================================
 # END OF CONFIGURATION
diff --git a/backend/index.php b/backend/index.php
index 9040201..06065ac 100644
--- a/backend/index.php
+++ b/backend/index.php
@@ -1,1521 +1,42 @@
 <?php
-// Require authentication (with fallback if auth system has errors)
-$user = ['name' => 'User', 'preferred_username' => 'user@localhost'];
-$ssoEnabled = false;
-
-try {
-    if (file_exists(__DIR__ . '/AuthMiddleware.php')) {
-        require_once 'AuthMiddleware.php';
-        $auth = new AuthMiddleware();
-        $user = $auth->requireAuth(); // Blocks if not authenticated
-        $ssoEnabled = $auth->isSSOEnabled();
-    }
-} catch (Exception $e) {
-    // Log error but don't block app
-    error_log("Auth error (app will continue without auth): " . $e->getMessage());
-}
-
-// Initialize session manager for multi-user support
-require_once 'session_manager.php';
-$sessionManager = new SessionManager();
-
-// Get current image from disk
-$currentImage = $sessionManager->getCurrentImage();
-$conversationHistory = $sessionManager->getHistory();
-$imageHistory = $sessionManager->getImageHistory();
+// Backend API - No direct access
+http_response_code(403);
+header('Content-Type: text/html; charset=utf-8');
 ?>
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nano Banana Pro - Image Generator</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <title>Access Denied</title>
     <style>
-        * {
+        body {
             margin: 0;
             padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Montserrat', sans-serif;
-            background: #000;
-            color: #fff;
-            min-height: 100vh;
-            padding: 20px;
-        }
-
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-        }
-
-        header {
-            text-align: center;
-            margin-bottom: 40px;
-            padding: 30px 0;
-            border-bottom: 2px solid #FFC407;
-        }
-
-        h1 {
-            font-size: 2.5rem;
-            font-weight: 700;
-            color: #FFC407;
-            margin-bottom: 10px;
-        }
-
-        .subtitle {
-            font-size: 1rem;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+            background: #0a0a0a;
             color: #999;
-            font-weight: 400;
-        }
-
-        .main-content {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            margin-bottom: 30px;
-        }
-
-        @media (max-width: 968px) {
-            .main-content {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        .panel {
-            background: #1a1a1a;
-            border-radius: 12px;
-            padding: 30px;
-            border: 1px solid #333;
-        }
-
-        .panel h2 {
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: #FFC407;
-            margin-bottom: 20px;
-        }
-
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 500;
-            font-size: 0.9rem;
-            color: #FFC407;
-        }
-
-        textarea, select, .file-input {
-            width: 100%;
-            padding: 15px;
-            background: #000;
-            border: 2px solid #333;
-            border-radius: 8px;
-            color: #fff;
-            font-family: 'Montserrat', sans-serif;
-            font-size: 0.95rem;
-            transition: border-color 0.3s;
-        }
-
-        textarea:focus, select:focus, .file-input:focus {
-            outline: none;
-            border-color: #FFC407;
-        }
-
-        .file-input {
-            cursor: pointer;
-        }
-
-        .file-input::file-selector-button {
-            background: #FFC407;
-            color: #000;
-            border: none;
-            padding: 8px 15px;
-            border-radius: 4px;
-            font-family: 'Montserrat', sans-serif;
-            font-weight: 600;
-            cursor: pointer;
-            margin-right: 10px;
-        }
-
-        .file-input::file-selector-button:hover {
-            background: #ffcd1f;
-        }
-
-        textarea {
-            min-height: 120px;
-            resize: vertical;
-        }
-
-        .btn {
-            background: #FFC407;
-            color: #000;
-            border: none;
-            padding: 15px 30px;
-            border-radius: 8px;
-            font-family: 'Montserrat', sans-serif;
-            font-weight: 600;
-            font-size: 1rem;
-            cursor: pointer;
-            transition: all 0.3s;
-            width: 100%;
-        }
-
-        .btn:hover {
-            background: #ffcd1f;
-            transform: translateY(-2px);
-        }
-
-        .btn:active {
-            transform: translateY(0);
-        }
-
-        .btn:disabled {
-            background: #666;
-            cursor: not-allowed;
-            transform: none;
-        }
-
-        .btn-secondary {
-            background: #333;
-            color: #FFC407;
-            margin-top: 10px;
-        }
-
-        .btn-secondary:hover {
-            background: #444;
-        }
-
-        .image-display {
-            background: #000;
-            border-radius: 8px;
-            min-height: 400px;
             display: flex;
             align-items: center;
             justify-content: center;
-            border: 2px dashed #333;
-            position: relative;
-            overflow: hidden;
+            height: 100vh;
         }
-
-        .image-display.has-image {
-            border-style: solid;
-            border-color: #FFC407;
-        }
-
-        .image-display img {
-            max-width: 100%;
-            max-height: 600px;
-            display: block;
-            border-radius: 4px;
-        }
-
-        .placeholder {
+        .message {
             text-align: center;
-            color: #666;
         }
-
-        .placeholder-icon {
+        .message h1 {
             font-size: 3rem;
-            margin-bottom: 10px;
+            color: #333;
+            margin: 0 0 20px 0;
         }
-
-        .loading {
-            text-align: center;
-            color: #FFC407;
-        }
-
-        .spinner {
-            border: 3px solid #333;
-            border-top: 3px solid #FFC407;
-            border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 15px;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        .history {
-            margin-top: 30px;
-        }
-
-        .history-item {
-            background: #1a1a1a;
-            border: 1px solid #333;
-            border-radius: 6px;
-            padding: 10px 12px;
-            margin-bottom: 8px;
-            font-size: 0.85rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .history-prompt {
-            color: #FFC407;
-            font-weight: 500;
-            flex: 1;
-            line-height: 1.3;
-        }
-
-        .history-time {
-            color: #666;
-            font-size: 0.75rem;
-            white-space: nowrap;
-            flex-shrink: 0;
-        }
-
-        .error-message {
-            background: #ff4444;
-            color: #fff;
-            padding: 15px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            display: none;
-        }
-
-        .error-message.show {
-            display: block;
-        }
-
-        .success-message {
-            background: #44ff44;
-            color: #000;
-            padding: 15px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            display: none;
-            font-weight: 600;
-        }
-
-        .success-message.show {
-            display: block;
-        }
-
-        .image-actions {
-            display: flex;
-            gap: 10px;
-            margin-top: 15px;
-        }
-
-        .image-actions .btn {
-            width: auto;
-            flex: 1;
-        }
-
-        .quick-actions {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            margin-top: 15px;
-        }
-
-        .quick-btn {
-            background: #222;
-            color: #FFC407;
-            border: 1px solid #FFC407;
-            padding: 10px;
-            border-radius: 6px;
-            font-family: 'Montserrat', sans-serif;
-            font-size: 0.85rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-
-        .quick-btn:hover {
-            background: #FFC407;
-            color: #000;
-        }
-
-        .settings-row {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-        }
-
-        .debug-panel {
-            background: #0a0a0a;
-            border: 2px solid #333;
-            border-radius: 8px;
-            padding: 20px;
-            margin-top: 30px;
-            font-family: 'Courier New', monospace;
-            font-size: 0.85rem;
-        }
-
-        .debug-panel h3 {
-            color: #0ff;
-            margin-bottom: 15px;
-            font-size: 1.2rem;
-        }
-
-        .debug-section {
-            background: #000;
-            border-left: 3px solid #0f0;
-            padding: 10px;
-            margin-bottom: 10px;
-        }
-
-        .debug-section h4 {
-            color: #ff0;
-            margin-bottom: 8px;
+        .message p {
             font-size: 1rem;
-        }
-
-        .debug-section pre {
-            color: #0f0;
-            overflow-x: auto;
-            white-space: pre-wrap;
-            word-wrap: break-word;
             margin: 0;
         }
-
-        .debug-error {
-            border-left-color: #f00;
-        }
-
-        .debug-error pre {
-            color: #f00;
-        }
-
-        .debug-success {
-            border-left-color: #0f0;
-        }
-
-        .debug-toggle {
-            background: #222;
-            color: #0ff;
-            border: 1px solid #0ff;
-            padding: 10px 20px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-family: 'Courier New', monospace;
-            margin-bottom: 15px;
-        }
-
-        .debug-toggle:hover {
-            background: #333;
-        }
-
-        .debug-content {
-            max-height: 500px;
-            overflow-y: auto;
-        }
-
-        /* Prompt Studio Styles */
-        .prompt-studio {
-            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
-            border-radius: 12px;
-            padding: 30px;
-            margin-bottom: 30px;
-            border: 2px solid #FFC407;
-        }
-
-        .prompt-studio h2 {
-            font-size: 1.8rem;
-            color: #FFC407;
-            margin-bottom: 10px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .prompt-studio-subtitle {
-            color: #999;
-            font-size: 0.9rem;
-            margin-bottom: 25px;
-        }
-
-        .studio-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        @media (max-width: 968px) {
-            .studio-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        .studio-field {
-            background: #000;
-            padding: 15px;
-            border-radius: 8px;
-            border: 1px solid #333;
-        }
-
-        .studio-field label {
-            display: block;
-            margin-bottom: 8px;
-            font-size: 0.85rem;
-            color: #FFC407;
-            font-weight: 600;
-            text-transform: uppercase;
-        }
-
-        .studio-field select {
-            width: 100%;
-            padding: 12px;
-            background: #1a1a1a;
-            border: 2px solid #333;
-            border-radius: 6px;
-            color: #fff;
-            font-family: 'Montserrat', sans-serif;
-        }
-
-        .studio-field select:focus {
-            border-color: #FFC407;
-            outline: none;
-        }
-
-        .slider-container {
-            margin-bottom: 20px;
-        }
-
-        .slider-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-
-        .slider-header label {
-            font-size: 0.9rem;
-            color: #FFC407;
-            font-weight: 600;
-        }
-
-        .slider-value {
-            background: #FFC407;
-            color: #000;
-            padding: 4px 12px;
-            border-radius: 4px;
-            font-weight: 700;
-            font-size: 0.9rem;
-        }
-
-        input[type="range"] {
-            width: 100%;
-            height: 8px;
-            border-radius: 4px;
-            background: #333;
-            outline: none;
-            -webkit-appearance: none;
-        }
-
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: #FFC407;
-            cursor: pointer;
-        }
-
-        input[type="range"]::-moz-range-thumb {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: #FFC407;
-            cursor: pointer;
-            border: none;
-        }
-
-        .scene-input {
-            width: 100%;
-            padding: 15px;
-            background: #000;
-            border: 2px solid #333;
-            border-radius: 8px;
-            color: #fff;
-            font-family: 'Montserrat', sans-serif;
-            min-height: 100px;
-            resize: vertical;
-            margin-bottom: 15px;
-        }
-
-        .scene-input:focus {
-            border-color: #FFC407;
-            outline: none;
-        }
-
-        .enhance-btn {
-            background: linear-gradient(135deg, #FFC407 0%, #ff9500 100%);
-            color: #000;
-            border: none;
-            padding: 15px 40px;
-            border-radius: 8px;
-            font-family: 'Montserrat', sans-serif;
-            font-weight: 700;
-            font-size: 1.1rem;
-            cursor: pointer;
-            transition: all 0.3s;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin: 0 auto;
-        }
-
-        .enhance-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 5px 20px rgba(255, 196, 7, 0.4);
-        }
-
-        .enhance-btn:disabled {
-            background: #666;
-            cursor: not-allowed;
-            transform: none;
-        }
-
-        .enhanced-output {
-            background: #0a0a0a;
-            border: 2px solid #FFC407;
-            border-radius: 8px;
-            padding: 20px;
-            margin-top: 20px;
-            display: none;
-        }
-
-        .enhanced-output.show {
-            display: block;
-            animation: fadeIn 0.3s;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(-10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .enhanced-output h3 {
-            color: #FFC407;
-            margin-bottom: 15px;
-            font-size: 1rem;
-        }
-
-        .enhanced-text {
-            color: #fff;
-            line-height: 1.6;
-            font-size: 0.95rem;
-            margin-bottom: 15px;
-        }
-
-        .use-prompt-btn {
-            background: #FFC407;
-            color: #000;
-            border: none;
-            padding: 10px 25px;
-            border-radius: 6px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-
-        .use-prompt-btn:hover {
-            background: #ffcd1f;
-            transform: translateY(-2px);
-        }
-
-        /* Image History Gallery */
-        .image-history {
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 2px solid #333;
-        }
-
-        .image-history h3 {
-            color: #FFC407;
-            font-size: 1.2rem;
-            margin-bottom: 15px;
-        }
-
-        .history-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            gap: 15px;
-        }
-
-        .history-image-item {
-            position: relative;
-            background: #000;
-            border: 2px solid #333;
-            border-radius: 8px;
-            overflow: hidden;
-            cursor: pointer;
-            transition: all 0.3s;
-            aspect-ratio: 1;
-        }
-
-        .history-image-item:hover {
-            border-color: #FFC407;
-            transform: translateY(-5px);
-            box-shadow: 0 5px 20px rgba(255, 196, 7, 0.3);
-        }
-
-        .history-image-item img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            display: block;
-        }
-
-        .history-image-overlay {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
-            padding: 8px;
-            font-size: 0.7rem;
-            color: #999;
-            opacity: 0;
-            transition: opacity 0.3s;
-        }
-
-        .history-image-item:hover .history-image-overlay {
-            opacity: 1;
-        }
-
-        .history-empty {
-            text-align: center;
-            color: #666;
-            padding: 30px;
-            font-style: italic;
-        }
-
-        /* Lightbox Modal */
-        .lightbox-modal {
-            display: none;
-            position: fixed;
-            z-index: 9999;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.95);
-            animation: fadeIn 0.3s;
-        }
-
-        .lightbox-modal.show {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .lightbox-content {
-            position: relative;
-            max-width: 95%;
-            max-height: 95%;
-            animation: zoomIn 0.3s;
-        }
-
-        .lightbox-content img {
-            max-width: 100%;
-            max-height: 95vh;
-            display: block;
-            border-radius: 8px;
-            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
-        }
-
-        .lightbox-close {
-            position: absolute;
-            top: 20px;
-            right: 30px;
-            color: #fff;
-            font-size: 40px;
-            font-weight: bold;
-            cursor: pointer;
-            z-index: 10000;
-            transition: all 0.3s;
-            background: rgba(0, 0, 0, 0.5);
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            line-height: 1;
-        }
-
-        .lightbox-close:hover {
-            background: #FFC407;
-            color: #000;
-        }
-
-        @keyframes zoomIn {
-            from {
-                transform: scale(0.8);
-                opacity: 0;
-            }
-            to {
-                transform: scale(1);
-                opacity: 1;
-            }
-        }
-
-        /* Make main image clickable */
-        #currentImage {
-            cursor: pointer;
-            transition: transform 0.3s;
-        }
-
-        #currentImage:hover {
-            transform: scale(1.02);
-        }
     </style>
 </head>
 <body>
-    <div class="container">
-        <header>
-            <div style="display: flex; justify-content: space-between; align-items: center;">
-                <div>
-                    <h1>Nano Banana Pro</h1>
-                    <p class="subtitle">AI Image Generation & Iterative Editing</p>
-                </div>
-                <?php if ($ssoEnabled): ?>
-                <div style="text-align: right;">
-                    <div style="color: #999; font-size: 0.85rem; margin-bottom: 5px;">
-                        Welcome, <strong style="color: #FFC407;"><?php echo htmlspecialchars($user['name'] ?? $user['preferred_username'] ?? 'User'); ?></strong>
-                    </div>
-                    <button onclick="signOut()" class="btn btn-secondary" style="padding: 8px 20px; font-size: 0.9rem; width: auto;">
-                        🔒 Log Out
-                    </button>
-                </div>
-                <?php endif; ?>
-            </div>
-        </header>
-
-        <div id="errorMessage" class="error-message"></div>
-        <div id="successMessage" class="success-message"></div>
-
-        <!-- Prompt Studio Section -->
-        <div class="prompt-studio">
-            <h2>
-                🎬 Cinematography Prompt Studio
-            </h2>
-            <p class="prompt-studio-subtitle">Generate professional cinematography prompts with real camera and lens physics</p>
-
-            <div class="studio-grid">
-                <div class="studio-field">
-                    <label for="studioApplication">Application / Lighting</label>
-                    <select id="studioApplication">
-                        <optgroup label="Studio & Portrait">
-                            <option value="Portrait Studio">Portrait Studio</option>
-                            <option value="Corporate Headshot">Corporate Headshot</option>
-                        </optgroup>
-                        <optgroup label="Product & Macro">
-                            <option value="Product (Crisp)">Product (Crisp)</option>
-                            <option value="Food Photography">Food Photography</option>
-                            <option value="Macro: Luxury Jewelry">Macro: Luxury Jewelry</option>
-                            <option value="Macro: Nature Details">Macro: Nature Details</option>
-                            <option value="Tech Commercial (Macro)">Tech Commercial (Macro)</option>
-                        </optgroup>
-                        <optgroup label="Outdoor & Natural">
-                            <option value="Golden Hour (Outdoor)" selected>Golden Hour (Outdoor)</option>
-                            <option value="Blue Hour (City)">Blue Hour (City)</option>
-                            <option value="Wildlife / Safari">Wildlife / Safari</option>
-                        </optgroup>
-                        <optgroup label="Action & Motion">
-                            <option value="Sports Action">Sports Action</option>
-                        </optgroup>
-                        <optgroup label="Creative & Artistic">
-                            <option value="Neon Cyberpunk">Neon Cyberpunk</option>
-                            <option value="Nostalgic Memory">Nostalgic Memory</option>
-                            <option value="Cinematic Horror">Cinematic Horror</option>
-                            <option value="Cassette Futurism (Retro Sci-Fi)">Cassette Futurism (Retro Sci-Fi)</option>
-                            <option value="Surreal Infrared">Surreal Infrared</option>
-                            <option value="Spaghetti Western">Spaghetti Western</option>
-                        </optgroup>
-                        <optgroup label="Auteur Styles">
-                            <option value="Symmetrical Whimsy">Symmetrical Whimsy</option>
-                            <option value="IMAX Scale Epic">IMAX Scale Epic</option>
-                            <option value="Clinical Thriller">Clinical Thriller</option>
-                            <option value="Brutalist Atmosphere">Brutalist Atmosphere</option>
-                            <option value="Technicolor Dream">Technicolor Dream</option>
-                            <option value="Obsessive Symmetry">Obsessive Symmetry</option>
-                            <option value="Hong Kong Nostalgia">Hong Kong Nostalgia</option>
-                            <option value="Industrial Haze">Industrial Haze</option>
-                            <option value="Gothic Fantasy">Gothic Fantasy</option>
-                        </optgroup>
-                        <optgroup label="Professional Production">
-                            <option value="LED Volume (Virtual Production)">LED Volume (Virtual Production)</option>
-                            <option value="Automotive: Showroom">Automotive: Showroom</option>
-                            <option value="Automotive: Process Trailer">Automotive: Process Trailer</option>
-                            <option value="Product (Liquid/Splash)">Product (Liquid/Splash)</option>
-                            <option value="VFX / Green Screen">VFX / Green Screen</option>
-                            <option value="Knolling / Flat Lay">Knolling / Flat Lay</option>
-                        </optgroup>
-                        <optgroup label="Editorial & Fashion">
-                            <option value="NYC Street Editorial">NYC Street Editorial</option>
-                            <option value="90s Grunge Editorial">90s Grunge Editorial</option>
-                            <option value="Fashion Editorial">Fashion Editorial</option>
-                            <option value="Underground Rave / Flash">Underground Rave / Flash</option>
-                        </optgroup>
-                        <optgroup label="Documentary & Journalism">
-                            <option value="Conflict Photography">Conflict Photography</option>
-                            <option value="Street Photography">Street Photography</option>
-                            <option value="Docu / Realism">Docu / Realism</option>
-                        </optgroup>
-                        <optgroup label="Architectural & Interior">
-                            <option value="Architectural Digest Interior">Architectural Digest Interior</option>
-                            <option value="Architecture">Architecture</option>
-                        </optgroup>
-                        <optgroup label="Other">
-                            <option value="Custom">Custom</option>
-                        </optgroup>
-                    </select>
-                </div>
-
-                <div class="studio-field">
-                    <label for="studioCamera">Camera Body</label>
-                    <select id="studioCamera">
-                        <option value="Arri Alexa 35" selected>Arri Alexa 35</option>
-                        <option value="Sony Venice 2">Sony Venice 2</option>
-                        <option value="Red V-Raptor">Red V-Raptor</option>
-                        <option value="Arriflex 416">Arriflex 416 (Film)</option>
-                        <option value="Arricam LT">Arricam LT (Film)</option>
-                        <option value="Fujifilm GFX 100">Fujifilm GFX 100</option>
-                        <option value="Phantom Flex4K">Phantom Flex4K</option>
-                        <option value="Blackmagic URSA Cine 12K">URSA Cine 12K</option>
-                    </select>
-                </div>
-
-                <div class="studio-field">
-                    <label for="studioLens">Lens Kit</label>
-                    <select id="studioLens">
-                        <option value="Panavision C-Series">Panavision C-Series</option>
-                        <option value="Cooke S7/i" selected>Cooke S7/i</option>
-                        <option value="Canon K-35">Canon K-35</option>
-                        <option value="Arri Signature">Arri Signature</option>
-                        <option value="Zeiss Super Speed">Zeiss Super Speed</option>
-                        <option value="Fujinon GF">Fujinon GF</option>
-                        <option value="Laowa Probe">Laowa Probe</option>
-                        <option value="Helios 44-2">Helios 44-2 (Vintage)</option>
-                        <option value="Canon TS-E">Canon Tilt-Shift</option>
-                        <option value="Angénieux Optimo">Angénieux Optimo</option>
-                    </select>
-                </div>
-            </div>
-
-            <div class="slider-container">
-                <div class="slider-header">
-                    <label>Creative Freedom</label>
-                    <span class="slider-value" id="creativeFreedomValue">30%</span>
-                </div>
-                <input type="range" id="creativeFreedom" min="0" max="100" value="30">
-                <div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: #666; margin-top: 5px;">
-                    <span>Strict (Literal)</span>
-                    <span>Creative (Smart Fill)</span>
-                </div>
-            </div>
-
-            <div>
-                <label for="studioScene" style="display: block; margin-bottom: 8px; color: #FFC407; font-weight: 600;">Scene Description</label>
-                <textarea
-                    id="studioScene"
-                    class="scene-input"
-                    placeholder="Describe your scene... e.g., 'A vintage car parked in front of a neon-lit diner at dusk'"
-                ></textarea>
-            </div>
-
-            <button class="enhance-btn" id="enhanceBtn">
-                ✨ Enhance Prompt with AI
-            </button>
-
-            <div class="enhanced-output" id="enhancedOutput">
-                <h3>✅ Enhanced Cinematography Prompt</h3>
-                <div class="enhanced-text" id="enhancedText"></div>
-                <button class="use-prompt-btn" id="usePromptBtn">Use This Prompt →</button>
-            </div>
-        </div>
-
-        <div class="main-content">
-            <!-- Left Panel - Controls -->
-            <div class="panel">
-                <h2>Create or Edit Image</h2>
-
-                <form id="imageForm">
-                    <?php if (!$currentImage): ?>
-                    <div class="form-group">
-                        <label for="uploadImage">Upload Your Own Image (Optional)</label>
-                        <input
-                            type="file"
-                            id="uploadImage"
-                            name="uploadImage"
-                            accept="image/jpeg,image/jpg,image/png,image/webp"
-                            class="file-input"
-                        >
-                        <small style="color: #999; display: block; margin-top: 5px;">
-                            Upload an image to start editing, or leave empty to generate from scratch
-                        </small>
-                    </div>
-                    <?php endif; ?>
-
-                    <div class="form-group">
-                        <label for="prompt">Prompt <?php echo !$currentImage ? '(Optional if uploading)' : ''; ?></label>
-                        <textarea
-                            id="prompt"
-                            name="prompt"
-                            placeholder="<?php echo $currentImage ? 'Enter edit instructions (e.g., "make it red", "add sunset", "remove background")' : 'Describe the image you want to create or edit... Leave empty to just upload. Examples: "A cyberpunk city at night with neon signs", "Make this photo look like a painting"'; ?>"
-                        ></textarea>
-                    </div>
-
-                    <div class="settings-row">
-                        <div class="form-group">
-                            <label for="aspectRatio">Aspect Ratio</label>
-                            <select id="aspectRatio" name="aspectRatio">
-                                <option value="16:9">16:9 (Landscape)</option>
-                                <option value="1:1">1:1 (Square)</option>
-                                <option value="9:16">9:16 (Portrait)</option>
-                                <option value="4:3">4:3</option>
-                                <option value="3:4">3:4</option>
-                            </select>
-                        </div>
-
-                        <div class="form-group">
-                            <label for="imageSize">Resolution</label>
-                            <select id="imageSize" name="imageSize">
-                                <option value="1K">1K (Fast)</option>
-                                <option value="2K" selected>2K (Balanced)</option>
-                                <option value="4K">4K (High Quality)</option>
-                            </select>
-                        </div>
-                    </div>
-
-                    <button type="submit" class="btn" id="generateBtn">
-                        <?php echo $currentImage ? 'Edit Image' : 'Generate Image'; ?>
-                    </button>
-
-                    <?php if ($currentImage): ?>
-                    <button type="button" class="btn btn-secondary" id="resetBtn">
-                        Start New Image
-                    </button>
-                    <?php endif; ?>
-                </form>
-
-                <?php if ($currentImage): ?>
-                <div class="quick-actions">
-                    <button class="quick-btn" onclick="quickEdit('Add dramatic lighting')">Add Lighting</button>
-                    <button class="quick-btn" onclick="quickEdit('Add sunset in background')">Add Sunset</button>
-                    <button class="quick-btn" onclick="quickEdit('Make colors more vibrant')">More Vibrant</button>
-                    <button class="quick-btn" onclick="quickEdit('Add motion blur')">Motion Blur</button>
-                    <button class="quick-btn" onclick="quickEdit('Make it photorealistic')">Photorealistic</button>
-                    <button class="quick-btn" onclick="quickEdit('Add depth of field effect')">Depth of Field</button>
-                </div>
-                <?php endif; ?>
-
-                <?php if (!empty($conversationHistory)): ?>
-                <div class="history">
-                    <h2>Conversation History</h2>
-                    <?php foreach (array_reverse($conversationHistory) as $item): ?>
-                    <div class="history-item">
-                        <span class="history-prompt"><?php echo htmlspecialchars($item['prompt']); ?></span>
-                        <span class="history-time"><?php echo date('g:i A', $item['timestamp']); ?></span>
-                    </div>
-                    <?php endforeach; ?>
-                </div>
-                <?php endif; ?>
-            </div>
-
-            <!-- Right Panel - Image Display -->
-            <div class="panel">
-                <h2>Generated Image</h2>
-
-                <div class="image-display <?php echo $currentImage ? 'has-image' : ''; ?>" id="imageDisplay">
-                    <?php if ($currentImage): ?>
-                        <img src="data:<?php echo $currentImage['mime_type']; ?>;base64,<?php echo $currentImage['data']; ?>" alt="Generated Image" id="currentImage">
-                    <?php else: ?>
-                        <div class="placeholder">
-                            <div class="placeholder-icon">🎨</div>
-                            <p>Your generated image will appear here</p>
-                        </div>
-                    <?php endif; ?>
-                </div>
-
-                <?php if ($currentImage): ?>
-                <div class="image-actions">
-                    <button class="btn" onclick="downloadImage()">Download Image</button>
-                </div>
-                <?php endif; ?>
-
-                <!-- Image History Gallery -->
-                <?php if (!empty($imageHistory)): ?>
-                <div class="image-history">
-                    <h3>📸 Recent Images (<?php echo count($imageHistory); ?>/10)</h3>
-                    <div class="history-grid">
-                        <?php foreach ($imageHistory as $index => $historyItem):
-                            // Skip if filename is not set
-                            if (!isset($historyItem['filename']) || empty($historyItem['filename'])) {
-                                continue;
-                            }
-                            $historyImage = $sessionManager->getImage($historyItem['filename']);
-                            if ($historyImage):
-                        ?>
-                        <div class="history-image-item" onclick="downloadHistoryImage('<?php echo addslashes($historyImage['data']); ?>', '<?php echo $historyImage['mime_type']; ?>', <?php echo $historyItem['timestamp']; ?>)">
-                            <img src="data:<?php echo $historyImage['mime_type']; ?>;base64,<?php echo $historyImage['data']; ?>" alt="Generated <?php echo date('g:i A', $historyItem['timestamp']); ?>">
-                            <div class="history-image-overlay">
-                                <?php echo date('g:i A', $historyItem['timestamp']); ?>
-                            </div>
-                        </div>
-                        <?php
-                            endif;
-                        endforeach; ?>
-                    </div>
-                </div>
-                <?php endif; ?>
-            </div>
-        </div>
-
-        <!-- Debug Panel -->
-        <div class="debug-panel">
-            <button class="debug-toggle" onclick="toggleDebug()">🔍 Toggle Debug Panel</button>
-            <div id="debugContent" class="debug-content" style="display: none;">
-                <h3>Debug Information</h3>
-
-                <div class="debug-section">
-                    <h4>Session Status</h4>
-                    <pre>Session ID: <?php echo $sessionManager->getSessionId(); ?>
-Has Current Image: <?php echo $currentImage ? 'YES' : 'NO'; ?>
-Image MIME Type: <?php echo $currentImage ? $currentImage['mime_type'] : 'Not Set'; ?>
-Image Data Length: <?php echo $currentImage ? strlen($currentImage['data']) . ' chars' : '0'; ?>
-Conversation History: <?php echo count($conversationHistory); ?> items
-Session Directory: <?php echo basename($sessionManager->getSessionDir()); ?></pre>
-                    <button class="quick-btn" onclick="loadServerLogs()" style="margin-top: 10px;">📋 Load Server Logs</button>
-                </div>
-
-                <div class="debug-section" id="serverLogs" style="display: none;">
-                    <h4>Recent Server Logs</h4>
-                    <pre id="serverLogsData"></pre>
-                </div>
-
-                <?php if (!empty($conversationHistory)): ?>
-                <div class="debug-section">
-                    <h4>Recent Prompts</h4>
-                    <pre><?php
-                    $recent = array_slice($conversationHistory, -3);
-                    foreach ($recent as $item) {
-                        echo date('H:i:s', $item['timestamp']) . ' [' . $item['type'] . ']: ' . htmlspecialchars($item['prompt']) . "\n";
-                    }
-                    ?></pre>
-                </div>
-                <?php endif; ?>
-
-                <div class="debug-section" id="lastRequest" style="display: none;">
-                    <h4>Last API Request</h4>
-                    <pre id="lastRequestData"></pre>
-                </div>
-
-                <div class="debug-section" id="lastResponse" style="display: none;">
-                    <h4>Last API Response</h4>
-                    <pre id="lastResponseData"></pre>
-                </div>
-
-                <div class="debug-section debug-error" id="lastError" style="display: none;">
-                    <h4>Last Error</h4>
-                    <pre id="lastErrorData"></pre>
-                </div>
-            </div>
-        </div>
+    <div class="message">
+        <h1>403</h1>
+        <p>Access Denied</p>
     </div>
-
-    <!-- Lightbox Modal -->
-    <div id="lightboxModal" class="lightbox-modal" onclick="closeLightbox(event)">
-        <span class="lightbox-close" onclick="closeLightbox(event)">&times;</span>
-        <div class="lightbox-content">
-            <img id="lightboxImage" src="" alt="Full size image">
-        </div>
-    </div>
-
-    <script>
-        const form = document.getElementById('imageForm');
-        const generateBtn = document.getElementById('generateBtn');
-        const resetBtn = document.getElementById('resetBtn');
-        const imageDisplay = document.getElementById('imageDisplay');
-        const errorMessage = document.getElementById('errorMessage');
-        const successMessage = document.getElementById('successMessage');
-
-        form.addEventListener('submit', async (e) => {
-            e.preventDefault();
-
-            const prompt = document.getElementById('prompt').value.trim();
-            const aspectRatio = document.getElementById('aspectRatio').value;
-            const imageSize = document.getElementById('imageSize').value;
-            const uploadInput = document.getElementById('uploadImage');
-
-            // Check if we have either a prompt or an upload
-            const hasUploadFile = uploadInput && uploadInput.files && uploadInput.files[0];
-            const hasExistingImage = <?php echo $currentImage ? 'true' : 'false'; ?>;
-
-            if (!prompt && !hasUploadFile && !hasExistingImage) {
-                showError('Please enter a prompt or upload an image');
-                return;
-            }
-
-            // Show loading state
-            generateBtn.disabled = true;
-            generateBtn.textContent = hasUploadFile ? 'Uploading...' : 'Processing...';
-            imageDisplay.innerHTML = '<div class="loading"><div class="spinner"></div><p>' + (hasUploadFile ? 'Uploading and processing...' : 'Creating your image...') + '</p></div>';
-            hideMessages();
-
-            try {
-                const formData = new FormData();
-                formData.append('action', 'generate');
-                formData.append('prompt', prompt);
-                formData.append('aspectRatio', aspectRatio);
-                formData.append('imageSize', imageSize);
-
-                // Handle file upload if present
-                let hasUpload = false;
-                if (uploadInput && uploadInput.files && uploadInput.files[0]) {
-                    const file = uploadInput.files[0];
-                    hasUpload = true;
-
-                    // Validate file size (max 10MB)
-                    if (file.size > 10 * 1024 * 1024) {
-                        throw new Error('File too large. Maximum size is 10MB.');
-                    }
-
-                    // Convert to base64
-                    const base64 = await fileToBase64(file);
-                    formData.append('uploadedImage', base64);
-                    formData.append('uploadedImageType', file.type);
-                }
-
-                // Log request
-                logDebug('request', {
-                    action: 'generate',
-                    prompt: prompt,
-                    aspectRatio: aspectRatio,
-                    imageSize: imageSize,
-                    hasExistingImage: <?php echo $currentImage ? 'true' : 'false'; ?>,
-                    hasUpload: hasUpload
-                });
-
-                const response = await fetch('api.php', {
-                    method: 'POST',
-                    body: formData
-                });
-
-                const result = await response.json();
-
-                // Log response
-                logDebug('response', result);
-
-                if (result.success) {
-                    showSuccess('Image generated successfully!');
-                    setTimeout(() => {
-                        window.location.reload();
-                    }, 500);
-                } else {
-                    showError(result.error || 'Failed to generate image');
-                    logDebug('error', result.error || 'Failed to generate image');
-                    generateBtn.disabled = false;
-                    generateBtn.textContent = '<?php echo $currentImage ? 'Edit Image' : 'Generate Image'; ?>';
-                }
-            } catch (error) {
-                showError('Network error: ' + error.message);
-                logDebug('error', 'Network error: ' + error.message);
-                generateBtn.disabled = false;
-                generateBtn.textContent = '<?php echo $currentImage ? 'Edit Image' : 'Generate Image'; ?>';
-            }
-        });
-
-        <?php if ($currentImage): ?>
-        resetBtn.addEventListener('click', async () => {
-            if (confirm('Are you sure you want to start a new image? This will clear your current image and history.')) {
-                const formData = new FormData();
-                formData.append('action', 'reset');
-
-                await fetch('api.php', {
-                    method: 'POST',
-                    body: formData
-                });
-
-                window.location.reload();
-            }
-        });
-        <?php endif; ?>
-
-        function quickEdit(editPrompt) {
-            const promptField = document.getElementById('prompt');
-            promptField.value = editPrompt;
-            promptField.focus();
-            // Scroll to prompt field
-            promptField.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-
-        function downloadImage() {
-            const img = document.getElementById('currentImage');
-            const link = document.createElement('a');
-            link.href = img.src;
-            link.download = 'nano-banana-pro-' + Date.now() + '.png';
-            link.click();
-        }
-
-        function downloadHistoryImage(base64Data, mimeType, timestamp) {
-            const link = document.createElement('a');
-            link.href = 'data:' + mimeType + ';base64,' + base64Data;
-            link.download = 'nano-banana-pro-' + timestamp + '.png';
-            link.click();
-        }
-
-        // Lightbox functionality
-        function openLightbox(imageSrc) {
-            const modal = document.getElementById('lightboxModal');
-            const lightboxImg = document.getElementById('lightboxImage');
-            lightboxImg.src = imageSrc;
-            modal.classList.add('show');
-            document.body.style.overflow = 'hidden'; // Prevent scrolling
-        }
-
-        function closeLightbox(event) {
-            // Close if clicking on the modal background or close button
-            if (event.target.id === 'lightboxModal' || event.target.className === 'lightbox-close') {
-                const modal = document.getElementById('lightboxModal');
-                modal.classList.remove('show');
-                document.body.style.overflow = 'auto'; // Restore scrolling
-            }
-        }
-
-        // Add click event to main image
-        <?php if ($currentImage): ?>
-        document.addEventListener('DOMContentLoaded', function() {
-            const currentImg = document.getElementById('currentImage');
-            if (currentImg) {
-                currentImg.addEventListener('click', function() {
-                    openLightbox(this.src);
-                });
-            }
-        });
-        <?php endif; ?>
-
-        // Close lightbox with Escape key
-        document.addEventListener('keydown', function(event) {
-            if (event.key === 'Escape') {
-                const modal = document.getElementById('lightboxModal');
-                if (modal.classList.contains('show')) {
-                    modal.classList.remove('show');
-                    document.body.style.overflow = 'auto';
-                }
-            }
-        });
-
-        function showError(message) {
-            errorMessage.textContent = message;
-            errorMessage.classList.add('show');
-            setTimeout(() => errorMessage.classList.remove('show'), 5000);
-        }
-
-        function showSuccess(message) {
-            successMessage.textContent = message;
-            successMessage.classList.add('show');
-            setTimeout(() => successMessage.classList.remove('show'), 3000);
-        }
-
-        function hideMessages() {
-            errorMessage.classList.remove('show');
-            successMessage.classList.remove('show');
-        }
-
-        function toggleDebug() {
-            const content = document.getElementById('debugContent');
-            content.style.display = content.style.display === 'none' ? 'block' : 'none';
-        }
-
-        function logDebug(type, data) {
-            const timestamp = new Date().toLocaleTimeString();
-
-            if (type === 'request') {
-                document.getElementById('lastRequest').style.display = 'block';
-                document.getElementById('lastRequestData').textContent =
-                    `[${timestamp}] Request:\n${JSON.stringify(data, null, 2)}`;
-            } else if (type === 'response') {
-                document.getElementById('lastResponse').style.display = 'block';
-                document.getElementById('lastResponseData').textContent =
-                    `[${timestamp}] Response:\n${JSON.stringify(data, null, 2)}`;
-            } else if (type === 'error') {
-                document.getElementById('lastError').style.display = 'block';
-                document.getElementById('lastErrorData').textContent =
-                    `[${timestamp}] Error:\n${typeof data === 'string' ? data : JSON.stringify(data, null, 2)}`;
-            }
-        }
-
-        function fileToBase64(file) {
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.onload = () => {
-                    // Get base64 string without data URL prefix
-                    const base64 = reader.result.split(',')[1];
-                    resolve(base64);
-                };
-                reader.onerror = reject;
-                reader.readAsDataURL(file);
-            });
-        }
-
-        async function loadServerLogs() {
-            try {
-                const response = await fetch('get_logs.php');
-                const data = await response.json();
-
-                if (data.success) {
-                    const logsSection = document.getElementById('serverLogs');
-                    const logsData = document.getElementById('serverLogsData');
-
-                    logsSection.style.display = 'block';
-                    logsData.textContent = data.logs.join('\n');
-                } else {
-                    showError('Failed to load server logs');
-                }
-            } catch (error) {
-                showError('Error loading logs: ' + error.message);
-            }
-        }
-
-        // Prompt Studio Functionality
-        const creativeFreedomSlider = document.getElementById('creativeFreedom');
-        const creativeFreedomValue = document.getElementById('creativeFreedomValue');
-        const enhanceBtn = document.getElementById('enhanceBtn');
-        const studioScene = document.getElementById('studioScene');
-        const enhancedOutput = document.getElementById('enhancedOutput');
-        const enhancedText = document.getElementById('enhancedText');
-        const usePromptBtn = document.getElementById('usePromptBtn');
-        const aspectRatioSelect = document.getElementById('aspectRatio');
-
-        // Update slider value display
-        creativeFreedomSlider.addEventListener('input', (e) => {
-            creativeFreedomValue.textContent = e.target.value + '%';
-        });
-
-        // Enhance prompt with AI
-        enhanceBtn.addEventListener('click', async () => {
-            const sceneDescription = studioScene.value.trim();
-
-            if (!sceneDescription) {
-                showError('Please enter a scene description');
-                return;
-            }
-
-            // Show loading state
-            enhanceBtn.disabled = true;
-            enhanceBtn.innerHTML = '⏳ Enhancing...';
-            enhancedOutput.classList.remove('show');
-
-            try {
-                const requestData = {
-                    sceneDescription: sceneDescription,
-                    camera: document.getElementById('studioCamera').value,
-                    lens: document.getElementById('studioLens').value,
-                    application: document.getElementById('studioApplication').value,
-                    aspectRatio: aspectRatioSelect.value,
-                    creativeFreedom: creativeFreedomSlider.value / 100
-                };
-
-                const response = await fetch('enhance_prompt.php', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(requestData)
-                });
-
-                const result = await response.json();
-
-                if (result.success) {
-                    enhancedText.textContent = result.enhancedPrompt;
-                    enhancedOutput.classList.add('show');
-                    showSuccess('Prompt enhanced successfully!');
-                } else {
-                    showError('Enhancement failed: ' + (result.error || 'Unknown error'));
-                }
-            } catch (error) {
-                showError('Network error: ' + error.message);
-            } finally {
-                enhanceBtn.disabled = false;
-                enhanceBtn.innerHTML = '✨ Enhance Prompt with AI';
-            }
-        });
-
-        // Use the enhanced prompt in the main form
-        usePromptBtn.addEventListener('click', () => {
-            const enhanced = enhancedText.textContent;
-            document.getElementById('prompt').value = enhanced;
-
-            // Also update aspect ratio in main form to match studio selection
-            document.getElementById('aspectRatio').value = aspectRatioSelect.value;
-
-            // Scroll to the main form
-            document.querySelector('.main-content').scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-            showSuccess('Prompt transferred! Ready to generate image.');
-        });
-
-        // MSAL Authentication (only if SSO is enabled)
-        <?php if ($ssoEnabled): ?>
-        const msalConfig = {
-            auth: {
-                clientId: "<?php echo SSO_CLIENT_ID; ?>",
-                authority: "https://login.microsoftonline.com/<?php echo SSO_TENANT_ID; ?>",
-                redirectUri: window.location.origin + window.location.pathname
-            },
-            cache: {
-                cacheLocation: "sessionStorage",
-                storeAuthStateInCookie: true,
-            }
-        };
-
-        const myMSALObj = new msal.PublicClientApplication(msalConfig);
-
-        function signOut() {
-            if (!confirm('Are you sure you want to log out?')) {
-                return;
-            }
-
-            // Call server to clear cookie
-            fetch('auth.php', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    action: 'logout'
-                })
-            })
-            .then(() => {
-                // Also clear MSAL session
-                myMSALObj.logoutPopup().then(() => {
-                    window.location.href = 'index.php';
-                }).catch(error => {
-                    console.error("Logout error:", error);
-                    window.location.href = 'index.php';
-                });
-            })
-            .catch(error => {
-                console.error("Logout error:", error);
-                window.location.href = 'index.php';
-            });
-        }
-        <?php endif; ?>
-    </script>
-
-    <?php if ($ssoEnabled): ?>
-    <script src="https://alcdn.msauth.net/browser/2.15.0/js/msal-browser.min.js" crossorigin="anonymous"></script>
-    <?php endif; ?>
 </body>
 </html>
diff --git a/backend/video_api.php b/backend/video_api.php
index d77f1cd..4a4a765 100644
--- a/backend/video_api.php
+++ b/backend/video_api.php
@@ -439,7 +439,7 @@ try {
                 'video' => [
                     'filename' => $filename,
                     'mime_type' => $videoData['mime_type'],
-                    'url' => '/api/stream_video.php?file=' . urlencode($filename)
+                    'url' => ($_ENV['API_BASE_PATH'] ?? '') . '/stream_video.php?file=' . urlencode($filename)
                 ]
             ]);
         } else if ($videoData['type'] === 'uri') {
@@ -481,7 +481,7 @@ try {
                     'video' => [
                         'filename' => $filename,
                         'mime_type' => $videoData['mime_type'],
-                        'url' => '/api/stream_video.php?file=' . urlencode($filename)
+                        'url' => ($_ENV['API_BASE_PATH'] ?? '') . '/stream_video.php?file=' . urlencode($filename)
                     ]
                 ]);
             } else {
@@ -561,7 +561,7 @@ try {
         echo json_encode([
             'success' => true,
             'video' => [
-                'url' => '/api/stream_video.php?file=' . urlencode($filename),
+                'url' => ($_ENV['API_BASE_PATH'] ?? '') . '/stream_video.php?file=' . urlencode($filename),
                 'filename' => $filename,
                 'mime_type' => 'video/mp4'
             ]
diff --git a/frontend/src/components/VideoGenTab.jsx b/frontend/src/components/VideoGenTab.jsx
index 8f6c59d..31a947a 100644
--- a/frontend/src/components/VideoGenTab.jsx
+++ b/frontend/src/components/VideoGenTab.jsx
@@ -129,10 +129,9 @@ const VideoGenTab = ({ activeProjectId, rerunData, onRerunLoaded }) => {
     // Check if already added
     if (referenceImages.some(img => img.projectItemId === item.id)) return;
 
-    // Auto-set constraints when adding first reference image (I2V requirements)
+    // Auto-set aspect ratio when adding first reference image
     if (referenceImages.length === 0) {
-      setDuration(8);
-      setAspectRatio('16:9'); // Reference images only support 16:9
+      setAspectRatio('16:9');
     }
 
     setReferenceImages(prev => [...prev, {
@@ -185,10 +184,9 @@ const VideoGenTab = ({ activeProjectId, rerunData, onRerunLoaded }) => {
       const reader = new FileReader();
       reader.onload = () => {
         setReferenceImages(prev => {
-          // Auto-set constraints when adding first reference image (I2V requirements)
+          // Auto-set aspect ratio when adding first reference image
           if (prev.length === 0) {
-            setDuration(8);
-            setAspectRatio('16:9'); // Reference images only support 16:9
+            setAspectRatio('16:9');
           }
           return [...prev, {
             data: reader.result.split(',')[1],
@@ -615,25 +613,16 @@ OUTPUT ONLY THE PROMPT - no explanations, no labels, no formatting.`;
             </label>
             <div className="flex gap-2">
               {durationOptions.map((opt) => {
-                const isDisabledByI2V = referenceImages.length > 0 && opt.value !== 8;
+                const isDisabledByI2V = false;
                 return (
                   <button
                     key={opt.value}
-                    onClick={() => {
-                      if (isDisabledByI2V) return;
-                      setDuration(opt.value);
-                      // Auto-downgrade resolution if not 8s (1080p requires 8s)
-                      if (opt.value !== 8 && resolution === '1080p') {
-                        setResolution('720p');
-                      }
-                    }}
-                    disabled={isDisabledByI2V}
-                    title={isDisabledByI2V ? 'I2V requires 8s duration' : ''}
+                    onClick={() => setDuration(opt.value)}
                     className={`flex-1 px-3 py-2 rounded-lg font-medium transition-all text-sm ${
                       duration === opt.value
                         ? 'bg-cinema-gold text-slate-950'
                         : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
-                    } ${isDisabledByI2V ? 'opacity-50 cursor-not-allowed' : ''}`}
+                    }`}
                   >
                     <div>{opt.label}</div>
                     <div className="text-xs opacity-70">{getDurationCost(opt.value)}</div>
@@ -641,9 +630,6 @@ OUTPUT ONLY THE PROMPT - no explanations, no labels, no formatting.`;
                 );
               })}
             </div>
-            {referenceImages.length > 0 && (
-              <p className="text-xs text-slate-500">I2V mode requires 8s duration</p>
-            )}
           </div>
 
           {/* Aspect Ratio */}
@@ -655,13 +641,7 @@ OUTPUT ONLY THE PROMPT - no explanations, no labels, no formatting.`;
               {['16:9', '9:16'].map((ratio) => (
                 <button
                   key={ratio}
-                  onClick={() => {
-                    setAspectRatio(ratio);
-                    if (ratio === '9:16') {
-                      // Auto-downgrade resolution (1080p not supported in portrait)
-                      setResolution('720p');
-                    }
-                  }}
+                  onClick={() => setAspectRatio(ratio)}
                   className={`flex-1 px-4 py-2 rounded-lg font-medium transition-all ${
                     aspectRatio === ratio
                       ? 'bg-cinema-gold text-slate-950'
@@ -681,27 +661,22 @@ OUTPUT ONLY THE PROMPT - no explanations, no labels, no formatting.`;
             </label>
             <div className="flex gap-2">
               {['720p', '1080p'].map((res) => {
-                const is1080pDisabled = res === '1080p' && (duration !== 8 || aspectRatio !== '16:9');
+                const is1080pDisabled = false;
                 return (
                   <button
                     key={res}
-                    onClick={() => !is1080pDisabled && setResolution(res)}
-                    disabled={is1080pDisabled}
-                    title={is1080pDisabled ? '1080p requires 8s duration + 16:9 aspect ratio' : ''}
+                    onClick={() => setResolution(res)}
                     className={`flex-1 px-4 py-2 rounded-lg font-medium transition-all ${
                       resolution === res
                         ? 'bg-cinema-gold text-slate-950'
                         : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
-                    } ${is1080pDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+                    }`}
                   >
                     {res}
                   </button>
                 );
               })}
             </div>
-            {(duration !== 8 || aspectRatio !== '16:9') && (
-              <p className="text-xs text-slate-500">1080p requires 8s + 16:9</p>
-            )}
           </div>
 
           {/* Audio Toggle */}
diff --git a/setup.sh b/setup.sh
index a287095..d82b05e 100644
--- a/setup.sh
+++ b/setup.sh
@@ -1,9 +1,9 @@
 #!/bin/bash
 
 # ============================================================================
-# Lux Studio - Local Development Setup Script
+# Lux Studio - Local Development Setup & Start Script
 # ============================================================================
-# This script sets up both frontend and backend for LOCAL development
+# This script sets up AND starts both frontend and backend for LOCAL development
 # For production deployment, use deploy.sh instead
 # ============================================================================
 
@@ -19,6 +19,9 @@ YELLOW='\033[1;33m'
 RED='\033[0;31m'
 NC='\033[0m' # No Color
 
+# Get the absolute path of the project root
+PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
 # ============================================================================
 # 1. CHECK PREREQUISITES
 # ============================================================================
@@ -125,7 +128,20 @@ cd ..
 echo ""
 
 # ============================================================================
-# 4. READ PORT CONFIGURATION
+# 4. CREATE REQUIRED DIRECTORIES
+# ============================================================================
+
+echo "${BLUE}Step 4: Creating required directories...${NC}"
+
+# Create backend upload directory with proper permissions
+mkdir -p backend/uploads/sessions
+chmod -R 755 backend/uploads 2>/dev/null || true
+
+echo "${GREEN}✓ Required directories created${NC}"
+echo ""
+
+# ============================================================================
+# 5. READ PORT CONFIGURATION
 # ============================================================================
 
 # Read ports from .env files
@@ -145,38 +161,262 @@ BACKEND_PORT=${BACKEND_PORT:-5015}
 FRONTEND_PORT=${FRONTEND_PORT:-3000}
 
 # ============================================================================
-# 5. FINAL INSTRUCTIONS
+# 6. CHECK FOR PORT CONFLICTS
+# ============================================================================
+
+echo "${BLUE}Step 5: Checking for port conflicts...${NC}"
+
+# Function to check if a port is in use
+check_port() {
+    local port=$1
+    if lsof -Pi :$port -sTCP:LISTEN -t >/dev/null 2>&1 ; then
+        return 0  # Port is in use
+    else
+        return 1  # Port is free
+    fi
+}
+
+# Function to kill process on port
+kill_port() {
+    local port=$1
+    local pid=$(lsof -ti:$port)
+    if [ ! -z "$pid" ]; then
+        echo "  → Killing process $pid on port $port..."
+        kill -9 $pid 2>/dev/null || true
+        sleep 1
+    fi
+}
+
+# Check backend port
+if check_port $BACKEND_PORT; then
+    echo "${YELLOW}  ⚠ Port $BACKEND_PORT is already in use${NC}"
+    read -p "  Kill the process and continue? (y/n) " -n 1 -r
+    echo
+    if [[ $REPLY =~ ^[Yy]$ ]]; then
+        kill_port $BACKEND_PORT
+        echo "${GREEN}  ✓ Port $BACKEND_PORT is now free${NC}"
+    else
+        echo "${RED}  ✗ Cannot start backend - port in use${NC}"
+        exit 1
+    fi
+else
+    echo "${GREEN}  ✓ Port $BACKEND_PORT is available${NC}"
+fi
+
+# Check frontend port
+if check_port $FRONTEND_PORT; then
+    echo "${YELLOW}  ⚠ Port $FRONTEND_PORT is already in use${NC}"
+    read -p "  Kill the process and continue? (y/n) " -n 1 -r
+    echo
+    if [[ $REPLY =~ ^[Yy]$ ]]; then
+        kill_port $FRONTEND_PORT
+        echo "${GREEN}  ✓ Port $FRONTEND_PORT is now free${NC}"
+    else
+        echo "${RED}  ✗ Cannot start frontend - port in use${NC}"
+        exit 1
+    fi
+else
+    echo "${GREEN}  ✓ Port $FRONTEND_PORT is available${NC}"
+fi
+
+echo ""
+
+# ============================================================================
+# 7. START BACKEND SERVER
+# ============================================================================
+
+echo "${BLUE}Step 6: Starting backend server...${NC}"
+
+cd "$PROJECT_ROOT/backend"
+
+# Start PHP server in background
+nohup php -S localhost:${BACKEND_PORT} > "${PROJECT_ROOT}/backend-server.log" 2>&1 &
+BACKEND_PID=$!
+
+# Wait a moment and check if server started
+sleep 2
+
+if ps -p $BACKEND_PID > /dev/null; then
+    echo "${GREEN}✓ Backend server started on port ${BACKEND_PORT}${NC}"
+    echo "  PID: $BACKEND_PID"
+    echo "  Logs: ${PROJECT_ROOT}/backend-server.log"
+
+    # Save PID for later shutdown
+    echo $BACKEND_PID > "${PROJECT_ROOT}/.backend.pid"
+else
+    echo "${RED}✗ Failed to start backend server${NC}"
+    echo "  Check ${PROJECT_ROOT}/backend-server.log for errors"
+    exit 1
+fi
+
+cd "$PROJECT_ROOT"
+echo ""
+
+# ============================================================================
+# 8. START FRONTEND SERVER
+# ============================================================================
+
+echo "${BLUE}Step 7: Starting frontend dev server...${NC}"
+
+cd "$PROJECT_ROOT/frontend"
+
+# Start Vite dev server in background
+nohup npm run dev > "${PROJECT_ROOT}/frontend-server.log" 2>&1 &
+FRONTEND_PID=$!
+
+# Wait for Vite to start (it takes a bit longer)
+echo "  → Waiting for Vite dev server to start..."
+sleep 5
+
+if ps -p $FRONTEND_PID > /dev/null; then
+    echo "${GREEN}✓ Frontend server started on port ${FRONTEND_PORT}${NC}"
+    echo "  PID: $FRONTEND_PID"
+    echo "  Logs: ${PROJECT_ROOT}/frontend-server.log"
+
+    # Save PID for later shutdown
+    echo $FRONTEND_PID > "${PROJECT_ROOT}/.frontend.pid"
+else
+    echo "${RED}✗ Failed to start frontend server${NC}"
+    echo "  Check ${PROJECT_ROOT}/frontend-server.log for errors"
+
+    # Clean up backend server
+    kill $BACKEND_PID 2>/dev/null || true
+    exit 1
+fi
+
+cd "$PROJECT_ROOT"
+echo ""
+
+# ============================================================================
+# 9. VERIFY SERVERS ARE RUNNING
+# ============================================================================
+
+echo "${BLUE}Step 8: Verifying servers...${NC}"
+
+# Wait a moment for servers to fully initialize
+sleep 3
+
+# Check if backend responds
+if curl -s http://localhost:${BACKEND_PORT}/server-check.php > /dev/null 2>&1; then
+    echo "${GREEN}  ✓ Backend is responding${NC}"
+else
+    echo "${YELLOW}  ⚠ Backend may not be fully ready yet${NC}"
+fi
+
+# Check if frontend responds
+if curl -s http://localhost:${FRONTEND_PORT} > /dev/null 2>&1; then
+    echo "${GREEN}  ✓ Frontend is responding${NC}"
+else
+    echo "${YELLOW}  ⚠ Frontend may not be fully ready yet${NC}"
+fi
+
+echo ""
+
+# ============================================================================
+# 10. CREATE STOP SCRIPT
+# ============================================================================
+
+# Create a stop script for easy shutdown
+cat > "${PROJECT_ROOT}/stop.sh" << 'EOF'
+#!/bin/bash
+
+# Colors
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m'
+
+echo -e "${YELLOW}🛑 Stopping Lux Studio servers...${NC}"
+
+PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+# Stop backend
+if [ -f "${PROJECT_ROOT}/.backend.pid" ]; then
+    BACKEND_PID=$(cat "${PROJECT_ROOT}/.backend.pid")
+    if ps -p $BACKEND_PID > /dev/null 2>&1; then
+        kill $BACKEND_PID 2>/dev/null
+        echo -e "${GREEN}✓ Backend server stopped (PID: $BACKEND_PID)${NC}"
+    else
+        echo -e "${YELLOW}⚠ Backend server not running${NC}"
+    fi
+    rm "${PROJECT_ROOT}/.backend.pid"
+fi
+
+# Stop frontend
+if [ -f "${PROJECT_ROOT}/.frontend.pid" ]; then
+    FRONTEND_PID=$(cat "${PROJECT_ROOT}/.frontend.pid")
+    if ps -p $FRONTEND_PID > /dev/null 2>&1; then
+        kill $FRONTEND_PID 2>/dev/null
+        echo -e "${GREEN}✓ Frontend server stopped (PID: $FRONTEND_PID)${NC}"
+    else
+        echo -e "${YELLOW}⚠ Frontend server not running${NC}"
+    fi
+    rm "${PROJECT_ROOT}/.frontend.pid"
+fi
+
+# Also kill any remaining processes on the ports (cleanup)
+BACKEND_PORT=$(grep -E "^BACKEND_PORT=" backend/.env 2>/dev/null | cut -d'=' -f2 | tr -d ' ')
+FRONTEND_PORT=$(grep -E "^FRONTEND_PORT=" frontend/.env 2>/dev/null | cut -d'=' -f2 | tr -d ' ')
+
+BACKEND_PORT=${BACKEND_PORT:-5015}
+FRONTEND_PORT=${FRONTEND_PORT:-3000}
+
+# Kill any remaining processes on ports
+for port in $BACKEND_PORT $FRONTEND_PORT; do
+    pid=$(lsof -ti:$port 2>/dev/null)
+    if [ ! -z "$pid" ]; then
+        kill -9 $pid 2>/dev/null || true
+        echo -e "${GREEN}✓ Cleaned up process on port $port${NC}"
+    fi
+done
+
+echo -e "${GREEN}✅ All servers stopped${NC}"
+EOF
+
+chmod +x "${PROJECT_ROOT}/stop.sh"
+
+# ============================================================================
+# 11. SUCCESS MESSAGE
 # ============================================================================
 
 echo "${GREEN}════════════════════════════════════════════════════════════${NC}"
-echo "${GREEN}🎉 Setup Complete! Ready for Local Development${NC}"
+echo "${GREEN}🎉 Lux Studio is Running!${NC}"
 echo "${GREEN}════════════════════════════════════════════════════════════${NC}"
 echo ""
 
-echo "${BLUE}📋 Next Steps:${NC}"
+echo "${BLUE}🌐 Application URLs:${NC}"
+echo "  • Frontend: ${GREEN}http://localhost:${FRONTEND_PORT}${NC}"
+echo "  • Backend API: ${GREEN}http://localhost:${BACKEND_PORT}${NC}"
 echo ""
-echo "1. ${YELLOW}Start Backend Server${NC} (Terminal 1):"
-echo "   ${GREEN}cd backend && php -S localhost:${BACKEND_PORT}${NC}"
+
+echo "${BLUE}📊 Server Status:${NC}"
+echo "  • Backend PID: $BACKEND_PID (port $BACKEND_PORT)"
+echo "  • Frontend PID: $FRONTEND_PID (port $FRONTEND_PORT)"
 echo ""
-echo "2. ${YELLOW}Start Frontend Dev Server${NC} (Terminal 2):"
-echo "   ${GREEN}cd frontend && npm run dev${NC}"
+
+echo "${BLUE}📝 Log Files:${NC}"
+echo "  • Backend: ${PROJECT_ROOT}/backend-server.log"
+echo "  • Frontend: ${PROJECT_ROOT}/frontend-server.log"
+echo "  • View backend: ${GREEN}tail -f ${PROJECT_ROOT}/backend-server.log${NC}"
+echo "  • View frontend: ${GREEN}tail -f ${PROJECT_ROOT}/frontend-server.log${NC}"
 echo ""
-echo "3. ${YELLOW}Open in Browser:${NC}"
-echo "   ${GREEN}http://localhost:${FRONTEND_PORT}${NC}"
+
+echo "${BLUE}🛑 Stop Servers:${NC}"
+echo "  ${GREEN}./stop.sh${NC}"
 echo ""
+
 echo "${BLUE}⚙️  Configuration:${NC}"
-echo "  • Backend Port: ${BACKEND_PORT} (change in backend/.env)"
-echo "  • Frontend Port: ${FRONTEND_PORT} (change in frontend/.env)"
-echo "  • SSO: Enabled (disable by setting VITE_SSO_ENABLED=false in frontend/.env)"
+echo "  • SSO: Enabled with LOCAL credentials"
+echo "  • SSO Client ID: 15c0c4e2-bac0-4564-a3a6-c2717f00a6d9 (local dev)"
+echo "  • API Key: Configured in .env files"
 echo ""
+
 echo "${BLUE}📚 Documentation:${NC}"
-echo "  • README.md - User guide and features"
-echo "  • CLAUDE.md - Developer guide for AI assistants"
-echo "  • DEPLOYMENT.md - Production deployment guide"
+echo "  • CLAUDE.md - Developer guide"
+echo "  • MDFiles/README.md - User guide"
+echo "  • MDFiles/AUTH_README.md - SSO guide"
 echo ""
-echo "${BLUE}💡 Useful Commands:${NC}"
-echo "  • Build for production: ${GREEN}cd frontend && npm run build${NC}"
-echo "  • Run linter: ${GREEN}cd frontend && npm run lint${NC}"
-echo "  • View logs: Check terminal output and browser console (F12)"
+
+echo "${YELLOW}💡 Tip: Open http://localhost:${FRONTEND_PORT} in your browser!${NC}"
 echo ""
 echo "Happy coding! 🚀"
diff --git a/status.sh b/status.sh
new file mode 100644
index 0000000..12bad31
--- /dev/null
+++ b/status.sh
@@ -0,0 +1,108 @@
+#!/bin/bash
+
+# ============================================================================
+# Lux Studio - Server Status Check Script
+# ============================================================================
+
+# Colors
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+NC='\033[0m'
+
+PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+# Read ports from .env files
+BACKEND_PORT=5015
+FRONTEND_PORT=3000
+
+if [ -f "backend/.env" ]; then
+    BACKEND_PORT=$(grep -E "^BACKEND_PORT=" backend/.env | cut -d'=' -f2 | tr -d ' ')
+fi
+
+if [ -f "frontend/.env" ]; then
+    FRONTEND_PORT=$(grep -E "^FRONTEND_PORT=" frontend/.env | cut -d'=' -f2 | tr -d ' ')
+fi
+
+BACKEND_PORT=${BACKEND_PORT:-5015}
+FRONTEND_PORT=${FRONTEND_PORT:-3000}
+
+echo -e "${BLUE}════════════════════════════════════════════════════════════${NC}"
+echo -e "${BLUE}📊 Lux Studio Server Status${NC}"
+echo -e "${BLUE}════════════════════════════════════════════════════════════${NC}"
+echo ""
+
+# Check Backend
+echo -e "${BLUE}🔧 Backend Server (Port ${BACKEND_PORT}):${NC}"
+if [ -f "${PROJECT_ROOT}/.backend.pid" ]; then
+    BACKEND_PID=$(cat "${PROJECT_ROOT}/.backend.pid")
+    if ps -p $BACKEND_PID > /dev/null 2>&1; then
+        echo -e "  Status: ${GREEN}✓ Running${NC}"
+        echo -e "  PID: $BACKEND_PID"
+        if curl -s http://localhost:${BACKEND_PORT}/server-check.php > /dev/null 2>&1; then
+            echo -e "  Health: ${GREEN}✓ Responding${NC}"
+        else
+            echo -e "  Health: ${YELLOW}⚠ Not responding${NC}"
+        fi
+    else
+        echo -e "  Status: ${RED}✗ Not running (stale PID file)${NC}"
+    fi
+else
+    echo -e "  Status: ${RED}✗ Not running${NC}"
+fi
+echo ""
+
+# Check Frontend
+echo -e "${BLUE}🎨 Frontend Server (Port ${FRONTEND_PORT}):${NC}"
+if [ -f "${PROJECT_ROOT}/.frontend.pid" ]; then
+    FRONTEND_PID=$(cat "${PROJECT_ROOT}/.frontend.pid")
+    if ps -p $FRONTEND_PID > /dev/null 2>&1; then
+        echo -e "  Status: ${GREEN}✓ Running${NC}"
+        echo -e "  PID: $FRONTEND_PID"
+        if curl -s http://localhost:${FRONTEND_PORT} > /dev/null 2>&1; then
+            echo -e "  Health: ${GREEN}✓ Responding${NC}"
+        else
+            echo -e "  Health: ${YELLOW}⚠ Not responding${NC}"
+        fi
+    else
+        echo -e "  Status: ${RED}✗ Not running (stale PID file)${NC}"
+    fi
+else
+    echo -e "  Status: ${RED}✗ Not running${NC}"
+fi
+echo ""
+
+# URLs
+echo -e "${BLUE}🌐 Application URLs:${NC}"
+echo -e "  • Frontend: ${GREEN}http://localhost:${FRONTEND_PORT}${NC}"
+echo -e "  • Backend API: ${GREEN}http://localhost:${BACKEND_PORT}${NC}"
+echo ""
+
+# Log files
+echo -e "${BLUE}📝 Log Files:${NC}"
+if [ -f "${PROJECT_ROOT}/backend-server.log" ]; then
+    echo -e "  • Backend: ${GREEN}${PROJECT_ROOT}/backend-server.log${NC}"
+    echo -e "    Last 3 lines:"
+    tail -3 "${PROJECT_ROOT}/backend-server.log" | sed 's/^/    /'
+else
+    echo -e "  • Backend: ${YELLOW}No log file${NC}"
+fi
+echo ""
+
+if [ -f "${PROJECT_ROOT}/frontend-server.log" ]; then
+    echo -e "  • Frontend: ${GREEN}${PROJECT_ROOT}/frontend-server.log${NC}"
+    echo -e "    Last 3 lines:"
+    tail -3 "${PROJECT_ROOT}/frontend-server.log" | sed 's/^/    /'
+else
+    echo -e "  • Frontend: ${YELLOW}No log file${NC}"
+fi
+echo ""
+
+# Commands
+echo -e "${BLUE}💡 Useful Commands:${NC}"
+echo -e "  • View backend logs: ${GREEN}tail -f backend-server.log${NC}"
+echo -e "  • View frontend logs: ${GREEN}tail -f frontend-server.log${NC}"
+echo -e "  • Stop servers: ${GREEN}./stop.sh${NC}"
+echo -e "  • Restart: ${GREEN}./stop.sh && ./setup.sh${NC}"
+echo ""