Spaces:

Elias207
/

videorayegan

Running

App Files Files Community

Elias207 commited on Aug 28

Commit

277d046

verified ·

1 Parent(s): 6ba6b9a

Update index.html

Browse files

Files changed (1) hide show

index.html +246 -851

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CineAI Studio - استودیو هوش مصنوعی سینمایی</title>
     <!-- بارگذاری فونت‌ها -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -11,34 +11,36 @@
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
     <style>
-        /* Professional Video Studio Theme */
         #imageToVideoApp {
-            --studio-primary: #5A67D8;
-            --studio-primary-dark: #4C51BF;
-            --studio-secondary: #805AD5;
-            --studio-secondary-dark: #6B46C1;
-            --studio-accent: #DD6B20;
-            --studio-success: #48BB78;
-            --studio-error: #F56565;
-            /* Dark theme colors */
-            --studio-bg-dark: #0F0F0F;
-            --studio-bg-darker: #000000;
-            --studio-surface: #1A1A1A;
-            --studio-surface-light: #252525;
-            --studio-surface-lighter: #2D2D2D;
-            --studio-border: rgba(255, 255, 255, 0.08);
-            --studio-border-light: rgba(255, 255, 255, 0.12);
-            --studio-text: #FFFFFF;
-            --studio-text-secondary: #B8B8B8;
-            --studio-text-muted: #808080;
-            --studio-glow-primary: 0 0 40px rgba(90, 103, 216, 0.5);
-            --studio-glow-secondary: 0 0 40px rgba(128, 90, 213, 0.5);
-            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
-            color: var(--studio-text);
             line-height: 1.6;
             direction: rtl;
             min-height: 100vh;
@@ -54,907 +56,361 @@
         body {
             margin: 0;
-            background: var(--studio-bg-darker);
-            position: relative;
         }
-        /* Cinematic Background */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background:
-                radial-gradient(circle at 20% 50%, rgba(90, 103, 216, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 80% 80%, rgba(128, 90, 213, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 50% 20%, rgba(221, 107, 32, 0.05) 0%, transparent 50%);
-            pointer-events: none;
-            z-index: 1;
-        }
-        /* Film grain effect */
-        body::after {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-image:
-                repeating-linear-gradient(
-                    0deg,
-                    transparent,
-                    transparent 2px,
-                    rgba(255, 255, 255, 0.01) 2px,
-                    rgba(255, 255, 255, 0.01) 4px
-                );
-            pointer-events: none;
-            z-index: 2;
-            opacity: 0.5;
-            animation: filmGrain 8s steps(10) infinite;
-        }
-        @keyframes filmGrain {
-            0%, 100% { transform: translate(0, 0); }
-            10% { transform: translate(-1%, -1%); }
-            20% { transform: translate(1%, 1%); }
-            30% { transform: translate(-1%, 1%); }
-            40% { transform: translate(1%, -1%); }
-            50% { transform: translate(-1%, 0); }
-            60% { transform: translate(1%, 0); }
-            70% { transform: translate(0, 1%); }
-            80% { transform: translate(0, -1%); }
-            90% { transform: translate(1%, 1%); }
-        }
         /* Main Container */
         #imageToVideoApp .studio-container {
             width: 100%;
             max-width: 1200px;
             margin: 0 auto;
-            padding: 0 20px;
-            position: relative;
-            z-index: 10;
         }
-        /* Professional Header */
         #imageToVideoApp .studio-header {
-            padding: 40px 0 60px;
             text-align: center;
-            position: relative;
-            background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
-        }
-        /* Film strip decoration */
-        #imageToVideoApp .film-strip {
-            position: absolute;
-            top: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 300px;
-            height: 40px;
-            background: linear-gradient(90deg,
-                transparent 0%,
-                var(--studio-surface) 10%,
-                var(--studio-surface) 90%,
-                transparent 100%);
-            display: flex;
-            align-items: center;
-            justify-content: space-evenly;
-            padding: 0 30px;
-            opacity: 0.3;
-        }
-        #imageToVideoApp .film-strip::before,
-        #imageToVideoApp .film-strip::after {
-            content: '';
-            position: absolute;
-            top: 5px;
-            bottom: 5px;
-            width: 100%;
-            background: repeating-linear-gradient(
-                90deg,
-                transparent,
-                transparent 10px,
-                var(--studio-surface-light) 10px,
-                var(--studio-surface-light) 20px
-            );
         }
-        #imageToVideoApp .film-strip .hole {
-            width: 15px;
-            height: 20px;
-            background: var(--studio-bg-darker);
-            border-radius: 2px;
-            position: relative;
-            z-index: 2;
-        }
-        /* Logo and Title */
         #imageToVideoApp .studio-logo {
             display: inline-flex;
             align-items: center;
-            gap: 20px;
-            margin-bottom: 20px;
-            animation: fadeInScale 1s ease-out;
-        }
-        @keyframes fadeInScale {
-            from {
-                opacity: 0;
-                transform: scale(0.8);
-            }
-            to {
-                opacity: 1;
-                transform: scale(1);
-            }
-        }
-        #imageToVideoApp .logo-icon {
-            width: 80px;
-            height: 80px;
-            position: relative;
         }
-        #imageToVideoApp .logo-icon svg {
-            width: 100%;
-            height: 100%;
-            filter: drop-shadow(var(--studio-glow-primary));
-        }
         #imageToVideoApp .studio-title {
-            font-size: 3rem;
-            font-weight: 900;
-            background: linear-gradient(135deg, var(--studio-primary) 0%, var(--studio-secondary) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            background-clip: text;
-            letter-spacing: -1px;
-            position: relative;
         }
         #imageToVideoApp .studio-subtitle {
             font-size: 1.1rem;
-            color: var(--studio-text-secondary);
-            margin-top: 10px;
-            letter-spacing: 2px;
-            text-transform: uppercase;
-            font-weight: 500;
         }
         /* Control Panel Layout */
         #imageToVideoApp .control-panel {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            margin-bottom: 40px;
         }
         @media (max-width: 768px) {
-            #imageToVideoApp .control-panel {
-                grid-template-columns: 1fr;
-            }
         }
-        /* Studio Cards */
         #imageToVideoApp .studio-card {
