:root{
  --bg:#0f1115; --panel:#151924; --muted:#8b93a7; --text:#e8ecf6;
  --line:#23283a; --accent:#6ee7b7; --danger:#ff5c77;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui;background:var(--bg);color:var(--text);}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(15,17,21,.95);backdrop-filter:blur(10px);z-index:5}
.pathbox{display:flex;gap:8px;align-items:center;flex:1}
.pathbox input{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:10px;border-radius:10px;outline:none}
.actions{display:flex;align-items:center;gap:8px}
button,select,input{font:inherit}
button{background:var(--panel);border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:10px;cursor:pointer}
button.ghost{background:transparent}
button.danger{border-color:rgba(255,92,119,.6);color:var(--danger)}
button.icon{width:44px;display:flex;align-items:center;justify-content:center;padding:10px}
select{background:var(--panel);border:1px solid var(--line);color:var(--text);padding:10px;border-radius:10px;outline:none}
.status{color:var(--muted);font-size:12px;min-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.progress-wrap{width:160px;height:10px;border-radius:999px;background:#0b0d12;border:1px solid var(--line);overflow:hidden}
.progress-fill{height:100%;width:0%;background:var(--accent)}

.grid{display:grid;grid-template-columns:1.2fr 1.6fr 1.1fr;gap:12px;padding:12px;height:calc(100vh - 64px)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.panel-head{padding:12px;border-bottom:1px solid var(--line)}
.panel-head .title{font-weight:700;margin-bottom:8px}

/* Playlist title: show duration + multi-device status inline */
.panel-head .title.playlist-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.panel-head .title.playlist-title .badge{
  transform: translateY(1px);
}

.panel-head .title.playlist-title #claimMainBtn{
  padding: 4px 10px;
  font-size: 12px;
}
.row{display:flex;gap:8px;align-items:center}
.row.pl-controls{flex-wrap:wrap}

/* Playlist player row bits */
.pl-player-wrap{display:flex;align-items:center;gap:10px;flex:1 1 360px;min-width:260px}
#playerPL{flex:1 1 340px;min-width:240px}
.pl-player-remote{flex:1 1 340px;min-width:240px;padding:8px 10px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:12px}
.pl-seek{flex:1 1 220px;min-width:180px}
.pl-time{white-space:nowrap}
.row input{flex:1;background:#0b0d12;border:1px solid var(--line);color:var(--text);padding:10px;border-radius:10px}
.list{padding:8px;overflow:auto;flex:1;position:relative}

.item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid transparent;border-radius:12px}
.item:hover{background:#0b0d12;border-color:var(--line)}
.item.selected {outline: 1px solid rgba(110, 231, 183, 0.45); background: rgba(110, 231, 183, 0.08);}
.item.playing {box-shadow: inset 3px 0 0 rgba(110, 231, 183, 0.95); background: rgba(110, 231, 183, 0.14);}
.item.selected.playing {outline: 1px solid rgba(110, 231, 183, 0.75); background: rgba(110, 231, 183, 0.18);}
.meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.badge{font-size:15px;color:var(--muted);border:1px solid var(--line);padding:4px 8px;border-radius:999px}

.players{padding:10px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.playerbox{background:#0b0d12;border:1px solid var(--line);border-radius:14px;padding:10px}
.player-title{color:var(--muted);font-size:12px;margin-bottom:6px}
canvas{width:100%;background:transparent;border-radius:10px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}
.hidden{display:none}
.modal-card{width:min(1100px, 95vw);height:min(700px, 90vh);background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
.modal-body{padding:14px;overflow:auto;}
.logbox{padding:12px;overflow:auto;white-space:pre-wrap;color:var(--text);font-size:12px}
.muted { opacity: 0.75; font-weight: 500; }
.player-label { opacity: .85; font-size: 12px; margin: 2px 0 6px; }

/* Add this CSS to your existing styles.css or add to index.html in a <style> tag */

/* Radio button styling */
.modal-card input[type="radio"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.modal-card input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

/* Input styling */
.modal-card input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.modal-card input[type="text"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Button row */
.modal-card .row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Right-click context menu */
.ctx-menu{position:fixed;z-index:9999;min-width:220px;background:#0f1117;border:1px solid #2a2f3f;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.55);padding:6px;}
.ctx-menu.hidden{display:none;}
.ctx-menu button{width:100%;text-align:left;padding:10px 10px;border-radius:8px;background:transparent;border:none;color:#e5e7eb;font-size:13px;cursor:pointer;display:flex;gap:10px;align-items:center;}
.ctx-menu button:hover{background:rgba(110,231,183,0.12);}
.ctx-menu .sep{height:1px;background:#2a2f3f;margin:6px 2px;}

/* Drag & drop overlay */
.drop-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;}
.drop-overlay.hidden{display:none;}
.drop-overlay-card{background:rgba(15,17,23,.92);border:1px dashed rgba(110,231,183,.6);border-radius:18px;padding:26px 30px;max-width:560px;text-align:center;}
.drop-overlay-title{font-size:18px;font-weight:700;color:#f4f7fb;margin-bottom:8px;}
.drop-overlay-sub{font-size:13px;color:#b9c2d0;}

/* Track badges */
.item .name .badge-mini{margin-left:8px;font-size:12px;opacity:.9;}

/* Button styles */
button.primary {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

button.primary:hover {
  background: #0056b3;
}

button.ghost {
  background: transparent;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button.ghost:hover {
  background: #f5f5f5;
}

/* Spinner animation */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Copy options section */
#copyOptions {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

#copyOptions strong {
  color: #333;
  font-size: 14px;
}

/* Info text styling */
.modal-card .info-text {
  color: #666;
  font-size: 0.9em;
  margin-top: 5px;
}

/* Radio/checkbox labels */
.modal-card label {
  color: #333;
  font-size: 14px;
}



/* --- playlist UX: disabled buttons + drag reordering + position input --- */
button.icon:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
button.icon:disabled:hover{
  background:transparent;
}

.posInput{
  width:64px;
  text-align:center;
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  padding:4px 8px;
  border-radius:999px;
}
.posInput:focus{
  outline:none;
  border-color:rgba(110,231,183,0.6);
  color:var(--text);
}

.item.dragging{ opacity:0.35; }
.item.drag-over-before{ border-top:2px solid var(--accent); }
.item.drag-over-after{ border-bottom:2px solid var(--accent); }

/* ===== Design cleanup layout (sidebar + folded settings modal) ===== */
.app-shell{
  display:flex;
  height:100vh;
  width:100%;
  overflow:hidden;
}

.sidebar{
  width:72px;
  min-width:72px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(21,25,36,.96), rgba(11,13,18,.96));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding:10px 8px 12px;
  gap:10px;
}
.sidebar-top,
.sidebar-bottom{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.side-slot{width:100%;display:flex;justify-content:center}
.side-role{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}
.side-role .badge{
  width:100%;
  border-radius:12px;
  padding:8px 6px;
  text-align:center;
  font-size:11px;
  line-height:1.2;
  white-space:normal;
}
.side-role #claimMainBtn{
  width:100%;
  padding:8px 6px;
  font-size:11px;
  border-radius:12px;
}
.sidebar .icon,
.sidebar button{
  width:48px;
  min-height:44px;
  padding:8px;
  border-radius:12px;
}
.sidebar .side-role button{ width:100%; min-height:unset; }
.sidebar .side-role .badge{ width:100%; }
.sidebar-progress-label{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sidebar-progress-mount{
  min-height:160px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.progress-wrap.vertical{
  width:14px !important;
  height:140px !important;
  border-radius:999px;
  position:relative;
  display:flex;
  align-items:flex-end;
}
.progress-wrap.vertical .progress-fill{
  width:100% !important;
  height:0%;
  border-radius:999px;
  transition:height .18s ease;
}

.app-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

body.design-clean-layout .legacy-topbar{
  display:none;
}

body.design-clean-layout .grid{
  height:100%;
  padding:12px;
}

/* Modal cleanup */
.settings-modal-card{
  width:min(1120px, 95vw);
  height:min(86vh, 860px);
}
.settings-modal-body{
  padding:12px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.settings-section{
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(11,13,18,.6);
  overflow:hidden;
}
.settings-section > summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.settings-section > summary::-webkit-details-marker{ display:none; }
.settings-section > summary::before{
  content:'▸';
  color:var(--muted);
  transition:transform .15s ease;
  font-size:12px;
}
.settings-section[open] > summary::before{
  transform:rotate(90deg);
}
.settings-section-body{
  padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.03);
}
.settings-grid{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(120px, 200px);
  gap:8px 12px;
  align-items:center;
}
.settings-grid label{
  color:var(--text);
  font-size:13px;
}
.settings-grid input,
.settings-grid select{
  width:100%;
  max-width:100%;
}
.settings-grid input[type="checkbox"]{
  width:18px;
  height:18px;
  justify-self:start;
}
.settings-inline-row{
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.settings-inline-row > label{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.settings-inline-row select{
  min-width:170px;
}
.settings-actions-row{
  margin-top:10px;
  justify-content:flex-start;
}
.settings-modal-body .logbox{
  margin:0;
  min-height:220px;
  max-height:380px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0b0d12;
}

/* Header controls moved into settings modal */
#headerSettingsMount .header-controls-group{
  border:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.01);
  border-radius:10px;
  padding:10px;
}
#headerSettingsMount .header-controls-title{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
  font-weight:700;
}
#headerSettingsMount .pathbox,
#headerSettingsMount .actions{
  width:100%;
  flex-wrap:wrap;
  justify-content:flex-start;
}
#headerSettingsMount .pathbox input#musicDir{
  min-width:280px;
}
#headerSettingsMount .actions > *{ flex:0 0 auto; }
#headerSettingsMount .status{
  min-width:180px;
  flex:1 1 260px;
}
#headerSettingsMount .progress-wrap{ width:220px; }

/* Playlist title no longer hosts role controls after sidebar move */
body.design-clean-layout .panel-head .title.playlist-title #deviceRoleBadge,
body.design-clean-layout .panel-head .title.playlist-title #claimMainBtn{
  display:none;
}

@media (max-width: 1200px){
  .grid{ grid-template-columns:1fr; height:auto; }
  .panel{ min-height:280px; }
  .sidebar{ width:64px; min-width:64px; }
  .settings-grid{ grid-template-columns:1fr; }
}


/* ===== Design polish v2 (layout arrangement + settings visibility fixes) ===== */
body{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(110,231,183,.08), transparent 60%),
    radial-gradient(900px 520px at 110% 10%, rgba(99,102,241,.08), transparent 60%),
    var(--bg);
}

body.design-clean-layout .app-main{
  background:linear-gradient(180deg, rgba(9,11,16,.55), rgba(9,11,16,.2));
}

body.design-clean-layout .grid{
  display:grid;
  grid-template-columns:minmax(290px,1.05fr) minmax(360px,1.2fr) minmax(290px,1.05fr);
  grid-template-areas:"lib playlist sim";
  gap:14px;
  padding:14px;
}
#panelLibrary{grid-area:lib;}
#panelPlaylist{grid-area:playlist;}
#panelSimilar{grid-area:sim;}

body.design-clean-layout .panel{
  background:linear-gradient(180deg, rgba(21,25,36,.92), rgba(16,19,28,.95));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.02);
  border-radius:18px;
}
body.design-clean-layout .panel-head{
  padding:12px 12px 10px;
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}
body.design-clean-layout .panel-head .title{
  margin-bottom:10px;
  letter-spacing:.01em;
}
body.design-clean-layout .panel-head .row{
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
body.design-clean-layout .panel-head .row > input,
body.design-clean-layout .panel-head .row > select{
  height:38px;
}
body.design-clean-layout .panel-head .row > button{
  height:38px;
  padding:8px 12px;
}
body.design-clean-layout .list{
  padding:10px;
}
body.design-clean-layout .item{
  border-radius:14px;
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}
body.design-clean-layout .item:hover{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.06);
}

/* Sidebar polish */
.sidebar{
  width:78px;
  min-width:78px;
  padding:12px 10px 14px;
  border-right:1px solid rgba(255,255,255,.05);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.015);
}
.sidebar .icon, .sidebar button{
  width:52px;
  min-height:46px;
  border-radius:14px;
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.sidebar .icon:hover, .sidebar button:hover{
  background:rgba(255,255,255,.045);
}
.sidebar .side-role .badge{
  font-size:10px;
  padding:8px 5px;
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.sidebar .side-role #claimMainBtn{
  height:auto;
  line-height:1.2;
}
.sidebar-progress-mount{ min-height:190px; }
.progress-wrap.vertical{
  width:16px !important;
  height:170px !important;
  background:#090b10;
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}
.progress-wrap.vertical .progress-fill{
  background:linear-gradient(180deg, #79f2c2, #42c792);
}

/* Settings modal visibility + layout fixes (overrides legacy modal rules) */
.settings-modal-card{
  width:min(1240px, 97vw);
  height:min(90vh, 940px);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.settings-modal-card .modal-head{
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.settings-modal-card .row{
  justify-content:flex-start !important;
  margin-top:0 !important;
  gap:8px;
  flex-wrap:wrap;
}
.settings-modal-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-content:start;
}
.settings-modal-body > .settings-section:first-child,
.settings-modal-body > .settings-section:last-child{
  grid-column:1 / -1;
}
.settings-section{
  border-color:rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008));
}
.settings-section > summary{
  padding:11px 12px;
  font-size:13px;
  letter-spacing:.01em;
}
.settings-section-body{
  padding:12px;
  overflow:visible;
}
.settings-grid{
  grid-template-columns:minmax(180px, 280px) minmax(0, 1fr);
  gap:10px 12px;
}
.settings-grid > *{ min-width:0; }
.settings-modal-card label{
  color:var(--text) !important;
  font-size:13px;
}
.settings-modal-card input[type="text"],
.settings-modal-card input[type="number"],
.settings-modal-card select,
.settings-modal-card textarea{
  width:100%;
  max-width:100%;
  background:#0b0d12 !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:10px;
  padding:8px 10px;
  box-shadow:none !important;
}
.settings-modal-card input[type="checkbox"],
.settings-modal-card input[type="radio"]{
  accent-color: var(--accent);
}
.settings-modal-card button.ghost{
  border-color:var(--line);
  color:var(--text);
  background:transparent;
}
.settings-modal-card button.ghost:hover{
  background:rgba(255,255,255,.04);
}
.settings-modal-card #copyOptions{
  background:rgba(255,255,255,.02);
  border-color:var(--line);
}

/* Header controls inside modal: make everything visible and wrapped */
#headerSettingsMount{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
#headerSettingsMount .header-controls-group{
  background:rgba(255,255,255,.015);
  border-color:rgba(255,255,255,.06);
}
#headerSettingsMount .pathbox,
#headerSettingsMount .actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
#headerSettingsMount .pathbox > *,
#headerSettingsMount .actions > *{ min-width:0; }
#headerSettingsMount .pathbox input#musicDir{
  flex:1 1 340px;
}
#headerSettingsMount .pathbox select{
  flex:1 1 220px;
}
#headerSettingsMount .actions #vocalsModeSel{
  flex:1 1 420px;
  max-width:100%;
}
#headerSettingsMount .actions .status{
  flex:1 1 260px;
  min-width:180px;
}
#headerSettingsMount .actions .progress-wrap{
  width:100%;
  max-width:340px;
}
#headerSettingsMount .header-controls-title{
  color:#aab1c4;
  letter-spacing:.03em;
  text-transform:uppercase;
}

