adding integration for video dfriectly in streamlit app

manimator/agents/reflexion_agent.py

@@ -243,12 +243,45 @@ YOU MUST APPLY THESE LESSONS IN YOUR CODE! Do not repeat these mistakes.
 
 {goal}
 
-CRITICAL REMINDERS:
-1. NO BLANK SCREENS: Keep the screen populated. If a voiceover is playing, show something.
-2. NO OVERLAPS: Ensure text and objects do not overlap. Use `next_to` and `arrange` with proper `buff`.
-3. CLEAN TRANSITIONS: Fade out old content before showing new content.
-4. VARIED ANIMATIONS: Use a mix of Write, FadeIn, GrowFromCenter, etc.
-5. STAY ON SCREEN: Ensure all text and objects are within screen boundaries.
+# ============================================================================
+# 🚨 CRITICAL REQUIREMENTS - YOU MUST FOLLOW THESE
+# ============================================================================
+
+## SCREEN BOUNDARIES (CRITICAL!)
+- **ALL content MUST stay on screen** - nothing should be cut off
+- For any VGroup with 4+ items: USE `group.scale_to_fit_height(config.frame_height - 2.5)`
+- Maximum 4-5 items visible at once, use smaller fonts (28-32pt) for lists
+- Always leave margins: top 1.0, bottom 0.8, sides 0.5
+
+## DYNAMIC ANIMATIONS (CRITICAL!)
+- **NEVER use only Write()** - mix at least 4 different animation types
+- **MUST use LaggedStart** for any list of items: `LaggedStart(*[FadeIn(x, shift=RIGHT) for x in items], lag_ratio=0.2)`
+- **MUST include emphasis animations**: `Indicate()`, `Circumscribe()`, `Flash()` on key elements
+- **Use motion during voiceover**: `obj.animate.scale(1.05)` while explaining
+- **Creative transitions**: `FadeOut(old, shift=LEFT), FadeIn(new, shift=RIGHT)`
+
+## NO STATIC/BORING MOMENTS
+- NEVER have blank screens - always show something
+- NEVER use `self.wait()` longer than 0.5s without animation
+- Every section should have at least one emphasis animation
+- Objects should move and transform, not just appear
+
+## GOOD EXAMPLE PATTERN:
+```python
+# Create items and SCALE TO FIT
+items = VGroup(*[Text(f"Item {{i}}", font_size=28) for i in range(5)])
+items.arrange(DOWN, buff=0.3)
+items.scale_to_fit_height(config.frame_height - 3.0)  # CRITICAL!
+items.next_to(title, DOWN, buff=0.6)
+
+# Animate with VARIETY
+self.play(LaggedStart(*[FadeIn(i, shift=RIGHT) for i in items], lag_ratio=0.15))
+
+# Add EMPHASIS
+self.play(Indicate(items[0], color=YELLOW, scale_factor=1.1))
+self.play(Circumscribe(items[1]))
+self.play(items[2].animate.scale(1.1).set_color(GREEN))
+```
 """
         
         messages = [
@@ -282,37 +315,81 @@ CODE TO REVIEW:
 {code}
 ```
 
-Review specifically for:
+# ============================================================================
+# CRITICAL REVIEW CATEGORIES - CHECK ALL CAREFULLY
+# ============================================================================
+
+## 1. 🚨 SCREEN BOUNDARY ISSUES (HIGH PRIORITY)
+
+Check if content will GO OFF SCREEN:
+- Count items in VGroups - if 5+ items are arranged vertically, is there `scale_to_fit_height()`?
+- Are there multiple items stacked without proper scaling?
+- Is `config.frame_height` or `config.frame_width` used for boundary checks?
+- **RED FLAG**: VGroup with 4+ items arranged(DOWN) WITHOUT scale_to_fit_height = CRITICAL ERROR
+- **RED FLAG**: Large groups not using safe margins (buff < 0.5)
+
+**Expected pattern for 4+ items:**
+```python
+group.scale_to_fit_height(config.frame_height - 2.5)
+```
+
+## 2. 🎬 ANIMATION VARIETY & ENGAGEMENT (HIGH PRIORITY)
+
+Check if video will be STATIC/BORING:
+- Count animation types used - are there at least 3-4 different types?
+- **RED FLAG**: Only using `Write()` for all animations
+- **RED FLAG**: No emphasis animations (Indicate, Circumscribe, Flash, etc.)
+- **RED FLAG**: No LaggedStart for list animations
+- **RED FLAG**: Long `self.wait()` calls (> 1 second) without visual activity
+- **RED FLAG**: Simple FadeIn/FadeOut without shift parameters
 
-1. **Visual Overlaps** (CRITICAL):
-   - VGroup misuse (arranging mixed types together)
-   - Objects placed at same position without offset
-   - Text stacking on top of other text
-   - Elements not using next_to() or arrange() properly
+**Good animations to look for:**
+- `FadeIn(obj, shift=UP/DOWN/LEFT/RIGHT)` ✓
+- `LaggedStart(*[...], lag_ratio=0.2)` ✓
+- `Indicate()`, `Circumscribe()`, `Flash()` ✓
+- `obj.animate.scale(1.1).set_color(YELLOW)` ✓
+- `GrowFromCenter()`, `DrawBorderThenFill()` ✓
 
-2. **Manim API Misuse**:
-   - Invalid parameters (corner_radius on Rectangle, etc.)
-   - Deprecated methods
-   - Incorrect animation calls
+## 3. 📐 VISUAL OVERLAPS
 
-3. **Logic Errors**:
-   - Objects used before definition
-   - Animations on removed objects
-   - Incorrect loop logic
+- VGroup misuse (arranging mixed types together)
+- Objects placed at same position without offset
+- Text stacking on top of other text
+- Elements not using next_to() or arrange() properly
 
-4. **Best Practices**:
-   - Blank screens during voiceover
-   - Missing cleanup (FadeOut before new content)
-   - Objects going off-screen
-   - Poor animation variety
+## 4. 🔧 MANIM API MISUSE
+
+- Invalid parameters (corner_radius on Rectangle, etc.)
+- Deprecated methods
+- Incorrect animation calls
+
+## 5. 💡 LOGIC ERRORS
+
+- Objects used before definition
+- Animations on removed objects
+- Incorrect loop logic
+
+## 6. ✨ BEST PRACTICES
+
+- Blank screens during voiceover (no visuals while talking)
+- Missing cleanup (FadeOut before new content)
+- Poor visual hierarchy
+- No transitions between sections (just FadeOut/FadeIn without motion)
+
+# ============================================================================
 
 For EACH issue found, provide:
 - severity: "low" | "medium" | "high"
-- category: "OVERLAP" | "API_MISUSE" | "LOGIC_ERROR" | "BEST_PRACTICE"
+- category: "OFF_SCREEN" | "STATIC_VIDEO" | "OVERLAP" | "API_MISUSE" | "LOGIC_ERROR" | "BEST_PRACTICE"
 - line_range: [start_line, end_line] if identifiable
 - description: What's wrong
 - suggestion: How to fix it
 
+**SEVERITY GUIDE:**
+- HIGH: Content goes off-screen, only Write() animations used, major overlaps
+- MEDIUM: Missing emphasis animations, no LaggedStart for lists, long waits
+- LOW: Minor styling issues, could be slightly more dynamic
+
 If the code is well-written with no significant issues, respond with:
 {{"has_issues": false, "overall_severity": "none", "issues": [], "summary": "Code is well-structured"}}
 
@@ -324,13 +401,20 @@ Respond ONLY with valid JSON in this exact format:
   "issues": [
     {{
       "severity": "high",
-      "category": "OVERLAP",
-      "line_range": [65, 68],
-      "description": "VGroup(boxes, labels).arrange() treats these as 2 items, causing all boxes to overlap",
-      "suggestion": "Create individual VGroup pairs: [VGroup(box, label) for box, label in zip(boxes, labels)], then arrange pairs"
+      "category": "OFF_SCREEN",
+      "line_range": [45, 52],
+      "description": "VGroup with 6 items arranged vertically without scale_to_fit_height - content will go off bottom of screen",
+      "suggestion": "Add: group.scale_to_fit_height(config.frame_height - 2.5) after arrange()"
+    }},
+    {{
+      "severity": "high", 
+      "category": "STATIC_VIDEO",
+      "line_range": [1, 100],
+      "description": "Only Write() and FadeIn() animations used - video will feel static and boring",
+      "suggestion": "Add emphasis animations: Indicate(), Circumscribe(). Use LaggedStart for lists. Add .animate chains for motion."
     }}
   ],
-  "summary": "Found 1 critical overlap issue"
+  "summary": "Found 2 critical issues: content goes off-screen and animations lack variety"
 }}
 ```
 """

