.karaoke-feature{--karaoke-surface:color-mix(in srgb,var(--system-color,#8882f5) 6%,#fff);--karaoke-surface-muted:color-mix(in srgb,var(--system-color,#8882f5) 11%,#eff0f6);--karaoke-border-soft:color-mix(in srgb,var(--system-color,#8882f5) 14%,#e5e9f3);--karaoke-shadow-md:0 4px 16px color-mix(in srgb,var(--system-color,#8882f5) 12%,transparent)}.karaoke-feature .karaoke-main-card{background:var(--karaoke-surface);border:1px solid var(--karaoke-border-soft);box-shadow:var(--karaoke-shadow-md);transition:border-color .2s ease,box-shadow .2s ease}.karaoke-feature .karaoke-main-card:hover{border-color:color-mix(in srgb,var(--system-color,#8882f5) 24%,#c7d2fe)}.karaoke-feature .karaoke-tab-strip{align-items:center;background:var(--karaoke-surface-muted);border:1px solid var(--karaoke-border-soft);border-radius:10px;display:flex;gap:4px;padding:4px}.karaoke-feature .karaoke-tab-btn{align-items:center;background:transparent;border:none;border-radius:8px;color:#64748b;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;padding:6px 12px;transition:color .2s ease,background-color .2s ease}.karaoke-feature .karaoke-tab-btn:hover{color:var(--system-color,#8882f5)}.karaoke-feature .karaoke-tab-btn.is-active{background:var(--karaoke-surface);box-shadow:0 1px 3px color-mix(in srgb,var(--system-color,#8882f5) 10%,transparent);color:var(--system-color,#8882f5)}.karaoke-feature .karaoke-upload-zone{background:var(--karaoke-surface-muted);border:2px dashed var(--karaoke-border-soft);border-radius:12px;transition:border-color .2s ease,background-color .2s ease}.karaoke-feature .karaoke-upload-zone:hover{background:color-mix(in srgb,var(--system-color,#8882f5) 8%,#fff);border-color:color-mix(in srgb,var(--system-color,#8882f5) 35%,#c7d2fe)}.karaoke-feature .karaoke-input-panel{background:linear-gradient(90deg,color-mix(in srgb,var(--system-color,#8882f5) 55%,#5297ff),color-mix(in srgb,var(--system-color,#8882f5) 40%,#9d9aff));border-radius:12px;padding:1.5px}.karaoke-feature .karaoke-input-panel-inner{background:var(--karaoke-surface);border-radius:11px}.karaoke-feature .karaoke-settings-panel{background:var(--karaoke-surface);border:1px solid var(--karaoke-border-soft);border-radius:16px;box-shadow:0 1px 2px color-mix(in srgb,var(--system-color,#8882f5) 8%,transparent);display:flex;flex-direction:column;gap:16px;padding:24px}.karaoke-feature .karaoke-option-card{align-items:center;background:var(--karaoke-surface-muted);border:1px solid var(--karaoke-border-soft);border-radius:10px;cursor:pointer;display:flex;gap:8px;justify-content:center;padding:16px 0;transition:border-color .2s ease,background-color .2s ease}.karaoke-feature .karaoke-option-card:hover{background:color-mix(in srgb,var(--system-color,#8882f5) 6%,#fff)}.karaoke-feature .karaoke-option-card.is-selected{background:color-mix(in srgb,var(--system-color,#8882f5) 10%,#fff);border-left:4px solid var(--system-color,#8882f5)}.karaoke-feature .karaoke-track-card{background:var(--karaoke-surface-muted);border:1px solid color-mix(in srgb,var(--system-color,#8882f5) 22%,#e5e9f3);border-radius:12px;box-shadow:0 2px 8px color-mix(in srgb,var(--system-color,#8882f5) 8%,transparent);padding:16px}.karaoke-feature .karaoke-play-row{align-items:center;background:var(--karaoke-surface);border:1px solid var(--karaoke-border-soft);border-radius:12px;display:flex;gap:16px;height:48px;padding:0 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.karaoke-feature .karaoke-play-row.is-active{border-color:var(--system-color,#8882f5);box-shadow:0 0 8px color-mix(in srgb,var(--system-color,#8882f5) 35%,transparent)}.karaoke-feature .karaoke-field{background:var(--karaoke-surface);border:1px solid var(--karaoke-border-soft);border-radius:8px;color:#334155;height:36px;padding:0 8px;transition:border-color .2s ease,box-shadow .2s ease}.karaoke-feature .karaoke-field:focus{border-color:var(--system-color,#8882f5);box-shadow:0 0 0 3px color-mix(in srgb,var(--system-color,#8882f5) 18%,transparent);outline:none}.karaoke-feature .karaoke-toggle-btn{align-items:center;background:var(--karaoke-surface);border:1px solid var(--karaoke-border-soft);border-radius:8px;cursor:pointer;display:inline-flex;height:36px;justify-content:center;min-width:36px;padding:0 8px;transition:border-color .2s ease,background-color .2s ease,color .2s ease}.karaoke-feature .karaoke-toggle-btn.is-active{background:var(--system-color,#8882f5);border-color:var(--system-color,#8882f5);color:#fff}.karaoke-feature .karaoke-chip{align-items:center;background:var(--karaoke-surface-muted);border:1px solid var(--karaoke-border-soft);border-radius:6px;color:#64748b;display:inline-flex;font-size:12px;font-weight:500;justify-content:center}.karaoke-feature .karaoke-btn-primary{align-items:center;background:var(--system-color,#8882f5);border:none;border-radius:10px;box-shadow:0 2px 8px color-mix(in srgb,var(--system-color,#8882f5) 28%,transparent);color:#fff;cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:6px;height:40px;justify-content:center;padding:0 24px;transition:background-color .2s ease,box-shadow .2s ease}.karaoke-feature .karaoke-btn-primary:hover:not(:disabled){background:#6f68f0;box-shadow:0 4px 12px color-mix(in srgb,var(--system-color,#8882f5) 35%,transparent)}.karaoke-feature .karaoke-btn-primary:disabled{cursor:not-allowed;opacity:.6}.karaoke-feature .karaoke-btn-outline{align-items:center;background:var(--karaoke-surface);border:1px solid var(--system-color,#8882f5);border-radius:10px;color:var(--system-color,#8882f5);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:6px;height:40px;justify-content:center;padding:0 24px;transition:background-color .2s ease,color .2s ease}.karaoke-feature .karaoke-btn-create,.karaoke-feature .karaoke-btn-outline:hover{background:var(--system-color,#8882f5);color:#fff}.karaoke-feature .karaoke-btn-create{border:none;border-radius:10px;box-shadow:0 2px 8px color-mix(in srgb,var(--system-color,#8882f5) 28%,transparent);font-weight:600;margin:30px auto 0;max-width:300px;padding:10px 16px;transition:background-color .2s ease,box-shadow .2s ease;width:100%}.karaoke-feature .karaoke-btn-create:hover:not(:disabled){background:#6f68f0}.karaoke-feature .karaoke-btn-create:disabled{cursor:not-allowed;opacity:.6}.karaoke-feature .karaoke-preview-shell{background:var(--karaoke-surface-muted);border:1px solid var(--karaoke-border-soft);border-radius:12px;overflow:hidden}.karaoke-feature .el-collapse{border:none}.karaoke-feature .el-collapse-item__header{color:#334155;font-size:15px;font-weight:600}.karaoke-feature .el-collapse-item__header,.karaoke-feature .el-collapse-item__wrap{background:transparent;border-bottom-color:var(--karaoke-border-soft)}:root.dark .karaoke-feature{--karaoke-surface:color-mix(in srgb,var(--system-color,#8882f5) 8%,#0f172a);--karaoke-surface-muted:color-mix(in srgb,var(--system-color,#8882f5) 14%,#1e293b);--karaoke-border-soft:color-mix(in srgb,var(--system-color,#8882f5) 20%,#334155)}:root.dark .karaoke-feature .karaoke-tab-btn{color:#94a3b8}:root.dark .karaoke-feature .karaoke-tab-btn.is-active{background:color-mix(in srgb,var(--system-color,#8882f5) 18%,#1e293b)}:root.dark .karaoke-feature .el-collapse-item__header{color:#e2e8f0}.karaoke-feature .custom-scrollbar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--system-color,#8882f5) 38%,#cbd5e1);border-radius:10px}.karaoke-feature .custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--system-color,#8882f5)}@media (max-width:640px){.karaoke-feature .karaoke-settings-panel{padding:12px}.karaoke-feature .karaoke-tab-btn{font-size:12px;padding:6px 8px}.karaoke-feature .karaoke-btn-create,.karaoke-feature .karaoke-btn-outline,.karaoke-feature .karaoke-btn-primary{font-size:14px;padding:10px 16px}.karaoke-feature .progress-overlay{padding-left:16px;padding-right:16px}.karaoke-feature .progress-overlay .animate-blink{font-size:14px;line-height:1.5}}