-            background: var(--studio-surface);
-            border: 1px solid var(--studio-border);
-            border-radius: 16px;
-            padding: 30px;
-            position: relative;
-            overflow: hidden;
-            backdrop-filter: blur(10px);
-            transition: all 0.3s ease;
-        }
-        #imageToVideoApp .studio-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: linear-gradient(90deg, var(--studio-primary) 0%, var(--studio-secondary) 100%);
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        #imageToVideoApp .studio-card:hover::before {
-            opacity: 1;
         }
         #imageToVideoApp .studio-card:hover {
             transform: translateY(-5px);
-            border-color: var(--studio-border-light);
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
         }
-        /* Section Headers */
         #imageToVideoApp .section-header {
             display: flex;
             align-items: center;
-            gap: 12px;
-            margin-bottom: 25px;
-            padding-bottom: 15px;
-            border-bottom: 1px solid var(--studio-border);
         }
         #imageToVideoApp .section-icon {
             width: 24px;
             height: 24px;
-            color: var(--studio-primary);
         }
         #imageToVideoApp .section-title {
             font-size: 1.2rem;
             font-weight: 700;
-            color: var(--studio-text);
         }
         #imageToVideoApp .section-badge {
             margin-right: auto;
             padding: 4px 12px;
-            background: rgba(90, 103, 216, 0.1);
-            border: 1px solid rgba(90, 103, 216, 0.3);
             border-radius: 20px;
             font-size: 0.75rem;
-            color: var(--studio-primary);
             font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
         }
-        /* Upload Zone - Cinematic Style */
         #imageToVideoApp .upload-zone {
             position: relative;
             width: 100%;
             aspect-ratio: 16/9;
-            background: var(--studio-bg-dark);
-            border: 2px dashed var(--studio-border);
-            border-radius: 12px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             overflow: hidden;
-            transition: all 0.3s ease;
-            margin-bottom: 20px;
-        }
-        #imageToVideoApp .upload-zone::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background:
-                repeating-linear-gradient(
-                    0deg,
-                    transparent,
-                    transparent 20px,
-                    rgba(90, 103, 216, 0.03) 20px,
-                    rgba(90, 103, 216, 0.03) 21px
-                ),
-                repeating-linear-gradient(
-                    90deg,
-                    transparent,
-                    transparent 20px,
-                    rgba(128, 90, 213, 0.03) 20px,
-                    rgba(128, 90, 213, 0.03) 21px
-                );
-            pointer-events: none;
         }
-        #imageToVideoApp .upload-zone:hover {
-            border-color: var(--studio-primary);
-            background: rgba(90, 103, 216, 0.05);
-            transform: scale(1.02);
         }
         #imageToVideoApp .upload-content {
-            text-align: center;
-            z-index: 2;
-            position: relative;
         }
-        #imageToVideoApp .upload-icon-wrapper {
-            width: 100px;
-            height: 100px;
-            margin: 0 auto 20px;
-            position: relative;
-        }
         #imageToVideoApp .upload-icon-wrapper svg {
-            width: 100%;
-            height: 100%;
-            color: var(--studio-text-muted);
-            transition: all 0.3s ease;
-        }
-        #imageToVideoApp .upload-zone:hover .upload-icon-wrapper svg {
-            color: var(--studio-primary);
-            transform: translateY(-5px);
-        }
-        #imageToVideoApp .upload-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-            color: var(--studio-text);
-            margin-bottom: 8px;
-        }
-        #imageToVideoApp .upload-subtitle {
-            font-size: 0.9rem;
-            color: var(--studio-text-muted);
         }
         #imageToVideoApp #imageFile {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-            cursor: pointer;
         }
         #imageToVideoApp #imagePreview {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.3s ease;
         }
         #imageToVideoApp .upload-zone.has-image {
-            border-style: solid;
-            border-color: var(--studio-success);
-            background: rgba(72, 187, 120, 0.05);
-        }
-        #imageToVideoApp .upload-zone.has-image .upload-content {
-            opacity: 0;
-            visibility: hidden;
-        }
-        #imageToVideoApp .upload-zone.has-image #imagePreview {
-            opacity: 1;
-            visibility: visible;
-        }
-        /* Prompt Input - Professional Style */
-        #imageToVideoApp .prompt-container {
-            margin-bottom: 25px;
-        }
-        #imageToVideoApp .prompt-label {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 0.9rem;
-            color: var(--studio-text-secondary);
-            margin-bottom: 12px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
         }
         #imageToVideoApp .prompt-textarea {
             width: 100%;
             min-height: 120px;
-            padding: 15px;
-            background: var(--studio-bg-dark);
-            border: 1px solid var(--studio-border);
-            border-radius: 8px;
-            color: var(--studio-text);
             font-family: inherit;
             font-size: 1rem;
             resize: vertical;
-            transition: all 0.3s ease;
         }
         #imageToVideoApp .prompt-textarea:focus {
             outline: none;
-            border-color: var(--studio-primary);
-            background: var(--studio-surface-light);
-            box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1);
         }
-        #imageToVideoApp .prompt-textarea::placeholder {
-            color: var(--studio-text-muted);
-        }
-        /* Generate Button - Cinema Style */
         #imageToVideoApp .generate-button {
             width: 100%;
-            padding: 18px 30px;
-            background: linear-gradient(135deg, var(--studio-primary) 0%, var(--studio-secondary) 100%);
             border: none;
-            border-radius: 8px;
             color: white;
-            font-size: 1.1rem;
             font-weight: 700;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 12px;
             transition: all 0.3s ease;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            position: relative;
-            overflow: hidden;
-        }
-        #imageToVideoApp .generate-button::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 50%;
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
-        }
-        #imageToVideoApp .generate-button:hover::before {
-            width: 400px;
-            height: 400px;
         }
-        #imageToVideoApp .generate-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 30px rgba(90, 103, 216, 0.4);
-        }
-        #imageToVideoApp .generate-button:active {
-            transform: translateY(0);
         }
         #imageToVideoApp .generate-button:disabled {
-            background: var(--studio-surface-light);
-            color: var(--studio-text-muted);
             cursor: not-allowed;
             transform: none;
             box-shadow: none;
         }
