*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-0:#0a0a0f;--bg-1:#0f0f1a;--bg-2:#141428;--bg-card:#ffffff0a;--bg-card-hover:#ffffff12;--border:#ffffff14;--border-bright:#ffffff26;--purple:#a855f7;--purple-dim:#a855f726;--purple-glow:#a855f74d;--cyan:#06b6d4;--cyan-dim:#06b6d426;--pink:#ec4899;--amber:#f59e0b;--gradient:linear-gradient(135deg,#a855f7,#06b6d4);--gradient-hero:linear-gradient(135deg,#a855f7 0%,#ec4899 50%,#06b6d4 100%);--text:#f0f0ff;--text-muted:#9090b0;--text-hint:#5a5a7a;--radius:14px;--radius-sm:8px;--radius-pill:100px;--nav-h:64px;--player-h:72px;--font-en:"Space Grotesk",sans-serif;--font-ja:"Noto Sans JP",sans-serif}html{scroll-behavior:smooth}body{font-family:var(--font-ja);background:var(--bg-0);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:var(--font-ja)}input,textarea,select{font-family:var(--font-ja)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-1)}::-webkit-scrollbar-thumb{background:#a855f766;border-radius:3px}.gradient-text{background:var(--gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glass{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:.5px solid var(--border)}.btn-primary{border-radius:var(--radius-pill);background:var(--gradient);color:#fff;cursor:pointer;font-size:14px;font-weight:600;font-family:var(--font-ja);border:none;align-items:center;gap:8px;padding:10px 20px;transition:opacity .15s,transform .15s;display:inline-flex}.btn-primary:hover{opacity:.88;transform:translateY(-1px)}.btn-ghost{border-radius:var(--radius-pill);color:var(--text-muted);border:1px solid var(--border-bright);font-size:14px;font-weight:500;font-family:var(--font-ja);background:0 0;align-items:center;gap:6px;padding:8px 16px;transition:all .15s;display:inline-flex}.btn-ghost:hover{border-color:var(--purple);color:var(--purple)}.btn-icon{background:var(--bg-card);border:1px solid var(--border);width:36px;height:36px;color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;transition:all .15s;display:flex}.btn-icon:hover{border-color:var(--purple);color:var(--purple)}.input-field{border:1px solid var(--border-bright);border-radius:var(--radius-sm);width:100%;color:var(--text);background:#ffffff0d;outline:none;padding:12px 16px;font-size:15px;transition:border-color .15s}.input-field::placeholder{color:var(--text-hint)}.input-field:focus{border-color:var(--purple)}.card{background:var(--bg-card);border:.5px solid var(--border);border-radius:var(--radius);transition:background .15s,transform .2s,box-shadow .2s}.card:hover{background:var(--bg-card-hover);transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.page-container{max-width:1200px;padding:calc(var(--nav-h) + 32px) 24px calc(var(--player-h) + 40px);margin:0 auto}.neon-purple{box-shadow:0 0 20px var(--purple-glow)}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.fade-in{animation:.4s both fadeIn}.spin{animation:1s linear infinite spin}.genre-badge{border-radius:var(--radius-pill);background:var(--purple-dim);color:var(--purple);align-items:center;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex}