@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap";:root{font-family:Space Grotesk,Segoe UI,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:dark;--bg: #060917;--bg-accent: radial-gradient(circle at 20% 20%, rgba(87, 100, 255, .3), transparent 55%), radial-gradient(circle at 80% 0%, rgba(255, 105, 180, .15), transparent 45%), linear-gradient(120deg, #050510, #090c1a 60%, #050510);--surface: rgba(13, 17, 40, .76);--surface-alt: rgba(255, 255, 255, .02);--surface-border: rgba(255, 255, 255, .08);--text-strong: #f7f8fb;--text-muted: rgba(247, 248, 251, .64);--text-soft: rgba(247, 248, 251, .48);--accent: #7f8bff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg-accent);color:var(--text-muted)}#root{min-height:100vh}a{color:inherit}button{font-family:inherit;border-radius:12px;border:none;padding:12px 16px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}button:hover{transform:translateY(-1px);box-shadow:0 10px 30px #0003}@keyframes pulse{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.app-shell{width:min(1100px,100%);margin:0 auto;padding:56px 24px 80px;display:flex;flex-direction:column;gap:32px}.hero{display:flex;flex-direction:column;gap:12px}.hero h1{font-size:clamp(2.5rem,4vw,3.1rem);margin:0;color:var(--text-strong)}.hero p{margin:0;color:var(--text-muted);max-width:720px}.eyebrow{font-size:.85rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-soft);margin:0 0 6px}.alert{background:#ff61611f;border:1px solid rgba(255,97,97,.4);color:#ff6b6b;padding:12px 16px;border-radius:12px;font-size:.95rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.card{background:var(--surface);border:1px solid var(--surface-border);border-radius:16px;padding:24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.card h2{margin:0 0 16px}.status-card{display:flex;flex-direction:column;gap:12px}.status-heading{display:flex;justify-content:space-between;align-items:center}.status-pill{padding:6px 14px;border-radius:999px;font-size:.85rem;font-weight:600;border:1px solid transparent}.status-pill.is-pending{background:#ffcb601f;color:#ffcb60;border-color:#ffcb6080}.status-pill.is-running{background:#6098ff1f;color:#7fb0ff;border-color:#6098ff66}.status-pill.is-completed{background:#62ffc21f;color:#73f0c9;border-color:#62ffc266}.status-pill.is-error{background:#ff78781f;color:#ff8c8c;border-color:#ff787866}.job-title{margin:0;color:var(--text-strong)}.faded{color:var(--text-muted);margin:0}.badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:4px 10px;border-radius:999px;border:1px solid var(--surface-border);color:var(--text-muted);background:#ffffff08}.badge.ghost{border-style:dashed;color:var(--text-soft)}.empty-state{margin-top:12px;padding:18px;background:var(--surface-alt);border-radius:12px;color:var(--text-muted)}.timeline{margin-top:12px;display:flex;flex-direction:column;gap:10px}.timeline-step{display:flex;justify-content:space-between;gap:12px;font-size:.95rem}.timeline-step strong{color:var(--text-strong)}.state{display:flex;align-items:center;gap:6px;color:var(--text-muted)}.loading-halo{width:6px;height:6px;border-radius:999px;background:var(--accent);animation:pulse 1.4s ease-in-out infinite}.upload-area{border:1px dashed var(--surface-border);border-radius:14px;padding:32px 24px;text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease}.upload-area:hover{border-color:var(--accent);background:#6373ff14}.upload-tabs{display:flex;gap:8px;margin-bottom:16px;border-bottom:1px solid var(--surface-border)}.upload-tabs .tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease;font-size:.95rem}.upload-tabs .tab:hover{color:var(--text-strong);background:#ffffff08}.upload-tabs .tab.active{color:var(--accent);border-bottom-color:var(--accent)}.upload-tabs .tab:disabled{opacity:.5;cursor:not-allowed}.youtube-form{display:flex;flex-direction:column;gap:12px;padding:16px 0}.youtube-input{padding:14px 16px;border:1px solid var(--surface-border);border-radius:12px;background:var(--surface-alt);color:var(--text-strong);font-size:.95rem;transition:border-color .2s ease}.youtube-input:focus{outline:none;border-color:var(--accent)}.youtube-input::placeholder{color:var(--text-soft)}.youtube-input:disabled{opacity:.5;cursor:not-allowed}.faixas-section{display:flex;flex-direction:column;gap:18px}.multitrack-player{background:var(--surface);border:1px solid var(--surface-border);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:20px}.transport-bar{display:flex;align-items:center;gap:16px;padding:16px;background:var(--surface-alt);border-radius:12px;border:1px solid var(--surface-border)}.transport-buttons{display:flex;gap:10px;align-items:center}.transport-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),rgba(127,139,255,.8));border:none;border-radius:50%;color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;flex-shrink:0}.transport-btn svg{width:24px;height:24px;stroke:currentColor;fill:none}.transport-btn:hover{transform:scale(1.05);box-shadow:0 0 20px #7f8bff80}.transport-btn:active{transform:scale(.95)}.transport-btn-stop{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff616126,#dc3c3c26);border:2px solid rgba(255,97,97,.3);border-radius:10px;color:#ff8080;cursor:pointer;transition:all .25s ease;flex-shrink:0;box-shadow:0 2px 8px #ff61611a}.transport-btn-stop svg{width:18px;height:18px;stroke:none;fill:currentColor}.transport-btn-stop:hover{background:linear-gradient(135deg,#ff616140,#dc3c3c40);border-color:#ff616199;color:#ff6b6b;transform:translateY(-2px);box-shadow:0 4px 16px #ff61614d}.transport-btn-stop:active{transform:translateY(0);box-shadow:0 2px 8px #ff616133}.timeline-container{flex:1;display:flex;align-items:center;gap:12px}.time-display{font-size:.9rem;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:45px}.timeline-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent) 0%,var(--accent) 0%,var(--surface-border) 0%);border-radius:3px;outline:none;cursor:pointer}.timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 8px #0000004d;transition:transform .2s ease}.timeline-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.timeline-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 8px #0000004d}.tracks-container{display:flex;flex-direction:column;gap:0}.track-row{display:flex;flex-direction:column;gap:12px;padding:16px;background:linear-gradient(135deg,#0f1428e6,#0c1022b3);border:1px solid rgba(255,255,255,.04);border-radius:12px;transition:border-color .2s ease}.track-row.is-processing{border-color:#7f8bff80;box-shadow:0 0 20px #7f8bff33}.track-header{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}.track-info{display:flex;flex-direction:column;gap:6px;min-width:150px}.track-name{font-size:1.1rem;font-weight:700;color:var(--text-strong);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-meta{display:flex;gap:6px;flex-wrap:wrap}.track-controls-inline{display:flex;align-items:center;gap:12px;min-width:250px;flex-shrink:0}.control-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:6px;color:var(--text-muted);cursor:pointer;transition:all .2s ease;font-size:.85rem;font-weight:600;flex-shrink:0;padding:0}.control-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;display:block}.control-btn:hover{background:var(--surface);color:var(--text-strong);border-color:var(--text-soft)}.control-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.volume-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--surface-border);border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}.volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.waveform-container{flex:1;min-width:0;height:80px;background:#090c1af2;border:1px solid rgba(255,255,255,.06);border-radius:8px;overflow:hidden;position:relative}.waveform-canvas{width:100%;height:100%;display:block}.track-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.btn-primary-small{padding:8px 16px;background:linear-gradient(135deg,var(--accent),rgba(127,139,255,.8));border:none;border-radius:8px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.btn-primary-small:hover{transform:translateY(-2px);box-shadow:0 4px 12px #7f8bff66}.btn-primary-small:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary-small{padding:8px 16px;background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:8px;color:var(--text-muted);font-size:.85rem;text-decoration:none;transition:all .2s ease;display:inline-block}.btn-secondary-small:hover{background:var(--surface);color:var(--text-strong)}.transcript-links{display:flex;gap:8px}.link-artifact{padding:6px 12px;background:#73f0c91f;border:1px solid rgba(115,240,201,.3);border-radius:6px;color:#73f0c9;font-size:.8rem;text-decoration:none;transition:all .2s ease;font-weight:600}.link-artifact:hover{background:#73f0c933;border-color:#73f0c9}.section-header{display:flex;justify-content:space-between;align-items:center}.section-header h2{margin:0}.faixas-list{display:flex;flex-direction:column;gap:18px}.track-row{display:flex;gap:18px;background:linear-gradient(135deg,#0f1428e6,#0c1022b3);border:1px solid rgba(255,255,255,.04);border-radius:18px;padding:20px;box-shadow:0 15px 25px #00000040;position:relative;overflow:hidden}.track-row:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.04) 0,transparent 20%,transparent 80%,rgba(255,255,255,.04));pointer-events:none}.track-row.is-processing{border-color:#7f8bff80;box-shadow:0 20px 35px #7f8bff33}.track-sidebar{width:220px;display:flex;flex-direction:column;gap:8px;position:relative;padding-left:18px}.track-sidebar:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:999px;background:linear-gradient(180deg,#7f8bffe6,#73f0c999);box-shadow:0 0 18px #7f8bff66}.track-labels{display:flex;flex-direction:column;gap:6px}.faixa-name{font-size:1.3rem;font-weight:700;letter-spacing:.04em;color:var(--text-strong);margin:0;text-transform:uppercase}.meta-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.badge.subtle{border-style:dashed;color:var(--text-soft)}.badge.success{border-color:#73f0c966;color:#73f0c9;background:#73f0c91f}.track-content{flex:1;display:flex;flex-direction:column;gap:14px}.wave-wrapper{position:relative;border-radius:14px;border:1px solid rgba(255,255,255,.04);background:#090c1aa6;padding:18px;overflow:hidden}.wave-grid{position:absolute;inset:0;background-image:linear-gradient(transparent,transparent 94%,rgba(255,255,255,.04)),repeating-linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 1px,transparent 1px,transparent 32px);opacity:.6}.audio-inline{position:relative;width:100%;z-index:1;background:transparent;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}.track-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.track-controls .primary{min-width:180px}.track-controls .secondary{border:1px solid var(--surface-border);color:var(--text-muted);padding:12px 16px;border-radius:12px;text-decoration:none}.track-controls button,.track-controls a{flex:0 0 auto;text-align:center}.download-links{display:flex;gap:12px;align-items:center;font-size:.9rem}.download-links a{color:var(--accent);text-decoration:none}.placeholder{text-align:center;color:var(--text-muted)}@media(max-width:640px){.app-shell{padding:32px 16px 60px}.section-header{flex-direction:column;align-items:flex-start;gap:8px}.track-row{flex-direction:column}.track-sidebar{width:100%}}.app-shell{animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.phase-upload{min-height:100vh;display:flex;align-items:center;justify-content:center}.upload-phase-container{width:100%;max-width:560px;display:flex;flex-direction:column;gap:32px;animation:slideUp .8s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.hero-centered{text-align:center}.hero-centered h1{font-size:clamp(2.2rem,5vw,3rem);margin:8px 0 12px;color:var(--text-strong)}.hero-centered .subtitle{color:var(--text-muted);font-size:1rem;margin:0}.phase-processing{min-height:100vh;display:flex;align-items:center;justify-content:center}.processing-container{width:100%;max-width:680px;display:flex;flex-direction:column;gap:24px}.processing-header{text-align:center}.processing-header h1{font-size:clamp(2rem,4vw,2.8rem);margin:0 0 12px;color:var(--text-strong)}.motivational{font-size:1.1rem;color:var(--accent);margin:0;font-weight:500}.processing-card{display:flex;flex-direction:column;gap:20px}.progress-bar-container{display:flex;align-items:center;gap:16px}.progress-bar{flex:1;height:12px;background:#7f8bff1a;border-radius:999px;overflow:hidden;border:1px solid rgba(127,139,255,.2)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent) 0%,#a78bfa 100%);border-radius:999px;transition:width .5s ease-out;box-shadow:0 0 12px #7f8bff80}.progress-text{font-size:.95rem;font-weight:600;color:var(--accent);min-width:48px;text-align:right}.phase-ready{padding-top:40px}.hero-inline{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}.hero-content h1{font-size:clamp(1.8rem,3vw,2.4rem);margin:8px 0 6px;color:var(--text-strong)}.hero-content .subtitle{color:var(--text-muted);margin:0}.expiry-timer{color:var(--accent);font-weight:600;font-size:.95em;animation:pulse-subtle 2s ease-in-out infinite}@keyframes pulse-subtle{0%,to{opacity:1}50%{opacity:.7}}.mixer-section{width:100%}.btn-secondary{padding:12px 24px;border-radius:12px;font-size:.95rem;font-weight:600;border:2px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-secondary:hover{background:#7f8bff1a;transform:translateY(-1px)}.btn-secondary:active{transform:translateY(0)}@media(max-width:640px){.hero-inline{flex-direction:column;align-items:flex-start}.btn-secondary{width:100%}}.track-row-pro{display:flex;gap:12px;background:transparent;border:none;border-bottom:1px solid rgba(127,139,255,.12);padding:8px 0;transition:all .3s ease;position:relative}.track-row-pro:first-child{padding-top:0}.track-row-pro:last-child{border-bottom:none;padding-bottom:0}.track-row-pro:hover{background:#1e233c26}.track-row-pro.is-processing{background:#7f8bff14;border-bottom-color:#7f8bff4d;animation:pulse 2s infinite}.track-controls-left{display:flex;flex-direction:column;gap:14px;min-width:220px;max-width:220px}.track-header-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}.track-name-pro{font-size:.9rem;font-weight:600;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.track-actions-compact{display:flex;gap:5px;align-items:center;flex-shrink:0}.volume-control-full{display:flex;align-items:center;gap:6px;width:100%}.menu-dropdown{position:relative}.menu-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#7f8bff1a;border:1px solid rgba(127,139,255,.2);border-radius:7px;color:var(--text-strong);cursor:pointer;transition:all .2s ease;padding:0}.menu-btn svg{flex-shrink:0}.menu-btn:hover:not(:disabled){background:#7f8bff33;border-color:#7f8bff66}.menu-btn.is-loading{background:#7f8bff26;border-color:#7f8bff66;cursor:not-allowed}.menu-btn:disabled{opacity:.7;cursor:not-allowed}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.menu-backdrop{position:fixed;inset:0;z-index:10}.menu-content{position:absolute;top:100%;left:0;margin-top:4px;min-width:180px;background:#14192dfa;border:1px solid rgba(127,139,255,.3);border-radius:10px;padding:6px;z-index:20;box-shadow:0 8px 24px #0006;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.menu-item{display:block;width:100%;padding:10px 14px;background:transparent;border:none;color:var(--text-strong);text-align:left;font-size:.9rem;border-radius:6px;cursor:pointer;transition:all .15s ease;text-decoration:none}.menu-item:hover:not(:disabled){background:#7f8bff26;color:var(--accent)}.menu-item:disabled{opacity:.5;cursor:not-allowed}.menu-divider{height:1px;background:#7f8bff33;margin:6px 0}.control-btn-pro{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#7f8bff1a;border:1px solid rgba(127,139,255,.2);border-radius:7px;color:var(--text-strong);cursor:pointer;transition:all .2s ease;font-size:12px;font-weight:700;padding:0}.control-btn-pro svg{flex-shrink:0}.control-btn-pro:hover{background:#7f8bff33;border-color:#7f8bff66;transform:translateY(-1px)}.control-btn-pro.active{background:#ff616133;border-color:#ff616180;color:#ff6b6b}.control-btn-pro.control-btn-solo.active{background:linear-gradient(135deg,gold,#ff8c00);border-color:#ff8c00;color:#000}.volume-control-full .volume-slider-pro{flex:1;min-width:0}.volume-slider-pro{width:100%;height:6px;background:#7f8bff26;border-radius:999px;outline:none;cursor:pointer;-webkit-appearance:none}.volume-slider-pro::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:linear-gradient(135deg,var(--accent) 0%,#a78bfa 100%);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #7f8bff80;transition:all .2s ease}.volume-slider-pro::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px #7f8bffb3}.volume-slider-pro::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(135deg,var(--accent) 0%,#a78bfa 100%);border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #7f8bff80;transition:all .2s ease}.volume-slider-pro::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px #7f8bffb3}.volume-label{font-size:.7rem;color:var(--text-muted);min-width:34px;text-align:right;font-weight:600}.player-actions-container{margin-top:16px;padding:0;display:flex;justify-content:center;align-items:center;gap:16px}.download-mix-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#7f8bff26,#7f8bff14);border:1px solid rgba(127,139,255,.3);border-radius:8px;color:var(--text-strong);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease}.download-mix-btn:hover:not(:disabled){background:linear-gradient(135deg,#7f8bff40,#7f8bff26);border-color:#7f8bff80;transform:translateY(-1px);box-shadow:0 4px 12px #7f8bff33}.download-mix-btn:disabled{opacity:.6;cursor:not-allowed}.download-mix-btn .spinner{animation:spin 1s linear infinite}.reset-tracks-btn{padding:0;background:transparent;border:none;color:var(--text-muted);font-size:.75rem;font-weight:500;cursor:pointer;transition:color .2s ease}.reset-tracks-btn:hover{color:var(--text-strong)}.track-waveform-right{flex:1;min-height:80px;background:#090c1a66;border:1px solid rgba(127,139,255,.08);border-radius:8px;overflow:hidden}.track-waveform-right canvas{width:100%;height:100%;display:block}@media(max-width:768px){.track-row-pro{flex-direction:column}.track-controls-left{max-width:100%}.track-waveform-right{min-height:60px}}.job-history{background:var(--surface-2)}.job-history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.job-history-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--text-strong)}.job-history-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;margin:0 -16px;border-radius:8px;transition:all .2s ease;gap:12px}.job-history-item:hover{background:var(--surface-3)}.job-history-item.active{background:#8b5cf61a;border-left:3px solid var(--primary);padding-left:13px}.job-history-item-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.job-history-item-title{font-size:.9rem;font-weight:500;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.job-history-item-meta{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--text-muted)}.job-history-item-actions{display:flex;align-items:center;gap:8px}.icon-button{background:none;border:none;padding:6px;cursor:pointer;color:var(--text-muted);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.icon-button:hover{background:var(--surface-4);color:var(--text-strong)}.chevron{color:var(--text-soft);transition:transform .2s ease}.job-history-item:hover .chevron{transform:translate(2px)}.active-badge{background:#8b5cf633;color:var(--primary)}@media(max-width:768px){.job-history-item-title{font-size:.85rem}.job-history-item{padding:10px 12px}}
