*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:#0b0b0c;color:#f5f5f5}body{padding:24px}.app{max-width:1200px;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.brand{font-size:28px;font-weight:800;letter-spacing:.16em}.count{font-size:12px;color:#8f8f95;border:1px solid #29292d;border-radius:999px;padding:8px 12px}.layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);gap:20px}.player-card,.playlist-card{background:#111113;border:1px solid #252529;border-radius:20px;box-shadow:0 15px 50px rgba(0,0,0,.28)}.player-card{padding:22px}.playlist-card{padding:18px;max-height:calc(100vh - 72px);display:flex;flex-direction:column}.now-playing{display:flex;gap:16px;align-items:center;margin-bottom:18px}.cover{width:72px;height:72px;border-radius:16px;background:#eaeaea;color:#111;display:grid;place-items:center;font-size:32px;font-weight:800}.eyebrow{font-size:10px;letter-spacing:.18em;color:#77777d}.now-playing h1{margin:5px 0 3px;font-size:24px}.now-playing p{margin:0;color:#9d9da3}.youtube-player{position:relative;width:100%;aspect-ratio:16/9;background:#080809;border-radius:14px;overflow:hidden}.youtube-player iframe{width:100%;height:100%;border:0}.progress-row{display:grid;grid-template-columns:45px 1fr 45px;gap:10px;align-items:center;margin-top:16px;font-size:11px;color:#8f8f95}input[type=range]{width:100%;accent-color:#fff}.controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}.controls button,.extra-controls button{border:1px solid #2d2d31;background:#18181b;color:#fff;border-radius:12px;min-width:44px;height:42px;cursor:pointer;transition:.15s}.controls button:hover,.extra-controls button:hover{background:#242428}.controls .main-btn{width:52px;height:52px;border-radius:50%;background:#f4f4f4;color:#0d0d0e;border:0;font-size:18px}.controls .main-btn:hover{background:#fff}.controls .active{border-color:#fff}.volume{display:flex;align-items:center;gap:8px;margin-left:10px;min-width:150px}.extra-controls{display:flex;justify-content:center;gap:10px;margin-top:12px}.playlist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.playlist-head h2{margin:0;font-size:18px}.playlist-head select{background:#18181b;color:#eee;border:1px solid #303035;border-radius:10px;padding:8px}.playlist{overflow:auto;padding-right:4px}.track{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;cursor:pointer}.track:hover{background:#19191c}.track.active{background:#242428}.num{width:26px;color:#6f6f76;font-size:12px}.track-info{min-width:0;flex:1}.track-name{font-size:13px;font-weight:650}.track-genre{font-size:11px;color:#77777d;margin-top:3px}.play-dot{font-size:12px;color:#aaa}@media(max-width:850px){body{padding:12px}.layout{grid-template-columns:1fr}.playlist-card{max-height:520px}.volume{min-width:110px}}@media(max-width:520px){.controls{flex-wrap:wrap}.volume{width:100%;margin-left:0}.progress-row{grid-template-columns:40px 1fr 40px}}