/* Deep audio controls were cramped before: explicit grid styles */
#deep_audio_cont.deep-audio-grid input[type="checkbox"]{
  justify-self:start;
  margin-top:2px;
}
#deep_audio_cont.deep-audio-grid select{
  min-width:0;
}

.settings-modal-body .logbox{
  min-height:260px;
  max-height:42vh;
  background:#090b10;
  border-color:rgba(255,255,255,.07);
}

/* Tighter panel toolbar layout */
#panelLibrary .panel-head .row > #searchBox{ flex:1 1 220px; }
#panelLibrary .panel-head .row > #sortSel{ flex:0 0 120px; }
#panelLibrary .panel-head .row > #lyricsFilter{ flex:0 0 120px; }
#panelSimilar .panel-head .row > #modeSel{ flex:0 0 110px; }
#panelSimilar .panel-head .row > #energySel{ flex:0 0 145px; }
#panelSimilar .panel-head .row > #similarLyricsFilter{ flex:0 0 120px; }
#panelPlaylist .panel-head .row.pl-controls > #playlistSel{ flex:0 1 220px; min-width:150px; }
#panelPlaylist .panel-head .row.pl-controls > #plPlayerWrap{ flex:1 1 380px; min-width:300px; }

@media (min-width: 1320px){
  #headerSettingsMount{ grid-template-columns:1fr 1fr; align-items:start; }
}
@media (max-width: 1180px){
  body.design-clean-layout .grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "playlist"
      "lib"
      "sim";
    height:auto;
  }
  .settings-modal-body{ grid-template-columns:1fr; }
  .settings-modal-body > .settings-section{ grid-column:auto !important; }
  .settings-grid{ grid-template-columns:1fr; }
  .sidebar{ width:68px; min-width:68px; }
  #panelPlaylist .panel-head .row.pl-controls > #plPlayerWrap{ min-width:220px; }
}


/* ===== Design polish v3 (sidebar progress/status + settings visibility hardening) ===== */
.sidebar-bottom{
  margin-top:auto;
  padding-top:8px;
}
.sidebar-progress-label{
  width:100%;
  text-align:center;
  font-weight:700;
  font-size:12px;
  letter-spacing:.04em;
  color:#b9c1d6;
}
.sidebar-status-mount{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.sidebar .status{
  min-width:0;
  width:100%;
  text-align:center;
  white-space:normal;
  word-break:break-word;
  line-height:1.2;
  font-size:11px;
  padding:6px 4px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  color:#c2cadc;
}

/* Keep header settings clean after moving progress/status out */
#headerSettingsMount .actions .progress-wrap,
#headerSettingsMount .actions #statusText{
  display:none !important;
}

/* Settings visibility hardening (legacy modal styles were still colliding) */
.settings-modal-card *{
  color:inherit;
}
.settings-modal-card .settings-section,
.settings-modal-card .settings-section-body,
.settings-modal-card .settings-grid,
.settings-modal-card .settings-grid > *{
  overflow:visible;
}
.settings-modal-card .settings-section[open]{
  overflow:visible;
}
.settings-modal-card .settings-section-body{
  display:block;
}
.settings-modal-card .settings-grid{
  width:100%;
}
.settings-modal-card .settings-grid label{
  display:block;
  line-height:1.25;
  align-self:center;
}
.settings-modal-card .settings-grid input[type="number"],
.settings-modal-card .settings-grid input[type="text"],
.settings-modal-card .settings-grid select{
  min-width:0;
  width:100%;
}
.settings-modal-card .settings-grid input[type="checkbox"],
.settings-modal-card .settings-grid input[type="radio"]{
  width:18px !important;
  height:18px !important;
  margin:0;
  justify-self:start;
}
.settings-modal-card .settings-section-body .row{
  justify-content:flex-start !important;
}

/* Section-specific layouts so long controls stop disappearing */
.settings-modal-body > .settings-section:nth-child(3),
.settings-modal-body > .settings-section:nth-child(4){
  grid-column:1 / -1;
}
.settings-modal-body > .settings-section:nth-child(5){
  grid-column:1 / -1;
}
#headerSettingsMount .pathbox input#musicDir{
  min-width:240px;
}
#headerSettingsMount .pathbox select,
#headerSettingsMount .actions select{
  min-width:180px;
  flex:1 1 220px;
}
#headerSettingsMount .actions button{
  flex:0 0 auto;
}
#headerSettingsMount .actions #vocalsModeSel{
  min-width:320px;
  flex:1 1 520px;
}

/* Cleaner modern polish pass */
body.design-clean-layout .panel-head .title{
  font-size:15px;
  color:#e9edf7;
}
body.design-clean-layout .panel-head .title .muted{
  color:#aeb6ca;
}
body.design-clean-layout .panel-head .row > button,
body.design-clean-layout .panel-head .row > select,
body.design-clean-layout .panel-head .row > input{
  border-radius:12px;
  border-color:rgba(255,255,255,.07);
  background:rgba(9,11,16,.65);
}
body.design-clean-layout .panel-head .row > button:hover{
  background:rgba(255,255,255,.05);
}
body.design-clean-layout .list{
  scrollbar-width:thin;
}
body.design-clean-layout .item{
  background:rgba(255,255,255,0);
  border:1px solid rgba(255,255,255,.03);
}
body.design-clean-layout .item .name{
  font-weight:600;
}
body.design-clean-layout .badge{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.015);
}
.settings-modal-card{
  background:linear-gradient(180deg, rgba(20,23,34,.98), rgba(14,17,26,.98));
}
.settings-section > summary{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.settings-section > summary:hover{
  background:rgba(255,255,255,.02);
}

@media (max-width: 980px){
  .sidebar-status-mount{ min-height:48px; }
  .sidebar .status{ font-size:10px; }
  .settings-modal-card{ width:min(98vw, 1240px); }
}


/* ===== Focused player/panel visual pass v4 ===== */
body.design-clean-layout .panel{
  overflow: hidden;
}

body.design-clean-layout .panel-head{
  border-bottom: 1px solid rgba(255,255,255,.05);
}

body.design-clean-layout .panel-head .row > button,
body.design-clean-layout .panel-head .row > select,
body.design-clean-layout .panel-head .row > input{
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .08s ease;
}
body.design-clean-layout .panel-head .row > button:hover,
body.design-clean-layout .panel-head .row > select:hover,
body.design-clean-layout .panel-head .row > input:hover{
  border-color: rgba(255,255,255,.11);
}
body.design-clean-layout .panel-head .row > button:focus-visible,
body.design-clean-layout .panel-head .row > select:focus-visible,
body.design-clean-layout .panel-head .row > input:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(110,231,183,.12);
  border-color: rgba(110,231,183,.35);
}

/* Playlist toolbar/player row feels like a clean control strip */
body.design-clean-layout #panelPlaylist .row.pl-controls{
  gap: 8px;
  align-items: center;
  padding: 6px;
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 14px;
}
body.design-clean-layout #panelPlaylist .row.pl-controls > button,
body.design-clean-layout #panelPlaylist .row.pl-controls > select,
body.design-clean-layout #panelPlaylist .row.pl-controls > input{
  height: 36px;
}
body.design-clean-layout #panelPlaylist #plAutoNextBtn{
  min-width: 64px;
  font-weight: 600;
}
body.design-clean-layout #panelPlaylist #plPlayerWrap{
  background: rgba(8,10,14,.52);
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 13px;
  padding: 6px 8px;
  min-height: 48px;
}
body.design-clean-layout #playerPL{
  min-height: 34px;
  border-radius: 10px;
  filter: saturate(.9) brightness(.95);
}
body.design-clean-layout #plPlayerRemote{
  border-style: solid;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
body.design-clean-layout #plSeek{
  accent-color: #6ee7b7;
  height: 6px;
  padding: 0;
  background: transparent;
  border: none;
}
body.design-clean-layout #plTime{
  min-width: 94px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Library / Similar list panels feel more modern and readable */
body.design-clean-layout .list{
  background: linear-gradient(180deg, rgba(255,255,255,.008), rgba(255,255,255,.002));
}
body.design-clean-layout .item{
  padding: 10px 11px;
  margin-bottom: 4px;
}
body.design-clean-layout .item:last-child{ margin-bottom: 0; }
body.design-clean-layout .item .sub{
  color: #9ea7bc;
}
body.design-clean-layout .item .badges .badge{
  font-size: 12px;
  padding: 4px 7px;
}

/* Similar panel players: make them look like a proper bottom dock */
body.design-clean-layout #panelSimilar .players{
  border-top: 1px solid rgba(255,255,255,.05);
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.006));
  padding: 10px;
  gap: 10px;
}
body.design-clean-layout #panelSimilar .playerbox{
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(9,11,16,.86), rgba(8,10,14,.92));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  padding: 8px 9px 9px;
}
body.design-clean-layout #panelSimilar .player-title{
  min-height: 16px;
  margin-bottom: 6px;
  color: #b8c0d3;
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.design-clean-layout #panelSimilar audio{
  width: 100%;
  height: 34px;
  border-radius: 10px;
  filter: brightness(.95) saturate(.9);
}
body.design-clean-layout #panelSimilar canvas{
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.04);
  background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}

/* Advanced similar settings panel: match app aesthetic */
body.design-clean-layout #advancedSettingsPanel{
  margin: 8px 10px !important;
  padding: 12px !important;
  background: linear-gradient(180deg, rgba(9,11,16,.92), rgba(12,14,20,.92)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
body.design-clean-layout #advancedSettingsPanel input,
body.design-clean-layout #advancedSettingsPanel select,
body.design-clean-layout #advancedSettingsPanel button{
  border-radius: 10px !important;
}

/* Settings modal v4: ensure Lyrics/Vocal section values are visible + tighter readable rows */
.settings-modal-card .settings-grid input[type=number]{
  font-variant-numeric: tabular-nums;
}
.settings-modal-card .settings-grid label[for^="vocals"],
.settings-modal-card .settings-grid label[for^="stage2"]{
  color: #d5dbee !important;
}
.settings-modal-card #stage2EnableWhisper{
  margin-top: 1px;
}
.settings-modal-card .settings-section-body .muted{
  color:#aeb6ca;
  opacity: .95;
}

/* Responsive polish for footer players */
@media (max-width: 1180px){
  body.design-clean-layout #panelSimilar .players{
    grid-template-columns: 1fr;
  }
  body.design-clean-layout #panelPlaylist .row.pl-controls{
    padding: 6px;
  }
}

/* ===== Final UI polish v5 (glass panels + tighter controls) ===== */
body.design-clean-layout{
  background:
    radial-gradient(1200px 480px at 18% -10%, rgba(110,231,183,.06), transparent 62%),
    radial-gradient(1000px 520px at 92% -12%, rgba(124,132,255,.05), transparent 58%),
    linear-gradient(180deg, #0d1016 0%, #0b0e13 100%);
}

body.design-clean-layout .app-main{
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.design-clean-layout .grid{
  gap: 14px;
  padding: 14px;
  align-items: stretch;
}

body.design-clean-layout .panel{
  background: linear-gradient(180deg, rgba(20,24,34,.90), rgba(14,17,24,.92));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.02);
  backdrop-filter: blur(12px);
}

body.design-clean-layout .panel-head{
  background: linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,0));
  padding: 10px 12px;
}

