*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:oklch(8% .005 135);--bg-secondary:oklch(12% .005 135);--bg-card:oklch(12% .005 135/.6);--bg-card-hover:oklch(12% .005 135/.8);--border-subtle:oklch(16% .005 135);--border-glass:oklch(22% .01 135);--color-primary:oklch(60% .1 135);--color-primary-light:oklch(72% .09 135);--color-secondary:oklch(65% .1 185);--color-accent:oklch(65% .1 185);--color-success:oklch(68% .12 155);--color-warning:oklch(65% .12 80);--color-error:oklch(58% .18 25);--text-primary:oklch(93% .008 135);--text-secondary:oklch(62% .02 135);--text-muted:oklch(50% .02 135);--gradient-primary:linear-gradient(135deg, oklch(60% .1 135) 0%, oklch(65% .1 185) 100%);--gradient-bg:radial-gradient(ellipse at 20% 50%, oklch(60% .1 135/.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, oklch(65% .1 185/.05) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, oklch(60% .1 135/.04) 0%, transparent 50%);--font-family:"Inter", system-ui, -apple-system, sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-size-4xl:2.5rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--blur-glass:blur(20px);--blur-heavy:blur(40px);--shadow-glow-sm:0 0 15px oklch(60% .1 135/.2);--shadow-glow-md:0 0 30px oklch(60% .1 135/.25);--shadow-glow-lg:0 0 60px oklch(60% .1 135/.15);--shadow-card:0 4px 24px oklch(0% 0 0/.3), 0 1px 2px oklch(0% 0 0/.2);--transition-fast:.15s ease-out;--transition-base:.25s ease-out;--transition-slow:.4s cubic-bezier(.16, 1, .3, 1);--max-width:1100px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:24px}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}.hidden{display:none!important}.app{flex-direction:column;align-items:center;min-height:100vh;display:flex;position:relative}.bg-gradient{background:var(--gradient-bg);z-index:-3;pointer-events:none;position:fixed;inset:0}.bg-grid{z-index:-2;pointer-events:none;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:60px 60px;position:fixed;inset:0}.bg-orbs{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.orb{filter:var(--blur-heavy);opacity:.4;border-radius:50%;position:absolute}.orb-1{background:radial-gradient(circle,oklch(60% .1 135/.15),#0000 70%);width:500px;height:500px;animation:20s ease-in-out infinite orbFloat1;top:-10%;left:-10%}.orb-2{background:radial-gradient(circle,oklch(65% .1 185/.12),#0000 70%);width:400px;height:400px;animation:25s ease-in-out infinite orbFloat2;bottom:-5%;right:-5%}.orb-3{background:radial-gradient(circle,oklch(60% .1 135/.1),#0000 70%);width:300px;height:300px;animation:18s ease-in-out infinite orbFloat3;top:40%;right:20%}@keyframes orbFloat1{0%,to{transform:translate(0)scale(1)}33%{transform:translate(80px,40px)scale(1.1)}66%{transform:translate(-30px,80px)scale(.95)}}@keyframes orbFloat2{0%,to{transform:translate(0)scale(1)}33%{transform:translate(-60px,-30px)scale(1.05)}66%{transform:translate(40px,-60px)scale(.9)}}@keyframes orbFloat3{0%,to{transform:translate(0)scale(1)}50%{transform:translate(-50px,50px)scale(1.15)}}.header{width:100%;max-width:var(--max-width);padding:var(--space-8) var(--space-6);text-align:center}.logo{justify-content:center;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);display:flex}.logo-icon{border-radius:var(--radius-md);background:var(--gradient-primary);color:#fff;width:44px;height:44px;box-shadow:var(--shadow-glow-sm);justify-content:center;align-items:center;display:flex}.logo h1{font-size:var(--font-size-3xl);letter-spacing:-.03em;background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:800}.logo .accent{-webkit-text-fill-color:var(--color-accent)}.tagline{font-size:var(--font-size-sm);color:var(--text-secondary);letter-spacing:.02em;font-weight:400}.progress-stepper{width:100%;max-width:700px;padding:0 var(--space-6);margin-bottom:var(--space-10);justify-content:center;align-items:center;gap:0;display:flex}.step{align-items:center;gap:var(--space-2);opacity:.35;transition:opacity var(--transition-base), transform var(--transition-base);flex-direction:column;flex-shrink:0;display:flex}.step.active{opacity:1}.step.completed{opacity:.7}.step.completed .step-icon{background:var(--color-success);border-color:var(--color-success);box-shadow:0 0 15px #10b98166}.step-icon{border:2px solid var(--border-glass);width:40px;height:40px;color:var(--text-secondary);background:var(--bg-card);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);transition:all var(--transition-base);border-radius:50%;justify-content:center;align-items:center;display:flex}.step.active .step-icon{border-color:var(--color-primary);color:var(--color-primary-light);box-shadow:var(--shadow-glow-sm);background:oklch(60% .1 135/.1)}.step span{font-size:var(--font-size-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-weight:500}.step.active span{color:var(--text-primary)}.step-line{background:var(--border-subtle);flex:1;min-width:30px;max-width:60px;height:2px;position:relative;overflow:hidden}.step-line.active{background:var(--gradient-primary);box-shadow:0 0 8px oklch(60% .1 135/.3)}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:var(--blur-glass);border:1px solid var(--border-glass);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);transition:transform var(--transition-base), box-shadow var(--transition-base)}.main-content{width:100%;max-width:var(--max-width);padding:0 var(--space-6);flex:1}.section{animation:.5s forwards fadeSlideIn}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.upload-zone{padding:var(--space-16) var(--space-8);text-align:center;cursor:pointer;border:2px dashed var(--border-glass);transition:all var(--transition-base);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.upload-zone:before{content:"";opacity:0;transition:opacity var(--transition-base);background:radial-gradient(circle,oklch(60% .1 135/.03),#0000 70%);position:absolute;inset:0}.upload-zone:hover,.upload-zone.dragover{border-color:var(--color-primary);box-shadow:var(--shadow-glow-md), var(--shadow-card);transform:translateY(-2px)}.upload-zone:hover:before,.upload-zone.dragover:before{opacity:1}.upload-zone.dragover{border-color:var(--color-accent);box-shadow:0 0 40px oklch(60% .1 135/.15), var(--shadow-card)}.upload-icon{color:var(--color-primary-light);margin-bottom:var(--space-6);opacity:.7;animation:3s ease-in-out infinite iconFloat}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.upload-zone h2{font-size:var(--font-size-2xl);margin-bottom:var(--space-2);letter-spacing:-.02em;font-weight:700}.upload-zone p{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--space-8)}.btn{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-family:var(--font-family);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;border:none;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 2px 12px oklch(60% .1 135/.2)}.btn-primary:hover{box-shadow:var(--shadow-glow-md);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-glow{position:relative;overflow:hidden}.btn-glow:after{content:"";background:var(--gradient-primary);border-radius:inherit;z-index:-1;filter:blur(12px);opacity:.5;transition:opacity var(--transition-base);position:absolute;inset:-2px}.btn-glow:hover:after{opacity:.8}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-glass);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);background:0 0}.btn-secondary:hover{border-color:var(--color-primary-light);background:#ffffff0d;transform:translateY(-1px)}.btn-ghost{color:var(--text-secondary);padding:var(--space-2) var(--space-4);background:0 0;border:none}.btn-ghost:hover{color:var(--text-primary)}.btn-large{padding:var(--space-4) var(--space-8);font-size:var(--font-size-base);border-radius:var(--radius-lg)}.processing-card{padding:var(--space-10) var(--space-8);text-align:center}.processing-header h2{font-size:var(--font-size-2xl);margin-bottom:var(--space-2);font-weight:700}.processing-header p{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--space-8)}.progress-container{align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);display:flex}.progress-bar-wrapper{background:#ffffff0f;border-radius:4px;flex:1;height:8px;position:relative;overflow:hidden}.progress-bar{background:var(--gradient-primary);border-radius:4px;width:0%;height:100%;transition:width .3s;position:relative}.progress-bar-glow{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);animation:2s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-text{font-size:var(--font-size-sm);color:var(--color-primary-light);text-align:right;font-variant-numeric:tabular-nums;min-width:45px;font-weight:600}.processing-status{justify-content:center;align-items:center;gap:var(--space-3);display:flex}.status-spinner{border:2px solid var(--border-glass);border-top-color:var(--color-primary);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#status-message{font-size:var(--font-size-sm);color:var(--text-secondary)}.model-progress{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--border-subtle)}.model-progress-items{gap:var(--space-2);text-align:left;flex-direction:column;display:flex}.model-file{align-items:center;gap:var(--space-3);font-size:var(--font-size-xs);color:var(--text-muted);display:flex}.model-file-bar{background:#ffffff0a;border-radius:2px;flex:1;height:3px;overflow:hidden}.model-file-bar-inner{background:var(--color-secondary);border-radius:2px;height:100%;transition:width .3s}.preview-section{flex-direction:column;height:calc(100vh - 80px);display:flex;overflow:hidden;width:100%!important;max-width:100%!important;padding:0 var(--space-4)!important}.editor-layout{gap:var(--space-3);flex:1;grid-template-rows:1fr;grid-template-columns:200px 1fr;min-height:0;display:grid}.editor-sidebar{padding:var(--space-3);flex-direction:column;grid-area:1/1;gap:0;min-height:0;display:flex;overflow-y:auto}.editor-sidebar::-webkit-scrollbar{width:3px}.editor-sidebar::-webkit-scrollbar-thumb{background:var(--border-glass);border-radius:2px}.sidebar-section{gap:var(--space-2);flex-direction:column;display:flex}.sidebar-section+.sidebar-section{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}.sidebar-title{color:var(--text-primary);margin:0;font-size:11px;font-weight:700}.sidebar-group{flex-direction:column;gap:2px;display:flex}.sidebar-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:600}.sidebar-row{align-items:center;gap:6px;display:flex}.sidebar-select{width:100%}.sidebar-range{flex:1;width:100%}.sidebar-export{margin-top:auto!important}.sidebar-export-row{gap:var(--space-2);display:flex}.btn-full{justify-content:center;width:100%}.btn-sm{flex:1;padding:5px 10px;font-size:11px}.btn-ghost{border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);text-align:center;background:#ffffff0a}.btn-ghost:hover{color:var(--text-primary);background:#ffffff14}.editor-main{grid-area:1/2;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex}.video-wrapper{border-radius:var(--radius-lg);background:#000;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.video-wrapper video{border-radius:var(--radius-lg);object-fit:contain;width:100%;max-height:100%;display:block}.editor-timeline{padding:var(--space-2) var(--space-3);margin-top:var(--space-3);flex-shrink:0;max-height:100px}.timeline-header{margin-bottom:var(--space-2);justify-content:space-between;align-items:center;display:flex}.timeline-label{color:var(--text-primary);font-size:11px;font-weight:700}.timeline-hint{color:var(--text-muted);font-size:9px}.timeline-track{gap:var(--space-2);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:4px;display:flex;overflow:auto hidden}.timeline-track::-webkit-scrollbar{height:4px}.timeline-track::-webkit-scrollbar-track{background:#ffffff05;border-radius:2px}.timeline-track::-webkit-scrollbar-thumb{background:var(--border-glass);border-radius:2px}.cue-item{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);min-width:140px;max-width:200px;transition:all var(--transition-fast);cursor:pointer;background:#ffffff05;flex-direction:column;flex-shrink:0;gap:2px;padding:4px 8px;display:flex}.cue-item:hover{border-color:var(--border-glass);background:#ffffff0d}.cue-item.active{background:oklch(60% .1 135/.1);border-color:oklch(30% .04 135);box-shadow:0 0 8px oklch(60% .1 135/.15)}.cue-time{color:var(--color-secondary);font-variant-numeric:tabular-nums;cursor:pointer;transition:color var(--transition-fast);font-size:9px;font-weight:600}.cue-time:hover{color:var(--color-accent)}.cue-text{color:var(--text-primary);font-size:11px;font-family:var(--font-family);resize:none;background:0 0;border:none;outline:none;width:100%;padding:0;line-height:1.3}.cue-text:focus{color:#fff}@media (width<=768px){.preview-section{height:auto;overflow:visible}.editor-layout{flex-direction:column;display:flex}.editor-sidebar{gap:var(--space-2);flex-flow:wrap}.sidebar-section{gap:var(--space-2);flex-flow:wrap;align-items:center}.sidebar-section+.sidebar-section{border-top:none;margin-top:0;padding-top:0}.sidebar-group{align-items:center;gap:var(--space-2);flex-direction:row}.sidebar-export{margin-top:0!important}}.caption-overlay{pointer-events:none;z-index:20;justify-content:center;padding:0;display:flex;position:absolute}.caption-overlay span{text-align:center;overflow-wrap:break-word;word-break:break-word;color:#fff;text-shadow:1px 1px 2px #000c;background:#000000b3;border-radius:4px;max-width:90%;padding:6px 14px;font-family:Inter,sans-serif;font-size:16px;line-height:1.3;display:inline-block}#caption-text:empty{display:none}.caption-word{opacity:.4;transition:opacity .12s ease-out}.caption-word.active{opacity:1;transition:color .12s ease-out,transform .12s ease-out,opacity .12s ease-out;display:inline-block}.toggle-label{cursor:pointer;font-size:var(--font-size-sm);color:var(--text-secondary);align-items:center;gap:6px;display:flex}.toggle-label input[type=checkbox]{accent-color:oklch(60% .1 135)}video::cue{opacity:0}.style-toolbar{align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);margin-top:var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff08;flex-wrap:wrap;display:flex;overflow-x:auto}.toolbar-group{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.toolbar-label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-weight:500}.toolbar-btn-group{border-radius:var(--radius-sm);background:#ffffff0a;gap:2px;padding:2px;display:flex}.toolbar-btn{width:30px;height:28px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;display:flex}.toolbar-btn:hover{color:var(--text-primary);background:#ffffff14}.toolbar-btn.active{background:var(--color-primary);color:#fff;box-shadow:0 0 8px oklch(60% .1 135/.3)}.toolbar-select{border:1px solid var(--border-subtle);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-xs);cursor:pointer;background:#ffffff0f;border-radius:4px;outline:none;max-width:110px;padding:4px 8px}.toolbar-select:focus{border-color:var(--color-primary)}.toolbar-select option{background:var(--bg-secondary);color:var(--text-primary)}.toolbar-range{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:2px;outline:none;width:70px;height:4px}.toolbar-range-sm{width:50px}.toolbar-range::-webkit-slider-thumb{appearance:none;background:var(--color-primary-light);cursor:pointer;width:14px;height:14px;transition:transform var(--transition-fast);border:2px solid #fff3;border-radius:50%}.toolbar-range::-webkit-slider-thumb:hover{transform:scale(1.2)}.toolbar-value{font-size:var(--font-size-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:30px}.toolbar-color-wrap{border:2px solid var(--border-glass);cursor:pointer;border-radius:4px;flex-shrink:0;width:26px;height:26px;position:relative;overflow:hidden}.toolbar-color{appearance:none;cursor:pointer;border:none;width:40px;height:40px;position:absolute;top:-7px;left:-7px}.toolbar-color::-webkit-color-swatch-wrapper{padding:0}.toolbar-color::-webkit-color-swatch{border:none}.download-card{padding:var(--space-16) var(--space-8);text-align:center;align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.success-icon{color:var(--color-success);animation:.6s cubic-bezier(.34,1.56,.64,1) forwards successPop}@keyframes successPop{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.download-card h2{font-size:var(--font-size-3xl);background:linear-gradient(135deg, var(--color-success), var(--color-accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:800}.download-card p{color:var(--text-secondary);margin-bottom:var(--space-4)}.download-actions-row{gap:var(--space-3);margin-top:var(--space-2);align-items:center;display:flex}.download-actions-row .btn{align-items:center;gap:6px;display:flex}.footer{width:100%;padding:var(--space-8) var(--space-6);text-align:center}.footer p{font-size:var(--font-size-xs);color:var(--text-muted)}.footer strong{color:var(--text-secondary);font-weight:600}@media (width<=768px){.header{padding:var(--space-6) var(--space-4)}.logo h1{font-size:var(--font-size-2xl)}.progress-stepper{padding:0 var(--space-2);margin-bottom:var(--space-6)}.step span{display:none}.upload-zone{padding:var(--space-10) var(--space-6)}.upload-icon svg{width:48px;height:48px}.processing-card{padding:var(--space-8) var(--space-6)}.export-actions{flex-direction:column}.export-actions .btn{justify-content:center;width:100%}}