@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-void:#050508;--bg-primary:#0a0a12;--bg-elevated:#111120;--bg-surface:#16162a;--bg-card:#1a1a33;--bg-hover:#22224a;--accent-start:#6366f1;--accent-mid:#a855f7;--accent-end:#ec4899;--accent-gradient:linear-gradient(135deg, var(--accent-start), var(--accent-mid), var(--accent-end));--accent-glow:0 0 30px #6366f14d, 0 0 60px #a855f726;--text-primary:#f0f0f8;--text-secondary:#a0a0c0;--text-muted:#606080;--text-accent:#c084fc;--border-subtle:#ffffff0f;--border-default:#ffffff1a;--border-accent:#a855f766;--color-success:#22c55e;--color-warning:#f59e0b;--color-error:#ef4444;--color-info:#6366f1;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:999px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--shadow-card:0 4px 24px #0006, 0 1px 4px #0000004d;--shadow-elevated:0 8px 40px #00000080, 0 2px 8px #0000004d;--shadow-glow:0 0 40px #6366f126;--font-display:"Space Grotesk", system-ui, sans-serif;--font-mono:"JetBrains Mono", monospace;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--transition-fast:.15s var(--ease-out-expo);--transition-normal:.3s var(--ease-out-expo);--transition-slow:.5s var(--ease-out-expo)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-display);background:var(--bg-void);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}body:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(at 20% 20%,#6366f114 0%,#0000 50%),radial-gradient(at 80% 80%,#a855f70f 0%,#0000 50%),radial-gradient(#ec48990a 0%,#0000 60%);position:fixed;inset:0}#root{z-index:1;position:relative}.glass-card{-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);background:#16162a99}.glass-card:hover{border-color:var(--border-default)}.gradient-text{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-border{position:relative}.gradient-border:before{content:"";border-radius:inherit;background:var(--accent-gradient);-webkit-mask-composite:xor;opacity:0;transition:opacity var(--transition-normal);padding:1px;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.gradient-border:hover:before,.gradient-border.active:before{opacity:1}.app{max-width:1200px;padding:var(--space-lg);min-height:100vh;margin:0 auto}.app-header{text-align:center;padding:var(--space-2xl) 0 var(--space-xl)}.app-header__tag{align-items:center;gap:var(--space-sm);letter-spacing:.15em;text-transform:uppercase;color:var(--text-accent);border-radius:var(--radius-full);padding:var(--space-xs) var(--space-md);margin-bottom:var(--space-md);background:#a855f71a;border:1px solid #a855f733;font-size:.75rem;font-weight:500;display:inline-flex}.app-header__title{letter-spacing:-.03em;margin-bottom:var(--space-sm);font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.1}.app-header__sub{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:1.1rem;font-weight:300}.step-indicator{margin-bottom:var(--space-xl);padding:0 var(--space-lg);justify-content:center;align-items:center;gap:0;display:flex}.step-indicator__item{align-items:center;gap:var(--space-sm);cursor:pointer;transition:all var(--transition-normal);display:flex}.step-indicator__dot{border:2px solid var(--border-default);width:36px;height:36px;color:var(--text-muted);background:var(--bg-elevated);transition:all var(--transition-normal);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;font-weight:600;display:flex}.step-indicator__label{color:var(--text-muted);white-space:nowrap;transition:color var(--transition-normal);font-size:.8rem;font-weight:500}.step-indicator__line{background:var(--border-default);width:48px;height:2px;margin:0 var(--space-sm);transition:background var(--transition-normal);flex-shrink:0}.step-indicator__item.active .step-indicator__dot{background:var(--accent-gradient);color:#fff;box-shadow:var(--accent-glow);border-color:#0000}.step-indicator__item.active .step-indicator__label{color:var(--text-primary)}.step-indicator__item.completed .step-indicator__dot{background:var(--color-success);color:#fff;border-color:#0000}.step-indicator__item.completed .step-indicator__label{color:var(--text-secondary)}.step-indicator__line.completed{background:var(--color-success)}.form-container{max-width:800px;animation:fadeSlideUp .5s var(--ease-out-expo);margin:0 auto}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.step-title{margin-bottom:var(--space-sm);letter-spacing:-.02em;font-size:1.6rem;font-weight:600}.step-subtitle{color:var(--text-secondary);margin-bottom:var(--space-lg);font-size:.95rem}.prompt-textarea{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);width:100%;min-height:200px;padding:var(--space-lg);color:var(--text-primary);font-family:var(--font-display);resize:vertical;transition:all var(--transition-normal);outline:none;font-size:1rem;line-height:1.7}.prompt-textarea::placeholder{color:var(--text-muted)}.prompt-textarea:focus{border-color:var(--accent-start);box-shadow:0 0 0 3px #6366f126, var(--shadow-glow)}.prompt-meta{margin-top:var(--space-sm);color:var(--text-muted);font-size:.8rem;font-family:var(--font-mono);justify-content:space-between;align-items:center;display:flex}.style-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.style-card{border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);aspect-ratio:3/4;background:var(--bg-surface);border:2px solid #0000;position:relative;overflow:hidden}.style-card:hover{box-shadow:var(--shadow-elevated);transform:translateY(-4px)}.style-card.selected{border-color:var(--accent-mid);box-shadow:0 0 30px #a855f74d}.style-card__preview{background:var(--bg-card);justify-content:center;align-items:center;font-size:4rem;display:flex;position:absolute;inset:0}.style-card__info{padding:var(--space-md);background:linear-gradient(#0000 0%,#000000e6 100%);position:absolute;bottom:0;left:0;right:0}.style-card__name{font-size:.95rem;font-weight:600}.style-card__desc{color:var(--text-secondary);margin-top:2px;font-size:.75rem}.style-card__check{top:var(--space-sm);right:var(--space-sm);background:var(--accent-gradient);color:#fff;opacity:0;width:28px;height:28px;transition:all var(--transition-normal);border-radius:50%;justify-content:center;align-items:center;font-size:.9rem;display:flex;position:absolute;transform:scale(.5)}.style-card.selected .style-card__check{opacity:1;transform:scale(1)}.platform-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));display:grid}.platform-card{align-items:center;gap:var(--space-sm);padding:var(--space-lg) var(--space-md);border-radius:var(--radius-md);background:var(--bg-elevated);border:2px solid var(--border-subtle);cursor:pointer;transition:all var(--transition-normal);-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}.platform-card:hover{background:var(--bg-hover);border-color:var(--border-default);transform:translateY(-2px)}.platform-card.selected{border-color:var(--accent-mid);background:#a855f714;box-shadow:0 0 20px #a855f726}.platform-card__icon{font-size:2rem;line-height:1}.platform-card__name{font-size:.85rem;font-weight:500}.platform-card__ratio{color:var(--text-muted);font-size:.7rem;font-family:var(--font-mono)}.platform-card__check{border:2px solid var(--border-default);width:20px;height:20px;transition:all var(--transition-normal);color:#0000;border-radius:4px;justify-content:center;align-items:center;font-size:.7rem;display:flex}.platform-card.selected .platform-card__check{background:var(--accent-gradient);color:#fff;border-color:#0000}.upload-zone{border:2px dashed var(--border-default);border-radius:var(--radius-lg);padding:var(--space-2xl) var(--space-xl);text-align:center;cursor:pointer;transition:all var(--transition-normal);background:var(--bg-elevated)}.upload-zone:hover,.upload-zone.dragging{border-color:var(--accent-mid);background:#a855f70a}.upload-zone__icon{margin-bottom:var(--space-md);opacity:.6;font-size:3rem}.upload-zone__text{color:var(--text-secondary);margin-bottom:var(--space-xs);font-size:1rem}.upload-zone__hint{color:var(--text-muted);font-size:.8rem}.upload-previews{gap:var(--space-md);margin-top:var(--space-lg);flex-wrap:wrap;display:flex}.upload-preview{border-radius:var(--radius-md);border:1px solid var(--border-default);width:120px;height:120px;position:relative;overflow:hidden}.upload-preview img{object-fit:cover;width:100%;height:100%}.upload-preview__remove{color:#fff;cursor:pointer;width:24px;height:24px;transition:transform var(--transition-fast);background:#ef4444e6;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;top:4px;right:4px}.upload-preview__remove:hover{transform:scale(1.1)}.review-grid{gap:var(--space-md);display:grid}.review-item{padding:var(--space-lg);border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid var(--border-subtle)}.review-item__label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:var(--space-xs);font-size:.75rem}.review-item__value{color:var(--text-primary);font-size:1rem;font-weight:500}.review-item__tags{gap:var(--space-xs);margin-top:var(--space-xs);flex-wrap:wrap;display:flex}.review-tag{border-radius:var(--radius-full);color:var(--text-accent);background:#a855f71f;padding:2px 10px;font-size:.8rem;font-weight:500}.btn{justify-content:center;align-items:center;gap:var(--space-sm);border-radius:var(--radius-md);font-family:var(--font-display);cursor:pointer;transition:all var(--transition-normal);border:none;outline:none;padding:14px 32px;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 20px #6366f14d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px #6366f166}.btn-secondary{background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border-default)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.btn-ghost{color:var(--text-secondary);background:0 0;padding:14px 20px}.btn-ghost:hover:not(:disabled){color:var(--text-primary);background:var(--bg-surface)}.nav-buttons{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.dashboard{max-width:900px;animation:fadeSlideUp .5s var(--ease-out-expo);margin:0 auto}.dashboard__header{text-align:center;margin-bottom:var(--space-xl)}.progress-container{margin-bottom:var(--space-xl)}.progress-bar{background:var(--bg-surface);border-radius:var(--radius-full);width:100%;height:6px;margin-bottom:var(--space-sm);overflow:hidden}.progress-bar__fill{background:var(--accent-gradient);border-radius:var(--radius-full);height:100%;transition:width 1s var(--ease-out-expo);position:relative}.progress-bar__fill:after{content:"";background:linear-gradient(90deg,#0000,#ffffff4d);width:40px;animation:1.5s infinite shimmer;position:absolute;top:0;bottom:0;right:0}@keyframes shimmer{0%{opacity:0}50%{opacity:1}to{opacity:0}}.progress-info{justify-content:space-between;font-size:.85rem;display:flex}.progress-info__status{color:var(--text-accent);font-weight:500}.progress-info__percent{color:var(--text-muted);font-family:var(--font-mono)}.pipeline-steps{gap:var(--space-sm);margin-bottom:var(--space-xl);display:grid}.pipeline-step{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid var(--border-subtle);transition:all var(--transition-normal);display:flex}.pipeline-step.active{border-color:var(--accent-start);background:#6366f10f}.pipeline-step.completed{border-color:#22c55e4d}.pipeline-step__icon{text-align:center;flex-shrink:0;width:40px;font-size:1.4rem}.pipeline-step__info{flex:1}.pipeline-step__name{font-size:.9rem;font-weight:500}.pipeline-step__status{color:var(--text-muted);font-size:.75rem}.pipeline-step.active .pipeline-step__status{color:var(--text-accent)}.pipeline-step.completed .pipeline-step__status{color:var(--color-success)}.pipeline-step__spinner{border:2px solid var(--border-default);border-top-color:var(--accent-mid);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.output-section{padding:var(--space-xl);border-radius:var(--radius-lg);background:var(--bg-elevated);border:1px solid var(--border-subtle)}.output-section__title{margin-bottom:var(--space-lg);font-size:1.2rem;font-weight:600}.output-grid{gap:var(--space-lg);grid-template-columns:1fr 1fr;display:grid}.output-video{text-align:center;grid-column:1/-1}.output-video video{border-radius:var(--radius-md);border:1px solid var(--border-default);width:100%;max-width:640px}.output-meta{padding:var(--space-lg);background:var(--bg-surface);border-radius:var(--radius-md)}.output-meta__label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:var(--space-xs);font-size:.75rem}.output-meta__value{color:var(--text-primary);font-size:.95rem;line-height:1.5}.download-section{gap:var(--space-md);margin-top:var(--space-xl);justify-content:center;display:flex}.status-badge{align-items:center;gap:var(--space-xs);border-radius:var(--radius-full);padding:4px 12px;font-size:.8rem;font-weight:500;display:inline-flex}.status-badge.completed{color:var(--color-success);background:#22c55e1f}.status-badge.failed{color:var(--color-error);background:#ef44441f}.status-badge.processing{color:var(--color-info);background:#6366f11f}@media (width<=768px){.app{padding:var(--space-md)}.step-indicator{gap:var(--space-xs);flex-wrap:wrap}.step-indicator__label{display:none}.step-indicator__line{width:24px}.style-grid,.platform-grid{grid-template-columns:repeat(2,1fr)}.output-grid{grid-template-columns:1fr}.nav-buttons{gap:var(--space-md);flex-direction:column-reverse}.nav-buttons .btn{width:100%}}@media (width<=480px){.style-grid{grid-template-columns:1fr}.platform-grid{grid-template-columns:1fr 1fr}}