manimator/inputs/pdf_parser.py

@@ -1,6 +1,6 @@
 import logging
 from pathlib import Path
-from typing import Optional
+from typing import Optional, Union
 import PyPDF2
 
 logger = logging.getLogger(__name__)
@@ -11,7 +11,7 @@ class PDFParser:
     """
     
     @staticmethod
-    def parse(file_path: str | Path) -> str:
+    def parse(file_path: Union[str, Path]) -> str:
         """
         Extract text from a PDF file.
         """

manimator/utils/system_prompts.py

@@ -65,34 +65,103 @@ MANIM API CONSTRAINTS (CRITICAL - DO NOT HALLUCINATE):
 - WHITE, BLACK, RED, GREEN, BLUE, YELLOW, ORANGE, PURPLE, PINK, TEAL, GRAY
 - For custom colors, use hex strings: "#FF5733"
 
-**Positioning & Layout (STRICT NO OVERLAPS!)**:
-- **CRITICAL**: Objects MUST NOT overlap unless intended (like a background).
-- **NEVER** place multiple text objects at the default center without moving them.
-- **MANDATORY**: Use `VGroup(obj1, obj2).arrange(DOWN, buff=0.5)` for lists/stacks.
-- **MANDATORY**: Use `obj.next_to(other, direction, buff=0.5)` for relative positioning.
-- Use `obj.to_edge(UP, buff=1.0)` for titles.
-- **AVOID** absolute coordinates like `move_to([3, 2, 0])` for text. It causes overlaps.
-- If the screen is full, **FADE OUT** old content before adding new items.
-
-**Advanced Animations** (Make it look PREMIUM):
-- **Transitions**: `TransformMatchingShapes`, `TransformMatchingTex`
-- **Creation**: `Write(obj)`, `Create(obj)`, `DrawBorderThenFill(obj)`, `FadeIn(obj, shift=UP)`, `GrowFromCenter(obj)`, `SpinInFromNothing(obj)`
-- **Emphasis**: `Indicate(obj)`, `Circumscribe(obj)`, `Wiggle(obj)`, `FocusOn(obj)`
-- **Grouping**: `self.play(LaggedStart(*[Write(o) for o in group], lag_ratio=0.1))`
-- **Motion**: `self.play(obj.animate.scale(1.2).set_color(RED))`
-
-**VISUAL ENGAGEMENT RULES (CRITICAL):**
+# ============================================================================
+# 🚨 CRITICAL: SCREEN BOUNDARY RULES (CONTENT MUST STAY ON SCREEN!)
+# ============================================================================
+
+**The screen has STRICT boundaries. Content going off-screen is a CRITICAL ERROR.**
+
+1. **MANDATORY SCALING**: After creating any VGroup with multiple items, ALWAYS scale to fit:
+   ```python
+   # ALWAYS do this for groups with 3+ items:
+   group = VGroup(item1, item2, item3, item4).arrange(DOWN, buff=0.3)
+   group.scale_to_fit_height(config.frame_height - 2.5)  # Leave 1.25 margin top/bottom
+   group.scale_to_fit_width(config.frame_width - 2)       # Leave 1 margin left/right
+   ```
+
+2. **LIMIT ITEMS PER SCREEN**: 
+   - Maximum 4-5 items visible at once with title
+   - Maximum 6 items if no title
+   - If more items needed: use PAGINATION (show items in batches, FadeOut old, FadeIn new)
+
+3. **SAFE ZONES**: Always leave margins:
+   - Top: 1.0 unit buffer (for title)
+   - Bottom: 0.8 unit buffer
+   - Left/Right: 0.5 unit buffer each
+   - Use: `group.move_to(ORIGIN).shift(DOWN * 0.5)` to center in safe zone
+
+4. **CHECK BOUNDS AFTER POSITIONING**:
+   ```python
+   # After arranging, if content is tall, scale it:
+   if group.height > config.frame_height - 2:
+       group.scale_to_fit_height(config.frame_height - 2.5)
+   ```
+
+5. **SMALLER FONT FOR LISTS**: When showing 4+ items, use smaller fonts:
+   - Title: 48pt (not 64)
+   - Items: 28-32pt (not 36-48)
+
+# ============================================================================
+# 🎬 CRITICAL: DYNAMIC ANIMATION RULES (NO STATIC/BORING VIDEOS!)
+# ============================================================================
+
+**Videos MUST be dynamic and engaging. Static slides are UNACCEPTABLE.**
+
+1. **ANIMATION VARIETY (MANDATORY)**: 
+   - NEVER use only `Write()` - mix at least 3-4 different animation types
+   - Use: `FadeIn(shift=UP/DOWN/LEFT/RIGHT)`, `GrowFromCenter`, `DrawBorderThenFill`, `SpinInFromNothing`
+   - For lists: ALWAYS use `LaggedStart` with `lag_ratio=0.15-0.3`
+
+2. **CONTINUOUS MOTION**: 
+   - Objects should move/transform, not just appear
+   - Use `.animate` chains: `obj.animate.scale(1.1).shift(UP*0.2).set_color(YELLOW)`
+   - Add subtle motion during voiceover: `self.play(obj.animate.scale(1.05), run_time=2)`
+
+3. **EMPHASIS ANIMATIONS (USE FREQUENTLY)**:
+   - `Indicate(obj, color=YELLOW, scale_factor=1.2)` - highlight important items
+   - `Circumscribe(obj, color=YELLOW)` - draw attention
+   - `Flash(obj, color=WHITE)` - quick flash effect
+   - `Wiggle(obj)` - playful emphasis
+   - `FocusOn(point)` - zoom focus effect
+
+4. **TRANSITIONS BETWEEN SECTIONS**:
+   - NEVER just `FadeOut` and `FadeIn` - use creative transitions
+   - `TransformMatchingShapes(old_group, new_group)` - morph between similar objects
+   - `ReplacementTransform(old, new)` - smooth replacement
+   - Slide transitions: `FadeOut(old, shift=LEFT), FadeIn(new, shift=RIGHT)`
+
+5. **PARALLEL ANIMATIONS**: 
+   - Combine multiple animations: `self.play(Write(text), Create(circle), run_time=1.5)`
+   - Use `AnimationGroup` for complex choreography
+
+6. **BACKGROUND ANIMATIONS** (optional but recommended):
+   - Subtle floating particles, pulsing backgrounds, moving grid lines
+   - Keep the screen alive even when explaining
+
+7. **TIMING**:
+   - Short animations: 0.5-1.0 seconds
+   - Standard: 1.0-1.5 seconds
+   - Complex: 2.0-3.0 seconds
+   - AVOID `self.wait()` longer than 0.5 seconds - always show something moving
+
+# ============================================================================
+# VISUAL ENGAGEMENT RULES
+# ============================================================================
+
 1. **NO BLANK SCREENS**: NEVER leave the screen empty for more than 0.5 seconds.
    - If a voiceover is long, break it up and show corresponding visuals for each part.
    - Always have a background or title visible if main content is clearing.
    - Use `wait()` only when static visuals are fully present and readable.
+   
 2. **STRICT NO OVERLAP**:
    - Text must NEVER overlap with other text or figures.
    - Use `next_to(target, direction, buff=0.5)` to ensure spacing.
    - If screen is full, `FadeOut` old content before adding new.
-3. **DYNAMIC FLOW**:
-   - Avoid static slides. Keep things moving gently if possible.
-   - Use a variety of animations (not just `Write`). Mix `FadeIn`, `GrowFromCenter`, `DrawBorderThenFill`.
+   
+3. **PACING**:
+   - Show 2-3 items, then emphasize/animate them
+   - Clear screen and move to next batch
+   - Each screen should have a "moment" - an emphasis animation
 
 {theme_instructions}
 
@@ -109,44 +178,64 @@ class GeneratedScene(VoiceoverScene):
         # Initialize voiceover
         self.set_speech_service(SimpleElevenLabsService(voice_id="Rachel"))
         
-        # --- Section 1: Intro ---
-        with self.voiceover(text="Let's explore this concept.") as tracker:
-            title = Text("The Concept", font_size=64, weight=BOLD).to_edge(UP)
-            self.play(Write(title), run_time=1)
+        # --- Section 1: Intro with Dynamic Animation ---
+        with self.voiceover(text="Let's explore this fascinating concept.") as tracker:
+            title = Text("The Concept", font_size=48, weight=BOLD).to_edge(UP, buff=0.8)
+            self.play(FadeIn(title, shift=DOWN), run_time=1)
+            self.play(Indicate(title, color=YELLOW, scale_factor=1.1))
+            
+        # --- Section 2: Main Content with Safe Boundaries ---
+        with self.voiceover(text="Here are the key components of this system.") as tracker:
+            # Create items with smaller font for multiple items
+            items = VGroup(*[
+                Text(f"{{i+1}}. Item {{i+1}} Description", font_size=28)
+                for i in range(4)
+            ]).arrange(DOWN, buff=0.4, aligned_edge=LEFT)
             
-        # --- Section 2: Main Content ---
-        with self.voiceover(text="Here are the key components.") as tracker:
-            # Use VGroup for layout safety
-            item1 = Text("1. First Item", font_size=36)
-            item2 = Text("2. Second Item", font_size=36)
-            item3 = Text("3. Third Item", font_size=36)
+            # 🚨 CRITICAL: Scale to fit screen with margins
+            items.scale_to_fit_height(config.frame_height - 3.5)
+            items.next_to(title, DOWN, buff=0.8)
             
-            group = VGroup(item1, item2, item3).arrange(DOWN, buff=0.5, aligned_edge=LEFT)
-            group.next_to(title, DOWN, buff=1.0)
+            # Animate with variety using LaggedStart
+            self.play(LaggedStart(*[
+                FadeIn(item, shift=RIGHT*0.5) for item in items
+            ], lag_ratio=0.2))
             
-            # Animate with LaggedStart for premium feel
-            self.play(LaggedStart(*[FadeIn(i, shift=RIGHT) for i in group], lag_ratio=0.3))
+            # Add emphasis animations
+            for item in items:
+                self.play(Indicate(item, scale_factor=1.05), run_time=0.3)
             
-        # --- Section 3: Detail ---
-        with self.voiceover(text="Notice how they interact.") as tracker:
-            self.play(Indicate(item1, color=YELLOW))
-            self.play(item2.animate.scale(1.1))
+        # --- Section 3: Transform/Transition ---
+        with self.voiceover(text="Watch how these elements interact.") as tracker:
+            # Creative transition
+            self.play(
+                items[0].animate.scale(1.2).set_color(YELLOW),
+                items[1:].animate.set_opacity(0.5),
+                run_time=1
+            )
+            self.play(Circumscribe(items[0], color=YELLOW))
             
-        # Cleanup
-        self.play(FadeOut(Group(title, group)))
+        # Cleanup with slide transition
+        self.play(
+            FadeOut(title, shift=UP),
+            FadeOut(items, shift=DOWN),
+            run_time=0.8
+        )
 ```
 
 GENERAL BEST PRACTICES:
-1.  **Typography**: Use `Text` for labels/headings, `MathTex` ONLY for math. Align text properly (`aligned_edge=LEFT`).
-2.  **Visual Hierarchy**: Title (64pt) > Heading (48pt) > Body (36pt) > Label (24pt).
+1.  **Typography**: Use smaller fonts (28-36pt) for lists. Title max 48-56pt.
+2.  **Visual Hierarchy**: Title > Heading > Body > Label. But keep all readable.
 3.  **No Overlap**: ALWAYS use `arrange` or `next_to` with `buff`. Check your spacing!
 4.  **Motion**: Use `shift=UP/DOWN` in `FadeIn` for dynamic entrances. Use `LaggedStart` for lists.
-5.  **Cleanliness**: Don't clutter the screen. Fade out old objects before showing new ones.
-6.  **NEVER hallucinate parameters**: Only use parameters listed above.
+5.  **Screen Bounds**: ALWAYS `scale_to_fit_height/width` for groups with 4+ items.
+6.  **Animation Variety**: Mix at least 4 different animation types per video.
+7.  **NEVER hallucinate parameters**: Only use parameters listed above.
 
 Generate the COMPLETE Python code for the requested topic.
 """
 