-        #imageToVideoApp .generate-button svg {
-            width: 24px;
-            height: 24px;
-            animation: pulse 2s ease-in-out infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.1); }
-        }
-        /* Timeline Progress */
-        #imageToVideoApp .timeline-container {
-            grid-column: 1 / -1;
-            background: var(--studio-surface);
-            border: 1px solid var(--studio-border);
-            border-radius: 16px;
-            padding: 30px;
-            margin-bottom: 30px;
-            display: none;
-        }
-        #imageToVideoApp .timeline-container.active {
-            display: block;
-            animation: slideUp 0.5s ease-out;
-        }
-        @keyframes slideUp {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
         #imageToVideoApp .timeline-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            margin-bottom: 25px;
         }
         #imageToVideoApp .timeline-title {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            font-size: 1.2rem;
-            font-weight: 700;
-            color: var(--studio-text);
         }
         #imageToVideoApp .timeline-status {
-            padding: 6px 16px;
-            background: rgba(90, 103, 216, 0.1);
-            border: 1px solid rgba(90, 103, 216, 0.3);
-            border-radius: 20px;
-            font-size: 0.85rem;
-            color: var(--studio-primary);
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 8px;
         }
-        #imageToVideoApp .timeline-status .pulse-dot {
-            width: 8px;
-            height: 8px;
-            background: var(--studio-primary);
-            border-radius: 50%;
-            animation: pulseDot 1.5s ease-in-out infinite;
-        }
-        @keyframes pulseDot {
-            0%, 100% {
-                transform: scale(1);
-                opacity: 1;
-            }
-            50% {
-                transform: scale(1.5);
-                opacity: 0.5;
-            }
-        }
-        /* Film Timeline Bar */
         #imageToVideoApp .film-timeline {
-            position: relative;
-            height: 80px;
-            background: var(--studio-bg-dark);
-            border-radius: 8px;
-            overflow: hidden;
-            margin-bottom: 20px;
         }
-        #imageToVideoApp .film-timeline::before {
-            content: '';
-            position: absolute;
-            top: 10px;
-            bottom: 10px;
-            left: 0;
-            right: 0;
-            background: repeating-linear-gradient(
-                90deg,
-                transparent,
-                transparent 30px,
-                var(--studio-surface-light) 30px,
-                var(--studio-surface-light) 31px
-            );
-            opacity: 0.3;
-        }
         #imageToVideoApp .timeline-progress {
-            position: absolute;
-            top: 50%;
-            left: 0;
-            height: 4px;
-            background: linear-gradient(90deg, var(--studio-primary) 0%, var(--studio-secondary) 100%);
-            transform: translateY(-50%);
-            transition: width 0.3s ease;
-            box-shadow: 0 0 20px rgba(90, 103, 216, 0.5);
-        }
-        #imageToVideoApp .timeline-frames {
-            display: flex;
-            align-items: center;
             height: 100%;
-            padding: 10px;
-            gap: 10px;
-            position: relative;
-        }
-        #imageToVideoApp .timeline-frame {
-            flex: 0 0 100px;
-            height: 60px;
-            background: var(--studio-surface-light);
             border-radius: 4px;
-            position: relative;
-            overflow: hidden;
-            opacity: 0.3;
-            transition: all 0.3s ease;
-        }
-        #imageToVideoApp .timeline-frame.active {
-            opacity: 1;
-            border: 2px solid var(--studio-primary);
-            box-shadow: 0 0 15px rgba(90, 103, 216, 0.3);
-        }
-        /* Status Messages - Cinema Style */
-        #imageToVideoApp .status-container {
-            max-height: 200px;
-            overflow-y: auto;
-            padding-right: 10px;
         }
         #imageToVideoApp .status-message {
-            padding: 12px 16px;
-            background: var(--studio-surface-light);
-            border-radius: 8px;
-            margin-bottom: 10px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            animation: slideIn 0.3s ease-out;
-            border-left: 3px solid var(--studio-primary);
-        }
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateX(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-        #imageToVideoApp .status-message.success {
-            border-left-color: var(--studio-success);
-            background: rgba(72, 187, 120, 0.1);
-        }
-        #imageToVideoApp .status-message.error {
-            border-left-color: var(--studio-error);
-            background: rgba(245, 101, 101, 0.1);
-        }
-        #imageToVideoApp .status-icon {
-            width: 20px;
-            height: 20px;
-            flex-shrink: 0;
-        }
-        #imageToVideoApp .status-text {
-            font-size: 0.9rem;
-            color: var(--studio-text-secondary);
-            line-height: 1.4;
-        }
-        /* Video Output - Theater Mode */
-        #imageToVideoApp .video-output-container {
-            grid-column: 1 / -1;
-            background: var(--studio-bg-darker);
-            border: 1px solid var(--studio-border);
-            border-radius: 16px;
-            padding: 40px;
-            margin-bottom: 30px;
-            display: none;
-            position: relative;
-            overflow: hidden;
-        }
-        #imageToVideoApp .video-output-container.active {
-            display: block;
-            animation: fadeIn 0.5s ease-out;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        #imageToVideoApp .video-output-container::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, rgba(90, 103, 216, 0.1) 0%, transparent 70%);
-            animation: rotate 20s linear infinite;
-        }
-        @keyframes rotate {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
         }
         #imageToVideoApp .video-player {
-            position: relative;
-            width: 100%;
-            max-width: 800px;
-            margin: 0 auto;
-            background: #000;
-            border-radius: 12px;
-            overflow: hidden;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
-        }
-        #imageToVideoApp #outputVideo {
-            width: 100%;
-            display: block;
-            border-radius: 12px;
         }
-        #imageToVideoApp .video-controls {
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-            margin-top: 30px;
-        }
         #imageToVideoApp .video-button {
-            padding: 12px 24px;
-            background: var(--studio-surface);
-            border: 1px solid var(--studio-border);
-            border-radius: 8px;
-            color: var(--studio-text);
-            font-size: 0.95rem;
-            font-weight: 600;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            transition: all 0.3s ease;
-        }
-        #imageToVideoApp .video-button:hover {
-            background: var(--studio-surface-light);
-            border-color: var(--studio-primary);
-            transform: translateY(-2px);
         }
         #imageToVideoApp .video-button.primary {
-            background: linear-gradient(135deg, var(--studio-primary) 0%, var(--studio-secondary) 100%);
-            border: none;
-            color: white;
         }
-        #imageToVideoApp .video-button.primary:hover {
-            box-shadow: 0 10px 30px rgba(90, 103, 216, 0.4);
         }