body.design-clean-layout .panel-head .title{
  font-size: 14px;
  letter-spacing: .01em;
}

body.design-clean-layout .panel-head .row{
  gap: 7px;
}

body.design-clean-layout button,
body.design-clean-layout select,
body.design-clean-layout input{
  color: #e7ebf7;
}

body.design-clean-layout button{
  border-radius: 12px;
}

body.design-clean-layout button.icon{
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  line-height: 1;
  font-size: 15px;
}

body.design-clean-layout .sidebar .icon,
body.design-clean-layout .sidebar button{
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

body.design-clean-layout .sidebar .icon:hover,
body.design-clean-layout .sidebar button:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}

body.design-clean-layout .sidebar .icon:active,
body.design-clean-layout .sidebar button:active{
  transform: translateY(1px);
}

body.design-clean-layout .sidebar-progress-label{
  color: #d7dded;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}

body.design-clean-layout .sidebar-progress-mount{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

body.design-clean-layout .sidebar-progress-mount .progress-wrap,
body.design-clean-layout .sidebar-progress-mount .progress-vertical,
body.design-clean-layout .sidebar-progress-mount .progress-bar,
body.design-clean-layout .sidebar-progress-mount .progress-shell{
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(8,10,14,.85) !important;
}

body.design-clean-layout .sidebar .status{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-color: rgba(255,255,255,.08);
}

/* Playlist toolbar + transport */
body.design-clean-layout #panelPlaylist .row.pl-controls{
  gap: 6px;
  padding: 7px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008));
  border: 1px solid rgba(255,255,255,.055);
}

body.design-clean-layout #panelPlaylist .row.pl-controls > select,
body.design-clean-layout #panelPlaylist .row.pl-controls > button,
body.design-clean-layout #panelPlaylist .row.pl-controls > input{
  height: 34px;
}

body.design-clean-layout #panelPlaylist #playlistSel{
  min-width: 165px;
  font-weight: 600;
}

body.design-clean-layout #panelPlaylist #plPlayerWrap{
  min-height: 44px;
  padding: 4px 7px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(7,9,13,.86), rgba(8,10,14,.72));
  border: 1px solid rgba(255,255,255,.06);
}

body.design-clean-layout #panelPlaylist #plPrevBtn,
body.design-clean-layout #panelPlaylist #plToggleBtn,
body.design-clean-layout #panelPlaylist #plNextBtn{
  width: 34px;
  min-width: 34px;
  height: 34px;
  font-size: 13px;
  border-radius: 11px;
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.07);
}

body.design-clean-layout #panelPlaylist #plToggleBtn{
  background: rgba(110,231,183,.08);
  border-color: rgba(110,231,183,.2);
}

body.design-clean-layout #panelPlaylist #plSeek{
  height: 4px;
  border-radius: 999px;
}
body.design-clean-layout #panelPlaylist #plSeek::-webkit-slider-runnable-track{
  height: 4px;
  background: rgba(255,255,255,.16);
  border-radius: 999px;
}
body.design-clean-layout #panelPlaylist #plSeek::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: #6ee7b7;
  border: 2px solid rgba(9,11,16,.95);
  box-shadow: 0 0 0 1px rgba(110,231,183,.35);
}
body.design-clean-layout #panelPlaylist #plSeek::-moz-range-track{
  height: 4px;
  background: rgba(255,255,255,.16);
  border: none;
  border-radius: 999px;
}
body.design-clean-layout #panelPlaylist #plSeek::-moz-range-thumb{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(9,11,16,.95);
  background: #6ee7b7;
}

body.design-clean-layout #panelPlaylist #plTime{
  min-width: 102px;
  font-size: 12px;
  color: #c3cbdd;
}

/* List row polish + compact action icons */
body.design-clean-layout .item{
  border-radius: 13px;
  padding: 9px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.008), rgba(255,255,255,0));
  border-color: rgba(255,255,255,.04);
}

body.design-clean-layout .item:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.008));
  border-color: rgba(255,255,255,.09);
}

body.design-clean-layout .item .meta{
  gap: 4px;
}

body.design-clean-layout .item .name{
  font-size: 13px;
  letter-spacing: .01em;
}

body.design-clean-layout .item .sub{
  font-size: 11px;
  line-height: 1.2;
}

body.design-clean-layout .item .badges{
  gap: 5px;
}

body.design-clean-layout .item .badges > button.icon{
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 10px;
  padding: 0;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.015);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}

body.design-clean-layout .item .badges > button.icon:hover{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.14);
}

body.design-clean-layout .item .badges > button.icon:active{
  transform: translateY(1px);
}

body.design-clean-layout .item .badges > .posInput{
  width: 54px;
  height: 30px;
  border-radius: 10px;
  padding: 4px 6px;
  font-size: 12px;
  color: #c8d0e2;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.01);
}

body.design-clean-layout #playlistTracks .item .name::before{
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
  background: rgba(255,255,255,.14);
}
body.design-clean-layout #playlistTracks .item.playing .name::before{
  background: rgba(110,231,183,.95);
  box-shadow: 0 0 0 4px rgba(110,231,183,.14);
}

/* Similar bottom players tighter + cleaner */
body.design-clean-layout #panelSimilar .players{
  padding: 8px 10px 10px;
  gap: 8px;
}

body.design-clean-layout #panelSimilar .playerbox{
  padding: 8px;
  border-radius: 13px;
}

body.design-clean-layout #panelSimilar audio{
  height: 30px;
}

body.design-clean-layout #panelSimilar canvas{
  margin-top: 5px;
  height: 54px;
}

/* Logs & Settings final polish */
body.design-clean-layout .settings-modal-card{
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02);
}

body.design-clean-layout .settings-modal-card .modal-head{
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

body.design-clean-layout .settings-section{
  border-radius: 12px;
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.008);
}

body.design-clean-layout .settings-section > summary{
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 650;
  position: relative;
  list-style: none;
}
body.design-clean-layout .settings-section > summary::-webkit-details-marker{ display:none; }
body.design-clean-layout .settings-section > summary::after{
  content: '▸';
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #aeb6ca;
  transition: transform .12s ease;
}
body.design-clean-layout .settings-section[open] > summary::after{
  transform: translateY(-50%) rotate(90deg);
}

body.design-clean-layout .settings-section-body{
  padding: 10px 11px 11px;
}

body.design-clean-layout .settings-modal-card .logbox{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(6,8,12,.72);
  line-height: 1.35;
}

/* Small screens */
@media (max-width: 1120px){
  body.design-clean-layout .grid{
    gap: 10px;
    padding: 10px;
  }
  body.design-clean-layout .item .badges > button.icon{ width: 28px; min-width:28px; height:28px; }
  body.design-clean-layout .item .badges > .posInput{ width: 50px; }
}

/* ===== Layout pass v6: concept-like floating players + playlist title selector placement ===== */
body.design-clean-layout #panelLibrary,
body.design-clean-layout #panelPlaylist,
body.design-clean-layout #panelSimilar{
  position: relative;
  overflow: hidden;
}

/* Reserve room for floating docks inside each column */

/* Ensure side lists can scroll above floating docks */
#libraryList.list,
#similarList.list{
  padding-bottom: 360px;
}
body.design-clean-layout #libraryList.list,
body.design-clean-layout #similarList.list{
  /* Reserve extra space so the last ~3 items are not hidden under the floating dock */
  padding-bottom: 288px;
}
body.design-clean-layout #playlistTracks.list{
  padding-bottom: 152px;
}

/* Playlist title arrangement: Playlist [select] (duration) */
body.design-clean-layout #panelPlaylist .panel-head .title.playlist-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
body.design-clean-layout #panelPlaylist .playlist-title .playlist-title-label{
  font-weight:700;
  letter-spacing:.01em;
}
body.design-clean-layout #panelPlaylist .playlist-title #playlistSel{
  min-width:180px;
  max-width:260px;
  height:34px;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  font-weight:600;
}
body.design-clean-layout #panelPlaylist .playlist-title #playlistTotalDur{
  font-variant-numeric: tabular-nums;
  color:#c0c8db;
}

/* Action row only (transport moved to floating dock) */
body.design-clean-layout #panelPlaylist .row.pl-controls{
  gap:6px;
  padding:0;
  background:transparent;
  border:none;
}
body.design-clean-layout #panelPlaylist .row.pl-controls > button{
  height:32px;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.07);
}

/* Floating docks (hovering cards) */
body.design-clean-layout .floating-dock{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:6;
  pointer-events:none;
}
body.design-clean-layout .floating-dock > *{
  pointer-events:auto;
}

body.design-clean-layout .side-player-dock .floating-playerbox{
  background:linear-gradient(180deg, rgba(17,19,24,.94), rgba(11,13,18,.96));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 18px 30px rgba(0,0,0,.35), 0 3px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.02);
  padding:10px 12px 10px;
}
body.design-clean-layout .side-player-dock .player-title{
  min-height:18px;
  margin:0 0 6px;
  color:#aeb7ca;
  font-size:11px;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.design-clean-layout .side-player-dock audio{
  width:100%;
  height:28px;
  border-radius:8px;
  display:block;
  margin:0;
}
body.design-clean-layout .side-player-dock canvas{
  display:block;
  width:100%;
  height:46px;
  margin-top:6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(5,7,10,.7);
}

/* Playlist center floating transport (single visual player, no duplicate native controls) */
body.design-clean-layout #plFloatingDock{
  left:10px;
  right:10px;
  bottom:10px;
}
body.design-clean-layout #plFloatingDock{
  background:linear-gradient(180deg, rgba(20,22,28,.96), rgba(14,16,21,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:0 22px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025);
  padding:10px 12px 12px;
  pointer-events:auto;
}
body.design-clean-layout #plFloatingDock .playlist-dock-title{
  margin:0 0 8px;
  color:#b7c0d5;
  font-size:12px;
  min-height:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.design-clean-layout #plFloatingDock #plPlayerWrap{
  display:none;
  margin-bottom:8px;
  min-width:0;
  padding:0;
  background:transparent;
  border:none;
}
body.design-clean-layout #plFloatingDock #plPlayerWrap:has(#plPlayerRemote:not(.hidden)){
  display:flex;
}
body.design-clean-layout #plFloatingDock #playerPL{
  display:none !important; /* avoid duplicate player UI; custom transport is the visible control */
}
body.design-clean-layout #plFloatingDock #plPlayerRemote{
  width:100%;
  min-width:0;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.12);
  color:#c7cfdf;
}
body.design-clean-layout #plFloatingDock .pl-transport-row{
  display:grid;
  grid-template-columns:auto auto auto 1fr auto;
  gap:8px;
  align-items:center;
}
body.design-clean-layout #plFloatingDock #plPrevBtn,
body.design-clean-layout #plFloatingDock #plToggleBtn,
body.design-clean-layout #plFloatingDock #plNextBtn{
  width:36px;
  min-width:36px;
  height:36px;
  border-radius:50%;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.02);
}
body.design-clean-layout #plFloatingDock #plToggleBtn{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.design-clean-layout #plFloatingDock #plSeek{
  min-width:120px;
  width:100%;
  margin:0;
}
body.design-clean-layout #plFloatingDock #plTime{
  min-width:100px;
  text-align:center;
  color:#8f98ad;
  font-size:11px;
}

/* Panels should visually feel like the dock is floating over them */
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #panelPlaylist .list,
body.design-clean-layout #panelSimilar .list{
  background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.002));
}
body.design-clean-layout #panelLibrary::after,
body.design-clean-layout #panelPlaylist::after,
body.design-clean-layout #panelSimilar::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:86px;
  height:36px;
  background:linear-gradient(180deg, rgba(21,25,36,0), rgba(21,25,36,.55));
  pointer-events:none;
}
body.design-clean-layout #panelPlaylist::after{ bottom:126px; }

/* Hide any legacy two-player footer container if present */
body.design-clean-layout #panelSimilar > .players{
  display:none !important;
}

@media (max-width: 1180px){
  body.design-clean-layout #libraryList.list,
  body.design-clean-layout #similarList.list{ padding-bottom: 106px; }
  body.design-clean-layout #playlistTracks.list{ padding-bottom: 144px; }
  body.design-clean-layout #plFloatingDock .pl-transport-row{
    grid-template-columns:auto auto auto 1fr;
    grid-template-areas:
      "prev play next time"
      "seek seek seek seek";
  }
  body.design-clean-layout #plFloatingDock #plPrevBtn{ grid-area:prev; }
  body.design-clean-layout #plFloatingDock #plToggleBtn{ grid-area:play; }
  body.design-clean-layout #plFloatingDock #plNextBtn{ grid-area:next; }
  body.design-clean-layout #plFloatingDock #plTime{ grid-area:time; justify-self:end; }
  body.design-clean-layout #plFloatingDock #plSeek{ grid-area:seek; }
}


