:root{--vf-primary:#ffbd00;--vf-primary-glow:#ffbd0066;--vf-secondary:#00d1ff;--vf-bg-glass:#ffffff08;--vf-border-glass:#ffffff14;--vf-card-bg:#0d0d0dcc;--vf-card-shadow:0 8px 32px 0 #0000005e;--vf-surface-subtle:#ffffff0d;--vf-text-muted:#9ca3af;--vf-border-strong:#4b556399}[data-theme=light]{--vf-bg-glass:#00000008;--vf-border-glass:#00000014;--vf-card-bg:#fffc;--vf-card-shadow:0 8px 32px 0 #1f26871a;--vf-surface-subtle:#0000000d;--vf-text-muted:#64748b;--vf-border-strong:#cbd5e1cc}.vocal-fit-page{transition:background-color .3s}.vf-error-container{background:var(--error-bg);border:1px solid var(--error-border,#ef444433);color:var(--error);border-radius:12px;margin-bottom:24px;padding:16px;font-size:.875rem}.vf-match-card{background:var(--vf-card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--vf-border-glass);cursor:pointer;border-radius:16px;flex-direction:column;padding:16px;transition:all .3s;display:flex}.vf-match-card:hover{border-color:var(--vf-primary-glow);transform:translateY(-2px)}.vf-match-card.active{border-color:var(--vf-primary);box-shadow:0 0 15px var(--vf-primary-glow);background:var(--vf-surface-subtle)}.vf-mc-waveform-container{background:var(--vf-surface-subtle);border:1px solid var(--vf-border-glass);border-radius:8px;align-items:center;height:64px;margin-bottom:16px;padding:0 4px;display:flex;overflow:hidden}.vf-mc-title{color:var(--text-primary);font-size:1rem;font-weight:700}.vf-mc-artist{color:var(--vf-text-muted);font-size:.875rem}.vf-mc-actions{gap:12px;display:flex}.vf-btn-outline{border:1px solid var(--vf-border-glass);color:var(--text-primary);cursor:pointer;background:0 0;border-radius:8px;flex:1;padding:8px 16px;font-weight:600;transition:all .2s}.vf-btn-outline:hover{background:var(--vf-surface-subtle);border-color:var(--vf-primary)}.vf-placement-editor{background:var(--vf-card-bg);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--vf-border-strong);box-shadow:var(--vf-card-shadow);border-radius:24px;padding:24px}.vf-timeline-container{background:var(--vf-surface-subtle);border:1px solid var(--vf-border-glass);border-radius:16px;flex-direction:column;gap:24px;margin-bottom:24px;padding:24px;display:flex}.vf-timeline-bg{border:2px solid var(--vf-border-glass);background:linear-gradient(to bottom,var(--bg-primary),var(--bg-secondary));border-radius:12px;flex:1;height:96px;position:relative;overflow:hidden}.vf-timeline-playhead{background:var(--text-primary);width:2px;box-shadow:0 0 15px var(--text-primary);pointer-events:none;z-index:40;position:absolute;top:0;bottom:0}.vf-timeline-optimal{background:var(--success);opacity:.6;pointer-events:none;z-index:10;width:1px;position:absolute;top:0;bottom:0}.vf-volume-knob-container{flex-direction:column;align-items:center;gap:8px;display:flex}.vf-volume-knob-surface{background:linear-gradient(to bottom right,var(--bg-tertiary),var(--bg-secondary));border:2px solid var(--border);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;inset:8px}.vf-volume-label{color:var(--vf-text-muted);font-size:10px;font-weight:500}.vf-hero-section{text-align:center;flex-direction:column;align-items:center;margin-bottom:24px;padding-top:8px;display:flex}.vf-badge-container{background:var(--vf-bg-glass);border:1px solid var(--vf-border-glass);color:var(--text-secondary);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:99px;align-items:center;gap:8px;margin-bottom:16px;padding:6px 14px;font-size:.75rem;font-weight:600;display:flex}.vf-ping-indicator{width:8px;height:8px;display:flex;position:relative}.vf-ping-dot-animate{background-color:var(--vf-primary);opacity:.75;border-radius:9999px;width:100%;height:100%;animation:1.5s cubic-bezier(0,0,.2,1) infinite vf-ping;display:inline-flex;position:absolute}.vf-ping-dot{background-color:var(--vf-primary);border-radius:9999px;width:8px;height:8px;display:inline-flex;position:relative}@keyframes vf-ping{75%,to{opacity:0;transform:scale(2.5)}}.vf-hero-title{background:linear-gradient(135deg,#fff 0%,#999 100%);-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;margin:0 0 12px;font-size:clamp(2rem,5vw,3.5rem);font-weight:900}[data-theme=light] .vf-hero-title{background:linear-gradient(135deg,#111 0%,#444 100%);-webkit-background-clip:text;background-clip:text}.vf-hero-subtitle{color:var(--text-secondary);max-width:600px;margin:0;font-size:1rem;line-height:1.5}.vf-card{background:var(--vf-card-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--vf-border-glass);box-shadow:var(--vf-card-shadow);border-radius:20px;padding:24px;transition:transform .3s,border-color .3s}.vf-card:hover{border-color:var(--vf-primary-glow)}.vf-card-title{text-transform:uppercase;letter-spacing:.05em;color:var(--vf-primary);margin:0 0 20px;font-size:.875rem;font-weight:700}.vf-grid-3{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.vf-grid-4{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}@media (max-width:768px){.vf-grid-3,.vf-grid-4{grid-template-columns:1fr}}.vf-input{border:1px solid var(--vf-border-glass);color:#fff;background:#ffffff0d;border-radius:10px;outline:none;width:100%;padding:10px 14px;font-size:.875rem;transition:border-color .2s}[data-theme=light] .vf-input{color:#000;background:#0000000d}.vf-input:focus{border-color:var(--vf-primary)}.vf-btn-primary{background:var(--vf-primary);color:#000;cursor:pointer;box-shadow:0 4px 14px 0 var(--vf-primary-glow);border:none;border-radius:12px;padding:12px 24px;font-weight:700;transition:all .2s}.vf-btn-primary:hover{box-shadow:0 6px 20px 0 var(--vf-primary-glow);filter:brightness(1.1);transform:translateY(-2px)}.vf-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.vf-btn-full{width:100%}.vf-flex-between{justify-content:space-between;align-items:center;display:flex}.vf-section-title{margin:0;font-size:1.25rem;font-weight:800}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.vf-tabs-container{justify-content:center;margin-bottom:8px;display:flex}.vf-dropzone{text-align:center;border:2px dashed var(--vf-border-glass);background:var(--vf-bg-glass);-webkit-backdrop-filter:blur(8px);cursor:pointer;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:900px;margin:0 auto;padding:80px 40px;transition:all .4s cubic-bezier(.165,.84,.44,1);display:flex;position:relative;overflow:hidden}.vf-dropzone:hover{border-color:var(--vf-primary);background:#ffbd0008;transform:translateY(-2px);box-shadow:0 12px 40px #0003}.vf-dropzone.active{border-color:var(--vf-primary);box-shadow:0 0 30px var(--vf-primary-glow);background:#ffbd0014;transform:scale(1.02)}.vf-dropzone-icon-container{justify-content:center;margin-bottom:32px;display:flex}.vf-dropzone-icon-box{background:linear-gradient(135deg,var(--vf-primary)0%,#e6aa00 100%);width:90px;height:90px;box-shadow:0 8px 20px var(--vf-primary-glow);border-radius:24px;justify-content:center;align-items:center;transition:all .3s;display:flex}.vf-dropzone:hover .vf-dropzone-icon-box{box-shadow:0 12px 24px var(--vf-primary-glow);transform:rotate(5deg)scale(1.05)}.vf-dropzone-content{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}.vf-dropzone-title{color:#fff;letter-spacing:-.02em;margin-bottom:16px;font-size:2rem;font-weight:800}[data-theme=light] .vf-dropzone-title{color:#000}.vf-dropzone-desc{color:var(--vf-text-muted);max-width:500px;margin-bottom:32px;font-size:1.125rem;line-height:1.6}.vf-dropzone-meta{color:var(--vf-text-muted);text-transform:uppercase;letter-spacing:.12em;opacity:.8;font-size:.8125rem;font-weight:700}.vf-progress-wrapper{width:100%;max-width:900px;margin-top:40px;margin-left:auto;margin-right:auto;animation:.4s ease-out fadeIn}.vf-progress-labels{color:var(--text-primary);justify-content:space-between;margin-bottom:12px;font-size:.9375rem;font-weight:600;display:flex}.vf-progress-track{background:var(--vf-surface-subtle);border:1px solid var(--vf-border-glass);border-radius:6px;height:12px;overflow:hidden}.vf-progress-fill{background:linear-gradient(to right,var(--vf-primary),var(--vf-secondary));height:100%;box-shadow:0 0 12px var(--vf-primary-glow);transition:width .3s}