:root{--bg-gradient: linear-gradient(135deg, #0f1724 0%, #071327 100%);--card-bg: rgba(255, 255, 255, .04);--muted: rgba(255, 255, 255, .7);--accent: #646cff;--glass: rgba(255, 255, 255, .05);--radius: 12px}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--bg-gradient);color:#fff}.container{width:100%;max-width:920px}.player-card{display:flex;gap:1.25rem;align-items:center;background:linear-gradient(180deg,#ffffff05,#ffffff03);border:1px solid rgba(255,255,255,.04);padding:1.25rem;border-radius:var(--radius);box-shadow:0 6px 30px #02061799}.art{min-width:96px;min-height:96px;width:96px;height:96px;border-radius:8px;background:linear-gradient(135deg,#2b2b7a,#2b7a66);display:flex;align-items:center;justify-content:center;color:#fff;font-size:2.2rem;flex-shrink:0}.info{flex:1 1 auto;min-width:0}.song{margin:0 0 .25rem;font-size:1.25rem;line-height:1.15;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.artist{margin:0 0 .65rem;color:var(--muted);font-size:.95rem;font-weight:500}.controls{display:flex;gap:.5rem;align-items:center}.btn{padding:.48rem .9rem;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:#ffffff05;color:#fff;cursor:pointer;font-weight:600;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px #02061780}.btn.primary{background:linear-gradient(90deg,var(--accent),#535bf2);border:none}.meta{margin-top:.6rem;font-size:.85rem;color:#ffffffa6}@media(max-width:520px){.player-card{flex-direction:row;gap:.75rem}.art{width:72px;height:72px;font-size:1.4rem}.song{font-size:1.05rem}}@media(prefers-color-scheme:light){:root{--muted: rgba(34, 34, 34, .65)}.app{background:linear-gradient(180deg,#f6f9ff,#eef4ff);color:#14202b}.player-card{background:#fffc;border-color:#14202b0a;box-shadow:0 6px 20px #14202b0f}.btn{color:#0f1724;background:#141e280a}.btn.primary{color:#fff}}