/* ===== Concept-accuracy pass v7: header alignment + true hovering docks + playlist header order ===== */
body.design-clean-layout .grid{
  padding: 12px 14px 82px;
  gap: 16px;
  align-items: stretch;
}

body.design-clean-layout #panelLibrary,
body.design-clean-layout #panelPlaylist,
body.design-clean-layout #panelSimilar{
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(22,23,28,.96), rgba(16,17,21,.98));
  border-color: rgba(255,255,255,.05);
  box-shadow:
    0 14px 32px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025);
}

/* Side panel headers in one clean row like concept */
body.design-clean-layout #panelLibrary .panel-head,
body.design-clean-layout #panelSimilar .panel-head{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  padding: 12px 12px 8px;
}
body.design-clean-layout #panelLibrary .panel-head .title,
body.design-clean-layout #panelSimilar .panel-head .title{
  margin: 0;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
body.design-clean-layout #panelLibrary .panel-head .row,
body.design-clean-layout #panelSimilar .panel-head .row{
  margin: 0;
  justify-self: end;
  width: 100%;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}
body.design-clean-layout #panelLibrary .panel-head .row > *,
body.design-clean-layout #panelSimilar .panel-head .row > *{
  min-width: 0;
}
body.design-clean-layout #panelLibrary .panel-head #searchBox{
  flex: 1 1 190px;
  min-width: 150px;
}
body.design-clean-layout #panelLibrary .panel-head #sortSel{ flex: 0 0 132px; }
body.design-clean-layout #panelLibrary .panel-head #lyricsFilter{ flex: 0 0 98px; }
body.design-clean-layout #panelSimilar .panel-head #modeSel{ flex: 0 0 98px; }
body.design-clean-layout #panelSimilar .panel-head #energySel{ flex: 0 0 132px; }
body.design-clean-layout #panelSimilar .panel-head #similarLyricsFilter{ flex: 0 0 98px; }
body.design-clean-layout #panelSimilar .panel-head #aiSimilarTitle{
  display: none; /* concept uses plain 'AI-Similar' header line */
}

/* Playlist header: title, selector, duration in one line */
body.design-clean-layout #panelPlaylist .panel-head{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
  padding: 12px 12px 10px;
}
body.design-clean-layout #panelPlaylist .panel-head .title.playlist-title{
  display: grid;
  grid-template-columns: auto minmax(150px, 230px) auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 0;
}
body.design-clean-layout #panelPlaylist .playlist-title .playlist-title-label{
  white-space: nowrap;
}
body.design-clean-layout #panelPlaylist .playlist-title #playlistSel{
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 32px;
  border-radius: 9px;
}
body.design-clean-layout #panelPlaylist .playlist-title #playlistTotalDur{
  white-space: nowrap;
  justify-self: start;
  margin: 0;
}
body.design-clean-layout #panelPlaylist .row.pl-controls{
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
}
body.design-clean-layout #panelPlaylist .row.pl-controls > button{
  height: 31px;
  padding: 5px 10px;
  border-radius: 9px;
  font-size: 12px;
}

/* Darker empty content wells */
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #panelPlaylist .list,
body.design-clean-layout #panelSimilar .list{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  margin: 8px 10px 0;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(255,255,255,.035), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(76,80,90,.10), rgba(41,44,52,.14));
  box-shadow: inset 0 10px 26px rgba(255,255,255,.02), inset 0 -8px 22px rgba(0,0,0,.18);
}

/* Reserve more room because docks float over / outside the panels */
body.design-clean-layout #libraryList.list,
body.design-clean-layout #similarList.list{
  padding-bottom: 130px;
}
body.design-clean-layout #playlistTracks.list{
  padding-bottom: 182px;
}

/* Floating/hovering docks: detached from panel bottom */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock{
  left: 12px;
  right: 12px;
  bottom: -16px;
  z-index: 8;
}
body.design-clean-layout #plFloatingDock{
  left: -2px;
  right: -2px;
  bottom: -22px;
  z-index: 10;
  border-radius: 0; /* wrapper invisible; inner card below handles radius */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
body.design-clean-layout #plFloatingDock::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Side players visually match concept (title -> waveform -> controls) */
body.design-clean-layout .side-player-dock .floating-playerbox{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 7px;
  border-radius: 12px;
  padding: 8px 10px 9px;
  background: linear-gradient(180deg, rgba(23,24,28,.97), rgba(16,17,20,.98));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 22px 30px rgba(0,0,0,.36),
    0 8px 14px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
}
body.design-clean-layout .side-player-dock .player-title{
  margin: 0;
  min-height: 16px;
  font-size: 10px;
  color: #9098aa;
}
body.design-clean-layout .side-player-dock canvas{
  order: 2;
  height: 42px;
  margin-top: 0;
  border-radius: 6px;
  border-color: rgba(255,255,255,.04);
  background: rgba(6,8,11,.92);
}
body.design-clean-layout .side-player-dock audio{
  order: 3;
  height: 24px;
  border-radius: 6px;
  opacity: .9;
  filter: saturate(.82) brightness(.9);
}

/* Playlist center dock (single visible player) */
body.design-clean-layout #plFloatingDock > .playlist-dock-title,
body.design-clean-layout #plFloatingDock > #plPlayerWrap,
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  background: linear-gradient(180deg, rgba(23,24,28,.97), rgba(17,18,21,.99));
  border-left: 1px solid rgba(255,255,255,.07);
  border-right: 1px solid rgba(255,255,255,.07);
}
body.design-clean-layout #plFloatingDock > .playlist-dock-title{
  border-top: 1px solid rgba(255,255,255,.07);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  padding: 10px 12px 6px;
  margin: 0;
  box-shadow: 0 22px 30px rgba(0,0,0,.38), 0 8px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);
}
body.design-clean-layout #plFloatingDock > #plPlayerWrap{
  margin: 0;
  padding: 0 12px 6px;
  display: none !important;
}
body.design-clean-layout #plFloatingDock > #plPlayerWrap.show-remote{
  display: flex !important;
}
body.design-clean-layout #plFloatingDock audio#playerPL{
  display: none !important;
}
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  border-bottom: 1px solid rgba(255,255,255,.07);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  padding: 8px 12px 12px;
  box-shadow: 0 22px 30px rgba(0,0,0,.38), 0 8px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.015);
  grid-template-columns: auto auto auto 1fr auto auto;
  gap: 10px;
}
body.design-clean-layout #plFloatingDock #plPrevBtn,
body.design-clean-layout #plFloatingDock #plToggleBtn,
body.design-clean-layout #plFloatingDock #plNextBtn{
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 50%;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
}
body.design-clean-layout #plFloatingDock #plSeek{
  height: 4px;
}
body.design-clean-layout #plFloatingDock #plTime{
  min-width: 88px;
  text-align: center;
  font-size: 10px;
  opacity: .85;
}
body.design-clean-layout #plFloatingDock .pl-transport-row::after{
  content: "🔊";
  font-size: 12px;
  opacity: .6;
  justify-self: end;
}

/* Gradient fade starts above hovering docks */
body.design-clean-layout #panelLibrary::after,
body.design-clean-layout #panelSimilar::after{ bottom: 110px; }
body.design-clean-layout #panelPlaylist::after{ bottom: 148px; }

/* Strongly hide any legacy/duplicate playlist visual player rows if present */
body.design-clean-layout #panelPlaylist .row.pl-controls #plPlayerWrap,
body.design-clean-layout #panelPlaylist .players{
  display: none !important;
}

@media (max-width: 1380px){
  body.design-clean-layout #panelLibrary .panel-head,
  body.design-clean-layout #panelSimilar .panel-head{
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  body.design-clean-layout #panelLibrary .panel-head .row,
  body.design-clean-layout #panelSimilar .panel-head .row{
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 1180px){
  body.design-clean-layout .grid{ padding-bottom: 72px; }
  body.design-clean-layout #libraryList.list,
  body.design-clean-layout #similarList.list{ padding-bottom: 288px; }
  body.design-clean-layout #playlistTracks.list{ padding-bottom: 170px; }
  body.design-clean-layout #plFloatingDock > .pl-transport-row{
    grid-template-columns: auto auto auto 1fr auto;
  }
  body.design-clean-layout #plFloatingDock .pl-transport-row::after{ display:none; }
}


/* ===== Concept-match pass v8: fix player visibility + dropdown clipping ===== */
/* Floating docks use negative bottom offsets; panels must allow overflow so docks remain visible. */
body.design-clean-layout #panelLibrary,
body.design-clean-layout #panelPlaylist,
body.design-clean-layout #panelSimilar{
  overflow: visible !important;
  z-index: 1;
}
body.design-clean-layout #panelLibrary{ z-index: 2; }
body.design-clean-layout #panelPlaylist{ z-index: 3; }
body.design-clean-layout #panelSimilar{ z-index: 2; }

/* Keep list areas clipped/scrollable while panel shells allow hovering docks outside bounds. */
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #panelPlaylist .list,
body.design-clean-layout #panelSimilar .list{
  overflow: auto;
}

/* Strongly ensure floating docks render and sit above panel wells. */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock,
body.design-clean-layout #plFloatingDock{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}
body.design-clean-layout #libPlayerDock > *,
body.design-clean-layout #simPlayerDock > *,
body.design-clean-layout #plFloatingDock > *{
  pointer-events: auto;
}

/* Match concept more closely: side docks hover over lower edge, centered within columns. */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock{
  left: 12px;
  right: 12px;
  bottom: -14px;
}
body.design-clean-layout #plFloatingDock{
  left: -10px;
  right: -10px;
  bottom: -26px;
}
body.design-clean-layout #plFloatingDock > .playlist-dock-title,
body.design-clean-layout #plFloatingDock > #plPlayerWrap,
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  margin-left: 22px;
  margin-right: 22px;
}

/* Native audio widgets can collapse visually under aggressive layout overrides; keep side players visible. */
body.design-clean-layout #libPlayerDock audio#playerA,
body.design-clean-layout #simPlayerDock audio#playerB{
  display: block !important;
  width: 100%;
  min-height: 24px;
}
body.design-clean-layout #libPlayerDock canvas#waveA,
body.design-clean-layout #simPlayerDock canvas#waveB{
  display: block !important;
}

/* Dropdown popup text clipping fix (Firefox/Windows emoji + compact controls). */
body.design-clean-layout select{
  line-height: 1.25;
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}
body.design-clean-layout select option,
body.design-clean-layout select optgroup{
  line-height: 1.35;
  font-size: 13px;
}
/* Explicitly de-cramp header selects where clipping is most visible. */
body.design-clean-layout #panelLibrary .panel-head .row > select,
body.design-clean-layout #panelSimilar .panel-head .row > select,
body.design-clean-layout #panelPlaylist .playlist-title #playlistSel{
  height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Concept-match v8 visual tightening */
body.design-clean-layout .side-player-dock .floating-playerbox{
  border-radius: 13px;
  padding: 9px 10px 10px;
}
body.design-clean-layout .side-player-dock .player-title{
  font-size: 11px;
  letter-spacing: .015em;
}
body.design-clean-layout #plFloatingDock > .playlist-dock-title{
  min-height: 18px;
  font-size: 12px;
}
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  grid-template-columns: auto auto auto 1fr auto auto;
  align-items: center;
}
body.design-clean-layout #plFloatingDock #plPrevBtn,
body.design-clean-layout #plFloatingDock #plToggleBtn,
body.design-clean-layout #plFloatingDock #plNextBtn{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 1px 0 rgba(0,0,0,.25);
}

@media (max-width: 1180px){
  body.design-clean-layout #plFloatingDock{
    left: -4px;
    right: -4px;
    bottom: -22px;
  }
  body.design-clean-layout #plFloatingDock > .playlist-dock-title,
  body.design-clean-layout #plFloatingDock > #plPlayerWrap,
  body.design-clean-layout #plFloatingDock > .pl-transport-row{
    margin-left: 14px;
    margin-right: 14px;
  }
}


/* ===== v8 hotfix: visible floating players + collapsed settings defaults ===== */
/* Floating docks are absolutely positioned; panels must be positioning context. */
body.design-clean-layout .panel{
  position: relative;
}
/* Ensure panel pseudo-elements don't cover docks/controls. */
body.design-clean-layout #panelLibrary::after,
body.design-clean-layout #panelPlaylist::after,
body.design-clean-layout #panelSimilar::after{
  z-index: 1;
}
body.design-clean-layout .list{
  position: relative;
  z-index: 2;
}
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock,
body.design-clean-layout #plFloatingDock{
  z-index: 20 !important;
}
/* Slightly reduce negative offsets so docks stay visible in shorter viewports. */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock{ bottom: -6px !important; }
body.design-clean-layout #plFloatingDock{ bottom: -12px !important; }


/* ===== v8 player visibility hardening (current fix) =====
   Root cause addressed: docks were using negative offsets and could be clipped by parent overflow/viewport.
   Keep them visually "hovering" via transform, but anchor them INSIDE panel bounds. */
body.design-clean-layout .app-main,
body.design-clean-layout .grid{
  overflow: visible !important;
}