-        /* Error Panel - Alert Style */
-        #imageToVideoApp .error-panel {
-            grid-column: 1 / -1;
-            background: rgba(245, 101, 101, 0.05);
-            border: 1px solid rgba(245, 101, 101, 0.3);
-            border-radius: 16px;
-            padding: 30px;
-            margin-bottom: 30px;
-            display: none;
-        }
-        #imageToVideoApp .error-panel.active {
-            display: block;
-            animation: shake 0.5s ease-out;
-        }
-        @keyframes shake {
-            0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-10px); }
-            75% { transform: translateX(10px); }
         }
         #imageToVideoApp .error-header {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-bottom: 20px;
-            color: var(--studio-error);
-            font-size: 1.2rem;
-            font-weight: 700;
-        }
-        #imageToVideoApp .error-content {
-            color: var(--studio-text-secondary);
-            line-height: 1.6;
-            margin-bottom: 25px;
-        }
-        #imageToVideoApp .error-actions {
-            display: flex;
-            gap: 15px;
         }
-        /* Loading Spinner - Professional */
         #imageToVideoApp .spinner-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 40px;
         }
         #imageToVideoApp .spinner {
-            width: 60px;
-            height: 60px;
-            position: relative;
-            margin-bottom: 20px;
         }
         #imageToVideoApp .spinner-ring {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            border: 4px solid var(--studio-surface-light);
-            border-radius: 50%;
-            border-top-color: var(--studio-primary);
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        #imageToVideoApp .spinner-text {
-            color: var(--studio-text-secondary);
-            font-size: 0.95rem;
-            text-align: center;
         }
         /* Scrollbar Styling */
-        #imageToVideoApp ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        #imageToVideoApp ::-webkit-scrollbar-track {
-            background: var(--studio-surface);
-            border-radius: 4px;
-        }
-        #imageToVideoApp ::-webkit-scrollbar-thumb {
-            background: var(--studio-surface-lighter);
-            border-radius: 4px;
-        }
-        #imageToVideoApp ::-webkit-scrollbar-thumb:hover {
-            background: var(--studio-primary);
-        }
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            #imageToVideoApp .studio-title {
-                font-size: 2rem;
-            }
-            #imageToVideoApp .studio-container {
-                padding: 0 15px;
-            }
-            #imageToVideoApp .studio-card {
-                padding: 20px;
-            }
-            #imageToVideoApp .control-panel {
-                gap: 20px;
-            }
-        }
         /* Utility Classes */
-        #imageToVideoApp .hidden {
-            display: none !important;
-        }
-        #imageToVideoApp .fade-in {
-            animation: fadeIn 0.5s ease-out;
-        }
-        #imageToVideoApp .slide-up {
-            animation: slideUp 0.5s ease-out;
-        }
     </style>
 </head>
 <body>
@@ -962,16 +418,11 @@
     <div id="imageToVideoApp">
         <div class="studio-container">
-            <!-- Professional Header -->
             <header class="studio-header">
-                <div class="film-strip">
-                    <div class="hole"></div>
-                    <div class="hole"></div>
-                    <div class="hole"></div>
-                </div>
                 <div class="studio-logo">
                     <div class="logo-icon">
                         <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <circle cx="50" cy="50" r="45" stroke="url(#grad1)" stroke-width="2" opacity="0.3"/>
                             <circle cx="50" cy="50" r="35" stroke="url(#grad1)" stroke-width="2" opacity="0.5"/>
@@ -979,15 +430,15 @@
                             <path d="M40 35 L65 50 L40 65 Z" fill="url(#grad1)"/>
                             <defs>
                                 <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" style="stop-color:#5A67D8;stop-opacity:1" />
-                                    <stop offset="100%" style="stop-color:#805AD5;stop-opacity:1" />
                                 </linearGradient>
                             </defs>
                         </svg>
                     </div>
-                    <h1 class="studio-title">CineAI Studio</h1>
                 </div>
-                <p class="studio-subtitle">استودیو حرفه‌ای ساخت ویدیو با هوش مصنوعی</p>
             </header>
             <!-- Main Control Panel -->
@@ -996,25 +447,18 @@
                 <!-- Upload Section -->
                 <div class="studio-card">
                     <div class="section-header">
-                        <svg class="section-icon" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
-                            <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 00-2 2v6h16V7a2 2 0 00-2-2h-.09A1 1 0 0016 4a1 1 0 00-.09 1H18a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V5z"/>
-                        </svg>
-                        <span class="section-title">ورودی تصویر</span>
-                        <span class="section-badge">مرحله ۱</span>
                     </div>
                     <div class="upload-zone" id="image-drop-zone">
                         <input type="file" id="imageFile" accept="image/jpeg, image/png, image/webp" />
                         <div class="upload-content">
-                            <div class="upload-icon-wrapper">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                                    <path d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
-                                    <path d="M16 11l-4-4m0 0l-4 4m4-4v12"/>
-                                </svg>
                             </div>
                             <h3 class="upload-title">بارگذاری تصویر</h3>
-                            <p class="upload-subtitle">تصویر را بکشید یا کلیک کنید</p>
                         </div>
                         <img id="imagePreview" src="" alt="Preview" />
                     </div>
@@ -1023,31 +467,20 @@
                 <!-- Prompt Section -->
                 <div class="studio-card">
                     <div class="section-header">
-                        <svg class="section-icon" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
-                        </svg>
-                        <span class="section-title">دستور ساخت</span>
-                        <span class="section-badge">مرحله ۲</span>
                     </div>
                     <div class="prompt-container">
-                        <label class="prompt-label">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                            </svg>
-                            توضیحات انیمیشن
-                        </label>
                         <textarea
                             id="prompt"
                             class="prompt-textarea"
-                            placeholder="نحوه حرکت دوربین، جزئیات انیمیشن و افکت‌های مورد نظر را توصیف کنید..."
                         ></textarea>
                     </div>
                     <button id="generateButton" class="generate-button">
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M8 5v14l11-7z"/>
-                        </svg>
                         تولید ویدیو
                     </button>
                 </div>
@@ -1057,59 +490,44 @@
             <div id="statusSection" class="timeline-container">
                 <div class="timeline-header">
                     <div class="timeline-title">
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M17 3a2 2 0 012 2v14a2 2 0 01-2 2H7a2 2 0 01-2-2V5a2 2 0 012-2h10zm0 2H7v14h10V5zm-5 3a1 1 0 011 1v6a1 1 0 11-2 0V9a1 1 0 011-1z"/>
-                        </svg>
                         پردازش ویدیو
                     </div>
