:root{--font-heading:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bg-color:#0b0a0f;--bg-gradient:radial-gradient(circle at 10% 20%, #5838e026 0%, transparent 40%), radial-gradient(circle at 90% 80%, #db277726 0%, transparent 45%);--panel-bg:#16151eb3;--panel-border:#ffffff12;--panel-border-hover:#ffffff26;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#6b7280;--accent-primary:#8b5cf6;--accent-primary-glow:#8b5cf659;--accent-secondary:#db2777;--accent-secondary-glow:#db277759;--accent-success:#10b981;--input-bg:#0a090ecc;--input-border:#ffffff14;--input-focus:#8b5cf680;--shadow-sm:0 2px 8px -1px #00000080;--shadow-md:0 8px 24px -4px #0009;--shadow-lg:0 16px 48px -8px #000c;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);background-image:var(--bg-gradient);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--panel-border-hover);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}#root{flex-direction:column;min-height:100vh;display:flex}.glass-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-md);transition:border-color var(--transition-normal), box-shadow var(--transition-normal)}.glass-panel:hover{border-color:var(--panel-border-hover)}.btn{font-family:var(--font-heading);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--accent-primary);color:#fff;box-shadow:0 4px 12px var(--accent-primary-glow)}.btn-primary:hover{background:#9d76fa;transform:translateY(-1px);box-shadow:0 6px 16px #8b5cf680}.btn-primary:active{transform:translateY(0)}.btn-secondary{border:1px solid var(--panel-border-hover);color:var(--text-primary);background:0 0}.btn-secondary:hover{border-color:var(--text-secondary);background:#ffffff0d}.btn-danger{color:#ef4444;background:#ef444426;border:1px solid #ef44444d}.btn-danger:hover{background:#ef444440;border-color:#ef4444}.form-group{margin-bottom:18px}.form-label{font-family:var(--font-heading);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-input{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-body);transition:all var(--transition-fast);outline:none;padding:12px 16px;font-size:14px}.form-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-glow)}.form-input::placeholder{color:var(--text-muted)}.playlist-item{border-bottom:1px solid var(--panel-border);transition:background-color var(--transition-fast);grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px;display:grid}.playlist-item:last-child{border-bottom:none}.playlist-item:hover{background:#ffffff05}pre{background:var(--input-bg);border:1px solid var(--panel-border);border-radius:var(--radius-sm);font-family:var(--font-mono);color:#a78bfa;padding:16px;font-size:13px;overflow-x:auto}.grid-2{grid-template-columns:1.6fr 1fr;align-items:start;gap:24px;display:grid}.grid-2>*{min-width:0}@media (width<=1024px){.grid-2{grid-template-columns:1fr}}