body.design-clean-layout #panelLibrary,
body.design-clean-layout #panelPlaylist,
body.design-clean-layout #panelSimilar{
  position: relative !important;
  overflow: visible !important;
}

/* Reserve clear space for the transformed hovering docks */
body.design-clean-layout #libraryList.list,
body.design-clean-layout #similarList.list{
  /* Keep the last ~3 list items above the floating player dock */
  padding-bottom: 288px !important;
}
body.design-clean-layout #playlistTracks.list{
  padding-bottom: 210px !important;
}

/* Anchor inside panel, visually hang over lower edge with transform */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock{
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  transform: translateY(18px);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 30 !important;
  pointer-events: none;
}
body.design-clean-layout #plFloatingDock{
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 12px !important;
  transform: translateY(20px);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 31 !important;
  pointer-events: none;
}
body.design-clean-layout #libPlayerDock > *,
body.design-clean-layout #simPlayerDock > *,
body.design-clean-layout #plFloatingDock > *{
  pointer-events: auto;
}

/* Guarantee a visible card even before any track is selected */
body.design-clean-layout .side-player-dock .floating-playerbox{
  min-height: 102px;
}
body.design-clean-layout .side-player-dock .player-title{
  min-height: 16px;
}
body.design-clean-layout #libPlayerDock audio#playerA,
body.design-clean-layout #simPlayerDock audio#playerB{
  display: block !important;
  width: 100% !important;
  min-height: 26px !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: rgba(12,14,18,.85);
}
body.design-clean-layout #libPlayerDock canvas#waveA,
body.design-clean-layout #simPlayerDock canvas#waveB{
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: rgba(6,8,11,.92);
}

/* Playlist floating dock stays visible; center card margins kept but not over-wide */
body.design-clean-layout #plFloatingDock > .playlist-dock-title,
body.design-clean-layout #plFloatingDock > #plPlayerWrap,
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  margin-left: 14px !important;
  margin-right: 14px !important;
}

/* Keep panel fade behind the docks */
body.design-clean-layout #panelLibrary::after,
body.design-clean-layout #panelPlaylist::after,
body.design-clean-layout #panelSimilar::after{
  z-index: 1 !important;
}
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #panelPlaylist .list,
body.design-clean-layout #panelSimilar .list{
  position: relative;
  z-index: 2;
}

@media (max-width: 1180px){
  body.design-clean-layout #libPlayerDock,
  body.design-clean-layout #simPlayerDock{ transform: translateY(12px); }
  body.design-clean-layout #plFloatingDock{ transform: translateY(14px); }
  body.design-clean-layout #libraryList.list,
  body.design-clean-layout #similarList.list{ padding-bottom: 138px !important; }
  body.design-clean-layout #playlistTracks.list{ padding-bottom: 188px !important; }
}

/* ===== v8c player jump stabilization + concept dock anchoring =====
   Fixes reported "players jumping down" by stabilizing dock/card heights and
   removing height jitter from dynamically inserted labels/native control sizing. */
body.design-clean-layout #panelLibrary,
body.design-clean-layout #panelPlaylist,
body.design-clean-layout #panelSimilar{
  min-height: 0 !important;
}
body.design-clean-layout #libraryList.list,
body.design-clean-layout #playlistTracks.list,
body.design-clean-layout #similarList.list{
  min-height: 0 !important;
}

/* Anchor docks consistently inside panel bounds (no negative-bottom dependence). */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock{
  bottom: 10px !important;
  transform: none !important;
}
body.design-clean-layout #plFloatingDock{
  bottom: 10px !important;
  transform: none !important;
}

/* Stable side dock card geometry to prevent browser-native audio height shifts. */
body.design-clean-layout .side-player-dock .floating-playerbox{
  display: grid !important;
  grid-template-rows: 14px 42px 34px;
  align-content: start;
  gap: 6px;
  min-height: 116px !important;
  height: 116px !important;
  overflow: hidden;
}
body.design-clean-layout .side-player-dock .player-title,
body.design-clean-layout .side-player-dock .player-label{
  display: block;
  min-height: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  margin: 0 !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Hide legacy extra inserted labels if they exist in older DOM states. */
body.design-clean-layout #playerALabel,
body.design-clean-layout #playerBLabel{
  display: none !important;
}
body.design-clean-layout .side-player-dock canvas{
  grid-row: 2;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
}
body.design-clean-layout .side-player-dock audio{
  grid-row: 3;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
}

/* Reserve exact room so docks don't appear to drift when content grows. */
body.design-clean-layout #libraryList.list,
body.design-clean-layout #similarList.list{
  padding-bottom: 138px !important;
}
body.design-clean-layout #playlistTracks.list{
  padding-bottom: 188px !important;
}

/* Keep floating docks above all panel overlays and lists. */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock,
body.design-clean-layout #plFloatingDock{
  z-index: 60 !important;
}
body.design-clean-layout #panelLibrary::after,
body.design-clean-layout #panelPlaylist::after,
body.design-clean-layout #panelSimilar::after{
  z-index: 1 !important;
  pointer-events: none;
}

@media (max-width: 1180px){
  body.design-clean-layout #libraryList.list,
  body.design-clean-layout #similarList.list{ padding-bottom: 132px !important; }
  body.design-clean-layout #playlistTracks.list{ padding-bottom: 178px !important; }
}

/* ===== True concept-match pass v9: proportions, docks, headers, wells =====
   Goal: match the provided concept geometry more closely while preserving stable rendering. */
body.design-clean-layout{
  --v9-sidebar-w: 50px;
  --v9-gap: 18px;
  --v9-panel-r: 14px;
  --v9-well-r: 12px;
  --v9-head-h: 78px;
  --v9-side-dock-h: 106px;
  --v9-center-dock-h: 128px;
}

/* Left rail closer to concept (slim icon strip) */
body.design-clean-layout .sidebar{
  width: var(--v9-sidebar-w) !important;
  min-width: var(--v9-sidebar-w) !important;
  padding: 8px 6px 10px !important;
  background: linear-gradient(180deg, rgba(9,11,15,.95), rgba(9,11,15,.82));
  border-right: 1px solid rgba(255,255,255,.045);
}
body.design-clean-layout .sidebar .icon,
body.design-clean-layout .sidebar button{
  width: 36px !important;
  min-width: 36px !important;
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  padding: 0 !important;
  font-size: 15px;
}
body.design-clean-layout .sidebar .side-slot,
body.design-clean-layout .sidebar .side-role,
body.design-clean-layout .sidebar .sidebar-progress-mount,
body.design-clean-layout .sidebar .sidebar-status-mount{
  width: 100%;
}
body.design-clean-layout .sidebar .side-role .badge{
  width: 36px;
  min-width: 36px;
  padding: 5px 2px;
  border-radius: 8px;
  font-size: 9px;
  line-height: 1.1;
}
body.design-clean-layout .sidebar .side-role #claimMainBtn{
  width: 36px;
  min-width: 36px;
  min-height: 34px;
  height: auto;
  padding: 6px 3px;
  font-size: 9px;
  line-height: 1.05;
  word-break: break-word;
}
body.design-clean-layout .sidebar-bottom{
  gap: 6px;
}
body.design-clean-layout .sidebar-progress-label{
  font-size: 10px;
  letter-spacing: .02em;
}
body.design-clean-layout .progress-wrap.vertical{
  width: 11px !important;
  height: 132px !important;
  border-radius: 999px !important;
}
body.design-clean-layout #sideStatusMount{
  max-width: 36px;
  font-size: 9px;
  line-height: 1.1;
  text-align: center;
  opacity: .78;
}

/* Main 3-column composition closer to concept proportions */
body.design-clean-layout .grid{
  grid-template-columns: minmax(300px, 1.03fr) minmax(410px, 1.18fr) minmax(300px, 1.03fr) !important;
  gap: var(--v9-gap) !important;
  padding: 10px 14px 86px 12px !important;
  align-items: stretch;
}

/* Darker, cleaner column shells */
body.design-clean-layout #panelLibrary,
body.design-clean-layout #panelPlaylist,
body.design-clean-layout #panelSimilar{
  border-radius: var(--v9-panel-r) !important;
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(255,255,255,.03), transparent 52%),
    linear-gradient(180deg, rgba(18,19,24,.97), rgba(12,13,17,.985)) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -1px 0 rgba(0,0,0,.2) !important;
}

/* Header rows compact and aligned like concept */
body.design-clean-layout #panelLibrary .panel-head,
body.design-clean-layout #panelSimilar .panel-head{
  min-height: var(--v9-head-h);
  padding: 10px 12px 8px !important;
  align-content: start;
}
body.design-clean-layout #panelPlaylist .panel-head{
  min-height: var(--v9-head-h);
  padding: 10px 12px 8px !important;
  row-gap: 6px !important;
}
body.design-clean-layout .panel-head .title{
  font-size: 14px !important;
  font-weight: 700;
  color: #e6cf97;
}
body.design-clean-layout #panelPlaylist .playlist-title .playlist-title-label,
body.design-clean-layout #panelLibrary .panel-head .title,
body.design-clean-layout #panelSimilar .panel-head .title{
  color: #e1be79 !important;
}
body.design-clean-layout #panelSimilar .panel-head .title::after{
  content: '';
}
body.design-clean-layout #panelLibrary .panel-head .row,
body.design-clean-layout #panelSimilar .panel-head .row{
  gap: 6px !important;
}
body.design-clean-layout #panelPlaylist .row.pl-controls{
  gap: 6px !important;
}
body.design-clean-layout #panelLibrary .panel-head .row > input,
body.design-clean-layout #panelLibrary .panel-head .row > select,
body.design-clean-layout #panelSimilar .panel-head .row > input,
body.design-clean-layout #panelSimilar .panel-head .row > select,
body.design-clean-layout #panelPlaylist .playlist-title #playlistSel,
body.design-clean-layout #panelPlaylist .row.pl-controls > button{
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}
body.design-clean-layout #panelLibrary .panel-head #searchBox{ min-width: 170px !important; }
body.design-clean-layout #panelLibrary .panel-head #sortSel{ flex-basis: 104px !important; }
body.design-clean-layout #panelLibrary .panel-head #lyricsFilter{ flex-basis: 84px !important; }
body.design-clean-layout #panelSimilar .panel-head #modeSel{ flex-basis: 84px !important; }
body.design-clean-layout #panelSimilar .panel-head #energySel{ flex-basis: 118px !important; }
body.design-clean-layout #panelSimilar .panel-head #similarLyricsFilter{ flex-basis: 84px !important; }
body.design-clean-layout #panelPlaylist .panel-head .title.playlist-title{
  grid-template-columns: auto minmax(160px, 220px) auto 1fr !important;
  column-gap: 8px !important;
  align-items: center;
}
body.design-clean-layout #panelPlaylist .playlist-title #playlistSel{
  justify-self: start;
  max-width: 230px !important;
  min-width: 160px !important;
}
body.design-clean-layout #panelPlaylist .playlist-title #playlistTotalDur{
  font-size: 12px;
  color: rgba(220,225,236,.82) !important;
}

/* Panel list "wells" like concept */
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #panelPlaylist .list,
body.design-clean-layout #panelSimilar .list{
  margin: 0 12px;
  border-radius: var(--v9-well-r);
  border: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(150% 130% at 50% 8%, rgba(255,255,255,.025), transparent 55%),
    linear-gradient(180deg, rgba(74,77,86,.58), rgba(59,62,70,.52) 35%, rgba(52,55,63,.50));
  box-shadow:
    inset 0 10px 20px rgba(255,255,255,.03),
    inset 0 -16px 28px rgba(0,0,0,.22),
    0 4px 12px rgba(0,0,0,.16);
}
body.design-clean-layout #panelLibrary .list::before,
body.design-clean-layout #panelPlaylist .list::before,
body.design-clean-layout #panelSimilar .list::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.12), transparent 10%, transparent 90%, rgba(0,0,0,.12));
  z-index: 0;
}
body.design-clean-layout #panelLibrary .list > *,
body.design-clean-layout #panelPlaylist .list > *,
body.design-clean-layout #panelSimilar .list > *{
  position: relative;
  z-index: 1;
}

/* Reserve exact floating dock clearance for concept geometry */
body.design-clean-layout #libraryList.list,
body.design-clean-layout #similarList.list{
  padding: 10px 10px calc(var(--v9-side-dock-h) + 34px) !important;
}
body.design-clean-layout #playlistTracks.list{
  padding: 10px 10px calc(var(--v9-center-dock-h) + 42px) !important;
}

/* Floating side player docks: low, hovering over column bottom */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock{
  left: 16px !important;
  right: 16px !important;
  bottom: -12px !important;
  transform: none !important;
  z-index: 80 !important;
}
body.design-clean-layout .side-player-dock .floating-playerbox{
  height: var(--v9-side-dock-h) !important;
  min-height: var(--v9-side-dock-h) !important;
  grid-template-rows: 16px 38px 28px !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(27,28,31,.96), rgba(16,17,20,.985)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 18px 28px rgba(0,0,0,.42),
    0 8px 14px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}
body.design-clean-layout .side-player-dock .player-title{
  height: 16px !important;
  min-height: 16px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.55) !important;
}
body.design-clean-layout .side-player-dock canvas{
  grid-row: 2 !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(0,0,0,.35) !important;
  background: rgba(4,6,10,.92) !important;
}
body.design-clean-layout .side-player-dock audio{
  grid-row: 3 !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  filter: saturate(.85) brightness(.92);
  border-radius: 4px !important;
}

/* Playlist center dock: wider, overhanging column like concept */
body.design-clean-layout #plFloatingDock{
  left: -16px !important;
  right: -16px !important;
  bottom: -18px !important;
  transform: none !important;
  min-height: var(--v9-center-dock-h);
  border-radius: 12px !important;
  padding: 10px 12px 12px !important;
  background:
    linear-gradient(180deg, rgba(36,37,40,.965), rgba(22,23,26,.985)) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  box-shadow:
    0 22px 34px rgba(0,0,0,.48),
    0 8px 18px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.018) !important;
  z-index: 90 !important;
}
body.design-clean-layout #plFloatingDock > .playlist-dock-title,
body.design-clean-layout #plFloatingDock > #plPlayerWrap,
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  margin-left: 18px !important;
  margin-right: 18px !important;
}
body.design-clean-layout #plFloatingDock > .playlist-dock-title{
  margin-bottom: 10px !important;
  min-height: 18px !important;
  height: 18px;
  font-size: 12px !important;
  color: rgba(255,255,255,.45) !important;
}
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  grid-template-columns: 34px 34px 34px 1fr auto 18px !important;
  gap: 10px !important;
  align-items: center !important;
}
/* create right-side volume icon visual spacer to mimic concept even if no volume control is present */
body.design-clean-layout #plFloatingDock > .pl-transport-row::after{
  content: "🔊";
  display: block;
  width: 18px;
  text-align: center;
  opacity: .55;
  font-size: 13px;
  line-height: 1;
}
body.design-clean-layout #plFloatingDock #plPrevBtn,
body.design-clean-layout #plFloatingDock #plToggleBtn,
body.design-clean-layout #plFloatingDock #plNextBtn{
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.72);
}
body.design-clean-layout #plFloatingDock #plToggleBtn{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.28) !important;
}
body.design-clean-layout #plFloatingDock #plSeek{
  height: 4px;
  accent-color: #7f8ea7;
}
body.design-clean-layout #plFloatingDock #plTime{
  min-width: 92px !important;
  font-size: 10px !important;
  color: rgba(255,255,255,.28) !important;
}

/* Side docks should visually sit over the list well edge */
body.design-clean-layout #panelLibrary::after,
body.design-clean-layout #panelSimilar::after{
  bottom: 92px !important;
  left: 14px !important;
  right: 14px !important;
  height: 30px !important;
  background: linear-gradient(180deg, rgba(16,18,24,0), rgba(14,16,22,.62)) !important;
}
body.design-clean-layout #panelPlaylist::after{
  bottom: 128px !important;
  left: 14px !important;
  right: 14px !important;
  height: 34px !important;
  background: linear-gradient(180deg, rgba(16,18,24,0), rgba(14,16,22,.68)) !important;
}

/* Dropdown text clipping + native select vertical metrics (Firefox/Windows) */
body.design-clean-layout select{
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-inline: 9px 28px !important;
  text-overflow: ellipsis;
}
body.design-clean-layout select option,
body.design-clean-layout select optgroup{
  line-height: 1.5 !important;
  font-size: 12px !important;
}

/* Settings modal fold state visual polish (header open, others folded already in HTML). */
body.design-clean-layout .settings-section > summary{
  min-height: 34px;
  border-radius: 8px;
}
body.design-clean-layout .settings-section[open] > summary{
  background: rgba(255,255,255,.03);
}

/* Responsive concept fallback: keep docks visible and centered */
@media (max-width: 1300px){
  body.design-clean-layout .grid{
    grid-template-columns: minmax(270px, 1fr) minmax(360px, 1.14fr) minmax(270px, 1fr) !important;
    gap: 14px !important;
  }
  body.design-clean-layout #plFloatingDock{
    left: -8px !important;
    right: -8px !important;
    bottom: -12px !important;
  }
  body.design-clean-layout #libPlayerDock,
  body.design-clean-layout #simPlayerDock{
    left: 12px !important;
    right: 12px !important;
    bottom: -8px !important;
  }
}
@media (max-width: 1180px){
  body.design-clean-layout .sidebar{ width: 46px !important; min-width: 46px !important; }
  body.design-clean-layout .sidebar .icon,
  body.design-clean-layout .sidebar button{ width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; }
  body.design-clean-layout .grid{ gap: 10px !important; padding-right: 10px !important; }
  body.design-clean-layout #plFloatingDock{
    left: 0 !important;
    right: 0 !important;
    bottom: -6px !important;
  }
  body.design-clean-layout #plFloatingDock > .playlist-dock-title,
  body.design-clean-layout #plFloatingDock > #plPlayerWrap,
  body.design-clean-layout #plFloatingDock > .pl-transport-row{
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  body.design-clean-layout #plFloatingDock > .pl-transport-row{
    grid-template-columns: 32px 32px 32px 1fr auto 16px !important;
    gap: 8px !important;
  }
}


/* ===== Concept-match pass v10 ultra-match: dock/title fixes, header control sizing ===== */
/* 1) Keep floating docks visible and stable while matching the concept proportions tighter */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock{
  bottom: 10px !important;
  transform: translateY(14px) !important;
}
body.design-clean-layout #plFloatingDock{
  bottom: 12px !important;
  transform: translateY(18px) !important;
  min-height: 136px !important;
}
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #panelSimilar .list{
  padding-bottom: 146px !important;
}
body.design-clean-layout #playlistTracks.list{
  padding-bottom: 198px !important;
}

/* 2) Playlist dock title stays above player/remote banner and never hides behind it */
body.design-clean-layout #plFloatingDock{
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}
body.design-clean-layout #plFloatingDock > .playlist-dock-title{
  order: 1 !important;
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 20px !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding-top: 9px !important;
  padding-bottom: 7px !important;
}
body.design-clean-layout #plFloatingDock > #plPlayerWrap{
  order: 2 !important;
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}
body.design-clean-layout #plFloatingDock > #plPlayerWrap.show-remote{
  margin-bottom: 4px !important;
}
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  order: 3 !important;
  position: relative !important;
  z-index: 2 !important;
}
body.design-clean-layout #playlistNowText{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.design-clean-layout #playlistNowMode{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(222,231,246,.86);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
}
body.design-clean-layout #playlistNowMode.hidden{ display: none !important; }
body.design-clean-layout #plFloatingDock #plPlayerRemote{
  position: relative !important;
  z-index: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3) Header dropdown controls: larger widths/heights so text fits (Firefox/Windows) */
body.design-clean-layout #panelLibrary .panel-head .row,
body.design-clean-layout #panelSimilar .panel-head .row{
  gap: 8px !important;
}
body.design-clean-layout #panelLibrary .panel-head .row > select,
body.design-clean-layout #panelSimilar .panel-head .row > select,
body.design-clean-layout #panelPlaylist .playlist-title > select{
  height: 34px !important;
  min-height: 34px !important;
  font-size: 12px !important;
  line-height: 32px !important;
  padding-inline: 10px 30px !important;
}
body.design-clean-layout #lyricsFilter,
body.design-clean-layout #similarLyricsFilter{
  min-width: 112px !important;
}
body.design-clean-layout #sortSel{
  min-width: 118px !important;
}
body.design-clean-layout #modeSel{
  min-width: 108px !important;
}
body.design-clean-layout #energySel{
  min-width: 142px !important;
}
body.design-clean-layout #playlistSel{
  min-width: 180px !important;
  max-width: 320px !important;
}
body.design-clean-layout #panelLibrary .panel-head .row > input#searchBox{
  min-width: 170px !important;
  height: 34px !important;
}

/* 4) Playlist title row spacing closer to concept and protects duration visibility */
body.design-clean-layout #panelPlaylist .playlist-title{
  display: grid !important;
  grid-template-columns: auto minmax(180px, 260px) auto !important;
  align-items: center !important;
  gap: 8px !important;
}
body.design-clean-layout #panelPlaylist .playlist-title #playlistTotalDur{
  justify-self: start !important;
  white-space: nowrap;
}

/* 5) Responsive fallback keeps text fitting instead of clipping */
@media (max-width: 1380px){
  body.design-clean-layout #playlistSel{ min-width: 150px !important; max-width: 220px !important; }
  body.design-clean-layout #energySel{ min-width: 126px !important; }
  body.design-clean-layout #panelLibrary .panel-head .row > input#searchBox{ min-width: 130px !important; }
}
@media (max-width: 1220px){
  body.design-clean-layout #panelLibrary .panel-head .row,
  body.design-clean-layout #panelSimilar .panel-head .row{
    gap: 6px !important;
  }
  body.design-clean-layout #lyricsFilter,
  body.design-clean-layout #similarLyricsFilter{ min-width: 96px !important; }
  body.design-clean-layout #sortSel{ min-width: 96px !important; }
  body.design-clean-layout #modeSel{ min-width: 92px !important; }
  body.design-clean-layout #energySel{ min-width: 112px !important; }
}


/* ===== Concept-match pass v10b: tighter controls, endless lists behind docks, playlist volume, exact arrangement ===== */
/* Header dropdowns: compact to content, still readable in Firefox */
body.design-clean-layout #panelLibrary .panel-head .row > select,
body.design-clean-layout #panelSimilar .panel-head .row > select,
body.design-clean-layout #panelPlaylist .playlist-title > select{
  flex: 0 0 auto !important;
  width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  line-height: 28px !important;
  padding: 0 26px 0 8px !important;
  font-size: 12px !important;
}
body.design-clean-layout #lyricsFilter,
body.design-clean-layout #similarLyricsFilter{ min-width: 88px !important; }
body.design-clean-layout #sortSel{ min-width: 78px !important; }
body.design-clean-layout #modeSel{ min-width: 76px !important; }
body.design-clean-layout #energySel{ min-width: 112px !important; }
body.design-clean-layout #playlistSel{ min-width: 148px !important; max-width: 240px !important; }
body.design-clean-layout #panelLibrary .panel-head .row > input#searchBox{
  min-width: 138px !important;
  height: 30px !important;
}
body.design-clean-layout select option,
body.design-clean-layout select optgroup{
  line-height: 1.35 !important;
  font-size: 12px !important;
}

/* Sidebar: add scan button visual consistency */
body.design-clean-layout #scanStartBtnSide{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Endless lists: content scrolls behind fixed docks (no reserved empty bottom gap) */
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #panelSimilar .list,
body.design-clean-layout #playlistTracks.list{
  padding-bottom: 12px !important;
}
body.design-clean-layout #panelLibrary .list::after,
body.design-clean-layout #panelSimilar .list::after,
body.design-clean-layout #playlistTracks.list::after{
  content: "";
  position: sticky;
  left: 0; right: 0; bottom: 0;
  display: block;
  height: 72px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(12,14,20,.92), rgba(12,14,20,.62) 35%, rgba(12,14,20,0));
}

/* Column wells/shadows closer to concept */
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #playlistTracks,
body.design-clean-layout #similarList{
  background: radial-gradient(140% 120% at 50% 8%, rgba(255,255,255,.035), rgba(255,255,255,0) 52%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 18%),
              rgba(8,10,14,.72) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 18px 32px rgba(255,255,255,.015), inset 0 -20px 34px rgba(0,0,0,.22) !important;
}

/* Side player waveform/control proportions tighter to concept */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock{
  bottom: 12px !important;
  transform: none !important;
}
body.design-clean-layout #libPlayerDock .floating-playerbox,
body.design-clean-layout #simPlayerDock .floating-playerbox{
  min-height: 106px !important;
  max-height: 106px !important;
  padding: 10px 12px 10px !important;
  grid-template-rows: 16px 34px 34px !important;
  row-gap: 6px !important;
}
body.design-clean-layout #libPlayerDock .player-title,
body.design-clean-layout #simPlayerDock .player-title{
  font-size: 12px !important;
  color: rgba(235,240,250,.65) !important;
}
body.design-clean-layout #libPlayerDock audio#playerA,
body.design-clean-layout #simPlayerDock audio#playerB{
  height: 32px !important;
  min-height: 32px !important;
}
body.design-clean-layout #libPlayerDock canvas#waveA,
body.design-clean-layout #simPlayerDock canvas#waveB{
  height: 30px !important;
}

/* Playlist title row spacing + duration prefix readability */
body.design-clean-layout #panelPlaylist .playlist-title{
  grid-template-columns: auto minmax(148px, 230px) auto auto auto !important;
  gap: 8px !important;
}
body.design-clean-layout #panelPlaylist .playlist-title #playlistTotalDur{
  min-width: max-content !important;
  opacity: .88;
}

/* Playlist floating dock geometry and control arrangement like concept */
body.design-clean-layout #plFloatingDock{
  bottom: 12px !important;
  transform: none !important;
  min-height: 126px !important;
  padding: 10px 14px 12px !important;
}
body.design-clean-layout #plFloatingDock > .playlist-dock-title{
  padding: 0 2px 6px !important;
  min-height: 18px !important;
  position: relative !important;
  z-index: 4 !important;
}
body.design-clean-layout #plFloatingDock > #plPlayerWrap{
  margin: 0 0 6px !important;
  min-height: 16px !important;
  z-index: 3 !important;
}
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  display: grid !important;
  grid-template-columns: 1fr 32px 32px 32px 1fr 28px 72px !important;
  grid-template-rows: 32px 16px 10px !important;
  grid-template-areas:
    ". prev play next . volbtn vol"
    "seek seek seek seek seek seek seek"
    ". . time time time . ." !important;
  align-items: center !important;
  gap: 6px 8px !important;
  margin-top: 0 !important;
}
body.design-clean-layout #plPrevBtn{ grid-area: prev !important; }
body.design-clean-layout #plToggleBtn{ grid-area: play !important; }
body.design-clean-layout #plNextBtn{ grid-area: next !important; }
body.design-clean-layout #plMuteBtn{
  grid-area: volbtn !important;
  width: 28px !important; height: 28px !important; min-width: 28px !important;
  padding: 0 !important;
  font-size: 13px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
body.design-clean-layout #plVol{
  grid-area: vol !important;
  width: 72px !important;
  margin: 0 !important;
  accent-color: rgba(123, 211, 180, .9);
}
body.design-clean-layout #plSeek{
  grid-area: seek !important;
  width: 100% !important;
  margin: 0 !important;
}
body.design-clean-layout #plTime{
  grid-area: time !important;
  justify-self: center !important;
  text-align: center !important;
  font-size: 10px !important;
  line-height: 1 !important;
  margin-top: -1px !important;
}
body.design-clean-layout #plFloatingDock #plToggleBtn,
body.design-clean-layout #plFloatingDock #plPrevBtn,
body.design-clean-layout #plFloatingDock #plNextBtn{
  width: 32px !important; height: 32px !important; min-width: 32px !important;
}
body.design-clean-layout #plFloatingDock #plToggleBtn{
  box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

@media (max-width: 1320px){
  body.design-clean-layout #playlistSel{ min-width: 136px !important; max-width: 210px !important; }
  body.design-clean-layout #energySel{ min-width: 104px !important; }
  body.design-clean-layout #plFloatingDock > .pl-transport-row{
    grid-template-columns: 1fr 30px 30px 30px 1fr 26px 60px !important;
  }
  body.design-clean-layout #plVol{ width: 60px !important; }
}


/* ===== Concept-match pass v10c: dropdown intrinsic sizing, endless wells, centered playlist controls, updated docks ===== */
/* 1) Header dropdowns should size to content (not fixed-wide). Clear older flex-basis/min-width overrides. */
body.design-clean-layout #panelLibrary .panel-head .row > select,
body.design-clean-layout #panelSimilar .panel-head .row > select,
body.design-clean-layout #panelPlaylist .playlist-title > select{
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 30px !important;
  min-height: 30px !important;
  line-height: 28px !important;
  padding: 0 22px 0 8px !important;
}
body.design-clean-layout #lyricsFilter,
body.design-clean-layout #similarLyricsFilter{ width: auto !important; min-width: 74px !important; }
body.design-clean-layout #sortSel{ width: auto !important; min-width: 66px !important; }
body.design-clean-layout #modeSel{ width: auto !important; min-width: 64px !important; }
body.design-clean-layout #energySel{ width: auto !important; min-width: 98px !important; }
body.design-clean-layout #playlistSel{ width: auto !important; min-width: 120px !important; max-width: 240px !important; }
body.design-clean-layout #panelLibrary .panel-head .row > input#searchBox{ min-width: 132px !important; }

/* 2) Make columns/lists visually continue lower ("endless" behind docks) while keeping docks fixed. */
body.design-clean-layout .grid{
  padding-bottom: 8px !important; /* was leaving a large dead strip at bottom */
  align-items: stretch !important;
}
body.design-clean-layout #panelLibrary,
body.design-clean-layout #panelPlaylist,
body.design-clean-layout #panelSimilar{
  overflow: visible !important;
}
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #playlistTracks.list,
body.design-clean-layout #similarList.list{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.design-clean-layout #panelLibrary .list::after,
body.design-clean-layout #playlistTracks.list::after,
body.design-clean-layout #similarList.list::after{
  height: 54px !important;
  background: linear-gradient(to top, rgba(10,12,17,.96), rgba(10,12,17,.64) 42%, rgba(10,12,17,0)) !important;
}

/* 3) Side player docks: tighter v10c look (wave/control proportions + softer shadow). */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock{
  left: 14px !important;
  right: 14px !important;
  bottom: 8px !important;
  transform: none !important;
  z-index: 90 !important;
}
body.design-clean-layout #libPlayerDock .floating-playerbox,
body.design-clean-layout #simPlayerDock .floating-playerbox{
  min-height: 98px !important;
  max-height: 98px !important;
  height: 98px !important;
  display: grid !important;
  grid-template-rows: 14px 30px 32px !important;
  row-gap: 6px !important;
  padding: 8px 10px 10px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(25,28,34,.96), rgba(15,17,22,.97)) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: 0 14px 22px rgba(0,0,0,.24), 0 4px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
body.design-clean-layout #libPlayerDock .player-title,
body.design-clean-layout #simPlayerDock .player-title{
  grid-row: 1 !important;
  min-height: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  font-size: 10px !important;
  letter-spacing: .02em !important;
  color: rgba(220,228,240,.62) !important;
}
body.design-clean-layout #libPlayerDock canvas#waveA,
body.design-clean-layout #simPlayerDock canvas#waveB{
  grid-row: 2 !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  background: rgba(6,8,12,.55) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}
body.design-clean-layout #libPlayerDock audio#playerA,
body.design-clean-layout #simPlayerDock audio#playerB{
  grid-row: 3 !important;
  width: 100% !important;
  min-height: 30px !important;
  height: 30px !important;
  max-height: 30px !important;
  opacity: .95 !important;
}

/* 4) Playlist dock proportions + softer shadow to match concept more closely. */
body.design-clean-layout #plFloatingDock{
  left: 12px !important;
  right: 12px !important;
  bottom: 8px !important;
  min-height: 122px !important;
  padding: 10px 12px 12px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(23,25,30,.97), rgba(14,16,21,.98)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 18px 28px rgba(0,0,0,.23), 0 5px 12px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
body.design-clean-layout #plFloatingDock > .playlist-dock-title{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 20px !important;
  margin: 0 0 4px !important;
  padding: 0 2px !important;
  z-index: 5 !important;
}
body.design-clean-layout #playlistNowText{
  flex: 1 1 auto;
  min-width: 0;
}
body.design-clean-layout #plFloatingDock > #plPlayerWrap{
  margin: 0 !important;
  min-height: 0 !important;
}
body.design-clean-layout #plFloatingDock #playerPL{ display: none !important; }

/* 5) Playlist controls exactly centered; time centered under seek. */
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 34px 14px 11px !important;
  grid-template-areas: "top" "seek" "time" !important;
  gap: 7px !important;
  align-items: center !important;
  margin-top: 4px !important;
}
body.design-clean-layout #plFloatingDock .pl-center-controls{
  grid-area: top !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  justify-self: center !important;
  z-index: 2 !important;
}
body.design-clean-layout #plFloatingDock .pl-right-controls{
  grid-area: top !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 2 !important;
}
body.design-clean-layout #plFloatingDock #plPrevBtn,
body.design-clean-layout #plFloatingDock #plToggleBtn,
body.design-clean-layout #plFloatingDock #plNextBtn{
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.design-clean-layout #plFloatingDock #plToggleBtn{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
}
body.design-clean-layout #plFloatingDock #plMuteBtn{
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
}
body.design-clean-layout #plFloatingDock #plVol{
  width: 62px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
body.design-clean-layout #plFloatingDock #plSeek{
  grid-area: seek !important;
  width: min(92%, 460px) !important;
  justify-self: center !important;
  margin: 0 !important;
}
body.design-clean-layout #plFloatingDock #plTime{
  grid-area: time !important;
  justify-self: center !important;
  text-align: center !important;
  width: auto !important;
  min-width: 120px !important;
  font-variant-numeric: tabular-nums;
  line-height: 1 !important;
  margin: 0 !important;
}

@media (max-width: 1400px){
  body.design-clean-layout #energySel{ min-width: 90px !important; }
  body.design-clean-layout #playlistSel{ min-width: 108px !important; max-width: 190px !important; }
  body.design-clean-layout #plFloatingDock #plSeek{ width: min(90%, 390px) !important; }
}

/* ===== v10d polish: player A/B invert, sidebar language switch, tighter selects, endless wells, dock tuning ===== */
body.design-clean-layout .side-lang-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:8px;
  width:100%;
}
body.design-clean-layout .side-lang-label{
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(224,231,242,.72);
  padding-left:2px;
}
body.design-clean-layout .side-lang-select{
  width:100%;
  height:30px;
  min-height:30px;
  padding:0 24px 0 8px;
  border-radius:9px;
  background:linear-gradient(180deg, rgba(28,31,38,.96), rgba(18,20,26,.98));
  border:1px solid rgba(255,255,255,.09);
  color:#eef2fb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Header selects: intrinsic width, compact but readable */
body.design-clean-layout #panelLibrary .panel-head .row > select,
body.design-clean-layout #panelSimilar .panel-head .row > select,
body.design-clean-layout #panelPlaylist .playlist-title > select{
  padding: 0 20px 0 8px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 230px !important;
}
body.design-clean-layout #lyricsFilter,
body.design-clean-layout #similarLyricsFilter{ min-width: 64px !important; }
body.design-clean-layout #sortSel{ min-width: 58px !important; }
body.design-clean-layout #modeSel{ min-width: 58px !important; }
body.design-clean-layout #energySel{ min-width: 76px !important; }
body.design-clean-layout #playlistSel{ min-width: 86px !important; max-width: 220px !important; }

/* Make column wells visually continue past viewport bottom while docks stay fixed */
body.design-clean-layout #panelLibrary,
body.design-clean-layout #panelPlaylist,
body.design-clean-layout #panelSimilar{
  position: relative !important;
  overflow: visible !important;
}
body.design-clean-layout #panelLibrary::after,
body.design-clean-layout #panelPlaylist::after,
body.design-clean-layout #panelSimilar::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-180px;
  height:240px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, rgba(62,66,74,.08), rgba(30,33,39,.22) 32%, rgba(18,20,25,.9));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 22px 40px rgba(255,255,255,.02);
  pointer-events:none;
  z-index:0;
}
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #playlistTracks,
body.design-clean-layout #similarList{
  position:relative;
  z-index:1;
  padding-bottom: 168px !important; /* scroll under hovering docks */
  margin-bottom: 0 !important;
}

/* Player A/B invert: dark deck + bright native controls */
body.design-clean-layout #libPlayerDock .floating-playerbox,
body.design-clean-layout #simPlayerDock .floating-playerbox{
  background: linear-gradient(180deg, rgba(17,18,23,.985), rgba(10,11,15,.99)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 28px rgba(0,0,0,.26), 0 6px 14px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.design-clean-layout #libPlayerDock .player-title,
body.design-clean-layout #simPlayerDock .player-title{
  color: rgba(236,242,252,.78) !important;
}
body.design-clean-layout #libPlayerDock canvas#waveA,
body.design-clean-layout #simPlayerDock canvas#waveB{
  background: linear-gradient(180deg, rgba(4,6,9,.92), rgba(8,10,14,.88)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
body.design-clean-layout #libPlayerDock audio#playerA,
body.design-clean-layout #simPlayerDock audio#playerB{
  filter: invert(1) hue-rotate(180deg) brightness(1.18) contrast(1.03);
  opacity: 1 !important;
  background: transparent !important;
  border-radius: 8px;
}

/* Playlist dock: softer shadow + clean controls + no stray icon */
body.design-clean-layout #plFloatingDock{
  min-height: 128px !important;
  padding: 10px 12px 11px !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 24px rgba(0,0,0,.20), 0 4px 10px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body.design-clean-layout #plFloatingDock .pl-transport-row::after,
body.design-clean-layout #plFloatingDock::after{
  content: none !important;
  display: none !important;
}
body.design-clean-layout #plFloatingDock > .pl-transport-row{
  grid-template-rows: 34px 14px 12px !important;
  gap: 6px !important;
}
body.design-clean-layout #plFloatingDock .pl-center-controls{
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.design-clean-layout #plFloatingDock .pl-right-controls{
  min-width: 92px;
  justify-content: flex-end;
  align-self: center;
}
body.design-clean-layout #plFloatingDock #plTime{
  text-align:center !important;
  justify-self:center !important;
  width: 100% !important;
  max-width: 180px !important;
  padding: 0 !important;
}
body.design-clean-layout #plFloatingDock #plSeek{
  justify-self: center !important;
  margin-inline: auto !important;
}
/* Slightly cleaner buttons for playlist dock */
body.design-clean-layout #plFloatingDock #plPrevBtn,
body.design-clean-layout #plFloatingDock #plNextBtn,
body.design-clean-layout #plFloatingDock #plToggleBtn,
body.design-clean-layout #plFloatingDock #plMuteBtn{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #f1f5ff !important;
}
body.design-clean-layout #plFloatingDock #plToggleBtn{
  background: rgba(255,255,255,.06) !important;
}

