.component-track-list{display:flex;flex-direction:column;gap:8px}.component-track-list-empty{color:#b3b3b3;text-align:center;margin:20px 0 0;font-size:10px;font-weight:500}.component-track-list-item{display:flex;align-items:center;padding:10px 12px;gap:12px;transition:background .2s ease;cursor:pointer;border:1px solid rgba(0,0,0,0);border-radius:8px;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation}.component-track-list-item.selection{border:1px solid hsla(0,0%,100%,.08)}.component-track-list-item.playing{background:hsla(0,0%,100%,.1)}.component-track-list-item-select{width:20px;height:20px;border-radius:6px;border:1.5px solid hsla(0,0%,100%,.45);display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:rgba(0,0,0,.35);color:#fff}.component-track-list-item-select.selected{border-color:#fff;background:hsla(0,0%,100%,.18)}.component-track-list-item.highlighted{border-color:var(--color-primary)}.component-track-list-item-cover{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#404040;display:flex;align-items:center;justify-content:center;flex-shrink:0}.component-track-list-item-cover img{width:100%;height:100%;object-fit:cover;display:block}.component-track-list-item-cover-placeholder{width:100%;height:100%;background:#404040;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;font-weight:700;border-radius:3px}.component-track-list-item-info{flex:1;display:flex;flex-direction:column;min-width:0;justify-content:center}.component-track-list-item-title{font-size:clamp(16px,3.8vw,20px);color:#fff;font-weight:800;line-height:1.3;max-width:100%;display:block}.component-track-list-item-artist,.component-track-list-item-title{font-family:var(--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-track-list-item-artist{font-size:clamp(12px,2.8vw,14px);color:hsla(0,0%,100%,.7);margin-top:3px;line-height:1.25;font-weight:600;transition:color .2s ease}.component-track-list-item-artist:hover{color:hsla(0,0%,100%,.9)}.component-track-list-item-feat{color:hsla(0,0%,100%,.45);font-size:11px;font-weight:500}.component-track-list-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0}.component-track-list-item-duration{font-family:var(--font-family);font-size:12px;font-weight:600;color:hsla(0,0%,100%,.65)}.component-track-list-item-menu-container{position:relative}.component-track-list-item-menu-btn{background:rgba(0,0,0,0);border:none;color:#b3b3b3;cursor:pointer;padding:5px;border-radius:50%;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.component-track-list-item-menu-btn:hover{background:hsla(0,0%,100%,.1)}@media(hover:hover)and (pointer:fine){.component-track-list-item:hover{background:hsla(0,0%,100%,.1)}.component-track-list-item.highlighted:hover{border-color:var(--color-primary)}}.component-track-list-item-playing-container{display:flex;align-items:center;gap:8px}.component-track-list-item-sound-wave{display:flex;align-items:center;gap:2px;height:20px}.component-track-list-item-wave{width:3px;height:100%;background:#fff;border-radius:2px;animation:sound-wave 1.2s ease-in-out infinite}.component-track-list-item-wave:first-child{animation-delay:0s}.component-track-list-item-wave:nth-child(2){animation-delay:.2s}.component-track-list-item-wave:nth-child(3){animation-delay:.4s}@keyframes sound-wave{0%,40%,to{height:6px}20%{height:20px}}.track-menu{position:absolute;top:100%;right:0;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.15);border-radius:8px;overflow:hidden;z-index:100;backdrop-filter:blur(10px)}.track-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 16px;background:none;border:none;color:#fff;font-size:14px;cursor:pointer;transition:all .2s ease;white-space:nowrap;text-align:left}.track-menu-item:hover{background:hsla(0,0%,100%,.15);color:#fff}.track-menu-item svg{flex-shrink:0}.component-track-list-item-album,.component-track-list-item-cover-play,.component-track-list-item-like{display:none}@media(min-width:1024px){.component-track-list{gap:2px}.component-track-list-item{padding:8px 16px;gap:16px;border-radius:var(--ios-radius-sm,8px)}.component-track-list-item-cover{width:44px;height:44px}.component-track-list-item-title{font-size:16px;font-weight:600;line-height:1.35}.component-track-list-item-artist{font-size:14px;font-weight:500;margin-top:2px}.component-track-list-item-actions{gap:16px}.component-track-list-item-duration{min-width:44px;text-align:right;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}.component-track-list-item{min-height:60px;padding:8px 12px;border:0;border-radius:var(--ios-radius-md,12px);transition:background-color var(--ios-dur-fast,.15s) ease}.component-track-list-item.highlighted{box-shadow:inset 0 0 0 1px var(--color-primary)}.component-track-list-item.active{background:var(--ios-fill-4,rgba(118,118,128,.18))}.component-track-list-item.active .component-track-list-item-title{color:var(--ios-now-playing,#58ff00)}.component-track-list-item-cover{position:relative;border-radius:6px}.component-track-list-item-cover-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);color:#fff;opacity:0;transition:opacity var(--ios-dur-fast,.15s) ease}.component-track-list-item-title{font-weight:600}.component-track-list-item-artist{color:var(--ios-label-2,rgba(235,235,245,.6));font-weight:400}.component-track-list-item-album{display:none;flex:0 0 28%;min-width:0;padding:0;border:0;background:rgba(0,0,0,0);color:var(--ios-label-2,rgba(235,235,245,.6));font:var(--ios-text-subheadline,400 15px/20px sans-serif);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}button.component-track-list-item-album{cursor:pointer}}@media(min-width:1024px){button.component-track-list-item-album:focus-visible{outline:2px solid var(--ios-focus);outline-offset:2px;border-radius:4px}.component-track-list-item-like{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--ios-label,#fff);cursor:pointer;transition:opacity var(--ios-dur-fast,.15s) ease,background-color var(--ios-dur-fast,.15s) ease,transform var(--ios-spring-snappy-duration,.3s) var(--ios-spring-snappy,ease)}.component-track-list-item-like:active{transform:scale(.88)}.component-track-list-item-like:focus-visible{outline:2px solid var(--ios-focus);outline-offset:2px}.component-track-list-item-menu-btn{width:36px;height:36px;padding:0;color:var(--ios-label-2,#b3b3b3);transition:opacity var(--ios-dur-fast,.15s) ease,background-color var(--ios-dur-fast,.15s) ease}.component-track-list-item-menu-btn:focus-visible{outline:2px solid var(--ios-focus);outline-offset:2px}.component-track-list-item-duration{color:var(--ios-label-2,rgba(235,235,245,.6));font-weight:400}}@media(min-width:1280px){.component-track-list-item-album{display:block}}@media(min-width:1024px)and (hover:hover)and (pointer:fine){.component-track-list-item:hover{background:var(--ios-fill-4,rgba(118,118,128,.18))}.component-track-list-item.active:hover{background:var(--ios-fill-3,rgba(118,118,128,.24))}.component-track-list-item:hover .component-track-list-item-cover-play{opacity:1}.component-track-list-item-like:not(.liked),.component-track-list-item-menu-btn{opacity:0}.component-track-list-item.active .component-track-list-item-menu-btn,.component-track-list-item:focus-within .component-track-list-item-like,.component-track-list-item:focus-within .component-track-list-item-menu-btn,.component-track-list-item:hover .component-track-list-item-like,.component-track-list-item:hover .component-track-list-item-menu-btn{opacity:1}.component-track-list-item-like:hover,.component-track-list-item-menu-btn:hover{background:var(--ios-fill-3,rgba(255,255,255,.1));color:var(--ios-label,#fff)}button.component-track-list-item-album:hover{color:var(--ios-label,#fff);text-decoration:underline}}