-                    <div class="timeline-status">
-                        <span class="pulse-dot"></span>
-                        در حال پردازش
-                    </div>
                 </div>
                 <div class="film-timeline">
                     <div class="timeline-progress" id="progressBar" style="width: 0%"></div>
-                    <div class="timeline-frames">
-                        <div class="timeline-frame"></div>
-                        <div class="timeline-frame"></div>
-                        <div class="timeline-frame"></div>
-                        <div class="timeline-frame"></div>
-                        <div class="timeline-frame"></div>
-                    </div>
                 </div>
                 <div id="aiLoader" class="spinner-container" style="display: none;">
-                    <div class="spinner">
-                        <div class="spinner-ring"></div>
-                    </div>
                     <div id="aiLoaderText" class="spinner-text">در حال پردازش تصویر...</div>
                 </div>
                 <div id="statusMessages" class="status-container"></div>
-                <div id="progressBarContainer" style="display: none;"></div>
             </div>
             <!-- Video Output -->
             <div id="outputSection" class="video-output-container">
                 <div class="video-player">
                     <video id="outputVideo" controls preload="metadata" playsinline></video>
                 </div>
-                <p id="finalSeed" style="text-align: center; color: var(--studio-text-muted); margin-top: 20px;"></p>
-                <div id="downloadLinkStatus" style="text-align: center; color: var(--studio-text-secondary); margin-top: 10px;"></div>
                 <div class="video-controls">
                     <button id="btnDownloadVideo" class="video-button primary" style="display: none;">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
-                        </svg>
                         دانلود ویدیو
                     </button>
                     <button id="btnRestart" class="video-button">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
-                        </svg>
                         ویدیو جدید
                     </button>
                 </div>
@@ -1118,27 +536,21 @@
             <!-- Error Panel -->
             <div id="criticalErrorSection" class="error-panel">
                 <div class="error-header">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-                    </svg>
                     <span>خطا در پردازش</span>
                 </div>
                 <div id="criticalErrorMessage" class="error-content"></div>
                 <div class="error-actions">
-                    <button id="btnCriticalErrorGoBack" class="video-button">
-                        بازگشت
-                    </button>
-                    <button id="btnCriticalErrorRetry" class="video-button primary">
-                        تلاش مجدد
-                    </button>
                 </div>
             </div>
         </div>
     </div>
     <script>
-        // Your original JavaScript code remains exactly the same
         (function() {
             // DOM Elements
             const formContainer = document.querySelector('#imageToVideoApp .control-panel');
@@ -1244,13 +656,7 @@
                 statusMessagesDiv.insertBefore(messageDiv, statusMessagesDiv.firstChild);
                 statusMessagesDiv.scrollTop = 0;
-                // Update timeline frames
-                const frames = document.querySelectorAll('.timeline-frame');
-                const activeIndex = Math.min(statusMessagesDiv.children.length - 1, frames.length - 1);
-                if (activeIndex >= 0 && frames[activeIndex]) {
-                    frames[activeIndex].classList.add('active');
-                }
             }
             function clearStatusMessages() {
@@ -1258,16 +664,10 @@
                 progressBar.style.width = '0%';
                 aiLoader.style.display = 'none';
-                // Clear timeline frames
-                document.querySelectorAll('.timeline-frame').forEach(frame => {
-                    frame.classList.remove('active');
-                });
                 if (outputVideo.src && outputVideo.src.startsWith('blob:')) {
                     URL.revokeObjectURL(outputVideo.src);
                 }
                 outputVideo.src = '';
-                outputVideo.style.display = 'none';
                 finalSeedElement.textContent = '';
                 downloadLinkStatus.textContent = '';
                 btnDownloadVideo.style.display = 'none';
@@ -1418,10 +818,7 @@
                 hideCriticalError();
                 statusSection.classList.add('active');
                 outputSection.classList.remove('active');
-                outputVideo.style.display = 'none';
-                downloadLinkStatus.textContent = '';
-                btnDownloadVideo.style.display = 'none';
                 const eventSource = new EventSource(`${VIDEO_SPACE_URL_BASE}/queue/data?session_hash=${currentVideoSessionHash}`);
                 eventSource.onmessage = function(event) {
                     const data = JSON.parse(event.data);
@@ -1451,7 +848,6 @@
                                     outputSection.classList.add('active');
                                     outputVideo.src = ltxVideoUrl;
                                     outputVideo.load();
-                                    outputVideo.style.display = 'block';
                                     outputVideo.scrollIntoView({ behavior: 'smooth', block: 'center' });
                                     finalSeedElement.textContent = data.output.data[1] ? `Seed: ${data.output.data[1]}` : '';
                                     prepareCustomDownloadLink(ltxVideoUrl);
@@ -1627,7 +1023,6 @@
                 statusSection.classList.add('active');
                 aiLoader.style.display = 'flex';
                 outputSection.classList.remove('active');
-                outputVideo.style.display = 'none';
                 // Calculate dimensions
                 const [ratioW_str, ratioH_str] = autoSelectedAspectRatio.split(':');

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Video Studio - استودیو ویدیو هوش مصنوعی</title>
     <!-- بارگذاری فونت‌ها -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
     <style>
+        /* ========================================================== */
+        /* == START: STYLES COPIED & ADAPTED FROM AI PHOTOSHOP PRO == */
+        /* ========================================================== */
         #imageToVideoApp {
+            --app-font: 'Vazirmatn', sans-serif;
+            --app-bg: #F8F9FC;
+            --panel-bg: #FFFFFF;
+            --panel-border: #EAEFF7;
+            --input-bg: #F6F8FB;
+            --input-border: #E1E7EF;
+            --text-primary: #1A202C;
+            --text-secondary: #626F86;
+            --text-tertiary: #8A94A6;
+            --accent-primary: #4A6CFA;
+            --accent-primary-hover: #3553D6;
+            --accent-primary-glow: rgba(74, 108, 250, 0.25);
+            --accent-secondary: #0FD4A8;
+            --danger-color: #e53e3e;
+            --danger-color-hover: #c53030;
+            --success-color: #38A169;
+            --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
+            --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
+            --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
+            --radius-card: 24px;
+            --radius-btn: 14px;
+            --radius-input: 12px;
+            --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+            font-family: var(--app-font);
+            color: var(--text-primary);
             line-height: 1.6;
             direction: rtl;
             min-height: 100vh;
         body {
             margin: 0;
+            background: var(--app-bg);
         }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
         /* Main Container */
         #imageToVideoApp .studio-container {
             width: 100%;
             max-width: 1200px;
             margin: 0 auto;
+            padding: 40px 20px;
         }
+        /* Header */
         #imageToVideoApp .studio-header {
             text-align: center;
+            margin-bottom: 2.5rem;
+            animation: fadeIn 0.8s 0.1s ease-out backwards;
         }
         #imageToVideoApp .studio-logo {
             display: inline-flex;
             align-items: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
         }
+        #imageToVideoApp .logo-icon { width: 60px; height: 60px; }
+        #imageToVideoApp .logo-icon svg { width: 100%; height: 100%; }
         #imageToVideoApp .studio-title {
+            font-size: 2.8rem;
+            font-weight: 800;
+            letter-spacing: -1px;
+            /* Gradient Title from Photoshop Theme */
+            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
         #imageToVideoApp .studio-subtitle {
             font-size: 1.1rem;
+            color: var(--text-secondary);
+            margin-top: 0.8rem;
         }
         /* Control Panel Layout */
         #imageToVideoApp .control-panel {
             display: grid;
             grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-bottom: 2rem;
+            animation: fadeIn 0.8s 0.3s ease-out backwards;
         }
         @media (max-width: 768px) {
+            #imageToVideoApp .control-panel { grid-template-columns: 1fr; }
         }
+        /* Studio Cards (like Photoshop Panels) */
         #imageToVideoApp .studio-card {
+            background: var(--panel-bg);
+            border: 1px solid var(--panel-border);
+            border-radius: var(--radius-card);
+            padding: 2.5rem;
+            box-shadow: var(--shadow-xl);
+            transition: var(--transition-smooth);
         }
         #imageToVideoApp .studio-card:hover {
             transform: translateY(-5px);
         }
+        /* General Panel Styling for Status/Output/Error */
+        #imageToVideoApp .timeline-container,
+        #imageToVideoApp .video-output-container,
+        #imageToVideoApp .error-panel {
+            grid-column: 1 / -1;
+            background: var(--panel-bg);
+            border: 1px solid var(--panel-border);
+            border-radius: var(--radius-card);
+            padding: 2.5rem;
+            margin-bottom: 2rem;
+            box-shadow: var(--shadow-xl);
+            display: none; /* Controlled by JS */
+        }
+        #imageToVideoApp .timeline-container.active,
+        #imageToVideoApp .video-output-container.active,
+        #imageToVideoApp .error-panel.active {
+            display: block;
+            animation: fadeIn 0.5s ease;
+        }
+        /* Section Headers (like Photoshop Form Labels) */
         #imageToVideoApp .section-header {
             display: flex;
             align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 1.5rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--panel-border);
         }
         #imageToVideoApp .section-icon {
             width: 24px;
             height: 24px;
+            color: var(--accent-primary);
         }
         #imageToVideoApp .section-title {
             font-size: 1.2rem;
             font-weight: 700;
+            color: var(--text-primary);
         }
         #imageToVideoApp .section-badge {
             margin-right: auto;
             padding: 4px 12px;
+            background: var(--input-bg);
+            border: 1px solid var(--input-border);
             border-radius: 20px;
             font-size: 0.75rem;
+            color: var(--text-secondary);
             font-weight: 600;
         }
+        /* Upload Zone (like Photoshop Upload Area) */
         #imageToVideoApp .upload-zone {
             position: relative;
             width: 100%;
             aspect-ratio: 16/9;
+            background: var(--input-bg);
+            border: 2px dashed var(--input-border);
+            border-radius: var(--radius-input);
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             overflow: hidden;
+            transition: var(--transition-smooth);
+            text-align: center;
         }
+        #imageToVideoApp .upload-zone:hover:not(.has-image) {
+            border-color: var(--accent-primary);
+            background-color: #fff;
+            box-shadow: 0 0 15px var(--accent-primary-glow);
         }
         #imageToVideoApp .upload-content {
+             display: flex; flex-direction: column; align-items: center; gap: 1rem;
         }
         #imageToVideoApp .upload-icon-wrapper svg {
+            width: 48px;
+            height: 48px;
+            color: var(--accent-primary);
+            stroke-width: 1.5;
+            opacity: 0.8;
         }
+        #imageToVideoApp .upload-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0; }
+        #imageToVideoApp .upload-subtitle { font-size: 0.9rem; color: var(--text-secondary); }
         #imageToVideoApp #imageFile {
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
         }
         #imageToVideoApp #imagePreview {
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;
         }
         #imageToVideoApp .upload-zone.has-image {
+            border-style: solid; border-color: var(--success-color); padding: 0;
         }
+        #imageToVideoApp .upload-zone.has-image .upload-content { display: none; }
+        /* Prompt Input */
+        #imageToVideoApp .prompt-label { display: none; } /* Redundant with section header */
         #imageToVideoApp .prompt-textarea {
             width: 100%;
             min-height: 120px;
+            padding: 1rem 1.2rem;
+            background: var(--input-bg);
+            border: 1px solid var(--input-border);
+            border-radius: var(--radius-input);
+            color: var(--text-primary);
             font-family: inherit;
             font-size: 1rem;
             resize: vertical;
+            transition: var(--transition-smooth);
+            box-shadow: var(--shadow-sm) inset;
         }
         #imageToVideoApp .prompt-textarea:focus {
             outline: none;
+            border-color: var(--accent-primary);
+            background-color: var(--panel-bg);
+            box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset;
         }
+        #imageToVideoApp .prompt-textarea::placeholder { color: var(--text-tertiary); }
+        /* Generate Button (like Photoshop Submit Button) */
         #imageToVideoApp .generate-button {
             width: 100%;
+            padding: 1.1rem;
+            background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
             border: none;
+            border-radius: var(--radius-btn);
             color: white;
+            font-size: 1.2rem;
             font-weight: 700;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
+            gap: 0.75rem;
             transition: all 0.3s ease;
+            box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px rgba(15, 212, 168, 0.25);
+            margin-top: 1.5rem;
         }
