:root{--bg:#070419;--panel:#0c0821;--panel2:#100b28;--row:#09051c;--row-alt:#141027;--border:#241a40;--muted:#9b94b5;--text:#fff;--pink:#ef0b85;--pink2:#ff2a9d;--cyan:#25dff2;--sidebar:205px;--right:46%;--top:42px}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:13px}button,input{font:inherit;color:inherit}.hidden{display:none!important}.loader{position:fixed;inset:0;z-index:1000;background:#0b071b;display:grid;place-content:center;justify-items:center;transition:opacity .45s ease}.loader.done{opacity:0;pointer-events:none}.loader-logo{width:360px;max-height:190px;object-fit:contain}.loader-dots{display:flex;gap:9px;margin-top:12px}.loader-dots span{width:14px;height:14px;border-radius:50%;background:#332b4d;animation:dot .6s infinite alternate}.loader-dots span:nth-child(2){animation-delay:.15s}.loader-dots span:nth-child(3){animation-delay:.3s}@keyframes dot{to{background:var(--pink);box-shadow:0 0 14px var(--pink)}}.app-shell{height:100vh;display:grid;grid-template-columns:var(--sidebar) calc(100% - var(--sidebar) - var(--right)) var(--right);grid-template-rows:var(--top) calc(100vh - var(--top));transition:opacity .35s ease}.app-shell.is-loading{opacity:0}.topbar{grid-column:1/4;display:flex;align-items:center;gap:19px;background:#0b071d;border-bottom:1px solid var(--border);padding:0 7px}.top-logo{width:174px;height:38px;display:flex;align-items:center}.top-logo img{width:168px;height:36px;object-fit:contain;object-position:left center}.top-spacer{flex:1}.top-action{border:0;background:transparent;color:#fff;text-decoration:none;display:flex;align-items:center;gap:6px;font-weight:700;font-size:12px;cursor:pointer}.top-action img{width:14px;height:14px;filter:brightness(4)}.signin{border:0;background:linear-gradient(180deg,#ff188f,#d90a70);color:white;border-radius:999px;padding:7px 14px;font-weight:800;font-size:12px}.sidebar{background:#0c0821;border-right:1px solid var(--border);overflow-y:auto;padding:7px 0}.sidebar nav{display:flex;flex-direction:column}.sidebar a{height:36px;padding:0 10px;display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:700;font-size:13px;border-left:3px solid transparent}.sidebar a:hover{background:#17102f}.sidebar a.active{background:var(--pink);border-left-color:#ff6cb6}.sidebar a img{width:18px;height:18px;filter:brightness(0) invert(1);opacity:.96}.side-label{font-size:12px;color:#9b94b5;margin:16px 9px 5px}.sidebar .create-link{color:var(--pink2)}.browser-pane{min-width:0;background:#070419;border-right:1px solid var(--border);display:flex;flex-direction:column}.browse-view,.search-view{height:100%;min-height:0;display:flex;flex-direction:column}.browser-header{height:44px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--border);background:#09051d}.browser-header h1{font-size:13px;margin:0 0 0 7px}.icon-button,.circle-action{border:0;background:transparent;cursor:pointer;display:grid;place-items:center}.icon-button img{width:17px;filter:brightness(0) invert(1)}.browser-header-actions{margin-left:auto;display:flex;gap:7px}.circle-action{width:27px;height:27px;border:1px solid #4b4267;border-radius:50%}.circle-action img{width:14px;filter:brightness(0) invert(1)}.circle-action.accent{background:#ad146e}.song-table{min-height:0;overflow:auto}.song-head,.song-row{display:grid;grid-template-columns:36px minmax(180px,1.2fr) minmax(130px,.85fr) 75px minmax(85px,.55fr) 36px;align-items:center}.song-head{height:29px;border-bottom:1px solid var(--border);color:#c4bdd7;font-size:11px;background:#08041a}.song-row{height:39px;color:#fff;background:var(--row);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.01)}.song-row:nth-child(even){background:var(--row-alt)}.song-row:hover{background:#24143e}.song-row img.cover{width:29px;height:29px;object-fit:cover;margin-left:4px}.song-row span{padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-row .artist,.song-row .duration,.song-row .last{font-size:12px}.song-row .add{height:25px;border:0;background:transparent;opacity:0;cursor:pointer}.song-row:hover .add{opacity:1}.song-row .add img{width:15px;filter:brightness(0) invert(1)}.table-loading{padding:20px;color:var(--muted)}.search-header{height:57px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--border);background:#09051d}.search-input-wrap{height:32px;flex:1;display:flex;align-items:center;gap:8px;padding:0 10px;border:2px solid var(--pink);background:#09051d}.search-input-wrap>img{width:15px;filter:brightness(0) invert(1);opacity:.9}.search-input-wrap input{flex:1;border:0;background:transparent;outline:0;font-size:13px}.clear-search{border:0;background:transparent;cursor:pointer;color:#fff;font-size:18px;line-height:1}.search-scroll{min-height:0;overflow:auto;padding:14px}.genre-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.genre-tile{position:relative;aspect-ratio:2.18/1;overflow:hidden;border:1px solid rgba(255,255,255,.05);background:#110a29}.genre-tile img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .18s ease,filter .18s ease}.genre-tile span{position:absolute;inset:0;display:flex;align-items:center;padding:12px;color:white;font-size:15px;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.8);background:linear-gradient(90deg,rgba(0,0,18,.52),rgba(0,0,18,.04))}.genre-tile:hover img{transform:scale(1.035);filter:brightness(1.1)}.search-results{min-height:0}.result-tabs{display:flex;gap:8px;margin-bottom:14px}.result-tabs button{height:31px;padding:0 14px;border:1px solid #4b4267;background:transparent;color:#cfc7e4;border-radius:999px;cursor:pointer}.result-tabs button.active{background:#4d0d3d;border-color:var(--pink);color:#fff}.result-section{margin-bottom:19px}.result-section h2{margin:0 0 9px;font-size:15px}.track-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.track-card{min-width:0;height:61px;display:grid;grid-template-columns:52px minmax(0,1fr) 48px;align-items:center;background:#141027;border:1px solid rgba(255,255,255,.02);cursor:pointer}.track-card:hover{background:#21153b}.track-card .cover{width:43px;height:43px;margin-left:7px;object-fit:cover}.track-card .meta{min-width:0;padding:0 4px}.track-card strong,.track-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-card strong{font-size:12px}.track-card small{margin-top:3px;color:#b9b0ca;font-size:11px}.track-card time{font-size:12px;text-align:right;padding-right:9px}.artist-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.artist-card{height:54px;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;background:#141027;border:1px solid rgba(255,255,255,.02)}.artist-card img{width:36px;height:36px;margin-left:7px;object-fit:cover}.artist-card strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.empty-result{padding:12px;color:#aaa1bc;background:#110c26;border:1px solid rgba(255,255,255,.03)}.right-pane{min-width:0;background:#070419;display:grid;grid-template-rows:auto 1fr}.player-pane{background:#0a061b;border-bottom:1px solid var(--border)}.player-toolbar{height:57px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--border);background:#09051d}.player-toolbar-spacer{flex:1}.volume-icon{width:15px;filter:brightness(0) invert(1);opacity:.85}.volume-line{width:120px;height:3px;background:#33254a}.volume-line span{display:block;width:78%;height:100%;background:var(--pink)}.player-media{aspect-ratio:16/5.1;position:relative;background:#180d38;overflow:hidden}.player-media>img{width:100%;height:100%;object-fit:cover}.active-track{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#6d0968,#130524);padding:25px}.active-track strong{font-size:29px;color:#fff}.active-track span{margin-top:8px;color:#ffc4ec;font-size:16px}.player-status{height:31px;padding:8px 11px;color:#9d94b7;font-size:12px;border-top:1px solid var(--border)}.player-controls{height:31px;display:flex;align-items:center;gap:8px;padding:0 10px;border-top:1px solid var(--border)}.player-controls button{border:0;background:transparent;cursor:pointer}.player-controls img{width:14px;filter:brightness(0) invert(1);opacity:.85}.time{font-size:11px;color:#c8c2d7}.progress{height:4px;background:#1c1634;flex:1}.progress span{display:block;width:0;height:100%;background:var(--pink)}.queue-pane{min-height:0;position:relative;background:#070419}.queue-header{height:35px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:5px;padding:0 10px;font-size:11px}.queue-header span{color:#9c94b4}.queue-header label{margin-left:auto;height:22px;width:145px;border:1px solid #282043;display:flex;align-items:center;padding:0 5px;gap:5px}.queue-header img{width:12px;filter:brightness(0) invert(1);opacity:.7}.queue-header input{width:100%;border:0;background:transparent;outline:0;font-size:11px}.queue-list{max-height:calc(100vh - var(--top) - 270px);overflow:auto}.queue-item{height:44px;display:grid;grid-template-columns:36px 1fr 25px;align-items:center;border-bottom:1px solid var(--border);background:#0c0821}.queue-item img.cover{width:29px;height:29px;margin-left:5px;object-fit:cover}.queue-item strong,.queue-item span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item strong{font-size:12px}.queue-item span{font-size:11px;color:#aaa1bc}.queue-item button{border:0;background:transparent;cursor:pointer}.queue-item button img{width:13px;filter:brightness(0) invert(1);opacity:.6}.queue-empty{position:absolute;inset:35px 0 0;display:grid;place-content:center;justify-items:center;text-align:center;gap:8px;color:white}.queue-empty img{width:98px;height:75px;object-fit:contain;opacity:.45}.queue-empty span{color:#c7c0da;font-size:12px}.queue-empty.hidden{display:none}@media(max-width:1360px){:root{--sidebar:180px;--right:45%}.genre-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.track-card-grid,.artist-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:1000px){:root{--right:43%;--sidebar:150px}.top-action{display:none}.genre-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.song-head,.song-row{grid-template-columns:32px minmax(150px,1.2fr) minmax(100px,.8fr) 62px 0 30px}.song-head span:nth-child(5),.song-row .last{display:none}}@media(max-width:760px){:root{--sidebar:0px;--right:100%}.sidebar,.browser-pane{display:none}.top-logo{width:120px}.right-pane{grid-column:1/4}.topbar{grid-column:1/4}}
.player-toolbar .volume-range{width:120px;height:3px;accent-color:var(--pink);cursor:pointer}.player-media{background:#000}.player-output{position:absolute;inset:0;width:100%;height:100%;background:#000}.player-output[hidden]{display:none}.player-media video{object-fit:contain}.cdg-output{object-fit:contain;image-rendering:pixelated}.active-track{inset:auto 0 0;display:flex;align-items:baseline;gap:9px;justify-content:flex-start;text-align:left;background:linear-gradient(180deg,transparent,rgba(0,0,0,.86));padding:28px 12px 9px;pointer-events:none}.active-track strong{font-size:14px}.active-track span{margin-top:0;color:#d7cee6;font-size:12px}.fullscreen-button{position:absolute;top:9px;right:9px;width:27px;height:27px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.42);display:grid;place-items:center;cursor:pointer}.fullscreen-button img{width:15px;filter:brightness(0) invert(1)}.player-controls .seek-range{flex:1;min-width:0;height:4px;accent-color:var(--pink);cursor:pointer}.player-controls button{width:20px;height:22px;display:grid;place-items:center}.player-controls button img[hidden]{display:none}.player-media:fullscreen,.player-media:-webkit-full-screen{background:#000}.player-media:fullscreen .player-output,.player-media:-webkit-full-screen .player-output{object-fit:contain}.player-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Karaoke Kove player information layout */
.player-meta{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 11px;background:#0a061b;border-top:1px solid var(--border)}
.player-meta[hidden]{display:none}
.player-meta-text{min-width:0;display:flex;flex-direction:column;gap:3px}
.player-meta-text strong,.player-meta-text span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-meta-text strong{font-size:14px;color:#fff}
.player-meta-text span{font-size:12px;color:#bdb4d2}
.player-version{flex:0 0 auto;max-width:180px;padding:5px 8px;border:1px solid #4b4267;background:#100b28;color:#e8ddff;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-status{height:auto;min-height:0;padding:5px 11px;color:#9d94b7;font-size:11px;border-top:1px solid var(--border)}
.player-status:empty{display:none}
.track-card{grid-template-columns:52px minmax(0,1fr) 78px}
.track-side{min-width:0;height:100%;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;padding-right:9px;text-align:right}
.track-side time,.track-side small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-side time{font-size:12px;color:#fff}
.track-side small{font-size:10px;color:#b9b0ca}
.queue-item{grid-template-columns:36px minmax(0,1fr) 78px 25px}
.queue-main,.queue-side{min-width:0}
.queue-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding-right:6px;text-align:right}
.queue-side time,.queue-side small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-side time{font-size:11px;color:#fff}
.queue-side small{font-size:10px;color:#aaa1bc}

/* v1.4 - professional generated genre artwork and drag-to-queue support */
.genre-tile{border:1px solid rgba(255,255,255,.12);background:#110a29;cursor:default}
.genre-tile img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .18s ease,filter .18s ease;filter:saturate(.92) contrast(1.03) brightness(.94)}
.genre-tile:hover img{transform:scale(1.035);filter:saturate(1.02) contrast(1.08) brightness(1.04)}
.genre-tile span{display:none!important}
.draggable-track{cursor:grab}
.draggable-track:active{cursor:grabbing}
.draggable-track.is-dragging{opacity:.46}
.queue-drop-hint{position:absolute;inset:35px 0 0;display:none;place-content:center;justify-items:center;text-align:center;gap:7px;z-index:4;background:rgba(35,0,33,.88);border:2px solid var(--pink);box-shadow:inset 0 0 38px rgba(239,11,133,.18);pointer-events:none}
.queue-drop-hint strong{font-size:18px;color:#fff}
.queue-drop-hint span{font-size:12px;color:#e2bad5}
.queue-pane.is-drag-over .queue-drop-hint{display:grid}
.queue-pane.is-drag-over .queue-empty{opacity:.18}
.queue-pane.is-drag-over .queue-list{opacity:.28}

/* Playlist landing placeholders */
.playlist-landing{min-height:0;overflow:auto;display:flex;flex-direction:column}
.playlist-detail{min-height:0;display:flex;flex-direction:column;height:100%}
.playlist-browser-header{position:sticky;top:0;z-index:2}
.playlist-back-placeholder{opacity:.45;cursor:default}
.playlist-grid{padding:16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 14px;align-content:start}
.playlist-card{min-width:0;display:flex;flex-direction:column;gap:8px}
.playlist-button{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;text-align:left}
.playlist-button img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;border:1px solid rgba(255,255,255,.06);box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.playlist-button:hover img{transform:translateY(-1px) scale(1.01);filter:brightness(1.04);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.playlist-caption{font-size:13px;line-height:1.22;color:#f1eff8;font-weight:600;min-height:32px;padding:0 1px}
@media(max-width:1360px){.playlist-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1080px){.playlist-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Empty playlist state and database-driven playlist grid */
.playlist-empty{grid-column:1/-1;display:flex;min-height:220px;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:30px;text-align:center;color:#a99fba}
.playlist-empty strong{color:#fff;font-size:17px}
.playlist-empty span{font-size:13px}

/* Clickable artist catalogue links */
.song-row .artist-link{min-width:0;padding:0 6px;border:0;background:transparent;color:#fff;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-size:12px}
.song-row .artist-link:hover,.track-card .search-artist-link:hover{color:var(--pink2);text-decoration:underline}
.track-card .search-artist-link{display:block;max-width:100%;margin-top:3px;padding:0;border:0;background:transparent;color:#b9b0ca;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-size:11px}
.artist-card{cursor:pointer}
.artist-card:hover,.artist-card:focus{background:#21153b;outline:1px solid rgba(239,11,133,.55)}

/* v1.8 - KaraFun-style public browsing scale refinement
   Increase public navigation and catalogue row sizing so playlist,
   artist and New Releases views have the same relaxed density. */
.sidebar{padding:10px 0}
.sidebar a{height:43px;padding:0 12px;gap:10px;font-size:14px}
.sidebar a img{width:19px;height:19px}
.side-label{font-size:13px;margin:18px 11px 6px}
.browser-header{height:56px;padding:0 14px}
.browser-header h1{font-size:15px;margin-left:9px}
.icon-button img{width:19px}
.circle-action{width:31px;height:31px}
.circle-action img{width:15px}
.song-head{height:34px;font-size:12px}
.song-row{height:48px}
.song-row img.cover{width:35px;height:35px;margin-left:6px}
.song-row span{padding:0 8px}
.song-row .artist,.song-row .duration,.song-row .last,
.song-row .artist-link{font-size:13px}
.song-row .artist-link{padding:0 8px}
.song-row .add{height:30px}
.song-row .add img{width:16px}

@media(max-width:1000px){
  .sidebar a{height:40px;font-size:13px}
  .side-label{font-size:12px}
  .browser-header{height:52px}
  .song-row{height:45px}
  .song-row img.cover{width:33px;height:33px}
}

/* v1.9 - KaraFun-style public list density refinement
   Larger desktop rows/covers, vertically centred content and compact
   fixed-width columns to avoid a horizontal scrollbar. */
.song-table{overflow-y:auto;overflow-x:hidden}
.song-head,.song-row{
  width:100%;
  min-width:0;
  grid-template-columns:50px minmax(0,1.35fr) minmax(0,.92fr) minmax(0,.72fr) 60px 76px 34px;
  align-items:center;
}
.song-head{height:39px;font-size:13px;line-height:1.05}
.song-head span{
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  padding:0 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.song-row{height:60px}
.song-row img.cover{width:44px;height:44px;margin-left:4px}
.song-row span{
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  padding:0 8px;
}
.song-row .artist,.song-row .version,.song-row .duration,.song-row .last,
.song-row .artist-link{font-size:15px;line-height:1.15}
.song-row .artist-link{
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  padding:0 8px;
}
.song-row .add{height:36px}
.song-row .add img{width:17px}
.browser-header{height:64px}
.browser-header h1{font-size:17px}

@media(max-width:1000px){
  .song-head,.song-row{
    grid-template-columns:42px minmax(0,1.32fr) minmax(0,.84fr) minmax(0,.66fr) 55px 0 30px;
  }
  .song-head span:nth-child(6),.song-row .last{display:none}
  .song-head{height:35px;font-size:12px}
  .song-row{height:54px}
  .song-row img.cover{width:40px;height:40px;margin-left:2px}
  .song-row .artist,.song-row .version,.song-row .duration,.song-row .last,
  .song-row .artist-link{font-size:14px}
  .browser-header{height:58px}
  .browser-header h1{font-size:16px}
}

/* v2.0 - public list column balance refinement
   Give Duration and Last Played a little more breathing room while
   keeping song titles comfortably readable. */
.song-head,.song-row{
  grid-template-columns:50px minmax(0,1.16fr) minmax(0,.90fr) minmax(0,.72fr) 68px 90px 34px;
}

@media(max-width:1000px){
  .song-head,.song-row{
    grid-template-columns:42px minmax(0,1.16fr) minmax(0,.82fr) minmax(0,.66fr) 60px 0 30px;
  }
}

/* v2.1 - split-pane resizing, clean search clear button and Karaoke Kove range styling */
.search-input-wrap input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}
.search-input-wrap input[type="search"]::-ms-clear,
.search-input-wrap input[type="search"]::-ms-reveal{display:none;width:0;height:0}

.app-shell{position:relative}
.right-pane{
  position:relative;
  grid-template-rows:var(--player-height,auto) minmax(0,1fr);
}
.player-pane{min-height:0;display:flex;flex-direction:column}
.player-media{flex:1;min-height:120px;aspect-ratio:auto}
.queue-pane{min-height:0;display:flex;flex-direction:column}
.queue-list{min-height:0;max-height:none;flex:1;overflow:auto}

.layout-splitter{
  position:absolute;
  z-index:45;
  background:transparent;
  touch-action:none;
  user-select:none;
}
.layout-splitter::after{
  content:"";
  position:absolute;
  background:transparent;
  transition:background .15s ease,box-shadow .15s ease;
}
.layout-splitter:hover::after,
.layout-splitter.is-dragging::after,
.layout-splitter:focus-visible::after{
  background:var(--pink);
  box-shadow:0 0 9px rgba(239,11,133,.72);
}
.layout-splitter-main{
  top:var(--top);
  bottom:0;
  left:calc(100% - var(--right) - 4px);
  width:8px;
  cursor:col-resize;
}
.layout-splitter-main::after{top:0;bottom:0;left:3px;width:2px}
.layout-splitter-player{
  left:0;
  right:0;
  top:calc(var(--player-height,320px) - 4px);
  height:8px;
  cursor:row-resize;
}
.layout-splitter-player::after{left:0;right:0;top:3px;height:2px}
body.is-resizing{cursor:col-resize!important}
body.is-resizing.is-resizing-player{cursor:row-resize!important}
body.is-resizing *{user-select:none!important}

.player-toolbar .volume-range,
.player-controls .seek-range{
  --range-fill:0%;
  -webkit-appearance:none;
  appearance:none;
  border:0;
  outline:0;
  background:transparent;
  cursor:pointer;
}
.player-toolbar .volume-range{width:120px;height:16px}
.player-controls .seek-range{flex:1;min-width:0;height:16px}
.player-toolbar .volume-range::-webkit-slider-runnable-track,
.player-controls .seek-range::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--pink) 0 var(--range-fill),#302743 var(--range-fill) 100%);
}
.player-toolbar .volume-range::-webkit-slider-thumb,
.player-controls .seek-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  margin-top:-5px;
  border:0;
  border-radius:50%;
  background:var(--pink2);
  box-shadow:0 0 0 2px rgba(255,42,157,.16),0 0 7px rgba(239,11,133,.45);
}
.player-toolbar .volume-range::-moz-range-track,
.player-controls .seek-range::-moz-range-track{
  height:4px;
  border:0;
  border-radius:999px;
  background:#302743;
}
.player-toolbar .volume-range::-moz-range-progress,
.player-controls .seek-range::-moz-range-progress{
  height:4px;
  border-radius:999px;
  background:var(--pink);
}
.player-toolbar .volume-range::-moz-range-thumb,
.player-controls .seek-range::-moz-range-thumb{
  width:14px;
  height:14px;
  border:0;
  border-radius:50%;
  background:var(--pink2);
  box-shadow:0 0 0 2px rgba(255,42,157,.16),0 0 7px rgba(239,11,133,.45);
}
@media(max-width:760px){.layout-splitter{display:none}}

/* v2.2 - style the vertical song-list scrollbar to match Karaoke Kove */
.song-table{
  scrollbar-width:thin;
  scrollbar-color:var(--pink) #100b28;
}
.song-table::-webkit-scrollbar{width:11px}
.song-table::-webkit-scrollbar-track{
  background:#100b28;
  border-left:1px solid #241a40;
}
.song-table::-webkit-scrollbar-thumb{
  background:var(--pink);
  border:2px solid #100b28;
  border-radius:999px;
}
.song-table::-webkit-scrollbar-thumb:hover{
  background:var(--pink2);
}

/* v2.3 - soften and inset the song-list scrollbar */
.song-table{
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(188,79,145,.72) transparent;
}
.song-table::-webkit-scrollbar{width:15px}
.song-table::-webkit-scrollbar-track{
  background:transparent;
  border-left:0;
}
.song-table::-webkit-scrollbar-thumb{
  background:rgba(188,79,145,.62);
  background-clip:padding-box;
  border:4px solid transparent;
  border-radius:999px;
}
.song-table::-webkit-scrollbar-thumb:hover{
  background:rgba(239,11,133,.82);
  background-clip:padding-box;
}

/* v2.4 - slimmer neutral scrollbar thumb with a small inset gap */
.song-table{
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,148,163,.58) transparent;
}
.song-table::-webkit-scrollbar{width:13px}
.song-table::-webkit-scrollbar-track{
  background:transparent;
}
.song-table::-webkit-scrollbar-thumb{
  background:rgba(148,148,163,.56);
  background-clip:padding-box;
  border:3px solid transparent;
  border-radius:999px;
}
.song-table::-webkit-scrollbar-thumb:hover{
  background:rgba(184,184,198,.78);
  background-clip:padding-box;
}

/* v2.5 - account entry point */
.signin{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.account-chip{display:flex;align-items:center;gap:9px;height:36px;padding:0 8px 0 13px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.055);font-size:13px;color:#fff}
.account-chip form{margin:0}.account-chip button{height:26px;padding:0 10px;border:0;border-radius:999px;background:rgba(239,11,133,.18);color:#ff74bd;font-size:11px;font-weight:700;cursor:pointer}.account-chip button:hover{background:rgba(239,11,133,.3);color:#fff}


/* v2.8 - member Favorites and History live-list gate */
.member-gate{
  min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 28px;text-align:center;background:#060317;color:#fff;
}
.member-gate img{width:min(360px,78%);max-height:290px;object-fit:cover;border-radius:18px;box-shadow:0 18px 54px rgba(0,0,0,.36)}
.member-gate h1{margin:28px 0 8px;font-size:23px;line-height:1.2}
.member-gate p{max-width:430px;margin:0;color:#afa5ce;font-size:15px;line-height:1.55}
.member-gate-signin{margin-top:22px;min-height:42px;padding:0 20px;border-radius:999px;background:#ec0b84;color:#fff;font-weight:800;box-shadow:0 10px 26px rgba(236,11,132,.22)}
.member-gate-signin:hover{background:#ff2298}

/* Guest/account merged history refinements */
.history-clear{
  border:0;
  background:transparent;
  color:#fff;
  font:inherit;
  font-weight:700;
  padding:0 10px;
  cursor:pointer;
  opacity:.9;
}
.history-clear:hover{color:var(--pink2);opacity:1}
.history-clear:disabled{opacity:.45;cursor:wait}
.history-date-group{
  height:42px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#090617;
  color:#fff;
  font-weight:700;
  letter-spacing:.01em;
}

/* v3.0 - roomier public app top header */
:root{--top:60px}
.topbar{
  min-height:var(--top);
  padding:7px 12px;
  gap:22px;
}
.top-logo{
  width:205px;
  height:46px;
}
.top-logo img{
  width:198px;
  height:44px;
  object-fit:contain;
  object-position:left center;
}
.signin{
  min-height:40px;
  padding:0 18px;
  font-size:14px;
  line-height:1;
}
@media(max-width:760px){
  :root{--top:56px}
  .topbar{padding:6px 10px}
  .top-logo{width:156px;height:42px}
  .top-logo img{width:152px;height:40px}
  .signin{min-height:36px;padding:0 14px;font-size:13px}
}


/* v3.1 - standardise list-page heading padding across all catalogue views
   Applies the same roomier header treatment used by the Playlists gallery
   to playlist details, Top, New Releases, Favorites, History and artist lists. */
.browser-header,
.playlist-browser-header{
  min-height:68px;
  height:68px;
  padding:0 18px;
  gap:10px;
}
.browser-header .icon-button,
.playlist-browser-header .icon-button{
  width:30px;
  height:30px;
  flex:0 0 30px;
}
.browser-header .icon-button img,
.playlist-browser-header .icon-button img{
  width:18px;
}
.browser-header h1,
.playlist-browser-header h1{
  margin:0;
  font-size:17px;
  line-height:1;
}
.browser-header-actions{
  align-self:center;
}
.history-clear{
  min-height:34px;
  padding:0 9px;
}

@media(max-width:1000px){
  .browser-header,
  .playlist-browser-header{
    min-height:60px;
    height:60px;
    padding:0 14px;
    gap:8px;
  }
  .browser-header .icon-button,
  .playlist-browser-header .icon-button{
    width:28px;
    height:28px;
    flex-basis:28px;
  }
  .browser-header h1,
  .playlist-browser-header h1{
    font-size:16px;
  }
}


/* v3.2 - align the right player toolbar divider with the shared list header */
.player-toolbar{
  min-height:68px;
  height:68px;
  padding:0 18px;
}

@media(max-width:1000px){
  .player-toolbar{
    min-height:60px;
    height:60px;
    padding:0 14px;
  }
}


/* v3.3 - roomier player metadata and transport controls */
.player-meta{
  min-height:62px;
  padding:11px 14px;
  gap:16px;
}
.player-meta-text{
  gap:5px;
}
.player-meta-text strong{
  font-size:17px;
  line-height:1.1;
}
.player-meta-text span{
  font-size:13px;
  line-height:1.1;
}
.player-version{
  padding:4px 7px;
  font-size:11px;
}
.player-controls{
  min-height:43px;
  height:43px;
  gap:10px;
  padding:0 13px;
}
.player-controls button{
  width:28px;
  height:30px;
}
.player-controls img{
  width:17px;
}
.player-controls .time{
  font-size:12px;
}
.player-status:empty{
  display:none;
}

@media(max-width:1000px){
  .player-meta{
    min-height:56px;
    padding:9px 12px;
  }
  .player-meta-text strong{font-size:16px}
  .player-meta-text span{font-size:12px}
  .player-controls{
    min-height:39px;
    height:39px;
    padding:0 11px;
  }
  .player-controls button{
    width:25px;
    height:27px;
  }
  .player-controls img{width:16px}
}


/* v3.4 - roomier empty-player status and queue heading */
.player-status{
  min-height:42px;
  height:42px;
  display:flex;
  align-items:center;
  padding:0 14px;
  font-size:13px;
  line-height:1.2;
}
.player-status:empty{
  display:none;
}

.queue-header{
  min-height:46px;
  height:46px;
  gap:7px;
  padding:0 14px;
  font-size:12px;
}
.queue-header strong{
  font-size:13px;
}
.queue-header label{
  height:27px;
  width:165px;
  padding:0 7px;
  gap:6px;
}
.queue-header img{
  width:13px;
}
.queue-header input{
  font-size:12px;
}
.queue-empty,
.queue-drop-hint{
  inset:46px 0 0;
}

@media(max-width:1000px){
  .player-status{
    min-height:38px;
    height:38px;
    padding:0 12px;
    font-size:12px;
  }
  .queue-header{
    min-height:42px;
    height:42px;
    padding:0 12px;
  }
  .queue-header label{
    height:25px;
    width:150px;
  }
  .queue-empty,
  .queue-drop-hint{
    inset:42px 0 0;
  }
}


/* v3.5 - styled private playlist delete confirmation modal */
.delete-playlist-modal{
  width:min(450px,calc(100vw - 36px));
}
.delete-playlist-copy{
  font-size:14px;
  line-height:1.45;
}
.delete-playlist-copy strong{
  font-weight:700;
}
.create-playlist-actions .danger{
  border:0;
  background:transparent;
  color:#ff2b67;
  min-width:70px;
}
.create-playlist-actions .danger:hover{
  color:#ff4f80;
}
.create-playlist-actions .danger:disabled{
  opacity:.55;
  cursor:wait;
}


/* v3.6 - restored song, queue, history, favorites, and personal playlist right-click menus */
.song-context-menu{
  position:fixed;
  z-index:2200;
  min-width:228px;
  max-width:min(310px,calc(100vw - 18px));
  padding:6px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(25,16,54,.98),rgba(12,8,33,.98));
  box-shadow:0 18px 45px rgba(0,0,0,.55),0 0 0 1px rgba(239,11,133,.12) inset;
  color:#fff;
  user-select:none;
}
.song-context-menu button{
  width:100%;
  min-height:31px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 9px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#fff;
  text-align:left;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.song-context-menu button:hover,
.song-context-menu button:focus-visible{
  outline:0;
  background:rgba(239,11,133,.22);
}
.song-context-menu button img{
  width:15px;
  height:15px;
  flex:0 0 15px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.92;
}
.song-context-menu button span{
  margin-left:auto;
  color:#d8d1ea;
  font-size:15px;
  line-height:1;
}
.context-divider{
  height:1px;
  margin:5px 4px;
  background:rgba(255,255,255,.1);
}
.context-empty{
  padding:8px 10px;
  color:#a99fc2;
  font-size:12px;
  font-weight:700;
}
.song-context-submenu{
  position:absolute;
  left:calc(100% - 4px);
  top:74px;
  min-width:215px;
  padding:6px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(25,16,54,.98),rgba(12,8,33,.98));
  box-shadow:0 18px 45px rgba(0,0,0,.55),0 0 0 1px rgba(37,223,242,.08) inset;
}
.song-context-menu .has-submenu:hover + .song-context-submenu,
.song-context-submenu:hover{
  display:block!important;
}
#playlistContextLinks{
  max-height:245px;
  overflow:auto;
}
#playlistContextLinks button{
  overflow:hidden;
  text-overflow:ellipsis;
}
#userPlaylistContextMenu button[data-user-playlist-action="delete"]{
  color:#ff5d8d;
}
#userPlaylistContextMenu button[data-user-playlist-action="delete"]:hover,
#userPlaylistContextMenu button[data-user-playlist-action="delete"]:focus-visible{
  background:rgba(255,43,103,.18);
}
.draggable-track.is-dragging{
  opacity:.55;
}
.queue-pane.is-drag-over{
  outline:2px solid rgba(37,223,242,.55);
  outline-offset:-3px;
}
.queue-drop-hint{
  position:absolute;
  inset:35px 0 0;
  z-index:3;
  display:none;
  place-content:center;
  justify-items:center;
  gap:6px;
  text-align:center;
  background:rgba(7,4,25,.82);
  color:#fff;
  pointer-events:none;
}
.queue-drop-hint strong{
  font-size:16px;
}
.queue-drop-hint span{
  color:#c7c0da;
  font-size:12px;
}
.queue-pane.is-drag-over .queue-drop-hint{
  display:grid;
}
@media(max-width:760px){
  .song-context-menu{
    min-width:210px;
  }
  .song-context-submenu{
    left:8px;
    right:8px;
    top:100%;
    min-width:auto;
  }
}

/* v3.7 - private playlist sidebar and detail-page presentation */
.user-playlist-links{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.sidebar .user-playlist-link{
  min-width:0;
  height:34px;
  padding:0 10px 0 22px;
  gap:8px;
  color:#d5cee7;
  font-size:12px;
  font-weight:650;
}
.sidebar .user-playlist-link img{
  width:15px;
  height:15px;
  flex:0 0 15px;
  opacity:.82;
}
.sidebar .user-playlist-link span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar .user-playlist-link:hover{
  color:#fff;
  background:#17102f;
}
.sidebar .user-playlist-link.active{
  color:#fff;
  background:rgba(239,11,133,.3);
  border-left-color:var(--pink);
}
.personal-playlist-search{
  min-height:46px;
  flex:0 0 46px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 13px;
  border-bottom:1px solid var(--border);
  background:#0a061d;
}
.personal-playlist-search img{
  width:16px;
  height:16px;
  filter:brightness(0) invert(1);
  opacity:.78;
}
.personal-playlist-search input{
  width:100%;
  height:30px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:5px;
  outline:0;
  padding:0 10px;
  background:#120c2a;
  color:#fff;
  font-size:12px;
}
.personal-playlist-search input:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 2px rgba(239,11,133,.14);
}
.personal-playlist-search input::placeholder{
  color:#9e95b8;
}


/* v3.7 - larger filled transport icons and vertical seek scrubber */
.player-controls{
  min-height:48px;
  height:48px;
  gap:12px;
  padding:0 14px;
}
.player-controls button{
  width:32px;
  height:32px;
  padding:0;
  background:transparent;
  display:grid;
  place-items:center;
}
.player-controls button:hover img,
.player-controls button:focus-visible img{
  opacity:1;
}
.player-controls img{
  width:22px;
  height:22px;
  opacity:1;
}
#playFirst .play-icon{width:22px;height:22px}
#playFirst .pause-icon{width:18px;height:18px}
#playNext img{width:21px;height:21px}
.player-controls .time{
  font-size:14px;
  font-weight:700;
}
.player-controls .seek-range{
  flex:1;
  min-width:0;
  height:20px;
}
.player-controls .seek-range::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#7478ff 0 var(--range-fill),#2b2746 var(--range-fill) 100%);
}
.player-controls .seek-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:8px;
  height:20px;
  margin-top:-6px;
  border:0;
  border-radius:999px;
  background:#fff;
  box-shadow:none;
}
.player-controls .seek-range::-moz-range-track{
  height:8px;
  border:0;
  border-radius:999px;
  background:#2b2746;
}
.player-controls .seek-range::-moz-range-progress{
  height:8px;
  border-radius:999px;
  background:#7478ff;
}
.player-controls .seek-range::-moz-range-thumb{
  width:8px;
  height:20px;
  border:0;
  border-radius:999px;
  background:#fff;
  box-shadow:none;
}
@media(max-width:1000px){
  .player-controls{min-height:44px;height:44px;padding:0 12px;gap:10px}
  .player-controls button{width:30px;height:30px}
  .player-controls img{width:20px;height:20px}
  #playFirst .pause-icon{width:17px;height:17px}
  .player-controls .time{font-size:13px}
}


/* Player transport controls */
.player-controls{
  min-height:38px;
  height:38px;
  gap:8px;
  padding:0 13px;
}
.player-controls button{
  width:20px;
  height:20px;
  padding:0;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.player-controls button:hover img,
.player-controls button:focus-visible img{opacity:1}
.player-controls img{
  width:20px;
  height:20px;
  opacity:1;
}
#playFirst .play-icon,
#playFirst .pause-icon,
#playNext img{width:20px;height:20px}
.player-controls .time{
  font-size:13px;
  line-height:1;
  font-weight:600;
}
.player-controls .seek-range{
  flex:1;
  min-width:0;
  height:20px;
}
.player-controls .seek-range::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#7478ff 0 var(--range-fill),#2b2746 var(--range-fill) 100%);
}
.player-controls .seek-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:8px;
  height:20px;
  margin-top:-6px;
  border:0;
  border-radius:999px;
  background:#fff;
  box-shadow:none;
}
.player-controls .seek-range::-moz-range-track{
  height:8px;
  border:0;
  border-radius:999px;
  background:#2b2746;
}
.player-controls .seek-range::-moz-range-progress{
  height:8px;
  border-radius:999px;
  background:#7478ff;
}
.player-controls .seek-range::-moz-range-thumb{
  width:8px;
  height:20px;
  border:0;
  border-radius:999px;
  background:#fff;
  box-shadow:none;
}
.player-meta-text strong,
.browser-header h1,
.result-section h2{font-family:var(--font-display)}
@media(max-width:1000px){
  .player-controls{min-height:36px;height:36px;padding:0 11px;gap:8px}
  .player-controls button{width:19px;height:19px}
  .player-controls img,#playFirst .play-icon,#playFirst .pause-icon,#playNext img{width:19px;height:19px}
  .player-controls .time{font-size:12px}
}


/* Track information modal */
.track-information-modal{
  width:min(400px,calc(100vw - 32px));
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:#110d25;
  box-shadow:0 20px 55px rgba(0,0,0,.48);
  overflow:hidden;
}
.track-information-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px 14px;
}
.track-information-header h2{
  margin:0;
  font-family:"Okine","Inter",Arial,sans-serif;
  font-size:19px;
  font-weight:500;
  color:#fff;
}
.track-information-close{
  width:30px;
  height:30px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:25px;
  line-height:1;
  cursor:pointer;
  opacity:.82;
}
.track-information-close:hover,.track-information-close:focus-visible{opacity:1}
.track-information-list{
  margin:0;
  padding:0 20px 18px;
}
.track-information-list div{
  padding:12px 0 11px;
  border-top:1px solid rgba(255,255,255,.12);
}
.track-information-list dt{
  margin:0 0 5px;
  color:#9c94b7;
  font-size:12px;
  font-weight:600;
}
.track-information-list dd{
  margin:0;
  color:#fff;
  font-size:15px;
  font-weight:600;
  overflow-wrap:anywhere;
}

/* Track information viewport overlay and multi-row selection */
.track-information-backdrop{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(3,1,12,.72);
}
.track-information-backdrop.hidden{display:none!important}
.song-row.selected,
.song-row.selected:hover{
  background:#36205b;
  box-shadow:inset 3px 0 0 var(--pink);
}
.track-information-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:0 20px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.track-information-summary div{
  display:flex;
  min-height:68px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.track-information-summary div+div{border-left:1px solid rgba(255,255,255,.12)}
.track-information-summary span{
  color:#9c94b7;
  font-size:12px;
  font-weight:600;
}
.track-information-summary strong{
  color:#fff;
  font-size:16px;
  font-weight:600;
}
.track-information-multiple{
  min-height:260px;
  display:grid;
  place-items:center;
  padding:24px;
  color:#9c94b7;
  font-size:14px;
  font-weight:600;
  text-align:center;
}

/* Queue table, queue actions and singer editor */
.queue-column-head{
  min-height:30px;
  display:grid;
  grid-template-columns:30px 38px minmax(0,1.3fr) minmax(90px,.9fr) minmax(78px,.65fr) 28px;
  align-items:center;
  gap:0;
  padding:0 6px;
  border-bottom:1px solid var(--border);
  background:#09051d;
  color:#9c94b7;
  font-size:11px;
  font-weight:600;
}
.queue-item{
  min-height:48px;
  height:48px;
  display:grid;
  grid-template-columns:30px 38px minmax(0,1.3fr) minmax(90px,.9fr) minmax(78px,.65fr) 28px;
  align-items:center;
  padding:0 6px;
  gap:0;
}
.queue-number{
  color:#d8d2e7;
  font-size:12px;
  text-align:center;
}
.queue-item img.cover{
  width:30px;
  height:30px;
  margin-left:2px;
  border-radius:2px;
}
.queue-main{
  min-width:0;
  padding:0 8px;
}
.queue-main strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
}
.queue-main span{display:none}
.queue-artist,.queue-singer{
  min-width:0;
  padding:0 8px;
  color:#f4f1fa;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.queue-item>button{
  width:26px;
  height:28px;
  display:grid;
  place-items:center;
}
.queue-item>button img{width:14px}
.queue-modify-backdrop{
  position:fixed;
  inset:0;
  z-index:1250;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(3,1,12,.72);
}
.queue-modify-backdrop.hidden{display:none!important}
.queue-modify-modal{
  width:min(360px,calc(100vw - 32px));
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:#110d25;
  box-shadow:0 20px 55px rgba(0,0,0,.48);
  overflow:hidden;
}
.queue-modify-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.queue-modify-header h2{
  min-width:0;
  margin:0;
  color:#fff;
  font-family:"Okine","Inter",Arial,sans-serif;
  font-size:18px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.queue-modify-close{
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  opacity:.82;
}
.queue-modify-close:hover,.queue-modify-close:focus-visible{opacity:1}
.queue-modify-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:18px 20px;
  color:#cfc8dc;
  font-size:13px;
  font-weight:600;
}
.queue-modify-field input{
  width:100%;
  min-height:38px;
  border:1px solid #4b4267;
  border-radius:4px;
  background:#0b081b;
  color:#fff;
  padding:0 11px;
  outline:0;
}
.queue-modify-field input:focus{border-color:var(--pink)}
.queue-modify-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:0 20px 18px;
}
.queue-modify-actions button{
  min-height:34px;
  padding:0 14px;
  border:1px solid var(--pink);
  border-radius:4px;
  background:var(--pink);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.queue-modify-actions .secondary{
  border-color:#4b4267;
  background:transparent;
}
@media(max-width:1000px){
  .queue-column-head,.queue-item{
    grid-template-columns:26px 34px minmax(0,1fr) minmax(72px,.7fr) 28px;
  }
  .queue-column-head span:nth-child(4),.queue-artist{display:none}
}

/* Track information reference layout */
.track-information-modal{
  width:min(400px,calc(100vw - 32px));
  max-height:min(680px,calc(100vh - 32px));
  overflow:auto;
}
.track-information-tabs{
  display:flex;
  gap:8px;
  padding:8px 16px 18px;
}
.track-information-tabs span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 16px;
  border:1px solid #5a5276;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:700;
}
.track-information-tabs span.active{
  border-color:var(--pink);
  background:#651047;
}
.track-information-summary{
  margin:0 16px;
}
.track-information-list{
  padding:0 16px 18px;
}
.track-information-list div:first-child{
  border-top:0;
}
.track-information-multiple{
  min-height:250px;
}

/* Private playlist create, rename, and delete dialogs */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:3200;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(3,1,14,.72);
  backdrop-filter:blur(2px);
}
.modal-backdrop.hidden{display:none!important}
.create-playlist-modal{
  width:min(430px,calc(100vw - 36px));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  background:#100c25;
  color:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 0 1px rgba(239,11,133,.08) inset;
}
.create-playlist-modal h2{
  margin:0;
  padding:20px 22px 13px;
  font-size:18px;
  line-height:1.2;
  font-weight:700;
}
.create-playlist-body{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 22px 17px;
}
.create-playlist-badge{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#ef0b85,#ad075e);
  color:#fff;
  font-size:18px;
  font-weight:800;
}
.create-playlist-body label{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#b9b1ca;
  font-size:13px;
  line-height:1.35;
}
.create-playlist-body input{
  width:100%;
  height:38px;
  padding:0 11px;
  border:1px solid #4a4163;
  border-radius:4px;
  outline:0;
  background:#09071a;
  color:#fff;
  font-size:14px;
}
.create-playlist-body input:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 2px rgba(239,11,133,.16);
}
.create-playlist-error{
  margin:0 22px 10px;
  padding:9px 10px;
  border:1px solid rgba(255,75,109,.42);
  border-radius:4px;
  background:rgba(255,43,103,.1);
  color:#ff9ab8;
  font-size:12px;
  line-height:1.35;
}
.create-playlist-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:13px 22px 18px;
  border-top:1px solid rgba(255,255,255,.09);
}
.create-playlist-actions button{
  min-width:82px;
  height:34px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:4px;
  background:#221936;
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.create-playlist-actions button:hover,
.create-playlist-actions button:focus-visible{
  outline:0;
  border-color:var(--pink);
  background:#332047;
}
.create-playlist-actions button:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.create-playlist-actions button:not(.secondary):not(.danger){
  border-color:var(--pink);
  background:linear-gradient(180deg,#ef0b85,#c2086f);
}
.create-playlist-actions button:not(.secondary):not(.danger):hover,
.create-playlist-actions button:not(.secondary):not(.danger):focus-visible{
  background:linear-gradient(180deg,#ff2a9d,#df087d);
}
.delete-playlist-modal .create-playlist-body{
  align-items:flex-start;
}
.delete-playlist-modal .delete-playlist-copy{
  padding-top:5px;
  color:#e5dfef;
}
.create-playlist-actions .danger{
  border:1px solid rgba(255,43,103,.52);
  background:rgba(255,43,103,.12);
  color:#ff6d98;
}
.create-playlist-actions .danger:hover,
.create-playlist-actions .danger:focus-visible{
  border-color:#ff2b67;
  background:rgba(255,43,103,.2);
  color:#fff;
}

/* Queue ordering and desktop interaction refinements */
.draggable-track,
.draggable-track:active,
.track-card,
.song-row,
.queue-item,
.draggable-queue-item,
.draggable-queue-item:active{
  cursor:default;
}
.track-card .search-track-artist{
  display:block;
  max-width:100%;
  margin-top:3px;
  color:#b9b0ca;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.draggable-queue-item{
  position:relative;
}
.draggable-queue-item.is-dragging{
  opacity:.52;
}
.queue-item.queue-drop-before::before,
.queue-item.queue-drop-after::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  height:2px;
  z-index:3;
  background:var(--pink);
  box-shadow:0 0 8px rgba(239,11,133,.76);
  pointer-events:none;
}
.queue-item.queue-drop-before::before{top:-1px}
.queue-item.queue-drop-after::after{bottom:-1px}

/* Queue row hover feedback */
.queue-item{
  transition:background .14s ease,box-shadow .14s ease;
}
.queue-item:hover{
  background:#24143e;
  box-shadow:inset 3px 0 0 var(--pink);
}

/* Resizable sticky catalogue and queue headers */
:root{
  --song-title-width:232px;
  --song-artist-width:176px;
  --song-version-width:112px;
  --song-duration-width:64px;
  --song-last-width:110px;
  --queue-title-width:224px;
  --queue-artist-width:160px;
  --queue-singer-width:96px;
}
.song-table{
  position:relative;
  overflow:auto;
}
.song-head{
  position:sticky;
  top:0;
  z-index:20;
  min-height:40px;
  height:40px;
  background:#08051b;
  box-shadow:inset 0 -1px 0 var(--border);
  color:#c9c2d8;
  font-size:14px;
  font-weight:400;
  line-height:16px;
}
.song-head,.song-row{
  grid-template-columns:50px minmax(130px,var(--song-title-width)) minmax(100px,var(--song-artist-width)) minmax(84px,var(--song-version-width)) minmax(68px,var(--song-duration-width)) minmax(88px,var(--song-last-width)) 34px;
}
.song-head>span,
.queue-column-head>span{
  position:relative;
  min-width:0;
  height:100%;
  overflow:visible;
}
.table-head-cell{
  display:flex;
  height:calc(100% - 8px);
  margin:4px 0;
  padding:4px 0;
  align-items:center;
}
.table-head-label{
  display:block;
  width:100%;
  min-width:0;
  overflow:hidden;
  padding:0 8px;
  border-right:1px solid rgba(255,255,255,.10);
  color:inherit;
  font:inherit;
  line-height:16px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.song-head>span:last-child .table-head-label,
.queue-column-head>span:last-child .table-head-label{border-right:0}
.song-row{height:56px}
.song-row img.cover{width:40px;height:40px;margin-left:5px}
.song-row span{padding:0 8px}
.song-row .artist,.song-row .version,.song-row .duration,.song-row .last{font-size:14px;line-height:1.15}
.queue-header{flex:0 0 auto}
.queue-column-head{
  position:sticky;
  top:0;
  z-index:20;
  min-height:40px;
  height:40px;
  padding:0;
  background:#09051d;
  box-shadow:inset 0 -1px 0 var(--border);
  color:#9c94b7;
  font-size:14px;
  font-weight:400;
  line-height:16px;
}
.queue-column-head,.queue-item{
  grid-template-columns:30px 38px minmax(120px,var(--queue-title-width)) minmax(90px,var(--queue-artist-width)) minmax(76px,var(--queue-singer-width)) 28px;
}
.queue-item{
  min-height:36px;
  height:36px;
  padding:0;
}
.queue-item img.cover{width:24px;height:24px;margin-left:7px}
.queue-main,.queue-artist,.queue-singer{padding:0 8px}
.queue-main strong,.queue-artist,.queue-singer,.queue-number{font-size:12px}
.table-column-resizer{
  position:absolute;
  top:0;
  right:-8px;
  z-index:25;
  width:16px;
  height:100%;
  cursor:col-resize;
  touch-action:none;
  user-select:none;
}
.table-column-resizer:focus-visible{
  outline:1px solid var(--pink);
  outline-offset:-5px;
}
body.is-resizing-table-columns,
body.is-resizing-table-columns *{cursor:col-resize!important;user-select:none!important}
@media(max-width:1000px){
  .song-head,.song-row{
    grid-template-columns:42px minmax(130px,var(--song-title-width)) minmax(100px,var(--song-artist-width)) minmax(84px,var(--song-version-width)) minmax(68px,var(--song-duration-width)) 0 30px;
  }
  .song-head>span:nth-child(6),.song-row .last{display:none}
  .queue-column-head,.queue-item{
    grid-template-columns:26px 34px minmax(120px,var(--queue-title-width)) minmax(76px,var(--queue-singer-width)) 28px;
  }
  .queue-column-head>span:nth-child(4),.queue-artist{display:none}
  .queue-column-head>span:nth-child(5){grid-column:4}
  .queue-column-head>span:nth-child(6){grid-column:5}
}

/* Split-pane and table layout refinement based on the production player pattern */
.app-shell{position:relative}
.browser-pane,.right-pane{overflow:hidden}
.song-table{min-width:0;overflow:auto}
.song-rows{width:fit-content;min-width:100%}
.song-head,.song-row{
  width:max-content;
  min-width:100%;
  grid-template-columns:50px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(72px,var(--song-duration-width)) minmax(96px,var(--song-last-width)) minmax(34px,1fr);
}
.queue-column-head,.queue-item{
  width:100%;
  min-width:0;
  grid-template-columns:30px 38px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,var(--queue-singer-width)) minmax(28px,1fr);
}
.table-column-resizer{
  top:0;
  right:-8px;
  width:16px;
  height:100%;
  background:transparent;
}
.table-column-resizer::before{
  content:"";
  position:absolute;
  top:4px;
  right:7px;
  bottom:4px;
  width:1px;
  border-radius:999px;
  background:var(--pink);
  opacity:0;
  transition:opacity .18s ease;
}
.table-column-resizer:hover::before,
.table-column-resizer.is-dragging::before,
.table-column-resizer:focus-visible::before{opacity:1}

/* Splitters use a one-pixel resting divider with a larger invisible grab zone. */
.layout-splitter{
  z-index:45;
  background:var(--border);
}
.layout-splitter::after{display:none}
.layout-splitter::before{
  content:"";
  position:absolute;
  z-index:46;
  border-radius:999px;
  background:var(--pink);
  opacity:0;
  transition:opacity .2s ease;
}
.layout-splitter:hover::before,
.layout-splitter.is-dragging::before,
.layout-splitter:focus-visible::before{opacity:1}
.layout-splitter-main{
  top:var(--top);
  bottom:0;
  left:calc(100% - var(--right));
  width:1px;
}
.layout-splitter-main::before{top:8px;right:-3px;bottom:8px;left:-3px}
.layout-splitter-player{
  left:0;
  right:0;
  top:var(--player-height,320px);
  height:1px;
}
.layout-splitter-player::before{top:-3px;right:8px;bottom:-3px;left:8px}

/* The actual pane sizes drive table density, rather than only viewport media queries. */
.browser-pane.is-compact .song-head,
.browser-pane.is-compact .song-row{
  grid-template-columns:46px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(72px,var(--song-duration-width)) minmax(30px,1fr);
}
.browser-pane.is-compact .song-head>span:nth-child(6),
.browser-pane.is-compact .song-row .last{display:none}
.browser-pane.is-narrow .song-head,
.browser-pane.is-narrow .song-row{
  grid-template-columns:42px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(72px,var(--song-duration-width)) minmax(30px,1fr);
}
.browser-pane.is-narrow .song-head>span:nth-child(4),
.browser-pane.is-narrow .song-row .version{display:none}
.browser-pane.is-narrow .song-row{height:52px}
.browser-pane.is-narrow .song-row img.cover{width:36px;height:36px;margin-left:4px}

.right-pane.is-compact .queue-column-head,
.right-pane.is-compact .queue-item{
  grid-template-columns:28px 34px minmax(124px,var(--queue-title-width)) minmax(80px,var(--queue-singer-width)) minmax(28px,1fr);
}
.right-pane.is-compact .queue-column-head>span:nth-child(4),
.right-pane.is-compact .queue-artist{display:none}
.right-pane.is-compact .queue-column-head>span:nth-child(5){grid-column:4}
.right-pane.is-compact .queue-column-head>span:nth-child(6){grid-column:5}
.right-pane.is-narrow .queue-header{padding-inline:8px}
.right-pane.is-narrow .queue-header label{width:116px}
.right-pane.is-player-short .player-toolbar{height:46px}
.right-pane.is-player-short .player-controls{min-height:40px;height:40px}
.right-pane.is-player-short .player-meta{padding-block:6px}
.browser-pane.is-compact [data-column="duration"]>.table-column-resizer{display:none}
.browser-pane.is-narrow [data-column="artist"]>.table-column-resizer,
.browser-pane.is-narrow [data-column="version"]>.table-column-resizer{display:none}
.right-pane.is-compact [data-table-resize="queue"]{display:none}


/* v4.1 - reliable song-list dividers and context-menu-only row actions */
.song-head,.song-row{
  grid-template-columns:50px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(72px,var(--song-duration-width)) minmax(96px,1fr)!important;
}
.queue-column-head,.queue-item{
  grid-template-columns:30px 38px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,1fr)!important;
}
.song-head>span,
.queue-column-head>span{display:block!important}
.song-row .version,.song-row .last,.queue-artist{display:block!important}
.table-column-resizer{
  display:block!important;
  pointer-events:auto!important;
  cursor:col-resize!important;
}
.song-row .add,
.queue-item>button{display:none!important}
.song-row{cursor:default}
.queue-item{cursor:default}
@media(max-width:1000px){
  .song-head,.song-row{
    grid-template-columns:50px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(72px,var(--song-duration-width)) minmax(96px,1fr)!important;
  }
  .queue-column-head,.queue-item{
    grid-template-columns:30px 38px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,1fr)!important;
  }
}
.browser-pane.is-compact .song-head,
.browser-pane.is-compact .song-row,
.browser-pane.is-narrow .song-head,
.browser-pane.is-narrow .song-row{
  grid-template-columns:50px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(72px,var(--song-duration-width)) minmax(96px,1fr)!important;
}
.right-pane.is-compact .queue-column-head,
.right-pane.is-compact .queue-item{
  grid-template-columns:30px 38px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,1fr)!important;
}


/* v4.2 - shared queue/list header geometry and removed-action safety */
.song-head,
.queue-column-head{
  display:grid;
  align-items:center;
  gap:0;
  padding:0;
  overflow:visible;
}
.song-head{
  grid-template-columns:50px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(72px,var(--song-duration-width)) minmax(96px,1fr)!important;
}
.queue-column-head{
  grid-template-columns:30px 38px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,1fr)!important;
}
/* Old catalogue rules targeted every nested span. Reset them so the list header
   uses the exact same cell and invisible-resizer geometry as the queue header. */
.song-head span,
.queue-column-head span{
  box-sizing:border-box;
}
.song-head>span,
.queue-column-head>span{
  position:relative;
  display:block!important;
  min-width:0;
  height:100%;
  padding:0!important;
  overflow:visible!important;
  white-space:normal;
}
.song-head .table-head-cell,
.queue-column-head .table-head-cell{
  display:flex;
  height:calc(100% - 8px);
  margin:4px 0;
  padding:4px 0!important;
  align-items:center;
  overflow:visible;
}
.song-head .table-head-label,
.queue-column-head .table-head-label{
  display:block;
  width:100%;
  min-width:0;
  padding:0 8px!important;
  overflow:hidden!important;
  border-right:1px solid rgba(255,255,255,.10);
  color:inherit;
  line-height:16px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.song-head>span:last-child .table-head-label,
.queue-column-head>span:last-child .table-head-label{
  border-right:0;
}
.song-head .table-column-resizer,
.queue-column-head .table-column-resizer{
  position:absolute;
  top:0;
  right:-8px;
  z-index:25;
  display:block!important;
  width:16px;
  height:100%;
  padding:0!important;
  overflow:visible!important;
  cursor:col-resize!important;
  pointer-events:auto!important;
  touch-action:none;
  user-select:none;
}
.song-head .table-column-resizer::before,
.queue-column-head .table-column-resizer::before{
  content:"";
  position:absolute;
  top:4px;
  right:7px;
  bottom:4px;
  width:1px;
  border-radius:999px;
  background:var(--pink);
  opacity:0;
  transition:opacity .18s ease;
}
.song-head .table-column-resizer:hover::before,
.song-head .table-column-resizer.is-dragging::before,
.song-head .table-column-resizer:focus-visible::before,
.queue-column-head .table-column-resizer:hover::before,
.queue-column-head .table-column-resizer.is-dragging::before,
.queue-column-head .table-column-resizer:focus-visible::before{
  opacity:1;
}
.song-row{
  grid-template-columns:50px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(72px,var(--song-duration-width)) minmax(96px,1fr)!important;
}
.queue-item{
  grid-template-columns:30px 38px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,1fr)!important;
}


/* v4.3 - KaraFun-reference public density pass
   Shared 4px spacing rhythm, fixed sticky list headers, compact queue density,
   and pane-aware sizing. This block is authoritative over older experiments. */
:root{
  --top:48px;
  --sidebar:240px;
  --song-title-width:249px;
  --song-artist-width:321px;
  --song-version-width:120px;
  --song-duration-width:72px;
  --song-last-width:142px;
  --queue-title-width:224px;
  --queue-artist-width:160px;
  --queue-singer-width:96px;
}
html,body{font-size:14px;line-height:1.5}
.topbar{height:48px;padding:0 8px;gap:8px}
.top-logo{height:40px}
.sidebar{padding:8px 0}
.sidebar a{height:40px;padding:0 8px;gap:8px;font-size:14px;font-weight:500;border-left-width:0}
.sidebar a img{width:24px;height:24px}
.side-label{margin:16px 8px 4px;font-size:14px;font-weight:600;line-height:20px}
.browser-header{height:64px;padding:0 16px;gap:16px;background:#09051d}
.browser-header h1{margin:0;font-family:"Okine Sans","Okine","Inter",Arial,sans-serif;font-size:18px;font-weight:500;line-height:24px}
.icon-button{width:32px;height:32px;border-radius:999px}
.icon-button img{width:20px;height:20px}

.song-table{position:relative;min-width:0;overflow:auto;background:#070419}
.song-rows{width:max-content;min-width:100%}
.song-head,.song-row{
  display:grid;
  width:max-content;
  min-width:100%;
  grid-template-columns:56px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(64px,var(--song-duration-width)) minmax(104px,var(--song-last-width)) minmax(0,1fr)!important;
  align-items:center;
  gap:0;
  padding:0;
}
.song-head{
  position:sticky;
  top:0;
  z-index:20;
  height:40px;
  min-height:40px;
  color:#c9c2d8;
  background:#08051b;
  box-shadow:inset 0 -1px 0 var(--border);
  font-size:14px;
  font-weight:400;
  line-height:16px;
}
.song-head>span,.queue-column-head>span{position:relative;display:block!important;min-width:0;height:100%;padding:0!important;overflow:visible!important}
.song-head .table-head-cell,.queue-column-head .table-head-cell{display:flex;height:calc(100% - 8px);margin:4px 0;padding:4px 0!important;align-items:center;overflow:visible}
.song-head .table-head-label,.queue-column-head .table-head-label{display:block;width:100%;min-width:0;padding:0 8px!important;overflow:hidden!important;border-right:1px solid rgba(255,255,255,.10);color:inherit;font:inherit;line-height:16px;text-overflow:ellipsis;white-space:nowrap}
.song-head>span:last-child .table-head-label,.queue-column-head>span:last-child .table-head-label{border-right:0}
.song-row{height:56px;color:#fff;background:var(--row);font-size:14px;font-weight:400;line-height:20px;border-bottom:0;cursor:default}
.song-row:nth-child(odd){background:rgba(255,255,255,.025)}
.song-row:nth-child(even){background:transparent}
.song-row:hover{background:#24143e}
.song-row img.cover{width:40px;height:40px;margin-left:8px;border-radius:4px;object-fit:cover}
.song-row span,.song-row .artist-link{min-width:0;height:100%;display:flex;align-items:center;padding:0 8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important;line-height:20px!important}
.song-row .duration,.song-row .last{font-variant-numeric:tabular-nums}
.song-row .add{display:none!important}

.queue-header{height:44px;min-height:44px;padding:8px 8px;gap:8px;font-size:14px;background:#09051d}
.queue-header strong{font-size:14px;font-weight:600;line-height:28px}
.queue-header span{font-size:12px}
.queue-header label{height:28px;width:176px;padding:2px 8px;gap:12px;border-color:#282043;border-radius:4px;background:#08051b}
.queue-header img{width:16px;height:16px}
.queue-header input{font-size:12px;line-height:24px}
.queue-list{min-height:0;max-height:none;overflow:auto;background:#070419}
.queue-column-head,.queue-item{
  display:grid;
  width:max-content;
  min-width:100%;
  grid-template-columns:48px 40px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,var(--queue-singer-width)) minmax(0,1fr)!important;
  align-items:center;
  gap:0;
  padding:0;
}
.queue-column-head{position:sticky;top:0;z-index:20;height:40px;min-height:40px;background:#09051d;box-shadow:inset 0 -1px 0 var(--border);color:#9c94b7;font-size:14px;font-weight:400;line-height:16px}
.queue-item{height:36px;min-height:36px;color:#fff;background:transparent;border-bottom:1px solid var(--border);font-size:14px;line-height:20px;cursor:default}
.queue-item:hover{background:#24143e;box-shadow:inset 3px 0 0 var(--pink)}
.queue-number{padding:0 8px;color:#d8d2e7;font-size:14px;text-align:center;font-variant-numeric:tabular-nums}
.queue-item img.cover{width:24px;height:24px;margin-left:8px;border-radius:4px;object-fit:cover}
.queue-main,.queue-artist,.queue-singer{min-width:0;padding:0 8px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f4f1fa;font-size:14px!important;line-height:20px!important}
.queue-main strong{font-size:14px!important;font-weight:400;line-height:20px}
.queue-main span{display:none}
.queue-item>button{display:none!important}

.table-column-resizer{position:absolute;top:0;right:-8px;z-index:25;display:block!important;width:16px;height:100%;padding:0!important;overflow:visible!important;background:transparent;cursor:col-resize!important;pointer-events:auto!important;touch-action:none;user-select:none}
.table-column-resizer::before{content:"";position:absolute;top:4px;right:7px;bottom:4px;width:1px;background:var(--pink);opacity:0;transition:opacity .15s ease}
.table-column-resizer:hover::before,.table-column-resizer.is-dragging::before,.table-column-resizer:focus-visible::before{opacity:1}

.layout-splitter{background:var(--border)}
.layout-splitter-main{left:calc(100% - var(--right));width:1px}
.layout-splitter-player{top:var(--player-height,320px);height:1px}
.layout-splitter-main::before{top:0;right:-4px;bottom:0;left:-4px}
.layout-splitter-player::before{top:-4px;right:0;bottom:-4px;left:0}

/* Keep the full desktop column model while panes resize; overflow is preferable
   to silently hiding useful fields or disabling resize handles. */
@media(max-width:1360px){:root{--sidebar:200px}}
@media(max-width:1000px){
  :root{--sidebar:176px}
  .song-head,.song-row{grid-template-columns:56px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(64px,var(--song-duration-width)) minmax(104px,var(--song-last-width)) minmax(0,1fr)!important}
  .queue-column-head,.queue-item{grid-template-columns:48px 40px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,var(--queue-singer-width)) minmax(0,1fr)!important}
  .song-row .version,.song-row .last,.queue-artist{display:flex!important}
  .song-head>span,.queue-column-head>span,.table-column-resizer{display:block!important}
}
.browser-pane.is-compact .song-head,.browser-pane.is-compact .song-row,.browser-pane.is-narrow .song-head,.browser-pane.is-narrow .song-row{grid-template-columns:56px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(64px,var(--song-duration-width)) minmax(104px,var(--song-last-width)) minmax(0,1fr)!important}
.right-pane.is-compact .queue-column-head,.right-pane.is-compact .queue-item{grid-template-columns:48px 40px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,var(--queue-singer-width)) minmax(0,1fr)!important}
.browser-pane.is-compact .song-head>span,.browser-pane.is-narrow .song-head>span,.right-pane.is-compact .queue-column-head>span{display:block!important}
.browser-pane.is-compact .song-row .last,.browser-pane.is-narrow .song-row .last,.browser-pane.is-narrow .song-row .version,.right-pane.is-compact .queue-artist{display:flex!important}
.browser-pane.is-compact .table-column-resizer,.browser-pane.is-narrow .table-column-resizer,.right-pane.is-compact [data-table-resize="queue"]{display:block!important}

:root{--song-singer-width:88px}
.song-table .history-singer-col{display:none!important}
.song-table.is-history .song-head,.song-table.is-history .song-row{grid-template-columns:56px minmax(132px,var(--song-title-width)) minmax(108px,var(--song-artist-width)) minmax(88px,var(--song-version-width)) minmax(64px,var(--song-duration-width)) minmax(88px,var(--song-singer-width)) minmax(104px,var(--song-last-width)) minmax(0,1fr)!important}
.song-table.is-history .song-head .history-singer-col{display:block!important}
.song-table.is-history .song-row .history-singer-col{display:flex!important}


/* v4.4 - centred version cells and queue Version column */
:root{
  --queue-version-width:112px;
}
.song-row .version{
  display:flex!important;
  align-items:center!important;
  height:100%!important;
  padding:0 8px!important;
  overflow:hidden;
  color:#f4f1fa;
  font-size:14px!important;
  line-height:20px!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.queue-column-head,.queue-item{
  grid-template-columns:48px 40px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,var(--queue-singer-width)) minmax(88px,var(--queue-version-width))!important;
}
.queue-main,.queue-artist,.queue-singer,.queue-version{
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  padding:0 8px!important;
  overflow:hidden;
  color:#f4f1fa;
  font-size:14px!important;
  line-height:20px!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.queue-main strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:1000px){
  .queue-column-head,.queue-item{
    grid-template-columns:48px 40px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,var(--queue-singer-width)) minmax(88px,var(--queue-version-width))!important;
  }
}
.right-pane.is-compact .queue-column-head,.right-pane.is-compact .queue-item{
  grid-template-columns:48px 40px minmax(124px,var(--queue-title-width)) minmax(96px,var(--queue-artist-width)) minmax(80px,var(--queue-singer-width)) minmax(88px,var(--queue-version-width))!important;
}
.right-pane.is-compact .queue-version{display:flex!important}

/* v4.5 - pane-aware search result cards
   Search cards respond to the actual browser-pane width, not the viewport. */
.search-scroll{
  container-type:inline-size;
  container-name:search-pane;
  padding:16px;
}
.search-results{min-width:0}
.result-tabs{
  gap:8px;
  margin-bottom:16px;
}
.result-tabs button{
  height:32px;
  padding:0 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  line-height:20px;
}
.result-section{margin-bottom:24px}
.result-section h2{
  margin:0 0 8px;
  font-family:"Okine Sans","Okine","Inter",Arial,sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:20px;
}
.track-card-grid,.artist-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.track-card,.artist-card{
  min-width:0;
  border:1px solid rgba(255,255,255,.04);
  border-radius:4px;
  background:#141027;
  cursor:default;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.track-card:hover,.track-card:focus-within,.artist-card:hover,.artist-card:focus{
  background:#21153b;
  border-color:rgba(239,11,133,.45);
  box-shadow:inset 3px 0 0 var(--pink);
  outline:0;
}
.track-card{
  height:64px;
  grid-template-columns:48px minmax(0,1fr) 54px;
  gap:8px;
  padding:8px;
  align-items:center;
}
.track-card .cover{
  width:48px;
  height:48px;
  margin:0;
  border-radius:4px;
  object-fit:cover;
}
.track-card .meta{
  min-width:0;
  padding:0;
}
.track-card strong,
.track-card .search-track-artist,
.track-side time,
.track-side small{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.track-card strong{
  color:#fff;
  font-size:14px;
  font-weight:500;
  line-height:20px;
}
.track-card .search-track-artist{
  margin-top:4px;
  color:#b9b0ca;
  font-size:12px;
  font-weight:400;
  line-height:16px;
}
.track-side{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  padding:0;
  text-align:right;
}
.track-side time{
  color:#fff;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  line-height:16px;
}
.track-side small{
  color:#b9b0ca;
  font-size:11px;
  line-height:16px;
}
.artist-card{
  height:64px;
  grid-template-columns:48px minmax(0,1fr);
  gap:8px;
  padding:8px;
  align-items:center;
}
.artist-card img{
  width:48px;
  height:48px;
  margin:0;
  border-radius:4px;
  object-fit:cover;
}
.artist-card strong{
  min-width:0;
  overflow:hidden;
  color:#fff;
  font-size:14px;
  font-weight:500;
  line-height:20px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.empty-result{grid-column:1/-1;padding:12px 16px;border-radius:4px;font-size:14px;line-height:20px}
.genre-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.genre-tile span{padding:12px;font-size:14px;line-height:20px}
@container search-pane (max-width:760px){
  .track-card-grid,.artist-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .genre-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container search-pane (max-width:480px){
  .track-card-grid,.artist-card-grid{grid-template-columns:minmax(0,1fr)}
  .genre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search-scroll{padding:12px}
}

/* v2.9 - subtle public scrollbars based on the reference interface.
   Keep the interaction area comfortable while visually reducing the thumb
   to a narrow rounded line. The thumb becomes clearer only on hover. */
.app-shell{
  --kove-scrollbar-bg:#070419;
  --kove-scrollbar-thumb:rgba(108,106,133,.30);
  --kove-scrollbar-thumb-hover:#6c6a85;
}
.sidebar{--kove-scrollbar-bg:#0c0821}
.browser-pane,.song-table,.search-scroll,.playlist-landing,.queue-pane,.queue-list{--kove-scrollbar-bg:#070419}
.app-shell *{
  scrollbar-width:thin;
  scrollbar-color:rgba(108,106,133,.52) transparent;
}
.app-shell *::-webkit-scrollbar{
  width:16px;
  height:16px;
}
.app-shell *::-webkit-scrollbar-track{
  background-color:var(--kove-scrollbar-bg,#070419);
}
.app-shell *::-webkit-scrollbar-thumb{
  min-height:34px;
  background-color:var(--kove-scrollbar-thumb,rgba(108,106,133,.30));
  border:7px solid var(--kove-scrollbar-bg,#070419);
  border-radius:999px;
}
.app-shell *::-webkit-scrollbar-corner{
  background:transparent;
}
.app-shell *:hover::-webkit-scrollbar-thumb{
  background-color:var(--kove-scrollbar-thumb-hover,#6c6a85);
}
.app-shell *::-webkit-scrollbar-thumb:hover{
  background-color:var(--kove-scrollbar-thumb-hover,#6c6a85);
  border-width:5px;
}

/* v4.7 - reference-matched player and queue split layout */
.right-pane{
  position:relative;
  display:grid!important;
  grid-template-rows:minmax(210px,var(--player-height,42%)) minmax(0,1fr)!important;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#070419;
}
.player-pane{
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex!important;
  flex-direction:column;
  border-bottom:1px solid var(--border);
  background:#0a061b;
}
.player-toolbar{
  flex:0 0 64px;
  min-height:64px!important;
  height:64px!important;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 24px 8px 16px!important;
  border-bottom:1px solid var(--border);
  background:#09051d;
}
.player-toolbar-action{
  position:relative;
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  padding:0;
  border:1.5px solid #4b4267;
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#fff;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease;
}
.player-toolbar-action:hover,.player-toolbar-action:focus-visible{
  outline:0;
  border-color:#786f95;
  background:rgba(255,255,255,.08);
}
.player-toolbar-action:active{transform:scale(.92)}
.player-toolbar-action img{width:20px;height:20px;filter:brightness(0) invert(1);opacity:.9}
.player-toolbar-spacer{flex:1}
.volume-icon{width:20px!important;height:20px!important;opacity:.72}
.player-toolbar .volume-range{width:136px!important;flex:0 0 136px;height:20px!important}
.player-toolbar .volume-range::-webkit-slider-runnable-track{height:4px!important}
.player-toolbar .volume-range::-webkit-slider-thumb{width:8px!important;height:8px!important;margin-top:-2px!important}
.player-toolbar .volume-range::-moz-range-track,.player-toolbar .volume-range::-moz-range-progress{height:4px!important}
.player-toolbar .volume-range::-moz-range-thumb{width:8px!important;height:8px!important}
.player-media{
  flex:1 1 auto!important;
  min-height:112px!important;
  aspect-ratio:auto!important;
  overflow:hidden;
  background:#000;
}
.player-media>img,.player-output{width:100%;height:100%;object-fit:contain}
.fullscreen-button{opacity:0;transition:opacity .15s ease}
.player-media:hover .fullscreen-button,.fullscreen-button:focus-visible{opacity:1}
.player-meta{
  flex:0 0 auto;
  min-height:58px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 16px!important;
  border-top:1px solid var(--border);
  background:#0a061b;
}
.player-meta-text{min-width:0;gap:3px!important}
.player-meta-text strong{font-size:16px!important;font-weight:600;line-height:20px!important}
.player-meta-text span{font-size:14px!important;line-height:18px!important;color:#9d94b7}
.player-version{flex:0 0 auto;padding:3px 7px!important;border:1px solid #4b4267;border-radius:4px;background:#0b071d;color:#e0daeb;font-size:11px!important;line-height:16px!important}
.player-status[hidden]{display:none!important}
.player-status{
  flex:0 0 auto;
  min-height:28px!important;
  height:auto!important;
  display:flex;
  align-items:center;
  padding:4px 16px!important;
  border-top:1px solid var(--border);
  color:#b7afc9;
  background:#0a061b;
  font-size:12px!important;
  line-height:18px!important;
}
.player-controls{
  flex:0 0 42px;
  min-height:42px!important;
  height:42px!important;
  display:flex;
  align-items:center;
  gap:10px!important;
  padding:0 16px 8px!important;
  border-top:0!important;
  background:#0a061b;
}
.player-controls button{width:20px!important;height:20px!important;flex:0 0 20px}
.player-controls img,#playFirst .play-icon,#playFirst .pause-icon,#playNext img{width:20px!important;height:20px!important}
.player-controls .time{font-size:14px!important;font-weight:500!important;line-height:20px!important;font-variant-numeric:tabular-nums}
.player-controls .seek-range{height:24px!important}
.player-controls .seek-range::-webkit-slider-runnable-track{height:8px!important;border-radius:4px!important;background:linear-gradient(90deg,#636ffa 0 var(--range-fill),#2b2746 var(--range-fill) 100%)!important}
.player-controls .seek-range::-webkit-slider-thumb{width:4px!important;height:20px!important;margin-top:-6px!important;border-radius:999px!important}
.player-controls .seek-range::-moz-range-track,.player-controls .seek-range::-moz-range-progress{height:8px!important;border-radius:4px!important}
.player-controls .seek-range::-moz-range-progress{background:#636ffa!important}
.player-controls .seek-range::-moz-range-thumb{width:4px!important;height:20px!important;border-radius:999px!important}
.queue-pane{
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex!important;
  flex-direction:column;
  background:#070419;
}
.queue-header{
  flex:0 0 44px;
  min-height:44px!important;
  height:44px!important;
  display:flex;
  align-items:center;
  gap:8px!important;
  padding:8px!important;
  border-bottom:1px solid var(--border);
  background:#09051d;
}
.queue-header strong{margin-left:8px;font-size:14px!important;font-weight:600!important;line-height:28px!important}
.queue-header span{font-size:12px!important;line-height:20px!important;color:#9c94b4}
.queue-header label{margin-left:auto;width:176px!important;height:28px!important;padding:2px 8px!important;gap:12px!important;border:1px solid #282043!important;border-radius:4px;background:#08051b}
.queue-header label:hover{border-color:#554674!important}
.queue-header img{width:16px!important;height:16px!important;opacity:.72}
.queue-header input{font-size:12px!important;line-height:24px!important}
.queue-column-head{flex:0 0 40px}
.queue-list{flex:1 1 auto;min-height:0!important;max-height:none!important;overflow:auto!important}
.queue-empty,.queue-drop-hint{inset:84px 0 0!important}
.layout-splitter-player{top:var(--player-height,42%)!important;height:1px!important}
.layout-splitter-player::before{top:-5px!important;right:0!important;bottom:-5px!important;left:0!important}
.right-pane.is-player-short .player-toolbar{flex-basis:52px;min-height:52px!important;height:52px!important;padding-top:6px!important;padding-bottom:6px!important}
.right-pane.is-player-short .player-media{min-height:88px!important}
.right-pane.is-player-short .player-meta{min-height:48px!important;padding:5px 12px!important}
.right-pane.is-player-short .player-meta-text strong{font-size:14px!important;line-height:18px!important}
.right-pane.is-player-short .player-meta-text span{font-size:12px!important;line-height:16px!important}
.right-pane.is-player-short .player-controls{flex-basis:36px;min-height:36px!important;height:36px!important;padding:0 12px 5px!important}
.right-pane.is-narrow .player-toolbar{padding-inline:12px!important}
.right-pane.is-narrow .player-toolbar .volume-range{width:104px!important;flex-basis:104px}
.right-pane.is-narrow .queue-header label{width:136px!important}
@media(max-width:1000px){
  .player-toolbar{flex-basis:56px;min-height:56px!important;height:56px!important;padding:7px 14px!important}
  .player-toolbar-action{width:34px;height:34px;flex-basis:34px}
  .player-toolbar-action img{width:18px;height:18px}
  .player-meta{min-height:52px!important;padding:6px 14px!important}
  .player-controls{padding-inline:14px!important}
}

/* v4.8 - queue header/body alignment reference match
   Keep the header and body on one shared grid, with KaraFun-style 8px cell
   padding and consistent vertical centring. */
:root{
  --queue-rank-width:48px;
  --queue-cover-width:40px;
  --queue-title-width:224px;
  --queue-artist-width:160px;
  --queue-singer-width:96px;
  --queue-version-width:112px;
}
.queue-column-head,
.queue-item{
  display:grid!important;
  width:max-content!important;
  min-width:100%!important;
  grid-template-columns:
    var(--queue-rank-width)
    var(--queue-cover-width)
    minmax(124px,var(--queue-title-width))
    minmax(96px,var(--queue-artist-width))
    minmax(80px,var(--queue-singer-width))
    minmax(88px,var(--queue-version-width))!important;
  align-items:center!important;
  gap:0!important;
  padding:0!important;
}
.queue-column-head{
  height:40px!important;
  min-height:40px!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:16px!important;
}
.queue-column-head>span{
  position:relative!important;
  display:block!important;
  height:100%!important;
  min-width:0!important;
  padding:0!important;
  overflow:visible!important;
}
.queue-column-head .table-head-cell{
  display:flex!important;
  height:calc(100% - 8px)!important;
  margin:4px 0!important;
  padding:4px 0!important;
  align-items:center!important;
}
.queue-column-head .table-head-label{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding:0 8px!important;
  overflow:hidden!important;
  border-right:1px solid rgba(255,255,255,.10)!important;
  color:inherit!important;
  font:inherit!important;
  line-height:16px!important;
  text-align:left!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.queue-column-head>span:nth-child(1) .table-head-label,
.queue-column-head>span:nth-child(2) .table-head-label{
  text-align:center!important;
}
.queue-column-head>span:last-child .table-head-label{
  border-right:0!important;
}
.queue-item{
  height:36px!important;
  min-height:36px!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:20px!important;
}
.queue-number{
  display:flex!important;
  height:100%!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 8px!important;
  color:#d8d2e7!important;
  font-size:14px!important;
  font-variant-numeric:tabular-nums!important;
  line-height:20px!important;
  text-align:center!important;
}
.queue-item img.cover{
  display:block!important;
  width:24px!important;
  height:24px!important;
  margin:0 auto!important;
  border-radius:4px!important;
  object-fit:cover!important;
}
.queue-main,
.queue-artist,
.queue-singer,
.queue-version{
  display:flex!important;
  height:100%!important;
  min-width:0!important;
  align-items:center!important;
  padding:0 8px!important;
  overflow:hidden!important;
  color:#f4f1fa!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:20px!important;
  text-align:left!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.queue-main strong{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:20px!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.queue-main span{display:none!important}
.queue-header{
  padding:8px!important;
  gap:8px!important;
}
.queue-header strong{
  margin-left:8px!important;
}
@media(max-width:1000px){
  .queue-column-head,
  .queue-item{
    grid-template-columns:
      var(--queue-rank-width)
      var(--queue-cover-width)
      minmax(124px,var(--queue-title-width))
      minmax(96px,var(--queue-artist-width))
      minmax(80px,var(--queue-singer-width))
      minmax(88px,var(--queue-version-width))!important;
  }
}
.right-pane.is-compact .queue-column-head,
.right-pane.is-compact .queue-item{
  grid-template-columns:
    var(--queue-rank-width)
    var(--queue-cover-width)
    minmax(124px,var(--queue-title-width))
    minmax(96px,var(--queue-artist-width))
    minmax(80px,var(--queue-singer-width))
    minmax(88px,var(--queue-version-width))!important;
}


/* v4.9 - first-time reference defaults
   KaraFun-reference starting widths are applied only when no saved user value
   exists. Dragged pane ratios and table column widths remain locally persisted. */
:root{
  --song-title-width:249px;
  --song-artist-width:321px;
  --song-version-width:120px;
  --song-duration-width:64px;
  --song-last-width:142px;
  --queue-title-width:224px;
  --queue-artist-width:160px;
  --queue-singer-width:96px;
  --queue-version-width:112px;
}

/* v2.9 - KaraFun-style usable volume control sizing */
.player-toolbar .volume-range{
  width:136px!important;
  flex:0 0 136px!important;
  height:24px!important;
  min-height:24px!important;
}
.player-toolbar .volume-range::-webkit-slider-runnable-track{
  height:4px!important;
  border-radius:999px!important;
}
.player-toolbar .volume-range::-webkit-slider-thumb{
  width:16px!important;
  height:16px!important;
  margin-top:-6px!important;
  border-radius:999px!important;
  background:#fbfbff!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important;
  transition:width .15s ease,height .15s ease,margin-top .15s ease,background-color .15s ease!important;
}
.player-toolbar .volume-range:hover::-webkit-slider-thumb{
  width:19px!important;
  height:19px!important;
  margin-top:-7.5px!important;
}
.player-toolbar .volume-range:active::-webkit-slider-thumb{
  width:14px!important;
  height:14px!important;
  margin-top:-5px!important;
  background:var(--pink)!important;
}
.player-toolbar .volume-range::-moz-range-track,
.player-toolbar .volume-range::-moz-range-progress{
  height:4px!important;
  border-radius:999px!important;
}
.player-toolbar .volume-range::-moz-range-thumb{
  width:16px!important;
  height:16px!important;
  border-radius:999px!important;
  background:#fbfbff!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important;
  transition:width .15s ease,height .15s ease,background-color .15s ease!important;
}
.player-toolbar .volume-range:hover::-moz-range-thumb{
  width:19px!important;
  height:19px!important;
}
.player-toolbar .volume-range:active::-moz-range-thumb{
  width:14px!important;
  height:14px!important;
  background:var(--pink)!important;
}
.volume-icon{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}
.right-pane.is-narrow .player-toolbar .volume-range{
  width:120px!important;
  flex-basis:120px!important;
}

/* v5.0 - reusable KaraFun-style loading state and Discover navigation group */
.loading-spinner{
  display:block;
  width:28px;
  height:28px;
  flex:0 0 auto;
  color:var(--pink);
  animation:kove-spinner-rotate .8s linear infinite;
}
.loader-spinner{
  width:36px;
  height:36px;
  margin-top:14px;
  color:var(--pink);
}
@keyframes kove-spinner-rotate{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation-duration:1.8s}}
.table-loading.is-busy,
.playlist-empty.is-busy{
  display:flex;
  min-height:72px;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--muted);
  font-size:14px;
  line-height:20px;
  text-align:center;
}
.table-loading.is-busy .loading-spinner,
.playlist-empty.is-busy .loading-spinner{width:24px;height:24px}

.sidebar-discover{display:block}
.sidebar-discover-toggle{
  width:100%;
  height:40px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:500;
  line-height:20px;
  text-align:left;
}
.sidebar-discover-toggle:hover{background:#17102f}
.sidebar-discover-toggle img{width:24px;height:24px;filter:brightness(0) invert(1);opacity:.96}
.sidebar-discover-toggle>span:nth-child(2){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-discover-chevron{
  width:8px;
  height:8px;
  margin-right:4px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  opacity:.78;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s ease;
}
.sidebar-discover:not(.is-open) .sidebar-discover-chevron{transform:rotate(-45deg) translate(-1px,1px)}
.sidebar-discover-links{display:flex;flex-direction:column;overflow:hidden}
.sidebar-discover:not(.is-open) .sidebar-discover-links{display:none}
.sidebar-discover-links a{padding-left:20px!important}
.sidebar-discover.has-active>.sidebar-discover-toggle{color:#fff}
@media(max-width:1000px){
  .sidebar-discover-toggle{height:40px;font-size:13px}
  .sidebar-discover-toggle img{width:22px;height:22px}
  .sidebar-discover-links a{padding-left:18px!important}
}


/* v5.1 - KaraFun-style sidebar hierarchy and waiting-queue empty state */
.sidebar{
  padding:0!important;
  overflow:hidden!important;
}
.sidebar-nav{
  display:flex!important;
  height:100%!important;
  min-height:0!important;
  flex-direction:column!important;
}
.sidebar-search-block{
  flex:0 0 auto!important;
  padding:8px 8px 16px!important;
}
.sidebar-scroll-body{
  min-height:0!important;
  flex:1 1 auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border-top:1px solid transparent!important;
  padding:0 8px 16px!important;
}
.sidebar-main-links,
.sidebar-section{
  min-width:0!important;
}
.sidebar-section{
  padding-bottom:16px!important;
}
.sidebar-section:last-child{
  padding-bottom:0!important;
}
.sidebar .sidebar-search-block>a,
.sidebar-main-links a,
.sidebar-section>a,
.sidebar-discover-toggle{
  width:100%!important;
  height:40px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  border-radius:4px!important;
  padding:8px!important;
  color:#f6f2fb!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:24px!important;
  text-align:left!important;
}
.sidebar .sidebar-search-block>a:hover,
.sidebar-main-links a:hover,
.sidebar-section>a:hover,
.sidebar-discover-toggle:hover{
  background:rgba(255,255,255,.065)!important;
}
.sidebar .sidebar-search-block>a.active,
.sidebar-main-links a.active,
.sidebar-section>a.active{
  background:var(--pink)!important;
  color:#fff!important;
}
.sidebar .sidebar-search-block>a img,
.sidebar-main-links a img,
.sidebar-section>a img,
.sidebar-discover-toggle img{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}
.sidebar-discover-links{
  display:flex!important;
  max-height:160px!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  overflow:hidden!important;
  transition:max-height .18s ease!important;
}
.sidebar-discover:not(.is-open) .sidebar-discover-links{
  display:flex!important;
  max-height:0!important;
}
.sidebar-discover-links a{
  padding-left:20px!important;
}
.sidebar-discover-chevron{
  width:8px!important;
  height:8px!important;
  margin-right:4px!important;
  flex:0 0 8px!important;
}
.side-label{
  margin:0!important;
  padding:16px 8px 4px!important;
  color:#9b94b5!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:20px!important;
}
.user-playlist-links{
  max-height:clamp(72px,22vh,240px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.sidebar .user-playlist-link{
  min-height:34px!important;
  height:34px!important;
  padding:0 8px 0 20px!important;
  gap:8px!important;
  font-size:12px!important;
  line-height:18px!important;
}
.sidebar .user-playlist-link img{
  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;
}
.queue-empty{
  inset:44px 0 0!important;
}


/* v5.2 - Discover home and empty queue header synchronisation */
.queue-column-head.hidden{display:none!important}

.sidebar-discover-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 40px!important;
  align-items:center!important;
}
.sidebar-discover-home{
  min-width:0!important;
  border-radius:4px 0 0 4px!important;
}
.sidebar-discover-home span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar-discover-toggle{
  width:40px!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-radius:0 4px 4px 0!important;
}
.sidebar-discover-row:hover .sidebar-discover-home,
.sidebar-discover-row:hover .sidebar-discover-toggle{background:rgba(255,255,255,.065)!important}
.sidebar-discover-home.active{background:var(--pink)!important;color:#fff!important}
.sidebar-discover-home.active + .sidebar-discover-toggle{background:var(--pink)!important;color:#fff!important}
.sidebar-discover-links a{padding-left:20px!important}


/* v6.1 - consolidated public Discover and cover-grid layout.
   The pane-aware column count is calculated in web.js using the same reusable
   GridList model across Discover previews and full cover pages. */
html,body,button,input,textarea,select{font-family:var(--font-ui,"Inter",Segoe UI,Arial,sans-serif)}
.browser-header h1,.result-section h2,.discover-preview-header h2{font-family:var(--font-display,"Okine Sans","Inter",Segoe UI,Arial,sans-serif)}
.browser-pane{container-type:inline-size;container-name:browser-pane}

.discover-landing{
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#070419;
}
.discover-scroll{
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
  padding:16px 14px 20px;
}
.discover-preview-section{min-width:0;margin:0 0 20px}
.discover-preview-header{
  display:flex;
  min-height:28px;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
}
.discover-preview-header h2{
  min-width:0;
  flex:1 1 auto;
  margin:0;
  overflow:hidden;
  color:#f6f2fb;
  font-size:18px;
  font-weight:500;
  line-height:24px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.discover-preview-header button{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--pink2);
  cursor:pointer;
  font-family:var(--font-ui,"Inter",Segoe UI,Arial,sans-serif);
  font-size:12px;
  font-weight:600;
  line-height:18px;
}
.discover-preview-header button:hover{text-decoration:underline}
.discover-preview-actions{display:flex;flex:0 0 auto;align-items:center;gap:2px}
.discover-carousel-button{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0!important;
  border:0;
  border-radius:3px;
  background:transparent!important;
  color:#c9c1d7!important;
  cursor:pointer;
  opacity:.86;
  transition:background-color .15s ease,color .15s ease,opacity .15s ease;
}
.discover-carousel-button img{width:16px;height:16px;filter:brightness(0) invert(1);opacity:.82}
.discover-carousel-button:hover:not(:disabled){background:rgba(255,255,255,.075)!important;color:#fff!important;opacity:1;text-decoration:none}
.discover-carousel-button:disabled{cursor:default;opacity:.28}

/* Full side-panel cover pages use the same pane-aware GridList sizing. */
.playlist-grid{
  grid-template-columns:repeat(var(--kove-cover-grid-columns,2),minmax(0,1fr))!important;
  gap:16px!important;
  padding:16px!important;
  align-content:start;
}
.playlist-card{min-width:0;gap:8px}
.playlist-button img{aspect-ratio:1/1;border-radius:4px}
.playlist-caption{
  min-height:0;
  max-height:40px;
  padding:0;
  overflow:hidden;
  color:#f1eff8;
  font-family:var(--font-ui,"Inter",Segoe UI,Arial,sans-serif);
  font-size:14px;
  font-weight:600;
  line-height:20px;
  text-transform:capitalize;
  white-space:normal;
}
.genre-grid{grid-template-columns:repeat(var(--kove-cover-grid-columns,2),minmax(0,1fr))!important;gap:16px!important}
.genre-tile{aspect-ratio:16/9!important;overflow:hidden;border-radius:4px}
.genre-tile img{display:block;width:100%;height:100%;object-fit:cover}
.genre-tile span{display:none!important}

/* Discover cover previews use the same source GridList formula:
   max(floor(container width / minimum card width), minimum columns). */
.discover-playlist-preview,.discover-genre-preview{
  display:grid!important;
  grid-template-columns:repeat(var(--discover-grid-columns,2),minmax(0,1fr))!important;
  gap:16px!important;
  overflow:hidden!important;
  align-items:start;
}
.discover-playlist-preview{grid-template-rows:1fr}
.discover-genre-preview{grid-template-rows:repeat(2,minmax(0,1fr))}
.discover-playlist-card{min-width:0;display:flex;flex-direction:column;gap:8px}
.discover-playlist-card button{
  display:block;
  width:100%;
  aspect-ratio:1/1!important;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:4px;
  background:#120b2a;
  cursor:pointer;
}
.discover-playlist-card strong{
  max-height:40px;
  overflow:hidden;
  color:#f1eff8;
  font-family:var(--font-ui,"Inter",Segoe UI,Arial,sans-serif);
  font-size:14px;
  font-weight:600;
  line-height:20px;
  text-transform:capitalize;
  white-space:normal;
}
.discover-genre-card{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:4px;
  background:#120b2a;
  cursor:pointer;
}
.discover-genre-card img,.discover-playlist-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .18s ease,filter .18s ease}
.discover-playlist-card button:hover img,.discover-genre-card:hover img{transform:scale(1.035);filter:brightness(1.1)}

/* Popular and New Releases share one playable carousel. */
.discover-track-preview{position:relative;min-height:196px;overflow:clip;overflow-clip-margin:16px}
.discover-carousel-page{
  display:grid;
  grid-template-columns:repeat(var(--discover-track-columns,1),minmax(0,1fr));
  gap:16px;
  transition:transform .3s cubic-bezier(0,0,.2,1),opacity .3s cubic-bezier(0,0,.2,1);
  will-change:transform,opacity;
}
.discover-carousel-page.is-entering-right{position:absolute;inset:0;transform:translateX(100%);opacity:.4}
.discover-carousel-page.is-entering-left{position:absolute;inset:0;transform:translateX(-100%);opacity:.4}
.discover-carousel-page.is-leaving-left{transform:translateX(-100%);opacity:.35}
.discover-carousel-page.is-leaving-right{transform:translateX(100%);opacity:.35}
.discover-track-card{
  min-width:0;
  height:56px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:4px;
  background:#141027;
  cursor:default;
  transition:background-color .15s ease;
}
.discover-track-card:hover{background:#21153b}
.discover-track-card .cover{width:40px;height:40px;border-radius:3px;object-fit:cover}
.discover-track-card .meta{min-width:0}
.discover-track-card strong,.discover-track-card span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.discover-track-card strong{color:#f6f2fb;font-family:var(--font-display,"Okine Sans","Inter",Segoe UI,Arial,sans-serif);font-size:12px;font-weight:500;line-height:16px}
.discover-track-card span{margin-top:0;color:#b9b0ca;font-size:11px;line-height:16px}
.discover-track-card time{padding-left:6px;color:#d9d4e5;font-size:12px;font-variant-numeric:tabular-nums;line-height:16px}
.discover-preview-empty{padding:12px;color:#aaa1bc;background:#110c26;border:1px solid rgba(255,255,255,.03)}
.discover-track-card-ghost{cursor:wait;animation:kove-discover-pulse 1.5s ease-in-out infinite}
.discover-track-card-ghost .ghost-cover{display:block;width:40px;height:40px;border-radius:3px;background:#211b35}
.discover-track-card-ghost .ghost-lines{display:flex;flex-direction:column;gap:7px}
.discover-track-card-ghost .ghost-lines i{display:block;height:8px;border-radius:3px;background:#211b35}
.discover-track-card-ghost .ghost-lines i:last-child{width:68%}
@keyframes kove-discover-pulse{50%{opacity:.52}}
@media(prefers-reduced-motion:reduce){
  .discover-carousel-page{transition:none}
  .discover-track-card-ghost{animation:none}
}


/* v6.1 - stable Discover carousel viewport and live range fills */
.discover-track-preview{
  --discover-track-row-height:56px;
  --discover-track-row-gap:16px;
  position:relative;
  height:calc((var(--discover-track-row-height) * 3) + (var(--discover-track-row-gap) * 2));
  min-height:calc((var(--discover-track-row-height) * 3) + (var(--discover-track-row-gap) * 2));
  overflow:clip;
  overflow-clip-margin:16px;
}
.discover-carousel-page{
  position:absolute;
  inset:0;
  grid-auto-rows:var(--discover-track-row-height);
  align-content:start;
  gap:var(--discover-track-row-gap);
}
.discover-track-preview .discover-preview-empty{align-self:start}

.player-toolbar .volume-range,
.player-controls .seek-range{
  --range-fill:0%;
}
.player-toolbar .volume-range::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--pink) 0 var(--range-fill),#302743 var(--range-fill) 100%)!important;
}
.player-controls .seek-range::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,#636ffa 0 var(--range-fill),#2b2746 var(--range-fill) 100%)!important;
}
.player-toolbar .volume-range::-moz-range-track{background:#302743!important}
.player-toolbar .volume-range::-moz-range-progress{background:var(--pink)!important}
.player-controls .seek-range::-moz-range-track{background:#2b2746!important}
.player-controls .seek-range::-moz-range-progress{background:#636ffa!important}

/* v6.0 - reference-style desktop interaction model
 * Playable catalogue rows/cards and queue rows are selectable; cover navigation
 * cards remain navigation-only. Keep the app chrome non-selectable while
 * preserving normal text selection inside form fields.
 */
.app-shell,
.song-context-menu,
.account-menu-dropdown,
.modal-backdrop,
.queue-modify-backdrop,
.track-information-backdrop{
  -webkit-user-select:none;
  user-select:none;
}
input,textarea,select,[contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
}
.song-row.selected,
.song-row.selected:hover,
.queue-item.selected,
.queue-item.selected:hover,
.track-card.selected,
.track-card.selected:hover,
.discover-track-card.selected,
.discover-track-card.selected:hover{
  background:rgba(239,11,133,.18)!important;
  box-shadow:inset 3px 0 0 var(--pink);
}
.track-card[aria-selected="true"],
.discover-track-card[aria-selected="true"],
.song-row[aria-selected="true"],
.queue-item[aria-selected="true"]{
  outline:1px solid rgba(239,11,133,.34);
  outline-offset:-1px;
}
.draggable-track.is-dragging,
.draggable-queue-item.is-dragging{
  opacity:.52;
}


/* v6.2 - HAR-guided desktop interactions and dual-screen display */
.player-toolbar-action.is-active{
  background:rgba(239,11,133,.22)!important;
  border-color:var(--pink)!important;
  box-shadow:inset 0 0 0 1px rgba(239,11,133,.28),0 0 14px rgba(239,11,133,.18);
}
.player-toolbar-action.is-active img{opacity:1!important}

/* KaraFun-style selected rows: a brand-tinted fill with a clear brand border. */
.song-row.selected,
.song-row.selected:hover,
.queue-item.selected,
.queue-item.selected:hover,
.track-card.selected,
.track-card.selected:hover,
.discover-track-card.selected,
.discover-track-card.selected:hover{
  background:rgba(239,11,133,.30)!important;
  box-shadow:inset 0 0 0 1px rgba(239,11,133,.92)!important;
}
.track-card[aria-selected="true"],
.discover-track-card[aria-selected="true"],
.song-row[aria-selected="true"],
.queue-item[aria-selected="true"]{
  outline:0!important;
}

/* Compact native drag preview, rather than a translucent full row or panel. */
.kove-drag-ghost{
  position:fixed;
  top:-1000px;
  left:-1000px;
  z-index:99999;
  max-width:260px;
  overflow:hidden;
  padding:8px 12px;
  border:1px solid rgba(239,11,133,.92);
  border-radius:4px;
  background:#17102f;
  box-shadow:0 8px 20px rgba(0,0,0,.42);
  color:#fff;
  font-size:12px;
  font-weight:600;
  line-height:16px;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}

/* Track drags append to the queue and show one thin line beneath the final item. */
.queue-pane.is-drag-over,
.queue-pane.is-track-drag-over{
  outline:0!important;
}
.queue-pane.is-track-drag-over .queue-list{
  opacity:1!important;
}
.queue-pane.is-track-drag-over .queue-empty{
  opacity:1!important;
}
.queue-pane.is-track-drag-over:not(.queue-track-drop-empty) .queue-drop-hint{
  display:none!important;
}
.queue-pane.queue-track-drop-empty .queue-drop-hint{
  display:grid!important;
  background:rgba(7,4,25,.86)!important;
  border:1px solid rgba(239,11,133,.72)!important;
  box-shadow:inset 0 0 34px rgba(239,11,133,.12)!important;
}
.queue-list.queue-track-drop-tail::after{
  content:"";
  display:block;
  height:2px;
  margin:0 8px;
  background:var(--pink);
  box-shadow:0 0 8px rgba(239,11,133,.76);
  pointer-events:none;
}

/* v6.3 - Karaoke Kove ambient player and HAR-guided key / tempo controls */
.player-media{
  background:
    radial-gradient(circle at 13% 50%,rgba(0,224,255,.27),transparent 40%),
    radial-gradient(circle at 87% 50%,rgba(195,72,255,.24),transparent 40%),
    linear-gradient(90deg,rgba(0,233,255,.13),transparent 17%,transparent 83%,rgba(226,68,255,.13)),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 32%),
    linear-gradient(180deg,#090b1a,#04050d)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 0 58px rgba(0,0,0,.5);
}
.player-output{background:transparent!important}
.player-media:fullscreen,.player-media:-webkit-full-screen{
  background:
    radial-gradient(circle at 13% 50%,rgba(0,224,255,.27),transparent 40%),
    radial-gradient(circle at 87% 50%,rgba(195,72,255,.24),transparent 40%),
    linear-gradient(90deg,rgba(0,233,255,.13),transparent 17%,transparent 83%,rgba(226,68,255,.13)),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 32%),
    linear-gradient(180deg,#090b1a,#04050d)!important;
}
.player-audio-tools{display:flex;align-items:center;gap:8px;min-width:0}
.player-audio-adjuster{display:flex;align-items:center;height:30px;padding:0 5px 0 7px;gap:3px;border:1px solid rgba(122,108,169,.42);border-radius:5px;background:rgba(11,7,29,.78);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.player-audio-setting-icon{width:15px!important;height:15px!important;opacity:.88;filter:brightness(0) invert(1)}
.player-audio-setting-name{margin-right:2px;color:#c9c0dc;font-size:11px;font-weight:600;line-height:1}
.player-audio-step,.player-audio-value{display:grid;place-items:center;height:22px;border:0;border-radius:3px;background:transparent;color:#efeaff;cursor:pointer;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.player-audio-step{width:20px;padding:0}
.player-audio-step img{width:13px!important;height:13px!important;filter:brightness(0) invert(1);opacity:.76}
.player-audio-value{min-width:34px;padding:0 5px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.player-audio-adjuster:nth-child(2) .player-audio-value{min-width:42px}
.player-audio-step:hover,.player-audio-step:focus-visible,.player-audio-value:hover,.player-audio-value:focus-visible{background:rgba(102,91,255,.22);outline:none}
.player-audio-value.is-adjusted{background:linear-gradient(135deg,rgba(82,103,255,.42),rgba(192,50,231,.34));box-shadow:0 0 0 1px rgba(149,123,255,.38);color:#fff}
@media(max-width:1420px){
  .player-audio-setting-name{display:none}
  .player-audio-adjuster{padding-left:5px;gap:2px}
  .player-audio-tools{gap:5px}
}
@media(max-width:1180px){
  .player-audio-tools{gap:4px}
  .player-audio-adjuster{padding-inline:3px}
  .player-audio-setting-icon{display:none}
  .player-audio-step{width:18px}
  .player-audio-value{min-width:29px;padding-inline:3px}
  .player-audio-adjuster:nth-child(2) .player-audio-value{min-width:37px}
}
.player-audio-step:disabled,.player-audio-value:disabled{opacity:.34;cursor:default;background:transparent!important;box-shadow:none!important}


/* v6.4 - KaraFun-style Modify sliders without changing the existing player bar */
.player-meta{overflow:visible!important}
.player-meta-text{min-width:0}
.player-meta-subline{display:flex;align-items:center;gap:8px;min-width:0}
.player-meta-subline>#activeArtist{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-meta-subline>.player-version{display:inline-flex!important;align-items:center;flex:0 0 auto;padding:2px 7px!important;font-size:11px!important;line-height:15px!important}
.player-modify-wrap{position:relative;flex:0 0 auto}
.player-modify-toggle{display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;border:1px solid #4b4267;border-radius:4px;background:#0b071d;color:#ded7e9;font-size:12px;font-weight:650;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease}
.player-modify-toggle img{width:15px;height:15px;filter:brightness(0) invert(1);opacity:.8}
.player-modify-toggle:hover,.player-modify-toggle:focus-visible,.player-modify-toggle.is-open{outline:0;border-color:#766a98;background:#17102f;color:#fff}
.player-modify-toggle.is-adjusted{border-color:#8476ff;background:rgba(99,111,250,.18);box-shadow:inset 0 0 0 1px rgba(132,118,255,.16)}
.player-modify-toggle:disabled{opacity:.45;cursor:default}
.player-modify-panel{position:absolute;right:0;bottom:calc(100% + 8px);z-index:40;width:278px;padding:12px;border:1px solid #4b4267;border-radius:5px;background:#100a26;box-shadow:0 14px 34px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.02)}
.player-modify-panel.hidden{display:none!important}
.player-modify-heading{margin:0 0 9px;color:#f2edf9;font-size:13px;font-weight:700;line-height:18px}
.player-modify-setting{display:block;padding:9px 0 10px;border-top:1px solid rgba(75,66,103,.64)}
.player-modify-setting-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;color:#d9d2e5;font-size:12px;line-height:16px}
.player-modify-setting-head>span{display:flex;align-items:center;gap:7px}
.player-modify-setting-head img{width:15px;height:15px;filter:brightness(0) invert(1);opacity:.78}
.player-modify-setting-head output{color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.player-version:empty{display:none!important}
.player-modify-slider{--setting-start:50%;--setting-end:50%;display:block;width:100%;height:16px;margin:0;accent-color:#636ffa;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent}
.player-modify-slider::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,#2b2746 0 var(--setting-start),#636ffa var(--setting-start) var(--setting-end),#2b2746 var(--setting-end) 100%)}
.player-modify-slider::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4px;border:1px solid #b9b0ff;border-radius:50%;background:#7367ff;box-shadow:0 0 0 2px rgba(99,111,250,.2);appearance:none;-webkit-appearance:none}
.player-modify-slider::-moz-range-track{height:4px;border-radius:999px;background:#2b2746}
.player-modify-slider::-moz-range-progress{height:4px;border-radius:999px;background:#636ffa}
.player-modify-slider::-moz-range-thumb{width:12px;height:12px;border:1px solid #b9b0ff;border-radius:50%;background:#7367ff;box-shadow:0 0 0 2px rgba(99,111,250,.2)}
.player-modify-slider:disabled{opacity:.45;cursor:default}
.player-modify-defaults{display:flex;align-items:center;gap:8px;width:100%;height:30px;margin-top:2px;padding:0 6px;border:0;border-top:1px solid rgba(75,66,103,.64);background:transparent;color:#beb5cf;font-size:11px;font-weight:650;cursor:pointer;text-align:left}
.player-modify-defaults img{width:14px;height:14px;filter:brightness(0) invert(1);opacity:.68}
.player-modify-defaults:hover,.player-modify-defaults:focus-visible{outline:0;color:#fff}
.player-modify-defaults:disabled{opacity:.4;cursor:default}
@media(max-width:760px){.player-modify-toggle span{display:none}.player-modify-toggle{width:32px;padding:0;justify-content:center}.player-modify-panel{right:-3px;width:min(278px,calc(100vw - 24px))}}


/* v6.5 - responsive live search, fixed idle metadata row, and clickable mute */
.volume-toggle{
  position:relative;
  display:grid;
  width:28px;
  height:28px;
  flex:0 0 28px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.volume-toggle:hover,.volume-toggle:focus-visible{outline:0;background:rgba(255,255,255,.07)}
.volume-toggle::after{
  content:"";
  position:absolute;
  width:22px;
  height:2px;
  border-radius:999px;
  background:var(--pink);
  box-shadow:0 0 5px rgba(239,11,133,.58);
  opacity:0;
  transform:rotate(-45deg) scaleX(.5);
  transition:opacity .14s ease,transform .14s ease;
  pointer-events:none;
}
.volume-toggle.is-muted::after{opacity:1;transform:rotate(-45deg) scaleX(1)}
.volume-toggle.is-muted .volume-icon{opacity:.48!important}
.player-meta{flex-shrink:0}
.player-meta-text strong:only-child{color:#f3effa}
.search-results{transition:opacity .1s ease}
.search-results.is-searching{opacity:.72}
\n\n/* v6.7 - seamless animated ambient screen, text-only empty queue, and KaraFun-style stepped Modify sliders */\n.player-media{\n  position:relative;\n  isolation:isolate;\n  background:#04050d!important;\n}\n.player-media::before,.player-media::after{\n  content:"";\n  position:absolute;\n  inset:-22%;\n  z-index:-2;\n  pointer-events:none;\n  will-change:transform;\n  filter:blur(15px);\n}\n.player-media::before{\n  background:\n    radial-gradient(ellipse at 18% 46%,rgba(0,230,255,.43),transparent 35%),\n    radial-gradient(ellipse at 79% 48%,rgba(194,62,255,.40),transparent 39%),\n    radial-gradient(ellipse at 56% 82%,rgba(247,37,171,.20),transparent 32%);\n  animation:kove-player-aurora-a 22s ease-in-out infinite alternate;\n}\n.player-media::after{\n  inset:-30%;\n  z-index:-3;\n  background:\n    radial-gradient(ellipse at 46% 24%,rgba(55,105,255,.23),transparent 36%),\n    radial-gradient(ellipse at 54% 73%,rgba(0,224,205,.17),transparent 38%),\n    linear-gradient(135deg,#071224,#07051a 52%,#140623);\n  animation:kove-player-aurora-b 30s ease-in-out infinite alternate;\n}\n@keyframes kove-player-aurora-a{\n  0%{transform:translate3d(-3%,-2%,0) scale(1.03) rotate(-2deg)}\n  50%{transform:translate3d(3%,2%,0) scale(1.1) rotate(2deg)}\n  100%{transform:translate3d(-1%,4%,0) scale(1.06) rotate(-1deg)}\n}\n@keyframes kove-player-aurora-b{\n  0%{transform:translate3d(2%,3%,0) scale(1.06)}\n  100%{transform:translate3d(-4%,-2%,0) scale(1.13)}\n}\n.player-media>.player-output,.player-media>.fullscreen-button,.player-idle-screen{position:relative;z-index:1}\n.player-idle-screen{\n  display:grid;\n  width:100%;\n  height:100%;\n  place-items:center;\n  padding:clamp(18px,5vw,52px);\n  overflow:hidden;\n}\n.player-idle-screen[hidden]{display:none!important}\n.player-idle-logo{\n  display:block;\n  width:min(84%,780px);\n  max-height:74%;\n  object-fit:contain;\n  filter:drop-shadow(0 0 15px rgba(0,223,255,.26)) drop-shadow(0 0 24px rgba(220,53,255,.23));\n  animation:kove-player-logo-float 8s ease-in-out infinite;\n}\n@keyframes kove-player-logo-float{\n  0%,100%{transform:translate3d(0,-3px,0) scale(.985);opacity:.9}\n  50%{transform:translate3d(0,4px,0) scale(1.01);opacity:1}\n}\n.queue-empty{gap:8px!important}\n.queue-empty>img{display:none!important}\n.player-modify-range-shell{\n  position:relative;\n  display:block;\n  height:18px;\n}\n.player-modify-grooves{\n  position:absolute;\n  inset:0 6px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  pointer-events:none;\n}\n.player-modify-grooves::before{\n  content:"";\n  position:absolute;\n  left:0;right:0;top:50%;\n  height:3px;\n  border-radius:999px;\n  background:#292541;\n  transform:translateY(-50%);\n}\n.player-modify-groove{\n  position:relative;\n  z-index:1;\n  width:2px;\n  height:8px;\n  border-radius:999px;\n  background:#3c3658;\n  transition:height .12s ease,background .12s ease,box-shadow .12s ease;\n}\n.player-modify-groove.is-zero{height:11px;background:#6b6480}\n.player-modify-groove.is-active{background:#7e73ff;box-shadow:0 0 5px rgba(126,115,255,.56)}\n.player-modify-groove.is-current{height:13px;background:#c7c2ff;box-shadow:0 0 7px rgba(164,151,255,.86)}\n.player-modify-slider{\n  position:absolute;\n  inset:0;\n  z-index:2;\n  height:18px!important;\n  background:transparent!important;\n}\n.player-modify-slider::-webkit-slider-runnable-track{height:3px!important;background:transparent!important}\n.player-modify-slider::-webkit-slider-thumb{\n  width:8px!important;\n  height:16px!important;\n  margin-top:-6.5px!important;\n  border:0!important;\n  border-radius:999px!important;\n  background:#f8f7fb!important;\n  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 1px 5px rgba(0,0,0,.42)!important;\n}\n.player-modify-slider::-moz-range-track{height:3px!important;background:transparent!important}\n.player-modify-slider::-moz-range-progress{height:3px!important;background:transparent!important}\n.player-modify-slider::-moz-range-thumb{\n  width:8px!important;\n  height:16px!important;\n  border:0!important;\n  border-radius:999px!important;\n  background:#f8f7fb!important;\n  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 1px 5px rgba(0,0,0,.42)!important;\n}\n@media (prefers-reduced-motion:reduce){\n  .player-media::before,.player-media::after,.player-idle-logo{animation:none!important}\n}\n
/* v6.8 - looped branded player background and HAR-guided display controls */
.player-media{
  position:relative;
  isolation:isolate;
  background:#020611!important;
}
.player-media::before{display:none!important}
.player-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  display:block!important;
  background:rgba(0,0,0,.12)!important;
  filter:none!important;
  animation:none!important;
  pointer-events:none;
}
.player-ambient-video{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.player-media{
  container-type:size;
}
.player-media>.player-output{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  z-index:2!important;
  display:block;
  width:min(100cqw,calc(100cqh * 16 / 9))!important;
  height:min(100cqh,calc(100cqw * 9 / 16))!important;
  transform:translate(-50%,-50%);
  object-fit:fill!important;
  background:transparent!important;
  pointer-events:none;
}
.player-media>.player-output[hidden]{display:none!important}
.player-idle-screen{
  position:absolute!important;
  inset:0;
  z-index:3!important;
  display:grid;
  width:100%;
  height:100%;
  place-items:center;
  padding:clamp(28px,6vw,88px);
  background:transparent!important;
}
.player-idle-screen[hidden]{display:none!important}
.player-idle-logo{
  display:block;
  width:min(68%,860px)!important;
  max-width:88%;
  max-height:74%;
  margin:0 auto;
  padding:clamp(10px,1.8vw,24px) clamp(16px,2.6vw,38px);
  box-sizing:border-box;
  object-fit:contain;
  object-position:center center;
  animation:none!important;
  opacity:1!important;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.46))!important;
}
.player-media>.fullscreen-button{
  position:absolute!important;
  top:12px;
  right:12px;
  z-index:5!important;
}
.player-media:fullscreen>.fullscreen-button,
.player-media:-webkit-full-screen>.fullscreen-button{opacity:.92}
.player-display-context-menu{
  position:fixed;
  z-index:420;
  width:244px;
  overflow:hidden;
  border:1px solid rgba(91,79,126,.9);
  border-radius:5px;
  background:#100b25;
  box-shadow:0 14px 32px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025);
  padding:6px 0;
}
.player-display-context-menu.hidden{display:none!important}
.player-display-context-menu button{
  display:flex;
  width:100%;
  min-height:34px;
  align-items:center;
  gap:8px;
  border:0;
  padding:7px 12px;
  background:transparent;
  color:#f4f0fb;
  font-size:12px;
  line-height:18px;
  text-align:left;
  cursor:pointer;
}
.player-display-context-menu button:hover,
.player-display-context-menu button:focus-visible{
  outline:0;
  background:rgba(255,255,255,.075);
}
.player-display-context-menu img{
  width:15px;
  height:15px;
  flex:0 0 15px;
  filter:brightness(0) invert(1);
  opacity:.88;
}
.player-display-check{
  width:15px;
  flex:0 0 15px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:15px;
  opacity:0;
}
#playerDisplayLock[aria-checked="true"] .player-display-check{opacity:1}

/* v6.9 - embedded player layer geometry correction
   Background loop always fills the player box. Active karaoke canvas stays
   centred in a 16:9 overlay frame. Detached dual-screen styles are separate. */
.player-media > .player-ambient-video{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.player-media > .player-output{
  position:absolute!important;
  inset:auto!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  z-index:2!important;
  display:block;
  width:min(100cqw,calc(100cqh * 16 / 9))!important;
  height:min(100cqh,calc(100cqw * 9 / 16))!important;
  max-width:100%!important;
  max-height:100%!important;
  transform:translate(-50%,-50%)!important;
  object-fit:fill!important;
  object-position:center center!important;
  background:transparent!important;
  pointer-events:none!important;
}
.player-media > .player-output[hidden]{display:none!important}

/* v7.0 - unified Karaoke Kove display engine and full-panel queue drop target */
.kove-display-surface{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  background:#020611!important;
}
.kove-display-background{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.kove-display-foreground{
  z-index:2!important;
  display:block;
  background:transparent!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.kove-display-foreground[hidden]{display:none!important}
.kove-display-idle{
  z-index:3!important;
  display:grid;
  place-items:center;
  padding:clamp(28px,6vw,88px);
  background:transparent!important;
  pointer-events:none!important;
}
.kove-display-idle[hidden]{display:none!important}
.kove-display-logo{
  display:block;
  height:auto;
  margin:0 auto;
  padding:clamp(10px,1.8vw,24px) clamp(16px,2.6vw,38px);
  box-sizing:border-box;
  object-fit:contain;
  object-position:center center;
  animation:none!important;
  opacity:1!important;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.46))!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
/* During a track drag, the whole queue panel becomes the target. The normal
   header is simply covered temporarily and returns as soon as the drag ends. */
.queue-pane.is-drag-over .queue-drop-hint,
.queue-pane.is-track-drag-over .queue-drop-hint,
.queue-pane.queue-track-drop-empty .queue-drop-hint{
  inset:0!important;
  z-index:12!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  background:rgba(7,4,25,.88)!important;
  border:2px solid var(--pink)!important;
  box-shadow:inset 0 0 42px rgba(239,11,133,.18)!important;
}
.queue-pane.is-drag-over .queue-header,
.queue-pane.is-drag-over .queue-column-head,
.queue-pane.is-drag-over .queue-list,
.queue-pane.is-drag-over .queue-empty{
  opacity:.18!important;
}
.player-media > .kove-display-foreground{
  position:absolute!important;
  inset:auto!important;
  left:var(--kove-frame-left)!important;
  top:var(--kove-frame-top)!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--kove-frame-width)!important;
  height:var(--kove-frame-height)!important;
  max-width:none!important;
  max-height:none!important;
  transform:none!important;
  object-fit:fill!important;
  object-position:center center!important;
}
.player-media .kove-display-logo{
  width:var(--kove-logo-width)!important;
  max-width:88%!important;
  max-height:var(--kove-logo-max-height)!important;
}


/* v7.1 - readable Last played labels and row alignment */
:root{--song-last-width:184px}
.song-row .last{
  display:flex!important;
  min-width:0!important;
  height:100%!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0 8px!important;
  line-height:20px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-variant-numeric:tabular-nums;
}
.history-date-group{
  min-height:42px;
  height:42px;
  display:flex;
  align-items:center;
  padding:0 12px;
}


/* YouTube-style transient playback feedback: centered play/pause/mute/volume,
   top status badges for key and tempo, and side seek confirmations. */
.player-feedback-overlay{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0}
.player-feedback-overlay.is-visible{opacity:1}
.player-feedback-center{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.player-feedback-disc{display:grid;width:clamp(82px,14%,112px);aspect-ratio:1;place-items:center;border-radius:50%;background:rgba(0,0,0,.64);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.player-feedback-icon{display:none;width:56%;height:56%;object-fit:contain;filter:brightness(0) invert(1)}
.player-feedback-overlay[data-feedback-kind="play"] .player-feedback-icon--play,.player-feedback-overlay[data-feedback-kind="pause"] .player-feedback-icon--pause,.player-feedback-overlay[data-feedback-kind="mute"] .player-feedback-icon--mute,.player-feedback-overlay[data-feedback-kind="unmute"] .player-feedback-icon--unmute,.player-feedback-overlay[data-feedback-kind="volume"] .player-feedback-icon--volume,.player-feedback-overlay[data-feedback-kind="volume-up"] .player-feedback-icon--volume,.player-feedback-overlay[data-feedback-kind="volume-down"] .player-feedback-icon--volume,.player-feedback-overlay[data-feedback-kind="fullscreen"] .player-feedback-icon--fullscreen,.player-feedback-overlay[data-feedback-kind="next"] .player-feedback-icon--next,.player-feedback-overlay[data-feedback-kind="start"] .player-feedback-icon--start,.player-feedback-overlay[data-feedback-kind="end"] .player-feedback-icon--end{display:block}
.player-feedback-overlay[data-feedback-kind="play"] .player-feedback-center,.player-feedback-overlay[data-feedback-kind="pause"] .player-feedback-center,.player-feedback-overlay[data-feedback-kind="mute"] .player-feedback-center,.player-feedback-overlay[data-feedback-kind="unmute"] .player-feedback-center,.player-feedback-overlay[data-feedback-kind="volume"] .player-feedback-center,.player-feedback-overlay[data-feedback-kind="volume-up"] .player-feedback-center,.player-feedback-overlay[data-feedback-kind="volume-down"] .player-feedback-center,.player-feedback-overlay[data-feedback-kind="fullscreen"] .player-feedback-center,.player-feedback-overlay[data-feedback-kind="next"] .player-feedback-center,.player-feedback-overlay[data-feedback-kind="start"] .player-feedback-center,.player-feedback-overlay[data-feedback-kind="end"] .player-feedback-center{animation:kove-feedback-center .88s cubic-bezier(.2,.72,.18,1) both}
.player-feedback-badge{position:absolute;top:clamp(34px,11%,62px);left:50%;transform:translateX(-50%);min-width:62px;max-width:calc(100% - 24px);padding:8px 12px;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;font:700 clamp(18px,2.4vw,23px)/1.1 Arial,sans-serif;text-align:center;white-space:nowrap;opacity:0}
.player-feedback-overlay.is-visible .player-feedback-badge:not([hidden]){animation:kove-feedback-badge .88s ease both}
.player-feedback-side{position:absolute;top:50%;display:none;align-items:center;gap:5px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.68);font:700 clamp(23px,3vw,32px)/1 Arial,sans-serif}
.player-feedback-side img{width:clamp(22px,3.3vw,34px);height:clamp(32px,4.8vw,48px);object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.52))}
.player-feedback-side--left{left:clamp(28px,8%,88px)}.player-feedback-side--right{right:clamp(28px,8%,88px)}
.player-feedback-overlay[data-feedback-kind="seek-back-5"] .player-feedback-side--left,.player-feedback-overlay[data-feedback-kind="seek-back-10"] .player-feedback-side--left{display:flex;animation:kove-feedback-left .82s cubic-bezier(.2,.72,.18,1) both}
.player-feedback-overlay[data-feedback-kind="seek-forward-5"] .player-feedback-side--right,.player-feedback-overlay[data-feedback-kind="seek-forward-10"] .player-feedback-side--right{display:flex;animation:kove-feedback-right .82s cubic-bezier(.2,.72,.18,1) both}
.player-media:fullscreen .player-feedback-disc,.player-media:-webkit-full-screen .player-feedback-disc{width:clamp(98px,10vw,134px)}
@keyframes kove-feedback-center{0%{opacity:0;transform:scale(.86)}14%,74%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.02)}}
@keyframes kove-feedback-badge{0%,100%{opacity:0}14%,74%{opacity:1}}
@keyframes kove-feedback-left{0%{opacity:0;transform:translate(-12px,-50%)}14%,74%{opacity:1;transform:translate(0,-50%)}100%{opacity:0;transform:translate(3px,-50%)}}
@keyframes kove-feedback-right{0%{opacity:0;transform:translate(12px,-50%)}14%,74%{opacity:1;transform:translate(0,-50%)}100%{opacity:0;transform:translate(-3px,-50%)}}
@media (prefers-reduced-motion:reduce){.player-feedback-overlay[data-feedback-kind] .player-feedback-center,.player-feedback-overlay[data-feedback-kind] .player-feedback-side,.player-feedback-overlay.is-visible .player-feedback-badge:not([hidden]){animation-duration:.01ms!important}}



/* v7.4 - built-in player fullscreen controls.
   These controls belong only to the website player's own fullscreen surface.
   Detached dual-screen playback intentionally remains a clean display. */
.player-fullscreen-control-ui{
  position:absolute;
  inset:0;
  z-index:8;
  display:none;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
.player-media:fullscreen>.player-fullscreen-control-ui,
.player-media:-webkit-full-screen>.player-fullscreen-control-ui{display:block}
.player-media:fullscreen>.player-fullscreen-control-ui.is-visible,
.player-media:-webkit-full-screen>.player-fullscreen-control-ui.is-visible{
  opacity:1;
  visibility:visible;
}
.player-media:fullscreen.is-fullscreen-controls-idle,
.player-media:-webkit-full-screen.is-fullscreen-controls-idle{cursor:none}
.player-media:fullscreen>.fullscreen-button,
.player-media:-webkit-full-screen>.fullscreen-button{
  opacity:0!important;
  pointer-events:none!important;
}
.player-fullscreen-transport{
  position:absolute;
  left:50%;
  bottom:clamp(76px,9vh,118px);
  width:min(1040px,calc(100vw - 96px));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:7px 10px;
  border:1px solid rgba(172,158,255,.22);
  border-radius:8px;
  background:rgba(7,5,24,.86);
  box-shadow:0 12px 30px rgba(0,0,0,.46);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:auto;
}
.player-fullscreen-adjust-panel{
  position:absolute;
  right:max(48px,calc((100vw - 1040px) / 2));
  bottom:clamp(138px,calc(9vh + 68px),188px);
  width:min(278px,calc(100vw - 44px));
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .16s ease,visibility .16s ease,transform .16s ease;
}
.player-fullscreen-adjust-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.player-fullscreen-icon-button{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  transition:background .14s ease,transform .14s ease,opacity .14s ease;
}
.player-fullscreen-icon-button:hover,
.player-fullscreen-icon-button:focus-visible{outline:0;background:rgba(255,255,255,.14)}
.player-fullscreen-icon-button:active{transform:scale(.94)}
.player-fullscreen-icon-button:disabled{cursor:default;opacity:.42}
.player-fullscreen-icon-button img{display:block;width:20px;height:20px;filter:brightness(0) invert(1)}
.player-fullscreen-icon-button img[hidden]{display:none!important}
.player-fullscreen-time{
  min-width:43px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.player-fullscreen-remaining{color:#d7d1e8}
.player-fullscreen-range{
  display:block;
  width:100%;
  height:18px;
  margin:0;
  accent-color:#7b6dff;
  cursor:pointer;
}
.player-fullscreen-range:disabled{cursor:default;opacity:.45}
.player-fullscreen-seek{min-width:110px;flex:1 1 auto}
.player-fullscreen-adjust-row{display:block}
.player-fullscreen-adjust-row+.player-fullscreen-adjust-row{margin-top:15px}
.player-fullscreen-adjust-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
  color:#f7f4ff;
  font-size:13px;
  font-weight:700;
}
.player-fullscreen-adjust-head output{color:#fff;font-variant-numeric:tabular-nums}
@media(max-width:680px){
  .player-fullscreen-transport{left:50%;bottom:50px;width:calc(100vw - 20px);gap:6px;min-height:46px;padding:7px 8px}
  .player-fullscreen-adjust-panel{right:10px;bottom:108px;width:228px}
  .player-fullscreen-icon-button{width:30px;height:30px;flex-basis:30px}
  .player-fullscreen-time{min-width:36px;font-size:12px}
}


/* v7.6 - KaraFun-style Personalize popup: Lead Vocal placeholder, stepped Key and plain Tempo. */
.player-personalize-panel{
  width:278px;
  padding:12px 12px 13px;
  border:1px solid #322a50;
  border-radius:5px;
  background:#100d28;
  box-shadow:0 14px 34px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.02);
}
.player-personalize-panel::before{
  content:"";
  position:absolute;
  top:-7px;
  right:50px;
  width:12px;
  height:12px;
  border-top:1px solid #322a50;
  border-left:1px solid #322a50;
  background:#100d28;
  transform:rotate(45deg);
}
.player-fullscreen-adjust-panel.player-personalize-panel::before{right:18px}
.player-personalize-setting{
  display:block;
  padding:10px 0 7px;
  border:0;
}
.player-personalize-setting+.player-personalize-setting{padding-top:10px}
.player-personalize-setting-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
  color:#f2edf9;
  font-size:12px;
  font-weight:650;
  line-height:16px;
}
.player-personalize-setting-head output{
  color:#fff;
  font-size:12px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
}
.player-personalize-range-shell{
  position:relative;
  display:block;
  height:18px;
}
.player-personalize-slider{
  display:block;
  width:100%;
  height:18px;
  margin:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
}
.player-personalize-slider::-webkit-slider-runnable-track{
  height:3px;
  border-radius:999px;
  background:#292541;
}
.player-personalize-slider::-webkit-slider-thumb{
  width:13px;
  height:13px;
  margin-top:-5px;
  border:0;
  border-radius:50%;
  background:#f7f5fb;
  box-shadow:0 1px 4px rgba(0,0,0,.42);
  appearance:none;
  -webkit-appearance:none;
}
.player-personalize-slider::-moz-range-track{
  height:3px;
  border-radius:999px;
  background:#292541;
}
.player-personalize-slider::-moz-range-progress{
  height:3px;
  border-radius:999px;
  background:#292541;
}
.player-personalize-slider::-moz-range-thumb{
  width:13px;
  height:13px;
  border:0;
  border-radius:50%;
  background:#f7f5fb;
  box-shadow:0 1px 4px rgba(0,0,0,.42);
}
.player-personalize-vocal-slider:disabled{opacity:1;cursor:default}
.player-personalize-key-shell .player-modify-grooves{
  inset:0 6px;
  z-index:1;
}
.player-personalize-key-shell .player-modify-grooves::before{
  height:3px;
  background:#292541;
}
.player-personalize-key-shell .player-modify-groove{
  width:1px;
  height:8px;
  border-radius:0;
  background:#3b3657;
  box-shadow:none;
}
.player-personalize-key-shell .player-modify-groove.is-zero{
  height:9px;
  background:#50496b;
}
.player-personalize-key-shell .player-modify-groove.is-active,
.player-personalize-key-shell .player-modify-groove.is-current{
  background:#50496b;
  box-shadow:none;
}
.player-personalize-key-shell .player-personalize-slider{
  position:absolute;
  inset:0;
  z-index:2;
}
.player-personalize-key-shell .player-personalize-slider::-webkit-slider-runnable-track{background:transparent}
.player-personalize-key-shell .player-personalize-slider::-webkit-slider-thumb{
  width:8px;
  height:16px;
  margin-top:-6.5px;
  border-radius:999px;
}
.player-personalize-key-shell .player-personalize-slider::-moz-range-track,
.player-personalize-key-shell .player-personalize-slider::-moz-range-progress{background:transparent}
.player-personalize-key-shell .player-personalize-slider::-moz-range-thumb{
  width:8px;
  height:16px;
  border-radius:999px;
}

/* v7.7 - KaraFun-style Personalize interaction parity.
   Both the normal player button and built-in fullscreen sliders icon open the
   same compact Key / Tempo card above the trigger. Detached dual-screen stays
   display-only. */
.player-modify-toggle{
  height:32px;
  padding:0 11px;
  border-radius:999px;
  background:rgba(12,8,31,.78);
}
.player-personalize-panel{
  width:278px;
  padding:14px 14px 15px;
  border-color:#322a50;
  border-radius:6px;
  background:#100d28;
}
.player-personalize-panel::before{
  top:auto;
  bottom:-7px;
  right:38px;
  border-top:0;
  border-left:0;
  border-right:1px solid #322a50;
  border-bottom:1px solid #322a50;
  background:#100d28;
  transform:rotate(45deg);
}
.player-fullscreen-adjust-panel.player-personalize-panel::before{right:65px}
.player-personalize-setting{padding:7px 0 8px}
.player-personalize-setting+.player-personalize-setting{padding-top:10px}
.player-personalize-setting-head{margin-bottom:7px}
.player-personalize-key-shell .player-modify-groove{
  display:block;
  width:1px;
  height:8px;
  background:#3b3657;
}
.player-personalize-key-shell .player-modify-groove.is-zero{height:9px;background:#50496b}
.player-personalize-key-shell .player-modify-groove.is-active,
.player-personalize-key-shell .player-modify-groove.is-current{background:#50496b}
@media(max-width:760px){
  .player-modify-toggle{border-radius:999px}
}

/* v7.8 - clean-room KaraFun interaction parity for Personalize.
   Normal player opens its card below the pill button. Built-in fullscreen
   opens the same Key / Tempo card above the compact sliders icon. */
.player-modify-wrap>.player-personalize-panel{
  top:calc(100% + 8px);
  right:0;
  bottom:auto;
}
.player-modify-wrap>.player-personalize-panel::before{
  top:-7px;
  right:38px;
  bottom:auto;
  border-top:1px solid #322a50;
  border-left:1px solid #322a50;
  border-right:0;
  border-bottom:0;
  background:#100d28;
  transform:rotate(45deg);
}
.player-fullscreen-adjust-panel.player-personalize-panel{
  top:auto;
  right:max(48px,calc((100vw - 1040px) / 2));
  bottom:clamp(138px,calc(9vh + 68px),188px);
}
.player-fullscreen-adjust-panel.player-personalize-panel::before{
  top:auto;
  right:65px;
  bottom:-7px;
  border-top:0;
  border-left:0;
  border-right:1px solid #322a50;
  border-bottom:1px solid #322a50;
  background:#100d28;
  transform:rotate(45deg);
}
@media(max-width:680px){
  .player-fullscreen-adjust-panel.player-personalize-panel{
    right:10px;
    bottom:108px;
  }
}

/* v7.9 - restore one KaraFun-style Key / Tempo panel on both player surfaces.
   Keep the Key control discrete: exactly 13 semitone marks from -6 to +6.
   Keep Tempo continuous. Let the normal panel overlay the queue instead of
   being clipped by the player containers. */
.right-pane{
  overflow:visible!important;
}
.player-pane{
  position:relative;
  z-index:5;
  overflow:visible!important;
}
.queue-pane{
  position:relative;
  z-index:1;
}
.player-meta{
  position:relative;
  z-index:7;
  overflow:visible!important;
}
.player-modify-wrap{
  position:relative;
  z-index:8;
}

/* Shared Personalize card: normal player and built-in fullscreen use the
   same dimensions and controls. */
.player-personalize-panel,
.player-fullscreen-adjust-panel.player-personalize-panel{
  width:320px!important;
  padding:18px 18px 17px!important;
  border:1px solid #332b50!important;
  border-radius:7px!important;
  background:#100d28!important;
  box-shadow:0 14px 34px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.018)!important;
  z-index:120!important;
}
.player-personalize-setting{
  display:block!important;
  padding:0!important;
  border:0!important;
}
.player-personalize-setting + .player-personalize-setting{
  padding-top:19px!important;
}
.player-personalize-setting-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 10px!important;
  color:#f1edf8!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:18px!important;
}
.player-personalize-setting-head output{
  color:#fff!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:18px!important;
  font-variant-numeric:tabular-nums!important;
}
.player-personalize-range-shell,
.player-modify-range-shell.player-personalize-range-shell{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:18px!important;
}

/* Key: fixed semitone rail with exactly 13 visible step marks. */
.player-personalize-key-shell .player-modify-grooves{
  position:absolute!important;
  inset:0 6px!important;
  z-index:1!important;
  display:block!important;
  pointer-events:none!important;
}
.player-personalize-key-shell .player-modify-grooves::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:50%!important;
  height:3px!important;
  border-radius:999px!important;
  background:#292541!important;
  transform:translateY(-50%)!important;
}
.player-personalize-key-shell .player-modify-groove,
.player-personalize-key-shell .player-modify-groove.is-zero,
.player-personalize-key-shell .player-modify-groove.is-active,
.player-personalize-key-shell .player-modify-groove.is-current{
  position:absolute!important;
  z-index:2!important;
  display:block!important;
  width:1px!important;
  height:8px!important;
  border-radius:0!important;
  background:#494260!important;
  box-shadow:none!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}
.player-personalize-key-shell .player-modify-groove.is-zero{
  height:9px!important;
  background:#5a5273!important;
}
.player-personalize-key-shell .player-personalize-slider,
.player-personalize-key-shell .player-modify-slider{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  display:block!important;
  width:100%!important;
  height:18px!important;
  margin:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  background:transparent!important;
  cursor:pointer!important;
}
.player-personalize-key-shell .player-personalize-slider::-webkit-slider-runnable-track,
.player-personalize-key-shell .player-modify-slider::-webkit-slider-runnable-track{
  height:3px!important;
  background:transparent!important;
}
.player-personalize-key-shell .player-personalize-slider::-webkit-slider-thumb,
.player-personalize-key-shell .player-modify-slider::-webkit-slider-thumb{
  width:8px!important;
  height:16px!important;
  margin-top:-6.5px!important;
  border:0!important;
  border-radius:999px!important;
  background:#f7f5fb!important;
  box-shadow:0 1px 4px rgba(0,0,0,.42)!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.player-personalize-key-shell .player-personalize-slider::-moz-range-track,
.player-personalize-key-shell .player-personalize-slider::-moz-range-progress,
.player-personalize-key-shell .player-modify-slider::-moz-range-track,
.player-personalize-key-shell .player-modify-slider::-moz-range-progress{
  height:3px!important;
  background:transparent!important;
}
.player-personalize-key-shell .player-personalize-slider::-moz-range-thumb,
.player-personalize-key-shell .player-modify-slider::-moz-range-thumb{
  width:8px!important;
  height:16px!important;
  border:0!important;
  border-radius:999px!important;
  background:#f7f5fb!important;
  box-shadow:0 1px 4px rgba(0,0,0,.42)!important;
}

/* Tempo: simple continuous rail and circular white thumb. */
.player-personalize-setting:not(:first-child) .player-personalize-range-shell > .player-personalize-slider{
  display:block!important;
  width:100%!important;
  height:18px!important;
  margin:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  background:transparent!important;
  cursor:pointer!important;
}
.player-personalize-setting:not(:first-child) .player-personalize-range-shell > .player-personalize-slider::-webkit-slider-runnable-track{
  height:3px!important;
  border-radius:999px!important;
  background:#292541!important;
}
.player-personalize-setting:not(:first-child) .player-personalize-range-shell > .player-personalize-slider::-webkit-slider-thumb{
  width:15px!important;
  height:15px!important;
  margin-top:-6px!important;
  border:0!important;
  border-radius:50%!important;
  background:#f7f5fb!important;
  box-shadow:0 1px 4px rgba(0,0,0,.42)!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.player-personalize-setting:not(:first-child) .player-personalize-range-shell > .player-personalize-slider::-moz-range-track,
.player-personalize-setting:not(:first-child) .player-personalize-range-shell > .player-personalize-slider::-moz-range-progress{
  height:3px!important;
  border-radius:999px!important;
  background:#292541!important;
}
.player-personalize-setting:not(:first-child) .player-personalize-range-shell > .player-personalize-slider::-moz-range-thumb{
  width:15px!important;
  height:15px!important;
  border:0!important;
  border-radius:50%!important;
  background:#f7f5fb!important;
  box-shadow:0 1px 4px rgba(0,0,0,.42)!important;
}

/* Normal player: KaraFun-style card drops below the Personalize pill and
   overlays the queue. */
.player-modify-wrap > .player-personalize-panel{
  top:calc(100% + 8px)!important;
  right:0!important;
  bottom:auto!important;
}
.player-modify-wrap > .player-personalize-panel::before{
  content:""!important;
  position:absolute!important;
  top:-7px!important;
  right:39px!important;
  bottom:auto!important;
  width:12px!important;
  height:12px!important;
  border-top:1px solid #332b50!important;
  border-left:1px solid #332b50!important;
  border-right:0!important;
  border-bottom:0!important;
  background:#100d28!important;
  transform:rotate(45deg)!important;
}

/* Built-in fullscreen: identical card above the compact sliders button. */
.player-fullscreen-adjust-panel.player-personalize-panel{
  top:auto!important;
  right:max(48px,calc((100vw - 1040px) / 2 + 44px))!important;
  bottom:clamp(150px,calc(9vh + 78px),198px)!important;
}
.player-fullscreen-adjust-panel.player-personalize-panel::before{
  content:""!important;
  position:absolute!important;
  top:auto!important;
  right:22px!important;
  bottom:-7px!important;
  width:12px!important;
  height:12px!important;
  border-top:0!important;
  border-left:0!important;
  border-right:1px solid #332b50!important;
  border-bottom:1px solid #332b50!important;
  background:#100d28!important;
  transform:rotate(45deg)!important;
}
@media(max-width:680px){
  .player-personalize-panel,
  .player-fullscreen-adjust-panel.player-personalize-panel{
    width:min(320px,calc(100vw - 24px))!important;
  }
  .player-fullscreen-adjust-panel.player-personalize-panel{
    right:10px!important;
    bottom:118px!important;
  }
}


/* Closed-beta parity refinement: one-pixel visible pane splitters with wide invisible grab areas. */
.layout-splitter{z-index:45!important;background:var(--border)!important}
.layout-splitter::before{content:""!important;display:block!important;position:absolute!important;z-index:46!important;background:var(--pink)!important;box-shadow:none!important;border-radius:0!important;opacity:0;transition:opacity .15s ease}
.layout-splitter::after{content:""!important;display:block!important;position:absolute!important;background:transparent!important;box-shadow:none!important}
.layout-splitter:hover::before,.layout-splitter.is-dragging::before,.layout-splitter:focus-visible::before{opacity:1}
.layout-splitter-main{width:1px!important}
.layout-splitter-main::before{top:0!important;right:auto!important;bottom:0!important;left:0!important;width:1px!important}
.layout-splitter-main::after{top:0!important;right:-5px!important;bottom:0!important;left:-5px!important;width:auto!important}
.layout-splitter-player{height:1px!important}
.layout-splitter-player::before{top:0!important;right:0!important;bottom:auto!important;left:0!important;height:1px!important}
.layout-splitter-player::after{top:-5px!important;right:0!important;bottom:-5px!important;left:0!important;height:auto!important}
.player-modify-wrap{position:relative;z-index:90!important}
.player-modify-wrap>.player-modify-panel{z-index:91!important}

.player-meta{position:relative;z-index:90!important;overflow:visible!important}

/* Closed-beta parity refinement: keep the normal Key / Tempo panel visually above
   the horizontal player/queue splitter. The splitter remains usable in the exposed
   queue-side grab area once the pointer moves outside the popup. */
.player-pane{position:relative;z-index:60!important;overflow:visible!important}
.layout-splitter-player{z-index:45!important}
.player-meta{position:relative;z-index:70!important;overflow:visible!important}
.player-modify-wrap{position:relative;z-index:80!important}
.player-modify-wrap>.player-modify-panel{z-index:81!important}


/* Closed-beta queue-header parity hotfix: keep all queue labels on one clipped
   horizontal row when the right pane narrows. Older responsive rules assigned
   Singer and Version to explicit columns and could create an implicit second row. */
.queue-column-head{
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  overflow:hidden!important;
  grid-auto-flow:column!important;
  grid-auto-rows:40px!important;
  white-space:nowrap!important;
}
.queue-column-head>span{
  grid-row:1!important;
  min-width:0!important;
}
.queue-column-head .table-head-cell{
  overflow:hidden!important;
  white-space:nowrap!important;
}
@media(max-width:1000px){
  .queue-column-head>span:nth-child(4),
  .queue-column-head>span:nth-child(5),
  .queue-column-head>span:nth-child(6){
    grid-column:auto!important;
    grid-row:1!important;
  }
}
.right-pane.is-compact .queue-column-head>span{
  grid-column:auto!important;
  grid-row:1!important;
}

/* Closed-beta parity hotfix: keep the vertical browser/player rail visible for
   its complete height. The player pane is intentionally layered above the
   horizontal queue splitter for the Modify popup, so the vertical rail needs
   its own higher stacking level. */
.layout-splitter-main{z-index:95!important}


/* BPM / musical-key metadata integration */
.track-information-list>.track-information-audio-row{display:grid;grid-template-columns:1fr 1fr;padding:0}
.track-information-list>.track-information-audio-row>div{min-width:0;padding:12px 0 11px;border-top:0}
.track-information-list>.track-information-audio-row>div+div{padding-left:16px;border-left:1px solid rgba(255,255,255,.12)}
.player-track-audio-meta{display:flex;min-width:62px;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;margin-left:auto;color:#bdb5cd;font-size:11px;font-weight:650;line-height:14px;text-align:right;white-space:nowrap}
.player-track-audio-meta span+span{color:#fff}
.player-track-audio-meta.hidden{display:none!important}
.player-track-audio-meta+.player-modify-wrap{margin-left:10px}
.player-personalize-key-shell{margin-top:18px!important}
.player-modify-key-labels{position:absolute;left:6px;right:6px;bottom:21px;display:block;pointer-events:none}
.player-modify-key-label{position:absolute;width:max-content;overflow:visible;color:#aaa1bc;font-size:9px;font-weight:650;line-height:11px;text-align:center;transform:translateX(-50%);white-space:nowrap}
.player-modify-key-labels.is-empty{display:none}
.player-personalize-key-shell .player-modify-groove:nth-child(1),.player-modify-key-label:nth-child(1){left:0!important}
.player-personalize-key-shell .player-modify-groove:nth-child(2),.player-modify-key-label:nth-child(2){left:8.3333333333%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(3),.player-modify-key-label:nth-child(3){left:16.6666666667%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(4),.player-modify-key-label:nth-child(4){left:25%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(5),.player-modify-key-label:nth-child(5){left:33.3333333333%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(6),.player-modify-key-label:nth-child(6){left:41.6666666667%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(7),.player-modify-key-label:nth-child(7){left:50%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(8),.player-modify-key-label:nth-child(8){left:58.3333333333%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(9),.player-modify-key-label:nth-child(9){left:66.6666666667%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(10),.player-modify-key-label:nth-child(10){left:75%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(11),.player-modify-key-label:nth-child(11){left:83.3333333333%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(12),.player-modify-key-label:nth-child(12){left:91.6666666667%!important}
.player-personalize-key-shell .player-modify-groove:nth-child(13),.player-modify-key-label:nth-child(13){left:100%!important}