@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap";.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:40px 0 60px;position:relative;z-index:1}.header{border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100;backdrop-filter:blur(16px) saturate(1.8);-webkit-backdrop-filter:blur(16px) saturate(1.8);background:#0a0a12bf}.header-content{display:flex;align-items:center;justify-content:space-between;height:64px}.header-logo{display:flex;align-items:center;gap:10px;color:var(--accent-1);font-weight:700;font-size:1.2rem}.header-title{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Space Grotesk,sans-serif;font-weight:800;letter-spacing:-.02em}.header-nav{display:flex;gap:16px}.header-link{color:var(--text-secondary);font-size:.875rem;padding:8px 16px;border-radius:var(--radius-sm);transition:all .2s;border:1px solid transparent}.header-link:hover{color:var(--text-primary);background:var(--bg-card);border-color:var(--border-color)}.header-lang-btn{cursor:pointer;font-size:.78rem;font-weight:700;letter-spacing:.03em}.header-lang-btn:hover{color:var(--accent-2);border-color:#06b6d44d}.hero{text-align:center;padding:60px 0 40px}.hero-title{font-size:2.8rem;font-weight:800;line-height:1.15;letter-spacing:-.03em;margin-bottom:16px;font-family:Space Grotesk,sans-serif}.gradient-text{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.125rem;color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.7}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:32px;margin-bottom:24px;transition:all .3s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-glow)}.card:hover{border-color:var(--border-active);box-shadow:0 0 50px #8b5cf60f}.card-section{padding:4px 0}.card-actions{display:flex;justify-content:center;padding-top:8px}.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-color),transparent);margin:24px 0}.section-title{font-size:1rem;font-weight:600;margin-bottom:16px;color:var(--text-primary)}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:10px;font-size:.9rem;font-weight:600;transition:all .25s ease;white-space:nowrap;position:relative;overflow:hidden}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--gradient-main);color:#fff;box-shadow:0 4px 14px #8b5cf64d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #8b5cf666}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:var(--bg-card-hover);color:var(--text-secondary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-active);background:#8b5cf614}.btn-large{padding:16px 36px;font-size:1.05rem;font-weight:700;border-radius:12px}.btn-icon{font-size:1.2rem}.btn-download{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);width:100%;justify-content:center;border-radius:8px}.btn-download:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--stem-color, var(--border-active))}.btn-loading-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn-primary:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.08) 45%,transparent 50%);transition:all .6s ease;transform:translate(-100%)}.btn-primary:hover:after{transform:translate(100%)}.drop-zone{border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:48px 40px;text-align:center;cursor:pointer;transition:all .35s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.drop-zone:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(139,92,246,.04) 0%,transparent 70%);opacity:0;transition:opacity .3s ease}.drop-zone:hover:before{opacity:1}.drop-zone:hover{border-color:var(--accent-1);transform:scale(1.01)}.drop-zone-active{border-color:var(--accent-1);background:#8b5cf60f;transform:scale(1.02)}.drop-zone-has-file{border-style:solid;border-color:var(--accent-3);background:#10b9810a;padding:20px;cursor:default}.drop-zone-content{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;z-index:1}.upload-icon{color:var(--accent-1);opacity:.7;transition:all .3s}.drop-zone:hover .upload-icon{opacity:1;transform:translateY(-4px)}.drop-zone-text{font-size:1.05rem;color:var(--text-primary)}.drop-zone-text strong{color:var(--accent-1)}.drop-zone-hint{font-size:.85rem;color:var(--text-muted)}.file-selected{display:flex;align-items:center;gap:16px;position:relative;z-index:1}.file-icon{color:var(--accent-3)}.file-info{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left}.file-name{font-weight:600;color:var(--text-primary);word-break:break-all}.file-size{font-size:.8rem;color:var(--text-muted)}.file-remove{color:var(--text-muted);padding:8px;border-radius:50%;transition:all .2s;display:flex;position:relative;z-index:2}.file-remove:hover{color:#ef4444;background:#ef444426}.upload-error{margin-top:12px;padding:10px 16px;background:#ef444414;color:#f87171;border-radius:var(--radius-sm);font-size:.875rem;border:1px solid rgba(239,68,68,.15)}.selector-row{display:flex;gap:24px}@media(max-width:640px){.selector-row{flex-direction:column;gap:16px}}.selector-group{flex:1}.selector-label{display:block;font-size:.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:10px;text-transform:uppercase;letter-spacing:.05em}.selector-options{display:flex;gap:8px}.selector-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 20px;border-radius:10px;border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);transition:all .2s;cursor:pointer}.selector-btn:hover{border-color:var(--border-active);background:var(--bg-primary)}.selector-btn-active{border-color:var(--accent-1);background:#8b5cf61a;color:var(--text-primary);box-shadow:0 0 20px #8b5cf614}.selector-btn-sm{padding:12px 16px}.selector-btn-title{font-weight:700;font-size:.95rem}.selector-btn-desc{font-size:.72rem;opacity:.6}.stem-preview{margin-top:16px;padding:16px;background:var(--bg-primary);border-radius:10px}.stem-preview-title{font-size:.85rem;color:var(--text-secondary);margin-bottom:8px}.stem-preview-items{display:flex;flex-wrap:wrap;gap:8px}.stem-tag{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:9999px;font-size:.8rem;font-weight:600}.stem-tag-vocals{background:#8b5cf626;color:#a78bfa}.stem-tag-drums{background:#f59e0b26;color:#fbbf24}.stem-tag-bass{background:#3b82f626;color:#93c5fd}.stem-tag-guitar{background:#f9731626;color:#fb923c}.stem-tag-piano{background:#06b6d426;color:#67e8f9}.stem-tag-other{background:#ec489926;color:#f9a8d4}.stem-tag-instrumental{background:#10b98126;color:#6ee7b7}.progress-tracker{text-align:center}.progress-bar-container{display:flex;align-items:center;gap:12px;margin:16px 0}.progress-bar{flex:1;height:10px;background:var(--bg-primary);border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:9999px;transition:width .5s cubic-bezier(.34,1.56,.64,1)}.progress-bar-upload{background:linear-gradient(90deg,var(--accent-1),var(--accent-2))}.progress-bar-processing{background:linear-gradient(90deg,var(--accent-2),var(--accent-3));background-size:200% 100%;animation:shimmer 2s ease-in-out infinite}@keyframes shimmer{0%,to{background-position:0% 0%}50%{background-position:100% 0%}}.progress-text{font-size:.85rem;font-weight:700;color:var(--text-secondary);min-width:44px;font-variant-numeric:tabular-nums}.progress-indeterminate{height:10px;background:var(--bg-primary);border-radius:9999px;overflow:hidden;margin:16px 0}.progress-indeterminate-bar{height:100%;width:40%;background:linear-gradient(90deg,transparent,var(--accent-1),transparent);border-radius:9999px;animation:indeterminate 1.5s ease-in-out infinite}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.progress-status{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-secondary);font-size:.9rem;margin-top:12px}.processing-dot{width:6px;height:6px;background:var(--accent-2);border-radius:50%;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}.progress-file-name{font-size:.85rem;color:var(--text-muted);margin-top:8px}.progress-complete{display:flex;align-items:center;justify-content:center;gap:16px}.checkmark-circle{width:56px;height:56px;border-radius:50%;background:#10b9811f;color:var(--accent-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:checkPop .4s cubic-bezier(.34,1.56,.64,1)}@keyframes checkPop{0%{transform:scale(0)}to{transform:scale(1)}}.error-banner{display:flex;align-items:center;gap:10px;padding:14px 20px;background:#ef44440f;border:1px solid rgba(239,68,68,.15);border-radius:var(--radius-md);color:#f87171;margin-bottom:24px;animation:fadeInUp .3s ease-out}.error-icon{font-size:1.2rem;flex-shrink:0}.error-dismiss{margin-left:auto;color:#f87171;font-size:1.2rem;padding:4px 8px;border-radius:4px;transition:background .2s}.error-dismiss:hover{background:#ef444426}.card-error{text-align:center}.card-error h3{margin-bottom:8px;color:#f87171}.card-error p{color:var(--text-secondary);margin-bottom:16px;font-size:.9rem}.stem-player{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:36px;margin-bottom:24px;animation:fadeInUp .5s cubic-bezier(.34,1.56,.64,1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-glow)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.stem-player-header{text-align:center;margin-bottom:28px}.stem-player-title{font-size:1.4rem;font-weight:800;margin-bottom:6px;font-family:Space Grotesk,sans-serif;letter-spacing:-.02em}.stem-player-subtitle{font-size:.9rem;color:var(--text-secondary)}.mixer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;padding:12px 20px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px}.mixer-bar-left{display:flex;align-items:center;gap:10px}.mixer-bar-right{display:flex;align-items:center;gap:8px}.mixer-hint{font-size:.78rem;color:var(--text-muted)}.btn-mixer{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary);padding:8px 14px;font-size:.82rem;gap:6px;border-radius:8px}.btn-mixer:hover:not(:disabled){border-color:var(--border-active);color:var(--text-primary);background:var(--bg-card-hover)}.btn-mixer-active{background:#ef44441a;border-color:#ef44444d;color:#f87171}.btn-mixer-active:hover:not(:disabled){background:#ef44442e;border-color:#ef444480}.btn-mixer-toggle{border-color:#8b5cf640;color:var(--accent-1)}.btn-mixer-toggle:hover:not(:disabled){border-color:#8b5cf680;background:#8b5cf61a}.mixer-panel{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:20px;margin-bottom:24px;animation:fadeInUp .3s ease-out}.mixer-panel-header{margin-bottom:20px}.mixer-title{font-size:1rem;font-weight:700;margin-bottom:4px}.mixer-desc{font-size:.82rem;color:var(--text-secondary)}.mixer-strips{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.mixer-strip{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--bg-card);border-radius:8px;transition:background .2s}.mixer-strip:hover{background:var(--bg-card-hover)}.mixer-strip-name{font-weight:700;font-size:.82rem;min-width:100px;white-space:nowrap}.mixer-strip-controls{display:flex;align-items:center;gap:12px;flex:1}.mixer-slider-group{display:flex;align-items:center;gap:6px;flex:1}.mixer-slider-label{font-size:.7rem;color:var(--text-muted);font-weight:600;min-width:24px;text-align:center}.mixer-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:4px;background:var(--border-color);border-radius:9999px;outline:none;cursor:pointer;min-width:50px}.mixer-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-1);border:2px solid var(--bg-primary);box-shadow:0 1px 4px #0000004d;cursor:pointer;transition:all .15s}.mixer-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 10px #8b5cf666}.mixer-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent-1);border:2px solid var(--bg-primary);cursor:pointer}.mixer-slider-value{font-size:.7rem;color:var(--text-secondary);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}.mixer-slider-eq{max-width:60px}.mixer-slider-eq .mixer-slider-label{min-width:16px}.mixer-slider-pitch{max-width:70px}.mixer-slider-speed{max-width:80px}.mixer-slider-pitch .mixer-slider-value,.mixer-slider-speed .mixer-slider-value{min-width:42px;font-variant-numeric:tabular-nums}.mixer-slider-pitch .mixer-slider::-webkit-slider-thumb{background:#f472b6}.mixer-slider-pitch .mixer-slider::-moz-range-thumb{background:#f472b6}.mixer-slider-speed .mixer-slider::-webkit-slider-thumb{background:#34d399}.mixer-slider-speed .mixer-slider::-moz-range-thumb{background:#34d399}.mixer-master{display:flex;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--border-color)}.mixer-master-slider{flex:1;display:flex;align-items:center;gap:8px}.mixer-master-slider .mixer-slider-label{font-weight:700;color:var(--text-primary)}@media(max-width:640px){.mixer-strip{flex-direction:column;align-items:stretch}.mixer-strip-name{min-width:auto}.mixer-strip-controls{flex-wrap:wrap}.mixer-master{flex-direction:column}}.stems-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px}.stem-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px;transition:all .25s ease;animation:fadeInUp .4s ease-out both}.stem-card:hover{border-color:var(--stem-color, var(--border-active));box-shadow:0 4px 24px color-mix(in srgb,var(--stem-color, var(--accent-1)) 10%,transparent);transform:translateY(-2px)}.stem-card-muted{opacity:.5;border-color:#ef444433}.stem-card-muted:hover{border-color:#ef444466;box-shadow:0 4px 24px #ef444414}.stem-card-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.stem-card-icon{font-size:1.1rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--stem-color, var(--accent-1)) 12%,transparent);border-radius:8px}.stem-card-name{font-weight:700;font-size:.95rem;flex:1}.mute-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text-muted);transition:all .2s;background:transparent;border:1px solid transparent}.mute-btn:hover{background:#ef44441a;color:#f87171;border-color:#ef444433}.mute-btn-active{background:#ef444426;color:#ef4444;border-color:#ef44444d}.stem-card-actions{display:flex;flex-direction:column;gap:10px}.stem-audio-player{width:100%;height:40px;border-radius:8px;background:var(--bg-card)}.stem-audio-player::-webkit-media-controls-panel{background:var(--bg-card)}.stem-player-footer{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.btn-zip{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:10px;font-size:.85rem;font-weight:700;background:#f59e0b1a;color:#fbbf24;border:1px solid rgba(245,158,11,.25);transition:all .25s ease;letter-spacing:.03em}.btn-zip:hover{background:#f59e0b33;border-color:#f59e0b66;transform:translateY(-1px);box-shadow:0 4px 16px #f59e0b26}.waveform-container{position:relative;width:100%;height:100px;margin-bottom:8px;border-radius:8px;overflow:hidden;background:#00000026}.waveform-canvas{width:100%;height:100%;display:block}.waveform-time{position:absolute;bottom:4px;right:6px;font-size:.65rem;color:var(--text-muted);background:#00000080;padding:1px 6px;border-radius:4px;pointer-events:none}.waveform-loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 20px}.waveform-loading-bar{width:100%;height:3px;background:var(--border-color);border-radius:9999px;overflow:hidden;position:relative}.waveform-loading-bar:after{content:"";position:absolute;left:-40%;width:40%;height:100%;background:var(--accent-1);border-radius:9999px;animation:waveformLoad 1.2s ease-in-out infinite}@keyframes waveformLoad{0%{left:-40%}to{left:100%}}.waveform-error{display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--text-muted)}.stem-card-buttons{display:flex;gap:6px}.stem-card-buttons .btn{flex:1;justify-content:center;padding:8px 12px;font-size:.8rem}.btn-midi{background:#06b6d41a;border:1px solid rgba(6,182,212,.25);color:#67e8f9;display:inline-flex;align-items:center;gap:5px;border-radius:8px;font-weight:600;transition:all .2s ease}.btn-midi:hover:not(:disabled){background:#06b6d433;border-color:#06b6d473;transform:translateY(-1px)}.btn-denoise{background:#10b9811a;border:1px solid rgba(16,185,129,.25);color:#6ee7b7;display:inline-flex;align-items:center;gap:5px;border-radius:8px;font-weight:600;transition:all .2s ease}.btn-denoise:hover:not(:disabled){background:#10b98133;border-color:#10b98173;transform:translateY(-1px);box-shadow:0 4px 16px #10b98126}.stem-player-error{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#ef44440f;border:1px solid rgba(239,68,68,.2);border-radius:10px;color:#f87171;margin-bottom:16px;font-size:.85rem;animation:fadeInUp .25s ease-out}.stem-player-error .error-dismiss{margin-left:auto;color:#f87171;font-size:1.1rem;padding:2px 6px;border-radius:4px;transition:background .2s;cursor:pointer;background:none;border:none;line-height:1}.stem-player-error .error-dismiss:hover{background:#ef444426}.analysis-badges{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;flex-wrap:wrap}.analysis-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;font-size:.88rem;transition:all .3s ease;animation:badgePop .4s cubic-bezier(.34,1.56,.64,1) both}.analysis-badge:nth-child(2){animation-delay:.1s}@keyframes badgePop{0%{opacity:0;transform:scale(.8) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.badge-key{background:linear-gradient(135deg,#8b5cf626,#06b6d41a);border:1px solid rgba(139,92,246,.3)}.badge-key:hover{background:linear-gradient(135deg,#8b5cf640,#06b6d426);border-color:#8b5cf680;transform:translateY(-1px);box-shadow:0 4px 20px #8b5cf626}.badge-bpm{background:linear-gradient(135deg,#ec48991f,#f59e0b1f);border:1px solid rgba(236,72,153,.25)}.badge-bpm:hover{background:linear-gradient(135deg,#ec489938,#f59e0b33);border-color:#ec489973;transform:translateY(-1px);box-shadow:0 4px 20px #ec489926}.badge-icon{font-size:1.05rem;line-height:1}.badge-label{color:var(--text-muted);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.badge-value{font-weight:800;font-size:.95rem;color:var(--text-primary);font-family:Space Grotesk,sans-serif}.badge-confidence{font-size:.7rem;color:var(--text-muted);padding:2px 8px;background:#ffffff0f;border-radius:9999px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.badge-high{color:var(--accent-3);background:#10b98126}.badge-medium{color:var(--accent-2);background:#06b6d426}.badge-low,.badge-unknown{color:var(--text-muted);background:#ffffff0d}.badge-alt{font-size:.7rem;color:var(--text-muted);padding:2px 8px;background:#ffffff0a;border:1px dashed rgba(255,255,255,.1);border-radius:9999px;font-weight:600;letter-spacing:.02em;white-space:nowrap}.analysis-info-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}.analysis-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;background:linear-gradient(135deg,#8b5cf61a,#06b6d414);border:1px solid rgba(139,92,246,.2);border-radius:8px;font-size:.82rem;color:var(--text-secondary);animation:fadeInUp .3s ease-out both}.analysis-chip strong{color:var(--accent-1);font-weight:700}.chip-bpm{background:linear-gradient(135deg,#ec489914,#f59e0b14);border-color:#ec489933}.chip-bpm strong{color:#f472b6}.chip-confidence{font-size:.7rem;color:var(--text-muted);padding:1px 6px;background:#ffffff0f;border-radius:4px}.history-section{margin-bottom:0}.history-title{font-size:.95rem;font-weight:700;margin-bottom:12px;color:var(--text-primary)}.btn-history-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:8px;font-size:.82rem;font-weight:600;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border-color);transition:all .2s ease}.btn-history-toggle:hover{color:var(--text-primary);border-color:var(--border-active);background:var(--bg-card-hover)}.btn-history-toggle-active{background:#8b5cf61a;border-color:#8b5cf64d;color:var(--accent-1)}.history-loading{text-align:center;font-size:.85rem;color:var(--text-muted);padding:12px}.history-empty{text-align:center;font-size:.85rem;color:var(--text-muted);padding:20px;border:1px dashed var(--border-color);border-radius:8px}.history-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}.history-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;transition:all .2s ease}.history-item:hover{border-color:var(--border-active);background:var(--bg-card)}.history-item-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.history-status-icon{font-size:.9rem;flex-shrink:0}.history-item-info{display:flex;flex-direction:column;gap:1px;min-width:0}.history-filename{font-size:.82rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-meta{font-size:.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-date{font-size:.65rem;color:var(--text-muted)}.history-item-actions{display:flex;gap:4px;flex-shrink:0}.btn-history{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;font-size:.72rem;font-weight:600;transition:all .2s ease;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border-color);text-decoration:none}.btn-history:hover{color:var(--accent-1);border-color:#8b5cf64d;background:#8b5cf614}.btn-history-zip{color:#fbbf24;border-color:#f59e0b33}.btn-history-zip:hover{border-color:#f59e0b66;background:#f59e0b1a;color:#fbbf24}.history-error-text{font-size:.72rem;color:#f87171;padding:5px 10px}.history-completed{border-left:3px solid var(--accent-3)}.history-failed{border-left:3px solid #ef4444;opacity:.7}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:48px}.feature-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:28px 24px;transition:all .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.feature-card:hover{border-color:var(--border-active);transform:translateY(-3px);box-shadow:0 8px 30px #8b5cf60f}.feature-icon{font-size:1.6rem;margin-bottom:12px;display:inline-block;padding:8px;background:#8b5cf614;border-radius:10px}.feature-card h3{font-size:.95rem;font-weight:700;margin-bottom:8px}.feature-card p{font-size:.85rem;color:var(--text-secondary);line-height:1.6}.queue-info-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 20px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;margin:16px 0;animation:fadeInUp .3s ease-out}.queue-position-badge{display:flex;flex-direction:column;align-items:center;gap:2px}.queue-position-number{font-size:3rem;font-weight:900;font-family:Space Grotesk,sans-serif;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;letter-spacing:-.03em}.queue-position-label{font-size:.8rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.queue-description{font-size:.82rem;color:var(--text-secondary);line-height:1.5;max-width:360px;text-align:center}.processing-mode-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}.toggle-label{font-size:.85rem;font-weight:600;color:var(--text-secondary)}.toggle-group{display:flex;gap:4px;background:var(--bg-primary);padding:3px;border-radius:10px;border:1px solid var(--border-color)}.toggle-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:.78rem;font-weight:600;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:all .2s ease;white-space:nowrap}.toggle-btn:hover{color:var(--text-secondary)}.toggle-btn-active{background:#8b5cf61f;color:var(--accent-1);box-shadow:0 1px 4px #0000001a}.toggle-btn-active:hover{color:var(--accent-1);background:#8b5cf62e}.model-manager{background:linear-gradient(135deg,#8b5cf60a,#06b6d408);border:1px solid rgba(139,92,246,.15);border-radius:var(--radius-lg);padding:20px 24px;animation:fadeInUp .3s ease-out;transition:border-color .3s ease}.model-manager:hover{border-color:#8b5cf64d}.model-manager-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap}.model-manager-title-row{display:flex;align-items:center;gap:8px}.model-manager-icon{font-size:1.1rem}.model-manager-title{font-weight:700;font-size:.95rem;color:var(--text-primary)}.model-manager-badges{display:flex;align-items:center;gap:8px}.model-manager-cache-badge{font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:9999px;background:#10b9811a;color:#6ee7b7;border:1px solid rgba(16,185,129,.2);white-space:nowrap}.model-manager-loading-badge{font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:9999px;background:#8b5cf61a;color:var(--accent-1);border:1px solid rgba(139,92,246,.2);animation:pulse 1.2s ease-in-out infinite}.model-manager-desc{font-size:.8rem;color:var(--text-muted);margin-bottom:14px;line-height:1.5}.model-manager-grid{display:flex;flex-direction:column;gap:6px}.model-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;transition:all .2s ease}.model-card:hover{border-color:var(--border-active);background:var(--bg-card)}.model-card-cached{border-color:#10b98126;background:#10b98108}.model-card-cached:hover{border-color:#10b98159;background:#10b9810f}.model-card-downloading{border-color:#06b6d44d;background:#06b6d40a}.model-card-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.model-card-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:all .3s ease}.dot-cached{background:var(--accent-3);box-shadow:0 0 8px #10b98166}.dot-downloading{background:var(--accent-2);animation:pulse .8s ease-in-out infinite}.dot-missing{background:var(--text-muted);opacity:.4}.model-card-info{display:flex;flex-direction:column;gap:1px;min-width:0}.model-card-name{font-size:.85rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px;white-space:nowrap}.model-card-6s-badge{font-size:.6rem;font-weight:800;padding:1px 6px;border-radius:4px;background:linear-gradient(135deg,#f59e0b33,#ec489926);color:#fbbf24;text-transform:uppercase;letter-spacing:.05em;border:1px solid rgba(245,158,11,.2)}.model-card-stem-icon{font-size:.9rem}.model-card-size{font-size:.7rem;color:var(--text-muted)}.model-card-right{flex-shrink:0;display:flex;align-items:center;gap:8px}.model-card-progress-wrap{display:flex;align-items:center;gap:8px;min-width:100px}.model-card-progress-bar{flex:1;height:5px;background:var(--bg-card);border-radius:9999px;overflow:hidden}.model-card-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));border-radius:9999px;transition:width .3s ease}.model-card-progress-text{font-size:.72rem;font-weight:700;color:var(--accent-2);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}.model-card-status-text{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600;white-space:nowrap}.model-card-status-cached{color:var(--accent-3)}.btn-model-download{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:8px;font-size:.75rem;font-weight:600;color:var(--accent-1);background:#8b5cf614;border:1px solid rgba(139,92,246,.2);cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-model-download:hover:not(:disabled){background:#8b5cf629;border-color:#8b5cf666;color:var(--accent-1)}.btn-model-download:disabled{opacity:.5;cursor:not-allowed}.model-manager-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color);flex-wrap:wrap}.model-manager-cache-info{font-size:.78rem;color:var(--text-secondary);font-weight:500}.btn-clear-cache{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:8px;font-size:.72rem;font-weight:600;color:#f87171;background:#ef44440f;border:1px solid rgba(239,68,68,.15);cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-clear-cache:hover:not(:disabled){background:#ef444424;border-color:#ef444459}.btn-clear-cache:disabled{opacity:.5;cursor:not-allowed}.model-manager-note{font-size:.7rem;color:var(--text-muted);font-style:italic;margin-top:10px;line-height:1.5}.client-progress{text-align:center}.client-progress-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}.client-progress-header .section-title{margin-bottom:0;display:flex;align-items:center;gap:8px}.progress-icon{font-size:1.1rem}.btn-cancel{padding:5px 12px;border-radius:6px;font-size:.75rem;font-weight:600;color:#f87171;background:#ef444414;border:1px solid rgba(239,68,68,.2);cursor:pointer;transition:all .2s ease}.btn-cancel:hover{background:#ef44442e;border-color:#ef444466}.client-progress-info{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:6px}.progress-detail{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-secondary);font-weight:500}.progress-detail-icon{font-size:.9rem}.progress-hint{font-size:.72rem;color:var(--text-muted);margin-top:8px;font-style:italic}.progress-bar-indeterminate{background:linear-gradient(90deg,var(--accent-2),var(--accent-3));background-size:200% 100%}.progress-bar-download{background:linear-gradient(90deg,var(--accent-1),var(--accent-4, #06b6d4));background-size:200% 100%}.footer{border-top:1px solid var(--border-color);padding:24px 0;text-align:center}.footer p{font-size:.8rem;color:var(--text-muted)}.skeleton-box{background:linear-gradient(90deg,var(--bg-card) 25%,rgba(139,92,246,.08) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s ease-in-out infinite;border-radius:8px}@keyframes skeletonShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.stem-player-skeleton{pointer-events:none}.stem-card-skeleton{border-color:var(--border-color)!important}.stem-card-skeleton .stem-card-header{display:flex;align-items:center;gap:10px}.error-boundary{background:var(--bg-card);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-xl);padding:48px 32px;text-align:center;margin-bottom:24px;animation:fadeInUp .3s ease-out}.error-boundary-icon{font-size:3rem;margin-bottom:16px}.error-boundary-title{font-size:1.3rem;font-weight:700;margin-bottom:8px;color:#f87171}.error-boundary-message{color:var(--text-secondary);font-size:.9rem;margin-bottom:20px;max-width:400px;margin-left:auto;margin-right:auto}.dashboard{margin-bottom:0}.dashboard-title{font-size:1rem;font-weight:700;margin-bottom:16px;color:var(--text-primary)}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:20px}.dashboard-stat-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;transition:all .2s ease}.dashboard-stat-card:hover{border-color:var(--border-active);transform:translateY(-1px)}.dash-card-success{border-left:3px solid var(--accent-3)}.dash-card-fail{border-left:3px solid #ef4444}.dash-card-info{border-left:3px solid var(--accent-1)}.dash-stat-label{font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.dash-stat-value{font-size:1.4rem;font-weight:800;color:var(--text-primary);font-family:Space Grotesk,sans-serif;font-variant-numeric:tabular-nums}.dashboard-error{padding:24px;text-align:center;color:var(--text-muted);font-size:.85rem}.dashboard-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.dashboard-stat-skeleton{pointer-events:none}.dashboard-stem-modes{margin-top:12px}.dash-subtitle{font-size:.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:10px}.dash-bar-chart{display:flex;flex-direction:column;gap:6px}.dash-bar-item{display:flex;align-items:center;gap:10px}.dash-bar-label{font-size:.78rem;font-weight:600;color:var(--text-secondary);min-width:70px;text-align:right}.dash-bar-track{flex:1;height:20px;background:var(--bg-card);border-radius:9999px;overflow:hidden}.dash-bar-fill{height:100%;background:var(--gradient-main);border-radius:9999px;transition:width .5s cubic-bezier(.34,1.56,.64,1);min-width:4px}.dash-bar-count{font-size:.78rem;font-weight:700;color:var(--text-muted);min-width:30px;text-align:right;font-variant-numeric:tabular-nums}.history-toggle-bar{display:flex;justify-content:center;gap:8px;margin-bottom:16px}.history-toggle-bar:empty{display:none}.model-manager-global-progress{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:8px 14px;background:#06b6d40a;border:1px solid rgba(6,182,212,.15);border-radius:10px}.model-manager-global-progress-bar{flex:1;height:6px;background:var(--bg-card);border-radius:9999px;overflow:hidden}.model-manager-global-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));border-radius:9999px;transition:width .3s ease}.model-manager-global-progress-text{font-size:.75rem;font-weight:600;color:var(--accent-2);white-space:nowrap;font-variant-numeric:tabular-nums}.btn-download-all{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;font-size:.82rem;font-weight:700;color:#fff;background:var(--gradient-main);border:none;cursor:pointer;transition:all .25s ease;margin-bottom:10px;box-shadow:0 2px 10px #8b5cf633}.btn-download-all:hover{transform:translateY(-1px);box-shadow:0 4px 16px #8b5cf64d}.btn-download-all:active{transform:translateY(0)}.model-card-cancel-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:var(--text-muted);background:#ef444414;border:1px solid rgba(239,68,68,.2);cursor:pointer;transition:all .2s ease;flex-shrink:0}.model-card-cancel-btn:hover{color:#ef4444;background:#ef44442e;border-color:#ef444466}.model-card-queued{border-color:#f59e0b40;background:#f59e0b08}.model-card-queued-wrap{display:flex;align-items:center;gap:6px}.model-card-queued-text{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;color:#fbbf24;white-space:nowrap}.queued-dot{width:6px;height:6px;border-radius:50%;background:#fbbf24;animation:pulse 1s ease-in-out infinite}.dot-queued{background:#fbbf24;opacity:.8}.model-card-status-cancelling{color:var(--text-muted);font-style:italic}.model-manager-downloading-badge{font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:9999px;background:#06b6d41a;color:#67e8f9;border:1px solid rgba(6,182,212,.2);animation:pulse 1.2s ease-in-out infinite}.trim-panel{animation:fadeInUp .3s ease-out}.trim-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}.trim-title-row{display:flex;align-items:center;gap:8px}.trim-icon{font-size:1.1rem}.trim-label{font-weight:700;font-size:.95rem;color:var(--text-primary)}.trim-badge{font-size:.7rem;font-weight:600;padding:2px 10px;border-radius:9999px;background:#f59e0b1f;color:#fbbf24;border:1px solid rgba(245,158,11,.2);font-variant-numeric:tabular-nums}.trim-toggle-group{display:flex;gap:6px}.trim-toggle{font-size:.78rem;padding:6px 14px;border-radius:8px;font-weight:600;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary);transition:all .2s ease;cursor:pointer}.trim-toggle:hover{border-color:var(--border-active);color:var(--text-primary)}.trim-toggle-on{background:#f59e0b1a;border-color:#f59e0b4d;color:#fbbf24}.trim-toggle-on:hover{background:#f59e0b2e;border-color:#f59e0b80}.trim-reset{font-size:.72rem;padding:6px 10px;border-radius:8px;font-weight:600;background:transparent;border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;transition:all .2s ease}.trim-reset:hover{color:var(--accent-3);border-color:#10b9814d;background:#10b9810f}.trim-loading{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 20px}.trim-loading-text{font-size:.82rem;color:var(--text-muted)}.trim-error{padding:12px 16px;background:#ef44440f;border:1px solid rgba(239,68,68,.15);border-radius:8px;color:#f87171;font-size:.85rem}.trim-canvas-wrap{position:relative;width:100%;height:80px;border-radius:10px;overflow:hidden;background:#0a0a12;border:1px solid var(--border-color);transition:border-color .2s ease;user-select:none;-webkit-user-select:none;touch-action:none}.trim-canvas-active{border-color:#f59e0b4d}.trim-canvas-active:hover{border-color:#f59e0b80}.trim-canvas-dragging{border-color:#f59e0b}.trim-canvas{width:100%;height:100%;display:block;pointer-events:none}.trim-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a0a12b3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--text-muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s ease}.trim-overlay:hover{background:#0a0a1280;color:var(--text-secondary)}.trim-handle-hints{display:none}.trim-info{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}.trim-info-duration{font-size:.78rem;color:var(--text-secondary);font-weight:600}.trim-info-save{font-size:.72rem;color:var(--accent-3);background:#10b98114;padding:3px 10px;border-radius:9999px;font-weight:600}.trim-duration-bar{margin-top:10px}.trim-duration-track{position:relative;height:4px;background:var(--border-color);border-radius:9999px;overflow:hidden}.trim-duration-fill{position:absolute;top:0;height:100%;background:var(--gradient-main);border-radius:9999px;transition:left .15s ease,width .15s ease}.trim-duration-labels{display:flex;justify-content:space-between;margin-top:3px;font-size:.65rem;color:var(--text-muted);font-variant-numeric:tabular-nums}@media(max-width:640px){.trim-header{flex-direction:column;align-items:flex-start}.trim-canvas-wrap{height:60px}}.dashboard-header,.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.dashboard-header .dashboard-title,.history-header .history-title{margin-bottom:0}.btn-refresh{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:.78rem;font-weight:600;color:var(--text-secondary);background:var(--bg-primary);border:1px solid var(--border-color);cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-refresh:hover:not(:disabled){color:var(--accent-1);border-color:#8b5cf64d;background:#8b5cf60f}.btn-refresh:disabled{cursor:wait;opacity:.6}.btn-refresh svg{flex-shrink:0;transition:transform .3s ease}.btn-refresh svg.spin{animation:refreshSpin .8s linear infinite}@keyframes refreshSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #07070d;--bg-secondary: #0d0d1a;--bg-card: rgba(22, 22, 40, .75);--bg-card-hover: rgba(30, 30, 55, .85);--border-color: rgba(60, 60, 100, .25);--border-active: rgba(139, 92, 246, .4);--text-primary: #eeeef5;--text-secondary: #9898b8;--text-muted: #5a5a78;--accent-1: #8B5CF6;--accent-2: #06B6D4;--accent-3: #10B981;--accent-4: #EC4899;--gradient-main: linear-gradient(135deg, #8B5CF6, #06B6D4);--gradient-text: linear-gradient(135deg, #a78bfa, #22d3ee);--gradient-warm: linear-gradient(135deg, #EC4899, #F59E0B);--shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, .6);--shadow-glow: 0 0 40px rgba(139, 92, 246, .08);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(139,92,246,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0}body:after{content:"";position:fixed;top:-30%;right:-20%;width:80vmax;height:80vmax;background:radial-gradient(circle,rgba(139,92,246,.06) 0%,transparent 70%);pointer-events:none;z-index:0;animation:ambientFloat 20s ease-in-out infinite alternate}@keyframes ambientFloat{0%{transform:translate(0) scale(1)}50%{transform:translate(-5%,3%) scale(1.05)}to{transform:translate(3%,-5%) scale(.95)}}#root{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}a{color:inherit;text-decoration:none}button{border:none;background:none;cursor:pointer;font-family:inherit}input,audio{font-family:inherit}.container{width:100%;max-width:960px;margin:0 auto;padding:0 24px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#8b5cf633;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#8b5cf666}