/* Ensure floating docks stay above list wells and remain anchored */
body.design-clean-layout #libPlayerDock,
body.design-clean-layout #simPlayerDock,
body.design-clean-layout #plFloatingDock{
  z-index: 95 !important;
  transform: none !important;
}

/* Dropdown menus not cut off (Firefox) */
body.design-clean-layout select,
body.design-clean-layout option{
  font-size: 12px;
}



/* === v10e: Custom track tooltip + AI-DJ room preview stage (playlist panel) === */
.track-tooltip-card {
  position: fixed;
  z-index: 2000;
  min-width: 280px;
  max-width: min(440px, calc(100vw - 24px));
  pointer-events: none;
  border-radius: 14px;
  border: 1px solid rgba(140, 168, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 23, 38, 0.96), rgba(10, 14, 24, 0.98));
  box-shadow:
    0 20px 50px rgba(0,0,0,0.48),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  backdrop-filter: blur(10px);
  color: #eef2ff;
}
.track-tooltip-card.hidden { display: none !important; }
.track-tooltip-card .tt-shell { padding: 12px 13px 12px; }
.track-tooltip-card .tt-head {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: #f8fafc;
  margin-bottom: 4px;
}
.track-tooltip-card .tt-sub {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(196, 203, 219, 0.88);
  margin-bottom: 8px;
  white-space: normal;
}
.track-tooltip-card .tt-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
}
.track-tooltip-card .tt-k {
  font-size: 10px;
  line-height: 1.2;
  color: rgba(156, 163, 175, 0.92);
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.track-tooltip-card .tt-v {
  font-size: 11px;
  line-height: 1.25;
  color: rgba(241, 245, 249, 0.95);
  word-break: break-word;
}

#panelPlaylist.room-stage-active #playlistTracks {
  padding-bottom: 318px !important; /* dock + room stage clearance */
}

#playlistRoomStage.playlist-room-stage {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 152px; /* sits above floating playlist dock */
  z-index: 11;
  pointer-events: auto;
}
#playlistRoomStage.hidden { display: none !important; }

.playlist-room-stage-card {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(21, 25, 36, 0.92);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.02);
  padding: 10px 11px 10px;
  backdrop-filter: blur(8px);
}
.playlist-room-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

/* AI-DJ Chat (shown when AI-DJ is running) */
.ai-dj-chat {
  margin-top: 10px;
  padding: 10px 10px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(15, 17, 21, 0.55);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.02);
  color: rgba(232, 236, 246, 0.86);
}
.ai-dj-chat.hidden { display: none !important; }
.ai-dj-chat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.ai-dj-chat-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(232, 236, 246, 0.92);
}
.ai-dj-chat-hint {
  font-size: 12px;
  opacity: 0.85;
  color: rgba(139, 147, 167, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}
.ai-dj-chat-msgs {
  max-height: 140px;
  overflow: auto;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
}
.ai-dj-chat-msg {
  padding: 6px 8px;
  margin: 6px 0;
  border-radius: 10px;
  font-size: 13px;
  color: rgba(232, 236, 246, 0.88);
  line-height: 1.25;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-dj-chat-msg.user {
  background: rgba(110, 231, 183, 0.10);
  border: 1px solid rgba(110, 231, 183, 0.12);
}
.ai-dj-chat-msg.assistant {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
}
.ai-dj-chat-inputrow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ai-dj-chat-inputrow input {
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: rgba(232, 236, 246, 0.92);
}
.ai-dj-chat-inputrow input::placeholder { color: rgba(139, 147, 167, 0.9); }
.ai-dj-chat-foot {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}
.playlist-room-stage-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(242, 246, 255, 0.96);
}
.playlist-room-stage-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.room-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(9, 14, 25, 0.52);
  color: rgba(225, 232, 246, 0.9);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.room-pill.hidden { display: none !important; }

.playlist-room-stage-media {
  position: relative;
  height: 132px;
  border-radius: 12px;
  border: 1px solid rgba(144, 168, 255, 0.11);
  background:
    radial-gradient(100% 140% at 10% 10%, rgba(24, 39, 74, 0.25), rgba(8, 12, 20, 0.82)),
    linear-gradient(180deg, rgba(7, 10, 17, 0.85), rgba(6, 8, 14, 0.95));
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), inset 0 -10px 20px rgba(0,0,0,0.22);
}
.playlist-room-stage-media.cam-active img {
  position: absolute;
  inset: 0 0 24px 0;
}
.playlist-room-stage-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.03) contrast(1.02) brightness(0.95);
  opacity: 0.98;
}
.playlist-room-stage-media img.hidden { display: none !important; }
.playlist-room-stage-media.hidden { display: none !important; }

.playlist-room-stage-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px 14px;
  color: rgba(207, 215, 230, 0.86);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.playlist-room-stage-empty.hidden { display: none !important; }

#playlistRoomStageMicCanvas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 24px;
  display: block;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(180deg, rgba(7, 10, 17, 0.2), rgba(7, 10, 17, 0.42));
}
#playlistRoomStageMicCanvas.hidden { display: none !important; }

.playlist-room-stage-media.mic-only {
  height: 100px;
}
.playlist-room-stage-media.mic-only img { display: none !important; }
.playlist-room-stage-media.mic-only #playlistRoomStageMicCanvas {
  top: 0;
  bottom: 0;
  height: 100%;
  border-top: 0;
}
.playlist-room-stage-media.mic-only .playlist-room-stage-empty {
  align-items: start;
  padding-top: 10px;
}

.playlist-room-stage-stats {
  margin-top: 8px;
  color: rgba(190, 198, 214, 0.82);
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1200px) {
  #panelPlaylist.room-stage-active #playlistTracks { padding-bottom: 300px !important; }
  #playlistRoomStage.playlist-room-stage { bottom: 148px; left: 10px; right: 10px; }
  .playlist-room-stage-media { height: 118px; }
}


/* ===== v10d pre-pack hotfix: playlist list clearance + badge tooltips support ===== */
/* Playlist list should stop above the floating dock (and above room stage when active). */
body.design-clean-layout #playlistTracks.list{
  padding-bottom: 150px !important;
}
body.design-clean-layout #panelPlaylist.room-stage-active #playlistTracks{
  padding-bottom: 326px !important;
}
@media (max-width: 1200px){
  body.design-clean-layout #playlistTracks.list{ padding-bottom: 144px !important; }
  body.design-clean-layout #panelPlaylist.room-stage-active #playlistTracks{ padding-bottom: 308px !important; }
}

/* Keep endless-scroll feel only for library/similar; playlist intentionally clears dock. */
body.design-clean-layout #panelLibrary .list,
body.design-clean-layout #similarList.list{
  padding-bottom: 0 !important;
}

/* Tooltip affordance for playlist title + mode badge */
#playlistNowText,
#playlistNowMode{
  cursor: default;
}
#playlistNowMode{
  pointer-events: auto;
}

/* ===== v10e repair 2: custom tooltip active, room stage frame parsing, search clear, playlist clearance ===== */
body.design-clean-layout .panel-library .panel-head .row .search-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 220px;
}
body.design-clean-layout .panel-library .panel-head .row .search-wrap #searchBox{
  width: 100%;
  min-width: 0;
  padding-right: 28px !important;
}
body.design-clean-layout .search-clear-btn{
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(235,240,250,0.86);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
body.design-clean-layout .search-clear-btn:hover{
  background: rgba(255,255,255,0.09);
  color: #fff;
}
body.design-clean-layout .search-clear-btn.hidden{
  display: none !important;
}

/* Playlist list must visually stop above the floating player dock */
body.design-clean-layout #panelPlaylist #playlistTracks.list{
  margin-bottom: 154px !important;
  padding-bottom: 10px !important;
}
body.design-clean-layout #panelPlaylist.room-stage-active #playlistTracks.list{
  margin-bottom: 332px !important;
  padding-bottom: 10px !important;
}
@media (max-width:1200px){
  body.design-clean-layout #panelPlaylist #playlistTracks.list{ margin-bottom: 146px !important; }
  body.design-clean-layout #panelPlaylist.room-stage-active #playlistTracks.list{ margin-bottom: 310px !important; }
}

/* Let track-name + mode badge receive independent hover titles */
#playlistNowText,
#playlistNowMode{
  pointer-events: auto !important;
}

/* Ensure custom tooltip card is visually obvious over all docks */
.track-tooltip-card{
  z-index: 5000 !important;
  opacity: 1 !important;
}

/* ===== v10e fix3: tooltip visibility hardening + stronger playlist drag feedback ===== */
/* Custom tooltip card should always sit above floating docks and modals. */
.track-tooltip-card{
  z-index: 99999 !important;
  display: block;
}
.track-tooltip-card.hidden{
  display: none !important;
}

/* Clearer visual feedback for playlist drag-and-drop reordering */
body.design-clean-layout #playlistTracks .item{
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
body.design-clean-layout #playlistTracks .item.dragging{
  opacity: .78 !important;
  transform: scale(0.992);
  border-color: rgba(110,231,183,.42) !important;
  background: linear-gradient(180deg, rgba(20,33,39,.92), rgba(14,23,29,.92)) !important;
  box-shadow:
    0 0 0 2px rgba(110,231,183,.18) inset,
    0 10px 24px rgba(0,0,0,.36),
    0 0 24px rgba(110,231,183,.08);
  cursor: grabbing !important;
}
body.design-clean-layout #playlistTracks .item.dragging .meta{
  opacity: .95;
}
body.design-clean-layout #playlistTracks .item.drag-over-before,
body.design-clean-layout #playlistTracks .item.drag-over-after{
  background: linear-gradient(180deg, rgba(17,23,36,.9), rgba(13,18,29,.9));
  box-shadow: 0 0 0 1px rgba(125,160,255,.08) inset;
}
body.design-clean-layout #playlistTracks .item.drag-over-before::before,
body.design-clean-layout #playlistTracks .item.drag-over-after::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(110,231,183,.95), rgba(96,165,250,.95));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 14px rgba(96,165,250,.28);
  pointer-events: none;
}
body.design-clean-layout #playlistTracks .item.drag-over-before::before{
  top: -2px;
}
body.design-clean-layout #playlistTracks .item.drag-over-after::after{
  bottom: -2px;
}
body.design-clean-layout #playlistTracks .item.drag-over-before::after,
body.design-clean-layout #playlistTracks .item.drag-over-after::before{
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(110,231,183,.95);
  box-shadow: 0 0 0 2px rgba(9,14,20,.92), 0 0 12px rgba(110,231,183,.28);
  left: 8px;
  pointer-events: none;
}
body.design-clean-layout #playlistTracks .item.drag-over-before::after{
  top: -5px;
}
body.design-clean-layout #playlistTracks .item.drag-over-after::before{
  bottom: -5px;
}

/* ===== v10e fix4: badge tooltip semantics, tooltip delay UX, stop outline, darker selects ===== */
body.design-clean-layout #panelPlaylist #plAutoNextBtn.is-stop{
  border-color: rgba(248,113,113,.88) !important;
  box-shadow:
    0 0 0 1px rgba(248,113,113,.55),
    0 0 0 4px rgba(248,113,113,.12),
    0 6px 18px rgba(0,0,0,.22);
}
body.design-clean-layout #panelPlaylist #plAutoNextBtn.is-stop:hover{
  box-shadow:
    0 0 0 1px rgba(252,165,165,.75),
    0 0 0 4px rgba(248,113,113,.16),
    0 10px 22px rgba(0,0,0,.28);
}

body.design-clean-layout .side-lang-select,
body.design-clean-layout #playlistSel{
  background: linear-gradient(180deg, rgba(20,23,29,.98), rgba(11,13,18,.99)) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e7edf8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 1px 0 rgba(0,0,0,.24) !important;
}
body.design-clean-layout .side-lang-select:focus,
body.design-clean-layout #playlistSel:focus{
  border-color: rgba(110,231,183,.34) !important;
}
body.design-clean-layout .side-lang-select option,
body.design-clean-layout #playlistSel option,
body.design-clean-layout .side-lang-select optgroup,
body.design-clean-layout #playlistSel optgroup{
  background: #12161d;
  color: #e7edf8;
}

/* ===== v10e fix5: unify playlist/lang dropdown color scheme with panel dropdowns ===== */
body.design-clean-layout .side-lang-select,
body.design-clean-layout #playlistSel{
  background: rgba(9,11,16,.65) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: #e7ebf7 !important;
  box-shadow: none !important;
}
body.design-clean-layout .side-lang-select:hover,
body.design-clean-layout #playlistSel:hover{
  border-color: rgba(255,255,255,.11) !important;
}
body.design-clean-layout .side-lang-select:focus,
body.design-clean-layout #playlistSel:focus,
body.design-clean-layout .side-lang-select:focus-visible,
body.design-clean-layout #playlistSel:focus-visible{
  border-color: rgba(110,231,183,.35) !important;
  box-shadow: 0 0 0 3px rgba(110,231,183,.12) !important;
}


/* Debug start setting row */
#debugStartRow {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  grid-template-columns: minmax(180px, 280px) 1fr;
  align-items: center;
  gap: 10px 12px;
}
#debugStartRow input[type="checkbox"] { width: 16px; height: 16px; }