.music-container{padding:var(--sp-5);align-items:center;gap:var(--sp-4);background:linear-gradient(#00142833 0%,#0000 40%);flex-direction:column;height:100%;display:flex}.music-artwork{border-radius:var(--r-2xl);width:140px;height:140px;transition:transform var(--t-slow) var(--ease-spring);background:linear-gradient(135deg,#0a0020 0%,#0a1830 50%,#081020 100%);justify-content:center;align-items:center;font-size:56px;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 32px #00000080,inset 0 1px #ffffff0a}.music-artwork:hover{transform:scale(1.03)}.music-artwork:after{content:"";border-radius:var(--r-2xl);background:linear-gradient(135deg, transparent 30%, rgba(var(--neon-cyan-rgb), .06) 100%);pointer-events:none;position:absolute;inset:0}.music-info{text-align:center}.music-title{font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);margin-bottom:3px}.music-artist{font-size:var(--fs-sm);color:var(--text-secondary);font-weight:var(--fw-regular)}.music-visualizer{border-radius:var(--r-md);background:#00000026;border:1px solid #ffffff05;width:100%;height:56px;overflow:hidden}.viz-canvas{width:100%;height:100%;display:block}.viz-bar{background:linear-gradient(to top, var(--neon-cyan), var(--neon-purple));border-radius:2px;width:4px;min-height:3px;transition:height .12s}.music-viz-modes{border-radius:var(--r-md);background:#ffffff05;justify-content:center;gap:3px;padding:2px;display:flex}.music-viz-btn{border-radius:var(--r-sm);font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--text-tertiary);cursor:pointer;transition:all var(--t-fast) ease;background:0 0;border:none;padding:4px 12px}.music-viz-btn:hover{color:var(--text-secondary)}.music-viz-btn.active{background:var(--neon-cyan-dim);color:var(--neon-cyan)}.music-progress-container{align-items:center;gap:var(--sp-3);width:100%;display:flex}.music-time{font-size:var(--fs-2xs);color:var(--text-tertiary);font-variant-numeric:tabular-nums;font-family:var(--font-mono);min-width:32px;font-weight:var(--fw-medium)}.music-progress-track{cursor:pointer;height:3px;transition:height var(--t-fast) ease;background:#ffffff0f;border-radius:2px;flex:1;position:relative}.music-progress-track:hover{height:5px}.music-progress-fill{background:linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));border-radius:2px;width:0%;height:100%;transition:width .2s linear;position:relative}.music-progress-fill:after{content:"";width:10px;height:10px;box-shadow:0 0 8px rgba(var(--neon-cyan-rgb), .5);transition:transform var(--t-fast) var(--ease-spring);background:#fff;border-radius:50%;position:absolute;top:50%;right:-5px;transform:translateY(-50%)scale(0)}.music-progress-track:hover .music-progress-fill:after{transform:translateY(-50%)scale(1)}.music-controls{align-items:center;gap:var(--sp-5);display:flex}.music-btn{color:var(--text-secondary);cursor:pointer;transition:all var(--t-fast) ease;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;font-size:16px;display:flex}.music-btn:hover{color:var(--text-primary);background:#ffffff0a}.music-btn:active{transition-duration:var(--t-instant);transform:scale(.9)}.music-btn.play{width:48px;height:48px;color:var(--neon-cyan);background:var(--neon-cyan-dim);border:1px solid rgba(var(--neon-cyan-rgb), .15);font-size:20px}.music-btn.play:hover{background:rgba(var(--neon-cyan-rgb), .18);box-shadow:0 0 20px rgba(var(--neon-cyan-rgb), .1)}.music-volume{align-items:center;gap:var(--sp-2);width:100%;padding:0 var(--sp-4);display:flex}.music-vol-icon{opacity:.5;font-size:13px}.music-vol-slider{appearance:none;background:#ffffff0f;border-radius:2px;outline:none;flex:1;height:3px}.music-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-secondary);cursor:pointer;width:10px;height:10px;transition:background var(--t-fast) ease;border-radius:50%}.music-vol-slider::-webkit-slider-thumb:hover{background:var(--neon-cyan)}