@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700&display=swap";:root{--bg-primary:#0f1117;--bg-secondary:#161822;--bg-card:#1a1d2e;--bg-card-hover:#1e2236;--bg-sidebar:#12141e;--bg-input:#1e2236;--border-color:#2a2d3e;--border-active:#4a4d6e;--text-primary:#e8eaf0;--text-secondary:#8b8fa8;--text-muted:#5c6080;--accent-purple:#7c5cfc;--accent-blue:#3b82f6;--accent-green:#22c55e;--accent-orange:#f97316;--accent-violet:#a855f7;--accent-red:#ef4444;--accent-cyan:#06b6d4;--gradient-primary:linear-gradient(135deg, #7c5cfc, #a855f7);--gradient-blue:linear-gradient(135deg, #3b82f6, #06b6d4);--gradient-green:linear-gradient(135deg, #22c55e, #06b6d4);--gradient-orange:linear-gradient(135deg, #f97316, #eab308);--gradient-violet:linear-gradient(135deg, #a855f7, #ec4899);--sidebar-width:220px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-card:0 4px 24px #00000040;--shadow-glow-purple:0 0 20px #7c5cfc40;--transition:.25s cubic-bezier(.4,0,.2,1)}body.light-theme{--bg-primary:#f4f5f7;--bg-secondary:#fff;--bg-card:#fff;--bg-card-hover:#f9fafb;--bg-sidebar:#fff;--bg-input:#f9fafb;--border-color:#e5e7eb;--border-active:#d1d5db;--text-primary:#111827;--text-secondary:#4b5563;--text-muted:#6b7280}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-primary);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,sans-serif;overflow:hidden}h1,h2,h3,h4{font-family:Outfit,sans-serif}.app-container{width:100vw;height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;display:flex}.logo-container{align-items:center;gap:10px;padding:8px 10px 20px;display:flex}.logo-icon{width:28px;height:28px;color:var(--accent-purple);filter:drop-shadow(0 0 8px #7c5cfc80)}.logo-text h1{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:17px;font-weight:700}.logo-text span{color:var(--text-muted);letter-spacing:.5px;font-size:10px}.nav-menu{flex-direction:column;flex:1;gap:4px;display:flex}.nav-item{border-radius:var(--radius-sm);color:var(--text-secondary);transition:var(--transition);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:10px 14px;font-size:13.5px;font-weight:500;text-decoration:none;display:flex}.nav-item:hover{color:var(--text-primary);background:#7c5cfc14}.nav-item.active{color:#fff;background:linear-gradient(135deg,#7c5cfc2e,#a855f71a);font-weight:600;box-shadow:inset 0 0 0 1px #7c5cfc40}.nav-icon{flex-shrink:0;width:18px;height:18px}.upgrade-card{border-radius:var(--radius-md);text-align:center;background:linear-gradient(145deg,#7c5cfc1f,#a855f70f);border:1px solid #7c5cfc33;padding:16px}.upgrade-icon-container{margin-bottom:6px}.upgrade-crown{width:22px;height:22px;color:var(--accent-purple)}.upgrade-card h3{font-size:13px;font-weight:600}.upgrade-card p{color:var(--text-muted);margin:2px 0 10px;font-size:11px}.btn-upgrade{background:var(--gradient-primary);color:#fff;cursor:pointer;transition:var(--transition);border:none;border-radius:20px;padding:7px 24px;font-size:12px;font-weight:600}.btn-upgrade:hover{box-shadow:var(--shadow-glow-purple);transform:scale(1.04)}.main-content{scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;flex-direction:column;flex:1;gap:22px;padding:24px 28px;display:flex;overflow-y:auto}.content-header{justify-content:space-between;align-items:center;display:flex}.header-titles h2{font-size:22px;font-weight:700}.header-titles p{color:var(--text-secondary);margin-top:2px;font-size:13px}.header-actions{align-items:center;gap:10px;display:flex}.btn-icon{background:var(--bg-card);border:1px solid var(--border-color);cursor:pointer;width:38px;height:38px;transition:var(--transition);color:var(--text-secondary);border-radius:50%;place-items:center;display:grid}.btn-icon svg{width:18px;height:18px}.btn-icon:hover{border-color:var(--accent-purple);color:var(--text-primary)}.btn-secondary{border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;transition:var(--transition);align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;display:flex}.btn-secondary:hover{border-color:var(--accent-purple);color:var(--text-primary)}.btn-primary{border-radius:var(--radius-sm);background:var(--gradient-primary);color:#fff;cursor:pointer;transition:var(--transition);border:none;align-items:center;gap:6px;padding:9px 18px;font-size:13px;font-weight:600;display:flex;box-shadow:0 2px 12px #7c5cfc4d}.btn-primary:hover{box-shadow:var(--shadow-glow-purple);transform:translateY(-1px)}.btn-svg-icon{flex-shrink:0;width:16px;height:16px}.stepper-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:28px 32px}.stepper-container{justify-content:space-between;align-items:flex-start;gap:0;display:flex}.step-item{text-align:center;opacity:.45;width:140px;transition:var(--transition);flex-direction:column;flex:none;align-items:center;gap:6px;display:flex;position:relative}.step-item.active,.step-item.completed{opacity:1}.step-icon-wrapper{width:54px;height:54px;transition:var(--transition);border-radius:50%;place-items:center;display:grid;position:relative}.step-icon-wrapper.purple{background:#7c5cfc26;border:2px solid #7c5cfc66}.step-icon-wrapper.blue{background:#3b82f626;border:2px solid #3b82f666}.step-icon-wrapper.green{background:#22c55e26;border:2px solid #22c55e66}.step-icon-wrapper.orange{background:#f9731626;border:2px solid #f9731666}.step-icon-wrapper.violet{background:#a855f726;border:2px solid #a855f766}.step-svg{width:24px;height:24px}.step-icon-wrapper.purple .step-svg{color:var(--accent-purple)}.step-icon-wrapper.blue .step-svg{color:var(--accent-blue)}.step-icon-wrapper.green .step-svg{color:var(--accent-green)}.step-icon-wrapper.orange .step-svg{color:var(--accent-orange)}.step-icon-wrapper.violet .step-svg{color:var(--accent-violet)}.step-item.active .step-icon-wrapper{box-shadow:0 0 18px #7c5cfc59}.step-item.completed .step-icon-wrapper{border-color:var(--accent-green)!important;background:#22c55e33!important}.step-item.completed .step-svg{color:var(--accent-green)!important}.step-number{color:var(--text-muted);font-size:10px;font-weight:600}.step-item h4{font-size:12.5px;font-weight:600}.step-item p{color:var(--text-muted);font-size:10.5px;line-height:1.3}.step-connector{background:var(--border-color);border-radius:2px;flex:1;min-width:30px;height:3px;margin-top:27px;transition:background .5s;position:relative}.step-connector.active{background:var(--accent-purple);box-shadow:0 0 8px #7c5cfc4d}.step-connector.completed{background:var(--accent-green)}.workspace-grid{flex:1;grid-template-columns:1fr 1fr;gap:22px;min-height:0;display:grid}.workspace-left,.workspace-right{flex-direction:column;gap:18px;display:flex}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:var(--transition);padding:22px}.card h3{margin-bottom:16px;font-size:15px;font-weight:600}.gradient-text{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.card-header-with-badge{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.card-header-with-badge h3{margin-bottom:0}.badge{letter-spacing:.3px;border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600}.badge.processing{color:var(--accent-blue);background:#3b82f626;border:1px solid #3b82f64d}.badge.completed{color:var(--accent-green);background:#22c55e26;border:1px solid #22c55e4d}.badge.failed{color:var(--accent-red);background:#ef444426;border:1px solid #ef44444d}.badge.queued{color:var(--accent-orange);background:#f9731626;border:1px solid #f973164d}.pipeline-setup-form{flex-direction:column;gap:14px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:var(--text-secondary);font-size:12px;font-weight:500}.form-row{gap:14px;display:flex}.form-group.half{flex:1}.select-wrapper{position:relative}.select-wrapper select,.form-group input{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);transition:var(--transition);appearance:none;outline:none;padding:10px 14px;font-family:Inter,sans-serif;font-size:13px}.select-wrapper select{cursor:pointer;padding-right:32px}.select-wrapper:after{content:"▾";color:var(--text-muted);pointer-events:none;font-size:14px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.form-group input::placeholder{color:var(--text-muted)}.form-group input:focus,.select-wrapper select:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px #7c5cfc1f}.form-group input[type=file]{cursor:pointer;padding:8px 14px}.btn-primary.full-width{justify-content:center;width:100%;margin-top:4px;padding:12px;font-size:14px}.progress-list{flex-direction:column;gap:14px;display:flex}.progress-step-item{flex-direction:column;gap:6px;display:flex}.step-info{justify-content:space-between;align-items:center;display:flex}.step-title-group{align-items:center;gap:10px;display:flex}.step-title-group span{font-size:13px;font-weight:500}.prog-icon-wrapper{border-radius:6px;flex-shrink:0;place-items:center;width:28px;height:28px;display:grid}.prog-icon-wrapper svg{width:15px;height:15px}.prog-icon-wrapper.purple{color:var(--accent-purple);background:#7c5cfc26}.prog-icon-wrapper.blue{color:var(--accent-blue);background:#3b82f626}.prog-icon-wrapper.green{color:var(--accent-green);background:#22c55e26}.prog-icon-wrapper.orange{color:var(--accent-orange);background:#f9731626}.prog-icon-wrapper.violet{color:var(--accent-violet);background:#a855f726}.percentage{color:var(--text-secondary);font-size:12px;font-weight:600}.percentage.done{color:var(--accent-green)}.progress-bar-container{background:var(--bg-input);border-radius:4px;height:6px;overflow:hidden}.progress-bar-fill{border-radius:4px;height:100%;transition:width .6s cubic-bezier(.4,0,.2,1)}.progress-bar-fill.purple{background:var(--gradient-primary)}.progress-bar-fill.blue{background:var(--gradient-blue)}.progress-bar-fill.green{background:var(--gradient-green)}.progress-bar-fill.orange{background:var(--gradient-orange)}.progress-bar-fill.violet{background:var(--gradient-violet)}.btn-close-progress{color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border:none;font-size:20px;line-height:1}.btn-close-progress:hover{color:var(--text-primary)}.ready-card{border-color:#22c55e4d}.ready-content-wrapper{flex-direction:column;gap:16px;display:flex}.ready-top-row{align-items:center;gap:16px;display:flex}.success-circle-icon{background:#22c55e26;border:2px solid #22c55e66;border-radius:50%;flex-shrink:0;place-items:center;width:42px;height:42px;display:grid}.checkmark-svg{width:20px;height:20px;color:var(--accent-green)}.ready-texts h3{margin-bottom:2px;font-size:14px}.ready-texts p{color:var(--text-secondary);font-size:12px}.btn-download{border-radius:var(--radius-sm);color:#fff;background:linear-gradient(135deg,#ef4444,#f97316);align-items:center;gap:6px;margin-left:auto;padding:10px 22px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;box-shadow:0 2px 12px #ef44444d}.btn-download:hover{transform:translateY(-1px);box-shadow:0 4px 20px #ef444466}.video-loading-placeholder{border-radius:var(--radius-md);border:1px dashed var(--border-color);background:linear-gradient(160deg,#12141e 0%,#1a1d2e 100%);flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:220px;display:flex;position:relative;overflow:hidden}.video-loading-placeholder:before{content:"";background:radial-gradient(#7c5cfc0f 0%,#0000 70%);position:absolute;inset:0}.logo-circle{background:linear-gradient(135deg,#7c5cfc33,#a855f71a);border:2px solid #7c5cfc4d;border-radius:50%;place-items:center;width:56px;height:56px;display:grid}.preview-logo-icon{width:28px;height:28px;color:var(--accent-purple)}.video-loading-placeholder h4{z-index:1;font-size:18px;font-weight:700}.video-loading-placeholder>span{color:var(--text-muted);z-index:1;font-size:12px}.placeholder-prompt{color:var(--text-muted);z-index:1;margin-top:8px;font-size:11px}#output-video-player{border-radius:var(--radius-md);object-fit:contain;background:#000;width:100%;max-height:340px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.animate-pulse{animation:2s ease-in-out infinite pulse}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.progress-bar-fill.active-shimmer{background-size:200% 100%;animation:2s linear infinite shimmer}.main-content::-webkit-scrollbar{width:6px}.main-content::-webkit-scrollbar-track{background:0 0}.main-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.main-content::-webkit-scrollbar-thumb:hover{background:var(--border-active)}@media (width<=1100px){.workspace-grid{grid-template-columns:1fr}.stepper-container{flex-wrap:wrap;justify-content:center;gap:10px}.step-connector{display:none}}@media (width<=768px){.sidebar{display:none}.content-header{flex-direction:column;align-items:flex-start;gap:12px}}