/* Compact v2 layout and playback controls. */
:root{--player:110px}
.topbar{height:76px;font-size:15px;font-weight:550;color:#65786b}
.topbar strong{font-weight:550}
.brand{align-items:center}
.nav-caption{margin-top:45px}
.search-intro{padding-top:28px}
.search-context{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 24px;font-size:11px;color:#7d9285}
.search-context .text-button{font-size:12px;color:var(--green)}
.music-section{margin-top:28px}
.section-heading{margin-bottom:18px}
.table-header,.track-row{grid-template-columns:30px minmax(140px,2.2fr) minmax(80px,1.2fr) 85px 53px 112px;gap:8px}
.row-actions{gap:6px}
.heart-button.liked,.icon-button.liked{color:#ce6576}
.liked use[href="#i-heart"]{fill:currentColor;stroke:currentColor}
.playback-buttons{display:flex;align-items:center;justify-content:center;gap:15px}
.playback{gap:8px}
.skip-button .icon{width:18px;height:18px}
.skip-button use{fill:currentColor;stroke-width:1}
.main-play .spinner{border-top-color:white;border-color:#ffffff4d;border-top-color:white}
.mode-active{color:var(--green);background:var(--green-tint)}
.player{grid-template-columns:minmax(170px,1fr) minmax(280px,1.4fr) minmax(140px,.8fr)}
.empty-state{padding:65px 10px}
@media(max-width:1100px){
  .table-header,.track-row{grid-template-columns:23px minmax(130px,1.7fr) minmax(65px,1fr) 70px 43px 103px;gap:5px}
  .row-actions{gap:3px}
  .player{grid-template-columns:minmax(150px,1fr) minmax(260px,1.4fr) minmax(120px,.8fr);gap:15px}
}
@media(max-width:900px){.track-album,.table-header>span:nth-child(3){display:none}.table-header,.track-row{grid-template-columns:22px minmax(120px,1fr) 70px 43px 103px}}
@media(max-width:850px){.player{grid-template-columns:1fr 1.2fr}.playback-buttons{gap:12px}}
@media(max-width:640px){
  :root{--player:calc(154px + env(safe-area-inset-bottom))}
  .sidebar nav{gap:15px;margin-top:22px}
  .nav-item{font-size:12px;gap:6px}
  .nav-item .icon{width:16px;height:16px}
  .nav-count{font-size:9px;padding:1px 4px}
  .search-intro{padding-top:23px}
  .search-context{margin:13px 0 22px;font-size:10px;gap:8px}
  .search-context .text-button{font-size:10px}
  .music-section{margin-top:25px}
  .table-header,.track-row{grid-template-columns:minmax(100px,1fr) 104px;gap:6px}
  .row-actions{gap:3px}
  .row-actions .icon-button{height:31px;width:31px}
  .row-actions .icon-button .icon{height:16px;width:16px}
  .cover{height:41px;width:41px}
  .track-main{gap:8px}
  .song-title{font-size:12px}
  .format-tag{margin-left:4px}
  .player{display:grid;grid-template-columns:minmax(0,1fr);height:var(--player);min-height:var(--player);gap:7px;padding:11px 21px calc(9px + env(safe-area-inset-bottom))}
  .now-playing{grid-row:1;grid-column:1;gap:10px}
  .player-art{height:36px;width:36px}
  .player-art .icon{width:19px;height:19px}
  .playback{display:flex;grid-row:2;grid-column:1;gap:3px;width:100%}
  .playback-buttons{width:100%;max-width:300px;justify-content:space-between;gap:15px}
  .main-play{grid-column:auto;grid-row:auto;justify-self:auto;width:35px;height:35px}
  .playback-buttons .icon-button{width:31px;height:31px}
  .timeline{grid-column:auto;grid-row:auto;margin-top:4px}
  .now-text strong{font-size:11px}.now-text>span{font-size:9px}
  .empty-state{padding:50px 5px}
}
@media(max-width:359px){main{padding-left:16px;padding-right:16px}.sidebar{padding-left:16px;padding-right:16px}.sidebar nav{gap:10px}.nav-item{font-size:11px;gap:5px}.nav-count{padding:1px 3px}.track-row{grid-template-columns:minmax(90px,1fr) 100px}.cover{width:34px;height:34px}.track-main{gap:6px}}