+
 SCENE_SYSTEM_PROMPT = """# Content Structure System
 
 When presented with any research paper, topic, question, or material, transform it into the following structured format:

requirements.txt

@@ -8,4 +8,7 @@ manim==0.18.1
 pypdf2==3.0.1
 gradio
 streamlit
-requests
+requests
+beautifulsoup4>=4.12.0
+lxml>=4.9.0
+readability-lxml>=0.8.1

streamlit_app.py

@@ -18,6 +18,10 @@ import asyncio
 from pathlib import Path
 from datetime import datetime
 
+# Load environment variables from .env file
+from dotenv import load_dotenv
+load_dotenv()
+
 # Check if we're in direct mode (for Hugging Face deployment)
 DIRECT_MODE = os.getenv("DIRECT_MODE", "true").lower() == "true"
 
@@ -29,55 +33,343 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for better aesthetics
+# Custom CSS - Premium Techy Design
 st.markdown("""
 <style>
+    /* ========================================
+       HIDE STREAMLIT DEFAULT ELEMENTS
+       ======================================== */
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    header {visibility: hidden;}
+    
+    /* Hide the deploy button and hamburger menu */
+    .stDeployButton {display: none;}
+    [data-testid="stToolbar"] {display: none;}
+    [data-testid="stDecoration"] {display: none;}
+    [data-testid="stStatusWidget"] {display: none;}
+    
+    /* Remove top padding */
+    .block-container {
+        padding-top: 1rem !important;
+    }
+    
+    /* ========================================
+       MAIN APP - CYBER DARK THEME
+       ======================================== */
     .stApp {
-        background-color: #0e1117;
-        color: #fafafa;
+        background: linear-gradient(135deg, #0a0a1a 0%, #0f0f2d 50%, #0a0a1a 100%);
+        color: #e0e0ff;
+    }
+    
+    /* Subtle animated background grid */
+    .stApp::before {
+        content: "";
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: 
+            linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
+        background-size: 50px 50px;
+        pointer-events: none;
+        z-index: -1;
+    }
+    
+    /* All text should be light */
+    .stApp p, .stApp span, .stApp label, .stApp div {
+        color: #e0e0ff !important;
+    }
+    
+    /* ========================================
+       SIDEBAR - GLASSMORPHISM STYLE
+       ======================================== */
+    [data-testid="stSidebar"] {
+        background: linear-gradient(180deg, rgba(20, 20, 45, 0.95) 0%, rgba(15, 15, 35, 0.98) 100%) !important;
+        backdrop-filter: blur(20px);
+        border-right: 1px solid rgba(99, 102, 241, 0.2);
     }
+    
+    [data-testid="stSidebar"] * {
+        color: #e0e0ff !important;
+    }
+    
+    /* Sidebar title styling */
+    [data-testid="stSidebar"] h1 {
+        background: linear-gradient(90deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-weight: 700 !important;
+    }
+    
+    /* Mode indicator - glowing badge */
+    [data-testid="stSidebar"] .stSuccess {
+        background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%) !important;
+        border: 1px solid rgba(16, 185, 129, 0.4) !important;
+        border-radius: 12px !important;
+        box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
+    }
+    
+    [data-testid="stSidebar"] .stInfo {
+        background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
+        border: 1px solid rgba(99, 102, 241, 0.4) !important;
+        border-radius: 12px !important;
+        box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
+    }
+    
+    /* Section headers in sidebar */
+    [data-testid="stSidebar"] .stMarkdown h3 {
+        color: #a5b4fc !important;
+        font-size: 0.85rem !important;
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+        margin-top: 1.5rem !important;
+    }
+    
+    /* ========================================
+       BUTTONS - NEON GLOW STYLE
+       ======================================== */
     .stButton>button {
-        background-color: #ff4b4b;
-        color: white;
-        border-radius: 20px;
-        padding: 10px 24px;
-        font-weight: bold;
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+        color: white !important;
+        border-radius: 12px;
+        padding: 14px 32px;
+        font-weight: 600;
+        font-size: 16px;
         border: none;
-        transition: all 0.3s ease;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+        position: relative;
+        overflow: hidden;
     }
+    
     .stButton>button:hover {
-        background-color: #ff3333;
-        transform: scale(1.05);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
     }
-    .stTextInput>div>div>input {
-        border-radius: 10px;
+    
+    .stButton>button:active {
+        transform: translateY(-1px);
     }
+    
+    /* Download button - cyan neon */
+    .stDownloadButton>button {
+        background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 50%, #67e8f9 100%) !important;
+        color: #0a0a1a !important;
+        font-weight: 700 !important;
+        border-radius: 12px;
+        padding: 14px 32px;
+        border: none;
+        box-shadow: 0 4px 20px rgba(6, 182, 212, 0.4);
+    }
+    
+    .stDownloadButton>button:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 8px 30px rgba(34, 211, 238, 0.5);
+    }
+    
+    /* ========================================
+       INPUT FIELDS - GLASS CARDS
+       ======================================== */
+    .stTextInput>div>div>input,
     .stTextArea>div>div>textarea {
+        background: rgba(20, 20, 50, 0.6) !important;
+        color: #ffffff !important;
+        border: 1px solid rgba(99, 102, 241, 0.3) !important;
+        border-radius: 12px;
+        backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+    }
+    
+    .stTextInput>div>div>input:focus,
+    .stTextArea>div>div>textarea:focus {
+        border-color: #8b5cf6 !important;
+        box-shadow: 0 0 20px rgba(139, 92, 246, 0.3) !important;
+    }
+    
+    .stTextInput>div>div>input::placeholder,
+    .stTextArea>div>div>textarea::placeholder {
+        color: #6b7280 !important;
+    }
+    
+    /* ========================================
+       SELECTBOX / DROPDOWN
+       ======================================== */
+    .stSelectbox>div>div {
+        background: rgba(20, 20, 50, 0.6) !important;
+        border: 1px solid rgba(99, 102, 241, 0.3) !important;
         border-radius: 10px;
     }
-    .css-1d391kg {
-        padding-top: 3rem;
+    
+    .stSelectbox label {
+        color: #a5b4fc !important;
+        font-weight: 500;
     }
-    .status-box {
-        padding: 1rem;
+    
+    /* ========================================
+       TABS - PILL STYLE
+       ======================================== */
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 8px;
+        background: transparent;
+        padding: 4px;
+    }
+    
+    .stTabs [data-baseweb="tab"] {
+        background: rgba(20, 20, 50, 0.6);
+        border: 1px solid rgba(99, 102, 241, 0.2);
         border-radius: 10px;
+        color: #a5b4fc !important;
+        padding: 12px 24px;
+        transition: all 0.3s ease;
+    }
+    
+    .stTabs [data-baseweb="tab"]:hover {
+        background: rgba(99, 102, 241, 0.1);
+        border-color: rgba(99, 102, 241, 0.4);
+    }
+    
+    .stTabs [aria-selected="true"] {
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
+        border-color: transparent !important;
+        color: white !important;
+        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+    }
+    
+    /* ========================================
+       HEADERS - GRADIENT TEXT
+       ======================================== */
+    h1 {
+        background: linear-gradient(90deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-weight: 800 !important;
+        font-size: 2.5rem !important;
+    }
+    
+    h2, h3, h4, h5, h6 {
+        color: #e0e0ff !important;
+    }
+    
+    /* ========================================
+       STATUS BOXES - GLOWING CARDS
+       ======================================== */
+    .status-box {
+        padding: 1.25rem;
+        border-radius: 16px;
         margin: 1rem 0;
+        color: #ffffff !important;
+        backdrop-filter: blur(10px);
+        border: 1px solid;
     }
+    
     .status-generating {
-        background-color: #1e3a5f;
-        border-left: 4px solid #3b82f6;
+        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
+        border-color: rgba(59, 130, 246, 0.4);
+        box-shadow: 0 0 25px rgba(59, 130, 246, 0.15);
     }
+    
     .status-rendering {
-        background-color: #1e3a5f;
-        border-left: 4px solid #f59e0b;
+        background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
+        border-color: rgba(245, 158, 11, 0.4);
+        box-shadow: 0 0 25px rgba(245, 158, 11, 0.15);
     }
+    
     .status-complete {
-        background-color: #1a3d2e;
-        border-left: 4px solid #10b981;
+        background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
+        border-color: rgba(16, 185, 129, 0.4);
+        box-shadow: 0 0 25px rgba(16, 185, 129, 0.15);
     }
+    
     .status-error {
-        background-color: #3d1a1a;
-        border-left: 4px solid #ef4444;
+        background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(248, 113, 113, 0.1) 100%);
+        border-color: rgba(239, 68, 68, 0.4);
+        box-shadow: 0 0 25px rgba(239, 68, 68, 0.15);
+    }
+    
+    /* ========================================
+       PROGRESS BAR - ANIMATED GRADIENT
+       ======================================== */
+    .stProgress > div > div > div > div {
+        background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+        border-radius: 10px;
+    }
+    
+    .stProgress > div > div > div {
+        background: rgba(99, 102, 241, 0.1);
+        border-radius: 10px;
+    }
+    
+    /* ========================================
+       FILE UPLOADER
+       ======================================== */
+    [data-testid="stFileUploader"] {
+        background: rgba(20, 20, 50, 0.6);
+        border: 1px dashed rgba(99, 102, 241, 0.4);
+        border-radius: 16px;
+        padding: 1.5rem;
+        transition: all 0.3s ease;
+    }
+    
+    [data-testid="stFileUploader"]:hover {
+        border-color: #8b5cf6;
+        box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
+    }
+    
+    [data-testid="stFileUploader"] label {
+        color: #a5b4fc !important;
+    }
+    
+    /* ========================================
+       VIDEO PLAYER - PREMIUM FRAME
+       ======================================== */
+    video {
+        border-radius: 16px;
+        box-shadow: 
+            0 20px 50px rgba(0, 0, 0, 0.5),
+            0 0 0 1px rgba(99, 102, 241, 0.2);
+    }
+    
+    /* ========================================
+       ALERTS - GLASS STYLE
+       ======================================== */
+    .stAlert {
+        background: rgba(20, 20, 50, 0.8) !important;
+        border: 1px solid rgba(99, 102, 241, 0.3) !important;
+        border-radius: 12px;
+        backdrop-filter: blur(10px);
+    }
+    
+    /* ========================================
+       DIVIDERS
+       ======================================== */
+    hr {
+        border-color: rgba(99, 102, 241, 0.2) !important;
+    }
+    
+    /* ========================================
+       SCROLLBAR - MINIMAL STYLE
+       ======================================== */
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+    
+    ::-webkit-scrollbar-track {
+        background: rgba(20, 20, 50, 0.3);
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
+        border-radius: 4px;
+    }
+    
+    ::-webkit-scrollbar-thumb:hover {
+        background: linear-gradient(180deg, #818cf8 0%, #a855f7 100%);
     }
 </style>
 """, unsafe_allow_html=True)