+        #imageToVideoApp .generate-button:hover:not(:disabled) {
+            transform: translateY(-5px) scale(1.02);
+            box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px rgba(15, 212, 168, 0.25);
         }
         #imageToVideoApp .generate-button:disabled {
+            background: var(--text-tertiary);
             cursor: not-allowed;
             transform: none;
             box-shadow: none;
+            opacity: 0.7;
         }
+        #imageToVideoApp .generate-button svg { width: 24px; height: 24px; }
+        /* Progress Bar Section */
         #imageToVideoApp .timeline-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
+            margin-bottom: 2rem;
         }
         #imageToVideoApp .timeline-title {
+            display: flex; align-items: center; gap: 0.75rem; font-size: 1.2rem; font-weight: 700; color: var(--text-primary);
         }
         #imageToVideoApp .timeline-status {
+             padding: 6px 16px; background: var(--input-bg); border: 1px solid var(--input-border);
+             border-radius: 20px; font-size: 0.85rem; color: var(--text-secondary); font-weight: 600;
+             display: flex; align-items: center; gap: 8px;
         }
+        #imageToVideoApp .timeline-status .pulse-dot { display: none; } /* Not needed in light theme */
         #imageToVideoApp .film-timeline {
+             height: 8px; background-color: var(--input-bg); border-radius: 4px; overflow: hidden; margin-bottom: 1.5rem;
         }
         #imageToVideoApp .timeline-progress {
             height: 100%;
+            background: linear-gradient(90deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
+            transition: width 0.3s ease;
             border-radius: 4px;
         }
+        /* Hide old film strip frames */
+        #imageToVideoApp .timeline-frames { display: none; }
+        /* Status Messages */
+        #imageToVideoApp .status-container { max-height: 200px; overflow-y: auto; padding-left: 10px; }
         #imageToVideoApp .status-message {
+            padding: 12px 16px; background: var(--input-bg); border-radius: var(--radius-input); margin-bottom: 10px;
+            display: flex; align-items: center; gap: 12px; animation: fadeIn 0.3s ease-out;
+            border-left: 4px solid var(--accent-primary);
         }
+        #imageToVideoApp .status-message.success { border-left-color: var(--success-color); background: rgba(56, 161, 105, 0.1); }
+        #imageToVideoApp .status-message.error { border-left-color: var(--danger-color); background: rgba(229, 62, 62, 0.05); }
+        #imageToVideoApp .status-icon { width: 20px; height: 20px; flex-shrink: 0; }
+        #imageToVideoApp .status-text { font-size: 0.9rem; color: var(--text-secondary); }
+        /* Video Output */
         #imageToVideoApp .video-player {
+            position: relative; width: 100%; max-width: 800px; margin: 0 auto;
+            border-radius: var(--radius-input); overflow: hidden; box-shadow: var(--shadow-lg);
+            border: 1px solid var(--panel-border);
         }
+        #imageToVideoApp #outputVideo { width: 100%; display: block; background: #000; }
+        #imageToVideoApp .video-controls { display: flex; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
         #imageToVideoApp .video-button {
+            padding: 0.8rem 1.5rem; border: none; border-radius: var(--radius-btn);
+            font-size: 1rem; font-weight: 600; cursor: pointer;
+            display: flex; align-items: center; gap: 10px; transition: var(--transition-smooth);
+            font-family: var(--app-font);
         }
+        #imageToVideoApp .video-button:hover { transform: translateY(-3px); }
         #imageToVideoApp .video-button.primary {
+            background-color: var(--accent-primary); color: white;
         }
+        #imageToVideoApp .video-button.primary:hover { background-color: var(--accent-primary-hover); }
+        #imageToVideoApp .video-button:not(.primary) {
+             background-color: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border);
         }
+        #imageToVideoApp .video-button:not(.primary):hover {
+            background-color: var(--panel-border); color: var(--text-primary);
         }
+        /* Error Panel */
+        #imageToVideoApp .error-panel { background: rgba(229, 62, 62, 0.05); border-color: rgba(229, 62, 62, 0.2); }
         #imageToVideoApp .error-header {
+            display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem;
+            color: var(--danger-color); font-size: 1.2rem; font-weight: 700;
         }
+        #imageToVideoApp .error-content { color: var(--text-secondary); line-height: 1.6; margin-bottom: 2rem; }
+        #imageToVideoApp .error-actions { display: flex; gap: 1rem; }
+        /* Loading Spinner */
         #imageToVideoApp .spinner-container {
+            display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem;
         }
         #imageToVideoApp .spinner {
+            width: 40px; height: 40px; margin-bottom: 1.5rem;
         }
         #imageToVideoApp .spinner-ring {
+            width: 100%; height: 100%; border-radius: 50%;
+            border: 4px solid var(--input-border);
+            border-top-color: var(--accent-primary);
+            animation: spin 0.8s linear infinite;
         }
+        #imageToVideoApp .spinner-text { color: var(--text-secondary); font-size: 1rem; text-align: center; }
         /* Scrollbar Styling */
+        #imageToVideoApp ::-webkit-scrollbar { width: 8px; height: 8px; }
+        #imageToVideoApp ::-webkit-scrollbar-track { background: var(--input-bg); border-radius: 4px; }
+        #imageToVideoApp ::-webkit-scrollbar-thumb { background: var(--input-border); border-radius: 4px; }
+        #imageToVideoApp ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
         /* Utility Classes */
+        #imageToVideoApp .hidden { display: none !important; }
+        @media (max-width: 768px) {
+            #imageToVideoApp .studio-title { font-size: 2.2rem; }
+            #imageToVideoApp .studio-container { padding: 20px 15px; }
+            #imageToVideoApp .studio-card,
+            #imageToVideoApp .timeline-container,
+            #imageToVideoApp .video-output-container,
+            #imageToVideoApp .error-panel { padding: 1.5rem; }
+        }
     </style>
 </head>
 <body>
     <div id="imageToVideoApp">
         <div class="studio-container">
+            <!-- Header -->
             <header class="studio-header">
                 <div class="studio-logo">
                     <div class="logo-icon">
