/*
 * Audious live frontend
 *
 * Structural and progressive-integration styles for the rebuilt frontend.
 * Loaded after the active theme stylesheet so this layer can consume the
 * theme variables while owning the shared live-frontend DOM contract.
 *
 * Rule: keep frontend CSS out of public/index-head.php.
 */

:root{
  --audious-action-btn-size:36px;
  --audious-action-btn-radius:9px;
  --audious-action-icon-size:16px;
  --audious-action-play-btn-size:40px;
  --audious-action-play-icon-size:24px;
}

.live-loading,.live-empty{grid-column:1/-1;padding:24px 12px;color:var(--muted,#8d96a5);font-size:12px;text-align:center}
.live-song-card,.live-album-card,.live-album-track{cursor:pointer}
.live-song-card.is-current,.live-album-track.is-current{outline:1px solid var(--line-strong,#394351);outline-offset:-1px}
.live-song-card.is-playing .play-fab{color:#11151a}
.live-song-card.is-playing .kebab,.live-album-track.is-playing .kebab{color:var(--text,#f2f4f7)}
.live-album-card .media-cover img{width:100%;height:100%;object-fit:cover;display:block}
.live-album-detail{display:grid;gap:16px}
.live-album-hero{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px;border:1px solid var(--line,#29313b);border-radius:14px;background:var(--surface,#151a20)}
.live-album-hero-cover{width:92px;height:92px;border-radius:11px;overflow:hidden;background:var(--surface-2,#1b2129);display:grid;place-items:center;color:var(--muted,#8d96a5)}
.live-album-hero-cover img{width:100%;height:100%;object-fit:cover}
.live-album-hero-copy{min-width:0}.live-album-hero-copy strong,.live-album-hero-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-album-hero-copy strong{font-size:20px}.live-album-hero-copy span{margin-top:5px;color:var(--muted,#8d96a5);font-size:11px}
.live-album-back{min-height:36px;padding:0 12px;border:1px solid var(--line,#29313b);border-radius:10px;background:transparent;color:var(--soft,#c8ced7);cursor:pointer}
.live-like-row{cursor:pointer}
.live-like-row.is-current{outline:1px solid var(--line-strong,#394351);outline-offset:-1px}
.live-like-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.live-like-toggle,.live-like-play,.live-share-toggle{width:var(--audious-action-btn-size);height:var(--audious-action-btn-size);display:grid;place-items:center;border:0;border-radius:var(--audious-action-btn-radius);background:transparent;color:var(--soft,#c8ced7);cursor:pointer}
.live-like-toggle{font-size:0;color:var(--text,#f2f4f7)}
.live-like-toggle .live-like-icon{width:var(--audious-action-icon-size);height:var(--audious-action-icon-size);display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.live-like-toggle .live-like-icon.is-filled{fill:currentColor;stroke:currentColor}
.live-play-icon{width:var(--audious-action-play-icon-size);height:var(--audious-action-play-icon-size);display:block;fill:currentColor;pointer-events:none}
.play-fab .live-play-icon{width:26px;height:26px}
.live-like-toggle:hover,.live-like-play:hover,.live-share-toggle:hover{background:var(--surface-2,#1b2129);color:var(--text,#f2f4f7)}
.live-like-row.is-playing .live-like-play{color:var(--text,#f2f4f7)}
.live-count{margin-left:5px;color:var(--muted,#8d96a5);font-size:11px}

/* Step 20.3.8.25b — compact content typography matches the Activity Center.
   Primary labels/titles: 12px · secondary metadata: 11px · micro metadata: 10px. */
.simple-copy b,
.songtitle b,
.recent-card .recent-meta b,
.feature-card .feature-meta b,
.live-shared-track-copy strong,
.live-upload-file-copy strong{
  font-size:12px !important;
  line-height:1.3;
}
.simple-copy span,
.songtitle span,
.simple-col,
.track-row .album,
.track-row .duration,
.recent-card .recent-meta span,
.feature-card .feature-meta span,
.live-shared-track-copy>span:not(.live-shared-track-badge),
.live-upload-file-copy span{
  font-size:11px !important;
  line-height:1.35;
}
.live-load-more-wrap{display:flex;justify-content:center;padding:14px}
.live-load-more-wrap[hidden]{display:none}
.mobile-player-controls{display:none}
.mobile-volume-popover{display:none}

/* Step 20.3.8 — denser desktop media lists, activity center/mobile excluded. */
@media (min-width:761px){
  /* Reserve the fixed player only once on desktop. */
  body{
    padding-bottom:0;
  }
  .main{
    padding-bottom:calc(var(--player-h,92px) + 36px);
  }

  /* Slightly larger artwork in normal desktop content. */
  .recent-card{
    grid-template-columns:60px minmax(0,1fr) 64px;
  }
  .recent-card .thumb{
    width:60px;
    height:60px;
  }

  .simple-row{
    min-height:72px;
  }
  .simple-thumb{
    width:60px;
    height:60px;
    flex:0 0 60px;
  }

  .track-row{
    grid-template-columns:28px 60px minmax(0,1.4fr) minmax(110px,.8fr) 56px 28px;
  }
  .row-thumb{
    width:60px;
    height:60px;
  }

  /* Browse Trends no longer has a ranking-number column. */
  #browse-popular-list .track-row{
    grid-template-columns:60px minmax(0,1.4fr) minmax(110px,.8fr) 56px 64px;
  }
}

/* Keep the existing compact mobile artwork scale. */
@media (max-width:760px){
  #browse-popular-list .track-row{
    grid-template-columns:38px minmax(0,1fr) 64px;
  }
}


/* Full-page song lists use one desktop column-header contract.
   Compact Home lists stay headerless; mobile keeps hiding .list-head when
   secondary columns collapse. */
.live-track-table .live-track-list-head{
  column-gap:12px;
}
.browse-catalog-list-head{
  grid-template-columns:60px minmax(0,1.4fr) minmax(110px,.8fr) 56px 104px;
}
.popular-live-list-head{
  grid-template-columns:60px minmax(0,1.4fr) minmax(110px,.8fr) 72px 64px;
}
.live-track-list-head > span:nth-last-child(-n+2){
  text-align:right;
}

/* Step 20.3.8.11 — real Popular view. */
#popular-live-count{
  color:var(--muted,#8d96a5);
  font-size:9.5px;
}
#popular-live-list .popular-like-cell{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  min-width:0;
}
#popular-live-list .popular-like-count{
  color:var(--muted,#8d96a5);
  font-size:9px;
  line-height:1;
  white-space:nowrap;
}
/* Reuse exactly the same Like control as /likes. */
#popular-live-list .popular-like-toggle{
  flex:0 0 32px;
}
@media (min-width:761px){
  #popular-live-list .track-row{
    grid-template-columns:60px minmax(0,1.4fr) minmax(110px,.8fr) 72px 64px;
  }
}
@media (max-width:760px){
  #popular-live-list .track-row{
    grid-template-columns:38px minmax(0,1fr) 52px 64px;
  }
  #popular-live-list .popular-like-count{
    font-size:8.5px;
  }
}

/* Browse catalogue taxonomy: genres first, then compatible canonical tags. */
.browse-taxonomy{display:grid;gap:8px;margin:0 0 12px}
.browse-taxonomy-row{min-width:0}
.browse-taxonomy-row[hidden]{display:none!important}
.browse-taxonomy-chips{min-width:0;display:flex;flex-wrap:wrap;gap:6px;margin:0}
.browse-taxonomy-chips .chip{flex:0 0 auto}
.taxonomy-chip-count{margin-left:5px;opacity:.55;font-size:.85em}
@media (max-width:760px){
  .browse-taxonomy-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding-bottom:2px}
  .browse-taxonomy-chips::-webkit-scrollbar{display:none}
}

/* Step 17.1.4: legacy top-page refresh/close controls removed. */
.page-actions:empty,
.view-actions:empty,
.top-actions:empty,
.toolbar-actions:empty,
.content-actions:empty{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}


/* Step 19.1 — frontend account controls. */
.sidebar-account{
  display:grid;
  gap:7px;
}
.sidebar-account-tools{
  width:100%;
  display:grid;
  justify-items:center;
  gap:7px;
  min-width:0;
}
.sidebar-account-tools .lang-switcher{
  margin:0;
  display:flex;
  justify-content:center;
  gap:5px;
}
.sidebar-account-buttons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.sidebar-account-tools .sidebar-logout,
.sidebar-account-tools .sidebar-admin-link{
  width:32px;
  height:30px;
  min-height:30px;
  padding:0;
}
.sidebar-logout,
.sidebar-admin-link{
  min-height:28px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--line,#252d37);
  border-radius:8px;
  background:transparent;
  color:var(--muted,#8d96a5);
  font:inherit;
  font-size:9px;
  line-height:1;
  cursor:pointer;
}
.sidebar-logout:hover,
.sidebar-logout:focus-visible,
.sidebar-admin-link:hover,
.sidebar-admin-link:focus-visible{
  border-color:var(--line-strong,#35404d);
  background:var(--surface-2,#151b23);
  color:var(--text,#f2f4f7);
}
.sidebar-admin-link{
  text-decoration:none;
}
.sidebar-logout svg,
.sidebar-admin-link svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sidebar-logout:disabled,
.mobile-more-logout:disabled{
  opacity:.45;
  pointer-events:none;
}

/*
 * The old theme applies styles to every `.userbox span`. When a real
 * avatar loads this could override the hidden fallback layer and leave
 * its little user icon visible below the card.
 */
.userbox .account-avatar{
  display:grid !important;
  place-items:center;
  overflow:hidden !important;
  margin:0 !important;
}
.userbox .account-avatar > *{
  grid-area:1 / 1;
  margin:0 !important;
}
.userbox .account-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.userbox .account-avatar img[hidden],
.userbox .account-avatar-fallback[hidden]{
  display:none !important;
}
.userbox .account-avatar-fallback{
  width:100%;
  height:100%;
  margin:0 !important;
  align-items:center;
  justify-content:center;
}
.userbox .account-avatar-fallback:not([hidden]){
  display:grid !important;
}

.mobile-more-grid .mobile-more-logout{
  appearance:none;
  width:100%;
  min-width:0;
  min-height:52px;
  padding:9px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--line,#252d37);
  border-radius:10px;
  background:transparent;
  color:var(--soft,#c8ced7);
  font:inherit;
  font-size:10px;
  cursor:pointer;
}
.mobile-more-grid .mobile-more-logout:active{
  background:var(--surface-2,#151b23);
  color:var(--text,#f2f4f7);
}

/* Step 20 — Queue + Notifications activity center. */
.activity-center{
  overflow:hidden;
}
.activity-head{
  min-height:52px;
  padding:10px 10px 8px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--line,#252d37);
}
.activity-tabs{
  min-width:0;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:3px;
  border:1px solid var(--line,#252d37);
  border-radius:10px;
  background:rgba(255,255,255,.018);
}
.activity-tabs > button{
  min-width:0;
  min-height:29px;
  padding:0 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted,#8d96a5);
  font:inherit;
  font-size:10px !important;
  font-weight:650;
  white-space:nowrap;
  cursor:pointer;
}
.activity-tabs > button.active{
  background:var(--surface-2,#171d25);
  color:var(--text,#f2f4f7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}

.activity-close{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted,#8d96a5);
  font:inherit;
  cursor:pointer;
}
.activity-close:hover{
  background:var(--surface-2,#171d25);
  color:var(--text,#f2f4f7);
}
.activity-badge{
  min-width:16px;
  height:16px;
  padding:0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#dfe6ee;
  color:#11161c;
  font-size:9px !important;
  font-weight:800;
  line-height:1;
}
.activity-badge[hidden]{
  display:none !important;
}
.activity-panel{
  min-height:0;
}
.activity-panel[hidden]{
  display:none !important;
}
.activity-panel[data-activity-panel="queue"] .queue-head{
  padding-top:10px;
}

.notification-toolbar{
  min-height:48px;
  padding:9px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  border-bottom:1px solid var(--line,#252d37);
}
.notification-filters{
  display:flex;
  align-items:center;
  gap:3px;
}
.notification-filters button,
.notification-read-all{
  min-height:27px;
  padding:0 8px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted,#8d96a5);
  font:inherit;
  font-size:9.5px !important;
  cursor:pointer;
}
.notification-filters button.active{
  background:var(--surface-2,#171d25);
  color:var(--text,#f2f4f7);
}
.notification-read-all{
  padding-inline:6px;
  white-space:nowrap;
}
.notification-read-all:hover:not(:disabled){
  color:var(--text,#f2f4f7);
}
.notification-read-all:disabled{
  opacity:.35;
  pointer-events:none;
}
.notification-list{
  max-height:calc(100vh - var(--player-h,92px) - 104px);
  overflow:auto;
  overscroll-behavior:contain;
}
.notification-loading,
.notification-empty{
  padding:28px 14px;
  color:var(--muted,#8d96a5);
  font-size:12px !important;
  line-height:1.45 !important;
  text-align:center;
}
.activity-notification{
  position:relative;
  min-width:0;
  padding:11px 10px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:start;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.045);
  color:var(--soft,#c8ced7);
  cursor:pointer;
}
.activity-notification:hover{
  background:rgba(255,255,255,.022);
}
.activity-notification:focus{
  outline:none;
}
.activity-notification:focus-visible{
  outline:1px solid var(--line-strong,#35404d);
  outline-offset:-2px;
}
.activity-notification.is-unread::before{
  content:"";
  position:absolute;
  top:15px;
  left:3px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#dfe6ee;
  box-shadow:0 0 0 3px rgba(223,230,238,.055);
}
.activity-notification-thumb{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line,#252d37);
  border-radius:9px;
  background:var(--surface-2,#171d25);
  color:var(--muted,#8d96a5);
  font-size:11px;
}
.activity-notification-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.activity-notification-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.activity-notification-text{
  display:block;
  color:var(--soft,#c8ced7);
  font-size:12px !important;
  font-weight:650;
  line-height:1.4 !important;
}
.activity-notification.is-unread .activity-notification-text{
  color:var(--text,#f2f4f7);
}
.activity-notification-entity,
.activity-notification-message{
  display:block;
  overflow:hidden;
  color:var(--muted,#8d96a5);
  font-size:11px !important;
  line-height:1.35 !important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.activity-notification-message{
  color:#707b89;
  font-style:italic;
}
.activity-notification time{
  padding-top:1px;
  color:#626d7a;
  font-size:10px !important;
  line-height:1.3 !important;
  white-space:nowrap;
}
.activity-backdrop{
  display:none;
}
.mobile-activity-notifications{
  display:none;
}

/* Step 18 — live right queue. */
body.queue-closed{
  --queue:0px;
}
body.queue-closed .queue{
  display:none !important;
}

/* Keep the desktop activity chrome fixed while Queue/Notifications scroll
   inside their own content area. Only enable it while the active theme still
   reserves the desktop queue column. Between 761px and 1050px the theme
   collapses --queue to 0 and hides .queue; forcing display:flex there leaves
   a clipped sliver at the right edge. Mobile Queue has its own sheet rules. */
@media (min-width:1051px){
  .queue.activity-center{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-bottom:20px;
  }
  .queue.activity-center > .activity-head{
    flex:0 0 auto;
  }
  .queue.activity-center > .activity-panel{
    flex:1 1 auto;
    min-height:0;
  }
  .queue.activity-center > .activity-panel[data-activity-panel="queue"]{
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .queue.activity-center > .activity-panel[data-activity-panel="notifications"]{
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .queue.activity-center .notification-toolbar{
    flex:0 0 auto;
  }
  .queue.activity-center .notification-list{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
  }
}

.queue-item-live{
  cursor:pointer;
  user-select:none;
}
.queue-item-live:focus{
  outline:none;
}
.queue-item-live:focus-visible{
  outline:1px solid var(--soft,#c8ced7);
  outline-offset:-2px;
}
.queue-item-live:hover{
  background:rgba(255,255,255,.025);
}
.queue-item-copy{
  min-width:0;
}
.queue-item-copy b,
.queue-item-copy span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#queue-panel .queue-item-live .num{
  font-size:11px !important;
  line-height:1.25 !important;
}
#queue-panel .queue-item-live .queue-item-copy b{
  font-size:12px !important;
  font-weight:650 !important;
  line-height:1.3 !important;
}
#queue-panel .queue-item-live .queue-item-copy span{
  margin-top:2px !important;
  font-size:11px !important;
  line-height:1.3 !important;
}
#queue-panel .queue-item-live .state{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  font-size:14px !important;
  line-height:1 !important;
  color:var(--muted,#8d96a5);
}
#queue-panel .queue-item-live.is-current .state{
  color:var(--soft,#c8ced7);
}
#queue-panel .queue-item-live .queue-state-icon{
  width:13px;
  height:13px;
  display:block;
  fill:currentColor;
}
.queue .qthumb{
  overflow:hidden;
}
.queue .qthumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.queue .queue-thumb-empty{
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#344152,#171d25);
  color:var(--muted,#8d96a5);
  font-size:11px;
}
.queue-empty{
  display:none;
  padding:26px 12px;
  color:var(--muted,#8d96a5);
  font-size:12px !important;
  line-height:1.45 !important;
  text-align:center;
}
.queue-empty.active{
  display:block;
}
#queue-clear-btn:disabled{
  opacity:.35;
  pointer-events:none;
}

/* Audious feedback pill — shared by every toast() message. */
#toast.toast{
  position:fixed !important;
  z-index:180 !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:112px !important;
  width:max-content !important;
  max-width:min(520px,calc(100vw - 32px)) !important;
  min-height:34px;
  padding:8px 14px 8px 12px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:999px !important;
  background:rgba(18,23,30,.94) !important;
  color:var(--text,#f2f4f7) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.34) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:11px !important;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.01em;
  text-align:center;
  white-space:normal;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate(-50%,10px) scale(.98) !important;
  transition:
    opacity .16s ease,
    transform .18s ease,
    visibility 0s linear .18s !important;
}
#toast.toast::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--text,#f2f4f7);
  opacity:.9;
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
#toast.toast.show{
  opacity:1 !important;
  visibility:visible !important;
  transform:translate(-50%,0) scale(1) !important;
  transition:
    opacity .16s ease,
    transform .18s ease,
    visibility 0s !important;
}

/* Real volume range — one single white track. */
.player-right .volume{
  width:84px;
  flex:0 0 84px;
  height:28px;
  display:flex;
  align-items:center;
  overflow:visible;
  background:transparent !important;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.player-right .volume::before,
.player-right .volume::after,
.player-right .volume > i{
  display:none !important;
  content:none !important;
}
.player-right .volume .volume-range{
  width:100%;
  min-width:0;
  height:28px;
  margin:0;
  padding:0;
  display:block;
  appearance:none;
  -webkit-appearance:none;
  background:transparent !important;
  border:0;
  box-shadow:none;
  cursor:pointer;
}
.player-right .volume .volume-range::-webkit-slider-runnable-track{
  height:4px;
  border:0;
  border-radius:999px;
  background:#fff;
  box-shadow:none;
}
.player-right .volume .volume-range::-webkit-slider-thumb{
  width:14px;
  height:14px;
  margin-top:-5px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:none;
  -webkit-appearance:none;
}
.player-right .volume .volume-range::-moz-range-track{
  height:4px;
  border:0;
  border-radius:999px;
  background:#fff;
  box-shadow:none;
}
.player-right .volume .volume-range::-moz-range-progress{
  height:4px;
  border:0;
  border-radius:999px;
  background:#fff;
  box-shadow:none;
}
.player-right .volume .volume-range::-moz-range-thumb{
  width:14px;
  height:14px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:none;
}
#volume-toggle.is-muted{opacity:.55}

/* Keep useful player controls visible until the real mobile layout. */
@media (min-width:761px) and (max-width:1120px){
  .player{
    grid-template-columns:minmax(0,1fr) minmax(170px,1fr) auto;
  }
  .player-right{
    display:flex;
  }
  .player-right #queue-toggle{
    display:none;
  }
  .player-right .volume{
    width:64px;
    flex-basis:64px;
  }
}
/* Step 20.2 — stable player icons. */
#footer-shuffle-button,
#fs-shuffle{
  display:grid;
  place-items:center;
}
#footer-shuffle-button .shuffle-icon,
#fs-shuffle .shuffle-icon{
  width:19px;
  height:19px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#footer-shuffle-button.is-on .shuffle-icon,
#fs-shuffle.is-on .shuffle-icon{
  stroke-width:1.9;
}

.like,
.control-buttons button:not(.mainplay),
.player-right button:not(.volume-toggle){
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:9px;
  line-height:1;
}
.like{font-size:20px}
.control-buttons button:not(.mainplay),
.player-right button:not(.volume-toggle){font-size:18px}
.control-buttons .mainplay{
  width:46px;
  height:46px;
  font-size:18px;
}
.control-buttons{gap:10px}
#footer-prev-button,
#footer-next-button{font-size:21px}
#footer-shuffle-button,
#footer-repeat-button{font-size:19px}
.control-buttons .mainplay span,
#footer-prev-button,
#footer-next-button,
#footer-repeat-button,
#queue-toggle,
#fullscreen-toggle{
  line-height:1;
}
.volume-toggle{
  width:30px;
  height:30px;
}
.volume-toggle svg{
  width:17px;
  height:17px;
}
.like:hover,
.control-buttons button:hover,
.player-right button:hover{
  background:var(--surface-2,#1b2129);
  color:var(--text,#f2f4f7);
}

.fullscreen-overlay{position:fixed;z-index:140;inset:0;display:none;place-items:center;padding:24px;background:rgba(5,8,12,.88);backdrop-filter:blur(18px)}
.fullscreen-overlay.active{display:grid}
.fullscreen-bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(42px) saturate(.7);opacity:.16;transform:scale(1.1)}
.fullscreen-player-card{position:relative;z-index:1;width:min(560px,92vw);display:grid;gap:18px;padding:20px;border:1px solid var(--line-strong,#394351);border-radius:20px;background:rgba(14,18,24,.94);box-shadow:0 28px 80px rgba(0,0,0,.46)}
.fullscreen-close{position:absolute;z-index:6;right:10px;top:10px;width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text,#f2f4f7);font-size:21px;line-height:1;cursor:pointer}
.fullscreen-close:hover,.fullscreen-close:focus-visible{background:rgba(24,31,40,.72);border:0}
.fullscreen-artwork-wrap{position:relative;width:min(330px,68vw);aspect-ratio:1;margin:4px auto 0;border-radius:16px;overflow:hidden;background:var(--surface-2,#1b2129);display:grid;place-items:center}
#fullscreenArtwork{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}.fullscreen-artwork-placeholder{font-size:42px;color:var(--muted,#8d96a5)}
.fullscreen-copy{text-align:center;min-width:0}.fullscreen-copy strong,.fullscreen-copy span,.fullscreen-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fullscreen-copy strong{font-size:20px}.fullscreen-copy span{margin-top:5px;color:var(--soft,#c8ced7);font-size:12px}.fullscreen-copy small{margin-top:3px;color:var(--muted,#8d96a5);font-size:10px}
.fullscreen-timeline{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:10px;align-items:center;color:var(--muted,#8d96a5);font-size:10px}
.fullscreen-progress-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;cursor:pointer}.fullscreen-progress-bar span{display:block;width:0;height:100%;background:currentColor;border-radius:inherit}
.fullscreen-controls{display:flex;align-items:center;justify-content:center;gap:10px}.fullscreen-controls button{width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--soft,#c8ced7);font-size:18px;line-height:1;cursor:pointer}.fullscreen-controls button > span{display:block;font-size:18px;line-height:1}.fullscreen-controls #fs-shuffle .shuffle-icon{width:23px;height:23px}.fullscreen-controls .fullscreen-mainplay{width:64px;height:64px;background:var(--text,#f2f4f7);color:#11161c}.fullscreen-controls .fullscreen-mainplay > span{font-size:22px}.fullscreen-controls button.is-on:not(.fullscreen-mainplay){background:var(--surface-2,#1b2129);color:var(--text,#f2f4f7)}
@media(max-width:760px){
  /* The theme already reserves the fixed player + mobile nav inside .main.
     Do not reserve the same stack a second time on body. */
  body{padding-bottom:0 !important;}

  .mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .mobile-header .brand{
    min-width:0;
    flex:1 1 auto;
    justify-content:flex-start !important;
    margin:0 !important;
    padding-left:0 !important;
    text-align:left !important;
  }
  .mobile-header .brand-copy{
    text-align:left !important;
  }
  /* Step 20.1 — mobile player control polish. */
  .mobile-player-controls{
    gap:8px !important;
  }
  .mobile-player-controls button{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    line-height:1 !important;
    border-radius:50% !important;
  }
  #mobile-player-prev,
  #mobile-player-next{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    font-size:22px !important;
  }
  #mobile-player-like{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    font-size:22px !important;
    font-family:inherit !important;
    transform:none !important;
  }
  #mobile-player-like svg{
    width:13px !important;
    height:13px !important;
    display:block !important;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7 !important;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #mobile-player-like.is-on svg{
    fill:currentColor;
  }
  #mobile-player-play{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
  }

  .mobile-activity-notifications{
    position:relative;
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid var(--line,#252d37);
    border-radius:10px;
    background:var(--surface,#11161d);
    color:var(--soft,#c8ced7);
  }
  .mobile-activity-notifications svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mobile-activity-notifications .activity-badge{
    position:absolute;
    top:-5px;
    right:-5px;
  }

  .queue.activity-center{
    position:fixed !important;
    z-index:175 !important;
    top:0 !important;
    right:0 !important;
    bottom:calc(var(--player-h,82px) + 58px) !important;
    left:auto !important;
    width:min(92vw,360px) !important;
    display:block !important;
    background:rgba(12,16,22,.985) !important;
    border-left:1px solid var(--line,#252d37);
    box-shadow:-18px 0 48px rgba(0,0,0,.38);
    transform:translateX(0);
    transition:transform .18s ease;
  }
  body.queue-closed .queue.activity-center{
    display:block !important;
    transform:translateX(105%);
    pointer-events:none;
  }
  .activity-backdrop{
    position:fixed;
    z-index:170;
    inset:0;
    display:block;
    background:rgba(0,0,0,.46);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }
  .activity-backdrop[hidden]{
    display:none !important;
  }
  .notification-list{
    max-height:calc(100svh - var(--player-h,82px) - 210px);
  }

  #toast.toast{
    bottom:174px !important;
    max-width:calc(100vw - 28px) !important;
    min-height:32px;
    padding:7px 12px 7px 11px !important;
    font-size:10.5px !important;
  }
  .fullscreen-overlay{padding:10px}
  .fullscreen-player-card{
    padding:16px;
    touch-action:pan-y;
  }
  .fullscreen-close{
    top:8px;
    right:8px;
    width:30px;
    height:30px;
    font-size:21px;
  }
  .live-album-hero{grid-template-columns:68px minmax(0,1fr) auto}
  .live-album-hero-cover{width:68px;height:68px}
  .live-album-hero-copy strong{font-size:16px}

  /* V34 mobile player: replace the single Play/Pause button by five useful controls. */
  .player .controls{display:none}
  .player .player-right{display:none}
  .player .now .like{display:none}
  .mobile-player-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    flex:0 0 auto;
    min-width:0;
  }
  .mobile-player-controls button{
    width:28px;
    height:32px;
    padding:0;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--soft,#c8ced7);
    font:inherit;
    font-size:13px;
    line-height:1;
    cursor:pointer;
  }
  .mobile-player-controls button:active{
    background:var(--surface-2,#1b2129);
    color:var(--text,#f2f4f7);
  }
  .mobile-player-controls button:focus{
    outline:none;
  }
  .mobile-player-controls button:focus-visible{
    outline:2px solid var(--line-strong,#394351);
    outline-offset:2px;
  }
  .mobile-player-controls #mobile-player-like{
    font-size:18px;
  }
  .mobile-player-controls #mobile-player-like.is-on{
    color:var(--text,#f2f4f7);
  }
  #mobile-player-volume svg{
    width:18px !important;
    height:18px !important;
    display:block !important;
  }
  #mobile-player-volume.is-muted{
    opacity:.55;
  }
  #mobile-player-volume.is-muted .mobile-volume-wave{
    opacity:.25;
  }
  .mobile-volume-popover:not([hidden]){
    position:fixed;
    z-index:98;
    right:14px;
    bottom:140px;
    width:154px;
    min-height:46px;
    padding:7px 12px;
    display:flex;
    align-items:center;
    border:1px solid var(--line-strong,#394351);
    border-radius:12px;
    background:rgba(14,20,27,.98);
    box-shadow:0 14px 36px rgba(0,0,0,.35);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .mobile-volume-range{
    width:100%;
    height:32px;
    margin:0;
    padding:0;
    accent-color:var(--text,#f2f4f7);
    touch-action:pan-x;
  }
  .mobile-player-controls .mobile-mainplay{
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--text,#f2f4f7);
    color:#101217;
    font-size:13px;
  }
  .mobile-player-controls .mobile-mainplay span{
    display:block;
    transform:translateX(1px);
  }
  .mobile-player-controls .mobile-mainplay.is-on span{
    transform:none;
  }
}
@media(max-width:390px){
  #toast.toast{
    bottom:168px !important;
    max-width:calc(100vw - 20px) !important;
  }

  /*
   * Small-phone layout. The old V34 prototype compressed every player
   * control to 25px here, which was the last breakpoint still fighting
   * the new mobile player.
   */
  .mobile-player-controls{
    gap:3px !important;
  }
  .mobile-player-controls button{
    width:30px !important;
    height:32px !important;
    min-width:30px !important;
    min-height:32px !important;
  }
  #mobile-player-like,
  #mobile-player-prev,
  #mobile-player-next{
    width:32px !important;
    height:34px !important;
    min-width:32px !important;
    min-height:34px !important;
  }
  #mobile-player-like svg{
    width:13px !important;
    height:13px !important;
  }
  #mobile-player-prev,
  #mobile-player-next{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    font-size:21px !important;
  }
  #mobile-player-play,
  .mobile-player-controls .mobile-mainplay{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }
  #mobile-player-volume,
  #mobile-player-fullscreen{
    width:30px !important;
    height:32px !important;
    min-width:30px !important;
    min-height:32px !important;
  }
  .mobile-volume-popover:not([hidden]){
    right:10px;
    width:142px;
  }
  .player .now-cover{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
}



/* Step 20.3.8.8 — mobile Queue belongs to the player, not the notification bell. */
@media(max-width:760px){
  #mobile-player-queue svg{
    width:18px;
    height:18px;
    display:block;
  }

  /*
   * Keep the desktop Queue / Notifications switch, but on mobile expose only
   * the current surface label. The bell can therefore never reveal Queue.
   */
  .activity-tabs{
    display:flex;
    align-items:center;
    padding:0;
    border:0;
    background:transparent;
  }
  .activity-tabs > button{
    display:none;
    min-height:30px;
    padding:0 2px;
    justify-content:flex-start;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--text,#f2f4f7);
    font-size:12px !important;
    pointer-events:none;
  }
  body[data-activity-view="queue"] #activity-queue-tab,
  body[data-activity-view="notifications"] #activity-notifications-tab{
    display:flex;
  }

  .queue.activity-center{
    padding:0 !important;
  }

  /* Notifications keep the existing right-side drawer opened by the bell. */
  body[data-activity-view="notifications"] .queue.activity-center{
    top:0 !important;
    right:0 !important;
    bottom:calc(var(--player-h,82px) + 58px) !important;
    left:auto !important;
    width:min(92vw,360px) !important;
    height:auto !important;
    max-height:none !important;
    border-radius:0 !important;
    transform:translateX(0);
  }
  body.queue-closed[data-activity-view="notifications"] .queue.activity-center{
    transform:translateX(105%);
  }

  /* Queue becomes a dedicated player bottom sheet. */
  body[data-activity-view="queue"] .queue.activity-center{
    top:auto !important;
    right:8px !important;
    bottom:0 !important;
    left:8px !important;
    width:auto !important;
    height:min(72svh,620px) !important;
    max-height:min(72svh,620px) !important;
    display:flex !important;
    flex-direction:column;
    border:1px solid var(--line-strong,#394351);
    border-bottom:0;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -20px 52px rgba(0,0,0,.46);
    transform:translateY(0);
    transition:transform .2s ease;
  }
  body.queue-closed[data-activity-view="queue"] .queue.activity-center{
    transform:translateY(105%);
    pointer-events:none;
  }

  body[data-activity-view="queue"] .activity-head{
    position:relative;
    flex:0 0 auto;
    padding-top:18px;
    cursor:grab;
    touch-action:pan-x;
  }
  body[data-activity-view="queue"] .activity-head::before{
    content:"";
    position:absolute;
    top:7px;
    left:50%;
    width:38px;
    height:4px;
    border-radius:999px;
    background:var(--line-strong,#394351);
    transform:translateX(-50%);
  }
  body[data-activity-view="queue"] .activity-head:active{
    cursor:grabbing;
  }
  body[data-activity-view="queue"] .activity-panel[data-activity-panel="queue"]{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:0 12px 18px;
  }
}

@media(max-width:350px){
  .fullscreen-controls{gap:7px}
  .fullscreen-controls button{width:42px;height:42px}
  .fullscreen-controls .fullscreen-mainplay{width:58px;height:58px}
  .fullscreen-controls button > span{font-size:17px}
  .fullscreen-controls .fullscreen-mainplay > span{font-size:20px}
  .fullscreen-controls #fs-shuffle .shuffle-icon{width:21px;height:21px}

  /* Preserve track metadata on very narrow phones while keeping Queue visible. */
  #mobile-player-fullscreen{
    display:none !important;
  }
}

/* Step 20.3.8.14 — keep Recent/History date and Like actions in distinct columns. */
@media (min-width:761px){
  .view[data-view-panel="recent"] .list-head,
  .view[data-view-panel="history"] .list-head,
  #recent-live-list .simple-row,
  #history-live-list .simple-row{
    grid-template-columns:minmax(0,1.6fr) minmax(100px,.8fr) 120px 100px;
  }
  #recent-live-list .simple-row > .simple-col:nth-child(3),
  #history-live-list .simple-row > .simple-col:nth-child(3){
    white-space:nowrap;
    text-align:right;
  }
}
@media (max-width:760px){
  #recent-live-list .simple-row,
  #history-live-list .simple-row{
    grid-template-columns:minmax(0,1fr) 100px;
  }
}

/* Step 20.3.8.16 — live Artists list, detail, follow and claim workflow. */
.artist-card-badges{
  display:flex !important;
  flex-wrap:wrap;
  gap:4px;
  margin-top:7px;
  white-space:normal !important;
}
.artist-card-badge{
  display:inline-flex !important;
  width:auto;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--soft);
  font-size:8px;
  line-height:1.35;
}
.artist-card-plays{
  margin-top:5px;
  color:var(--muted);
  font-size:8.5px;
}
.artist-live-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:28px;
}
.artist-live-detail{display:grid;gap:18px}
.artist-live-detail[hidden]{display:none}
.artist-live-hero{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:20px;
  align-items:start;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
}
.artist-live-back{
  grid-column:1/-1;
  justify-self:start;
}
.artist-live-avatar{
  width:160px;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:50%;
  background:var(--surface-2);
}
.artist-live-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.artist-live-copy{min-width:0}
.artist-live-name-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.artist-live-name-row h1{
  margin:0;
  font-size:28px;
  line-height:1.1;
}
.artist-identity-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--soft);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.artist-live-bio{
  max-width:760px;
  margin:12px 0 0;
  color:var(--soft);
  font-size:12px;
  line-height:1.6;
  white-space:pre-line;
}
.artist-live-stats{
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  margin-top:14px;
  color:var(--muted);
  font-size:10px;
}
.artist-live-actions{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.artist-follow-btn.is-following{border-color:var(--line-strong);color:var(--text)}
.artist-claim-controls{display:grid;gap:8px;min-width:min(100%,360px)}
.artist-claim-state,
.artist-claim-note{
  color:var(--muted);
  font-size:11px !important;
  line-height:1.45;
}
.artist-claim-state.is-approved{color:var(--soft)}
.artist-claim-form{
  display:grid;
  gap:10px;
  width:min(520px,100%);
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
}
.artist-claim-form[hidden]{display:none}
.artist-claim-form label{display:grid;gap:5px;color:var(--muted);font-size:11px !important}
.artist-claim-form textarea,
.artist-claim-form input{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  padding:9px 10px;
  font:inherit;
  font-size:12px !important;
  line-height:1.45;
}
.artist-claim-form textarea{resize:vertical;min-height:82px}
.artist-claim-form-actions{display:flex;flex-wrap:wrap;gap:8px}
.artist-claim-toggle,
.artist-profile-edit-toggle,
.artist-claim-form-actions .view-btn{font-size:11px !important}
.artist-live-albums .content-grid{margin-top:0}
.artist-live-album-card{cursor:default}
.artist-live-track-list .list-head,
.artist-live-track-list .live-artist-track{
  grid-template-columns:minmax(0,1.6fr) minmax(100px,.8fr) 74px 100px;
}
.artist-live-track-list .live-artist-track > .simple-col:nth-child(3){
  white-space:nowrap;
  text-align:right;
}

@media (max-width:760px){
  .artist-live-hero{
    grid-template-columns:92px minmax(0,1fr);
    gap:14px;
    padding:14px;
  }
  .artist-live-avatar{width:92px}
  .artist-live-name-row h1{font-size:22px}
  .artist-live-bio{font-size:11px}
  .artist-live-actions{grid-column:1/-1}
  .artist-claim-controls{width:100%;min-width:0}
  .artist-claim-form{width:100%}
  .artist-live-track-list .live-artist-track{
    grid-template-columns:minmax(0,1fr) 100px;
  }
}

/* Step 20.3.8.17 — keep artist album artwork square like the main Albums view. */
.artist-live-album-card .media-cover{
  overflow:hidden;
}
.artist-live-album-card .media-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* Step 20.3.8.21 — canonical sharing UI for the rebuilt frontend. */
.live-share-toggle{font-size:0}
.live-share-icon{width:var(--audious-action-icon-size);height:var(--audious-action-icon-size);display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.live-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;min-width:76px}
.live-row-actions .kebab{width:var(--audious-action-play-btn-size);height:var(--audious-action-play-btn-size);display:grid;place-items:center;padding:0;border-radius:50%}
.live-row-actions .kebab .live-play-icon{width:var(--audious-action-play-icon-size);height:var(--audious-action-play-icon-size)}
.live-card-share{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border:1px solid color-mix(in srgb,var(--line,#29313b) 78%,transparent);border-radius:9px;background:color-mix(in srgb,var(--surface,#151a20) 88%,transparent);backdrop-filter:blur(8px);color:var(--soft,#c8ced7)}
.live-song-card .cover{position:relative}
.recent-card.live-song-card{grid-template-columns:auto minmax(0,1fr) 64px}

@media (min-width:761px){
  #likes-live-list .list-head,
  #likes-live-rows .simple-row{
    grid-template-columns:minmax(0,1.6fr) minmax(100px,.8fr) 74px 100px;
  }
  .live-album-detail .list-head,
  .live-album-detail .simple-row{
    grid-template-columns:minmax(0,1.6fr) minmax(100px,.8fr) 74px 64px;
  }
}
@media (max-width:760px){
  #likes-live-rows .simple-row{grid-template-columns:minmax(0,1fr) 100px}
  .live-album-detail .simple-row{grid-template-columns:minmax(0,1fr) 64px}
}

.live-share-overlay[hidden]{display:none!important}
.live-share-overlay{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:18px;background:rgba(3,5,8,.68);backdrop-filter:blur(10px)}
.live-share-panel{width:min(520px,100%);max-height:min(760px,calc(100svh - 36px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-strong,#394351);border-radius:18px;background:var(--surface,#151a20);box-shadow:0 24px 80px rgba(0,0,0,.45);color:var(--text,#f2f4f7)}
.live-share-handle{display:none}
.live-share-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 18px 12px;border-bottom:1px solid var(--line,#29313b)}
.live-share-heading{min-width:0}.live-share-heading h2{margin:3px 0 0;font-size:18px;line-height:1.15}.live-share-eyebrow{display:block;color:var(--muted,#8d96a5);font-size:9px !important;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.live-share-close{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted,#8d96a5);cursor:pointer}.live-share-close:hover{background:var(--surface-2,#1b2129);color:var(--text,#f2f4f7)}.live-share-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.live-share-scroll{min-height:0;overflow-y:auto;padding:14px 18px 8px;overscroll-behavior:contain}
.live-share-target{display:grid;grid-template-columns:54px minmax(0,1fr);gap:11px;align-items:center;padding:10px;border:1px solid var(--line,#29313b);border-radius:12px;background:var(--surface-2,#1b2129)}
.live-share-cover{width:54px;height:54px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:var(--surface,#151a20);color:var(--muted,#8d96a5);font-size:19px}.live-share-cover img{width:100%;height:100%;display:block;object-fit:cover}.live-share-target-copy{min-width:0}.live-share-target-copy strong,.live-share-target-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.live-share-target-copy strong{font-size:12px}.live-share-target-copy span{margin-top:4px;color:var(--muted,#8d96a5);font-size:11px !important}
.live-share-field{display:grid;gap:7px;margin-top:14px}.live-share-field>label,.live-share-label-row label{color:var(--soft,#c8ced7);font-size:11px !important;font-weight:600}.live-share-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.live-share-chars{color:var(--muted,#8d96a5);font-size:9.5px !important}
.live-share-search-wrap{height:38px;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:7px;padding:0 10px;border:1px solid var(--line,#29313b);border-radius:10px;background:var(--surface-2,#1b2129)}.live-share-search-wrap:focus-within{border-color:var(--line-strong,#394351)}.live-share-search-wrap svg{width:15px;height:15px;fill:none;stroke:var(--muted,#8d96a5);stroke-width:1.8;stroke-linecap:round}.live-share-search-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text,#f2f4f7);font:inherit;font-size:12px !important}.live-share-search-wrap input::placeholder{color:var(--muted,#8d96a5)}
.live-share-results{display:grid;gap:4px;max-height:190px;overflow-y:auto}.live-share-result{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 18px;gap:9px;align-items:center;padding:7px 8px;border:0;border-radius:9px;background:transparent;color:var(--text,#f2f4f7);text-align:left;cursor:pointer}.live-share-result:hover,.live-share-result:focus-visible{outline:0;background:var(--surface-2,#1b2129)}.live-share-result-avatar{width:34px;height:34px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--surface,#151a20);color:var(--soft,#c8ced7);font-size:9px}.live-share-result-avatar img{width:100%;height:100%;object-fit:cover}.live-share-result-copy{min-width:0}.live-share-result-copy strong,.live-share-result-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.live-share-result-copy strong{font-size:12px !important}.live-share-result-copy small{margin-top:2px;color:var(--muted,#8d96a5);font-size:11px !important}.live-share-result>svg{width:15px;height:15px;fill:none;stroke:var(--muted,#8d96a5);stroke-width:1.7;stroke-linecap:round}
.live-share-empty{margin:0;padding:9px 4px;color:var(--muted,#8d96a5);font-size:11px !important}.live-share-empty.is-error{color:var(--soft,#c8ced7)}
.live-share-selected{display:grid;gap:6px}.live-share-selected[hidden]{display:none}.live-share-selected-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted,#8d96a5);font-size:10px !important}.live-share-chips{display:flex;flex-wrap:wrap;gap:5px}.live-share-chip{min-height:27px;display:inline-flex;align-items:center;gap:6px;padding:0 8px;border:1px solid var(--line,#29313b);border-radius:999px;background:var(--surface-2,#1b2129);color:var(--soft,#c8ced7);font:inherit;font-size:11px !important;cursor:pointer}.live-share-chip b{font-size:12px;font-weight:400;color:var(--muted,#8d96a5)}
.live-share-timecode{margin-top:12px;display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;color:var(--soft,#c8ced7);font-size:11px !important}.live-share-timecode[hidden]{display:none}.live-share-timecode input{accent-color:var(--text,#f2f4f7)}
.live-share-field textarea{width:100%;min-height:72px;box-sizing:border-box;resize:vertical;padding:9px 10px;border:1px solid var(--line,#29313b);border-radius:10px;outline:0;background:var(--surface-2,#1b2129);color:var(--text,#f2f4f7);font:inherit;font-size:12px !important;line-height:1.5}.live-share-field textarea:focus{border-color:var(--line-strong,#394351)}.live-share-field textarea::placeholder{color:var(--muted,#8d96a5)}
.live-share-feedback{min-height:22px;padding:8px 0 2px;color:var(--muted,#8d96a5);font-size:11px !important}.live-share-feedback.is-ok{color:var(--soft,#c8ced7)}.live-share-feedback.is-error{color:#e7a4a4}
.live-share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 18px 18px;border-top:1px solid var(--line,#29313b)}.live-share-actions button{min-height:38px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line,#29313b);border-radius:10px;background:transparent;color:var(--soft,#c8ced7);font:inherit;font-size:11px !important;font-weight:600;cursor:pointer}.live-share-actions button:hover{border-color:var(--line-strong,#394351);color:var(--text,#f2f4f7)}.live-share-actions button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.live-share-actions .live-share-send{border-color:var(--text,#f2f4f7);background:var(--text,#f2f4f7);color:var(--bg,#090d12)}.live-share-actions .live-share-send:disabled{opacity:.35;cursor:default}

@media (max-width:760px){
  .live-share-overlay{place-items:end stretch;padding:0;background:rgba(3,5,8,.54);backdrop-filter:blur(7px)}
  .live-share-panel{width:100%;max-height:min(82svh,720px);border-width:1px 0 0;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .live-share-handle{display:block;width:34px;height:4px;flex:0 0 4px;margin:7px auto 0;border-radius:999px;background:var(--line-strong,#394351)}
  .live-share-head{padding:11px 15px 10px}.live-share-heading h2{font-size:16px}.live-share-scroll{padding:12px 15px 6px}.live-share-actions{padding:10px 15px 14px}.live-share-results{max-height:155px}
  .live-card-share{top:6px;right:6px;width:28px;height:28px}

  /* Keep the action glyphs exactly centered inside the large mobile cards.
     Native button padding/line-height can otherwise offset the SVGs. */
  .feature-card .play-fab,
  .feature-card .live-card-share{
    display:grid;
    place-items:center;
    padding:0;
    line-height:0;
    appearance:none;
    -webkit-appearance:none;
  }
  .feature-card .play-fab > .live-play-icon,
  .feature-card .live-card-share > .live-share-icon{
    display:block;
    margin:0;
  }
}

/* Step 20.3.8.22 — direct shared-track route in the rebuilt frontend. */
/* Step 20.3.8.23 — integrate the shared track as a compact Audious pill below taxonomy. */
.live-shared-track-section{margin:8px 0 20px}
.live-shared-track-card{width:min(620px,100%);box-sizing:border-box;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 8px;border:1px solid var(--line,#29313b);border-radius:16px;background:var(--surface,#151a20);cursor:pointer}
.live-shared-track-card:hover{border-color:var(--line-strong,#394351)}
.live-shared-track-cover{width:56px;height:56px;display:grid;place-items:center;overflow:hidden;border-radius:11px;background:var(--surface-2,#1b2129);color:var(--muted,#8d96a5)}
.live-shared-track-cover img{width:100%;height:100%;display:block;object-fit:cover}
.live-shared-track-copy{min-width:0}
.live-shared-track-copy strong,.live-shared-track-copy>span:not(.live-shared-track-badge){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-shared-track-copy strong{font-size:12px;line-height:1.2;color:var(--text,#f2f4f7)}
.live-shared-track-copy>span:not(.live-shared-track-badge){margin-top:3px;color:var(--muted,#8d96a5);font-size:11px}
.live-shared-track-badge{width:max-content;max-width:100%;display:inline-flex;align-items:center;margin:0 0 5px;padding:3px 7px;border:1px solid var(--line,#29313b);border-radius:999px;color:var(--muted,#8d96a5);font-size:7px;font-weight:700;letter-spacing:.1em;line-height:1;text-transform:uppercase}
.live-shared-track-actions{display:flex;align-items:center;align-self:center;justify-content:flex-end;gap:2px}
.live-shared-track-actions .live-like-toggle,.live-shared-track-actions .live-share-toggle{width:33px;height:33px;border-radius:9px}
.live-shared-track-actions .live-like-play{width:37px;height:37px;margin-left:1px;border-radius:50%;background:var(--text,#f2f4f7);color:var(--bg,#090d12)}
.live-shared-track-actions .live-like-play .live-play-icon{width:21px;height:21px}
.live-shared-track-card.is-current{outline:1px solid var(--line-strong,#394351);outline-offset:-1px}
.live-shared-track-card.is-playing .live-like-play{background:var(--text,#f2f4f7);color:var(--bg,#090d12)}
.live-shared-track-error{width:min(620px,100%);box-sizing:border-box;display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line,#29313b);border-radius:14px;background:var(--surface,#151a20)}
.live-shared-track-error strong{color:var(--soft,#c8ced7);font-size:10px;font-weight:500}

@media (max-width:760px){
  .live-shared-track-section{margin:7px 0 16px}
  .live-shared-track-card{width:100%;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;padding:7px}
  .live-shared-track-cover{width:52px;height:52px;border-radius:10px}
  .live-shared-track-copy strong{font-size:12px}
  .live-shared-track-copy>span:not(.live-shared-track-badge){font-size:11px}
  .live-shared-track-badge{margin-bottom:4px;padding:3px 6px;font-size:6.5px}
  .live-shared-track-actions{grid-column:auto;margin-top:0;align-self:center}
  .live-shared-track-actions .live-like-toggle,.live-shared-track-actions .live-share-toggle{width:31px;height:31px}
  .live-shared-track-actions .live-like-play{width:35px;height:35px;margin-left:1px}
  .live-shared-track-actions .live-like-play .live-play-icon{width:19px;height:19px}
}

/* Step 20.3.8.26 — live Users discovery/search/follow view. */
.live-users-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px;min-width:0}
.live-users-toolbar .chips{margin:0;min-width:0}
.live-users-section-shell{display:grid;gap:12px}
.live-users-content{display:grid;gap:22px;min-width:0}
.live-users-group{display:grid;gap:10px;min-width:0}
.live-users-section-head{margin-bottom:0}
.live-users-section-head small{color:var(--muted,#8d96a5);font-size:10px}
.live-users-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.live-user-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;min-width:0;padding:11px 12px;border:1px solid var(--line,#29313b);border-radius:12px;background:var(--surface,#151a20);cursor:pointer;transition:border-color .14s ease,background .14s ease,transform .14s ease}
.live-user-card:hover,.live-user-card:focus-visible{border-color:var(--line-strong,#394351);background:var(--surface-2,#1b2129);outline:none}
.live-user-card:active{transform:translateY(1px)}
.live-user-avatar{width:48px;height:48px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--surface-2,#1b2129);color:var(--soft,#c8ced7);font-size:12px;font-weight:700;letter-spacing:.04em}
.live-user-avatar>*{grid-area:1/1}
.live-user-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.live-user-avatar-fallback{display:grid;place-items:center;width:100%;height:100%}
.live-user-avatar-fallback[hidden]{display:none}
.live-user-copy{display:grid;gap:4px;min-width:0}
.live-user-identity{display:flex;align-items:baseline;gap:7px;min-width:0}
.live-user-identity strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text,#f2f4f7);font-size:12px;line-height:1.3}
.live-user-identity span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted,#8d96a5);font-size:11px;line-height:1.3}
.live-user-copy p{display:-webkit-box;overflow:hidden;margin:0;color:var(--soft,#c8ced7);font-size:11px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.live-user-reason{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted,#8d96a5);font-size:10px;line-height:1.3}
.live-user-follow{min-width:84px;min-height:32px;padding:0 10px;border:1px solid var(--line,#29313b);border-radius:9px;background:transparent;color:var(--soft,#c8ced7);font:inherit;font-size:11px;line-height:1;cursor:pointer;white-space:nowrap}
.live-user-follow:hover,.live-user-follow:focus-visible{border-color:var(--line-strong,#394351);background:var(--surface-2,#1b2129);color:var(--text,#f2f4f7)}
.live-user-follow.is-following{border-color:var(--line-strong,#394351);color:var(--text,#f2f4f7)}
.live-user-follow:disabled{opacity:.5;cursor:wait}
@media(max-width:760px){
  .live-users-toolbar{align-items:flex-start;flex-direction:column;gap:7px}
  .live-users-toolbar .chips{width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .live-users-toolbar .chips::-webkit-scrollbar{display:none}
  .live-users-grid{grid-template-columns:1fr}
  .live-user-card{grid-template-columns:44px minmax(0,1fr) auto;gap:9px;padding:10px}
  .live-user-avatar{width:44px;height:44px}
  .live-user-follow{min-width:72px;min-height:30px;padding:0 8px;font-size:10.5px}
  .live-user-copy p{-webkit-line-clamp:1}
}

/* Step 20.3.8.24 — real public Playlists list + /playlists/:id detail. */
.live-playlist-card{cursor:pointer}
.live-playlist-card .media-cover{position:relative;overflow:hidden}
.live-playlist-card .media-cover img{width:100%;height:100%;display:block;object-fit:cover}
.live-playlist-open{position:absolute;right:8px;bottom:8px;width:30px;height:30px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--line,#29313b) 75%,transparent);border-radius:50%;background:color-mix(in srgb,var(--surface,#151a20) 90%,transparent);backdrop-filter:blur(8px);color:var(--soft,#c8ced7);font-size:14px;transition:transform .16s ease,border-color .16s ease}
.live-playlist-card:hover .live-playlist-open{transform:translateX(2px);border-color:var(--line-strong,#394351);color:var(--text,#f2f4f7)}
.live-playlist-card-meta{min-width:0;gap:8px}
.live-playlist-card-meta>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-playlist-card-meta>span:last-child{flex:0 0 auto;white-space:nowrap}
.live-playlist-detail{display:grid;gap:18px}
.live-playlist-detail[hidden]{display:none}
.live-playlist-hero{display:grid;grid-template-columns:156px minmax(0,1fr);gap:20px;align-items:start;padding:18px;border:1px solid var(--line,#29313b);border-radius:16px;background:var(--surface,#151a20)}
.live-playlist-back{grid-column:1/-1;justify-self:start}
.live-playlist-hero-cover{width:156px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:var(--surface-2,#1b2129);color:var(--muted,#8d96a5);font-size:30px}
.live-playlist-hero-cover img{width:100%;height:100%;display:block;object-fit:cover}
.live-playlist-hero-copy{min-width:0}
.live-playlist-eyebrow{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border:1px solid var(--line,#29313b);border-radius:999px;color:var(--muted,#8d96a5);font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.live-playlist-hero-copy h1{margin:10px 0 0;font-size:28px;line-height:1.1;color:var(--text,#f2f4f7)}
.live-playlist-owner{margin:7px 0 0;color:var(--soft,#c8ced7);font-size:10px}
.live-playlist-description{max-width:760px;margin:11px 0 0;color:var(--muted,#8d96a5);font-size:11px;line-height:1.55;white-space:pre-line}
.live-playlist-stats{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;margin-top:13px;color:var(--muted,#8d96a5);font-size:9.5px}
.live-playlist-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:15px}
.live-playlist-actions .view-btn{display:inline-flex;align-items:center;gap:7px}
.live-playlist-actions .live-play-icon{width:17px;height:17px}
.live-playlist-actions .live-share-icon{width:16px;height:16px}
.live-playlist-track-list .list-head,
.live-playlist-track-list .live-playlist-track{grid-template-columns:minmax(0,1.7fr) 54px 74px 100px}
.live-playlist-track{cursor:pointer}
.live-playlist-track.is-current{outline:1px solid var(--line-strong,#394351);outline-offset:-1px}
.live-playlist-position,.live-playlist-duration{white-space:nowrap;text-align:right}
.live-playlist-detail-error{display:grid;gap:12px}
.live-playlist-detail-error .view-btn{justify-self:start}

@media (max-width:760px){
  .live-playlist-hero{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding:13px 13px 15px;
  }
  .live-playlist-back{
    grid-column:1;
    justify-self:start;
    margin-bottom:14px;
  }
  .live-playlist-hero-cover{
    grid-column:1;
    width:124px;
    justify-self:center;
    border-radius:14px;
    font-size:28px;
  }
  .live-playlist-hero-copy{
    grid-column:1;
    width:100%;
    margin-top:13px;
    text-align:center;
  }
  .live-playlist-hero-copy h1{
    margin-top:8px;
    font-size:24px;
    line-height:1.08;
  }
  .live-playlist-owner{
    margin-top:6px;
    font-size:9.5px;
  }
  .live-playlist-description{
    grid-column:auto;
    width:min(100%,430px);
    margin:12px auto 0;
    text-align:left;
    font-size:10px;
  }
  .live-playlist-stats{
    justify-content:center;
    margin-top:10px;
    font-size:9px;
  }
  .live-playlist-actions{
    grid-column:auto;
    width:min(100%,360px);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
    margin:14px auto 0;
  }
  .live-playlist-actions .view-btn{
    width:100%;
    min-height:40px;
    justify-content:center;
  }
  .live-playlist-track-list .live-playlist-track{
    grid-template-columns:minmax(0,1fr) 100px;
  }
  .live-playlist-track-list .live-playlist-position,
  .live-playlist-track-list .live-playlist-duration{
    display:none;
  }
}

@media (max-width:390px){
  .live-playlist-hero-cover{width:108px}
  .live-playlist-hero-copy h1{font-size:22px}
  .live-playlist-actions{width:100%}
}

/* Step 20.3.8.29 — live authenticated My Playlists list, detail and management. */
.live-my-playlists-grid{align-items:start}
.live-my-playlist-card{cursor:pointer}
.live-my-playlist-card .media-cover{position:relative;overflow:hidden}
.live-my-playlist-card .media-cover img{width:100%;height:100%;display:block;object-fit:cover}
.live-my-playlist-card:hover .live-playlist-open{transform:translateX(2px);border-color:var(--line-strong,#394351);color:var(--text,#f2f4f7)}
.live-my-playlist-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.live-my-playlist-visibility{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border:1px solid var(--line,#29313b);border-radius:999px;color:var(--muted,#8d96a5);font-size:9.5px;line-height:1}
.live-my-playlist-visibility.is-public{color:var(--soft,#c8ced7);border-color:var(--line-strong,#394351)}
.live-my-playlist-card-edit{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border:0;border-radius:50%;background:transparent;color:var(--muted,#8d96a5);font:inherit;font-size:16px;cursor:pointer}
.live-my-playlist-card-edit:hover{background:var(--surface-2,#1b2129);color:var(--text,#f2f4f7)}
.live-my-playlist-card-description{display:-webkit-box;margin:7px 0 0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--muted,#8d96a5);font-size:11px;line-height:1.4}
.live-my-playlists-empty{grid-column:1/-1}
.live-my-playlist-track-list .list-head,
.live-my-playlist-track-list .live-my-playlist-track{grid-template-columns:minmax(0,1.7fr) 54px 74px 132px}
.live-my-playlist-track-actions{gap:4px}
.live-my-playlist-remove{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted,#8d96a5);font:inherit;font-size:16px;cursor:pointer}
.live-my-playlist-remove:hover{background:var(--surface-2,#1b2129);color:var(--danger,#e06b72)}
.live-my-playlist-cover-fields{grid-template-columns:minmax(0,1fr)}
.live-my-playlist-cover-field{max-width:360px}
.live-my-playlist-cover-field .live-profile-image-preview.is-banner{height:120px}
.live-my-playlist-cover-field small{color:var(--muted,#8d96a5);font-size:10px}
.live-my-playlist-editor .live-profile-form-grid select{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line,#29313b);
  border-radius:10px;
  background:var(--surface-2,#1b2129);
  color:var(--text,#f2f4f7);
  padding:9px 10px;
  font:inherit;
  font-size:12px;
}
.live-my-playlist-form-actions{align-items:center}
.live-my-playlist-form-spacer{flex:1 1 auto}
.live-my-playlist-delete{color:var(--danger,#e06b72)}
.live-my-playlist-editor .live-profile-form-feedback.is-error{color:var(--danger,#e06b72);border-color:color-mix(in srgb,var(--danger,#e06b72) 55%,var(--line,#29313b))}

@media (max-width:760px){
  .live-my-playlist-track-list .live-my-playlist-track{grid-template-columns:minmax(0,1fr) 126px}
  .live-my-playlist-card-description{font-size:10.5px}
  .live-my-playlist-form-actions{flex-wrap:wrap}
  .live-my-playlist-form-spacer{display:none}
  .live-my-playlist-delete{margin-right:auto}
}

@media (max-width:430px){
  .live-my-playlist-track-list .live-my-playlist-track{grid-template-columns:minmax(0,1fr) 116px}
  .live-my-playlist-track-actions{gap:1px}
  .live-my-playlist-track-actions button{width:30px;height:30px}
}

/* Step 20.3.8.25 — live multi-file Upload view. */
.live-upload{
  display:grid;
  gap:16px;
}
.live-upload-access{
  padding:16px;
  border:1px solid var(--line,#29313b);
  border-radius:14px;
  background:var(--surface,#151a20);
  color:var(--soft,#c8ced7);
  font-size:12px;
}
.live-upload-drop{
  min-height:230px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:9px;
  padding:28px;
  border:1px dashed var(--line-strong,#394351);
  border-radius:18px;
  background:var(--surface,#151a20);
  text-align:center;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.live-upload-drop:hover,
.live-upload-drop:focus-visible,
.live-upload-drop.is-dragging{
  border-color:var(--soft,#c8ced7);
  background:var(--surface-2,#1b2129);
  outline:none;
}
.live-upload-drop.is-dragging{transform:translateY(-1px)}
.live-upload-drop.is-disabled{cursor:default;opacity:.58}
.live-upload-drop[hidden]{display:none}
.live-upload-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid var(--line,#29313b);
  border-radius:14px;
  color:var(--soft,#c8ced7);
  font-size:24px;
  line-height:1;
}
.live-upload-drop > strong{font-size:16px;color:var(--text,#f2f4f7)}
.live-upload-drop > span{max-width:560px;color:var(--muted,#8d96a5);font-size:11px;line-height:1.5}
.live-upload-drop > small{color:var(--muted,#8d96a5);font-size:9.5px}
.live-upload-drop .view-btn{margin-top:4px}
.live-upload-queue{
  overflow:hidden;
  border:1px solid var(--line,#29313b);
  border-radius:16px;
  background:var(--surface,#151a20);
}
.live-upload-queue[hidden]{display:none}
.live-upload-queue-head,
.live-upload-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
}
.live-upload-queue-head{border-bottom:1px solid var(--line,#29313b)}
.live-upload-footer{border-top:1px solid var(--line,#29313b)}
.live-upload-queue-head > div{display:flex;align-items:center;gap:6px;min-width:0}
.live-upload-queue-head strong{font-size:12px;color:var(--text,#f2f4f7)}
.live-upload-queue-head span,
.live-upload-summary{color:var(--muted,#8d96a5);font-size:10px}
.live-upload-list{display:grid}
.live-upload-row{
  min-width:0;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) minmax(150px,.55fr) 30px;
  gap:11px;
  align-items:center;
  padding:11px 14px;
  border-bottom:1px solid var(--line,#29313b);
}
.live-upload-row:last-child{border-bottom:0}
.live-upload-file-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--surface-2,#1b2129);
  color:var(--muted,#8d96a5);
  font-size:15px;
}
.live-upload-file-copy{min-width:0}
.live-upload-file-copy strong,
.live-upload-file-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-upload-file-copy strong{color:var(--text,#f2f4f7);font-size:12px;line-height:1.3}
.live-upload-file-copy span{margin-top:2px;color:var(--muted,#8d96a5);font-size:11px}
.live-upload-progress{
  height:3px;
  margin-top:8px;
  overflow:hidden;
  border-radius:999px;
  background:var(--surface-2,#1b2129);
}
.live-upload-progress > span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--soft,#c8ced7);
  transition:width .12s linear;
}
.live-upload-state{min-width:0;text-align:right}
.live-upload-state strong,
.live-upload-state span{display:block}
.live-upload-state strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--soft,#c8ced7);font-size:11px;font-weight:600}
.live-upload-state span{margin-top:3px;color:var(--muted,#8d96a5);font-size:9.5px}
.live-upload-row.is-queued .live-upload-progress > span,
.live-upload-row.is-restored .live-upload-progress > span{background:var(--text,#f2f4f7)}
.live-upload-row.is-skipped{opacity:.72}
.live-upload-row.is-error .live-upload-state strong{color:var(--text,#f2f4f7)}
.live-upload-row.is-error .live-upload-progress > span{background:var(--muted,#8d96a5)}
.live-upload-remove{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted,#8d96a5);
  font:inherit;
  font-size:17px;
  cursor:pointer;
}
.live-upload-remove:hover:not(:disabled){background:var(--surface-2,#1b2129);color:var(--text,#f2f4f7)}
.live-upload-remove:disabled{opacity:.35;cursor:default}
.live-upload-footer .view-btn{min-width:116px;justify-content:center}

@media(max-width:760px){
  .live-upload{gap:12px}
  .live-upload-drop{min-height:190px;padding:22px 16px;border-radius:15px}
  .live-upload-icon{width:44px;height:44px;font-size:22px}
  .live-upload-drop > strong{font-size:15px}
  .live-upload-drop > span{font-size:11px}
  .live-upload-row{
    grid-template-columns:34px minmax(0,1fr) 28px;
    gap:9px;
    padding:11px 12px;
  }
  .live-upload-file-icon{width:34px;height:34px}
  .live-upload-state{
    grid-column:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    text-align:left;
  }
  .live-upload-state strong{white-space:normal;font-size:11px}
  .live-upload-state span{margin:0;flex:0 0 auto}
  .live-upload-remove{grid-column:3;grid-row:1/3;align-self:center}
  .live-upload-footer{align-items:stretch;flex-direction:column}
  .live-upload-summary{min-height:14px}
  .live-upload-footer .view-btn{width:100%;min-height:40px}
}

/* Step 20.3.8.27 — live self profile. */
.live-profile{
  display:grid;
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.live-profile-card,
.live-profile-main{
  min-width:0;
  border:1px solid var(--line,#29313b);
  border-radius:16px;
  background:var(--surface,#151a20);
  overflow:hidden;
}
.live-profile-banner{
  position:relative;
  height:116px;
  overflow:hidden;
  background:var(--surface-2,#1b2129);
}
.live-profile-banner img,
.live-profile-banner-fallback{
  width:100%;height:100%;display:block;object-fit:cover;
}
.live-profile-banner-fallback{
  background:linear-gradient(145deg,var(--surface-2,#1b2129),var(--surface,#151a20));
}
.live-profile-identity{
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:0 16px;
  margin-top:-34px;
  position:relative;
  z-index:1;
}
.live-profile-avatar{
  width:72px;height:72px;flex:0 0 72px;
  display:grid;place-items:center;
  overflow:hidden;
  border:4px solid var(--surface,#151a20);
  border-radius:50%;
  background:var(--surface-2,#1b2129);
}
.live-profile-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.live-profile-avatar-fallback{
  width:100%;height:100%;display:grid;place-items:center;
  color:var(--soft,#c8ced7);font-size:18px;font-weight:700;
}
.live-profile-name{min-width:0;padding-bottom:4px}
.live-profile-name h2{margin:0;color:var(--text,#f2f4f7);font-size:17px;line-height:1.15}
.live-profile-name span{display:block;margin-top:3px;color:var(--muted,#8d96a5);font-size:11px}
.live-profile-name small{display:block;margin-top:4px;color:var(--muted,#8d96a5);font-size:10px}
.live-profile-bio{
  margin:14px 16px 0;
  color:var(--soft,#c8ced7);
  font-size:12px;
  line-height:1.5;
  white-space:pre-line;
}
.live-profile-bio.is-empty{color:var(--muted,#8d96a5)}
.live-profile-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin-top:16px;
  border-top:1px solid var(--line,#29313b);
  background:var(--line,#29313b);
}
.live-profile-stats > div{
  min-width:0;
  padding:11px 12px;
  background:var(--surface,#151a20);
}
.live-profile-stats strong{display:block;color:var(--text,#f2f4f7);font-size:13px}
.live-profile-stats span{display:block;margin-top:2px;color:var(--muted,#8d96a5);font-size:10px}
.live-profile-main{padding:14px}
.live-profile-main .profile-tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding-bottom:12px;
  border-bottom:1px solid var(--line,#29313b);
}
.live-profile-main .profile-tabs button{
  flex:0 0 auto;
  border:1px solid var(--line,#29313b);
  border-radius:999px;
  background:transparent;
  color:var(--muted,#8d96a5);
  padding:7px 10px;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
.live-profile-main .profile-tabs button.active{
  background:var(--surface-2,#1b2129);
  color:var(--text,#f2f4f7);
  border-color:var(--line-strong,#394351);
}
.live-profile-content{padding-top:14px;min-height:220px}
.live-profile-playlists{margin-top:0}
.live-profile-playlist .media-body b{font-size:12px}
.live-profile-playlist .media-body > span,
.live-profile-playlist .media-meta{font-size:11px}
.live-profile-song-list .live-profile-song{grid-template-columns:minmax(0,1fr) minmax(120px,.6fr) 72px auto}
.live-profile-artists{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

.live-profile-modal[hidden]{display:none}
.live-profile-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:18px;
}
.live-profile-modal-backdrop{position:absolute;inset:0;background:rgba(5,8,12,.76);backdrop-filter:blur(3px)}
.live-profile-dialog{
  position:relative;
  z-index:1;
  width:min(720px,100%);
  max-height:min(86vh,860px);
  overflow:auto;
  border:1px solid var(--line-strong,#394351);
  border-radius:18px;
  background:var(--surface,#151a20);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.live-profile-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px;
  border-bottom:1px solid var(--line,#29313b);
}
.live-profile-dialog-kicker{display:block;color:var(--muted,#8d96a5);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.live-profile-dialog-head h2{margin:4px 0 0;color:var(--text,#f2f4f7);font-size:18px}
.live-profile-dialog-head p{margin:5px 0 0;color:var(--muted,#8d96a5);font-size:11px}
.live-profile-form{padding:18px}
.live-profile-image-fields{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px}
.live-profile-image-field{display:grid;gap:7px;color:var(--soft,#c8ced7);font-size:11px}
.live-profile-image-preview{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line,#29313b);
  border-radius:12px;
  background:var(--surface-2,#1b2129);
  color:var(--muted,#8d96a5);
}
.live-profile-image-preview.is-avatar{width:88px;height:88px;border-radius:50%}
.live-profile-image-preview.is-banner{width:100%;height:88px}
.live-profile-image-preview img{width:100%;height:100%;display:block;object-fit:cover}
.live-profile-image-field input[type=file]{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid var(--line,#29313b);
  border-radius:10px;
  background:var(--surface-2,#1b2129);
  color:var(--muted,#8d96a5);
  padding:5px;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
.live-profile-image-field input[type=file]::file-selector-button{
  margin-right:8px;
  border:0;
  border-radius:7px;
  background:var(--surface-3,#232b35);
  color:var(--text,#f2f4f7);
  padding:7px 9px;
  font:inherit;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
}
.live-profile-image-field input[type=file]::file-selector-button:hover{background:var(--line-strong,#394351)}
.live-profile-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  margin-top:18px;
}
.live-profile-form-grid label{display:grid;gap:6px;min-width:0;color:var(--soft,#c8ced7);font-size:11px}
.live-profile-form-grid label.is-wide{grid-column:1/-1}
.live-profile-form-grid input,
.live-profile-form-grid textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line,#29313b);
  border-radius:10px;
  background:var(--surface-2,#1b2129);
  color:var(--text,#f2f4f7);
  padding:9px 10px;
  font:inherit;
  font-size:12px;
}
.live-profile-form-grid textarea{resize:vertical;min-height:92px}
.live-profile-form-grid small{color:var(--muted,#8d96a5);font-size:10px}
.live-profile-form-feedback{
  margin-top:14px;
  padding:10px 11px;
  border:1px solid var(--line,#29313b);
  border-radius:10px;
  color:var(--soft,#c8ced7);
  font-size:11px;
}
.live-profile-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

@media(max-width:900px){
  .live-profile{grid-template-columns:1fr}
  .live-profile-card{max-width:none}
}

@media(max-width:760px){
  .live-profile{gap:12px}
  .live-profile-card,.live-profile-main{border-radius:14px}
  .live-profile-banner{height:102px}
  .live-profile-identity{margin-top:-30px;padding:0 14px}
  .live-profile-avatar{width:64px;height:64px;flex-basis:64px}
  .live-profile-name h2{font-size:16px}
  .live-profile-bio{margin:12px 14px 0;font-size:12px}
  .live-profile-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .live-profile-stats > div{padding:10px 7px;text-align:center}
  .live-profile-stats span{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .live-profile-main{padding:12px}
  .live-profile-main .profile-tabs{margin:0 -2px;padding-bottom:10px}
  .live-profile-main .profile-tabs button{font-size:11px;padding:7px 9px}
  .live-profile-song-list .list-head{display:none}
  .live-profile-song-list .live-profile-song{grid-template-columns:minmax(0,1fr) auto}
  .live-profile-song-list .live-profile-song > .simple-col{display:none}
  .live-profile-modal{padding:0;place-items:end center}
  .live-profile-dialog{width:100%;max-height:92vh;border-radius:18px 18px 0 0}
  .live-profile-dialog-head{padding:16px}
  .live-profile-form{padding:16px}
  .live-profile-image-fields{grid-template-columns:1fr 1fr}
  .live-profile-image-preview.is-banner{height:82px}
  .live-profile-form-grid{grid-template-columns:1fr}
  .live-profile-form-grid label.is-wide{grid-column:auto}
  .live-profile-form-actions{position:sticky;bottom:-16px;margin:18px -16px -16px;padding:12px 16px;background:var(--surface,#151a20);border-top:1px solid var(--line,#29313b)}
  .live-profile-form-actions .view-btn{min-height:40px;flex:1;justify-content:center}
}

/* Step 20.3.8.30 — integrated Audious Radio. */
.live-radio-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.live-radio-card{
  min-width:0;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:14px;border:1px solid var(--line,#29313b);border-radius:14px;background:var(--surface,#151a20);
  cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.live-radio-card:hover,.live-radio-card:focus-visible{border-color:var(--line-strong,#394351);background:var(--surface-2,#1b2129);outline:0}
.live-radio-card:active{transform:translateY(1px)}
.live-radio-card.is-current{border-color:var(--line-strong,#394351)}
.live-radio-card.is-playing{box-shadow:inset 3px 0 0 var(--text,#f2f4f7)}
.live-radio-card-mark{width:48px;height:48px;display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:11px;border-radius:12px;background:var(--surface-2,#1b2129);border:1px solid var(--line,#29313b)}
.live-radio-card-mark span{display:block;width:4px;border-radius:3px;background:currentColor;color:var(--soft,#c8ced7)}
.live-radio-card-mark span:nth-child(1){height:13px}.live-radio-card-mark span:nth-child(2){height:24px}.live-radio-card-mark span:nth-child(3){height:17px}
.live-radio-card.is-playing .live-radio-card-mark span{animation:live-radio-bars 1.05s ease-in-out infinite}
.live-radio-card.is-playing .live-radio-card-mark span:nth-child(2){animation-delay:-.35s}.live-radio-card.is-playing .live-radio-card-mark span:nth-child(3){animation-delay:-.7s}
@keyframes live-radio-bars{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.live-radio-card-copy{min-width:0}.live-radio-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.live-radio-card-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text,#f2f4f7);font-size:13px}
.live-radio-card-copy p{margin:5px 0 0;color:var(--soft,#c8ced7);font-size:11px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.live-radio-card-copy small{display:block;margin-top:7px;color:var(--muted,#8d96a5);font-size:9.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-radio-status{flex:0 0 auto;color:var(--muted,#8d96a5);font-size:9px;font-weight:700;letter-spacing:.04em}.live-radio-status.is-live{color:var(--text,#f2f4f7)}
.live-radio-card-play{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line,#29313b);border-radius:50%;background:transparent;color:var(--text,#f2f4f7);cursor:pointer}
.live-radio-card-play:hover{background:var(--surface-3,#232b35)}.live-radio-card-play .live-play-icon{width:17px;height:17px;fill:currentColor}
.live-radio-detail-shell{display:grid;gap:16px}.live-radio-detail-shell .live-back-btn{justify-self:start}
.live-radio-hero{display:grid;grid-template-columns:minmax(180px,280px) minmax(0,1fr);gap:24px;align-items:center;padding:20px;border:1px solid var(--line,#29313b);border-radius:16px;background:var(--surface,#151a20)}
.live-radio-hero-art{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line,#29313b);border-radius:16px;background:linear-gradient(145deg,var(--surface-2,#1b2129),var(--surface,#151a20))}
.live-radio-wave{height:70px;display:flex;align-items:center;gap:7px}.live-radio-wave i{display:block;width:7px;height:28%;border-radius:6px;background:var(--soft,#c8ced7)}
.live-radio-wave i:nth-child(2){height:68%}.live-radio-wave i:nth-child(3){height:100%}.live-radio-wave i:nth-child(4){height:54%}.live-radio-wave i:nth-child(5){height:82%}
.live-radio-kicker{display:block;color:var(--muted,#8d96a5);font-size:9.5px;font-weight:700;letter-spacing:.09em}.live-radio-hero-copy h1{margin:7px 0 0;font-size:clamp(26px,4vw,42px);letter-spacing:-.04em}.live-radio-hero-copy>p{max-width:620px;margin:10px 0 0;color:var(--soft,#c8ced7);font-size:12px;line-height:1.5}
.live-radio-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.live-radio-meta span{padding:5px 8px;border:1px solid var(--line,#29313b);border-radius:999px;color:var(--muted,#8d96a5);font-size:9.5px}
.live-radio-hero-actions{display:flex;gap:8px;margin-top:18px}.live-radio-listen{display:inline-flex;align-items:center;gap:7px}.live-radio-listen .live-play-icon{width:16px;height:16px;fill:currentColor}
.live-radio-now-panel{padding:16px;border:1px solid var(--line,#29313b);border-radius:16px;background:var(--surface,#151a20)}
.live-radio-now-panel .section-head{margin-bottom:12px}.live-radio-live-dot{font-size:9.5px;font-weight:700;color:var(--muted,#8d96a5);letter-spacing:.05em}.live-radio-live-dot.is-live{color:var(--text,#f2f4f7)}
.live-radio-now-row{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;background:var(--surface-2,#1b2129)}.live-radio-now-thumb{display:grid;place-items:center;color:var(--soft,#c8ced7)}
.live-radio-now-row .simple-copy b{font-size:12px}.live-radio-now-row .simple-copy span{font-size:10px}
.player button:disabled,.mobile-player-controls button:disabled{opacity:.28;cursor:not-allowed}


/* Live radio exposes only controls that have a real meaning for a stream.
 * Keep Play/Pause, volume and Queue visible; hide on-demand-only actions and
 * the seek timeline until playback returns to a catalog track. */
.player.is-radio-mode #footer-like-button,
.player.is-radio-mode #footer-shuffle-button,
.player.is-radio-mode #footer-prev-button,
.player.is-radio-mode #footer-next-button,
.player.is-radio-mode #footer-repeat-button,
.player.is-radio-mode #fullscreen-toggle,
.player.is-radio-mode .progress-wrap,
.player.is-radio-mode #mobile-player-like,
.player.is-radio-mode #mobile-player-prev,
.player.is-radio-mode #mobile-player-next,
.player.is-radio-mode #mobile-player-fullscreen{
  display:none!important;
}
.player.is-radio-mode .controls{
  max-width:96px;
}
.player.is-radio-mode .control-buttons{
  gap:0;
}

@media(max-width:760px){
  .player.is-radio-mode .mobile-player-controls{
    justify-content:center!important;
    gap:14px!important;
  }
}

@media(max-width:760px){
  .live-radio-grid{grid-template-columns:1fr}.live-radio-card{grid-template-columns:42px minmax(0,1fr) auto;padding:11px;gap:10px}.live-radio-card-mark{width:42px;height:42px;padding:9px}.live-radio-card-copy p{font-size:10.5px}
  .live-radio-hero{grid-template-columns:1fr;padding:14px;gap:15px}.live-radio-hero-art{width:min(62vw,220px);justify-self:center}.live-radio-hero-copy{text-align:center}.live-radio-meta,.live-radio-hero-actions{justify-content:center}.live-radio-hero-copy>p{font-size:11px}
  .live-radio-now-panel{padding:12px}.live-radio-now-panel .section-head{align-items:flex-start;gap:8px}.live-radio-now-panel .section-head p{font-size:10px}
}

@media(prefers-reduced-motion:reduce){.live-radio-card.is-playing .live-radio-card-mark span{animation:none}}

/* Step 20.3.8.26 — comfortable mobile player touch targets.
 * Keep track metadata on its own row so transport controls can use a real
 * 44px minimum touch target instead of being compressed beside the title.
 */
@media(max-width:760px){
  :root{
    --player-h:112px;
  }

  .main{
    padding-bottom:calc(var(--player-h,112px) + 78px) !important;
  }

  .player{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    min-height:var(--player-h,112px) !important;
    padding:6px !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:40px 52px !important;
    gap:4px !important;
    align-items:center !important;
  }

  .player .now{
    width:100%;
    min-width:0;
    gap:8px;
  }

  .player .now-cover{
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
  }

  .mobile-player-controls{
    width:100%;
    min-width:0;
    justify-content:space-between !important;
    gap:3px !important;
  }

  .mobile-player-controls button,
  #mobile-player-like,
  #mobile-player-prev,
  #mobile-player-next,
  #mobile-player-volume,
  #mobile-player-queue,
  #mobile-player-fullscreen{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:50% !important;
  }

  #mobile-player-prev,
  #mobile-player-next{
    font-size:24px !important;
  }

  #mobile-player-like svg,
  #mobile-player-volume svg,
  #mobile-player-queue svg{
    width:22px !important;
    height:22px !important;
  }

  #mobile-player-fullscreen{
    font-size:24px !important;
  }

  #mobile-player-play,
  .mobile-player-controls .mobile-mainplay{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    font-size:18px !important;
  }

  .mobile-player-controls .mobile-mainplay span{
    font-size:18px !important;
  }

  .mobile-volume-popover:not([hidden]){
    bottom:calc(var(--player-h,112px) + 68px) !important;
  }

  #toast.toast{
    bottom:calc(var(--player-h,112px) + 72px) !important;
  }
}

@media(max-width:350px){
  /* Fullscreen remains hidden on very narrow phones; the six essential
     controls still retain comfortable touch targets. */
  #mobile-player-fullscreen{
    display:none !important;
  }
}

/* Home/Browse split: taxonomy belongs to the full catalogue only. */
#browse-catalog-count{color:var(--muted,#8d96a5);font-size:10px}
.browse-catalog-sentinel,.live-track-sentinel{min-height:48px;display:grid;place-items:center;color:var(--muted,#8d96a5);font-size:10px}
.browse-catalog-sentinel:empty,.live-track-sentinel:empty{min-height:24px}
#browse-catalog-status:empty,#popular-live-status:empty,#history-live-status:empty,#likes-live-status:empty{display:none}
@media (max-width:760px){
  #browse-catalog-list .track-row{grid-template-columns:38px minmax(0,1fr) 64px}
  #browse-catalog-list .track-row .album,
  #browse-catalog-list .track-row .duration{display:none}
}

/* Browse catalogue actions — canonical three-button action group. */
#browse-catalog-list .track-row{
  grid-template-columns:60px minmax(0,1.4fr) minmax(110px,.8fr) 56px 104px !important;
}
#browse-catalog-list .browse-catalog-actions{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  width:104px;
  min-width:104px;
  overflow:visible !important;
}
#browse-catalog-list .browse-catalog-actions > button{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  flex:0 0 32px;
  width:32px;
  height:32px;
  padding:0;
}
#browse-catalog-list .browse-catalog-actions svg{
  display:block !important;
}
@media (max-width:760px){
  #browse-catalog-list .track-row{
    grid-template-columns:38px minmax(0,1fr) 104px !important;
  }
  #browse-catalog-list .track-row .album,
  #browse-catalog-list .track-row .duration{
    display:none;
  }
}

.browse-catalog-head{
  justify-content:flex-end;
  min-height:0;
  margin-bottom:8px;
}

#browse-catalog-list .track-row{
  column-gap:12px;
}

#browse-catalog-list .songtitle{
  min-width:0;
  overflow:hidden;
}

#browse-catalog-list .songtitle b,
#browse-catalog-list .songtitle span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* End Browse catalogue actions. */

/* Step 20.3.8.31 — contextual live-radio queue and return-to-radio control. */
.radio-return-button{
  flex:0 1 auto;
  min-width:0;
  max-width:150px;
  height:30px;
  padding:0 9px;
  overflow:hidden;
  border:1px solid var(--line,#29313b);
  border-radius:999px;
  background:var(--surface-2,#1b2129);
  color:var(--soft,#c8ced7);
  font-size:10px;
  font-weight:650;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
}
.radio-return-button:hover,
.radio-return-button:focus-visible{
  border-color:var(--line-strong,#394351);
  color:var(--text,#f2f4f7);
  outline:0;
}
.radio-return-button[hidden]{display:none!important}

#queue-panel .queue-radio-section-label{
  padding:10px 10px 6px;
  color:var(--muted,#8d96a5);
  font-size:9px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#queue-panel .queue-radio-recent-label{padding-top:16px}
#queue-panel .queue-item-radio-now{
  display:grid;
  grid-template-columns:28px 44px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:60px;
  padding:8px 10px;
  border:1px solid var(--line,#29313b);
  border-radius:11px;
  background:var(--surface-2,#1b2129);
}
#queue-panel .queue-item-radio-now .state{
  color:var(--text,#f2f4f7);
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
}
#queue-panel .queue-live-dot{font-size:9px;color:var(--text,#f2f4f7)}
#queue-panel .queue-item-radio-history{
  grid-template-columns:34px 38px minmax(0,1fr) 20px;
  column-gap:8px;
}
#queue-panel .queue-item-radio-history .num{
  width:34px;
  min-width:34px;
  overflow:visible;
  font-size:9px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#queue-panel .queue-item-radio-history .queue-radio-play{
  color:var(--soft,#c8ced7);
}
#queue-panel .queue-item-radio-history:hover .queue-radio-play{
  color:var(--text,#f2f4f7);
}
#queue-panel .queue-radio-empty{
  padding:14px 10px;
  color:var(--muted,#8d96a5);
  font-size:10px;
  line-height:1.45;
}
#queue-panel .queue-tabs[hidden]{display:none!important}

@media(max-width:760px){
  .radio-return-button{
    max-width:96px;
    height:28px;
    padding:0 7px;
    font-size:9px;
  }
  #queue-panel .queue-item-radio-now{
    grid-template-columns:24px 42px minmax(0,1fr) auto;
    gap:8px;
  }
}

/* Low-bandwidth HLS selector. */
#stream-quality-toggle{
  width:auto;
  min-width:40px;
  padding:0 8px;
  border:1px solid var(--line,#252d37);
  border-radius:9px;
  background:transparent;
  color:var(--soft,#c8ced7);
  font-size:10px !important;
  font-weight:700;
  letter-spacing:.04em;
}
#stream-quality-toggle.is-on{
  border-color:var(--line-strong,#394351);
  background:var(--surface-2,#1b2129);
  color:var(--text,#f2f4f7);
}
.mobile-stream-quality-toggle{
  display:none;
}
@media(max-width:760px){
  #stream-quality-toggle{display:none}
  .mobile-stream-quality-toggle{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    flex:0 0 40px;
    margin-left:auto;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid var(--line,#252d37);
    border-radius:10px;
    background:transparent;
    color:var(--soft,#c8ced7);
    font:inherit;
    cursor:pointer;
  }
  .mobile-stream-quality-toggle strong{
    display:block;
    font-size:9px;
    font-weight:800;
    line-height:1;
    letter-spacing:.02em;
  }
  .mobile-stream-quality-toggle.is-on{
    border-color:var(--line-strong,#394351);
    background:var(--surface-2,#1b2129);
    color:var(--text,#f2f4f7);
  }
  .player.is-radio-mode #mobile-stream-quality-toggle{
    display:none !important;
  }
}

/* Compact track lists — slightly larger artwork and tighter, easier actions.
   Queue artwork/actions are intentionally excluded from this shared sizing. */
.recent-card.live-song-card,
.simple-row,
.track-row{
  --audious-action-btn-size:38px;
  --audious-action-icon-size:18px;
  --audious-action-play-btn-size:42px;
  --audious-action-play-icon-size:26px;
}
.recent-card .live-row-actions,
.simple-row .live-like-actions,
.simple-row .live-row-actions,
.track-row .live-like-actions,
.track-row .live-row-actions{
  gap:0;
}
.recent-card.live-song-card{
  grid-template-columns:auto minmax(0,1fr) 80px;
}
#browse-popular-list .track-row{
  grid-template-columns:66px minmax(0,1.4fr) minmax(110px,.8fr) 56px 80px;
}
#popular-live-list .track-row{
  grid-template-columns:66px minmax(0,1.4fr) minmax(110px,.8fr) 80px 80px;
}
#popular-live-list .popular-like-toggle{
  flex:0 0 38px;
}
#browse-catalog-list .track-row{
  grid-template-columns:66px minmax(0,1.4fr) minmax(110px,.8fr) 56px 114px !important;
}
#browse-catalog-list .browse-catalog-actions{
  gap:0;
  width:114px;
  min-width:114px;
}
#browse-catalog-list .browse-catalog-actions > button{
  flex:0 0 38px;
  width:38px;
  height:38px;
}
.browse-catalog-list-head{
  grid-template-columns:66px minmax(0,1.4fr) minmax(110px,.8fr) 56px 114px;
}
.popular-live-list-head{
  grid-template-columns:66px minmax(0,1.4fr) minmax(110px,.8fr) 80px 80px;
}

@media (min-width:761px){
  .recent-card .thumb,
  .simple-thumb,
  .row-thumb{
    width:66px;
    height:66px;
  }
  .simple-thumb{
    flex-basis:66px;
  }
  .simple-row{
    min-height:78px;
  }
  .track-row{
    grid-template-columns:28px 66px minmax(0,1.4fr) minmax(110px,.8fr) 56px 42px;
  }
  .view[data-view-panel="recent"] .list-head,
  .view[data-view-panel="history"] .list-head,
  #recent-live-list .simple-row,
  #history-live-list .simple-row{
    grid-template-columns:minmax(0,1.6fr) minmax(100px,.8fr) 120px 114px;
  }
  #likes-live-list .list-head,
  #likes-live-rows .simple-row,
  .artist-live-track-list .list-head,
  .artist-live-track-list .live-artist-track{
    grid-template-columns:minmax(0,1.6fr) minmax(100px,.8fr) 74px 114px;
  }
  .live-playlist-track-list .list-head,
  .live-playlist-track-list .live-playlist-track{
    grid-template-columns:minmax(0,1.7fr) 54px 74px 114px;
  }
  .live-album-detail .list-head,
  .live-album-detail .simple-row{
    grid-template-columns:minmax(0,1.6fr) minmax(100px,.8fr) 74px 80px;
  }
  .live-my-playlist-track-list .list-head,
  .live-my-playlist-track-list .live-my-playlist-track{
    grid-template-columns:minmax(0,1.7fr) 54px 74px 144px;
  }
  .live-my-playlist-track-actions{
    gap:0;
  }
}

@media (max-width:760px){
  .recent-card .thumb,
  .simple-thumb,
  .row-thumb{
    width:46px;
    height:46px;
  }
  .simple-thumb{
    flex-basis:46px;
  }
  .simple-row{
    min-height:60px;
  }
  #browse-popular-list .track-row{
    grid-template-columns:46px minmax(0,1fr) 80px;
  }
  #popular-live-list .track-row{
    grid-template-columns:46px minmax(0,1fr) 62px 80px;
  }
  #browse-catalog-list .track-row{
    grid-template-columns:46px minmax(0,1fr) 114px !important;
  }
  #recent-live-list .simple-row,
  #history-live-list .simple-row,
  #likes-live-rows .simple-row,
  .artist-live-track-list .live-artist-track,
  .live-playlist-track-list .live-playlist-track{
    grid-template-columns:minmax(0,1fr) 114px;
  }
  .live-album-detail .simple-row{
    grid-template-columns:minmax(0,1fr) 80px;
  }
  .live-my-playlist-track-list .live-my-playlist-track{
    grid-template-columns:minmax(0,1fr) 144px;
  }
  .live-my-playlist-track-actions{
    gap:0;
  }
}