:root{--cream:#fbf6ec;--sand:#efe6d3;--sand-deep:#e4d9c4;--forest:#16261f;--moss:#1f3a2e;--moss-light:#284a3a;--coral:#ff6a4d;--coral-light:#ff8a6e;--gold:#f2b441;--dark:#1e1b16;--dark-soft:#4a4239;--muted:#8a7e72;--light:#f5f0e8;--light-muted:#f5f0e88c;--display:"Sora", sans-serif;--body:"Inter", sans-serif;--phone-w:390px;--phone-h:844px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--body);-webkit-font-smoothing:antialiased;background:#1a1a1a;justify-content:center;align-items:center;min-height:100vh;display:flex}.phone-frame{width:var(--phone-w);height:var(--phone-h);border-radius:40px;flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 3px #333,0 20px 60px #00000080}.now-playing-zone{background:linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%);flex-shrink:0;padding:0 24px}.top-bar{justify-content:space-between;align-items:center;padding:48px 0 12px;display:flex}.top-btn{background:var(--sand);width:38px;height:38px;color:var(--dark);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background .15s;display:flex}.top-btn:hover{background:var(--sand-deep)}.top-center{flex-direction:column;align-items:center;gap:2px;display:flex}.playing-from-label{font-family:var(--body);letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;font-size:10px;font-weight:600}.playlist-name{font-family:var(--display);color:var(--dark);font-size:13px;font-weight:700}.album-art{background:linear-gradient(145deg, var(--coral) 0%, #e04830 45%, #9e2a1a 80%, #6b1a10 100%);border-radius:24px;width:280px;height:280px;margin:20px auto 0;position:relative;overflow:hidden;box-shadow:0 8px 30px #ff6a4d40,0 2px 8px #00000014}.album-ring{border:1px solid #ffffff1f;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.album-ring-1{width:80px;height:80px}.album-ring-2{width:140px;height:140px}.album-ring-3{width:200px;height:200px}.album-ring-4{width:260px;height:260px}.album-center-dot{background:#ffffff4d;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.track-meta{justify-content:space-between;align-items:center;gap:12px;margin-top:28px;display:flex}.track-info{flex:1;min-width:0}.track-title{font-family:var(--display);color:var(--dark);white-space:nowrap;text-overflow:ellipsis;font-size:24px;font-weight:800;line-height:1.2;overflow:hidden}.track-subtitle{font-family:var(--body);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:4px;font-size:13px;overflow:hidden}.like-btn{background:var(--sand);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;transition:background .15s,transform .15s;display:flex}.like-btn:hover{background:var(--sand-deep);transform:scale(1.08)}.scrubber-wrap{margin-top:22px}.scrubber-track{background:var(--sand-deep);border-radius:3px;height:6px;position:relative;overflow:visible}.scrubber-fill{background:var(--coral);border-radius:3px;height:100%;transition:width .3s linear;position:absolute;top:0;left:0}.scrubber-input{appearance:none;cursor:pointer;background:0 0;width:100%;height:24px;margin:0;position:absolute;top:50%;left:0;transform:translateY(-50%)}.scrubber-input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--coral);border:3px solid var(--cream);cursor:pointer;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #00000026}.scrubber-input::-moz-range-thumb{background:var(--coral);border:3px solid var(--cream);cursor:pointer;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #00000026}.scrubber-times{font-family:var(--body);color:var(--muted);justify-content:space-between;margin-top:8px;font-size:11px;font-weight:500;display:flex}.transport{justify-content:center;align-items:center;gap:16px;margin-top:22px;display:flex}.transport-btn{cursor:pointer;color:var(--dark);border:none;justify-content:center;align-items:center;transition:background .15s,transform .1s;display:flex}.transport-btn.small{background:var(--sand);width:40px;height:40px;color:var(--dark-soft);border-radius:50%}.transport-btn.small:hover{background:var(--sand-deep)}.transport-btn.small.active{color:var(--coral);background:#ff6a4d1a}.transport-btn.medium{background:var(--sand);width:48px;height:48px;color:var(--dark);border-radius:50%}.transport-btn.medium:hover{background:var(--sand-deep)}.transport-btn.play-btn{background:var(--dark);color:#fff;border-radius:50%;width:64px;height:64px;box-shadow:0 4px 16px #1e1b1640}.transport-btn.play-btn:hover{transform:scale(1.05)}.transport-btn.play-btn:active{transform:scale(.97)}.volume-row{color:var(--muted);align-items:center;gap:12px;margin-top:20px;padding-bottom:20px;display:flex}.volume-track-wrap{flex:1;position:relative}.volume-track{background:var(--sand-deep);border-radius:2px;height:4px;position:relative;overflow:visible}.volume-fill{background:var(--coral);border-radius:2px;height:100%;position:absolute;top:0;left:0}.volume-input{appearance:none;cursor:pointer;background:0 0;width:100%;height:20px;margin:0;position:absolute;top:50%;left:0;transform:translateY(-50%)}.volume-input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--coral);border:2px solid var(--cream);cursor:pointer;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #0000001f}.volume-input::-moz-range-thumb{background:var(--coral);border:2px solid var(--cream);cursor:pointer;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #0000001f}.up-next-zone{background:linear-gradient(180deg, var(--forest) 0%, #0f1d16 100%);flex-direction:column;flex:1;padding:24px 24px 0;display:flex;overflow:hidden}.up-next-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.up-next-title{font-family:var(--display);color:var(--light);font-size:18px;font-weight:700}.queue-btn{font-family:var(--body);color:var(--coral);cursor:pointer;background:#ff6a4d1f;border:none;border-radius:20px;padding:6px 16px;font-size:13px;font-weight:600;transition:background .15s}.queue-btn:hover{background:#ff6a4d33}.queue-list{flex:1;padding-bottom:32px;overflow-y:auto}.queue-list::-webkit-scrollbar{width:0}.queue-row{cursor:pointer;border-radius:14px;align-items:center;gap:14px;padding:12px 14px;transition:background .15s;display:flex}.queue-row:hover{background:#ffffff0a}.queue-row.now{background:#ff6a4d14}.queue-thumb{border-radius:10px;flex-shrink:0;width:44px;height:44px}.queue-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.queue-track-title{font-family:var(--body);color:var(--light);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.queue-row.now .queue-track-title{color:var(--coral)}.queue-track-artist{font-family:var(--body);color:var(--light-muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.queue-duration{font-family:var(--body);color:var(--light-muted);flex-shrink:0;font-size:12px;font-weight:500}@keyframes pulse-ring{0%,to{opacity:1}50%{opacity:.6}}.album-ring-1{animation:4s ease-in-out infinite pulse-ring}.album-ring-2{animation:4s ease-in-out .5s infinite pulse-ring}.album-ring-3{animation:4s ease-in-out 1s infinite pulse-ring}.album-ring-4{animation:4s ease-in-out 1.5s infinite pulse-ring}@media (height<=780px){.phone-frame{border-radius:0;height:100vh}.album-art{width:220px;height:220px}}