@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes pulse{0%,to{opacity:.2}50%{opacity:.5}}.progress-tracker-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}.progress-tracker-modal{width:100%;max-width:700px;background:linear-gradient(135deg,#1e1b4b,#312e81);border-radius:24px;padding:40px;box-shadow:0 20px 60px #00000080;border:1px solid rgba(168,85,247,.3);position:relative;max-height:90vh;overflow-y:auto}.progress-tracker-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px}.progress-tracker-title{font-size:28px;font-weight:800;color:#fff;margin-bottom:8px;background:linear-gradient(135deg,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.progress-tracker-subtitle{font-size:14px;color:#d8b4feb3;font-weight:500}.progress-tracker-actions{display:flex;gap:8px}.progress-tracker-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.progress-tracker-btn:hover{background:#ffffff26;transform:translateY(-1px)}.progress-tracker-btn.refresh-btn{background:#3b82f633;border:1px solid rgba(59,130,246,.3)}.progress-tracker-btn.refresh-btn:hover{background:#3b82f64d}.progress-tracker-btn.refresh-btn.spinning svg{animation:spin 1s linear infinite}.progress-tracker-warning{margin-bottom:24px;padding:16px;background:#fbbf241a;border:1px solid rgba(251,191,36,.3);border-radius:12px;display:flex;align-items:center;gap:12px}.progress-tracker-warning-icon{width:16px;height:16px;color:#fbbf24;flex-shrink:0}.progress-tracker-warning-text{font-size:13px;color:#fbbf24;font-weight:600;line-height:1.4}.progress-section{margin-bottom:40px}.progress-header{display:flex;justify-content:space-between;margin-bottom:12px}.progress-label{font-size:14px;font-weight:700;color:#d8b4fee6}.progress-percentage{font-size:14px;font-weight:700;color:#fff}.progress-bar-container{height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#a855f7,#ec4899);border-radius:6px;position:relative;overflow:hidden;transition:width .5s ease}.progress-bar-shimmer{position:absolute;top:0;left:0;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}.stages-container{margin-bottom:32px}.stage-item{display:flex;align-items:center;padding:20px;margin-bottom:12px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:16px;position:relative;overflow:hidden;transition:all .3s ease}.stage-item.active,.stage-item.current{background:#a855f726;border:1.5px solid rgba(168,85,247,.4)}.stage-item.active .stage-pulse{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(168,85,247,.2),transparent);animation:pulse 2s infinite}.stage-icon{width:48px;height:48px;border-radius:12px;background:#ffffff1a;display:flex;align-items:center;justify-content:center;margin-right:16px;position:relative;z-index:1;flex-shrink:0}.stage-icon.active{background:linear-gradient(135deg,#a855f7,#ec4899)}.stage-icon.complete{background:linear-gradient(135deg,#10b981,#059669)}.stage-icon.active svg{animation:spin 2s linear infinite}.stage-icon svg{width:24px;height:24px;color:#fff}.stage-content{flex:1;position:relative;z-index:1}.stage-label{font-size:16px;font-weight:700;color:#d8b4fe99;margin-bottom:4px}.stage-item.active .stage-label,.stage-item.complete .stage-label,.stage-item.current .stage-label{color:#fff}.stage-status{font-size:13px;font-weight:500}.stage-status.in-progress{color:#d8b4feb3}.stage-status.completed{color:#86efac;font-weight:600}.stage-progress{font-size:14px;font-weight:700;position:relative;z-index:1}.stage-progress.active{color:#a855f7}.stage-progress.complete{color:#10b981}.view-results-btn{width:100%;padding:18px;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:16px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px;box-shadow:0 8px 24px #10b9814d;transition:all .2s}.view-results-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px #10b98166}.view-results-btn svg{width:24px;height:24px}.view-results-btn svg:last-child{width:20px;height:20px}.info-banner{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:#a855f71a;border-radius:12px;border:1px solid rgba(168,85,247,.2)}.info-banner svg{width:20px;height:20px;color:#c084fc}.info-banner-text{font-size:14px;font-weight:600;color:#d8b4fee6}.info-banner-text strong{color:#fff}.error-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:600px;background:linear-gradient(135deg,#1e1b4b,#312e81);border-radius:24px;padding:40px;box-shadow:0 20px 60px #00000080;border:1px solid rgba(239,68,68,.3);z-index:9999;text-align:center}.error-icon{width:64px;height:64px;color:#ef4444;margin-bottom:20px}.error-title{font-size:24px;font-weight:700;color:#fff;margin-bottom:12px}.error-message{font-size:14px;color:#ef4444cc;margin-bottom:24px;line-height:1.5}.retry-btn{padding:12px 32px;background:linear-gradient(135deg,#a855f7,#ec4899);border:none;border-radius:12px;color:#fff;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s}.retry-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #a855f766}.retry-btn:disabled{opacity:.6;cursor:not-allowed}.retry-btn svg{width:16px;height:16px}.progress-tracker-minimized{position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,#1e1b4b,#312e81);border-radius:16px;padding:16px;box-shadow:0 10px 40px #0006;border:1px solid rgba(168,85,247,.3);z-index:9998;cursor:pointer;min-width:280px;transition:all .2s}.progress-tracker-minimized:hover{transform:translateY(-2px);box-shadow:0 12px 48px #00000080}.minimized-content{display:flex;align-items:center;gap:12px}.minimized-spinner{width:24px;height:24px;color:#a855f7;animation:spin 2s linear infinite;flex-shrink:0}.minimized-info{flex:1}.minimized-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px}.minimized-status{font-size:12px;color:#d8b4feb3}.minimized-expand-icon{width:16px;height:16px;color:#d8b4feb3;flex-shrink:0}@media(max-width:768px){.progress-tracker-modal{padding:24px}.progress-tracker-title{font-size:24px}.stage-item{padding:16px}.stage-icon{width:40px;height:40px}.stage-icon svg{width:20px;height:20px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes glowPulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:.8}}.animate-fadeIn{animation:fadeIn .5s ease-in-out}.animate-slideDown{animation:slideDown .4s ease-out}.animate-slideUp{animation:slideUp .4s ease-out;animation-fill-mode:both}.clip-generator{background:linear-gradient(135deg,#fffffff2,#f8fafcfa);border-radius:24px;padding:40px;box-shadow:0 20px 60px #00000014,0 0 0 1px #00000005;margin-top:40px;position:relative;overflow:hidden}.clip-generator:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);background-size:200% 100%;animation:gradientShift 3s ease infinite}.clip-header{margin-bottom:40px}.header-title-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.title-icon{width:56px;height:56px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px #667eea66,0 0 0 1px #fff3 inset;animation:float 3s ease-in-out infinite}.icon-3d{color:#fff;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.header-content h3{font-size:28px;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.beta-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:6px 14px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:1px;display:flex;align-items:center;gap:4px;animation:pulse 2s ease-in-out infinite;box-shadow:0 4px 16px #667eea4d}.subtitle{color:#64748b;font-size:15px;margin:0;font-weight:500}.generate-section{text-align:center;padding:60px 20px}.feature-preview{display:flex;gap:20px;justify-content:center;margin-bottom:40px;flex-wrap:wrap}.preview-card{background:#fff;padding:24px 32px;border-radius:16px;display:flex;align-items:center;gap:14px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 24px #00000014,0 0 0 2px #e2e8f0;animation:slideUp .4s ease-out;animation-fill-mode:both}.preview-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 40px #0000001f,0 0 0 2px #667eea}.preview-icon-3d{color:#667eea;filter:drop-shadow(0 4px 12px rgba(102,126,234,.3));transition:all .3s ease}.preview-card:hover .preview-icon-3d{transform:scale(1.1);filter:drop-shadow(0 6px 16px rgba(102,126,234,.4))}.preview-text{display:block;font-weight:700;color:#1e293b}.preview-format{display:block;font-size:11px;opacity:.6;font-weight:500}.generate-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:20px 50px;border-radius:16px;font-size:17px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:12px;box-shadow:0 10px 35px #667eea66,0 0 0 1px #ffffff1a inset;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-icon{filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));animation:pulse 2s ease-in-out infinite}.generate-btn:hover{transform:translateY(-3px);box-shadow:0 15px 45px #667eea80}.generate-btn:active{transform:translateY(-1px)}.generate-btn:disabled{opacity:.6;cursor:not-allowed}.info-text{color:#64748b;font-size:14px;margin-top:20px;font-weight:500}.processing-section{text-align:center;padding:80px 20px}.spinner-container{position:relative;width:100px;height:100px;margin:0 auto 40px}.spinner-icon{color:#667eea;animation:spin 2s linear infinite;filter:drop-shadow(0 6px 20px rgba(102,126,234,.4))}.spinner-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;background:radial-gradient(circle,rgba(102,126,234,.3) 0%,transparent 70%);border-radius:50%;z-index:-1;animation:glowPulse 2s ease-in-out infinite}.processing-title{font-size:24px;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:30px}.progress-bar{width:100%;max-width:500px;height:14px;background:linear-gradient(90deg,#f1f5f9,#e2e8f0);border-radius:20px;margin:0 auto 20px;overflow:hidden;position:relative;box-shadow:0 2px 8px #0000000d inset}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);background-size:200% 100%;border-radius:20px;transition:width .5s cubic-bezier(.4,0,.2,1);animation:shimmer 2s linear infinite;box-shadow:0 0 20px #667eea80}.progress-shimmer{position:absolute;top:0;left:0;height:100%;width:100px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.5s linear infinite}.processing-text{font-size:17px;color:#667eea;font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px}.inline-icon{filter:drop-shadow(0 2px 6px rgba(102,126,234,.3))}.processing-info{color:#94a3b8;font-size:14px;font-weight:500}.clips-section{margin-top:20px}.clips-header{text-align:center;margin-bottom:40px}.clips-header h4{font-size:28px;font-weight:800;color:#1e293b;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:12px}.success-icon{color:#10b981;filter:drop-shadow(0 4px 12px rgba(16,185,129,.4));animation:pulse 2s ease-in-out infinite}.clips-header p{color:#64748b;font-size:16px;font-weight:500}.clips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;margin-top:30px}.clip-card{background:#fff;border:2px solid #e2e8f0;border-radius:20px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;cursor:pointer}.clip-card:hover{border-color:#667eea;transform:translateY(-8px);box-shadow:0 16px 50px #667eea40}.viral-badge{position:absolute;top:16px;right:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:8px 16px;border-radius:24px;font-size:14px;font-weight:800;color:#fff;z-index:10;display:flex;align-items:center;gap:6px;box-shadow:0 8px 28px #0003,0 0 0 1px #fff3 inset;animation:slideDown .4s ease-out .3s;animation-fill-mode:both}.viral-badge svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}.clip-thumbnail{position:relative;width:100%;height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.clip-card:hover .clip-thumbnail{transform:scale(1.03)}.thumbnail-icon-3d{opacity:.5;filter:drop-shadow(0 8px 24px rgba(0,0,0,.15));transition:all .3s ease}.thumbnail-icon-3d svg{width:70px;height:70px}.clip-card:hover .thumbnail-icon-3d{opacity:.7;transform:scale(1.1)}.play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;background:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-left:4px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 12px 40px #0003,0 0 0 4px #ffffff4d;color:#667eea}.play-overlay:hover{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 16px 50px #00000040,0 0 0 6px #fff6}.play-overlay svg{filter:drop-shadow(0 2px 8px rgba(102,126,234,.4))}.duration-badge{position:absolute;bottom:16px;left:16px;background:#000000d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:8px 14px;border-radius:12px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;box-shadow:0 6px 20px #0000004d}.duration-badge svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}.clip-info{padding:24px}.clip-title{font-size:18px;font-weight:800;color:#1e293b;margin-bottom:12px;line-height:1.4}.clip-hook{font-size:14px;color:#64748b;margin-bottom:16px;line-height:1.6}.clip-metadata{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}.platform-tag{padding:8px 16px;border-radius:12px;font-size:13px;font-weight:700;border:2px solid;display:flex;align-items:center;gap:8px;transition:all .3s;box-shadow:0 3px 12px #00000014}.platform-tag:hover{transform:translateY(-2px);box-shadow:0 5px 20px #0000001f}.platform-tag svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.1))}.hashtags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.hashtag{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#475569;padding:6px 12px;border-radius:10px;font-size:12px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;display:flex;align-items:center;gap:4px}.hashtag:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:scale(1.1)}.hashtag-more{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:6px 12px;border-radius:10px;font-size:12px;font-weight:700}.clip-actions{padding:0 24px 24px}.download-btn{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 28px #667eea4d;display:flex;align-items:center;justify-content:center;gap:10px}.download-btn:hover{transform:translateY(-2px);box-shadow:0 10px 36px #667eea66}.download-btn svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}.failed-section{text-align:center;padding:80px 20px}.failed-icon-3d{color:#ef4444;filter:drop-shadow(0 8px 28px rgba(239,68,68,.4));margin:0 auto 30px;animation:pulse 1s ease-in-out}.failed-section h4{font-size:24px;font-weight:700;color:#1e293b;margin-bottom:12px}.failed-section p{color:#64748b;margin-bottom:30px;font-size:16px}.retry-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 32px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 24px #667eea4d;display:inline-flex;align-items:center;gap:10px}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px #667eea66}.retry-btn svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}.modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}.modal-content{background:#fff;border-radius:24px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 24px 88px #0000004d}.modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:#f1f5f9;border:none;cursor:pointer;transition:all .3s;z-index:10;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px #0000001a}.modal-close:hover{background:#e2e8f0;transform:rotate(90deg)}.modal-header{padding:30px 30px 20px;border-bottom:2px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:24px;font-weight:800;color:#1e293b;margin:0}.modal-score{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px;box-shadow:0 6px 20px #ff6b6b4d}.modal-body{padding:30px}.modal-preview{background:linear-gradient(135deg,#667eea20,#764ba220);border-radius:16px;padding:60px 20px;text-align:center;margin-bottom:24px}.preview-icon-large{color:#667eea;margin:0 auto 16px;filter:drop-shadow(0 6px 20px rgba(102,126,234,.3))}.preview-note{color:#64748b;font-size:14px;font-weight:500}.modal-details{background:#f8fafc;border-radius:16px;padding:20px;margin-bottom:20px}.detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #e2e8f0}.detail-row:last-child{border-bottom:none}.detail-label{font-weight:700;color:#475569}.detail-value{color:#1e293b;font-weight:500}.modal-hashtags{display:flex;gap:8px;flex-wrap:wrap}.modal-hashtag{background:linear-gradient(135deg,#667eea15,#764ba215);color:#667eea;padding:8px 14px;border-radius:12px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:4px}.modal-footer{padding:20px 30px 30px;display:flex;gap:12px}.modal-btn{flex:1;padding:14px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;border:none;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:8px}.modal-btn:hover{transform:translateY(-2px)}.modal-btn-download{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 6px 24px #667eea4d}.modal-btn-download:hover{box-shadow:0 8px 32px #667eea66}.modal-btn-share{background:#fff;color:#667eea;border:2px solid #667eea}.modal-btn-share:hover{background:#f8fafc}.toast-icon{filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}@media(max-width:768px){.clip-generator{padding:24px}.clips-grid{grid-template-columns:1fr}.feature-preview{flex-direction:column}.preview-card{width:100%}.modal-content{margin:20px}.modal-footer{flex-direction:column}}@tailwind base;@tailwind components;@tailwind utilities;@layer base{*{@apply border-border;}body{@apply bg-background text-foreground;}}@layer utilities{.animate-fadeIn{animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.backdrop-blur-md{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.backdrop-blur-xl{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.bg-clip-text{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}}