+                        <!-- SVG updated with new accent colors -->
                         <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <circle cx="50" cy="50" r="45" stroke="url(#grad1)" stroke-width="2" opacity="0.3"/>
                             <circle cx="50" cy="50" r="35" stroke="url(#grad1)" stroke-width="2" opacity="0.5"/>
                             <path d="M40 35 L65 50 L40 65 Z" fill="url(#grad1)"/>
                             <defs>
                                 <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+                                    <stop offset="0%" style="stop-color:#4A6CFA;stop-opacity:1" /> <!-- Updated color -->
+                                    <stop offset="100%" style="stop-color:#0FD4A8;stop-opacity:1" /> <!-- Updated color -->
                                 </linearGradient>
                             </defs>
                         </svg>
                     </div>
+                    <h1 class="studio-title">AI Video Studio ✨</h1>
                 </div>
+                <p class="studio-subtitle">تصاویر خود را با قدرت هوش مصنوعی به ویدیو تبدیل کنید</p>
             </header>
             <!-- Main Control Panel -->
                 <!-- Upload Section -->
                 <div class="studio-card">
                     <div class="section-header">
+                        <svg class="section-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
+                        <span class="section-title">۱. تصویر ورودی</span>
                     </div>
                     <div class="upload-zone" id="image-drop-zone">
                         <input type="file" id="imageFile" accept="image/jpeg, image/png, image/webp" />
                         <div class="upload-content">
+                             <div class="upload-icon-wrapper">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
                             </div>
                             <h3 class="upload-title">بارگذاری تصویر</h3>
+                            <p class="upload-subtitle">تصویر را بکشید یا برای انتخاب کلیک کنید</p>
                         </div>
                         <img id="imagePreview" src="" alt="Preview" />
                     </div>
                 <!-- Prompt Section -->
                 <div class="studio-card">
                     <div class="section-header">
+                        <svg class="section-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+                        <span class="section-title">۲. دستور ساخت</span>
                     </div>
                     <div class="prompt-container">
                         <textarea
                             id="prompt"
                             class="prompt-textarea"
+                            placeholder="نحوه حرکت دوربین، جزئیات انیمیشن و افکت‌های مورد نظر را توصیف کنید. مثال: زوم آهسته به بیرون، در حالی که برگ‌ها در باد تکان می‌خورند"
                         ></textarea>
                     </div>
                     <button id="generateButton" class="generate-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/></svg>
                         تولید ویدیو
                     </button>
                 </div>
             <div id="statusSection" class="timeline-container">
                 <div class="timeline-header">
                     <div class="timeline-title">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
                         پردازش ویدیو
                     </div>
+                    <div id="statusText" class="timeline-status">در حال پردازش</div>
                 </div>
                 <div class="film-timeline">
                     <div class="timeline-progress" id="progressBar" style="width: 0%"></div>
                 </div>
                 <div id="aiLoader" class="spinner-container" style="display: none;">
+                    <div class="spinner"><div class="spinner-ring"></div></div>
                     <div id="aiLoaderText" class="spinner-text">در حال پردازش تصویر...</div>
                 </div>
                 <div id="statusMessages" class="status-container"></div>
             </div>
             <!-- Video Output -->
             <div id="outputSection" class="video-output-container">
+                 <div class="section-header" style="border-bottom:none; margin-bottom: 1.5rem;">
+                    <svg class="section-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/><path d="M21 14l-1.5 3-3-1.5 3-3 1.5 3z"/><path d="M19.5 2.5l-3 1.5 1.5 3 3-1.5-1.5-3z"/></svg>
+                     <span class="section-title">۳. نتیجه نهایی</span>
+                </div>
                 <div class="video-player">
                     <video id="outputVideo" controls preload="metadata" playsinline></video>
                 </div>
+                <p id="finalSeed" style="text-align: center; color: var(--text-tertiary); margin-top: 1.5rem;"></p>
+                <div id="downloadLinkStatus" style="text-align: center; color: var(--text-secondary); margin-top: 1rem;"></div>
                 <div class="video-controls">
                     <button id="btnDownloadVideo" class="video-button primary" style="display: none;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
                         دانلود ویدیو
                     </button>
                     <button id="btnRestart" class="video-button">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
                         ویدیو جدید
                     </button>
                 </div>
             <!-- Error Panel -->
             <div id="criticalErrorSection" class="error-panel">
                 <div class="error-header">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                     <span>خطا در پردازش</span>
                 </div>
                 <div id="criticalErrorMessage" class="error-content"></div>
                 <div class="error-actions">
+                    <button id="btnCriticalErrorGoBack" class="video-button">بازگشت</button>
+                    <button id="btnCriticalErrorRetry" class="video-button primary">تلاش مجدد</button>
                 </div>
             </div>
         </div>
     </div>
+    <!-- Original JavaScript code is untouched -->
     <script>
         (function() {
             // DOM Elements
             const formContainer = document.querySelector('#imageToVideoApp .control-panel');
                 statusMessagesDiv.insertBefore(messageDiv, statusMessagesDiv.firstChild);
                 statusMessagesDiv.scrollTop = 0;
             }
             function clearStatusMessages() {
                 progressBar.style.width = '0%';
                 aiLoader.style.display = 'none';
                 if (outputVideo.src && outputVideo.src.startsWith('blob:')) {
                     URL.revokeObjectURL(outputVideo.src);
                 }
                 outputVideo.src = '';
                 finalSeedElement.textContent = '';
                 downloadLinkStatus.textContent = '';
                 btnDownloadVideo.style.display = 'none';
                 hideCriticalError();
                 statusSection.classList.add('active');
                 outputSection.classList.remove('active');
                 const eventSource = new EventSource(`${VIDEO_SPACE_URL_BASE}/queue/data?session_hash=${currentVideoSessionHash}`);
                 eventSource.onmessage = function(event) {
                     const data = JSON.parse(event.data);
                                     outputSection.classList.add('active');
                                     outputVideo.src = ltxVideoUrl;
                                     outputVideo.load();
                                     outputVideo.scrollIntoView({ behavior: 'smooth', block: 'center' });
                                     finalSeedElement.textContent = data.output.data[1] ? `Seed: ${data.output.data[1]}` : '';
                                     prepareCustomDownloadLink(ltxVideoUrl);
                 statusSection.classList.add('active');
                 aiLoader.style.display = 'flex';
                 outputSection.classList.remove('active');
                 // Calculate dimensions
                 const [ratioW_str, ratioH_str] = autoSelectedAspectRatio.split(':');