.dockMediaFrame--refined{aspect-ratio:1/1;overflow:hidden}
.dockMediaFrame--refined img{width:100%;height:100%;object-fit:cover;display:block}
.dock__left--refined{align-items:flex-start;gap:18px}
.dockMediaCol--refined{min-width:148px;max-width:148px}
.dock__np--refined{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:10px}
.dockTrack__artist{font-size:14px;font-weight:700;color:#d7f7ff;opacity:.9}
.dockTrack__title{font-size:28px;font-weight:900;line-height:1.02;color:#fff}
.dock__lineWrap{position:relative;overflow:hidden;max-width:100%}
.dock__lineWrap.is-marquee .dockTrack__artist,
.dock__lineWrap.is-marquee .dockTrack__title,
.dockTrack__line.is-marquee{display:inline-block;min-width:max-content;animation:nreMarquee 12s linear infinite}
.dockTrack__line{display:block;white-space:nowrap}
#dockArtist{display:block;white-space:nowrap}
.dockTrack__titleWrap{width:100%}
.dockTrack__titleWrap.is-marquee .dockTrack__title{display:inline-block;min-width:max-content;animation:nreMarquee 14s linear infinite}
.dockTrack--refined{min-width:0}
.dockMetaLine,.dockBadges--refined{display:flex;gap:8px;flex-wrap:wrap}
.dockBadge--live{background:rgba(140,240,255,.12);border:1px solid rgba(140,240,255,.28)}
.vuPanel--pro{display:grid;gap:10px;min-width:260px;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08)}
.vuRow{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:center}
.vuLabel{font-size:11px;font-weight:900;color:#a9dbe7}
.ledMeter{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:4px;height:14px}
.ledMeter__bar{display:block;height:100%;border-radius:2px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ledMeter__bar.is-on{background:linear-gradient(180deg,#7ef4ff,#2de9ff);box-shadow:0 0 10px rgba(45,233,255,.45)}
.ledMeter .ledMeter__bar:nth-last-child(-n+4).is-on{background:linear-gradient(180deg,#ffe57a,#ffc934);box-shadow:0 0 10px rgba(255,201,52,.45)}
.ledMeter .ledMeter__bar:nth-last-child(-n+2).is-on{background:linear-gradient(180deg,#ff978f,#ff4b42);box-shadow:0 0 10px rgba(255,75,66,.55)}
.wavePanel{margin-top:2px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);padding:6px 8px}
#waveCanvas,#dockWave{display:block;width:100%;height:54px}
.peakLed{width:10px;height:10px;border-radius:2px;background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.peakLed.is-hot{background:#ff5a4d;box-shadow:0 0 14px rgba(255,90,77,.85)}
.dockDisplay__source{white-space:nowrap}
.dockDisplay__small,.dockHint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dockHint{font-size:12px;color:rgba(224,245,255,.74)}
@keyframes nreMarquee{0%{transform:translateX(100%)}100%{transform:translateX(calc(-1 * var(--marquee-distance, 100%)))}}
@media (max-width: 980px){.dock__left--refined{flex-direction:row}.dockMediaCol--refined{min-width:120px;max-width:120px}.dockTrack__title{font-size:22px}.vuPanel--pro{min-width:0}}


/* v22 docking layout refinement */
.dock--remastered .dock__inner{
  display:grid;
  grid-template-columns:minmax(320px,1.1fr) minmax(420px,1.35fr) minmax(250px,.9fr);
  gap:14px;
  align-items:stretch;
}
.dockPanel{min-width:0;height:100%}
.dock__left--refined{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  align-items:start;
  gap:18px;
  padding:16px;
}
.dockMediaCol--refined{min-width:170px;max-width:170px;display:grid;gap:10px}
.dockMediaFrame--refined{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.dockMediaPill{
  justify-self:start;
  padding:7px 11px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.08em;
}
.dock__np--refined{justify-content:flex-start;gap:9px;padding-top:4px}
.dock__eyebrow{font-size:11px;letter-spacing:.16em;opacity:.66}
.dockTrack__title{font-size:30px;line-height:1.02;letter-spacing:-.02em}
.dockTrack__artist{font-size:15px;color:#bfefff;opacity:.92}
.dockMetaLine{display:none}
.dockBadges--refined{gap:7px;flex-wrap:wrap}
.dockBadge{
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.06em;
}
.dock__center{display:grid;grid-template-rows:auto 1fr;gap:12px;padding:16px}
.dockDisplay{padding:12px 14px;border-radius:22px;background:linear-gradient(180deg, rgba(9,18,30,.86), rgba(5,12,21,.72));}
.dockDisplay__header{flex-wrap:nowrap}
.dockDisplay__label,.dockDisplay__source{font-size:10px;letter-spacing:.16em}
.dockDisplay__source{padding:5px 8px;border-radius:999px;background:rgba(127,233,255,.08);border:1px solid rgba(127,233,255,.14)}
.dockDisplay__screen{min-height:82px;justify-content:center;gap:8px;border-radius:18px}
.dockDisplay__big{font-size:20px;letter-spacing:.18em}
.dockDisplay__small{font-size:11px;letter-spacing:.08em}
.dockTransport{grid-template-columns:58px minmax(230px,1.2fr) 64px minmax(118px,.8fr);gap:12px;align-items:center}
.iconbtn--pro{align-self:stretch;min-height:100%;border-radius:18px}
.vuPanel--pro{gap:12px;padding:14px 16px;border-radius:20px;min-width:0}
.ledMeter{height:16px;gap:4px}
.ledMeter__bar{border-radius:3px}
.wavePanel{margin-top:4px;padding:8px 10px;border-radius:14px}
#dockWave{height:60px}
.peakWrap--pro{align-self:stretch;justify-content:center;border-radius:18px;padding:10px 8px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.vol--pro{align-self:stretch;justify-content:center;border-radius:18px;padding:10px 12px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.vol--pro input{width:100%}
.dock__right--cute{display:grid;align-content:start;gap:12px;padding:16px}
.dockControlHead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dock__sourceLabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.64)}
.dockControlHead__status{font-size:12px;font-weight:800;color:#d7f8ff}
.dockSourceTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dockSourceTab{min-height:42px;border-radius:14px}
.dockStatusBar{display:grid;gap:8px}
.dockStatusBar__pill{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:14px}
.dockStatusBar__pill b{font-size:13px}
.dockHint{padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);white-space:nowrap;overflow:hidden}
.dockHint.is-marquee{position:relative}
.dockHint.is-marquee > span{display:inline-block;min-width:max-content;animation:nreMarquee 15s linear infinite}

/* request mascot slightly larger */
.requestMascotLeft--pretty img{width:min(100%,288px)}

@media (max-width: 1180px){
  .dock--remastered .dock__inner{grid-template-columns:1fr;}
  .dock__left--refined{grid-template-columns:150px minmax(0,1fr)}
}
@media (max-width: 760px){
  .dock__left--refined{grid-template-columns:1fr;}
  .dockMediaCol--refined{max-width:220px}
}

/* v23 surgical layout pass based on user architecture */
.dock__left--refined{
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto;
  justify-items:center;
  align-content:start;
  text-align:center;
  gap:14px;
}
.dockMediaCol--refined{
  min-width:0;
  max-width:220px;
  width:min(100%,220px);
  justify-items:center;
}
.dockMediaFrame--refined{width:100%;}
.dockMediaPill{justify-self:center;}
.dock__np--refined{
  align-items:center;
  text-align:center;
  width:100%;
  gap:8px;
  padding-top:0;
}
.dockTrack--refined,.dockTrack__titleWrap,.dockTrack__line,.dockTrack__artist{width:100%;}
.dockTrack__artist{font-size:14px;}
.dockTrack__title{font-size:28px;}
.dockBadges--refined{
  justify-content:center;
  width:100%;
  gap:8px;
}
.dockBadge{max-width:100%;}

.dock__center{
  grid-template-rows:auto 1fr;
}
.dockTransport{
  display:grid;
  grid-template-columns:74px minmax(0,1fr) 74px 112px;
  grid-template-areas:
    "play meters peak volume"
    "wave wave wave wave";
  gap:12px;
  align-items:stretch;
}
.iconbtn--pro{grid-area:play;}
.vuPanel--pro{grid-area:meters;}
.peakWrap--pro{grid-area:peak;min-width:0;}
.vol--pro{grid-area:volume;min-width:0;}
.wavePanel--transport{
  grid-area:wave;
  margin-top:0;
  padding:10px 12px;
  border-radius:16px;
}
#dockWave{height:64px;}
.vuPanel--pro{
  grid-template-rows:repeat(2,auto);
  align-content:center;
}
.ledMeter{height:18px;gap:4px;}
.ledMeter__bar.is-on{
  background:linear-gradient(180deg,#7dfb8c,#34c759);
  box-shadow:0 0 10px rgba(52,199,89,.45);
}
.ledMeter .ledMeter__bar:nth-last-child(-n+6).is-on{
  background:linear-gradient(180deg,#ffd86a,#ffb020);
  box-shadow:0 0 10px rgba(255,176,32,.45);
}
.ledMeter .ledMeter__bar:nth-last-child(-n+4).is-on{
  background:linear-gradient(180deg,#ffe97b,#ffc938);
  box-shadow:0 0 10px rgba(255,201,56,.45);
}
.ledMeter .ledMeter__bar:nth-last-child(-n+2).is-on{
  background:linear-gradient(180deg,#ff8b7a,#ff4338);
  box-shadow:0 0 12px rgba(255,67,56,.55);
}
.peakWrap--pro,.vol--pro,.iconbtn--pro,.vuPanel--pro,.wavePanel--transport{
  box-shadow:0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
.peakText{font-size:11px;letter-spacing:.14em;}

.dock__right--cute{gap:10px;}
.dockControlHead{
  align-items:flex-start;
}
.dock__sourceLabel{line-height:1.2;}
.dockControlHead__status{
  text-align:right;
  line-height:1.15;
  max-width:140px;
}
.dockStatusBar__pill span:first-child{opacity:.72;letter-spacing:.08em;font-size:11px;}
.dockStatusBar__pill b{line-height:1.1;text-align:right;}
.dockHint{
  font-size:11px;
  line-height:1;
}

@media (max-width:1180px){
  .dockTransport{
    grid-template-columns:74px minmax(0,1fr) 74px 112px;
  }
}
@media (max-width:760px){
  .dockTransport{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "play peak"
      "meters meters"
      "volume volume"
      "wave wave";
  }
  .dockControlHead__status{max-width:none;}
}

/* v25 left-right surgical pass: center untouched */
.dock__left--refined{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto;
  gap:14px;
  padding:16px;
  align-content:start;
}
.dockLeftArtRow{display:flex;justify-content:center;width:100%;}
.dockMediaCol--refined{width:min(100%,238px);max-width:238px;min-width:0;display:block;}
.dockMediaFrame--refined{width:100%;border-radius:24px;overflow:hidden;}
.dockLeftInfoGrid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:12px;
  width:100%;
  align-items:start;
}
.dockLeftInfoCell{
  min-width:0;
  display:grid;
  gap:7px;
  align-content:start;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 20px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
}
.dockLeftInfoCell .dock__eyebrow{margin:0;text-align:left;}
.dockLeftInfoCell--song .dockTrack__title{font-size:26px;line-height:1.02;text-align:left;}
.dockLeftInfoCell--artist .dockTrack__artist{font-size:18px;line-height:1.08;text-align:left;color:#d9f6ff;opacity:.96;}
.dockArtistWrap,.dockTrack__titleWrap{width:100%;overflow:hidden;}
.dockBadges--left{
  justify-content:center;
  align-items:center;
  width:100%;
  gap:8px;
  flex-wrap:wrap;
}
.dockBadges--left .dockMediaPill,
.dockBadges--left .dockBadge{justify-self:center;}

.dock__right--cute{
  display:grid;
  grid-template-rows:auto auto auto auto auto auto;
  gap:12px;
  padding:16px;
  align-content:start;
}
.dockControlHead{align-items:center;}
.dockControlHead__status{text-align:right;max-width:none;}
.dockHostCard{
  display:grid;
  gap:10px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05);
}
.dockHostRow{display:grid;gap:4px;}
.dockHostLabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(218,242,255,.66);}
.dockHostValue{font-size:16px;line-height:1.1;color:#fff;font-weight:800;}
.dockStateDisplay{display:grid;gap:8px;}
.dockStateDisplay__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(218,242,255,.66);}
.dockStateDisplay__screen{
  border-radius:16px;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(7,16,27,.9), rgba(4,11,18,.72));
  border:1px solid rgba(113,223,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.18);
  overflow:hidden;
}
#dockStateDetail{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#dff8ff;}
.dockStatusBar--right{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.dockStatusLed{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 16px;border-radius:999px;
  background:linear-gradient(180deg, rgba(255,110,102,.18), rgba(255,66,57,.12));
  border:1px solid rgba(255,96,88,.28);
  box-shadow:0 0 18px rgba(255,86,77,.18), inset 0 1px 0 rgba(255,255,255,.05);
  font-size:15px;font-weight:900;letter-spacing:.16em;color:#fff;text-transform:uppercase;
}
.dockStatusLed .dot{width:10px;height:10px;border-radius:99px;background:#ff5b50;box-shadow:0 0 12px rgba(255,91,80,.9);}
.dockHint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media (max-width: 1180px){
  .dockLeftInfoGrid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 760px){
  .dockLeftInfoGrid{grid-template-columns:1fr;}
  .dockStatusBar--right{grid-template-columns:1fr;}
}


/* v26 compact docking refinement: left+right only, center untouched */
.dock--remastered .dock__inner{
  grid-template-columns:minmax(280px,.92fr) minmax(420px,1.34fr) minmax(220px,.82fr);
  gap:12px;
}
.dock--remastered .dock__left,
.dock--remastered .dock__center,
.dock--remastered .dock__right{padding:10px !important;border-radius:16px !important;}

.dock__left--refined{
  gap:10px;
  padding:12px;
}
.dockMediaCol--refined{
  width:min(100%,210px);
  max-width:210px;
}
.dockLeftInfoGrid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
}
.dockLeftInfoCell{
  padding:10px 12px;
  border-radius:16px;
}
.dockLeftInfoCell .dock__eyebrow{text-align:center;}
.dockLeftInfoCell--song .dockTrack__title,
.dockLeftInfoCell--artist .dockTrack__artist{text-align:center;}
.dockLeftInfoCell--song .dockTrack__title{font-size:22px;}
.dockLeftInfoCell--artist .dockTrack__artist{font-size:16px;}
.dockBadges--left{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:7px;
}
.dockBadges--left .dockMediaPill,
.dockBadges--left .dockBadge{
  width:auto;
  min-width:120px;
  justify-content:center;
  text-align:center;
}

.dock__right--cute{
  grid-template-rows:auto auto auto auto;
  gap:10px;
  padding:12px;
}
.dockSourceTabs{gap:6px;}
.dockSourceTab{min-height:38px;border-radius:12px;font-size:12px;}
.dockHostCard{gap:8px;padding:10px 12px;border-radius:16px;}
.dockHostValue{font-size:15px;}
.dockStateDisplay{gap:6px;}
.dockStateDisplay__screen{
  display:grid;
  gap:10px;
  padding:11px 12px;
  border-radius:15px;
}
#dockStateDetail{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
}
.dockStateDisplay__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(218,242,255,.72);
}
.dockStateDisplay__meta b{
  font-size:12px;
  letter-spacing:.04em;
  color:#fff;
}
.dockStatusBar--right{grid-template-columns:1fr;}
.dockStatusBar__pill{padding:9px 11px;border-radius:12px;}
.dockStatusBar__pill b{font-size:12px;}

/* remove duplicated old right status/hint if still present */
.dockStatusLed,.dockHint{display:none !important;}

@media (max-width:1180px){
  .dock--remastered .dock__inner{grid-template-columns:1fr;}
}


/* v27 compact final pass: left stack + tighter right */
.dock--remastered .dock__inner{grid-template-columns:minmax(250px,.82fr) minmax(420px,1.38fr) minmax(250px,.82fr);gap:10px;}
.dock__left--refined{grid-template-rows:auto auto auto;gap:12px;justify-items:center;}
.dockMediaCol--refined{width:min(100%,170px);max-width:170px;}
.dockLeftArtRow{margin-bottom:0;}
.dockLeftInfoGrid{display:none !important;}
.dockLeftInfoStack{display:grid;grid-template-rows:auto auto;gap:8px;width:100%;max-width:280px;}
.dockLeftInfoCell{padding:9px 12px;border-radius:14px;text-align:center;justify-items:center;gap:4px;}
.dockLeftInfoCell .dock__eyebrow{text-align:center;font-size:10px;letter-spacing:.14em;opacity:.72;}
.dockLeftInfoCell--artist .dockTrack__artist{font-size:20px;font-weight:800;text-align:center;line-height:1.05;}
.dockLeftInfoCell--song .dockTrack__title{font-size:16px;text-align:center;line-height:1.08;letter-spacing:-.01em;}
.dockArtistWrap,.dockTrack__titleWrap{width:100%;}
.dockBadges--left{gap:6px;align-items:center;justify-content:center;}
.dockBadges--left .dockBadge{min-width:118px;padding:8px 12px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;}
.dockBadges--left .dockBadge--live{background:linear-gradient(180deg, rgba(255,74,68,.22), rgba(210,16,12,.18));border:1px solid rgba(255,92,86,.32);}

.dock__right--cute{grid-template-rows:auto auto auto auto;gap:10px;padding:12px;align-content:start;}
.dockControlHead{align-items:center;}
.dock__sourceLabel{font-size:10px;letter-spacing:.14em;}
.dockControlHead__status{font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(127,233,255,.08);border:1px solid rgba(127,233,255,.14);}
.dockSourceTabs{grid-template-columns:repeat(3,1fr);gap:8px;}
.dockSourceTab{min-height:40px;font-size:12px;border-radius:14px;}
.dockHostCard,.dockStateDisplay__screen{border-radius:16px;}
.dockHostCard{padding:12px;gap:10px;}
.dockHostValue{font-size:15px;line-height:1.1;}
.dockStateDisplay{gap:6px;}
.dockStateDisplay__label{font-size:10px;letter-spacing:.14em;}
.dockStateDisplay__screen{padding:12px;display:grid;gap:10px;}
#dockStateDetail{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dockStateDisplay__meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);}
.dockMetaPair{display:grid;gap:3px;min-width:0;}
.dockMetaPair span{font-size:10px;letter-spacing:.12em;color:rgba(218,242,255,.7);text-transform:uppercase;}
.dockMetaPair b{font-size:13px;line-height:1.1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dockStatusBar--right{display:none !important;}

@media (max-width:1180px){
 .dock--remastered .dock__inner{grid-template-columns:1fr;}
 .dockMediaCol--refined{width:min(100%,190px);max-width:190px;}
 .dockLeftInfoStack{max-width:none;}
}

/* v28 final compact pass: remove left pills, tighten right to content */
.dock--remastered .dock__inner{
  grid-template-columns:minmax(240px,.78fr) minmax(420px,1.42fr) minmax(220px,.74fr);
  gap:10px;
}

/* left: art + artist/theme only */
.dock__left--refined{
  grid-template-rows:auto auto;
  gap:12px;
  align-content:start;
}
.dockMediaCol--refined{
  width:min(100%,168px);
  max-width:168px;
}
.dockLeftInfoStack{
  width:100%;
  max-width:300px;
  gap:10px;
}
.dockLeftInfoCell{
  padding:10px 12px;
  min-width:0;
}
.dockLeftInfoCell--artist .dockTrack__artist{
  font-size:19px;
}
.dockLeftInfoCell--song .dockTrack__title{
  font-size:15px;
}
.dockBadges--left{display:none !important;}

/* right: fit content better and reduce visual bulk */
.dock__right--cute{
  width:min(100%,262px);
  justify-self:center;
  align-self:start;
  gap:9px;
}
.dockControlHead{
  gap:8px;
}
.dockSourceTabs{gap:6px;}
.dockSourceTab{
  min-height:38px;
  padding:0 10px;
}
.dockHostCard,
.dockStateDisplay__screen{
  padding:11px 12px;
}
.dockHostValue{
  font-size:14px;
}
.dockStateDisplay__label,
.dockHostLabel,
.dock__sourceLabel{
  font-size:10px;
}
.dockStateDisplay__meta{
  grid-template-columns:1fr 1fr;
  gap:8px;
}
#dockStateDetail{
  font-size:12px;
}

@media (max-width:1180px){
  .dock--remastered .dock__inner{grid-template-columns:1fr;}
  .dock__right--cute{width:100%;justify-self:stretch;}
}


/* v29 table-locked docking pass: close empty gaps, left as 3-row table, right compact */
.dock--remastered .dock__inner{
  grid-template-columns:minmax(250px,270px) minmax(420px,1fr) minmax(230px,255px);
  gap:10px;
  align-items:stretch;
}
.dockPanel{height:100%; min-height:0;}

/* LEFT = 3-row table */
.dock__left--refined{
  display:grid;
  grid-template-rows:auto auto auto;
  grid-template-columns:1fr;
  gap:10px;
  align-content:start;
  justify-items:stretch;
  text-align:center;
}
.dockLeftArtRow{
  display:block;
  width:100%;
}
.dockMediaCol--refined{
  display:block;
  width:100%;
  max-width:none;
  min-width:0;
}
.dockMediaFrame--refined{
  width:100%;
  border-radius:20px;
  overflow:hidden;
}
.dockMediaFrame--refined img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}
.dockLeftInfoStack{
  width:100%;
  max-width:none;
  display:grid;
  grid-template-rows:auto auto;
  gap:8px;
}
.dockLeftInfoCell{
  padding:8px 6px;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  justify-items:center;
}
.dockLeftInfoCell .dock__eyebrow{
  margin:0 0 2px;
  text-align:center;
  font-size:10px;
  letter-spacing:.14em;
  opacity:.62;
}
.dockLeftInfoCell--artist .dockTrack__artist,
.dockLeftInfoCell--song .dockTrack__title{
  width:100%;
  text-align:center;
}
.dockLeftInfoCell--artist .dockTrack__artist{
  font-size:19px;
  font-weight:800;
  line-height:1.06;
  color:#dff7ff;
}
.dockLeftInfoCell--song .dockTrack__title{
  font-size:16px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.01em;
}

/* RIGHT = content-fitted table, no redundant blocks */
.dock__right--cute{
  display:grid;
  grid-template-rows:auto auto auto 1fr;
  gap:9px;
  width:100%;
  max-width:none;
  justify-self:stretch;
  align-content:start;
}
.dockControlHead{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px;
}
.dock__sourceLabel,
.dockControlHead__status,
.dockHostLabel,
.dockStateDisplay__label{
  font-size:10px;
}
.dockControlHead__status{
  max-width:none;
  text-align:right;
  white-space:nowrap;
}
.dockSourceTabs{
  gap:6px;
}
.dockSourceTab{
  min-height:36px;
  padding:0 8px;
}
.dockHostCard{
  gap:8px;
  padding:10px 11px;
}
.dockHostRow{
  gap:3px;
}
.dockHostValue{
  font-size:14px;
  line-height:1.1;
}
.dockStateDisplay{
  display:grid;
  gap:6px;
  align-content:start;
}
.dockStateDisplay__screen{
  display:grid;
  gap:8px;
  padding:10px 11px;
}
#dockStateDetail{
  font-size:12px;
  line-height:1.2;
}
.dockStateDisplay__meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:start;
}
.dockMetaPair{min-width:0;}
.dockMetaPair b{
  font-size:12px;
}

@media (max-width:1180px){
  .dock--remastered .dock__inner{grid-template-columns:1fr;}
}


/* v30 final left vertical table + right compact tune */
footer.dock .dock__inner{
  align-items:stretch;
}
footer.dock .dock__left--refined{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto auto !important;
  align-content:start;
  justify-items:center;
  gap:14px !important;
  padding:14px !important;
}
footer.dock .dockLeftArtRow{
  width:100%;
  display:block !important;
}
footer.dock .dockMediaCol--refined{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
footer.dock .dockMediaFrame--refined{
  width:100% !important;
  aspect-ratio:1 / 1;
  min-height:0 !important;
  max-height:none !important;
}
footer.dock .dockMediaFrame--refined img{
  width:100%;
  height:100%;
  object-fit:cover;
}
footer.dock .dockLeftInfoStack{
  width:100%;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  gap:10px !important;
}
footer.dock .dockLeftInfoCell{
  width:100%;
  min-height:auto !important;
  padding:10px 12px !important;
  text-align:center !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
footer.dock .dockLeftInfoCell--artist{order:1;}
footer.dock .dockLeftInfoCell--song{order:2;}
footer.dock .dock__lineWrap,
footer.dock .dockTrack__titleWrap,
footer.dock .dockArtistWrap{
  width:100%;
}
footer.dock .dockTrack__artist,
footer.dock .dockTrack__title{
  display:block;
  width:100%;
  text-align:center;
}
footer.dock .dockTrack__artist{font-size:30px !important;line-height:1.05 !important;}
footer.dock .dockTrack__title{font-size:36px !important;line-height:1.05 !important;}
footer.dock .dock__eyebrow{display:block;text-align:center;}

footer.dock .dock__right--cute{
  padding:14px !important;
  gap:12px !important;
}
footer.dock .dockControlHead{
  margin-bottom:0 !important;
}
footer.dock .dockSourceTabs{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
footer.dock .dockHostCard,
footer.dock .dockStateDisplay{
  padding:12px !important;
}
footer.dock .dockStateDisplay__screen{
  gap:10px !important;
}
footer.dock .dockMetaPair{
  min-width:0;
}
footer.dock .dockMetaPair b{
  white-space:nowrap;
}
@media (max-width: 980px){
  footer.dock .dock__left--refined{grid-template-columns:1fr !important;grid-template-rows:auto auto auto !important;}
  footer.dock .dockTrack__artist{font-size:24px !important;}
  footer.dock .dockTrack__title{font-size:28px !important;}
}


/* v31 final compact left-column table + tighter right panel */
footer.dock .dock__inner{
  grid-template-columns:minmax(280px,300px) minmax(460px,1fr) minmax(220px,238px) !important;
  gap:10px !important;
  align-items:stretch !important;
}
footer.dock .dock__left--refined{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:minmax(0,1fr) auto auto !important;
  align-content:stretch !important;
  justify-items:stretch !important;
  gap:10px !important;
  padding:14px !important;
}
footer.dock .dockLeftArtRow{
  width:100% !important;
  min-height:0 !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
}
footer.dock .dockMediaCol--refined{
  width:100% !important;
  display:grid !important;
  place-items:center !important;
}
footer.dock .dockMediaFrame--refined{
  width:min(84%, 230px) !important;
  aspect-ratio:1 / 1 !important;
  margin-inline:auto !important;
  border-radius:22px !important;
  overflow:hidden !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 18px 40px rgba(0,0,0,.35), 0 0 28px rgba(92,214,255,.10) !important;
}
footer.dock .dockMediaFrame--refined img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
footer.dock .dockLeftInfoStack{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  gap:8px !important;
  align-content:start !important;
}
footer.dock .dockLeftInfoCell{
  width:100% !important;
  min-height:0 !important;
  padding:6px 8px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  display:grid !important;
  justify-items:center !important;
  align-content:start !important;
  gap:3px !important;
}
footer.dock .dockLeftInfoCell--artist{order:1 !important;}
footer.dock .dockLeftInfoCell--song{order:2 !important;}
footer.dock .dockLeftInfoCell .dock__eyebrow{
  margin:0 !important;
  text-align:center !important;
  font-size:11px !important;
  letter-spacing:.16em !important;
  opacity:.66 !important;
}
footer.dock .dockArtistWrap,
footer.dock .dockTrack__titleWrap,
footer.dock .dock__lineWrap{
  width:100% !important;
  overflow:hidden !important;
}
footer.dock .dockTrack__artist,
footer.dock .dockTrack__title{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}
footer.dock .dockLeftInfoCell--artist .dockTrack__artist{
  font-size:28px !important;
  line-height:1.04 !important;
  font-weight:900 !important;
  color:#e7f8ff !important;
}
footer.dock .dockLeftInfoCell--song .dockTrack__title{
  font-size:18px !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  letter-spacing:-.01em !important;
}
footer.dock .dock__right--cute{
  width:100% !important;
  max-width:238px !important;
  justify-self:stretch !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto auto auto !important;
  align-content:start !important;
  gap:10px !important;
  padding:14px !important;
}
footer.dock .dockHostCard,
footer.dock .dockStateDisplay{
  padding:12px !important;
}
footer.dock .dockHostValue{font-size:15px !important;line-height:1.08 !important;}
footer.dock .dockStateDisplay__screen{gap:8px !important;padding:10px 12px !important;}
footer.dock #dockStateDetail{font-size:12px !important;line-height:1.2 !important;}
footer.dock .dockStateDisplay__meta{grid-template-columns:1fr 1fr !important;gap:8px !important;}
footer.dock .dockMetaPair b{font-size:12px !important;white-space:nowrap !important;}
@media (max-width:1180px){
  footer.dock .dock__inner{grid-template-columns:1fr !important;}
  footer.dock .dockMediaFrame--refined{width:min(72vw, 260px) !important;}
}


/* v34 final art more protagonist + centered + compact overrides */
footer.dock .dock__inner{grid-template-columns:minmax(300px,320px) minmax(460px,1fr) minmax(210px,228px) !important;}
footer.dock .dock__left--refined{grid-template-rows:minmax(220px,1.15fr) auto auto !important;justify-items:center !important;}
footer.dock .dockLeftArtRow,footer.dock .dockMediaCol--refined{place-items:center !important;justify-items:center !important;align-items:center !important;}
footer.dock .dockMediaFrame--refined{width:min(96%, 286px) !important;max-width:286px !important;margin-inline:auto !important;}
footer.dock .dockLeftInfoStack{justify-items:center !important;gap:10px !important;}
footer.dock .dockLeftInfoCell{justify-items:center !important;align-items:center !important;padding:4px 6px !important;}
footer.dock .dockLeftInfoCell--artist .dockTrack__artist{font-size:30px !important;line-height:1.02 !important;}
footer.dock .dockLeftInfoCell--song .dockTrack__title{font-size:20px !important;line-height:1.06 !important;}
footer.dock .dockLeftInfoCell .dock__eyebrow{font-size:10px !important;opacity:.58 !important;}
@media (max-width:1180px){footer.dock .dockMediaFrame--refined{width:min(78vw, 300px) !important;max-width:300px !important;}}


/* v35 final table lock: bigger centered art, left true vertical cells, tighter right fitted to content */
footer.dock .dock__inner{
  grid-template-columns:minmax(320px,340px) minmax(460px,1fr) minmax(220px,240px) !important;
  gap:10px !important;
  align-items:stretch !important;
}
footer.dock .dock__left--refined{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:minmax(280px,1.3fr) auto auto !important;
  justify-items:stretch !important;
  align-content:start !important;
  gap:8px !important;
  padding:12px !important;
}
footer.dock .dockLeftArtRow{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
}
footer.dock .dockMediaCol--refined{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  display:grid !important;
  place-items:center !important;
}
footer.dock .dockMediaFrame--refined{
  width:min(100%,300px) !important;
  max-width:300px !important;
  aspect-ratio:1/1 !important;
  margin-inline:auto !important;
  border-radius:22px !important;
  overflow:hidden !important;
}
footer.dock .dockMediaFrame--refined img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
footer.dock .dockLeftInfoStack{
  width:100% !important;
  max-width:none !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  gap:4px !important;
}
footer.dock .dockLeftInfoCell{
  width:100% !important;
  padding:4px 6px !important;
  min-height:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  display:grid !important;
  justify-items:center !important;
  align-content:start !important;
  gap:2px !important;
}
footer.dock .dockLeftInfoCell .dock__eyebrow{
  margin:0 !important;
  text-align:center !important;
  font-size:10px !important;
  letter-spacing:.14em !important;
  opacity:.6 !important;
}
footer.dock .dockLeftInfoCell--artist{order:1 !important;}
footer.dock .dockLeftInfoCell--song{order:2 !important;}
footer.dock .dockArtistWrap,
footer.dock .dockTrack__titleWrap,
footer.dock .dock__lineWrap{
  width:100% !important;
  overflow:hidden !important;
}
footer.dock .dockLeftInfoCell--artist .dockTrack__artist,
footer.dock .dockLeftInfoCell--song .dockTrack__title{
  width:100% !important;
  display:block !important;
  text-align:center !important;
}
footer.dock .dockLeftInfoCell--artist .dockTrack__artist{
  font-size:24px !important;
  line-height:1.04 !important;
  font-weight:900 !important;
}
footer.dock .dockLeftInfoCell--song .dockTrack__title{
  font-size:18px !important;
  line-height:1.08 !important;
  font-weight:900 !important;
}
footer.dock .dock__right--cute{
  width:100% !important;
  max-width:240px !important;
  justify-self:stretch !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto auto auto !important;
  gap:8px !important;
  padding:12px !important;
  align-content:start !important;
}
footer.dock .dockControlHead{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:center !important;
  gap:8px !important;
}
footer.dock .dockSourceTabs{gap:6px !important;}
footer.dock .dockSourceTab{min-height:36px !important;padding:0 8px !important;}
footer.dock .dockHostCard,
footer.dock .dockStateDisplay__screen{padding:10px 11px !important;}
footer.dock .dockHostCard{gap:8px !important;}
footer.dock .dockHostRow{gap:3px !important;}
footer.dock .dockHostValue{font-size:14px !important;line-height:1.08 !important;}
footer.dock .dockStateDisplay{gap:4px !important;}
footer.dock .dockStateDisplay__label,
footer.dock .dockHostLabel,
footer.dock .dock__sourceLabel{font-size:10px !important;}
footer.dock #dockStateDetail{font-size:12px !important;line-height:1.2 !important;}
footer.dock .dockStateDisplay__meta{grid-template-columns:1fr 1fr !important;gap:6px !important;}
footer.dock .dockMetaPair b{font-size:12px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
@media (max-width:1180px){
  footer.dock .dock__inner{grid-template-columns:1fr !important;}
  footer.dock .dockMediaFrame--refined{width:min(82vw,320px) !important;max-width:320px !important;}
  footer.dock .dock__right--cute{max-width:none !important;}
}

/* v41 art cell taller only: enlarge top row without inflating whole left block */
footer.dock .dock__left--refined{
  grid-template-rows:minmax(220px,1fr) auto auto !important;
  gap:6px !important;
}
footer.dock .dockLeftArtRow{
  align-self:start !important;
}
footer.dock .dockMediaFrame--refined{
  width:min(100%,260px) !important;
  max-width:260px !important;
}
@media (max-width:1180px){
  footer.dock .dockMediaFrame--refined{width:min(80vw,280px) !important;max-width:280px !important;}
}


/* v44 compact container only: close outer shell without shrinking internal content */
footer.dock{
  display:flex;
  justify-content:center;
}
footer.dock .dock__inner{
  max-width:1100px !important;
  width:100% !important;
  margin:0 auto !important;
  align-items:start !important;
}
@media (max-width: 1180px){
  footer.dock .dock__inner{
    max-width:none !important;
  }
}


/* v45 close main outer shell: reduce vertical air without shrinking internals */
footer.dock{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px 0 !important;
  min-height:unset !important;
  height:auto !important;
}

footer.dock .dock__inner{
  max-width:1100px !important;
  width:100% !important;
  margin:0 auto !important;
  align-items:start !important;
  min-height:unset !important;
  height:auto !important;
}

footer.dock .dock__left,
footer.dock .dock__center,
footer.dock .dock__right,
footer.dock .dockPanel{
  min-height:unset !important;
  height:auto !important;
}

@media (max-width:1180px){
  footer.dock .dock__inner{
    max-width:none !important;
  }
}