@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Space+Mono:wght@400;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Lyric-only font filter stack */
.settings-container.lyrics-video-page .lyrics-video-font-filters {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--lvm-border);
  border-radius: 11px;
  background: var(--lvm-subtle);
}
.settings-container.lyrics-video-page .lyrics-video-font-filters-head,
.settings-container.lyrics-video-page .lyrics-video-font-filter-add,
.settings-container.lyrics-video-page .lyrics-video-font-filter-row-head,
.settings-container.lyrics-video-page .lyrics-video-font-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-container.lyrics-video-page .lyrics-video-font-filters-head { justify-content: space-between; }
.settings-container.lyrics-video-page .lyrics-video-font-filters-head > div { display: grid; gap: 2px; }
.settings-container.lyrics-video-page .lyrics-video-font-filters-head strong { color: var(--lvm-text); font-size: 13px; }
.settings-container.lyrics-video-page .lyrics-video-font-filters-head span { color: var(--lvm-muted); font-size: 10px; }
.settings-container.lyrics-video-page .lyrics-video-font-filter-count {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--lvm-panel);
  white-space: nowrap;
}
.settings-container.lyrics-video-page .lyrics-video-font-filter-add select { min-width: 0; flex: 1; }
.settings-container.lyrics-video-page .lyrics-video-font-filter-add .btn { min-height: 38px; padding-inline: 12px; gap: 6px; }
.settings-container.lyrics-video-page .lyrics-video-font-filter-list { display: grid; gap: 7px; }
.settings-container.lyrics-video-page .lyrics-video-font-filter-empty {
  padding: 16px 10px;
  border: 1px dashed var(--lvm-border);
  border-radius: 9px;
  color: var(--lvm-muted);
  font-size: 11px;
  text-align: center;
}
.settings-container.lyrics-video-page .lyrics-video-font-filter-row {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--lvm-border);
  border-radius: 9px;
  background: var(--lvm-panel);
  cursor: grab;
}
.settings-container.lyrics-video-page .lyrics-video-font-filter-row.is-dragging { opacity: .45; }
.settings-container.lyrics-video-page .lyrics-video-font-filter-row.is-drop-target { border-color: var(--lvm-accent); }
.settings-container.lyrics-video-page .lyrics-video-font-filter-row-head { justify-content: space-between; }
.settings-container.lyrics-video-page .lyrics-video-font-filter-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--lvm-text);
  font-size: 11px;
  font-weight: 750;
}
.settings-container.lyrics-video-page .lyrics-video-font-filter-name i { color: var(--lvm-muted); cursor: grab; }
.settings-container.lyrics-video-page .lyrics-video-font-filter-actions { gap: 3px; }
.settings-container.lyrics-video-page .lyrics-video-font-filter-actions button {
  display: grid;
  width: 27px;
  height: 27px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--lvm-border);
  border-radius: 7px;
  color: var(--lvm-muted);
  background: var(--lvm-subtle);
  font-size: 10px;
}
.settings-container.lyrics-video-page .lyrics-video-font-filter-actions button:hover { color: var(--lvm-text); border-color: var(--lvm-accent); }
.settings-container.lyrics-video-page .lyrics-video-font-filter-intensity { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; }
.settings-container.lyrics-video-page .lyrics-video-font-filter-intensity input { grid-column: 1; min-width: 0; }
.settings-container.lyrics-video-page .lyrics-video-font-filter-intensity output { grid-column: 2; min-width: 35px; color: var(--lvm-muted); font-size: 10px; text-align: right; }

.profile-ten-k-stat {
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  margin:10px 0 0;
  padding:7px 11px;
  border:1px solid rgba(26,92,255,.3);
  border-radius:999px;
  background:rgba(26,92,255,.09);
  color:rgb(var(--detail-readable-rgb,34,37,48));
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  text-shadow:none;
}

.ten-k-settings-card {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  padding:20px;
  border:1px solid rgba(26,92,255,.24);
  border-radius:14px;
  background:rgba(26,92,255,.055);
}

.ten-k-settings-copy h3 { margin:4px 0 5px; }
.ten-k-settings-copy > p { margin:0 0 14px; color:var(--text-secondary); font-size:13px; line-height:1.45; }
.ten-k-choice-list { display:grid; gap:8px; }
.ten-k-choice,
.ten-k-popup-choice {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--white);
  color:var(--black);
  cursor:pointer;
  font-size:13px;
  font-weight:650;
}
.ten-k-choice:has(input:checked),
.ten-k-popup-choice:has(input:checked) {
  border-color:rgba(26,92,255,.62);
  background:rgba(26,92,255,.08);
  box-shadow:0 0 0 2px rgba(26,92,255,.07);
}
.ten-k-choice input,
.ten-k-popup-choice input { accent-color:#1a5cff; }
.ten-k-settings-actions { display:flex; align-items:center; gap:12px; margin-top:14px; }

body.ten-k-modal-open { overflow:hidden; }
.ten-k-celebration {
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  padding:18px;
  opacity:0;
  transition:opacity .24s ease;
}
.ten-k-celebration[hidden] { display:none!important; }
.ten-k-celebration.is-open { opacity:1; }
.ten-k-celebration-backdrop {
  position:absolute;
  inset:0;
  width:100%;
  border:0;
  background:rgba(5,6,13,.7);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.ten-k-celebration-card {
  position:relative;
  width:min(520px,100%);
  max-height:min(760px,calc(100dvh - 36px));
  padding:30px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  background:var(--white);
  box-shadow:0 28px 90px rgba(0,0,0,.45);
  overflow:auto;
  transform:translateY(16px) scale(.98);
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.ten-k-celebration.is-open .ten-k-celebration-card { transform:none; }
.ten-k-celebration-card h2 {
  margin:6px 42px 10px 0;
  color:var(--black);
  font-family:"Syne",sans-serif;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.035em;
}
.ten-k-celebration-card > p { margin:0 0 18px; color:var(--text-secondary); line-height:1.5; }
.ten-k-celebration-close {
  position:absolute;
  top:16px;
  right:16px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--surface-2);
  color:var(--black);
  cursor:pointer;
}
.ten-k-popup-choices { display:grid; gap:8px; }
.ten-k-popup-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.ten-k-popup-actions .btn-primary,
.ten-k-settings-actions .btn-primary {
  border-color:#1a5cff!important;
  background:#1a5cff!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(26,92,255,.24)!important;
}
.ten-k-popup-status { display:block; min-height:18px; margin-top:8px; color:var(--text-secondary); font-size:12px; text-align:right; }
@media (min-width:1024px) {
  .profile-container.has-profile-banner .profile-ten-k-stat { color:#fff; background:rgba(8,10,24,.46); border-color:rgba(255,255,255,.24); }
}

@media (max-width:768px) {
  .profile-ten-k-stat { margin:10px auto 0; text-align:left; }
  .ten-k-settings-card { grid-template-columns:1fr; padding:16px; }
  .ten-k-celebration { place-items:end center; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .ten-k-celebration-card { width:100%; max-height:90dvh; padding:24px 16px 16px; border-radius:22px; transform:translateY(105%); }
  .ten-k-celebration-card::before { content:""; display:block; width:42px; height:5px; margin:-14px auto 16px; border-radius:999px; background:var(--border); }
  .ten-k-celebration-card h2 { font-size:27px; }
  .ten-k-popup-actions { display:grid; grid-template-columns:1fr 1.35fr; }
  .ten-k-popup-actions .btn { min-width:0; min-height:46px; padding:10px; }
}

@media (prefers-reduced-motion:reduce) {
  .ten-k-celebration-card { transition:none; }
}

/* Lyric Video Maker · layered character cutouts */
.lyrics-video-character-layer-launch .btn {
  width: 100%;
  justify-content: center;
}

.lyrics-video-character-layer-modal .modal-content {
  width: min(760px, 94vw);
  max-height: min(820px, 92dvh);
  overflow: hidden;
}

.lyrics-video-character-layer-modal .modal-body {
  overflow-y: auto;
}

.lyrics-video-character-picker,
.lyrics-video-character-layer-list {
  display: grid;
  gap: 10px;
}

.lyrics-video-character-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0 16px;
}

.lyrics-video-character-choice {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 15px;
  cursor: pointer;
  background: var(--bg-secondary);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.lyrics-video-character-choice:hover,
.lyrics-video-character-choice:has(input:checked) {
  border-color: var(--blue);
  box-shadow: 0 8px 22px rgba(26, 92, 255, .14);
  transform: translateY(-1px);
}

.lyrics-video-character-choice img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: cover;
  background: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.lyrics-video-character-choice video {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: cover;
  background: #080a10;
}

.lyrics-video-collection-background-launch > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lyrics-video-collection-background-launch .btn { width: 100%; justify-content: center; }
.lyrics-video-collection-picker-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.lyrics-video-collection-picker-toolbar > span { color: var(--text-secondary); font-size: 12px; font-weight: 750; }
.lyrics-video-collection-picker-toolbar > div { display: flex; gap: 7px; }
.lyrics-video-collection-choice span { min-width: 0; }
.lyrics-video-collection-choice strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyrics-video-collection-choice small { color: var(--text-secondary); font-size: 10px; text-transform: capitalize; }
.lyrics-video-collection-choice.is-locked { opacity: .55; cursor: not-allowed; }

@media (max-width: 520px) {
  .lyrics-video-collection-background-launch > div { grid-template-columns: 1fr; }
  .lyrics-video-collection-picker-toolbar { align-items: flex-start; }
  .lyrics-video-collection-picker-toolbar > div { flex-direction: column; }
}

.lyrics-video-character-choice span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
}

.lyrics-video-character-choice strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lyrics-video-character-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-secondary);
}

.lyrics-video-character-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #8b5cf6, #ec4899);
  transition: width .2s ease;
}

.lyrics-video-character-progress p {
  margin: 7px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.lyrics-video-character-layer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 16px;
}

.lyrics-video-character-layer-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg-secondary);
}

.lyrics-video-character-layer-card-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
}

.lyrics-video-character-layer-card-head img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: repeating-conic-gradient(#d9dce5 0 25%, #fff 0 50%) 0 / 12px 12px;
}

.lyrics-video-character-layer-card-head strong,
.lyrics-video-character-layer-card-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lyrics-video-character-layer-card-head small {
  color: var(--text-secondary);
}

.lyrics-video-character-layer-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
}

.lyrics-video-character-layer-card-grid label {
  margin: 0;
  font-size: 11px;
}

.lyrics-video-character-layer-card-grid select,
.lyrics-video-character-layer-card-grid input {
  width: 100%;
}

.lyrics-video-character-layer-remove {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #d33;
  background: rgba(255, 70, 70, .1);
}

html.dark-mode .lyrics-video-character-choice,
html.dark-mode .lyrics-video-character-layer-card {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .045);
}

@media (max-width: 640px) {
  .lyrics-video-character-layer-modal {
    align-items: flex-end !important;
  }

  .lyrics-video-character-layer-modal .modal-content {
    width: 100vw;
    max-height: 92dvh;
    margin: 0;
    border-radius: 22px 22px 0 0 !important;
  }

  .lyrics-video-character-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lyrics-video-character-layer-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Cover-matched playback surfaces. */
@media (min-width:1024px) {
  #playerSection[data-track-theme] {
    isolation:isolate;
    overflow:visible;
    border-top:0 !important;
    background:var(--white) !important;
    box-shadow:0 -1px 0 color-mix(in srgb,var(--border) 76%,transparent);
    color:var(--black);
  }

  #playerSection[data-track-theme] .player-theme-surface {
    display:block;
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
  }

  #playerSection[data-track-theme] .player-theme-surface::before,
  #playerSection[data-track-theme] .player-theme-surface::after {
    content:"";
    position:absolute;
    z-index:0;
    width:38vw;
    height:190px;
    border-radius:50%;
    pointer-events:none;
    filter:blur(40px) saturate(140%);
    opacity:.25;
    will-change:transform;
  }

  #playerSection[data-track-theme] .player-theme-surface::before {
    top:-118px;
    left:-4%;
    background:rgb(var(--player-expanded-glow-rgb));
    animation:playerMiniLiquidFlightA 12s ease-in-out infinite alternate;
  }

  #playerSection[data-track-theme] .player-theme-surface::after {
    right:-2%;
    bottom:-126px;
    background:rgb(var(--player-expanded-accent-rgb));
    animation:playerMiniLiquidFlightB 15s ease-in-out infinite alternate;
  }

  #playerSection[data-track-theme] .player-wrapper {
    position:relative;
    z-index:1;
    min-height:94px;
    padding:12px 22px;
    grid-template-columns:minmax(240px,300px) minmax(320px,1fr) minmax(240px,300px);
    gap:24px;
  }

  #playerSection[data-track-theme] .player-track-info {
    min-height:66px;
    padding:7px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  #playerSection[data-track-theme] .player-cover {
    width:52px;
    height:52px;
    border-radius:11px;
    box-shadow:0 9px 22px rgba(var(--player-expanded-overlay-rgb),.24),0 0 0 1px rgba(var(--player-expanded-text-rgb),.12);
  }

  #playerSection[data-track-theme] .player-title {
    color:var(--black);
    font-size:14px;
    font-weight:800;
  }

  #playerSection[data-track-theme] .player-artist,
  #playerSection[data-track-theme] .player-artist-link {
    color:rgb(var(--player-expanded-artist-rgb));
  }

  #playerSection[data-track-theme] .time {
    color:var(--muted);
  }

  #playerSection[data-track-theme] .player-controls {
    margin-bottom:9px;
    gap:10px;
  }

  #playerSection[data-track-theme] :is(.player-btn,.player-btn-small) {
    border:1px solid rgba(var(--player-expanded-text-rgb),.1);
    background:rgba(var(--player-expanded-text-rgb),.075);
    color:rgb(var(--player-expanded-text-rgb));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  }

  #playerSection[data-track-theme] :is(.player-btn,.player-btn-small):hover {
    border-color:rgba(var(--player-expanded-text-rgb),.18);
    background:rgba(var(--player-expanded-text-rgb),.14);
  }

  #playerSection[data-track-theme] .player-btn-small.active {
    border-color:rgba(255,255,255,.68);
    background:linear-gradient(
      135deg,
      rgb(var(--player-expanded-accent-rgb)),
      rgb(var(--player-expanded-control-rgb))
    );
    color:rgb(var(--player-expanded-control-icon-rgb));
    box-shadow:
      0 0 0 3px rgba(var(--player-expanded-accent-rgb),.18),
      0 8px 22px rgba(var(--player-expanded-accent-rgb),.42),
      inset 0 1px 0 rgba(255,255,255,.42);
    transform:translateY(-1px) scale(1.06);
  }

  #playerSection[data-track-theme] .player-btn-small.active:hover {
    border-color:#fff;
    filter:saturate(1.14) brightness(1.07);
  }

  #playerSection[data-track-theme] .player-play-btn {
    width:48px;
    height:48px;
    border-color:rgba(255,255,255,.38);
    background:color-mix(in srgb,rgb(var(--player-expanded-control-rgb)) 82%,#111 18%);
    color:#fff;
    box-shadow:0 12px 26px rgba(var(--player-expanded-accent-rgb),.28),inset 0 1px 0 #fff;
  }

  #playerSection[data-track-theme] .player-play-btn:hover {
    border-color:rgba(255,255,255,.62);
    background:color-mix(in srgb,rgb(var(--player-expanded-control-rgb)) 90%,#111 10%);
    color:#fff;
    box-shadow:0 15px 32px rgba(var(--player-expanded-accent-rgb),.34),inset 0 1px 0 #fff;
    transform:translateY(-1px) scale(1.035);
  }

  #playerSection[data-track-theme] .player-right {
    gap:9px;
  }

  #playerSection[data-track-theme] .progress-bar {
    height:6px;
    border-radius:999px;
    background:rgba(var(--player-expanded-text-rgb),.16);
    box-shadow:inset 0 1px 2px rgba(var(--player-expanded-overlay-rgb),.16);
    overflow:hidden;
  }

  #playerSection[data-track-theme] .progress-fill {
    border-radius:inherit;
    background:linear-gradient(90deg,rgb(var(--player-expanded-progress-rgb)),rgb(var(--player-expanded-glow-rgb)));
    box-shadow:0 0 12px rgba(var(--player-expanded-progress-rgb),.5);
  }

  .player-queue-panel {
    bottom:112px !important;
  }
}

.player-theme-surface {
  display:none;
}

@keyframes playerMiniLiquidFlightA {
  0% { transform:translate3d(0,0,0) scale(1); }
  45% { transform:translate3d(36vw,28px,0) scale(1.12,.88); }
  100% { transform:translate3d(68vw,-8px,0) scale(.9,1.08); }
}

@keyframes playerMiniLiquidFlightB {
  0% { transform:translate3d(0,0,0) scale(1.08,.92); }
  50% { transform:translate3d(-32vw,-32px,0) scale(.88,1.14); }
  100% { transform:translate3d(-64vw,5px,0) scale(1.14,.9); }
}

@media (max-width:768px) {
  .player-expanded-panel:not(.is-queue-view):not(.has-soundvia-loop) .player-expanded-content {
    padding:calc(82px + env(safe-area-inset-top)) 18px calc(116px + env(safe-area-inset-bottom)) !important;
    gap:0 !important;
  }

  .player-expanded-panel:not(.is-queue-view):not(.has-soundvia-loop) .player-expanded-cover {
    width:min(72vw,36dvh,300px);
    margin-top:0 !important;
  }

  .player-expanded-panel:not(.is-queue-view):not(.has-soundvia-loop) .player-expanded-info {
    margin-top:22px;
  }

  .player-expanded-panel:not(.is-queue-view):not(.has-soundvia-loop) .player-expanded-progress {
    margin-top:26px;
  }

  .player-expanded-panel:not(.is-queue-view):not(.has-soundvia-loop) .player-expanded-controls {
    margin-top:20px;
    gap:clamp(34px,10vw,54px);
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-lyrics-card,
  .player-expanded-panel.has-soundvia-loop:not(.is-queue-view) .player-expanded-lyrics-card {
    margin-top:48px !important;
  }

  .player-expanded-panel:not(.is-queue-view) :is(
    .player-expanded-cherry-preview,
    .player-expanded-comments-preview,
    .player-expanded-drawer-grid
  ) {
    margin-top:16px;
  }

  .player-expanded-progress .progress-bar,
  .lyrics-theater-mobile-player-progress {
    height:9px !important;
    border:1px solid rgba(var(--player-expanded-text-rgb),.1) !important;
    background:rgba(var(--player-expanded-text-rgb),.18) !important;
    box-shadow:inset 0 1px 3px rgba(var(--player-expanded-overlay-rgb),.18) !important;
  }

  .player-expanded-progress .progress-fill,
  .lyrics-theater-mobile-player-progress-fill {
    background:linear-gradient(90deg,rgb(var(--player-expanded-progress-rgb)),rgb(var(--player-expanded-glow-rgb))) !important;
    box-shadow:0 0 12px rgba(var(--player-expanded-progress-rgb),.58) !important;
  }
}

@media (max-width:1023px) {
  .lyrics-theater-footer {
    padding:10px 22px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .lyrics-theater-mobile-player {
    gap:18px 14px !important;
  }

  .lyrics-theater-mobile-player-progress-row {
    row-gap:8px !important;
  }

  .player-expanded-controls #playerExpandedPlayBtn,
  .lyrics-theater-mobile-player-play {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.56) !important;
    background:transparent !important;
    color:rgb(var(--lyrics-theater-mesh-base-rgb,4,8,18)) !important;
    box-shadow:0 18px 38px rgba(var(--player-expanded-overlay-rgb),.28),0 0 0 1px rgba(var(--player-expanded-accent-rgb),.12) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  .player-expanded-controls #playerExpandedPlayBtn::before,
  .lyrics-theater-mobile-player-play::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(145deg,#fff 6%,rgb(var(--player-expanded-glow-rgb)) 100%);
    pointer-events:none;
  }

  .player-expanded-controls #playerExpandedPlayBtn i,
  .lyrics-theater-mobile-player-play i {
    position:relative;
    z-index:1;
    color:rgb(var(--lyrics-theater-mesh-base-rgb,4,8,18)) !important;
    display:inline-block;
    opacity:1 !important;
    font-size:28px !important;
    font-style:normal;
    font-weight:900 !important;
    line-height:1;
  }
}

@media (prefers-reduced-motion:reduce) {
  #playerSection[data-track-theme] .player-theme-surface::before,
  #playerSection[data-track-theme] .player-theme-surface::after {
    animation:none !important;
  }
}

/* Explicit-content labels and the Artist Hub release builder. */
.sv-explicit-badge {
  display:inline-flex;
  flex:0 0 auto;
  margin-right:.32em;
  color:currentColor;
  font-size:.9em;
  vertical-align:-.04em;
}
.upload-explicit-row {
  display:flex;
  align-items:center;
  width:100%;
  min-height:48px;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--as-border,var(--border));
  border-radius:9px;
  color:var(--as-text,var(--black));
  background:var(--as-panel-subtle,var(--surface-2));
}
.upload-explicit-toggle {
  display:inline-flex;
  align-items:center;
  min-width:0;
  gap:10px;
  color:inherit;
  cursor:pointer;
}
.upload-explicit-toggle input[type="checkbox"] {
  width:18px;
  height:18px;
  min-height:18px;
  margin:0;
  padding:0;
  flex:0 0 18px;
  accent-color:var(--as-accent,var(--blue));
}
.upload-explicit-toggle strong { font-size:13px; font-weight:700; }
.upload-explicit-icon { font-size:1.1rem; line-height:1; }
.upload-explicit-row .sv-tooltip-trigger { margin-left:auto; }
.upload-explicit-row.is-compact { min-height:44px; padding:9px 11px; }
.upload-track-save-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.track-save-status { font-size:.82rem; opacity:.72; }
.artist-studio .upload-container {
  width:min(1040px,100%);
  margin-inline:auto;
}
.artist-studio .artist-studio-upload-gateway { display:none; }
.artist-studio .upload-container {
  max-width:1040px;
  padding:0;
}
.artist-studio .upload-stepper,
.artist-studio .upload-section {
  border:1px solid var(--artist-studio-border,rgba(255,255,255,.1));
  background:var(--artist-studio-panel,rgba(255,255,255,.04));
  box-shadow:0 3px 12px rgba(12,12,14,.04);
}
.artist-studio .upload-section { border-radius:12px; padding:22px; }
.artist-studio .upload-track-form-card,
.artist-studio .track-row { border-radius:12px; }

.sv-timeline-editor {
  --sv-playhead: #ff4f72;
  width: min(1880px, 100%);
  margin: 0 auto;
  color: var(--as-text);
  font-family: "Syne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:not(.artist-studio) .sv-timeline-editor {
  --as-bg: var(--white);
  --as-panel: var(--surface-1);
  --as-panel-subtle: var(--surface-2);
  --as-border: var(--border);
  --as-text: var(--black);
  --as-muted: var(--text-secondary);
  --as-accent: var(--blue);
}

.artist-studio .artist-studio-content:has(.sv-timeline-editor) {
  max-width: none;
  padding: 18px 20px 34px;
}

.sv-timeline-editor *,
.sv-timeline-editor *::before,
.sv-timeline-editor *::after { box-sizing: border-box; }

.sv-timeline-header,
.sv-timeline-toolbar,
.sv-timeline-panel,
.sv-timeline-preview-card,
.sv-timeline-sequencer {
  border: 1px solid var(--as-border);
  background: var(--as-panel);
  box-shadow: 0 3px 12px rgba(12,12,14,.04);
}

.sv-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 15px 18px;
  gap: 18px;
  border-radius: 12px;
}

.sv-timeline-header h1 { margin: 5px 0 0; font-size: clamp(23px,2.2vw,34px); letter-spacing: -.035em; }
.sv-timeline-header p { margin: 5px 0 0; color: var(--as-muted); font-size: 13px; }
.sv-timeline-back { color: var(--as-muted); font-size: 12px; font-weight: 700; }
.sv-timeline-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.sv-timeline-save-state { min-width: 92px; color: var(--as-muted); font-size: 12px; text-align: right; }
.sv-timeline-save-state.is-warning { color: var(--warning); }
.sv-timeline-save-state.is-error { color: var(--danger); }

.sv-timeline-toolbar {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin-bottom: 10px;
  padding: 5px 8px;
  gap: 4px;
  border-radius: 10px;
  overflow-x: auto;
}

.sv-timeline-toolbar button,
.sv-timeline-track-actions button,
.sv-timeline-transport button,
.sv-timeline-zoom button,
.sv-timeline-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 0;
  border-radius: 8px;
  color: var(--as-text);
  background: transparent;
  cursor: pointer;
}

.sv-timeline-toolbar button:hover,
.sv-timeline-track-actions button:hover,
.sv-timeline-transport button:hover,
.sv-timeline-zoom button:hover { background: var(--as-panel-subtle); }
.sv-timeline-toolbar button:disabled,
.sv-timeline-track-actions button:disabled { opacity: .32; cursor: not-allowed; }
.sv-timeline-toolbar-separator { width: 1px; height: 24px; margin: 0 4px; background: var(--as-border); }
.sv-timeline-snap-toggle { display: flex; align-items: center; min-height: 36px; padding: 0 9px; gap: 6px; color: var(--as-muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.sv-timeline-zoom { display: flex; align-items: center; margin-left: auto; gap: 2px; }
.sv-timeline-zoom input { width: 120px; accent-color: var(--as-accent); }
.sv-timeline-mobile-panel { display: none !important; width: auto !important; padding: 0 12px; gap: 7px; }

.sv-timeline-workspace {
  display: grid;
  grid-template-columns: minmax(220px,260px) minmax(360px,1fr) minmax(250px,310px);
  min-height: 380px;
  gap: 10px;
}

.sv-timeline-panel {
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
}

.sv-timeline-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 13px;
  gap: 10px;
  border-bottom: 1px solid var(--as-border);
}
.sv-timeline-panel-head > div { display: flex; min-width: 0; flex-direction: column; }
.sv-timeline-panel-head strong { font-size: 14px; }
.sv-timeline-panel-head small { margin-top: 2px; overflow: hidden; color: var(--as-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sv-timeline-sheet-close { display: none; }

.sv-timeline-upload-zone {
  display: grid;
  place-items: center;
  min-height: 116px;
  margin: 12px;
  padding: 14px;
  gap: 5px;
  border: 1px dashed color-mix(in srgb,var(--as-accent) 48%,var(--as-border));
  border-radius: 10px;
  color: var(--as-muted);
  background: var(--as-panel-subtle);
  text-align: center;
  cursor: pointer;
}
.sv-timeline-upload-zone.is-dragover { border-color: var(--as-accent); color: var(--as-accent); background: color-mix(in srgb,var(--as-accent) 9%,var(--as-panel)); }
.sv-timeline-upload-zone i { color: var(--as-accent); font-size: 23px; }
.sv-timeline-upload-zone strong { color: var(--as-text); font-size: 13px; }
.sv-timeline-upload-zone span { font-size: 11px; }
.sv-timeline-upload-progress { margin: 0 12px 10px; padding: 8px; border-radius: 8px; color: var(--success); background: color-mix(in srgb,var(--success) 10%,transparent); font-size: 11px; }
.sv-timeline-upload-progress.is-error { color: var(--danger); background: color-mix(in srgb,var(--danger) 10%,transparent); }
.sv-timeline-collection-picker { display: grid; margin: 0 12px 10px; gap: 5px; }
.sv-timeline-collection-picker label { color: var(--as-muted); font-size: 11px; font-weight: 700; }
.sv-timeline-collection-picker select,
.sv-timeline-property-row input,
.sv-timeline-properties-panel input,
.sv-timeline-properties-panel textarea,
.sv-timeline-properties-panel select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--as-border);
  border-radius: 8px;
  outline: 0;
  color: var(--as-text);
  background: var(--as-panel);
}
.sv-timeline-collection-picker select:focus,
.sv-timeline-properties-panel :is(input,textarea,select):focus { border-color: var(--as-accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--as-accent) 13%,transparent); }

.sv-timeline-media-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  max-height: 270px;
  padding: 0 12px 14px;
  gap: 8px;
  overflow: auto;
}
.sv-timeline-media-card { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--as-border); border-radius: 9px; color: var(--as-text); background: var(--as-panel); text-align: left; cursor: grab; }
.sv-timeline-media-card:hover { border-color: var(--as-accent); }
.sv-timeline-media-card:active { cursor: grabbing; }
.sv-timeline-media-card > :is(img,video) { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #090b10; }
.sv-timeline-media-card > span { display: flex; padding: 7px; flex-direction: column; }
.sv-timeline-media-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sv-timeline-media-card small { margin-top: 2px; color: var(--as-muted); font-size: 9px; text-transform: capitalize; }
.sv-timeline-empty { grid-column: 1/-1; padding: 28px 10px; color: var(--as-muted); font-size: 12px; text-align: center; }
.sv-timeline-empty.is-error { color: var(--danger); }

.sv-timeline-preview-column { min-width: 0; }
.sv-timeline-preview-card { height: 100%; padding: 12px; border-radius: 12px; }
.sv-timeline-preview-stage { position: relative; display: grid; height: calc(100% - 52px); min-height: 300px; place-items: center; overflow: hidden; border-radius: 10px; background: #080a0f; }
.sv-timeline-preview-stage canvas { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 58vh; object-fit: contain; background: #050609; }
.sv-preview-transform-box { position: absolute; z-index: 8; border: 1px solid #fff; outline: 1px solid rgba(19,118,255,.9); cursor: move; touch-action: none; transform-origin: center; }
.sv-preview-handle { position: absolute; width: 14px; height: 14px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--as-accent); touch-action: none; }
.sv-preview-handle.is-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.sv-preview-handle.is-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.sv-preview-handle.is-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.sv-preview-handle.is-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.sv-preview-rotate { position: absolute; top: -38px; left: 50%; display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--as-accent); cursor: grab; transform: translateX(-50%); touch-action: none; }
.sv-timeline-preview-loading { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; color: #fff; background: rgba(4,5,9,.7); font-size: 12px; }
.sv-timeline-preview-loading[hidden] { display: none; }
.sv-timeline-transport { display: flex; align-items: center; justify-content: center; min-height: 48px; padding-top: 8px; gap: 5px; }
.sv-timeline-transport button.is-primary { color: #fff; background: var(--as-accent); border-radius: 50%; }
.sv-timeline-transport #svTimelineTimecode { margin-left: 12px; font: 700 12px/1 ui-monospace,SFMono-Regular,monospace; }
.sv-timeline-transport-duration { color: var(--as-muted); font: 500 11px/1 ui-monospace,SFMono-Regular,monospace; }

.sv-timeline-property-empty { display: grid; min-height: 190px; place-items: center; align-content: center; padding: 20px; color: var(--as-muted); text-align: center; }
.sv-timeline-property-empty i { font-size: 25px; }
.sv-timeline-property-empty p { max-width: 200px; font-size: 12px; line-height: 1.5; }
.sv-timeline-properties-panel form { display: grid; max-height: 300px; padding: 12px; gap: 10px; overflow: auto; }
.sv-timeline-properties-panel form > label,
.sv-timeline-property-row label,
.sv-timeline-global-properties label { display: grid; gap: 5px; color: var(--as-muted); font-size: 11px; font-weight: 700; }
.sv-timeline-properties-panel textarea { resize: vertical; }
.sv-timeline-property-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sv-timeline-enabled { display: flex !important; align-items: center; }
.sv-timeline-enabled input { width: auto; min-height: 0; }
.sv-timeline-transform-properties,
.sv-timeline-keyframe-editor { display: grid; padding: 10px; gap: 8px; border: 1px solid var(--as-border); border-radius: 9px; }
.sv-timeline-transform-properties legend,
.sv-timeline-keyframe-editor legend { padding: 0 5px; color: var(--as-text); font-size: 11px; font-weight: 800; }
.sv-timeline-keyframe-list { display: grid; max-height: 160px; gap: 5px; overflow: auto; }
.sv-timeline-keyframe-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: 6px 7px; gap: 6px; border-radius: 7px; background: var(--as-panel-subtle); font-size: 10px; }
.sv-timeline-keyframe-row button { width: 28px; min-height: 28px; padding: 0; }
.sv-timeline-global-properties { margin: 10px 12px 14px; padding: 10px; border: 1px solid var(--as-border); border-radius: 9px; }
.sv-timeline-global-properties summary { cursor: pointer; font-size: 12px; font-weight: 750; }
.sv-timeline-global-properties[open] { display: grid; gap: 10px; }
.sv-timeline-global-properties p { margin: 0; color: var(--as-muted); font-size: 10px; line-height: 1.5; }

.sv-timeline-sequencer {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  height: min(42vh,430px);
  min-height: 260px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 12px;
}
.sv-timeline-track-sidebar { position: relative; z-index: 5; min-width: 0; border-right: 1px solid var(--as-border); background: var(--as-panel); }
.sv-timeline-sidebar-corner { display: flex; align-items: center; height: 34px; padding: 0 13px; border-bottom: 1px solid var(--as-border); color: var(--as-muted); font-size: 11px; font-weight: 750; }
.sv-timeline-track-header { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; padding: 6px 7px 6px 9px; gap: 7px; border-bottom: 1px solid var(--as-border); }
.sv-timeline-track-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--as-accent); background: color-mix(in srgb,var(--as-accent) 10%,var(--as-panel)); }
.sv-timeline-track-name { display: flex; min-width: 0; flex-direction: column; }
.sv-timeline-track-name strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sv-timeline-track-name small { margin-top: 2px; color: var(--as-muted); font-size: 9px; }
.sv-timeline-track-actions { display: grid; grid-template-columns: repeat(2,24px); }
.sv-timeline-track-actions button { width: 24px; height: 24px; flex-basis: 24px; font-size: 9px; }

.sv-timeline-scroll { position: relative; min-width: 0; overflow: auto; overscroll-behavior: contain; background: color-mix(in srgb,var(--as-panel-subtle) 65%,var(--as-panel)); scrollbar-width: thin; }
.sv-timeline-ruler { position: sticky; top: 0; left: 0; z-index: 4; display: block; border-bottom: 1px solid var(--as-border); background: var(--as-panel); cursor: crosshair; }
.sv-timeline-track-content { position: relative; }
.sv-timeline-track-row { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--as-border); background-image: linear-gradient(90deg,color-mix(in srgb,var(--as-border) 55%,transparent) 1px,transparent 1px); background-size: 80px 100%; }
.sv-timeline-track-row.is-hidden { opacity: .38; }
.sv-timeline-clip { position: absolute; top: 7px; bottom: 7px; display: flex; align-items: center; min-width: 6px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--clip-color) 72%,#fff); border-radius: 7px; color: #fff; background: color-mix(in srgb,var(--clip-color) 78%,#10131a); box-shadow: 0 2px 5px rgba(0,0,0,.18); cursor: grab; touch-action: none; user-select: none; }
.sv-timeline-clip.is-video { --clip-color:#087f8c; }
.sv-timeline-clip.is-image { --clip-color:#6d4cc4; }
.sv-timeline-clip.is-lyrics { --clip-color:#1769d2; }
.sv-timeline-clip.is-text { --clip-color:#b34783; }
.sv-timeline-clip.is-effects { --clip-color:#b56a12; }
.sv-timeline-clip.is-audio { --clip-color:#2e8d5a; }
.sv-timeline-clip:hover { filter: brightness(1.12); }
.sv-timeline-clip.is-selected { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px color-mix(in srgb,var(--as-accent) 34%,transparent); }
.sv-timeline-clip.is-dragging { z-index: 10; opacity: .82; cursor: grabbing; }
.sv-timeline-clip.is-disabled { opacity: .42; filter: grayscale(.5); }
.sv-timeline-clip.is-locked { cursor: not-allowed; }
.sv-timeline-clip-copy { min-width: 0; padding: 0 10px; pointer-events: none; }
.sv-timeline-clip-copy strong,.sv-timeline-clip-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-timeline-clip-copy strong { font-size: 10px; }
.sv-timeline-clip-copy small { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 8px; }
.sv-timeline-trim-handle { position: absolute; top: 0; bottom: 0; z-index: 2; width: 9px; background: rgba(255,255,255,.14); cursor: ew-resize; }
.sv-timeline-trim-handle.is-left { left: 0; }
.sv-timeline-trim-handle.is-right { right: 0; }
.sv-timeline-wavepoint-marker { position: absolute; bottom: 3px; z-index: 3; width: 9px; height: 9px; border: 1px solid #fff; background: #55d7ff; transform: translateX(-50%) rotate(45deg); cursor: ew-resize; pointer-events: auto; touch-action: none; }
.sv-timeline-wavepoint-marker:hover,
.sv-timeline-wavepoint-marker.is-dragging { transform: translateX(-50%) rotate(45deg) scale(1.35); box-shadow: 0 0 0 3px color-mix(in srgb,var(--as-accent) 25%,transparent); }
.sv-timeline-playhead { position: absolute; top: 0; bottom: 0; z-index: 12; width: 1px; background: var(--sv-playhead); cursor: ew-resize; touch-action: none; will-change: transform; }
.sv-timeline-playhead span { position: absolute; top: 0; left: 50%; width: 12px; height: 15px; border-radius: 3px 3px 8px 8px; background: var(--sv-playhead); transform: translateX(-50%); }
.sv-timeline-range-marker { position: absolute; top: 34px; bottom: 0; z-index: 10; width: 1px; background: color-mix(in srgb,var(--as-accent) 72%,transparent); cursor: ew-resize; touch-action: none; }
.sv-timeline-range-marker::before { position: absolute; top: 2px; padding: 2px 4px; border-radius: 3px; color: #fff; background: var(--as-accent); font-size: 8px; font-weight: 800; }
.sv-timeline-range-marker.is-in::before { left: 1px; content: "IN"; }
.sv-timeline-range-marker.is-out::before { right: 1px; content: "OUT"; }
.sv-timeline-snap-guide { position: absolute; top: 34px; bottom: 0; z-index: 11; width: 1px; background: #61d9ff; box-shadow: 0 0 8px #61d9ff; pointer-events: none; }
.sv-timeline-sheet-backdrop { display: none; }

.sv-timeline-overlay-backdrop { position: fixed; inset: 0; z-index: 1690; border: 0; background: rgba(3,5,10,.62); }
body.sv-timeline-overlay-open { overflow: hidden; }
.sv-timeline-overlay-panel { position: fixed; top: 50%; left: 50%; z-index: 1695; width: min(620px,calc(100vw - 28px)); max-height: min(820px,calc(100dvh - 28px)); overflow: hidden; border: 1px solid var(--as-border); border-radius: 14px; color: var(--as-text); background: var(--as-panel); box-shadow: 0 28px 90px rgba(0,0,0,.36); transform: translate(-50%,-50%); }
.sv-timeline-overlay-panel.is-wide { width: min(960px,calc(100vw - 28px)); }
.sv-timeline-overlay-panel.is-classic-full { width: min(1540px,calc(100vw - 24px)); height: calc(100dvh - 24px); max-height: none; }
.sv-timeline-overlay-panel.is-classic-full iframe { display: block; width: 100%; height: calc(100% - 64px); border: 0; background: var(--as-bg); }
.sv-timeline-overlay-panel > header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 16px; gap: 12px; border-bottom: 1px solid var(--as-border); }
.sv-timeline-overlay-panel > header > div { display: flex; flex-direction: column; }
.sv-timeline-overlay-panel > header small { margin-top: 3px; color: var(--as-muted); font-size: 11px; }
.sv-timeline-overlay-panel > header button { width: 36px; height: 36px; border: 0; border-radius: 8px; color: var(--as-text); background: transparent; cursor: pointer; }
.sv-timeline-overlay-actions { display: flex; padding: 12px 16px; gap: 8px; border-bottom: 1px solid var(--as-border); }
.sv-timeline-overlay-actions input,
.sv-timeline-settings-search { min-height: 42px; padding: 8px 11px; border: 1px solid var(--as-border); border-radius: 8px; color: var(--as-text); background: var(--as-panel); }
.sv-timeline-overlay-actions input { min-width: 0; flex: 1; }
.sv-timeline-settings-search { width: calc(100% - 32px); margin: 12px 16px 0; }
.sv-timeline-preset-list { display: grid; max-height: 58vh; padding: 12px 16px 16px; gap: 8px; overflow: auto; }
.sv-timeline-preset-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: 10px 12px; gap: 8px; border: 1px solid var(--as-border); border-radius: 9px; background: var(--as-panel-subtle); }
.sv-timeline-preset-row > span { display: flex; min-width: 0; flex-direction: column; }
.sv-timeline-preset-row small { margin-top: 2px; color: var(--as-muted); font-size: 10px; }
.sv-timeline-preset-actions { display: flex; gap: 5px; }
.sv-timeline-preset-actions button { min-height: 34px; padding: 0 9px; }
.sv-timeline-classic-controls { max-height: calc(100dvh - 160px); padding: 12px 16px 20px; overflow: auto; }
.sv-timeline-classic-group { margin-bottom: 8px; border: 1px solid var(--as-border); border-radius: 9px; background: var(--as-panel-subtle); }
.sv-timeline-classic-group > summary { padding: 12px; cursor: pointer; font-size: 12px; font-weight: 800; }
.sv-timeline-classic-group-content { display: grid; padding: 0 12px 14px; gap: 9px; }
.sv-timeline-classic-group-content :is(.form-group,.settings-form-group) { display: grid; gap: 5px; }
.sv-timeline-classic-group-content label { color: var(--as-text); font-size: 11px; font-weight: 700; }
.sv-timeline-classic-group-content :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { width: 100%; min-height: 40px; padding: 7px 9px; border: 1px solid var(--as-border); border-radius: 8px; color: var(--as-text); background: var(--as-panel); }
.sv-timeline-classic-group-content input[type="range"] { padding: 0; accent-color: var(--as-accent); }
.sv-timeline-classic-group-content .form-hint { color: var(--as-muted); font-size: 10px; }

@media (max-width: 1120px) {
  .sv-timeline-workspace { grid-template-columns: 220px minmax(360px,1fr); }
  .sv-timeline-properties-panel {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 1605;
    width: min(390px,calc(100vw - 24px));
    max-height: 76vh;
    transform: translateY(calc(100% + 24px));
    transition: transform .22s cubic-bezier(.32,.72,0,1);
  }
  .sv-timeline-properties-panel.is-mobile-open { transform: translateY(0); }
  .sv-timeline-mobile-panel { display: inline-flex !important; }
  .sv-timeline-sheet-close { display: inline-flex; }
}

@media (max-width: 760px) {
    .artist-studio-tiktok-warning { padding: 12px 13px; border-radius: 10px; }
    .artist-studio-tiktok-skeleton > .artist-studio-section { padding: 16px; border-radius: 14px; }
  .artist-studio .artist-studio-content:has(.sv-timeline-editor) { padding: 10px 8px 28px; }
  .sv-timeline-header { align-items: flex-start; padding: 12px; flex-direction: column; }
  .sv-timeline-header h1 { font-size: 24px; }
  .sv-timeline-header-actions { width: 100%; justify-content: flex-start; }
  .sv-timeline-header-actions .artist-studio-button { min-height: 40px; padding: 0 12px; font-size: 11px; }
  .sv-timeline-save-state { order: 3; width: 100%; text-align: left; }
  .sv-timeline-workspace { display: block; min-height: 0; }
  .sv-timeline-preview-card { height: auto; }
  .sv-timeline-preview-stage { height: min(52vh,430px); min-height: 230px; }
  .sv-timeline-preview-stage canvas { max-height: 50vh; }
  .sv-timeline-media-panel,
  .sv-timeline-properties-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1605;
    width: 100%;
    max-height: min(78dvh,720px);
    border-radius: 18px 18px 0 0;
    transform: translateY(105%);
    transition: transform .22s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -18px 44px rgba(0,0,0,.24);
  }
  .sv-timeline-media-panel.is-mobile-open,
  .sv-timeline-properties-panel.is-mobile-open { transform: translateY(0); }
  .sv-timeline-media-grid { max-height: 42vh; }
  .sv-timeline-sheet-backdrop { position: fixed; inset: 0; z-index: 1600; display: block; border: 0; background: rgba(4,6,10,.54); opacity: 0; transition: opacity .18s ease; }
  .sv-timeline-sheet-backdrop.is-open { opacity: 1; }
  .sv-timeline-sequencer { grid-template-columns: 132px minmax(0,1fr); height: 330px; }
  .sv-timeline-track-header { grid-template-columns: 28px minmax(0,1fr); padding: 6px; }
  .sv-timeline-track-actions { display: none; }
  .sv-timeline-track-icon { width: 28px; height: 28px; }
  .sv-timeline-toolbar { position: sticky; top: 0; z-index: 25; }
  .sv-timeline-toolbar button { width: 44px; height: 44px; flex-basis: 44px; }
  .sv-timeline-snap-toggle { display: none; }
  .sv-timeline-zoom { margin-left: 0; }
  .sv-timeline-zoom input { width: 86px; }
  .sv-timeline-clip { top: 5px; bottom: 5px; }
  .sv-timeline-clip:not(.is-selected) { touch-action: pan-x pan-y; }
  .sv-timeline-trim-handle { width: 16px; }
  .sv-timeline-wavepoint-marker { width: 14px; height: 14px; bottom: 5px; }
  .sv-timeline-overlay-panel { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 86dvh; border-radius: 18px 18px 0 0; transform: none; }
  .sv-timeline-overlay-panel.is-wide { width: 100%; }
  .sv-preview-handle { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion:reduce) {
  .sv-timeline-media-panel,
  .sv-timeline-properties-panel,
  .sv-timeline-sheet-backdrop { transition: none !important; }
}

/* Discovery Feed / Following */
.mobile-discovery-switch,
.desktop-discovery-switch { display:none; }
.desktop-discovery-home-morph { position:relative; flex:0 0 auto; width:92px; height:40px; margin-right:2px; transition:width .46s cubic-bezier(.22,1,.36,1); }
.desktop-discovery-home-link { position:absolute!important; inset:0 auto auto 0; white-space:nowrap; opacity:1; transform:scale(1); transform-origin:left center; transition:opacity .18s ease .16s,transform .4s cubic-bezier(.22,1,.36,1); }
.desktop-discovery-switch { position:absolute; inset:0 auto auto 0; width:218px; height:40px; align-items:center; padding:3px; border:1px solid color-mix(in srgb,var(--border) 72%,transparent); border-radius:999px; background:color-mix(in srgb,var(--surface-2) 88%,transparent); opacity:0; pointer-events:none; transform:scaleX(.48); transform-origin:left center; transition:opacity .2s ease,transform .46s cubic-bezier(.22,1,.36,1); }
.desktop-discovery-switch-indicator { position:absolute; z-index:0; left:3px; top:3px; width:84px; height:32px; border-radius:999px; background:color-mix(in srgb,var(--blue) 72%,var(--black)); transform:translateX(0); transition:width .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1); }
.desktop-discovery-switch.is-following .desktop-discovery-switch-indicator { width:128px; transform:translateX(84px); }
.desktop-discovery-switch button { position:relative; z-index:1; height:34px; padding:0; border:0; background:transparent; color:var(--text-secondary); font:750 11px/1 "Syne",sans-serif; cursor:pointer; transition:color .2s ease,transform .2s ease; }
.desktop-discovery-switch button:first-of-type { width:84px; }.desktop-discovery-switch button:last-of-type { width:128px; white-space:nowrap; }
.desktop-discovery-switch button.is-active { color:var(--white); }
.desktop-discovery-switch button:active { transform:scale(.96); }
@media (min-width:1024px) {
  .desktop-discovery-switch { display:flex; }
  body.discovery-page-active .desktop-discovery-home-morph { width:218px; }
  body.discovery-page-active .desktop-discovery-switch { opacity:1; pointer-events:auto; transform:scaleX(1); transition-delay:.1s,0s; }
  body.discovery-page-active .desktop-discovery-home-link { opacity:0; pointer-events:none; transform:scale(.72); transition-delay:0s; }
}
.discovery-mobile-only { display:none!important; }
.discovery-redesign {
  width:100%;
  max-width:1380px;
  padding:44px clamp(24px,3.2vw,52px) 72px;
  gap:0;
}
.discovery-view-panel { display:block; animation:discoveryPanelIn .34s cubic-bezier(.22,1,.36,1) both; }
.discovery-view-panel[hidden] { display:none!important; }
.discovery-view-panel.is-leaving { animation:discoveryPanelOut .17s ease both; }
.discovery-redesign.is-moving-forward .discovery-view-panel.is-leaving { --discovery-shift:-14px; }
.discovery-redesign.is-moving-backward .discovery-view-panel.is-leaving { --discovery-shift:14px; }
@keyframes discoveryPanelIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes discoveryPanelOut { to { opacity:0; transform:translateX(var(--discovery-shift,0)); } }

.discovery-feed-desktop,
.discovery-following-view > .discovery-desktop-only { display:flex; flex-direction:column; gap:64px; padding-top:24px; }
.discovery-view-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-top:4px; }
.discovery-view-kicker,
.discovery-section-heading span,
.discovery-mobile-heading > span,
.following-mobile-feature div > span,
.discovery-mobile-lead-copy > span {
  display:block;
  margin:0 0 7px;
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.discovery-view-heading h1 { margin:0!important; font-size:clamp(48px,5.2vw,78px); line-height:.94; letter-spacing:-.065em; }
.discovery-view-heading p { max-width:580px; margin:14px 0 0!important; color:var(--text-secondary); font-size:15px; line-height:1.5; }
.discovery-feed-lead,
.discovery-following-lead {
  position:relative;
  display:grid;
  grid-template-columns:minmax(220px,310px) minmax(260px,1fr) minmax(180px,240px);
  align-items:center;
  gap:clamp(28px,4vw,64px);
  min-height:340px;
  padding:30px;
  border-radius:24px;
  background:var(--surface-2);
  overflow:hidden;
}
.discovery-feed-lead-art-wrap { position:relative; }
.discovery-feed-lead-art,
.following-lead-art { width:100%; aspect-ratio:1; border-radius:17px; object-fit:cover; }
.discovery-feed-lead-art-wrap > .discovery-feed-lead-play { position:absolute; left:14px; bottom:14px; opacity:0; transform:translateY(4px); transition:.2s ease; }
.discovery-feed-lead:hover .discovery-feed-lead-art-wrap > .discovery-feed-lead-play { opacity:1; transform:none; }
.discovery-feed-lead-copy h2,
.following-lead-copy h2 { margin:0!important; font-size:clamp(34px,3.8vw,58px); line-height:1; letter-spacing:-.055em; overflow-wrap:anywhere; }
.discovery-feed-lead-copy > p,
.following-lead-copy > p { margin:12px 0 22px!important; color:var(--text-secondary); font-size:15px; }
.discovery-feed-lead-actions { display:flex; flex-wrap:wrap; gap:9px; }
.discovery-feed-lead-actions .play-track-btn-large,
.following-lead-play { width:auto!important; min-width:92px; padding-inline:18px; gap:8px; border-radius:10px!important; opacity:1!important; }
.discovery-feed-side-pick { display:block; min-width:0; color:var(--black); text-decoration:none; }
.discovery-feed-side-pick img { width:100%; aspect-ratio:1; margin-bottom:11px; border-radius:13px; object-fit:cover; }
.discovery-feed-side-pick span { color:var(--blue); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.discovery-feed-side-pick strong,
.discovery-feed-side-pick small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.discovery-feed-side-pick strong { margin-top:5px; font-size:15px; }
.discovery-feed-side-pick small { margin-top:3px; color:var(--text-secondary); font-size:12px; }

.discovery-redesign .discovery-section { gap:16px; }
.discovery-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.discovery-section-heading h2 { margin:0!important; font-size:clamp(25px,2.3vw,34px); line-height:1.05; letter-spacing:-.045em; }
.discovery-section-heading span { max-width:650px; margin-bottom:6px; color:var(--text-secondary); font-size:10px; }
.discovery-section-heading > a { color:var(--text-secondary); font-size:12px; font-weight:700; text-decoration:none; }
.discovery-section-heading > a:hover { color:var(--blue); }
.discovery-section-heading-simple { display:block; }

.discovery-quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 22px; border-top:1px solid var(--border); }
.discovery-quick-card { min-width:0; display:grid; grid-template-columns:58px minmax(0,1fr) 16px; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid var(--border); color:var(--black); text-decoration:none; }
.discovery-quick-card img { width:58px; height:58px; border-radius:10px; object-fit:cover; }
.discovery-quick-card div { min-width:0; }
.discovery-quick-card span,.discovery-quick-card strong,.discovery-quick-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.discovery-quick-card span { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.discovery-quick-card strong { margin-top:3px; font-size:13px; }
.discovery-quick-card small { margin-top:3px; color:var(--text-secondary); font-size:11px; }
.discovery-quick-card > i { color:var(--muted); font-size:10px; transition:transform .2s ease; }
.discovery-quick-card:hover > i { color:var(--blue); transform:translateX(2px); }
.discovery-redesign .discovery-jump-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.discovery-redesign .discovery-jump-grid .discovery-top-card { min-width:0; min-height:58px; border:0; border-radius:11px; background:transparent!important; box-shadow:none; }
.discovery-redesign .discovery-jump-grid .discovery-top-card:hover { transform:translateY(-1px); box-shadow:none; }

.discovery-redesign .discovery-media-rail,
.discovery-redesign .discovery-artist-grid { display:flex!important; gap:18px!important; margin:0!important; padding:3px 0 10px!important; overflow-x:auto!important; overflow-y:visible!important; scrollbar-width:none; scroll-snap-type:x proximity; }
.discovery-redesign .discovery-media-rail::-webkit-scrollbar,
.discovery-redesign .discovery-artist-grid::-webkit-scrollbar { display:none; }
.discovery-redesign .discovery-media-card { flex:0 0 clamp(176px,16.5vw,224px)!important; width:clamp(176px,16.5vw,224px)!important; min-width:clamp(176px,16.5vw,224px)!important; max-width:none!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; scroll-snap-align:start; }
.discovery-redesign .discovery-media-art { width:100%!important; height:auto!important; aspect-ratio:1; margin:0 0 11px!important; border-radius:15px!important; overflow:hidden; background:var(--surface-2); }
.discovery-redesign .discovery-media-art img { width:100%; height:100%; border-radius:inherit!important; object-fit:cover; }
.discovery-redesign .track-info,
.discovery-redesign .playlist-info { display:block!important; padding:0 1px!important; text-align:left!important; }
.discovery-redesign :is(.track-title,.playlist-name) { margin:0 0 4px!important; overflow:hidden; color:var(--black); font-size:15px!important; font-weight:750; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.discovery-redesign .track-title a { color:inherit; text-decoration:none; }
.discovery-redesign :is(.track-artist,.playlist-count) { margin:0!important; overflow:hidden; color:var(--text-secondary)!important; font-size:12px!important; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.discovery-redesign .track-artist a { color:inherit; text-decoration:none; }
.discovery-redesign .playlist-description { display:none!important; }
.discovery-redesign .track-card-overlay { align-items:flex-end; justify-content:flex-start; padding:12px; background:rgba(5,8,15,.08); opacity:0; transition:opacity .2s ease; }
.discovery-redesign .track-card:hover .track-card-overlay { opacity:1; }
.discovery-redesign .track-card-overlay .play-track-btn-large { width:42px!important; height:42px!important; opacity:1; transform:none; }

.discovery-redesign .discovery-artist-grid > .discovery-artist-card { flex:0 0 138px!important; width:138px!important; min-width:138px!important; padding:0!important; text-align:left; scroll-snap-align:start; }
.discovery-redesign .discovery-artist-avatar { width:112px; height:112px; margin:0 0 10px; border-radius:50%; overflow:hidden; background:var(--surface-2); }
.discovery-redesign .discovery-artist-avatar img { width:100%; height:100%; object-fit:cover; }
.discovery-redesign .discovery-artist-card strong,
.discovery-redesign .discovery-artist-card span { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.discovery-redesign .discovery-artist-card strong { color:var(--black); font-size:13px; }
.discovery-redesign .discovery-artist-card span { margin-top:3px; color:var(--text-secondary); font-size:11px; }

.following-artist-rail { padding-bottom:2px; }
.discovery-following-lead { grid-template-columns:minmax(220px,320px) minmax(0,1fr); }
.following-lead-copy { max-width:620px; }
.following-empty-state,
.following-load-error { min-height:58vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.following-empty-icon { width:54px; height:54px; display:grid; place-items:center; margin-bottom:20px; border-radius:50%; background:var(--surface-2); color:var(--blue); }
.following-empty-state h1,.following-load-error h2 { max-width:650px; margin:0!important; font-size:clamp(34px,5vw,62px); letter-spacing:-.055em; }
.following-empty-state > p,.following-load-error > p { max-width:540px; margin:14px auto 28px!important; color:var(--text-secondary); line-height:1.5; }
.following-suggestions { justify-content:center; max-width:900px; }
.discovery-following-loading { min-height:58vh; display:flex; flex-direction:column; gap:28px; padding-top:24px; }
.discovery-following-loading[hidden] { display:none!important; }
.discovery-following-skeleton-head { display:flex; gap:18px; overflow:hidden; }
.discovery-skeleton-avatar { flex:0 0 92px; width:92px; height:92px; border-radius:50%; }
.discovery-following-skeleton-lead { display:grid; grid-template-columns:minmax(220px,310px) 1fr; align-items:center; gap:38px; min-height:330px; padding:28px; border-radius:24px; background:var(--surface-2); }
.discovery-following-skeleton-lead > span { width:100%; aspect-ratio:1; border-radius:17px; }
.discovery-following-skeleton-lead > div { display:grid; gap:14px; }
.discovery-following-skeleton-lead i { display:block; width:min(72%,420px); height:22px; border-radius:7px; }
.discovery-following-skeleton-lead i:first-child { width:min(42%,240px); height:12px; }
.discovery-following-skeleton-lead i:nth-child(2) { height:48px; }
.discovery-following-skeleton-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.discovery-following-skeleton-grid span { aspect-ratio:1; border-radius:15px; }
.discovery-skeleton-avatar,
.discovery-following-skeleton-lead > span,
.discovery-following-skeleton-lead i,
.discovery-following-skeleton-grid span { background:linear-gradient(100deg,var(--surface-2) 20%,color-mix(in srgb,var(--surface-2) 68%,var(--black)) 38%,var(--surface-2) 56%); background-size:220% 100%; animation:discoverySkeleton 1.25s ease-in-out infinite; }
@keyframes discoverySkeleton { to { background-position-x:-220%; } }

@media (max-width:1023px) {
  .discovery-desktop-only { display:none!important; }
  .discovery-mobile-only { display:block!important; }
  .mobile-discovery-switch {
    position:absolute;
    left:50%;
    width:184px;
    height:38px;
    align-items:center;
    padding:3px;
    border-radius:999px;
    background:rgba(255,255,255,.76);
    box-shadow:0 8px 20px rgba(10,18,38,.12);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(-50%) scale(.98);
    transition:opacity .25s ease,transform .38s cubic-bezier(.22,1,.36,1),visibility 0s linear .28s;
  }
  body.discovery-page-active.mobile-top-at-page-top .mobile-discovery-switch { display:flex; opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%); transition-delay:0s; }
  body.discovery-page-active.mobile-top-scrolled .mobile-discovery-switch { display:flex; }
  .mobile-discovery-switch-indicator { position:absolute; z-index:0; left:3px; top:3px; width:72px; height:32px; border-radius:999px; background:var(--black); transform:translateX(0); transition:width .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1); }
  .mobile-discovery-switch.is-following .mobile-discovery-switch-indicator { width:106px; transform:translateX(72px); }
  .mobile-discovery-switch button { position:relative; z-index:1; height:32px; padding:0; border:0; background:transparent; color:var(--text-secondary); font:750 11px/1 "Syne",sans-serif; cursor:pointer; transition:color .24s ease,transform .24s ease; }
  .mobile-discovery-switch button:first-of-type { width:72px; }.mobile-discovery-switch button:last-of-type { width:106px; white-space:nowrap; }
  .mobile-discovery-switch button.is-active { color:var(--white); }
  .mobile-discovery-switch button:active { transform:scale(.95); }
  .discovery-redesign { max-width:none; padding:74px 14px 42px; overflow:hidden; }
  .discovery-feed-mobile,
  .following-mobile-view { display:flex!important; flex-direction:column; gap:42px; padding-top:16px; }
  .discovery-mobile-scroll-marker { display:block; width:1px; height:12px; pointer-events:none; }
  .discovery-mobile-heading { padding:8px 2px 0; }
  .discovery-mobile-heading h1 { margin:0!important; font-size:42px; line-height:.96; letter-spacing:-.06em; }
  .discovery-mobile-heading p { max-width:330px; margin:12px 0 0!important; color:var(--text-secondary); font-size:13px; line-height:1.45; }
  .discovery-mobile-lead { position:relative; min-height:410px; overflow:hidden; border-radius:20px; background:var(--surface-2); color:#fff; }
  .discovery-mobile-lead > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .discovery-mobile-lead-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 32%,rgba(3,5,10,.16) 52%,rgba(3,5,10,.84) 100%); }
  .discovery-mobile-lead-copy { position:absolute; z-index:2; left:20px; right:76px; bottom:20px; }
  .discovery-mobile-lead-copy > span { color:rgba(255,255,255,.7); }
  .discovery-mobile-lead-copy h2 { margin:0!important; overflow:hidden; font-size:31px; line-height:1; letter-spacing:-.045em; text-overflow:ellipsis; white-space:nowrap; }
  .discovery-mobile-lead-copy p { margin:7px 0 0!important; color:rgba(255,255,255,.74); font-size:13px; }
  .discovery-mobile-lead > .play-track-btn-large { position:absolute; z-index:3; right:18px; bottom:18px; width:46px!important; height:46px!important; opacity:1!important; }

  .discovery-redesign .discovery-jump-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .discovery-redesign .discovery-jump-grid .discovery-top-card { grid-template-columns:48px minmax(0,1fr); min-height:48px; border-radius:10px; }
  .discovery-redesign .discovery-jump-grid .discovery-top-card-cover { width:48px; height:48px; }
  .discovery-redesign .discovery-jump-grid .discovery-top-card-text { padding-right:7px; }
  .discovery-redesign .discovery-jump-grid .discovery-top-card-text strong { font-size:11px; }
  .discovery-redesign .discovery-jump-grid .discovery-top-card-text small { display:none; }

  .discovery-redesign .discovery-section { gap:13px; }
  .discovery-section-heading { padding:0 2px; }
  .discovery-section-heading h2 { font-size:25px; }
  .discovery-section-heading span { margin-bottom:5px; font-size:9px; }
  .discovery-redesign .discovery-media-rail { gap:13px!important; margin-right:-14px!important; padding-right:14px!important; }
  .discovery-redesign .discovery-media-card { flex-basis:43vw!important; width:43vw!important; min-width:43vw!important; max-width:188px!important; }
  .discovery-redesign .discovery-mobile-featured-rail .discovery-media-card { flex-basis:64vw!important; width:64vw!important; min-width:64vw!important; max-width:260px!important; }
  .discovery-redesign .discovery-media-art { border-radius:16px!important; }
  .discovery-redesign :is(.track-title,.playlist-name) { font-size:15px!important; }
  .discovery-redesign .track-card-overlay { opacity:1; background:transparent; padding:10px; }
  .discovery-redesign .track-card-overlay .play-track-btn-large { width:38px!important; height:38px!important; }
  .discovery-redesign .discovery-artist-grid { margin-right:-14px!important; padding-right:14px!important; }

  .following-mobile-stories { display:flex; gap:14px; margin-right:-14px; padding:1px 14px 8px 1px; overflow-x:auto; scrollbar-width:none; }
  .following-mobile-stories::-webkit-scrollbar { display:none; }
  .following-mobile-story { flex:0 0 68px; width:68px; color:var(--black); text-align:center; text-decoration:none; }
  .following-mobile-story > span { width:64px; height:64px; display:grid; place-items:center; padding:3px; border:2px solid var(--blue); border-radius:50%; overflow:hidden; }
  .following-mobile-story img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
  .following-mobile-story small { display:block; margin-top:7px; overflow:hidden; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
  .following-mobile-feature { display:grid; grid-template-columns:116px minmax(0,1fr) 44px; align-items:center; gap:14px; padding:12px; border-radius:17px; background:var(--surface-2); }
  .following-mobile-feature > img { width:116px; height:116px; border-radius:13px; object-fit:cover; }
  .following-mobile-feature div { min-width:0; }
  .following-mobile-feature h2,.following-mobile-feature p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .following-mobile-feature h2 { margin:0!important; font-size:21px; letter-spacing:-.035em; }
  .following-mobile-feature p { margin:6px 0 0!important; color:var(--text-secondary); font-size:12px; }
  .following-mobile-feature > .play-track-btn-large { width:42px!important; height:42px!important; opacity:1!important; }
  .following-mobile-track-list { border-top:1px solid var(--border); }
  .following-mobile-track { display:grid; grid-template-columns:62px minmax(0,1fr) 38px; align-items:center; gap:11px; padding:10px 1px; border-bottom:1px solid var(--border); }
  .following-mobile-track img { width:62px; height:62px; border-radius:10px; object-fit:cover; }
  .following-mobile-track div { min-width:0; }
  .following-mobile-track strong,.following-mobile-track span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .following-mobile-track strong { font-size:14px; }.following-mobile-track strong a { color:var(--black); text-decoration:none; }
  .following-mobile-track span { margin-top:5px; color:var(--text-secondary); font-size:10.5px; }
  .following-mobile-track .play-track-btn-large { width:36px!important; height:36px!important; opacity:1!important; background:transparent!important; color:var(--black)!important; box-shadow:none!important; }
  .following-empty-state { min-height:64vh; padding:30px 2px; }
  .following-empty-state h1 { font-size:38px; }
  .following-suggestions { justify-content:flex-start; margin-right:-14px!important; }
  .discovery-following-loading { min-height:64vh; gap:20px; padding-top:16px; overflow:hidden; }
  .discovery-skeleton-avatar { flex-basis:62px; width:62px; height:62px; }
  .discovery-following-skeleton-head { gap:14px; }
  .discovery-following-skeleton-lead { grid-template-columns:108px minmax(0,1fr); min-height:132px; gap:14px; padding:12px; border-radius:17px; }
  .discovery-following-skeleton-lead > span { border-radius:13px; }
  .discovery-following-skeleton-lead i:nth-child(2) { height:28px; }
  .discovery-following-skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
}

@media (max-width:1023px) {
  body.discovery-page-active .mobile-top-nav-actions { opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; }
}

@media (max-width:374px) {
  .mobile-discovery-switch { width:132px; }
  .mobile-discovery-switch-indicator { width:46px; }
  .mobile-discovery-switch.is-following .mobile-discovery-switch-indicator { width:80px; transform:translateX(46px); }
  .mobile-discovery-switch button { font-size:9.5px; }
  .mobile-discovery-switch button:first-of-type { width:46px; }
  .mobile-discovery-switch button:last-of-type { width:80px; }
}

html.dark-mode .mobile-discovery-switch { background:rgba(18,24,36,.76); box-shadow:0 8px 20px rgba(0,0,0,.28); }
html.dark-mode .mobile-discovery-switch-indicator { background:#eef1f7; }
html.dark-mode .mobile-discovery-switch button.is-active { color:#10131a; }
html.dark-mode .desktop-discovery-switch { border-color:#303849; background:#151922; }
html.dark-mode .desktop-discovery-switch-indicator { background:#34415b; }
html.dark-mode .desktop-discovery-switch button.is-active { color:#f3f6fc; }
html.dark-mode .discovery-feed-lead,
html.dark-mode .discovery-following-lead,
html.dark-mode .following-mobile-feature { background:#151922; }
html.dark-mode .discovery-quick-card,
html.dark-mode .discovery-mobile-jump a,
html.dark-mode .following-mobile-track { border-color:#252b37; }

@media (prefers-reduced-motion:reduce) {
  .discovery-view-panel,.discovery-view-panel.is-leaving,.mobile-discovery-switch,.mobile-discovery-switch-indicator,.desktop-discovery-home-morph,.desktop-discovery-home-link,.desktop-discovery-switch,.desktop-discovery-switch-indicator { animation:none!important; transition:none!important; }
}

.profile-concert-row { text-decoration: none; color: inherit; }
.profile-concert-row .track-item-cover img { width: 100%; height: 100%; object-fit: cover; }
.profile-concert-date { min-width: 118px; }
.concert-list-page .profile-release-list-header { margin-bottom: 30px; }
.concert-list-page .concert-list-section + .concert-list-section { margin-top: 52px; }
.concert-list-empty { padding: 2px 0; background: transparent; border: 0; border-radius: 0; }
.concert-community-content { display: grid; gap: 52px; }
.concert-community-note,
.concert-empty-copy { color: var(--text-secondary); }
.concert-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.concert-photo {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--white) 82%, transparent);
  cursor: pointer;
}
.concert-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.concert-photo:hover img { transform: scale(1.035); }
.concert-photo span { position: absolute; left: 8px; right: 8px; bottom: 7px; overflow: hidden; color: #fff; font-size: 11px; text-align: left; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 5px #000; }
.concert-album-card { cursor: default; }
.concert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 56px 18px 24px;
  background: rgba(3, 5, 9, .88);
  backdrop-filter: blur(22px);
}
.concert-lightbox[hidden] { display: none; }
.concert-lightbox img { max-width: min(1100px, 94vw); max-height: 80dvh; border-radius: 16px; object-fit: contain; }
.concert-lightbox p { position: absolute; bottom: 18px; color: #fff; }
.concert-lightbox-actions { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 8px; }
.concert-lightbox-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; }

@media (max-width: 768px) {
  .profile-concert-date { min-width: 86px; font-size: 12px; }
  .concert-community-content { gap: 36px; }
  .concert-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .concert-photo { border-radius: 8px; }
  .concert-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concert-detail-page .playlist-content { padding-left: 14px; padding-right: 14px; }
  .concert-list-page .concert-list-section + .concert-list-section { margin-top: 38px; }
}

.lyrics-marketplace-page{width:min(1240px,calc(100% - 32px));margin:0 auto;padding:42px 0 70px}.lyrics-marketplace-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.lyrics-marketplace-hero h1,.lyrics-marketplace-detail-copy h1{margin:4px 0 8px;font-size:clamp(2rem,5vw,4rem);line-height:1}.lyrics-marketplace-hero p{margin:0;color:var(--text-secondary,#64748b)}.lyrics-marketplace-kicker{font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8b5cf6}.lyrics-marketplace-filters{display:grid;grid-template-columns:minmax(220px,1fr) 190px 170px auto;gap:10px;padding:14px;border:1px solid #e2e8f0;border-radius:18px;background:#fff;margin-bottom:22px}.lyrics-marketplace-filters input,.lyrics-marketplace-filters select{width:100%;min-height:44px;border:1px solid #dbe2ea;border-radius:11px;background:#fff;color:#172033;padding:0 12px}.lyrics-marketplace-results-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:0 0 14px;color:#64748b}.lyrics-marketplace-public-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.lyrics-marketplace-public-grid .lyrics-marketplace-card-body h2{font-size:1rem;margin:0}.lyrics-marketplace-card-meta,.lyrics-marketplace-badges,.lyrics-marketplace-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.lyrics-marketplace-card-meta{justify-content:space-between;color:#64748b;font-size:.8rem}.lyrics-marketplace-badges>span,.lyrics-marketplace-tags>span{padding:5px 9px;border:1px solid #dbe2ea;border-radius:999px;font-size:.75rem;font-weight:700}.lyrics-marketplace-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}.lyrics-marketplace-empty{text-align:center;padding:60px 20px;border:1px dashed #cbd5e1;border-radius:18px}.lyrics-marketplace-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;color:inherit;font-weight:700}.lyrics-marketplace-detail-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);align-items:center;gap:clamp(32px,7vw,90px)}.lyrics-marketplace-detail-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.lyrics-marketplace-detail-copy h1{margin:0}.lyrics-marketplace-detail-description{font-size:1.1rem;line-height:1.7;color:#475569;white-space:pre-wrap}.lyrics-marketplace-creator{margin:0}.lyrics-marketplace-detail-preview{position:relative;overflow:hidden;border-radius:26px;box-shadow:0 24px 70px rgba(15,23,42,.2);aspect-ratio:1}.lyrics-marketplace-detail-preview canvas{width:100%;height:100%;display:block}.lyrics-marketplace-detail-preview>span{position:absolute;left:14px;bottom:14px;padding:7px 10px;border-radius:999px;background:rgba(15,23,42,.72);color:#fff;font-size:.75rem}.lyrics-marketplace-use-btn{width:min(320px,100%);margin-top:12px}.lyrics-marketplace-report-btn{border:0;background:transparent;color:#64748b;text-decoration:underline;cursor:pointer;padding:4px}.lyrics-video-marketplace-toggle{margin:12px 0}.lyrics-video-marketplace-fields{padding:14px;border:1px solid #dbe2ea;border-radius:14px;background:#f8fafc}.lyrics-video-marketplace-field-grid,.lyrics-video-marketplace-warning-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lyrics-video-marketplace-warning-grid{grid-template-columns:repeat(3,max-content)}
@media(max-width:980px){.lyrics-marketplace-public-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.lyrics-marketplace-detail-layout{grid-template-columns:1fr}.lyrics-marketplace-detail-preview{grid-row:1;max-width:620px;width:100%;margin:auto}}@media(max-width:720px){.lyrics-marketplace-page{width:min(100% - 20px,1240px);padding-top:22px}.lyrics-marketplace-hero{align-items:flex-start;flex-direction:column}.lyrics-marketplace-filters{grid-template-columns:1fr}.lyrics-marketplace-results-head{align-items:flex-start;flex-direction:column}.lyrics-marketplace-public-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lyrics-marketplace-detail-layout{gap:24px}.lyrics-marketplace-detail-copy h1{font-size:2.3rem}.lyrics-video-marketplace-field-grid,.lyrics-video-marketplace-warning-grid{grid-template-columns:1fr}}@media(max-width:440px){.lyrics-marketplace-public-grid{grid-template-columns:1fr}.lyrics-marketplace-pagination{justify-content:space-between;gap:8px}.lyrics-marketplace-pagination .btn{padding-inline:12px}}

.settings-mobile-index {
  display: none;
}

.settings-profile-editor {
  gap: 14px;
}

.settings-profile-mockup {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border-radius: 18px;
  background: #10131a;
  color: #fff;
  isolation: isolate;
}

.settings-profile-mockup-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #202738, #0d1017);
  background-size: cover;
  background-position: center;
}

.settings-profile-mockup-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 7, 10, 0.6), rgba(5, 7, 10, 0.24) 64%, rgba(5, 7, 10, 0.56));
  backdrop-filter: blur(1px);
}

.settings-profile-edit-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(14px);
}

.settings-profile-mockup-info {
  position: relative;
  z-index: 1;
  min-height: 340px;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(170px, 230px);
  align-items: center;
  gap: 28px;
  padding: 54px 36px 34px;
}

.settings-profile-avatar-picker {
  position: relative;
  width: 156px;
  height: 156px;
  padding: 0;
  overflow: visible;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: #11151d;
  color: #fff;
  cursor: pointer;
}

#settingsProfileAvatarPreview,
#settingsProfileAvatarPreview img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

#settingsProfileAvatarPreview {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 50px;
}

#settingsProfileAvatarPreview img { object-fit: cover; }

.settings-profile-avatar-picker > i {
  position: absolute;
  right: -2px;
  bottom: 4px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #10131a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.settings-profile-mockup-copy { min-width: 0; }
.settings-profile-mockup-copy .playlist-type { color: rgba(255, 255, 255, 0.8); }
.settings-profile-name-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.settings-profile-name-row .settings-profile-name-input { min-width: 0; flex: 1 1 auto; }
.settings-profile-name-row > i { flex: 0 0 auto; color: #fff; font-size: 26px; }

.settings-profile-name-input,
.settings-profile-bio-input {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.settings-profile-name-input {
  margin: 18px 0 10px;
  font: 750 clamp(38px, 5vw, 64px)/0.98 "Syne", sans-serif;
  letter-spacing: -0.045em;
}

.settings-profile-bio-input {
  min-height: 50px;
  height: auto;
  overflow-y: hidden;
  resize: none;
  field-sizing: content;
  font: 500 16px/1.45 "Syne", sans-serif;
  color: rgba(255, 255, 255, 0.82);
}

.settings-profile-bio-input::-webkit-scrollbar { display: none; }

.settings-profile-name-input:focus,
.settings-profile-bio-input:focus {
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.72);
}

.settings-profile-social-trigger {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-weight: 700;
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.settings-profile-social-trigger > i:last-child { transition: transform .2s ease; }
.settings-profile-social-trigger:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.56);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.settings-profile-social-trigger:hover > i:last-child { transform: translateX(3px); }
.settings-profile-social-trigger:active { transform: translateY(0); }
.settings-profile-social-trigger-mobile { display: none; }

.settings-profile-media-actions { display: grid; gap: 0; }
.settings-profile-media-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--border);
}
.settings-profile-media-row > span { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 2px 10px; }
.settings-profile-media-row > span > i { grid-row: 1 / 3; color: var(--muted); }
.settings-profile-media-row small { color: var(--text-secondary); }
.settings-profile-media-row > div { display: flex; gap: 7px; }
.settings-profile-media-row .btn {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  line-height: 1;
}
.settings-media-remove { color: var(--danger) !important; }
.settings-profile-save-row { display: flex; align-items: center; gap: 14px; }

.settings-profile-vanity-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
}
.settings-profile-vanity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.settings-profile-vanity-card p { margin: 3px 0 10px; color: var(--text-secondary); font-size: 13px; }
.settings-profile-vanity-card small { display: block; margin-top: 7px; color: var(--text-secondary); }
.settings-profile-vanity-input {
  display: flex;
  align-items: center;
  width: min(520px, 100%);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
}
.settings-profile-vanity-input > span { padding-left: 13px; color: var(--text-secondary); font-size: 14px; white-space: nowrap; }
.settings-profile-vanity-input input { min-width: 0; flex: 1; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.settings-profile-vanity-input input:disabled { cursor: not-allowed; opacity: .62; }

.settings-social-fields { display: grid; gap: 2px; }
.settings-social-modal .modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.settings-social-field {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.settings-social-field > i { margin-top: 12px; color: var(--muted); text-align: center; }
.settings-social-field > span { display: grid; gap: 6px; }
.settings-social-field input { min-height: 42px; }

.profile-link-editor { display: grid; gap: 12px; }
.profile-link-editor-list { display: grid; gap: 8px; }
.profile-link-editor-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
}
.profile-link-editor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 10px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  font-size: 19px;
}
.profile-link-editor-icon img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.profile-link-editor-fields { display: grid; grid-template-columns: minmax(120px, .55fr) minmax(180px, 1fr); gap: 8px; }
.profile-link-editor-fields input { width: 100%; min-height: 42px; }
.profile-link-editor-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  color: var(--danger);
  background: transparent;
  cursor: pointer;
}
.profile-link-editor-remove:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.profile-link-editor-empty { display: grid; justify-items: center; gap: 5px; padding: 28px 14px; color: var(--text-secondary); text-align: center; }
.profile-link-editor-empty i { margin-bottom: 3px; font-size: 22px; }
.profile-link-editor-empty strong { color: var(--black); }
.profile-link-editor-list:not(:empty) + .profile-link-editor-empty { display: none; }
.profile-link-editor-add { justify-self: start; }

@media (max-width: 640px) {
  .profile-link-editor-row { grid-template-columns: 36px minmax(0, 1fr) 36px; padding: 9px; gap: 8px; }
  .profile-link-editor-icon { width: 36px; height: 36px; }
  .profile-link-editor-fields { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  body:has(#settingsPage) .mobile-top-nav-action { display: none !important; }
  .settings-container {
    max-width: none;
    padding: 8px 14px 130px;
  }
  .settings-container > .playlists-header,
  .settings-tabs { display: none !important; }
  .settings-mobile-index { display: block; }
  .settings-mobile-account-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 16px 4px 22px;
  }
  .settings-mobile-account-avatar,
  .settings-mobile-account-avatar img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
  }
  .settings-mobile-account-avatar { display: grid; place-items: center; overflow: hidden; background: var(--hover-bg); color: var(--muted); }
  .settings-mobile-account-avatar img { object-fit: cover; }
  .settings-mobile-account-row > span:last-child { display: grid; gap: 3px; }
  .settings-mobile-account-row small { color: var(--text-secondary); }
  .settings-mobile-index-row {
    width: 100%;
    min-height: 56px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--black);
    font: 700 15px/1.2 "Syne", sans-serif;
    text-align: left;
  }
  .settings-mobile-index-row > i { color: var(--muted); text-align: center; }
  .settings-mobile-index-row > i:last-child { font-size: 11px; }
  .settings-mobile-index-row.is-danger,
  .settings-mobile-index-row.is-danger > i { color: var(--danger); }
  #settingsPage:not(.mobile-settings-section-open) > .settings-tab-content { display: none !important; }
  #settingsPage.mobile-settings-section-open > .settings-mobile-index { display: none; }
  #settingsPage.mobile-settings-section-open > .settings-tab-content.active { display: grid; }
  .settings-tab-content > h2 { margin: 8px 0 4px; font-size: 24px; }
  .settings-tab-content.active,
  .settings-form { gap: 0; }
  .settings-container .settings-form > .form-group,
  .settings-profile-main,
  .settings-profile-social-card,
  .settings-container .preferences-card,
  .settings-container .danger-section {
    margin: 0;
    padding: 16px 2px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .settings-tab-content hr { display: none; }
  .settings-container .preferences-row { padding: 15px 2px; border-bottom: 1px solid var(--border); }
  .settings-profile-mockup {
    width: 100vw;
    min-height: min(100vw, 520px);
    margin-left: calc(50% - 50vw);
    border-radius: 0;
  }
  .settings-profile-mockup-banner {
    height: min(100vw, 520px);
    background-position: top center;
  }
  .settings-profile-mockup-banner::after {
    background: linear-gradient(to bottom, transparent 32%, rgba(6, 9, 15, 0.3) 68%, rgba(6, 9, 15, 0.92));
  }
  .settings-profile-edit-badge { top: 12px; right: 14px; }
  .settings-profile-mockup-info {
    min-height: min(100vw, 520px);
    display: block;
    padding: clamp(190px, 54vw, 290px) 16px 18px;
  }
  .settings-profile-avatar-picker { display: none; }
  .settings-profile-name-input { margin: 11px 0 8px; font-size: clamp(30px, 9vw, 46px); }
  .settings-profile-bio-input { min-height: 44px; font-size: 14px; }
  .settings-profile-social-trigger { width: 100%; margin-top: 10px; border-radius: 12px; }
  .settings-profile-social-trigger-preview { display: none; }
  .settings-profile-social-trigger-mobile {
    display: grid;
    margin: 10px 0 2px;
    border-color: var(--border);
    background: color-mix(in srgb, var(--white) 88%, transparent);
    color: var(--black);
  }
  .settings-profile-media-row { display: grid; gap: 11px; padding: 15px 2px; }
  .settings-profile-media-row > div { flex-wrap: wrap; }
  .settings-profile-save-row { position: sticky; bottom: calc(var(--mobile-bottom-nav-height, 64px) + 8px); z-index: 5; padding: 10px 0; background: var(--white); }
  .settings-profile-save-row .btn { width: 100%; }
  .settings-social-modal .modal-content { max-height: 88dvh; }
  .settings-social-fields { padding-top: 0 !important; }
  .settings-container #billing-tab :is(.ap-card, .ap-gift-card, .ap-my-gifts-card, .ap-invoices) {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Mobile expanded player sheet header. */
@media (max-width:768px) {
  .player-expanded-header {
    position:relative;
    display:block;
    min-height:64px;
    padding:0;
    background:transparent;
    overflow:visible;
  }

  .player-expanded-header::after {
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    right:0;
    height:112px;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(var(--player-expanded-overlay-rgb),.16),rgba(var(--player-expanded-overlay-rgb),.05) 58%,transparent);
    -webkit-backdrop-filter:blur(13px) saturate(125%);
    backdrop-filter:blur(13px) saturate(125%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 100%);
  }

  .player-expanded-mobile-grabber {
    position:absolute;
    z-index:2;
    top:calc(9px + env(safe-area-inset-top));
    left:50%;
    width:48px;
    height:5px;
    border-radius:999px;
    background:rgba(var(--player-expanded-text-rgb),.36);
    transform:translateX(-50%);
  }

  .player-expanded-header-actions {
    position:absolute;
    z-index:2;
    top:calc(24px + env(safe-area-inset-top));
    right:18px;
    display:inline-flex !important;
    align-items:center;
    gap:8px;
  }

  .player-expanded-header-actions .player-expanded-add-share {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:auto;
    min-width:88px;
    padding:0 15px;
    border-radius:999px !important;
    gap:7px;
    font-size:15px;
    white-space:nowrap;
  }

  .player-expanded-add-share span {
    font-size:12px;
    font-weight:800;
    line-height:1;
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-content {
    padding-top:64px;
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-cover {
    width:min(72vw,280px);
    height:auto;
    aspect-ratio:1;
    border-radius:20px;
  }

  .player-expanded-panel.has-soundvia-loop .player-expanded-mobile-grabber {
    background:rgba(255,255,255,.4);
  }
}

@media (min-width: 1024px) {
  .main-content:has(> .detail-liquid-background) .mobile-top-blend-profile .profile-actions .follow-btn {
    border-color: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.78) !important;
    background: color-mix(in srgb, rgb(var(--detail-accent-rgb, 26, 92, 255)) 86%, rgb(var(--detail-readable-panel-rgb, 0, 0, 0)) 14%) !important;
    color: rgb(var(--detail-accent-contrast-rgb, 255, 255, 255)) !important;
    box-shadow: 0 12px 30px rgba(var(--detail-accent-rgb, 26, 92, 255), 0.22);
  }

  .main-content:has(> .detail-liquid-background) .mobile-top-blend-profile .profile-actions #followBtn {
    background: rgb(var(--detail-accent-rgb, 26, 92, 255)) !important;
    box-shadow: 0 12px 30px rgba(var(--detail-accent-rgb, 26, 92, 255), 0.28) !important;
  }

  .main-content:has(> .detail-liquid-background) .mobile-top-blend-profile .profile-actions #followBtn:hover {
    box-shadow: 0 15px 34px rgba(var(--detail-accent-rgb, 26, 92, 255), 0.36) !important;
  }
}

.ap-native-disclosure > summary {
  list-style: none;
  cursor: pointer;
}
.ap-native-disclosure > summary::-webkit-details-marker { display: none; }
.ap-native-disclosure > summary > i:last-child,
.ap-native-summary-chevron { transition: transform 0.25s ease; }
.ap-native-disclosure.is-expanded > summary > i:last-child,
.ap-native-disclosure.is-expanded > summary .ap-native-summary-chevron { transform: rotate(180deg); }
.ap-native-expand,
.ap-native-disclosure:not([open]) > .ap-native-expand {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-8px);
  transition: grid-template-rows 0.48s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
.ap-native-disclosure.is-expanded > .ap-native-expand {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.ap-native-expand-inner {
  min-height: 0;
  overflow: hidden;
}
.ap-subscribe-btn[hidden],
.ap-plan-trial[hidden] { display: none !important; }

@media (min-width: 1024px) {
  #billing-tab .ap-native-disclosure > summary:not(.ap-gift-card-header):not(.ap-invoices-head) { display: none; }
}

@media (max-width: 1023px) {
  #settingsPage #settingsProfileMockup {
    width: 100%;
    max-width: 440px;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: 6px auto 14px;
    border-radius: 20px;
  }
  #settingsPage #settingsProfileBannerPreview {
    width: 100%;
    height: 100%;
    background-image: var(--settings-profile-avatar-image, linear-gradient(145deg, #252b38, #10131a)) !important;
    background-position: center !important;
  }
  #settingsPage .settings-profile-mockup-info {
    min-height: 100%;
    padding: 52% 16px 16px;
  }

  #billing-tab > h2 { display: none; }
  #settingsPage #billing-tab .settings-form { gap: 14px; }
  #settingsPage #billing-tab .ap-card {
    width: 100%;
    max-width: 520px;
    margin: 4px auto 0;
    padding: 20px 16px 16px;
    overflow: visible;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(155deg, rgba(92, 63, 180, 0.18), rgba(26, 92, 255, 0.08) 45%, transparent 82%);
    box-shadow: none;
  }
  #settingsPage #billing-tab .ap-card-header {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;
    padding: 0 0 18px;
    border: 0;
  }
  #settingsPage #billing-tab .ap-gem-wrap { width: 52px; height: 52px; }
  #settingsPage #billing-tab .ap-card-title { font-size: 25px; }
  #settingsPage #billing-tab .ap-card-sub { margin-top: 4px; font-size: 13px; line-height: 1.45; }
  #settingsPage #billing-tab .ap-status-pill { grid-column: 1 / -1; justify-self: start; }
  #settingsPage #billing-tab .ap-native-disclosure {
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #settingsPage #billing-tab .ap-native-disclosure > summary {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
    color: var(--black);
    font-weight: 750;
  }
  #settingsPage #billing-tab .ap-native-disclosure > summary > span { display: inline-flex; align-items: center; gap: 9px; }
  #settingsPage #billing-tab .ap-native-disclosure > summary > i:last-child { color: var(--muted); font-size: 12px; }
  #settingsPage #billing-tab .ap-features-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 10px;
  }
  #settingsPage #billing-tab .ap-feature {
    min-height: 45px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
  }
  #settingsPage #billing-tab .ap-plan-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 15px 0 12px;
  }
  #settingsPage #billing-tab .ap-plan-btn {
    min-width: 0;
    padding: 14px 11px;
    border-radius: 16px;
    box-shadow: none;
  }
  #settingsPage #billing-tab .ap-plan-btn.is-selected {
    border-color: var(--blue);
    background: rgba(26, 92, 255, 0.1);
  }
  #settingsPage #billing-tab .ap-actions {
    position: sticky;
    bottom: calc(var(--mobile-bottom-nav-height, 64px) + 8px);
    z-index: 6;
    display: grid;
    gap: 7px;
    margin: 12px -2px 0;
    padding: 10px 0;
    background: color-mix(in srgb, var(--white) 92%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
  }
  #settingsPage #billing-tab :is(.ap-subscribe-btn, .ap-manage-btn) { width: 100%; min-height: 50px; border-radius: 14px; }
  #settingsPage #billing-tab .ap-billing-status { text-align: center; font-size: 12px; }
  #settingsPage #billing-tab .ap-invoices { margin-top: 4px; padding: 0; }
  #settingsPage #billing-tab .ap-invoices-list { padding-bottom: 8px; }
  #settingsPage #billing-tab .ap-invoice-row { border-radius: 0; border-bottom: 1px solid var(--border); }

  #settingsPage #billing-tab .ap-gift-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 2px 12px;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #settingsPage #billing-tab .ap-gift-card-header { display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; min-height: 76px; margin: 0; padding: 10px 0; border: 0; }
  #settingsPage #billing-tab .ap-gift-card.is-expanded > .ap-native-expand { transform: none; }
  #settingsPage #billing-tab .ap-gift-icon-wrap { width: 42px; height: 42px; }
  #settingsPage #billing-tab .ap-gift-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #settingsPage #billing-tab .ap-gift-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #settingsPage #billing-tab .ap-gift-actions { display: grid; }
  #settingsPage #billing-tab .ap-gift-send-btn { width: 100%; min-height: 48px; border-radius: 14px; }

  body.artist-plus-sheet-open { overflow: hidden; }
  #settingsPage #billing-tab .ap-legal-disclosure[open] {
    position: fixed;
    inset: 0;
    z-index: 7200;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border: 0;
    background: rgba(5, 7, 12, 0.58);
    backdrop-filter: blur(18px);
  }
  #settingsPage #billing-tab .ap-legal-disclosure[open] > summary,
  #settingsPage #billing-tab .ap-legal-disclosure[open] > .ap-native-expand {
    width: min(100%, 620px);
    margin: 0 auto;
    background: var(--white);
  }
  #settingsPage #billing-tab .ap-legal-disclosure[open] > summary {
    flex: 0 0 auto;
    padding: 10px 16px 0;
    border-radius: 24px 24px 0 0;
  }
  #settingsPage #billing-tab .ap-legal-disclosure[open] > .ap-native-expand {
    border-radius: 0 0 24px 24px;
  }
  #settingsPage #billing-tab .ap-legal-disclosure[open] > .ap-native-expand > .ap-native-expand-inner {
    max-height: 62dvh;
    overflow-y: auto;
  }
  #settingsPage #billing-tab .ap-legal-disclosure[open] .ap-billing-disclosure {
    padding: 14px 16px 20px;
    border: 0;
    border-radius: 0 0 24px 24px;
  }
}

#playlistTracksList,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: var(--white);
}

#playlistTracksList .tracks-header,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .tracks-header {
  grid-template-columns: 44px minmax(220px, 1.4fr) minmax(140px, 0.8fr) 64px;
  gap: 16px;
  padding: 10px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

#playlistTracksList .track-row,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row {
  grid-template-columns: 44px minmax(220px, 1.4fr) minmax(140px, 0.8fr) 64px;
  gap: 16px;
  min-height: 64px;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: var(--white);
  transition: background-color 0.16s ease;
}

#playlistTracksList .track-row:last-child,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row:last-child {
  border-bottom: 0;
}

#playlistTracksList .track-row:hover,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row:hover {
  background: color-mix(in srgb, var(--black) 4%, var(--white));
}

#playlistTracksList .track-name,
#playlistTracksList .track-name a,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-name,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-name a {
  color: var(--black);
  font-weight: 600;
}

#playlistTracksList .track-meta-small,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-meta-small {
  margin-top: 3px;
  color: var(--text-secondary);
}

#playlistTracksList .track-btn,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-btn {
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: 50%;
}

#playlistTracksList .track-btn:hover,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-btn:hover {
  background: color-mix(in srgb, var(--blue) 13%, transparent);
}

#playlistTracksList .track-row.sv-now-playing-track,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row.sv-now-playing-track {
  background: color-mix(in srgb, var(--blue) 8%, var(--white));
}

@media (max-width: 768px) {
  #playlistTracksList,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #playlistTracksList .tracks-header,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .tracks-header {
    display: none;
  }

  #playlistTracksList .track-row,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row {
    grid-template-columns: 30px minmax(0, 1fr) 42px;
    gap: 9px;
    min-height: 60px;
    padding: 8px 2px;
  }

  #playlistTracksList .track-order-index {
    display: none;
  }

  #playlistTracksList .track-row:not(:has(.drag-handle)),
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  #playlistTracksList .track-row:not(:has(.drag-handle)) .track-number,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-number {
    display: none;
  }

  #playlistTracksList .track-row .track-artist,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row .track-artist {
    display: none;
  }

  #playlistTracksList .track-thumbnail,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-thumbnail {
    width: 42px;
    height: 42px;
    border-radius: 4px;
  }

  #playlistTracksList .track-info-small,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-info-small {
    min-width: 0;
  }

  #playlistTracksList .track-name,
  #playlistTracksList .track-meta-small,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-name,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-meta-small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #playlistTracksList .track-btn,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-btn {
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 769px) {
  #mainContent .song-detail-container .sd-artist-link {
    color: rgb(var(--detail-accent-rgb, 26, 92, 255));
  }

  #mainContent .song-detail-container .sd-chip {
    border-color: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.5);
    background: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.16);
    color: rgb(var(--detail-accent-rgb, 26, 92, 255));
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
  }
}

#mainContent .song-detail-container .sd-body {
  border-top: 0;
}

#mainContent .release-details-list .sd-detail-row,
#mainContent .song-detail-container .sd-detail-grid .sd-detail-row {
  border-bottom: 0 !important;
}

#mainContent #playlistTracksList .track-row,
#mainContent .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row {
  border-bottom: 0 !important;
}

@media (max-width: 1023px) {
  .playlist-detail-container[data-playlist-id] .playlist-track-search-row {
    display: none !important;
  }
}


.library-mobile-reorder-grip {
  display: none;
}

#libraryGrid .library-card.library-filter-hidden,
#libraryGrid .library-card[hidden] {
  display: none !important;
}

.library-item-kind,
.library-item-meta-separator {
  display: none;
}

@media (max-width: 1023px) {
  body.mobile-library-visible .mobile-top-nav-library-filter {
    margin-left: 2px;
  }

  body.mobile-library-edit-mode :is(#mobileTopNavLibraryFilter, #mobileTopNavLibraryLayout, #mobileTopNavCreatePlaylist) {
    display: none !important;
  }

  body.mobile-library-edit-mode #mobileTopNavLibraryEdit {
    background: var(--blue);
    color: #fff;
  }

  .library-filter-bar {
    display: none !important;
  }

  .library-item-kind,
  .library-item-meta-separator {
    display: inline;
  }

  #libraryGrid {
    transition: opacity 0.26s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #libraryGrid.is-layout-switching {
    opacity: 0;
    transform: scale(0.985) translateY(5px);
  }

  #libraryGrid[data-library-view="grid"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  #libraryGrid[data-library-view="grid"] .library-card {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #libraryGrid[data-library-view="grid"] .playlist-cover,
  #libraryGrid[data-library-view="grid"] .playlist-cover-image {
    border-radius: 12px;
  }

  #libraryGrid[data-library-view="grid"] .playlist-cover {
    margin-bottom: 9px;
  }

  #libraryGrid[data-library-view="list"] {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #libraryGrid[data-library-view="list"] .library-card {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 82px;
    padding: 8px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #libraryGrid[data-library-view="list"] .playlist-cover {
    width: 66px;
    height: 66px;
    margin: 0;
    border-radius: 11px;
  }

  #libraryGrid[data-library-view="list"] .playlist-cover-image {
    border-radius: 11px;
  }

  #libraryGrid[data-library-view="list"] .playlist-info {
    min-width: 0;
    text-align: left;
  }

  #libraryGrid[data-library-view="list"] .playlist-name {
    display: block;
    margin: 0 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 1.2;
  }

  #libraryGrid[data-library-view="list"] .playlist-count {
    font-size: 12.5px;
  }

  #libraryGrid .library-card-actions,
  #libraryGrid .library-order-btn {
    display: none !important;
  }

  body.mobile-library-edit-mode #libraryGrid .library-card {
    outline: 0;
    border-radius: 0;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  body.mobile-library-edit-mode #libraryGrid .library-mobile-reorder-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(12px) saturate(145%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
    pointer-events: none;
  }

  body.mobile-library-edit-mode #libraryGrid[data-library-view="grid"] .library-mobile-reorder-grip {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 4;
  }

  .library-card-touch-source {
    opacity: 0.18 !important;
  }

  .library-card-touch-clone {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1400 !important;
    margin: 0 !important;
    opacity: 0.96 !important;
    pointer-events: none !important;
    transform-origin: top left;
    box-shadow: 0 22px 54px rgba(7, 14, 34, 0.3) !important;
    transition: none !important;
    will-change: transform;
  }

  .library-card-touch-clone-grid {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .library-card-touch-clone-grid .playlist-cover,
  .library-card-touch-clone-grid .playlist-cover-image {
    border-radius: 12px !important;
  }

  .library-card-touch-clone-list {
    display: grid !important;
    grid-template-columns: 66px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 8px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--white) 88%, transparent) !important;
  }

  .library-card-touch-clone-list .playlist-cover {
    width: 66px !important;
    height: 66px !important;
    margin: 0 !important;
    border-radius: 11px !important;
  }

  .library-card-touch-clone-list .playlist-cover-image {
    border-radius: 11px !important;
  }

  .library-card-touch-clone-list .playlist-info {
    min-width: 0;
    text-align: left;
  }

  .library-drop-target:not(.library-card-touch-source) {
    background: rgba(26, 92, 255, 0.08) !important;
  }

  .mobile-library-filter-modal .modal-content {
    width: min(100%, 620px);
  }

  .mobile-library-filter-options {
    display: grid;
    gap: 3px;
    padding: 8px 14px 18px;
  }

  .mobile-library-filter-option {
    width: 100%;
    min-height: 52px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--black);
    font: 700 14px/1.2 "Syne", sans-serif;
    text-align: left;
    transition: background 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-library-filter-option:active {
    transform: scale(0.985);
    background: rgba(26, 92, 255, 0.09);
  }

  .mobile-library-filter-option > i:first-child {
    color: var(--muted);
  }

  .mobile-library-filter-check {
    opacity: 0;
    color: var(--blue);
    transform: scale(0.72);
    transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-library-filter-option.is-selected {
    background: rgba(26, 92, 255, 0.1);
  }

  .mobile-library-filter-option.is-selected .mobile-library-filter-check {
    opacity: 1;
    transform: scale(1);
  }

  .mobile-library-filter-option.context-action-danger,
  .mobile-library-filter-option.context-action-danger > i:first-child {
    color: var(--danger);
  }

  .add-playlist-native-option {
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    min-height: 60px;
  }

  .add-playlist-native-option .add-playlist-cover {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 8px;
  }

  .add-playlist-native-option .add-playlist-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
  }

  .add-playlist-native-option .add-playlist-meta small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
  }

  .add-to-playlist-modal .add-playlist-list,
  .custom-context-menu--share .custom-context-share-friends {
    gap: 3px;
  }

  .add-to-playlist-modal .add-playlist-scroll,
  .custom-context-menu--share .custom-context-share-friends {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .create-playlist-modal .create-playlist-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .create-playlist-modal .create-playlist-cover-picker {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 8px 12px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    box-shadow: none;
  }

  .create-playlist-modal :is(.create-playlist-cover-preview, .create-playlist-cover-preview img) {
    width: 52px;
    height: 52px;
    max-width: 52px;
    border-radius: 10px;
  }

  #mobileTopNavLibraryFilter.is-active::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 2px var(--white);
  }
}

:root {
  --black: #0C0C0E;
  --blue: #1A5CFF;
  --purple: rgb(43, 81, 218);
  --white: #FAFAFA;
  --surface-1: #FFFFFF;
  --surface-2: #F5F7FF;
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-bg-hover: rgba(255, 255, 255, 0.98);
  --card-border: rgba(12, 12, 14, 0.08);
  --card-shadow: 0 12px 28px rgba(12, 12, 14, 0.1);
  --accent-soft: rgba(26, 92, 255, 0.72);
  --muted: #888899;
  --border: #E4E4EC;
  --text-secondary: #666677;
  --danger: #EF4444;
  --success: #10B981;
  --warning: #F59E0B;
  --mobile-top-nav-height: 62px;
  --mobile-top-search-height: 62px;
  --mobile-bottom-nav-height: 76px;
  --mobile-player-height: 0px;
  --desktop-sidebar-width: 320px;
  --desktop-top-nav-height: 72px;
  --desktop-main-content-top-padding: 84px;
}

html, body {
  height: 100%;
}

body {
  background: var(--white);
  color: var(--black);
  font-family: "Syne", "Space Mono", -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 150px;
  margin: 0;
  padding: 0;
}

html,
body {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(12, 12, 14, 0.32) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.desktop-sidebar-library-list::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.player-queue-list::-webkit-scrollbar,
.player-queue-panel-body::-webkit-scrollbar,
.add-playlist-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.desktop-sidebar-library-list::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.player-queue-list::-webkit-scrollbar-track,
.player-queue-panel-body::-webkit-scrollbar-track,
.add-playlist-scroll::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.desktop-sidebar-library-list::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.player-queue-list::-webkit-scrollbar-thumb,
.player-queue-panel-body::-webkit-scrollbar-thumb,
.add-playlist-scroll::-webkit-scrollbar-thumb {
  background: rgba(12, 12, 14, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.desktop-sidebar-library-list::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover,
.player-queue-list::-webkit-scrollbar-thumb:hover,
.player-queue-panel-body::-webkit-scrollbar-thumb:hover,
.add-playlist-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(12, 12, 14, 0.42);
  background-clip: padding-box;
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media (min-width: 1024px) {
  .app-container {
    display: grid;
    grid-template-columns: var(--desktop-sidebar-width) minmax(0, 1fr);
    grid-template-rows: 1fr;
  }
}

.main-content {
  flex: 1;
  background: var(--white);
}

@media (min-width: 1024px) {
  .main-content {
    grid-column: 2;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 1024px) {
  #mainContentContainer {
    padding-top: 8px;
  }
}

.error-page .container {
  max-width: 960px;
}

.basic-landing-body {
  background: radial-gradient(circle at 50% -20%, rgba(26, 92, 255, 0.08), transparent 44%), var(--white);
  color: var(--black);
  padding-bottom: 0;
}

.basic-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 250, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.basic-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.preferences-row.preferences-row-start {
  align-items: flex-start;
}
.preferences-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.preferences-select {
  min-width: 220px;
  max-width: 260px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(20, 28, 45, 0.15);
  border-radius: 10px;
  background: #ffffff;
  color: #131722;
  font-size: 14px;
  line-height: 1.35;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.preferences-select:focus {
  outline: none;
  border-color: rgba(26, 92, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.15);
}
html.dark-mode .preferences-select {
  background: rgba(18, 24, 34, 0.95);
  color: #f3f6ff;
  border-color: rgba(147, 165, 193, 0.32);
}
html.dark-mode .preferences-select:focus {
  border-color: rgba(118, 158, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(92, 138, 255, 0.22);
}
@media (max-width: 720px) {
  .preferences-select {
    max-width: none;
  }
}
.basic-brand-logo {
  width: 86px;
  height: auto;
  display: block;
}

.basic-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.basic-nav a {
  text-decoration: none;
  color: var(--black);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.basic-nav a:hover, .basic-nav a.basic-nav-btn:hover {
  background: rgba(26, 92, 255, 0.08);
  color: var(--blue);
}

.basic-nav .basic-nav-btn {
  background: var(--blue);
  color: var(--white);
}

.basic-nav .basic-nav-btn:hover {
  background: rgb(43, 81, 218);
  color: var(--white);
}

.basic-main-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 56px;
}

.basic-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 24px;
}

.basic-eyebrow {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(26, 92, 255, 0.28);
  background: rgba(26, 92, 255, 0.08);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px !important;
}

.basic-hero-copy h1 {
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.basic-hero-copy p {
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.7;
  margin-top: 14px;
  max-width: 58ch;
}

.basic-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.basic-trust-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.basic-trust-row span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(26, 92, 255, 0.16);
  background: rgba(26, 92, 255, 0.06);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: #2c2c3e;
}

.basic-trust-row strong {
  margin-right: 4px;
}

.basic-hero-note {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  background: linear-gradient(180deg, #ffffff, #f7f9ff);
  box-shadow: 0 14px 30px rgba(12, 12, 14, 0.06);
}

.basic-hero-note h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.02em;
}

.basic-hero-note p {
  margin: 12px 0 0;
  color: var(--text-secondary);
  line-height: 1.68;
}

.basic-hero-note ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.basic-hero-note li {
  margin: 0 0 10px !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #38384a;
}

.basic-hero-note li::before {
  content: "•";
  color: var(--blue);
  font-size: 17px;
  line-height: 1;
  margin-top: 1px;
}

.basic-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.basic-feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(12, 12, 14, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.basic-feature-card:hover {
  border-color: rgba(26, 92, 255, 0.3);
  box-shadow: 0 14px 30px rgba(26, 92, 255, 0.1);
  transform: translateY(-2px);
}

.basic-feature-kicker {
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin-bottom: 10px;
}

.basic-feature-card h2 {
  margin: 0 0 8px;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.basic-feature-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.basic-cta-strip {
  border: 1px solid rgba(26, 92, 255, 0.2);
  border-radius: 18px;
  padding: 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(26, 92, 255, 0.13), rgba(26, 92, 255, 0.06));
}

.basic-cta-strip h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
}

.basic-cta-strip p {
  margin: 10px auto 0;
  color: #3f4560;
  max-width: 56ch;
}

.basic-cta-strip .basic-hero-actions {
  justify-content: center;
  margin-top: 16px;
}

.basic-footer {
  border-top: 1px solid var(--border);
  background: #f1f4fb;
  padding: 34px 24px;
}

.basic-footer-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 20px;
}

.basic-footer h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.basic-footer p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
}

.basic-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.basic-footer a {
  color: var(--black);
  text-decoration: none;
}

.basic-footer a:hover {
  color: var(--blue);
}

html.landing-home-scroll,
html:has(body.basic-landing-body.landing-home) {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
  scroll-behavior: auto;
  overscroll-behavior-y: contain;
  overflow-anchor: none;
}

body.basic-landing-body.landing-home {
  min-height: 100vh;
  padding-bottom: 0;
  overflow-anchor: none;
  background:
    radial-gradient(120% 68% at 50% -8%, rgba(26, 92, 255, 0.14), rgba(26, 92, 255, 0) 58%),
    radial-gradient(70% 42% at 96% 8%, rgba(111, 90, 255, 0.08), rgba(111, 90, 255, 0) 64%),
    var(--white);
}

html.landing-home-scroll body.basic-landing-body.landing-home,
html:has(body.basic-landing-body.landing-home) body.basic-landing-body.landing-home {
  height: auto;
  overflow: visible;
}

body.basic-landing-body.landing-home .basic-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

body.basic-landing-body.landing-home .basic-main-content {
  max-width: 1200px;
  padding: 0 24px;
  overflow-anchor: none;
  position: relative;
  z-index: 1;
}

body.basic-landing-body.landing-home .basic-main-content > section {
  min-height: 100vh;
  width: 100%;
  display: grid;
  align-items: center;
  position: relative;
  padding: clamp(106px, 13vh, 156px) 0 clamp(36px, 8vh, 72px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-anchor: none;
}

body.basic-landing-body.landing-home .basic-main-content > section:last-child {
  scroll-snap-align: end;
}

body.basic-landing-body.landing-home .basic-footer {
  position: relative;
  z-index: 1;
  scroll-snap-align: end;
}

.landing-cover-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.66;
}

.landing-cover-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.46) 84%);
  pointer-events: none;
}

.cover-fx-item {
  --cover-size: 120px;
  position: absolute;
  width: var(--cover-size);
  height: var(--cover-size);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(148, 170, 255, 0.34);
  box-shadow: 0 14px 34px rgba(12, 20, 36, 0.18);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  will-change: transform, opacity;
}

.cover-fx-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.98) contrast(1.03);
}

body.basic-landing-body.landing-home .basic-hero {
  grid-template-columns: 1fr;
  align-items: center;
  margin: 0;
  isolation: isolate;
}

body.basic-landing-body.landing-home .basic-hero-copy {
  width: min(860px, 100%);
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  position: relative;
}

body.basic-landing-body.landing-home .basic-hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -24% -22% -10%;
  background:
    radial-gradient(closest-side at 30% 42%, rgba(26, 92, 255, 0.18), rgba(26, 92, 255, 0)),
    radial-gradient(closest-side at 66% 54%, rgba(111, 90, 255, 0.12), rgba(111, 90, 255, 0));
  filter: blur(18px);
  opacity: 0.95;
}

body.basic-landing-body.landing-home .basic-hero-copy h1 {
  max-width: 10.5ch;
  font-size: clamp(3.2rem, 7.4vw, 6.8rem);
  letter-spacing: -0.055em;
  line-height: 0.9;
  margin-bottom: 22px;
}

body.basic-landing-body.landing-home .basic-hero-copy p {
  max-width: 58ch;
  font-size: clamp(1.06rem, 1.35vw, 1.22rem);
  line-height: 1.72;
}

body.basic-landing-body.landing-home .basic-hero-actions {
  margin-top: 28px;
}

body.basic-landing-body.landing-home .basic-trust-row {
  margin-top: 22px;
}

.feature-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 4vw, 58px);
}

.showcase-left .showcase-content {
  order: 2;
}

.showcase-left .showcase-visual {
  order: 1;
}

.showcase-content {
  max-width: 62ch;
}

.showcase-content h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.showcase-content p {
  margin-top: 14px;
  color: #40445d;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.74;
}

.showcase-audio-toggle {
  margin-top: 1rem;
}

.showcase-visual {
  width: 100%;
  border-radius: 22px;
}

.showcase-cta-wrap {
  margin-top: 2rem;
}

.video-mockup {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(26, 92, 255, 0.26);
  box-shadow: 0 18px 42px rgba(14, 20, 34, 0.24);
  background: linear-gradient(160deg, rgba(26, 92, 255, 0.18), rgba(26, 92, 255, 0.04));
}

.video-mockup video {
  width: 100%;
  display: block;
  max-height: min(62vh, 520px);
  object-fit: cover;
}

.dashboard-mockup {
  display: grid;
  gap: 12px;
}

.dash-card {
  border: 1px solid rgba(26, 92, 255, 0.22);
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(242, 247, 255, 0.88));
  color: #1c2034;
  font-weight: 700;
  padding: 14px 16px;
  box-shadow: 0 12px 28px rgba(15, 24, 42, 0.12);
}

.bumping-panel {
  border-radius: 20px;
  border: 1px solid rgba(26, 92, 255, 0.24);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 255, 0.88));
  box-shadow: 0 18px 38px rgba(15, 22, 37, 0.14);
  padding: clamp(16px, 2.8vw, 22px);
}

.bumping-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bumping-stat {
  border: 1px solid rgba(26, 92, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
}

.bumping-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a6285;
}

.bumping-stat strong {
  font-size: 15px;
  color: #151a2d;
}

.bumping-track {
  margin-top: 12px;
  border: 1px solid rgba(26, 92, 255, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.bumping-track p {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: #5a638a;
}

.bumping-bolt,
.bumping-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(26, 92, 255, 0.28);
  background: rgba(26, 92, 255, 0.12);
  color: #2144a8;
}

.bumping-bolt {
  width: 30px;
  height: 30px;
}

.bumping-tag {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.theater-container {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(420px, 48vw, 600px);
  aspect-ratio: 1.2;
  border: 0;
  border-radius: 22px;
  background: #080416;
  color: #fff;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 22px 54px rgba(24, 10, 58, .24);
  isolation: isolate;
}

.landing-lyrics-liquid-canvas {
  position: absolute;
  z-index: 0;
  inset: -12%;
  width: 124%;
  height: 124%;
  opacity: .98;
  filter: blur(28px) saturate(1.2) contrast(.98);
  transform: translateZ(0) scale(1.03);
}

.landing-lyrics-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 56% at 42% 48%, transparent 10%, rgba(7, 3, 18, .12) 68%, rgba(5, 2, 13, .42) 100%),
    linear-gradient(180deg, rgba(7, 3, 18, .18), transparent 24%, transparent 76%, rgba(7, 3, 18, .28));
}

.landing-lyrics-track-label {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 22px;
  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: lowercase;
}

.landing-lyrics-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 82%, transparent 100%);
}

.landing-lyrics-line {
  --landing-line-distance: 0;
  --landing-line-offset: 0px;
  position: absolute;
  top: 50%;
  left: clamp(24px, 6%, 46px);
  right: clamp(20px, 5%, 40px);
  color: rgba(255,255,255,.34);
  opacity: .28;
  filter: blur(2px);
  transform: translateY(calc(-50% + var(--landing-line-offset))) scale(.96);
  transform-origin: left center;
  transition: transform .78s cubic-bezier(.16,1,.3,1), opacity .68s ease, filter .68s ease, color .44s ease;
  will-change: transform, opacity, filter;
}

.landing-lyrics-original {
  width: 100%;
  max-width: 100%;
  font-size: clamp(36px, 4vw, 62px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
  white-space: normal;
}

.landing-lyrics-translation {
  margin-top: 10px;
  color: rgba(239,231,255,.6);
  font-size: clamp(19px, 2vw, 31px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -.025em;
}

.landing-lyrics-word {
  --landing-word-progress: 0%;
  display: inline;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,#fff 0%,#fff var(--landing-word-progress),rgba(255,255,255,.28) var(--landing-word-progress),rgba(255,255,255,.28) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 9px rgba(211,184,255,.16));
}

.landing-lyrics-line.is-current {
  color: #fff;
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%) scale(1);
}

.landing-lyrics-line.is-current .landing-lyrics-word.is-active-word,
.landing-lyrics-line.is-current .landing-lyrics-word.is-sung {
  filter: drop-shadow(0 0 11px rgba(231,215,255,.28));
}

.landing-lyrics-line.is-past {
  opacity: .17;
  filter: blur(7px);
  transform: translateY(calc(-50% + var(--landing-line-offset))) scale(.94);
}

.landing-lyrics-line.is-future { opacity:.27; }
.landing-lyrics-line.is-nearby { opacity:.46; filter:blur(.8px); }
.landing-lyrics-line.is-nearby.is-past { opacity:.22; filter:blur(4px); }

/* Native-style Audience analytics on compact Artist Studio surfaces. */
@media (max-width: 760px) {
    .artist-studio .artist-studio-audience-page {
        margin-inline: -14px;
        overflow: hidden;
    }

    .artist-studio .artist-studio-audience-page > .artist-studio-page-head {
        margin: 0;
        padding: 4px 18px 20px;
        gap: 17px;
        border-bottom: 1px solid var(--as-border);
    }

    .artist-studio .artist-studio-audience-page > .artist-studio-page-head p {
        margin-top: 7px;
        font-size: 14px;
        line-height: 1.45;
    }

    .artist-studio .artist-studio-audience-page .artist-studio-range-select {
        width: 100%;
        min-height: 48px;
        padding: 0 16px;
        border: 0;
        border-radius: 12px;
        outline: 0;
        background: var(--as-panel-subtle);
        font-size: 15px;
        font-weight: 650;
    }

    .artist-studio .artist-studio-audience-page > .artist-studio-metrics {
        margin: 0;
        padding: 7px 14px 20px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: var(--as-panel);
        box-shadow: none;
    }

    .artist-studio .artist-studio-audience-page > .artist-studio-metrics article {
        min-height: 110px;
        padding: 18px 12px;
        border-right: 1px solid var(--as-border);
        border-bottom: 1px solid var(--as-border);
    }

    .artist-studio .artist-studio-audience-page > .artist-studio-metrics article:nth-child(2n) {
        border-right: 0;
    }

    .artist-studio .artist-studio-audience-page > .artist-studio-metrics article:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .artist-studio .artist-studio-audience-page > .artist-studio-metrics strong {
        margin-block: 9px 7px;
        font-size: 31px;
    }

    .artist-studio .artist-studio-audience-page > .artist-studio-metrics :is(span,small) {
        line-height: 1.35;
    }

    .artist-studio .artist-studio-audience-page > .artist-studio-section,
    .artist-studio .artist-studio-audience-page > .artist-studio-two-column > .artist-studio-section {
        margin: 0;
        padding: 25px 18px 20px;
        border: 0;
        border-top: 8px solid var(--as-panel-subtle);
        border-radius: 0;
        background: var(--as-panel);
        box-shadow: none;
    }

    .artist-studio .artist-studio-audience-page .artist-studio-section-head {
        margin-bottom: 8px;
        padding-inline: 2px;
    }

    .artist-studio .artist-studio-audience-page .artist-studio-section-head h2,
    .artist-studio .artist-studio-audience-page .artist-studio-two-column h2 {
        font-size: 22px;
    }

    .artist-studio .artist-studio-audience-page .artist-studio-section-head p {
        margin-top: 5px;
        font-size: 13px;
    }

    .artist-studio .artist-studio-audience-page .artist-studio-chart {
        height: 224px;
        margin-inline: -4px;
        padding: 22px 4px 0;
        gap: 5px;
        border-bottom: 0;
    }

    .artist-studio .artist-studio-audience-page > .artist-studio-two-column {
        display: block;
    }

    .artist-studio .artist-studio-audience-page .artist-studio-row {
        min-height: 54px;
        padding: 13px 2px;
    }

    .artist-studio .artist-studio-audience-page .artist-studio-row strong {
        font-variant-numeric: tabular-nums;
    }

    .artist-studio .artist-studio-audience-skeleton .artist-studio-skeleton-page-head {
        min-height: 0;
    }

    .artist-studio .artist-studio-audience-skeleton .artist-studio-skeleton-chart {
        height: 224px;
        min-height: 224px;
        margin-inline: -4px;
        padding: 22px 4px 0;
    }

    .artist-studio .artist-studio-audience-skeleton .artist-studio-skeleton-data-row {
        min-height: 54px;
        padding-block: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
  .landing-lyrics-line { transition:none; }
  .landing-lyrics-liquid-canvas { filter:blur(18px) saturate(1.2); }
}

.admin-rollout-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  margin-bottom: 10px;
}
.admin-rollout-candidate span { display: grid; gap: 2px; }
.admin-distribution-page {
  --distribution-surface: var(--white);
  --distribution-soft: color-mix(in srgb, var(--white) 94%, var(--blue));
  width: min(1460px, calc(100% - 40px));
  margin: 28px auto 80px;
  display: grid;
  gap: 20px;
}
.admin-distribution-head,
.admin-distribution-toolbar,
.admin-distribution-head-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.admin-distribution-head > div:first-child > span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-distribution-head h1 { margin: 6px 0 3px; font-size: clamp(30px,4vw,50px); letter-spacing: -.04em; }
.admin-distribution-head p,
.admin-distribution-toolbar p { margin: 0; color: var(--text-secondary); }
.admin-distribution-metrics {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
}
.admin-distribution-metrics article,
.admin-distribution-card {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--distribution-surface);
  box-shadow: 0 16px 44px rgba(15,23,42,.06);
}
.admin-distribution-metrics article { display: grid; gap: 8px; padding: 21px; }
.admin-distribution-metrics span { color: var(--text-secondary); font-size: 13px; }
.admin-distribution-metrics strong { font-size: 25px; letter-spacing: -.03em; }
.admin-distribution-card { padding: 22px; }
.admin-distribution-toolbar { margin-bottom: 17px; }
.admin-distribution-toolbar h2 { margin: 0 0 4px; font-size: 21px; }
.admin-distribution-message { min-height: 20px; margin: 0 0 10px; color: var(--text-secondary); }
.admin-distribution-message.is-error { color: var(--danger); }
.admin-distribution-table td { padding-block: 14px; }
.admin-distribution-table td > small { display: block; margin-top: 3px; color: var(--text-secondary); }
.admin-distribution-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(100,116,139,.12);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}
.admin-distribution-status.is-submitted,
.admin-distribution-status.is-under-review,
.admin-distribution-status.is-documentation-requested,
.admin-distribution-status.is-pending,
.admin-distribution-status.is-processing,
.admin-distribution-status.is-enabled { background: rgba(59,130,246,.13); color: #3b82f6; }
.admin-distribution-status.is-published,
.admin-distribution-status.is-live,
.admin-distribution-status.is-paid { background: rgba(16,185,129,.13); color: #10b981; }
.admin-distribution-status.is-integration-failed,
.admin-distribution-status.is-cancelled,
.admin-distribution-status.is-rejected { background: rgba(239,68,68,.13); color: #ef4444; }
.admin-distribution-review-list { display: grid; gap: 10px; }
.admin-distribution-review-list > article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--distribution-soft);
}
.admin-distribution-review-list > article > span { display: grid; gap: 3px; }
.admin-distribution-review-list > article small,
.admin-distribution-empty { color: var(--text-secondary); }
.admin-distribution-review-list > article > div { display: flex; gap: 8px; }
.admin-distribution-dialog {
  padding: 20px;
  color: var(--black);
  background: rgba(3,7,18,.72);
  backdrop-filter: blur(9px);
}
.admin-distribution-dialog .admin-distribution-dialog-card {
  width: min(1040px,calc(100vw - 40px));
  max-width: 1040px;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--white);
}
.admin-distribution-dialog-card > header,
.admin-distribution-dialog-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.admin-distribution-dialog-card > header h2 { margin: 0; }
.admin-distribution-dialog-card > header button {
  width: 39px; height: 39px; border: 1px solid var(--border); border-radius: 50%;
  color: var(--black); background: var(--distribution-soft); cursor: pointer;
}
.admin-distribution-dialog-card > footer { justify-content: flex-end; border: 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
#distributionAdminDialogBody { max-height: calc(100dvh - 190px); overflow: auto; padding: 22px; }
.admin-distribution-cover-preview {
  display: block; width: 110px; aspect-ratio: 1; margin: 0 0 14px; border: 1px solid var(--border); border-radius: 15px; object-fit: cover;
}
.admin-distribution-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.admin-distribution-detail-grid > section,
.admin-distribution-detail-section,
.admin-distribution-track {
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--distribution-soft);
  padding: 16px;
}
.admin-distribution-detail-grid h3,
.admin-distribution-detail-section h3 { margin: 0 0 12px; }
.admin-distribution-detail-grid dl,
.admin-distribution-track dl { display: grid; gap: 8px; margin: 0; }
.admin-distribution-detail-grid dl > div,
.admin-distribution-track dl > div { display: flex; justify-content: space-between; gap: 15px; }
.admin-distribution-detail-grid dt,
.admin-distribution-track dt { color: var(--text-secondary); }
.admin-distribution-detail-grid dd,
.admin-distribution-track dd { margin: 0; text-align: right; }
.admin-distribution-detail-section { margin-top: 14px; }
.admin-distribution-track-list { display: grid; gap: 10px; }
.admin-distribution-track > header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.admin-distribution-track h4 { margin: 13px 0 6px; }
.admin-distribution-spotify {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}
.admin-distribution-spotify label { flex: 1 1 320px; }
.admin-distribution-spotify label span { display: block; margin-bottom: 5px; color: var(--text-secondary); }
.admin-distribution-spotify small { flex-basis: 100%; color: var(--danger-color, #dc2626); }
.admin-distribution-platform-links { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-distribution-scope-list { display: grid; gap: 10px; margin: 0; }
.admin-distribution-scope-list > div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 14px; }
.admin-distribution-scope-list dt { color: var(--text-secondary); }
.admin-distribution-scope-list dd { margin: 0; overflow-wrap: anywhere; }
.admin-distribution-master-player { display: block; width: 100%; height: 38px; margin-top: 13px; }
.admin-distribution-edit-form { display: grid; gap: 14px; }
.admin-distribution-edit-form > section {
  padding: 16px; border: 1px solid var(--border); border-radius: 17px; background: var(--distribution-soft);
}
.admin-distribution-edit-form h3 { margin: 0 0 14px; }
.admin-distribution-edit-grid,
.admin-distribution-edit-track { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.admin-distribution-edit-grid label,
.admin-distribution-edit-track label { display: grid; min-width: 0; gap: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.admin-distribution-edit-grid .is-wide { grid-column: 1 / -1; }
.admin-distribution-platform-picker {
  min-width: 0; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; background: var(--white);
}
.admin-distribution-platform-picker > legend { margin-left: 12px; padding: 0 6px; color: var(--black); font-size: 12px; font-weight: 800; }
.admin-distribution-platform-tools { display: flex; padding: 10px 12px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); }
.admin-distribution-platform-tools > small { color: var(--text-secondary); font-weight: 700; }
.admin-distribution-platform-tools > span { display: flex; gap: 7px; }
.admin-distribution-platform-grid { display: grid; max-height: 280px; padding: 10px; overflow: auto; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.admin-distribution-platform-grid label { display: flex; min-height: 42px; padding: 9px 11px; align-items: center; grid-template-columns: none; gap: 9px; border: 1px solid var(--border); border-radius: 10px; color: var(--black); background: var(--distribution-soft); cursor: pointer; }
.admin-distribution-platform-grid label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 8%,var(--white)); }
.admin-distribution-platform-grid input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--primary); }
.admin-distribution-edit-tracks { display: grid; gap: 14px; }
.admin-distribution-edit-track { margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; }
.admin-distribution-edit-track legend { padding: 0 6px; color: var(--black); font-weight: 800; }
.admin-distribution-edit-track .admin-distribution-edit-check { display: flex; align-items: center; grid-template-columns: none; gap: 8px; color: var(--black); }
.admin-distribution-edit-check input { width: 17px; height: 17px; }
.admin-distribution-detail-section ul,
.admin-distribution-detail-grid ul,
.admin-distribution-track ul { margin: 6px 0 0; padding-left: 20px; }
.admin-distribution-audit { list-style: none; padding: 0 !important; }
.admin-distribution-audit li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.admin-distribution-audit time { color: var(--text-secondary); }
.admin-distribution-notice,
.admin-distribution-note {
  display: grid; gap: 7px; margin: 14px 0 0; padding: 14px;
  border: 1px solid var(--border); border-radius: 15px; background: var(--distribution-soft);
}
.admin-distribution-notice.is-error { color: var(--danger); }
.admin-distribution-note textarea { resize: vertical; border: 1px solid var(--border); border-radius: 12px; padding: 12px; color: var(--black); background: var(--white); }
.admin-distribution-document-request,
.admin-distribution-payout {
  display: grid; gap: 9px; margin-top: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--white);
}
.admin-distribution-document-request header,
.admin-distribution-payout header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-distribution-document-request p,
.admin-distribution-payout p { margin: 0; overflow-wrap: anywhere; }
.admin-distribution-document-files { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-distribution-payout-list { display: grid; gap: 10px; }
.admin-distribution-payout code { padding: 9px; overflow-wrap: anywhere; border-radius: 8px; background: var(--distribution-soft); }
.admin-distribution-payout-controls { display: grid; grid-template-columns: 150px 160px minmax(170px,1fr) minmax(150px,1fr) auto; gap: 8px; }
.admin-distribution-ledger { display: grid; grid-template-columns: 150px 150px 1fr; gap: 10px; margin-top: 15px; }
.admin-distribution-ledger h3 { grid-column: 1 / -1; margin: 0; }
.admin-distribution-contract-form {
  margin-top: 15px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--distribution-soft);
}
.admin-distribution-contract-form h3 { margin: 0 0 14px; }
.admin-distribution-contract-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.admin-distribution-contract-fields label { display: grid; min-width: 0; gap: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.admin-distribution-contract-fields label.is-wide { grid-column: 1 / -1; }
.admin-distribution-contract-fields textarea { resize: vertical; }

@media (max-width: 760px) {
  .admin-distribution-page { width: min(100% - 20px,1460px); margin-top: 14px; gap: 13px; }
  .admin-distribution-head,
  .admin-distribution-toolbar { align-items: stretch; flex-direction: column; }
  .admin-distribution-head-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-distribution-metrics { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
  .admin-distribution-metrics article { min-width: 175px; scroll-snap-align: start; }
  .admin-distribution-card { padding: 14px; border-radius: 18px; }
  .admin-distribution-review-list > article { align-items: stretch; flex-direction: column; }
  .admin-distribution-review-list > article > div { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-rollout-candidate { align-items: stretch; flex-direction: column; }
  .admin-distribution-detail-grid { grid-template-columns: 1fr; }
  .admin-distribution-ledger { grid-template-columns: 1fr; }
  .admin-distribution-payout-controls { grid-template-columns: 1fr; }
  .admin-distribution-contract-fields { grid-template-columns: 1fr; }
  .admin-distribution-contract-fields label.is-wide { grid-column: auto; }
  .admin-distribution-edit-grid,
  .admin-distribution-edit-track { grid-template-columns: 1fr; }
  .admin-distribution-edit-grid .is-wide { grid-column: auto; }
  .admin-distribution-platform-tools { align-items: stretch; flex-direction: column; }
  .admin-distribution-platform-grid { grid-template-columns: 1fr; }
  .modal.admin-distribution-dialog {
    align-items: center !important;
    justify-content: center !important;
    padding: 7px !important;
  }
  .modal.admin-distribution-dialog .admin-distribution-dialog-card {
    width: calc(100vw - 14px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 14px) !important;
    margin: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    transform: translateY(16px) scale(.985) !important;
  }
  .modal.admin-distribution-dialog.is-open .admin-distribution-dialog-card {
    transform: translateY(0) scale(1) !important;
  }
  .modal.admin-distribution-dialog.is-closing .admin-distribution-dialog-card {
    transform: translateY(12px) scale(.985) !important;
  }
  .modal.admin-distribution-dialog .admin-distribution-dialog-card::before { display: none; }
  #distributionAdminDialogBody { max-height: calc(100dvh - 180px); padding: 14px; }
  .admin-distribution-dialog-card > footer .btn { flex: 1 1 44%; }
}

body.basic-landing-body.landing-home .scroll-reveal,
body.basic-landing-body.landing-home .scroll-reveal.revealed {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 1023px) {
  html.landing-home-scroll,
  html:has(body.basic-landing-body.landing-home) {
    scroll-snap-type: y proximity;
  }

  body.basic-landing-body.landing-home .basic-main-content > section {
    min-height: 100svh;
    padding-top: 108px;
    padding-bottom: 44px;
  }

  .feature-showcase {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .showcase-left .showcase-content,
  .showcase-left .showcase-visual {
    order: initial;
  }

  .showcase-visual,
  .video-mockup,
  .theater-container,
  .bumping-panel {
    border-radius: 18px;
  }

  .showcase-visual,
  .landing-lyrics-theater,
  .landing-lyrics-stage,
  .landing-lyrics-line {
    min-width: 0;
    max-width: 100%;
  }

  .landing-lyrics-line {
    left: 20px;
    right: 20px;
  }

  .landing-lyrics-original {
    font-size: clamp(25px, 7.6vw, 38px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .landing-lyrics-translation {
    margin-top: 8px;
    font-size: clamp(15px, 4.5vw, 22px);
  }

  .mockup-line {
    max-width: 100%;
    font-size: clamp(22px, 6.1vw, 34px);
  }
}

@media (max-width: 768px) {
  html.landing-home-scroll,
  html:has(body.basic-landing-body.landing-home) {
    scroll-snap-type: y mandatory;
  }

  body.basic-landing-body.landing-home .basic-main-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.basic-landing-body.landing-home .basic-main-content > section {
    padding-top: 96px;
    padding-bottom: 36px;
  }

  body.basic-landing-body.landing-home .basic-hero-copy {
    border-radius: 18px;
    padding: 20px;
  }

  body.basic-landing-body.landing-home .basic-hero-copy h1 {
    font-size: clamp(2rem, 10.8vw, 2.75rem);
  }

  .bumping-stat-row {
    grid-template-columns: 1fr;
  }

  .showcase-content h2 {
    font-size: clamp(1.7rem, 8vw, 2.3rem);
  }
}

@media (max-width: 900px) {
  .basic-feature-split {
    grid-template-columns: 1fr;
  }

  .basic-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 18px;
  }

  .basic-hero-copy h1 {
    font-size: clamp(1.9rem, 7.8vw, 2.8rem);
    line-height: 1.05;
  }

  .basic-hero-copy p {
    font-size: 16px;
    line-height: 1.62;
  }

  .basic-trust-row {
    gap: 8px;
  }

  .basic-trust-row span {
    font-size: 12px;
  }

  .basic-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .basic-feature-card {
    padding: 16px;
    border-radius: 999px;
  }

  .basic-feature-card h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  .basic-cta-strip {
    border-radius: 16px;
    padding: 20px;
  }

  .basic-cta-strip h2 {
    font-size: clamp(1.55rem, 5vw, 2rem);
    line-height: 1.2;
  }

  .basic-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .basic-footer-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .basic-header-inner,
  .basic-main-content,
  .basic-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .basic-header-inner {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 10px;
  }

  .basic-brand-logo {
    width: 78px;
  }

  .basic-nav {
    gap: 6px;
  }

  .basic-nav .hide-on-mobile {
    display: none !important;
  }

  .basic-nav a.basic-nav-btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  .basic-main-content {
    padding-top: 22px;
    padding-bottom: 30px;
  }

  .basic-hero {
    gap: 12px;
  }

  .basic-hero-copy h1 {
    font-size: clamp(2.1rem, 10vw, 2.6rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
  }

  .basic-hero-copy p {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 12px;
  }

  .basic-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .basic-hero-actions .btn {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  .basic-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .basic-trust-row span {
    justify-content: flex-start;
    padding: 6px 12px;
    flex: 1 1 auto;
  }

  .basic-hero-note {
    border-radius: 14px;
    padding: 16px;
  }

  .basic-hero-note h2 {
    font-size: 22px;
  }

  .basic-feature-card {
    padding: 16px 18px;
    border-radius: 14px;
  }

  .basic-feature-card h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .basic-feature-card p {
    font-size: 15px;
    line-height: 1.6;
  }

  .basic-cta-strip {
    text-align: left;
    padding: 16px 14px;
    border-radius: 12px;
  }

  .basic-cta-strip h2 {
    font-size: 24px;
  }

  .basic-cta-strip .basic-hero-actions {
    justify-content: stretch;
  }

  .basic-footer {
    padding-top: 22px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .basic-footer h3 {
    font-size: 17px;
  }

  .basic-footer p,
  .basic-footer a {
    font-size: 14px;
  }
}

.error-page-wrap {
  min-height: calc(100vh - 210px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 0 58px;
}

.error-page-card {
  width: min(640px, 100%);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(12, 12, 14, 0.08);
  padding: 34px;
}

.error-page-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  color: var(--blue);
  background: rgba(26, 92, 255, 0.1);
  border: 1px solid rgba(26, 92, 255, 0.24);
}

.error-page-title {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.3rem);
  letter-spacing: -0.02em;
  color: var(--black);
}

.error-page-message,
.error-page-hint {
  margin: 0;
  display: block;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
}

.error-page-message {
  margin-top: 10px;
}

.error-page-hint {
  margin-top: 6px;
  color: #4b4b5f;
}

.error-page-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 768px) {
  .error-page-wrap {
    min-height: auto;
    padding: 16px 0 40px;
  }

  .error-page-card {
    padding: 24px 18px;
  }
}

.mobile-top-nav,
.mobile-top-search-wrap,
.mobile-library-edit-wrap,
.mobile-account-overlay,
.mobile-account-panel,
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 1023px) {
  .mobile-top-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-top-nav-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0;
    background: transparent;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    z-index: 1002;
    transition:
      background 0.34s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.24s ease,
      box-shadow 0.34s cubic-bezier(0.32, 0.72, 0, 1),
      backdrop-filter 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  }

  body.mobile-top-scrolled .mobile-top-nav {
    background: rgba(250, 250, 250, 0.86);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom-color: rgba(228, 228, 236, 0.7);
    box-shadow: 0 10px 28px rgba(10, 16, 32, 0.08);
  }

  .mobile-top-nav-back {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-4px);
    box-shadow: 0 8px 20px rgba(10, 18, 38, 0.12);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: transform 0.24s ease, opacity 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
  }

  .mobile-top-nav-back.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .mobile-top-nav-back:active {
    transform: scale(0.96);
    background: rgba(26, 92, 255, 0.12);
  }

  .mobile-top-nav-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
  }

  .mobile-top-nav-icon-btn,
  .mobile-top-nav-action {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(10, 18, 38, 0.12);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease, background 0.24s ease;
    position: relative;
    flex: 0 0 auto;
  }

  .mobile-top-nav-icon-btn[hidden] {
    display: none !important;
  }

  .mobile-top-nav-icon-btn:active,
  .mobile-top-nav-action:active {
    transform: scale(0.94);
    opacity: 0.92;
  }

  .mobile-top-nav-badge {
    position: absolute;
    right: -2px;
    top: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e03152;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
  }

  .mobile-top-nav-action {
    min-width: 0;
  }

  .mobile-top-nav-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-left: auto;
  }

  .mobile-top-nav-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(26, 92, 255, 0.16);
    box-shadow: none;
  }

  .mobile-top-nav-avatar-icon {
    font-size: 28px;
    color: var(--blue);
  }

  .mobile-top-nav-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(7px);
    width: min(68vw, 320px);
    max-width: calc(100% - 220px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  }

  body.mobile-top-scrolled .mobile-top-nav-title {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  body.mobile-scroll-title-page:not(.mobile-detail-title-visible) .mobile-top-nav-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(7px);
    transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.34s;
  }

  body.mobile-scroll-title-page .mobile-top-nav-actions {
    transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s;
  }

  .mobile-top-search-wrap {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--mobile-top-nav-height) + env(safe-area-inset-top));
    height: var(--mobile-top-search-height);
    padding: 10px 12px;
    background: rgba(250, 250, 250, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(228, 228, 236, 0.7);
    z-index: 875;
  }

  body.mobile-search-visible .mobile-top-search-wrap {
    display: block;
  }

  body.mobile-playlist-search-visible.mobile-top-at-page-top .mobile-top-search-wrap {
    display: none;
  }

  body.mobile-top-at-page-top.mobile-search-visible:not(.mobile-playlist-search-visible) .mobile-top-search-wrap {
    display: block;
    top: calc(env(safe-area-inset-top) + 9px);
    left: 58px;
    right: 58px;
    height: 44px;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1003;
  }

  .mobile-library-edit-wrap {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--mobile-top-nav-height) + env(safe-area-inset-top));
    height: var(--mobile-top-search-height);
    padding: 10px 12px;
    background: rgba(250, 250, 250, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(228, 228, 236, 0.7);
    z-index: 875;
  }

  body.mobile-library-visible .mobile-library-edit-wrap {
    display: none;
  }

  .mobile-library-edit-inner {
    height: 100%;
    border: 1px solid rgba(26, 92, 255, 0.14);
    border-radius: 14px;
    padding: 0 10px;
    background: rgba(26, 92, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-library-edit-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
  }

  .mobile-library-edit-toggle {
    border: none;
    background: var(--blue);
    color: var(--white);
    border-radius: 9px;
    height: 32px;
    min-width: 78px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  .mobile-library-edit-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-library-create-btn {
    border: 1px solid rgba(26, 92, 255, 0.28);
    background: rgba(255, 255, 255, 0.9);
    color: var(--blue);
    border-radius: 9px;
    height: 32px;
    min-width: 84px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  .mobile-library-create-btn i {
    font-size: 12px;
  }

  .mobile-library-edit-toggle i {
    font-size: 12px;
  }

  body.mobile-library-edit-mode .mobile-library-edit-toggle {
    background: #173ea8;
  }

  .mobile-top-search-form {
    height: 100%;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(26, 92, 255, 0.14);
    border-radius: 14px;
    padding: 0 10px;
    background: rgba(26, 92, 255, 0.08);
  }

  .mobile-top-search-form > i {
    color: var(--blue);
    font-size: 13px;
  }

  .mobile-top-search-form input {
    border: none;
    background: transparent;
    font-size: 14px;
    padding: 0;
    height: 100%;
    box-shadow: none;
    color: var(--black);
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    min-width: 0;
  }

  #mobileTopSearchForm #mobileTopSearchInput {
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 100%;
    min-height: 100%;
    color: var(--black);
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
  }

  .mobile-top-search-form input:focus {
    border: none;
    box-shadow: none;
    outline: none;
  }

  #mobileTopSearchForm #mobileTopSearchInput:focus {
    border: none;
    box-shadow: none;
    outline: none;
  }

  .mobile-top-search-form input::placeholder {
    color: var(--text-secondary);
  }

  #mobileTopSearchForm #mobileTopSearchInput::placeholder {
    color: var(--text-secondary);
    text-align: center;
  }

  .mobile-top-search-form input::-webkit-search-decoration,
  .mobile-top-search-form input::-webkit-search-cancel-button,
  .mobile-top-search-form input::-webkit-search-results-button,
  .mobile-top-search-form input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .mobile-top-search-form > button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 9px;
    background: var(--blue);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .mobile-account-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(8, 10, 16, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0s linear 0.42s;
  }

  .mobile-account-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: var(--white);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease, visibility 0s linear 0.42s;
  }

  body.mobile-account-open .mobile-account-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.24s ease;
  }

  body.mobile-account-open .mobile-account-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease;
  }

  .mobile-account-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top) + 16px) 16px 16px;
    border-bottom: 1px solid var(--border);
  }

  .mobile-account-panel-header h2 {
    margin: 0;
    font-size: 20px;
    letter-spacing: -0.35px;
  }

  .mobile-account-close {
    width: 36px;
    height: 36px;
    border: 0px solid var(--border);
    background: transparent;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .mobile-account-panel-body {
    display: grid;
    gap: 12px;
    padding: 16px 14px calc(30px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(900px 280px at 10% -12%, rgba(26, 92, 255, 0.12), transparent 58%),
      linear-gradient(180deg, #f6f8fc 0%, #fdfdff 72%);
  }

  .mobile-account-profile-card {
    display: grid;
    gap: 10px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    border: 1px solid rgba(54, 84, 140, 0.24);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px) saturate(118%);
    box-shadow: 0 10px 22px rgba(20, 30, 54, 0.09);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }

  .mobile-account-profile-card:hover {
    border-color: rgba(26, 92, 255, 0.28);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 24px rgba(20, 32, 58, 0.12);
    transform: translateY(-1px);
  }

  .mobile-account-profile-card:active {
    transform: scale(0.99);
  }

  .mobile-account-profile-card:focus-visible {
    outline: 2px solid rgba(26, 92, 255, 0.38);
    outline-offset: 2px;
  }

  .mobile-account-profile-main {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-account-profile-avatar {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    object-fit: cover;
    border: 1px solid rgba(42, 70, 128, 0.3);
  }

  .mobile-account-profile-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(26, 92, 255, 0.16), rgba(26, 92, 255, 0.28));
    color: var(--blue);
  }

  .mobile-account-profile-copy {
    min-width: 0;
  }

  .mobile-account-profile-name {
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.28px;
    color: var(--black);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-account-profile-handle {
    margin-top: 3px;
    font-size: 13px;
    color: rgba(52, 66, 98, 0.68);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-account-section {
    display: grid;
    gap: 8px;
  }

  .mobile-account-section-title {
    padding: 2px 2px 0;
    font-size: 11px;
    font-weight: 780;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(52, 66, 98, 0.58);
  }

  .mobile-account-link {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    text-decoration: none;
    color: var(--black);
    border: 1px solid rgba(50, 78, 128, 0.2);
    border-radius: 15px;
    padding: 15px 14px;
    font-size: 14px;
    font-weight: 650;
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(9px) saturate(116%);
    box-shadow: 0 8px 18px rgba(18, 30, 56, 0.08);
    transition:
      transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.24s ease,
      background 0.24s ease,
      box-shadow 0.24s ease;
  }

  .mobile-account-link i {
    width: 24px;
    height: 24px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 92, 255, 0.14);
    text-align: center;
    color: var(--blue);
  }

  .mobile-account-link span {
    letter-spacing: -0.1px;
  }

  .mobile-account-link-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1;
  }

  .mobile-account-link-title {
    font-size: 15px;
    font-weight: 750;
    line-height: 1.2;
    color: var(--black);
  }

  .mobile-account-link-subtitle {
    font-size: 12px;
    font-weight: 500;
    color: rgba(52, 66, 98, 0.66);
    line-height: 1.35;
  }

  .mobile-account-link::after {
    content: '\f105';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 700;
    margin-left: 8px;
    margin-top: 2px;
    color: rgba(52, 66, 98, 0.52);
    transition: transform 0.24s ease, color 0.24s ease;
  }

  .mobile-account-link:active {
    transform: scale(0.987) translateY(1px);
  }

  .mobile-account-link:hover {
    border-color: rgba(26, 92, 255, 0.26);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 22px rgba(20, 32, 58, 0.11);
    transform: translateY(-1px);
  }

  .mobile-account-link:hover::after {
    transform: translateX(2px);
    color: rgba(26, 92, 255, 0.8);
  }

  .mobile-account-link-danger {
    color: var(--danger);
    border-color: rgba(220, 53, 69, 0.28);
    background: rgba(255, 238, 242, 0.76);
  }

  .mobile-account-link-danger .mobile-account-link-title,
  .mobile-account-link-danger .mobile-account-link-subtitle {
    color: rgba(184, 35, 51, 0.96);
  }

  .mobile-account-link-danger i {
    color: var(--danger);
    background: rgba(220, 53, 69, 0.14);
  }

  .mobile-account-link-danger::after {
    color: rgba(220, 53, 69, 0.64);
  }

  .mobile-account-link-standalone {
    margin-top: 2px;
  }

  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(250, 250, 250, 0.9);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(228, 228, 236, 0.75);
    z-index: 850;
  }

  .mobile-bottom-nav.has-install-action {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mobile-bottom-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), color 0.24s ease;
  }

  .mobile-bottom-link.install-app {
    display: none;
  }

  .mobile-bottom-nav.has-install-action .mobile-bottom-link.install-app {
    display: flex;
  }

  .mobile-bottom-link i {
    font-size: 16px;
  }

  .mobile-bottom-link span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }

  .mobile-bottom-link.is-active {
    color: var(--blue);
  }

  .mobile-bottom-link:active {
    transform: scale(0.95);
  }

  .sidebar-toggle {
    display: none !important;
  }

  body {
    --mobile-sticky-top-offset: 0px;
  }

  body.mobile-search-visible.mobile-top-scrolled {
    --mobile-sticky-top-offset: calc(var(--mobile-top-nav-height) + var(--mobile-top-search-height) + env(safe-area-inset-top));
  }

  body.mobile-search-visible.mobile-top-at-page-top:not(.mobile-playlist-search-visible) {
    --mobile-sticky-top-offset: calc(var(--mobile-top-search-height) + env(safe-area-inset-top));
  }

  .main-content {
    padding-top: 46px;
    padding-bottom: calc(var(--mobile-player-height) + var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 24px);
  }

  body.mobile-scroll-title-page .main-content {
    padding-top: 6px;
  }

  .playlists-header,
  .discovery-header,
  .hub-header,
  .content-header,
  .settings-header,
  .upload-header,
  .tag-page-header,
  .audience-detail-header {
    display: none !important;
  }

  body.mobile-search-visible.mobile-top-scrolled .main-content {
    padding-top: calc(var(--mobile-top-nav-height) + var(--mobile-top-search-height) + env(safe-area-inset-top) + 16px);
  }

  body.mobile-search-visible.mobile-top-at-page-top:not(.mobile-playlist-search-visible) .main-content {
    padding-top: calc(var(--mobile-top-search-height) + env(safe-area-inset-top) + 16px);
  }

  body.mobile-scroll-title-page.mobile-search-visible .main-content {
    padding-top: 6px;
  }

  body.mobile-library-visible .main-content {
    padding-top: 41px;
  }

  body.mobile-profile-release-list-visible .main-content {
    padding-top: calc(var(--mobile-top-nav-height) + var(--mobile-top-search-height) + env(safe-area-inset-top) + 16px);
  }

  .playlists-container .playlists-header {
    margin-bottom: 18px;
  }

  .playlists-container .playlists-header .btn {
    display: none;
  }

  .library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 0;
  }

  .library-grid .library-card {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .library-grid .library-card:hover {
    border: none;
    box-shadow: none;
    transform: none;
  }

  .library-grid .playlist-cover {
    border-radius: 0;
    margin-bottom: 10px;
  }

  .library-grid .playlist-cover-image {
    border-radius: 0;
  }

  .library-grid .playlist-info {
    text-align: left;
  }

  .library-grid .playlist-name {
    font-size: 16px;
    line-height: 1.25;
    margin-bottom: 4px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .library-grid .playlist-count {
    margin-bottom: 0;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .library-grid .playlist-description,
  .library-grid .library-item-badge,
  .library-grid .library-drag-handle,
  .library-grid .library-remove-btn {
    display: none !important;
  }

  .library-grid .library-card-actions {
    margin-top: 8px;
    justify-content: flex-start;
  }

  .library-grid .library-order-btn {
    display: none;
  }

  body.mobile-library-edit-mode .library-grid .library-order-btn {
    display: inline-flex;
  }

  body.mobile-library-edit-mode .library-grid .library-card {
    outline: 1px solid rgba(26, 92, 255, 0.2);
    outline-offset: 6px;
    border-radius: 4px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
  }

  body.mobile-library-edit-mode .library-grid .playlist-cover,
  body.mobile-library-edit-mode .library-grid .playlist-cover-image {
    border-radius: 8px;
  }

  .library-card-touch-dragging .playlist-description,
  .library-card-touch-dragging .library-remove-btn,
  .library-card-touch-dragging .library-item-badge,
  .library-card-touch-dragging .library-drag-handle {
    display: none !important;
  }

  #playerSection {
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
    z-index: 700;
  }
}

@media (min-width: 1024px) {
  .main-content {
    padding-top: var(--desktop-main-content-top-padding);
    padding-bottom: 96px;
  }

  #playerSection {
    bottom: 0;
  }
}

label, p, h2, li {
  margin-bottom: 8px !important;
  display: block;
}

.bluu {
  color: var(--blue);
}

.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  font-family: 'Syne', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--black);
  letter-spacing: -0.5px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  color: var(--black);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
  padding: 8px 12px;
  border-radius: 6px;
}

.nav-link:hover {
  color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
}

.nav-user-menu {
  position: relative;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s;
}

.nav-user:hover {
  background: rgba(26, 92, 255, 0.08);
}

.role-badge {
  background: rgba(26, 92, 255, 0.15);
  color: var(--blue);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.nav-user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: none;
  margin-top: 8px;
  overflow: hidden;
}

.nav-user-menu:hover .nav-user-dropdown {
  display: flex;
  flex-direction: column;
}

.dropdown-item {
  padding: 12px 16px;
  color: var(--black);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
}

.dropdown-item:hover {
  background: rgba(26, 92, 255, 0.08);
  color: var(--blue);
}

.dropdown-item.logout-item {
  color: var(--danger);
}

.dropdown-item.logout-item:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
}

.dropdown-item hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.register-link {
  background: var(--blue);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 6px;
}

.register-link:hover {
  background: var(--purple);
}

.nav-search {
  flex: 0 1 280px;
  margin: 0 24px;
}

.search-form {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fafafa;
  overflow: hidden;
  transition: all 0.2s;
  height: 36px;
}

.search-form.search-suggest-anchor,
.mobile-top-search-form.search-suggest-anchor {
  overflow: visible;
  position: relative;
}

.search-form.search-suggest-anchor .search-input {
  padding-right: 44px;
}

.search-form.search-suggest-anchor .search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-form:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.08);
}

.search-form .search-input {
  flex: 1;
  width: auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
  color: var(--black);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.search-form .search-input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.search-input::placeholder {
  color: var(--text-secondary);
}

.search-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 8px 12px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.2s;
}

.search-btn:hover {
  color: var(--blue);
}

.search-btn:active {
  color: var(--purple);
}

@media (max-width: 1023px) {
  .nav-search {
    max-width: 200px;
    margin: 0 16px;
  }
}

@media (max-width: 768px) {
  .nav-search {
    display: none;
  }
}

.admin-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  padding: 24px;
  min-height: calc(100vh - 120px);
}

.admin-sidebar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  position: sticky;
  top: 92px;
  height: fit-content;
}

.admin-title {
  margin-bottom: 14px;
  font-size: 22px;
  letter-spacing: -0.3px;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-tab-link,
.admin-map-link {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--black);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}

.admin-tab-link.active,
.admin-tab-link:hover,
.admin-map-link:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(26, 92, 255, 0.06);
}

.admin-main {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.admin-tab {
  display: none;
}

.admin-tab.active {
  display: block;
}

.admin-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-header-row h3 {
  margin: 0;
  font-size: 22px;
}

.admin-header-actions,
.admin-filter-group,
.admin-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-toolbar {
  margin-bottom: 14px;
}

.admin-input {
  width: 100%;
  min-width: 260px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

.admin-input-small {
  min-width: 160px;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  color: var(--text-secondary);
  font-weight: 700;
}

.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-thumb {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(136, 136, 153, 0.12);
  color: var(--muted);
  text-transform: uppercase;
}

.admin-badge.success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.admin-badge.warning {
  background: rgba(26, 92, 255, 0.12);
  color: var(--warning);
}

.admin-badge.danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.admin-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}

.admin-card-head {
  display: grid;
  grid-template-columns: 2fr 2fr auto auto;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  align-items: center;
}

.admin-card-body {
  display: none;
  border-top: 1px solid var(--border);
  padding: 12px;
}

.admin-card-body.open {
  display: block;
}

.admin-status {
  margin-top: 8px;
  color: var(--danger);
  font-size: 13px;
}

.admin-muted {
  color: var(--text-secondary);
  font-size: 14px;
}

.admin-filter.active {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
}

.admin-message-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  max-width: 720px;
}

@media (max-width: 1023px) {
  .admin-shell {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .admin-sidebar {
    position: static;
  }

  .admin-card-head {
    grid-template-columns: 1fr;
  }

  .admin-input {
    min-width: 100%;
  }
}

.dmca-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 0 16px;
}

.dmca-upload-page {
  max-width: 1020px;
}

.dmca-form.dmca-staged-form {
  display: block;
}

.dmca-stage-section {
  scroll-margin-top: 88px;
}

.dmca-stepper {
  margin-bottom: 18px;
}

.dmca-status-error {
  color: var(--danger);
}

.dmca-status-success {
  color: var(--success);
}

.dmca-upload-page .dmca-alert {
  margin-bottom: 18px;
}

.dmca-upload-page .dmca-conditional-block[hidden] {
  display: none !important;
}

.dmca-upload-page .dmca-conditional-block {
  margin: 22px 0 0;
  padding-top: 22px;
}

.dmca-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 28px 14px;
}

.dmca-title {
  font-family: 'Syne', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.6px;
  margin-bottom: 14px;
  color: var(--black);
  line-height: 1.1;
}

.dmca-title i {
  margin-right: 8px;
  color: var(--blue);
}

.dmca-subtitle {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 18px;
}

.dmca-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dmca-form-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: rgba(26, 92, 255, 0.02);
}

.dmca-form-section h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.25px;
  margin-bottom: 12px;
}

.dmca-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dmca-grid-span-2 {
  grid-column: 1 / -1;
}

.dmca-conditional-block {
  margin-top: 2px;
}

.dmca-form .form-group label {
  font-weight: 600;
}

.dmca-form .form-group input,
.dmca-form .form-group textarea,
.dmca-form .form-group select {
  box-shadow: none;
}

.dmca-check-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 12px;
  margin: 8px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(26, 92, 255, 0.03);
  font-size: 14px;
  color: var(--black);
  line-height: 1.5;
}

.dmca-alert {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}

.dmca-alert-error {
  background: rgba(239, 68, 68, 0.1);
  color: #991B1B;
  border: 1px solid rgba(239, 68, 68, 0.22);
}

.dmca-alert-success {
  background: rgba(16, 185, 129, 0.1);
  color: #065F46;
  border: 1px solid rgba(16, 185, 129, 0.24);
}

.dmca-alert-info {
  background: rgba(26, 92, 255, 0.09);
  color: #173a9f;
  border: 1px solid rgba(26, 92, 255, 0.25);
}

.dmca-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dmca-info-card {
  padding-bottom: 10px;
}

.dmca-info-section {
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.dmca-info-section:first-of-type {
  border-top: 0;
  padding-top: 10px;
}

.dmca-info-section h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
  color: var(--black);
}

.dmca-info-section p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 8px !important;
}

.dmca-info-section a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.dmca-info-section a:hover {
  text-decoration: underline;
}

.dmca-center-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.dmca-center-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: var(--white);
}

.dmca-center-table th,
.dmca-center-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}

.dmca-center-table th {
  color: var(--text-secondary);
  font-weight: 600;
  background: rgba(26, 92, 255, 0.03);
}

.dmca-center-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 768px) {
  .dmca-page {
    padding-top: 16px;
  }

  .dmca-card {
    padding: 22px 18px 10px;
  }

  .dmca-form-section {
    padding: 12px;
  }

  .dmca-form-section h2 {
    font-size: 18px;
  }

  .dmca-grid-2 {
    grid-template-columns: 1fr;
  }

  .dmca-title {
    font-size: 31px;
  }

  .dmca-subtitle {
    line-height: 1.65;
  }

  .dmca-info-section h2 {
    font-size: 21px;
  }

  .dmca-alert {
    overflow-wrap: anywhere;
  }

  .dmca-check-row {
    grid-template-columns: 22px 1fr;
    gap: 10px;
    padding: 10px;
  }

  .dmca-form .form-group input,
  .dmca-form .form-group textarea,
  .dmca-form .form-group select {
    font-size: 16px;
  }

  .dmca-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dmca-actions .btn,
  .dmca-actions button.btn {
    width: 100%;
    white-space: normal;
  }

  .dmca-center-table-wrap {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }

  .dmca-center-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
    background: transparent;
  }

  .dmca-center-table thead {
    display: none;
  }

  .dmca-center-table tbody,
  .dmca-center-table tr,
  .dmca-center-table td {
    display: block;
    width: 100%;
  }

  .dmca-center-table tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--white);
  }

  .dmca-center-table td {
    border-bottom: 0;
    padding: 6px 0;
    font-size: 13px;
    display: block;
  }

  .dmca-center-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
  }

  .dmca-center-table td .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .dmca-card {
    padding: 18px 14px 8px;
    border-radius: 10px;
  }

  .dmca-title {
    font-size: 27px;
    line-height: 1.15;
  }

  .dmca-subtitle {
    font-size: 14px;
  }

  .dmca-form-section h2,
  .dmca-info-section h2 {
    font-size: 19px;
  }

  .dmca-center-table tr {
    padding: 10px;
  }

  .dmca-center-table td {
    padding: 5px 0;
  }
}

.portal-auth-page,
.claim-page {
  max-width: 980px;
}

.portal-auth-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 20px rgba(12, 12, 14, 0.06);
}

.claim-card {
  margin-bottom: 0;
}

.claim-stepper {
  margin-bottom: 18px;
}

.portal-auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portal-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 0 70px;
}

.portal-page h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: 34px;
  margin-bottom: 16px;
}

.portal-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.portal-section h2 {
  font-size: 22px;
  margin-bottom: 12px;
}

.portal-inline-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

.portal-inline-form input,
.portal-inline-form select {
  min-width: 220px;
}

.portal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portal-list-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal-list-item p {
  margin: 6px 0;
}

.portal-status {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.portal-docs {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.token-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  font-family: "Syne", ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

.portal-subgroup {
  margin-bottom: 16px;
}

.portal-subgroup h3 {
  margin-bottom: 8px;
}

.tutorial-section .tutorial-step {
  border-left: 3px solid var(--blue);
  padding-left: 10px;
  margin: 8px 0;
  color: var(--text-secondary);
}

.claim-alert {
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.claim-alert-error {
  background: rgba(239, 68, 68, 0.1);
  color: #991B1B;
}

.claim-alert-success {
  background: rgba(16, 185, 129, 0.1);
  color: #065F46;
}

.claim-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.claim-result-item {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 8px;
  text-align: left;
  padding: 10px;
  cursor: pointer;
}

.claim-result-item:hover {
  border-color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
}

.claim-result-empty {
  color: var(--text-secondary);
  font-size: 13px;
}

.claim-proof-zone {
  position: relative;
  min-height: 144px;
  border: 2px dashed color-mix(in srgb, var(--blue) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 4%, var(--white));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  padding: 24px 18px;
  color: var(--text-secondary);
  cursor: pointer;
  overflow: hidden;
}

.claim-proof-zone:hover,
.claim-proof-zone:focus-within {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--white));
}

.claim-proof-zone i {
  font-size: 28px;
  color: color-mix(in srgb, var(--blue) 60%, var(--text-secondary));
}

.claim-proof-zone span {
  font-size: 14px;
  font-weight: 600;
}

.claim-proof-zone small {
  max-width: 620px;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text-secondary) 76%, transparent);
}

.claim-proof-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.claim-review-info {
  margin-top: 18px;
}

.claim-proof-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-weight: 600;
  color: var(--blue);
}

.claim-item {
  align-items: flex-start;
}

.claim-actions {
  display: flex;
  gap: 8px;
}

.claim-escalated {
  margin-top: 6px;
  color: #92400E;
  background: rgba(26, 92, 255, 0.12);
  border: 1px solid rgba(26, 92, 255, 0.2);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  display: inline-block;
}

.portal-muted {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 10px;
}

.label-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.label-stat-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(26, 92, 255, 0.06), rgba(26, 92, 255, 0.02));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--black);
}

.label-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.artist-preview-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.artist-preview-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.artist-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.artist-preview-header h3 {
  margin: 0;
  font-size: 20px;
}

.artist-preview-header p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.artist-preview-badge {
  font-size: 12px;
  color: var(--blue);
  background: rgba(26, 92, 255, 0.12);
  border: 1px solid rgba(26, 92, 255, 0.2);
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.artist-preview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.artist-day-metric {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}

.artist-day-label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}

.artist-day-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
}

.artist-preview-block {
  margin-top: 12px;
}

.artist-preview-block h4 {
  margin-bottom: 8px;
}


.sidebar-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 800;
  background: transparent;
  color: var(--black);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
}

.sidebar-toggle:hover {
  transform: scale(1.05);
}

.sidebar-toggle:active {
  transform: scale(0.95);
}

@media (min-width: 1024px) {
  .sidebar-toggle {
    display: none;
  }
}

@media (max-width: 1023px) {
  .sidebar-toggle {
    display: none !important;
  }
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 980;
  transition: background 0.3s ease;
  pointer-events: none;
}

.sidebar-overlay.active {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--white) 98%, #dfe7ff 2%), var(--white));
  border-right: 1px solid var(--border);
  z-index: 990;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar.active {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .sidebar {
    width: var(--desktop-sidebar-width);
    transform: translateX(0) !important;
    box-shadow: 10px 0 26px rgba(12, 12, 14, 0.05);
    border-right: 1px solid var(--border);
    background: transparent;
    backdrop-filter: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    align-self: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1000;
  }
}

.sidebar-header {
  padding: 22px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: transparent;
}

.sidebar-brand {
  font-family: 'Syne', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--black);
  letter-spacing: -0.5px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-brand-logo {
  display: block;
  max-width: 140px;
  width: 100%;
  height: auto;
}

.sidebar-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  border-radius: 6px;
}

.sidebar-close:hover {
  color: var(--black);
  background: rgba(26, 92, 255, 0.08);
}

@media (min-width: 1024px) {
  .sidebar-close {
    display: none;
  }
}

.sidebar-nav {
  flex: 1;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  color: var(--black);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), color 0.24s ease, background 0.24s ease;
  border: 1px solid transparent;
  border-radius: 12px;
  margin: 3px 10px;
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.sidebar-link span,
.sidebar-link i {
  position: relative;
  z-index: 1;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), color 0.24s ease;
}

.sidebar-link:hover {
  color: var(--blue);
  background: rgba(26, 92, 255, 0.06);
  transform: translateX(1px);
}

.sidebar-link:hover i {
  transform: translateX(1px);
}

.sidebar-link i {
  width: 20px;
  font-size: 16px;
  text-align: center;
}

.sidebar-link.is-active,
.sidebar-link.active {
  color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
  border-color: rgba(26, 92, 255, 0.22);
  border-radius: 12px;
}

.sidebar-link.logout-link {
  color: var(--danger);
}

.sidebar-link.logout-link:hover {
  background: rgba(239, 68, 68, 0.08);
}

.sidebar-link.logout-link.is-active {
  color: var(--danger);
}

.sidebar-link.register-link {
  background: var(--blue);
  color: var(--white);
  margin: 8px 12px;
  border-radius: 10px;
  border: none;
  padding: 12px 16px;
}

.sidebar-link.register-link::before {
  display: none;
}

.sidebar-link.register-link:hover {
  background: var(--purple);
  transform: none;
}

.sidebar-footer-links {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px 12px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  flex-wrap: wrap;
}
.sidebar-footer-links .footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.18s ease;
}
.sidebar-footer-links .footer-link:hover {
  color: var(--blue);
}
.sidebar-footer-links .footer-sep {
  color: var(--border);
  font-size: 12px;
  opacity: 0.7;
}

.sidebar-static-footer-links {
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: 16px;
}

.desktop-top-navbar,
.desktop-sidebar-library,
.sidebar-resize-handle {
  display: none;
}

@media (min-width: 1024px) {
  .sidebar-nav-mobile {
    display: none;
  }

  .desktop-top-navbar {
    position: fixed;
    top: 0;
    left: var(--desktop-sidebar-width);
    right: 0;
    height: var(--desktop-top-nav-height);
    padding: 10px 18px;
    display: grid;
    grid-template-columns: auto minmax(320px, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    z-index: 1400;
    background: rgba(250, 250, 250, 0);
    backdrop-filter: none;
  }

  .desktop-top-navbar::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -24px;
    right: 0;
    bottom: -24px;
    left: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--white) 0%, color-mix(in srgb, var(--white) 88%, transparent) 28%, color-mix(in srgb, var(--white) 52%, transparent) 66%, transparent 100%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  }

  .desktop-top-navbar > * {
    position: relative;
    z-index: 1;
  }

  .desktop-top-navbar-left,
  .desktop-top-navbar-right-links,
  .desktop-top-navbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .desktop-top-navbar-left {
    gap:0;
  }

  .desktop-primary-nav-group {
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:260px;
    height:38px;
    align-items:center;
    gap:0;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--border) 82%,var(--blue));
    border-radius:999px;
    background:var(--surface-2);
  }

  body:not(.discovery-page-active) .desktop-discovery-home-morph {
    width:100%;
    height:100%;
    margin:0;
  }

  body:not(.discovery-page-active) .desktop-discovery-home-link {
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    justify-content:center;
    border:0;
    border-radius:999px 0 0 999px;
  }

  body:not(.discovery-page-active) .desktop-library-nav-link {
    width:100%;
    height:100%;
    padding:0;
    justify-content:center;
    border:0;
    border-left:1px solid color-mix(in srgb,var(--border) 82%,var(--blue));
    border-radius:0 999px 999px 0;
  }

  body.discovery-page-active .desktop-primary-nav-group {
    display:flex;
    width:auto;
    height:auto;
    gap:8px;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }

  body.discovery-page-active .desktop-library-nav-link {
    width:auto;
    height:auto;
    padding:9px 14px;
    border-radius:999px;
  }

  .desktop-top-navbar-center {
    min-width: 0;
  }

  .desktop-navbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--black);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .desktop-navbar-link:hover,
  .desktop-navbar-link.is-active {
    color: color-mix(in srgb, var(--blue) 74%, var(--black));
    border-color: color-mix(in srgb, var(--blue) 20%, var(--border));
    background: color-mix(in srgb, var(--blue) 8%, var(--surface-2));
  }

  .desktop-navbar-search-form {
    width: min(900px, 100%);
    margin: 0 auto;
    border-radius: 999px;
    height: 44px;
    background: rgba(255, 255, 255, 0.86);
    border-color: color-mix(in srgb, var(--border) 82%, var(--blue));
    box-shadow: none;
    cursor: text;
  }

  .desktop-navbar-search-form .search-input {
    font-size: 14px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    display: block;
    text-align: center;
  }

  .desktop-navbar-search-form .search-input::placeholder {
    text-align: center;
  }

  .desktop-navbar-search-form .search-input.search-input-overflowing {
    text-align: left;
    padding-left: 14px;
  }

  #mobileTopSearchForm #mobileTopSearchInput.search-input-overflowing {
    text-align: left;
    padding-left: 2px;
  }

  .desktop-navbar-search-form .search-btn {
    height: 36px;
    min-height: 36px;
  }

  .desktop-top-navbar-actions {
    justify-self: end;
    overflow: visible;
  }

  #notificationsBell {
    width:38px;
    height:38px;
    border-color:color-mix(in srgb,var(--border) 82%,var(--blue));
    background:var(--surface-2);
    color:var(--text-secondary);
    box-shadow:none;
    backdrop-filter:none;
    font-size:15px;
  }

  #sidebarUserToggle {
    width:40px;
    height:40px;
    border-color:color-mix(in srgb,var(--border) 82%,var(--blue));
    background:var(--surface-2);
    box-shadow:none;
    backdrop-filter:none;
  }

  .desktop-sidebar-library {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 10px 10px 16px;
    overflow: hidden;
  }

  .desktop-sidebar-library-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(4px, calc(var(--desktop-sidebar-width) * 0.025), 8px);
    padding: 8px 4px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }

  .desktop-sidebar-library-head h2 {
    margin: 0 !important;
    font-size: clamp(12px, calc(var(--desktop-sidebar-width) * 0.052), 15px);
    letter-spacing: 0;
    font-weight: 800;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
  }

  .desktop-sidebar-library-create {
    width: clamp(22px, calc(var(--desktop-sidebar-width) * 0.11), 30px);
    height: clamp(22px, calc(var(--desktop-sidebar-width) * 0.11), 30px);
    border-radius: clamp(7px, calc(var(--desktop-sidebar-width) * 0.03), 9px);
    border: 1px solid rgba(26, 92, 255, 0.25);
    background: rgba(26, 92, 255, 0.08);
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .desktop-sidebar-library-list-wrap {
    min-height: 0;
    flex: 1;
    overflow: hidden;
  }

  .desktop-sidebar-library-list {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    align-content: start;
    grid-auto-rows: min-content;
    gap: 6px;
    padding: 4px 4px 12px 0;
    scrollbar-gutter: stable;
  }

  .desktop-sidebar-library-item {
    --desktop-sidebar-icon-size: clamp(34px, calc(var(--desktop-sidebar-width) * 0.16), 52px);
    --desktop-sidebar-item-pad: clamp(5px, calc(var(--desktop-sidebar-width) * 0.023), 7px);
    display: grid;
    grid-template-columns: var(--desktop-sidebar-icon-size) minmax(0, 1fr);
    align-items: center;
    gap: clamp(8px, calc(var(--desktop-sidebar-width) * 0.035), 11px);
    width: 100%;
    min-height: calc(var(--desktop-sidebar-icon-size) + (var(--desktop-sidebar-item-pad) * 2));
    border: 1px solid rgba(26, 92, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.42);
    color: var(--black);
    text-align: left;
    padding: var(--desktop-sidebar-item-pad);
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(12, 12, 14, 0.04);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }

  .desktop-sidebar-library-item:focus-visible {
    outline: none;
    border-color: rgba(26, 92, 255, 0.4);
    box-shadow: 0 0 0 2px rgba(26, 92, 255, 0.18);
  }

  .desktop-sidebar-library-item:hover,
  .desktop-sidebar-library-item.is-active {
    border-color: rgba(26, 92, 255, 0.26);
    background: rgba(26, 92, 255, 0.07);
    color: var(--blue);
    box-shadow: 0 7px 18px rgba(26, 92, 255, 0.1);
    transform: translateY(-1px);
  }

  .desktop-sidebar-library-skeleton {
    pointer-events: none;
    cursor: default;
  }

  .desktop-sidebar-library-skeleton:hover {
    transform: none;
    border-color: rgba(26, 92, 255, 0.12);
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 1px 0 rgba(12, 12, 14, 0.04);
  }

  .desktop-sidebar-library-icon {
    width: var(--desktop-sidebar-icon-size);
    height: var(--desktop-sidebar-icon-size);
    border-radius: 8px;
    border: 1px solid rgba(26, 92, 255, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 92, 255, 0.07);
    overflow: hidden;
    position: relative;
    color: var(--blue);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  }

  .desktop-sidebar-library-icon i {
    font-size: clamp(20px, calc(var(--desktop-sidebar-icon-size) * 0.62), 38px);
    line-height: 1;
  }

  .desktop-sidebar-library-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .desktop-sidebar-library-labels {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .desktop-sidebar-library-skeleton .desktop-sidebar-library-icon,
  .desktop-sidebar-skeleton-line {
    background: linear-gradient(90deg, rgba(26, 92, 255, 0.08), rgba(26, 92, 255, 0.16), rgba(26, 92, 255, 0.08));
    background-size: 220% 100%;
    animation: soundviaSkeletonPulse 1.15s ease-in-out infinite;
  }

  .desktop-sidebar-skeleton-line {
    display: block;
    height: 10px;
    border-radius: 999px;
  }

  .desktop-sidebar-skeleton-title {
    width: 78%;
  }

  .desktop-sidebar-skeleton-meta {
    width: 52%;
    opacity: 0.75;
  }

  .desktop-sidebar-library-name {
    font-size: clamp(11px, calc(var(--desktop-sidebar-width) * 0.04), 13px);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktop-sidebar-library-icon .desktop-sidebar-library-pin-indicator {
    position: absolute;
    right: clamp(2px, calc(var(--desktop-sidebar-icon-size) * 0.05), 7px);
    bottom: clamp(2px, calc(var(--desktop-sidebar-icon-size) * 0.05), 7px);
    font-size: clamp(9px, calc(var(--desktop-sidebar-icon-size) * 0.19), 22px);
    color: var(--blue);
    transform: rotate(-25deg);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    z-index: 2;
    pointer-events: none;
  }

  .desktop-sidebar-library-meta {
    font-size: clamp(10px, calc(var(--desktop-sidebar-width) * 0.032), 11px);
    color: var(--text-secondary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktop-sidebar-library-item-create {
    border-color: rgba(26, 92, 255, 0.18);
    background: rgba(26, 92, 255, 0.055);
  }

  .desktop-sidebar-library-item-download {
    border-color: rgba(26, 92, 255, 0.14);
    background: rgba(255, 255, 255, 0.34);
  }

  .desktop-sidebar-library-item-create:hover,
  .desktop-sidebar-library-item-create:focus-visible {
    border-color: rgba(26, 92, 255, 0.42);
    background: rgba(26, 92, 255, 0.12);
    color: var(--blue);
  }

  .desktop-sidebar-library-create-icon i {
    font-size: clamp(22px, calc(var(--desktop-sidebar-icon-size) * 0.65), 40px);
  }

  .desktop-sidebar-library-download-icon i {
    font-size: clamp(18px, calc(var(--desktop-sidebar-icon-size) * 0.55), 34px);
  }

  .desktop-sidebar-library-loading,
  .desktop-sidebar-library-empty {
    border: 1px dashed rgba(26, 92, 255, 0.2);
    border-radius: 8px;
    padding: 11px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
    background: rgba(255, 255, 255, 0.3);
  }

  .sidebar.labels-hidden .desktop-sidebar-library-item {
    --desktop-sidebar-icon-size: clamp(72px, calc(var(--desktop-sidebar-width) * 0.56), 118px);
    grid-template-columns: 1fr;
    justify-items: center;
    width: auto;
    min-width: 0;
    justify-self: center;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .sidebar.labels-hidden .desktop-sidebar-library-item .desktop-sidebar-library-icon {
    width: var(--desktop-sidebar-icon-size);
    height: var(--desktop-sidebar-icon-size);
    border-radius: clamp(12px, calc(var(--desktop-sidebar-width) * 0.08), 18px);
  }

  .sidebar.labels-hidden .desktop-sidebar-library-item:hover,
  .sidebar.labels-hidden .desktop-sidebar-library-item.is-active,
  .sidebar.labels-hidden .desktop-sidebar-library-item.desktop-sidebar-library-item-create,
  .sidebar.labels-hidden .desktop-sidebar-library-item.desktop-sidebar-library-item-create:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .sidebar.labels-hidden .desktop-sidebar-library-item:focus-visible {
    outline: none;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .sidebar.labels-hidden .desktop-sidebar-library-item:focus-visible .desktop-sidebar-library-icon {
    box-shadow: 0 0 0 2px rgba(26, 92, 255, 0.24);
  }

  .sidebar.labels-hidden .desktop-sidebar-library-list {
    justify-items: center;
    align-content: start;
  }

  .sidebar.labels-hidden .desktop-sidebar-library-labels {
    display: none;
  }

  .sidebar-resize-handle {
    display: block;
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: col-resize;
    z-index: 1500;
  }

  .sidebar-resize-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 2px;
    background: rgba(26, 92, 255, 0.18);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .sidebar-resize-handle:hover::before,
  .sidebar.is-resizing .sidebar-resize-handle::before {
    opacity: 1;
  }

  .desktop-quick-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow: visible;
  }

  .desktop-quick-group {
    position: relative;
    overflow: visible;
  }

  .desktop-quick-lyrics-tools {
    display: none;
  }

  .desktop-quick-lyrics-close,
  .desktop-quick-lyrics-translate,
  .desktop-quick-lyrics-beta {
    display: none;
  }

  body.lyrics-theater-open .desktop-quick-lyrics-close,
  body.lyrics-theater-open .desktop-quick-lyrics-translate,
  body.lyrics-theater-open .desktop-quick-lyrics-beta {
    display: block;
  }

  body.lyrics-theater-open .desktop-quick-lyrics-tools {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 10px 24px rgba(8, 12, 24, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(130%);
  }

  body.lyrics-theater-open .desktop-top-navbar-left,
  body.lyrics-theater-open .desktop-top-navbar-center,
  body.lyrics-theater-open .desktop-top-navbar-right-links {
    display: none;
  }

  body.lyrics-theater-open .desktop-top-navbar {
    grid-template-columns: 1fr;
  }

  body.lyrics-theater-open .desktop-top-navbar::before {
    display:none;
  }

  .lyrics-theater-header .lyrics-theater-close {
    display: none;
  }

  .lyrics-theater-header {
    height:0;
    padding:0;
    overflow:hidden;
  }

  .lyrics-theater-now-playing {
    display:none;
  }

  .desktop-quick-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(26, 92, 255, 0.22);
    border-radius: 12px;
    background: rgba(250, 250, 250, 0.94);
    color: var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 26px rgba(12, 12, 14, 0.12);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }

  .desktop-quick-btn:hover,
  .desktop-quick-btn[aria-expanded="true"] {
    border-color: rgba(26, 92, 255, 0.38);
    background: rgba(240, 246, 255, 0.96);
    transform: translateY(-1px);
  }

  .desktop-lyrics-beta-btn.active,
  .desktop-lyrics-translate-btn.active {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    box-shadow: 0 14px 28px rgba(26, 92, 255, 0.24);
  }

  .desktop-quick-lyrics-tools .desktop-quick-group + .desktop-quick-group {
    border-left: 1px solid var(--border);
  }

  .desktop-quick-lyrics-tools .desktop-quick-group {
    border-radius: 0 !important;
  }

  .desktop-quick-lyrics-tools .desktop-quick-btn {
    width: 44px;
    height: 42px;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    color: var(--black);
    box-shadow: none;
    backdrop-filter: none;
    font-size: 16px;
  }

  .desktop-quick-lyrics-tools .desktop-quick-group:first-child .desktop-quick-btn {
    border-radius: 0 !important;
  }

  .desktop-quick-lyrics-tools .desktop-quick-group:last-child .desktop-quick-btn {
    border-radius: 0 !important;
  }

  .desktop-quick-lyrics-tools .desktop-quick-btn:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--black) 10%, transparent);
    transform: none;
  }

  .desktop-quick-lyrics-tools :is(.desktop-lyrics-beta-btn, .desktop-lyrics-translate-btn).active {
    border-color: transparent;
    background: color-mix(in srgb, var(--blue) 16%, var(--white));
    color: var(--blue);
    box-shadow: none;
  }

  .desktop-quick-lyrics-tools .desktop-lyrics-close-btn:hover {
    background: color-mix(in srgb, var(--black) 10%, transparent);
    color: var(--black);
  }

  .desktop-profile-btn {
    overflow: hidden;
    padding: 0;
  }

  .desktop-profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .desktop-quick-badge {
    top: -6px;
    right: -6px;
  }

  .desktop-quick-actions .sidebar-notification-dropdown,
  #desktopQuickActions .sidebar-notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: 380px;
    min-width: 280px;
    max-width: calc(100vw - 24px);
    max-height: min(72vh, 520px);
    overflow: hidden;
    z-index: 2100;
  }

  .desktop-quick-actions .sidebar-notification-list,
  #desktopQuickActions .sidebar-notification-list {
    max-height: min(62vh, 420px);
  }

  .desktop-quick-actions .sidebar-notification-header,
  #desktopQuickActions .sidebar-notification-header {
    white-space: nowrap;
  }

  .desktop-quick-actions .sidebar-notification-show-all,
  #desktopQuickActions .sidebar-notification-show-all {
    flex-shrink: 0;
  }

  .desktop-quick-actions .sidebar-notification-message,
  #desktopQuickActions .sidebar-notification-message {
    white-space: normal;
    word-break: break-word;
  }

  .desktop-profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(240px, calc(100vw - 320px));
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(250, 250, 250, 0.98);
    backdrop-filter: blur(16px);
    box-shadow: 0 14px 28px rgba(12, 12, 14, 0.14);
    padding: 8px;
    display: grid;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(0.985);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s linear 0.32s;
  }

  #sidebarUserSection.is-expanded .desktop-profile-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
  }

  .desktop-profile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px;
    color: var(--black);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .desktop-profile-link i {
    width: 16px;
    text-align: center;
  }

  .desktop-profile-link:hover {
    background: rgba(26, 92, 255, 0.08);
    border-color: rgba(26, 92, 255, 0.22);
    color: var(--blue);
  }

  .desktop-profile-link.logout-link {
    color: var(--danger);
  }

  .desktop-profile-link.logout-link:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--danger);
  }
}

.sidebar-divider {
  height: 1px;
  background: color-mix(in srgb, var(--border) 86%, transparent);
  margin: 12px 14px;
}

.sidebar-search {
  padding: 8px 12px;
  margin: 0;
}

.sidebar-search .search-form {
  flex-direction: row;
  height: 40px;
  border-radius: 8px;
  background: rgba(26, 92, 255, 0.08);
  border: 1px solid rgba(26, 92, 255, 0.15);
}

.sidebar-search .search-input {
  font-size: 13px;
  padding: 8px 10px;
}

.sidebar-search .search-btn {
  padding: 8px 10px;
  color: var(--blue);
}

.sidebar-user-section {
  margin-top: auto;
  padding: 12px 0 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(26, 92, 255, 0), rgba(26, 92, 255, 0.03));
}

.sidebar-notifications {
  position: relative;
  padding: 0 14px;
  margin-bottom: 10px;
}

.sidebar-notification-btn {
  width: 100%;
  border: 1px solid rgba(26, 92, 255, 0.18);
  background: rgba(26, 92, 255, 0.08);
  color: var(--blue);
  border-radius: 10px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 15px;
}

.sidebar-notification-btn:hover,
.sidebar-notification-btn.active {
  background: rgba(26, 92, 255, 0.14);
  border-color: rgba(26, 92, 255, 0.35);
}

.sidebar-notification-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--danger);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid var(--white);
}

.sidebar-notification-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 14px;
  right: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(12, 12, 14, 0.12);
  z-index: 1300;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.28s ease, visibility 0s linear 0.42s;
}

.sidebar-notification-dropdown.open {
  visibility: visible;
  pointer-events: auto;
}

.sidebar-notification-dropdown.open.open-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.28s ease;
}

.sidebar-notification-dropdown.closing {
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  pointer-events: none;
}

.sidebar-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}

.sidebar-notification-mark-all {
  border: none;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.sidebar-notification-mark-all:hover {
  color: var(--purple);
}

.sidebar-notification-show-all {
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.sidebar-notification-show-all:hover {
  color: var(--purple);
}

.sidebar-notification-list {
  max-height: 340px;
  overflow-y: auto;
}

.sidebar-notification-item {
  display: block;
  text-decoration: none;
  color: var(--black);
  padding: 12px 14px;
  border-bottom: 1px solid rgba(228, 228, 236, 0.7);
  transition: background 0.2s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease;
  transform: translateY(6px);
  opacity: 0;
}

.sidebar-notification-dropdown.open.open-active .sidebar-notification-item {
  transform: translateY(0);
  opacity: 1;
}

.sidebar-notification-item:last-child {
  border-bottom: none;
}

.sidebar-notification-item:hover {
  background: rgba(26, 92, 255, 0.08);
}

.sidebar-notification-item.unread {
  background: rgba(26, 92, 255, 0.1);
}

.sidebar-notification-message {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 6px;
}

.sidebar-notification-item.unread .sidebar-notification-message {
  font-weight: 700;
}

.sidebar-notification-time {
  font-size: 11px;
  color: var(--text-secondary);
}

.sidebar-notification-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: var(--text-secondary);
}

.sidebar-link-with-badge {
  position: relative;
}

.sidebar-link-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--danger);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.mobile-account-link-badge {
  margin-left: 4px;
  margin-top: 1px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d6d, #e03152);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  box-shadow: 0 6px 14px rgba(224, 49, 82, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.sidebar-user-toggle {
  width: 100%;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease;
  margin-bottom: 0;
}

.sidebar-user-toggle:hover {
  background: rgba(26, 92, 255, 0.08);
}

.sidebar-user-toggle-chevron {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.sidebar-user-section.is-expanded .sidebar-user-toggle-chevron {
  transform: rotate(180deg);
}

.sidebar-user-sub-links {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
  pointer-events: none;
}

.sidebar-user-section.is-expanded .sidebar-user-sub-links {
  max-height: 300px;
  opacity: 1;
  pointer-events: auto;
}

.sidebar-sub-link {
  padding-left: 22px !important;
  font-size: 13px !important;
}

.sidebar-user i {
  font-size: 32px;
  color: var(--blue);
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(26, 92, 255, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 4px;
}

.history-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 16px;
  padding: 18px 20px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--white) 92%, transparent), color-mix(in srgb, var(--blue) 8%, var(--white)));
}

.history-header h1 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.history-header p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.history-total-plays {
  min-width: 170px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 8%, var(--white));
  padding: 12px 14px;
  text-align: right;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 14%, transparent);
}

.history-total-plays span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.history-total-plays strong {
  font-size: 30px;
  line-height: 1;
  color: var(--blue);
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.history-panel {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 16px;
  background: var(--white);
  padding: 14px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--black) 7%, transparent);
}

.history-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.history-panel-head h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.history-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 6%, var(--white));
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--border));
}

.history-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-tab.is-active {
  background: color-mix(in srgb, var(--blue) 16%, var(--white));
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--blue) 12%, transparent);
}

.history-tab-panel {
  display: none;
}

.history-tab-panel.is-active {
  display: block;
}

.history-track-list,
.history-artist-list,
.history-recent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-page .history-track-row,
.history-page .history-artist-row {
  display: grid;
  grid-template-columns: 24px 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}

.history-page .history-track-row:hover,
.history-page .history-artist-row:hover {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--white));
  transform: translateY(-1px);
}

.history-page .history-recent-list .history-track-row {
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
}

.history-page .sv-now-playing-track {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--border));
  background: color-mix(in srgb, var(--blue) 14%, var(--white));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent);
}

.history-track-rank {
  font-weight: 800;
  color: color-mix(in srgb, var(--text-secondary) 92%, var(--black));
  text-align: center;
  font-size: 16px;
}

.history-track-cover,
.history-artist-avatar {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--white));
}

.history-artist-avatar {
  border-radius: 50%;
}

.history-track-cover img,
.history-artist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-track-meta,
.history-artist-meta {
  min-width: 0;
}

.history-track-title,
.history-artist-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-track-artist,
.history-artist-handle {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-track-artist a,
.history-artist-handle a {
  color: inherit;
  text-decoration: none;
}

.history-track-artist a:hover,
.history-artist-handle a:hover {
  color: var(--blue);
  text-decoration: none;
}

.history-page .history-artist-row {
  text-decoration: none;
}

.history-track-count,
.history-listened-at {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.history-page .play-track-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--border));
  background: color-mix(in srgb, var(--blue) 12%, var(--white));
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.history-page .play-track-btn:hover {
  background: color-mix(in srgb, var(--blue) 20%, var(--white));
  border-color: color-mix(in srgb, var(--blue) 58%, var(--border));
}

.history-page .play-track-btn.is-now-playing {
  background: color-mix(in srgb, var(--blue) 24%, var(--white));
  border-color: color-mix(in srgb, var(--blue) 70%, var(--border));
  color: color-mix(in srgb, var(--blue) 82%, var(--black));
}

.history-empty {
  border: 1px dashed color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 12px;
  padding: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--blue) 4%, var(--white));
}

.history-recent-panel {
  margin-bottom: 8px;
}

.history-subtle {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .history-grid {
    grid-template-columns: 1fr;
  }

  .history-panel-head h2 {
    font-size: 19px;
  }

  .history-track-title,
  .history-artist-name {
    font-size: 17px;
  }
}

@media (max-width: 640px) {
  .history-header {
    flex-direction: column;
    align-items: stretch;
  }

  .history-total-plays {
    text-align: left;
    min-width: 0;
  }

  .history-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .history-tabs {
    width: 100%;
    justify-content: space-between;
  }

  .history-page .history-track-row,
  .history-page .history-artist-row {
    grid-template-columns: 20px 38px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 9px 10px;
  }

  .history-page .history-track-row .play-track-btn {
    grid-column: 4;
  }

  .history-track-count,
  .history-listened-at {
    display: none;
  }

  .history-page .history-recent-list .history-track-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 14px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .history-page .history-recent-list .history-track-meta {
    padding-left: 2px;
  }

  .history-track-title,
  .history-artist-name {
    font-size: 15px;
  }
}

@media (min-width: 1024px) {
  .navbar {
    display: none;
  }
}

@media (max-width: 1023px) {
  .navbar {
    display: none;
  }
}


.alert {
  padding: 12px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 650;
  animation: slideDown 0.2s ease-out;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.28s ease, transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

.alert i {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-size: 15px;
}

.alert.is-dismissing {
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  pointer-events: none;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert-success {
  background: #eefaf4;
  color: #08734f;
  border: 1px solid #cbeedd;
}

.alert-danger {
  background: #fff1f1;
  color: #b4232b;
  border: 1px solid #f1c9cd;
}

.alert-warning {
  background: #fff8e8;
  color: #8a5a00;
  border: 1px solid #f1dda8;
}

.alert-info {
  background: #f0f5ff;
  color: #1a4fd1;
  border: 1px solid #cddaff;
}

.alert-error {
  background: #fff1f1;
  color: #b4232b;
  border: 1px solid #f1c9cd;
}

.alert .close-btn {
  display: none !important;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--blue);
  font-size: 18px;
  margin-left: auto;
  transition: opacity 0.2s;
}

.close-btn:hover {
  opacity: 0.7;
}


.form-container {
  max-width: 500px;
  margin: 60px auto;
  padding: 0 24px;
}

.form-container h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 32px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--muted);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.sv-label-with-tooltip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.sv-label-with-tooltip > label {
  margin: 0;
}

.sv-tooltip-trigger {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(26, 92, 255, 0.28);
  background: rgba(26, 92, 255, 0.08);
  color: var(--blue);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sv-tooltip-trigger:hover,
.sv-tooltip-trigger:focus-visible {
  background: rgba(26, 92, 255, 0.16);
  border-color: rgba(26, 92, 255, 0.5);
  outline: none;
  transform: translateY(-1px);
}

.sv-global-tooltip {
  position: absolute;
  z-index: 50000;
  max-width: min(340px, calc(100vw - 20px));
  background: rgba(255, 255, 255, 0.98);
  color: #101626;
  border: 1px solid rgba(16, 22, 38, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 32px rgba(16, 22, 38, 0.2);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.sv-global-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.form-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.form-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-secondary);
}

.form-footer a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}

.form-footer a:hover {
  text-decoration: underline;
}

.auth-form-container {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: 0 18px 45px rgba(26, 92, 255, 0.08);
}

.auth-form-container h2 {
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 14px 0 30px;
}

.auth-form {
  gap: 16px;
}

.auth-submit-btn {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(135deg, #1a5cff 0%, #2b51da 100%);
  color: var(--white);
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(26, 92, 255, 0.3);
}

.auth-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(26, 92, 255, 0.35);
}

.auth-submit-btn:active {
  transform: translateY(0);
}

.auth-page .sidebar,
.auth-page .sidebar-toggle,
.auth-page .mobile-top-nav,
.auth-page .mobile-top-search-wrap,
.auth-page .player-footer {
  display: none !important;
}

body.auth-page {
  padding-bottom: 0 !important;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}

body.auth-page .main-content {
  min-height: 100vh;
  padding-top: 0 !important;
  padding-bottom: 0;
}

body.auth-page #mainContentContainer {
  padding-top: 0 !important;
}

.auth-page .app-container {
  display: block;
}

.auth-page .main-content {
  background: #f7f8fc;
}

.auth-page .main-content .container {
  max-width: none;
  padding: 0;
}

.auth-page .main-content .container > br {
  display: none;
}

.auth-split {
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  background: #f7f8fc;
}

.auth-brand-accent {
  color: var(--blue);
}

.auth-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 18%, rgba(26, 92, 255, 0.22), transparent 44%),
    radial-gradient(circle at 84% 20%, rgba(111, 145, 255, 0.16), transparent 48%),
    radial-gradient(circle at 76% 84%, rgba(88, 121, 235, 0.16), transparent 42%),
    linear-gradient(160deg, #eef2ff 0%, #f7f9ff 42%, #f2f4fb 100%);
}

.auth-visual::before,
.auth-visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(4px);
  z-index: 0;
  pointer-events: none;
}

.auth-visual::before {
  width: 340px;
  height: 340px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(26, 92, 255, 0.28), rgba(26, 92, 255, 0));
  animation: authVisualOrbit 11s ease-in-out infinite;
}

.auth-visual::after {
  width: 380px;
  height: 380px;
  right: -140px;
  bottom: -150px;
  background: radial-gradient(circle, rgba(56, 103, 255, 0.24), rgba(56, 103, 255, 0));
  animation: authVisualOrbit 13s ease-in-out infinite reverse;
}

.auth-visual-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 54px 54px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-content: center;
  opacity: 0.98;
}

.auth-visual-tile {
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  border: 1px solid rgba(228, 228, 236, 0.96);
  box-shadow: 0 18px 44px rgba(22, 30, 52, 0.12);
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
  backdrop-filter: blur(4px);
  animation: authTileFloat 8s ease-in-out infinite;
}

.auth-visual-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    var(--auth-cover-url),
    linear-gradient(135deg, rgba(26, 92, 255, 0.2), rgba(26, 92, 255, 0.02));
  background-size: cover, 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.06);
}

.auth-visual-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 14, 24, 0.08), rgba(10, 14, 24, 0.22)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%);
  opacity: 0.84;
}

.auth-visual-tile:nth-child(3n + 1) {
  transform: translateY(-12px) rotate(-2.2deg);
  animation-delay: -1.8s;
}

.auth-visual-tile:nth-child(3n + 2) {
  transform: translateY(4px) rotate(1.7deg);
  animation-delay: -3.2s;
}

.auth-visual-tile:nth-child(3n) {
  transform: translateY(14px) rotate(-1.2deg);
  animation-delay: -4.7s;
}

.auth-visual-tile:nth-child(4n + 1)::before { filter: saturate(1.08) hue-rotate(-6deg); }
.auth-visual-tile:nth-child(4n + 2)::before { filter: saturate(1.12) hue-rotate(6deg); }
.auth-visual-tile:nth-child(4n + 3)::before { filter: saturate(1.1) hue-rotate(12deg); }
.auth-visual-tile:nth-child(4n)::before { filter: saturate(1.06) hue-rotate(-10deg); }

.auth-visual-cover-tile {
  animation-duration: var(--auth-fly-duration, 10s);
  animation-delay: var(--auth-fly-delay, 0s);
}

.auth-visual-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(247, 248, 252, 0.12) 0%, rgba(247, 248, 252, 0.35) 54%, rgba(247, 248, 252, 0.9) 100%);
  backdrop-filter: blur(1.5px);
}

@keyframes authTileFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

@keyframes authVisualOrbit {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(10px, -12px) scale(1.05);
  }
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 28px;
}

.auth-panel-card {
  width: 100%;
  max-width: 460px;
  margin: 0;
}

.auth-card-flashes {
  margin-bottom: 14px;
}

.auth-card-flashes .alert {
  margin: 0 0 10px 0;
}

.auth-card-flashes .alert:last-child {
  margin-bottom: 0;
}

.auth-panel-footer {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}

.auth-social-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 12px;
  color: #6d7893;
  font-size: 13px;
  font-weight: 600;
  text-transform: lowercase;
}

.auth-social-divider::before,
.auth-social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(26, 92, 255, 0.24);
}

.auth-social-divider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
}

.auth-google-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}

.auth-submit-btn {
  margin-bottom: 14px;
}

.auth-passkey-btn[hidden] {
  display: none;
}

.auth-page-register .register-wizard-header {
  margin: 6px 0 18px;
}

.auth-page-register .register-wizard-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-page-register .register-wizard-pill {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--black);
}

.auth-page-register .register-wizard-pill.is-active {
  background: rgba(26, 92, 255, 0.14);
  border-color: rgba(26, 92, 255, 0.28);
  color: var(--black);
}

.auth-page-register #registerForm.wizard-ready .wizard-step {
  display: none;
}

.auth-page-register #registerForm.wizard-ready .wizard-step.is-active {
  display: block;
}

.auth-page-register .register-wizard-actions {
  display: none;
  margin-top: 14px;
  gap: 10px;
}

.auth-page-register #registerForm.wizard-ready .register-wizard-actions {
  display: flex;
}

.auth-page-register .register-wizard-actions .btn {
  flex: 1;
  min-height: 44px;
  margin: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

.auth-page-register .register-wizard-actions .auth-submit-btn {
  width: auto;
  margin: 0;
}

@media (max-width: 980px) {
  body.auth-page {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100svh;
    -webkit-overflow-scrolling: touch;
  }

  .auth-page .main-content {
    min-height: 100svh;
  }

  .auth-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .auth-split > :first-child {
    display: none;
  }

  .auth-visual {
    display: none;
  }

  .auth-panel {
    padding: 20px 16px;
    align-items: flex-start;
  }

  body.auth-page-login .auth-panel,
  body.auth-page-register .auth-panel,
  body.auth-page-forgot-password .auth-panel,
  body.auth-page-reset-password .auth-panel {
    align-items: center;
    justify-content: center;
  }

  body.auth-page-login .auth-panel-card.auth-form-container,
  body.auth-page-register .auth-panel-card.auth-form-container,
  body.auth-page-forgot-password .auth-panel-card.auth-form-container,
  body.auth-page-reset-password .auth-panel-card.auth-form-container {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
}

@media (max-width: 520px) {
  .auth-panel {
    padding: 14px 12px;
    justify-content: flex-start;
  }

  body.auth-page-login .auth-panel,
  body.auth-page-register .auth-panel,
  body.auth-page-forgot-password .auth-panel,
  body.auth-page-reset-password .auth-panel {
    justify-content: center;
    align-items: center;
  }

  .auth-panel-card.auth-form-container {
    padding: 20px 16px;
    border-radius: 16px;
  }

  body.auth-page-login .auth-panel-card.auth-form-container,
  body.auth-page-register .auth-panel-card.auth-form-container,
  body.auth-page-forgot-password .auth-panel-card.auth-form-container,
  body.auth-page-reset-password .auth-panel-card.auth-form-container {
    padding: 0;
    border-radius: 0;
  }

  .auth-form-container h2 {
    font-size: 28px;
  }

  .auth-subtitle {
    margin: 10px 0 18px;
  }

  .auth-panel-footer {
    margin-top: 16px;
  }
}

@media (max-height: 740px) and (max-width: 520px) {
  .auth-panel {
    padding: 10px 12px;
  }

  .auth-panel-card.auth-form-container {
    padding: 18px 14px;
  }

  body.auth-page-login .auth-panel-card.auth-form-container,
  body.auth-page-register .auth-panel-card.auth-form-container,
  body.auth-page-forgot-password .auth-panel-card.auth-form-container,
  body.auth-page-reset-password .auth-panel-card.auth-form-container {
    padding: 0;
  }

  .auth-subtitle {
    margin: 8px 0 16px;
  }
}

.auth-page .main-content,
.auth-split {
  background: var(--white);
}

.auth-split {
  grid-template-columns: 1fr;
  place-items: center;
  padding: 28px;
}

.auth-visual {
  display: none;
}

.auth-panel {
  width: 100%;
  padding: 0;
}

.auth-panel-card {
  max-width: 430px;
}

.auth-form-container {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  box-shadow: none;
}

.auth-logo-lockup {
  display: inline-flex;
  width: 92px;
  margin: 0 0 22px;
}

.auth-logo-lockup img {
  width: 100%;
  height: auto;
  display: block;
}

.auth-logo-dark,
html.dark-mode .auth-logo-light {
  display: none;
}

html.dark-mode .auth-logo-dark {
  display: block;
}

.auth-form-container h2 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0;
}

.auth-subtitle {
  margin: 0 0 24px;
}

.auth-submit-btn,
.auth-btn-primary {
  background: var(--blue);
  box-shadow: none;
}

.auth-submit-btn:hover {
  box-shadow: none;
}

.auth-google-btn {
  border-radius: 8px;
  box-shadow: none;
}

@media (max-width: 520px) {
  .auth-split {
    padding: 18px;
  }

  body.auth-page-login .auth-panel-card.auth-form-container,
  body.auth-page-register .auth-panel-card.auth-form-container,
  body.auth-page-forgot-password .auth-panel-card.auth-form-container,
  body.auth-page-reset-password .auth-panel-card.auth-form-container {
    padding: 0;
  }

  .auth-logo-lockup {
    width: 82px;
  }
}

.auth-shake-submit {
  animation: auth-shake-submit 0.48s ease;
}

.auth-shake-error {
  animation: auth-shake-error 0.3s ease;
}

@keyframes auth-shake-submit {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

@keyframes auth-shake-error {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

body.oauth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 12% 8%, rgba(26, 92, 255, 0.14), transparent 36%),
    radial-gradient(circle at 85% 20%, rgba(111, 145, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #f7f8fc 0%, #f4f6fb 100%);
  padding: 24px;
  font-family: "Syne", "Space Mono", -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
}

.oauth-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(26, 92, 255, 0.08);
  max-width: 520px;
  width: 100%;
  overflow: hidden;
}

.oauth-header {
  padding: 32px 32px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.oauth-brand-logo {
  height: 32px;
  width: auto;
  margin-bottom: 16px;
}

.oauth-app-name {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--black);
}

.oauth-developer {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

.oauth-body {
  padding: 24px 32px;
}

.oauth-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 12px;
}

.oauth-scope-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
}

.oauth-scope-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(26, 92, 255, 0.04);
  border: 1px solid rgba(26, 92, 255, 0.1);
  border-radius: 12px;
}

.oauth-scope-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1a5cff 0%, #2b51da 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.oauth-scope-label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--black);
}

.oauth-scope-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.oauth-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(26, 92, 255, 0.08);
  border: 1px solid rgba(26, 92, 255, 0.16);
  border-radius: 12px;
  margin-bottom: 20px;
}

.oauth-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #dcdfea;
}

.oauth-user-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a5cff 0%, #2b51da 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
}

.oauth-user-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--black);
}

.oauth-user-handle {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.oauth-login-form {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.oauth-login-form label {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--black);
}

.oauth-login-form input {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  font-family: "Syne", "Space Mono", -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
  background: #ffffff;
  color: var(--black);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.oauth-login-form input:focus {
  outline: none;
  border-color: rgba(26, 92, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.15);
}

.oauth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px 32px 28px;
  border-top: 1px solid var(--border);
}

.oauth-btn {
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: "Syne", "Space Mono", -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  text-align: center;
}

.oauth-btn:active {
  transform: scale(0.98);
}

.oauth-btn-deny {
  background: #f2f4f9;
  border-color: var(--border);
  color: var(--text-secondary);
}

.oauth-btn-deny:hover {
  background: #eaedf6;
  color: var(--black);
}

.oauth-btn-allow {
  background: linear-gradient(135deg, #1a5cff 0%, #2b51da 100%);
  color: var(--white);
  box-shadow: 0 12px 26px rgba(26, 92, 255, 0.3);
}

.oauth-btn-allow:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(26, 92, 255, 0.35);
}

.oauth-error-card {
  padding: 34px 30px;
  text-align: center;
}

.oauth-error-icon {
  font-size: 2.4rem;
  color: var(--danger);
  margin-bottom: 12px;
}

.oauth-error-text {
  font-size: 1rem;
  color: var(--black);
  font-weight: 700;
}

.oauth-error-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 8px;
}

.oauth-login-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.18);
  color: #991b1b;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
}

.oauth-footer-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 0 32px 20px;
}

@media (max-width: 640px) {
  body.oauth-page {
    padding: 14px;
    align-items: flex-start;
  }

  .oauth-card {
    border-radius: 16px;
  }

  .oauth-header,
  .oauth-body,
  .oauth-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .oauth-actions {
    grid-template-columns: 1fr;
  }
}

.form-consent-group {
  margin-top: 2px;
}

.consent-label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black);
  margin-bottom: 0 !important;
}

.consent-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
}

.consent-label a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.consent-label a:hover {
  text-decoration: underline;
}

#submitBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.policy-page {
  padding: 24px 0 16px;
}

.policy-container {
  max-width: 880px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 28px 10px;
}

.policy-container h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--black);
  letter-spacing: -0.6px;
  margin-bottom: 18px;
}

.policy-section {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.policy-section:first-of-type {
  border-top: 0;
  padding-top: 10px;
}

.policy-section h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--black);
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}

.policy-section p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 8px !important;
}

.policy-section a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.policy-section a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .auth-form-container {
    border-radius: 14px;
  }

  .auth-subtitle {
    margin-bottom: 20px;
  }

  .policy-container {
    padding: 22px 18px 8px;
  }

  .policy-container h1 {
    font-size: 31px;
  }

  .policy-section h2 {
    font-size: 21px;
  }
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--purple);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 92, 255, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: rgba(26, 92, 255, 0.08);
  border-color: var(--blue);
}

.btn-danger {
  background: var(--danger);
  color: var(--white);
}

.btn-danger:hover {
  background: #DC2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-warning {
  background: #F59E0B;
  color: #1a1a1a;
  font-weight: 600;
}

.btn-warning:hover {
  background: #D97706;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-small {
  padding: 8px 12px;
  font-size: 12px;
}

.btn-large {
  padding: 14px 32px;
  font-size: 15px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}


.hero {
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 20px;
  color: var(--black);
}

.hero p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 600px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.authenticated-content h2 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 12px;
}


.discovery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.discovery-header {
  margin-bottom: 40px;
}

.discovery-header h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.discovery-header p {
  color: var(--text-secondary);
  font-size: 15px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
  }
}


.track-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.track-card:hover {
  transform: translateY(-4px);
}

.track-card-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 12px;
  aspect-ratio: 1;
  background: #f0f0f0;
}

.track-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.track-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  will-change: opacity;
}

.track-card:hover .track-card-overlay {
  opacity: 1;
}

.play-track-btn-large {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.play-track-btn-large:hover {
  background: var(--purple);
  transform: scale(1.1);
}

.play-track-btn.is-now-playing,
.play-track-btn-large.is-now-playing,
.sd-btn-play.is-now-playing {
  background: var(--blue) !important;
  color: var(--white) !important;
  border-color: transparent;
  box-shadow: 0 0 0 6px rgba(26, 92, 255, 0.14);
  animation: svNowPlayingButtonPulse 1.35s ease-in-out infinite;
}

.sd-btn-play.is-now-playing {
  box-shadow: 0 0 0 7px rgba(26, 92, 255, 0.14);
}

@keyframes svNowPlayingButtonPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.track-info {
  padding: 0 4px;
}

.track-details {
  margin-bottom: 8px;
}

.track-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-artist {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-artist a {
  color: var(--muted);
  text-decoration: none;
}

.track-artist a:hover {
  color: var(--blue);
}

.track-meta-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

.track-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.track-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.track-social-buttons {
  display: flex;
  gap: 8px;
}

.social-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s;
}

.social-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
}

.track-author-actions {
  display: flex;
  gap: 8px;
}

.btn-edit,
.btn-delete {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s;
}

.btn-edit:hover {
  color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
}

.btn-delete:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
}


.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--black);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.pagination a:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
}

.pagination span.active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}


.empty-state {
  text-align: center;
  padding: 60px 24px;
}

.empty-state p {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.empty-comments {
  text-align: center;
  padding: 40px 24px;
  color: var(--muted);
}

.playlists-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.playlists-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 16px;
  padding: 18px 20px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--white) 92%, transparent), color-mix(in srgb, var(--blue) 8%, var(--white)));
}

.playlists-header h1 {
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.playlists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .playlists-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

.playlist-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--black);
}

.playlist-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(26, 92, 255, 0.1);
  transform: translateY(-4px);
}

.library-grid .playlist-card {
  cursor: default;
}

.library-grid .library-card {
  position: relative;
}

.library-load-sentinel {
  width: 100%;
  height: 1px;
}

.library-card-skeleton {
  pointer-events: none;
  cursor: default;
}

.library-card-skeleton:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}

.library-card-skeleton .playlist-cover,
.library-skeleton-line {
  background: linear-gradient(90deg, rgba(26, 92, 255, 0.08), rgba(26, 92, 255, 0.16), rgba(26, 92, 255, 0.08));
  background-size: 220% 100%;
  animation: soundviaSkeletonPulse 1.15s ease-in-out infinite;
}

.library-skeleton-line {
  display: block;
  height: 11px;
  border-radius: 999px;
  margin-inline: auto;
}

.library-skeleton-title {
  width: 82%;
  margin-top: 2px;
}

.library-skeleton-meta {
  width: 52%;
  margin-top: 9px;
  opacity: 0.72;
}

@keyframes soundviaSkeletonPulse {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

.library-card-dragging {
  opacity: 0.55;
}

.library-card-touch-dragging {
  opacity: 0.92;
  box-shadow: 0 16px 34px rgba(16, 30, 68, 0.26);
  transform-origin: top left;
}

.library-drop-target {
  border-color: var(--blue) !important;
}

.library-touch-placeholder {
  border: 1px dashed rgba(26, 92, 255, 0.45);
  border-radius: 12px;
  background: rgba(26, 92, 255, 0.08);
}

body.library-touch-reorder-active {
  cursor: grabbing;
}

body.library-touch-reorder-active .mobile-top-nav,
body.library-touch-reorder-active .mobile-bottom-nav,
body.library-touch-reorder-active #playerSection {
  pointer-events: none;
}

.playlist-cover {
  width: 100%;
  aspect-ratio: 1;
  background: #f0f0f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
}

.library-grid .playlist-cover .library-pin-indicator {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: clamp(18px, 2vw, 22px);
  transform: rotate(-25deg);
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 2;
  opacity: 1 !important;
  visibility: visible !important;
}

.library-grid .playlist-cover .library-pin-indicator.is-hidden {
  display: none !important;
}

.playlist-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.default-playlist-cover,
.playlist-placeholder {
  font-size: 32px;
  color: var(--muted);
}

.default-playlist-cover {
  color: var(--blue);
}

.playlist-info {
  text-align: center;
}

.library-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.library-item-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(26, 92, 255, 0.08);
  border: 1px solid rgba(26, 92, 255, 0.14);
  border-radius: 999px;
  padding: 3px 8px;
}

.library-drag-handle {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: grab;
}

.library-drag-handle:active {
  cursor: grabbing;
}

.library-card-actions {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.library-order-btn {
  padding: 6px 8px;
  min-width: 36px;
  display: none;
}

.library-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  transform: rotate(-8deg);
  transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.library-remove-btn i {
  font-size: 20px;
  line-height: 1;
}

.library-remove-btn:hover,
.library-remove-btn:focus-visible {
  outline: none;
  background: transparent;
  color: var(--black);
  transform: rotate(-8deg) scale(1.22);
}

.library-remove-btn:disabled {
  cursor: wait;
  opacity: 0.55;
}

@media (min-width: 769px) {
  .library-grid .library-card {
    padding-bottom: 48px;
  }

  .library-grid .library-remove-btn {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
  }
}

.library-save-btn.is-saved {
  background: rgba(26, 92, 255, 0.08);
  border-color: rgba(26, 92, 255, 0.3);
  color: var(--blue);
}

.playlist-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-count {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.status-lock-icon {
  margin-left: 6px;
  font-size: 0.82em;
  color: var(--muted);
  vertical-align: middle;
}

.playlist-description {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.playlist-desc-mobile {
  display: none;
}

@media (max-width: 768px) {
  .playlist-desc-desktop {
    display: none;
  }

  .playlist-desc-mobile {
    display: inline;
  }
}

.playlist-card .playlist-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
}

.playlist-card .playlist-header .playlist-name {
  flex: 1;
  margin: 0;
  cursor: pointer;
  text-align: center;
}

.visibility-toggle {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 8px;
  transition: all 0.2s;
  flex-shrink: 0;
  border-radius: 6px;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.visibility-toggle:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.search-section {
  margin-bottom: 60px;
}

.account-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.account-result-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--black);
  transition: all 0.2s ease;
  background: var(--white);
}

.account-result-card:hover {
  border-color: rgba(26, 92, 255, 0.35);
  box-shadow: 0 8px 20px rgba(12, 12, 14, 0.08);
  transform: translateY(-1px);
}

.account-result-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 42px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.account-result-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-result-content {
  min-width: 0;
}

.account-result-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
}

.account-result-handle {
  font-size: 13px;
  color: var(--muted);
}

.account-result-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.search-section h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.5px;
  margin-bottom: 32px;
  color: var(--black);
}

.search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.search-header {
  margin-bottom: 48px;
}

.search-header h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  color: var(--black);
}

.search-header p {
  font-size: 16px;
  color: var(--text-secondary);
}

.search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 56px;
}

.search-header {
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(26, 92, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
}

.search-header h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: clamp(30px, 5vw, 38px);
  font-weight: 400;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
  color: var(--black);
}

.search-header p {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}

.search-filters {
  margin-top: 14px;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

.search-mobile-summary {
  display: none;
}

.search-filter-chip {
  border: 1px solid var(--border);
  background: #f7f9ff;
  color: var(--black);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.search-filter-chip strong {
  min-width: 18px;
  text-align: center;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 11px;
  background: rgba(26, 92, 255, 0.12);
  color: var(--blue);
}

.search-filter-chip:hover {
  border-color: rgba(26, 92, 255, 0.45);
  background: rgba(26, 92, 255, 0.1);
}

.search-filter-chip.is-active {
  border-color: var(--blue);
  background: rgba(26, 92, 255, 0.14);
  color: var(--blue);
}

/* Keep the selected count readable using the proven notification-filter treatment. */
.search-filter-chip.is-active strong {
  color: var(--white);
  background: color-mix(in srgb, var(--white) 18%, transparent);
}

.search-result-group[hidden] {
  display: none !important;
}

.search-empty-filter {
  margin-top: 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 18px;
  color: var(--text-secondary);
  background: rgba(26, 92, 255, 0.04);
}

.search-empty-filter p {
  margin: 0;
}

.search-featured {
  margin-bottom: 28px;
  padding: 10px 0 24px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 0;
  background: transparent;
}

.search-featured .playlist-header {
  margin-bottom: 0;
  gap: 18px;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
}

.search-featured .playlist-cover-large,
.search-featured .playlist-cover-large-image {
  border-radius: 8px;
}

.search-featured .playlist-header-info {
  padding: 0;
}

.search-featured .playlist-title {
  margin: 5px 0;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
}

.search-featured .playlist-description {
  margin-bottom: 12px;
}

.search-featured .playlist-actions {
  margin-top: 0;
}

.search-featured .playlist-actions .btn {
  min-height: 38px;
  border-radius: 8px;
  box-shadow: none;
}

@media (max-width: 768px) {
  .search-featured {
    padding: 0 0 18px;
  }

  .search-featured .playlist-header {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.search-section {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  background: var(--white);
}

.search-section h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: clamp(24px, 4vw, 31px);
  font-weight: 400;
  letter-spacing: -0.4px;
  margin-bottom: 18px;
  color: var(--black);
}

.search-section-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.search-section-heading .playlist-type {
  font-size: 11px;
  letter-spacing: 1.1px;
  color: var(--text-secondary);
}

.search-section-count {
  min-width: 22px;
  text-align: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue);
  background: rgba(26, 92, 255, 0.12);
  border: 1px solid rgba(26, 92, 255, 0.18);
}

.search-container .grid-container,
.search-container .playlists-grid,
.search-container .account-results-grid {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
  padding-bottom: 6px;
}

.search-container .grid-container {
  gap: 14px;
}

.search-container .playlists-grid,
.search-container .account-results-grid {
  gap: 14px;
}

.search-container .grid-container > .track-card,
.search-container .playlists-grid > .playlist-card {
  flex: 0 0 clamp(148px, 20vw, 196px);
  scroll-snap-align: start;
}

.search-container .account-results-grid > .account-result-card {
  flex: 0 0 clamp(210px, 25vw, 260px);
  scroll-snap-align: start;
}

.search-container .track-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.search-container .track-card:hover {
  border-color: rgba(26, 92, 255, 0.35);
  box-shadow: 0 10px 24px rgba(12, 12, 14, 0.08);
  transform: translateY(-2px);
}

.search-container .track-card-image-wrapper {
  margin-bottom: 8px;
  border-radius: 10px;
}

.search-container .playlists-grid {
  gap: 14px;
}

.search-container .playlist-card {
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.search-container .playlist-card:hover {
  border-color: rgba(26, 92, 255, 0.35);
  box-shadow: 0 10px 24px rgba(12, 12, 14, 0.08);
  transform: translateY(-2px);
}

.search-container .playlist-info {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-container .playlist-name {
  font-size: 13px;
  line-height: 1.25;
  min-height: 1.25em;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-container .playlist-count {
  font-size: 11px;
  line-height: 1.2;
  min-height: 1.2em;
}

.search-container .playlist-description {
  font-size: 10px;
  line-height: 1.35;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.search-container .account-results-grid {
  gap: 14px;
}

.search-container .account-result-card {
  border-radius: 10px;
  padding: 12px;
}

.search-container .account-result-avatar {
  width: 44px;
  height: 44px;
  font-size: 34px;
}

.search-container .account-result-name {
  font-size: 13px;
}

.search-container .account-result-handle {
  font-size: 12px;
}

.search-container .account-result-meta {
  font-size: 11px;
}

.search-container .track-title {
  font-size: 13px;
  line-height: 1.25;
  min-height: 1.25em;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-container .track-artist {
  font-size: 11px;
  line-height: 1.25;
  min-height: 1.25em;
}

.search-container .track-meta-info {
  font-size: 10px;
  line-height: 1.2;
  margin-bottom: 0;
  min-height: 1.2em;
}

.search-container .play-track-btn-large {
  width: 48px;
  height: 48px;
  font-size: 17px;
}

.search-container .empty-state {
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: rgba(26, 92, 255, 0.015);
  padding: 44px 20px;
}

.search-container .empty-state p {
  margin-bottom: 12px;
}

.search-load-sentinel {
  width: 100%;
  height: 1px;
}

.search-load-skeletons {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.search-result-skeleton {
  min-height: 86px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
}

.search-result-skeleton-cover,
.search-result-skeleton-copy span,
.search-result-skeleton-copy small,
.search-result-skeleton-copy em {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(12, 12, 14, 0.06), rgba(26, 92, 255, 0.12), rgba(12, 12, 14, 0.06));
  background-size: 220% 100%;
  animation: soundviaSkeletonPulse 1.15s ease-in-out infinite;
}

.search-load-skeletons.is-media-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px 20px;
}

.search-result-skeleton.is-media-card {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.search-result-skeleton.is-media-card .search-result-skeleton-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 11px;
  border-radius: 16px;
}

.search-result-skeleton.is-media-card .search-result-skeleton-copy {
  gap: 6px;
}

.search-result-skeleton.is-media-card .search-result-skeleton-copy span {
  width: 76%;
  height: 17px;
}

.search-result-skeleton.is-media-card .search-result-skeleton-copy small {
  width: 52%;
  height: 13px;
}

.search-result-skeleton.is-media-card .search-result-skeleton-copy em {
  width: 64%;
  height: 10px;
}

.search-result-skeleton.is-account-card .search-result-skeleton-cover {
  border-radius: 50%;
}

.search-result-skeleton-cover {
  width: 68px;
  height: 68px;
}

.search-result-skeleton-copy {
  display: grid;
  gap: 8px;
}

.search-result-skeleton-copy span {
  width: min(280px, 70%);
  height: 16px;
}

.search-result-skeleton-copy small {
  width: min(210px, 54%);
  height: 12px;
}

.search-result-skeleton-copy em {
  width: min(150px, 38%);
  height: 10px;
}

@media (min-width: 769px) {
  .search-container {
    max-width: 1120px;
  }

  .search-filters {
    overflow: visible;
    flex-wrap: wrap;
  }

  .search-section {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    margin-bottom: 34px;
  }

  .search-section-heading {
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
  }

  .search-section-heading .playlist-type {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  .search-container .grid-container,
  .search-container .playlists-grid,
  .search-container .account-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .search-container .grid-container > .track-card,
  .search-container .playlists-grid > .playlist-card,
  .search-container .account-results-grid > .account-result-card {
    width: 100%;
    min-width: 0;
    flex: none;
    scroll-snap-align: none;
  }

  .search-container .track-card,
  .search-container .playlist-card,
  .search-container .account-result-card {
    min-height: 86px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    transform: none;
  }

  .search-container .track-card:hover,
  .search-container .playlist-card:hover,
  .search-container .account-result-card:hover {
    transform: none;
    border-color: rgba(26, 92, 255, 0.34);
    box-shadow: 0 8px 22px rgba(12, 12, 14, 0.06);
  }

  .search-container .track-card-image-wrapper,
  .search-container .playlist-cover,
  .search-container .account-result-avatar {
    width: 68px;
    height: 68px;
    margin: 0;
    border-radius: 8px;
  }

  .search-container .track-card-image-wrapper {
    grid-column: 1;
    grid-row: 1;
  }

  .search-container .track-image,
  .search-container .playlist-cover-image,
  .search-container .account-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .search-container .track-info,
  .search-container .playlist-info,
  .search-container .account-result-content {
    min-width: 0;
    text-align: left;
  }

  .search-container .track-title,
  .search-container .playlist-name,
  .search-container .account-result-name {
    font-size: 16px;
    font-weight: 750;
    min-height: 0;
  }

  .search-container .track-artist,
  .search-container .playlist-count,
  .search-container .account-result-handle {
    font-size: 13px;
    color: var(--text-secondary);
  }

  .search-container .track-meta-info,
  .search-container .playlist-description,
  .search-container .account-result-meta {
    min-height: 0;
    font-size: 12px;
  }

  .search-container .playlist-description {
    display: block;
    line-clamp: unset;
    -webkit-line-clamp: unset;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .search-container .track-card-overlay {
    background: transparent;
    opacity: 1;
    pointer-events: auto;
  }

  .search-container .play-track-btn-large {
    width: 42px;
    height: 42px;
    box-shadow: none;
  }

}

@media (max-width: 768px) {
  .search-load-skeletons.is-media-grid {
    display: flex;
    gap: 14px;
    overflow-x: hidden;
    padding: 4px 0 14px;
  }

  .search-result-skeleton.is-media-card {
    flex: 0 0 clamp(166px, 44vw, 210px);
    width: clamp(166px, 44vw, 210px);
    min-width: clamp(166px, 44vw, 210px);
  }

  .search-result-skeleton.is-media-card .search-result-skeleton-cover {
    border-radius: 18px;
  }
}

@media (max-width: 768px) {
  .search-container {
    padding: 8px 12px 40px;
  }

  .search-section,
  .search-featured {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    margin-bottom: 22px;
  }

  .search-mobile-summary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 2px 10px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.25;
  }

  .search-mobile-summary strong {
    color: var(--black);
    font-size: 18px;
  }

  .search-filters {
    position: sticky;
    top: var(--mobile-sticky-top-offset, 0px);
    z-index: 30;
    margin: 0 -12px 14px;
    padding: 8px 12px 10px;
    background: color-mix(in srgb, var(--white) 92%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    gap: 8px;
    scrollbar-width: none;
  }

  .search-filters::-webkit-scrollbar {
    display: none;
  }

  .search-filter-chip {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    box-shadow: none;
  }

  .search-filter-chip strong {
    min-width: 21px;
    padding: 2px 6px;
  }

  .search-section-heading {
    margin: 0 2px 10px;
  }

  .search-section h2 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .search-featured .playlist-header {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 0;
  }

  .search-featured .playlist-cover-large {
    width: 72px;
    height: 72px;
    border-radius: 10px;
  }

  .search-featured .playlist-cover-large-image {
    border-radius: 10px;
  }

  .search-featured .playlist-header-info {
    padding: 0;
    min-width: 0;
  }

  .search-featured .playlist-title {
    margin: 4px 0;
    font-size: 22px;
    line-height: 1.1;
  }

  .search-featured .playlist-description {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.3;
  }

  .search-featured .playlist-actions {
    gap: 8px;
    flex-wrap: nowrap;
  }

  .search-featured .playlist-actions .btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 10px;
    font-size: 0;
    gap: 0;
  }

  .search-featured .playlist-actions .btn i {
    font-size: 14px;
    margin: 0;
  }

  .search-container .grid-container,
  .search-container .playlists-grid,
  .search-container .account-results-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .search-load-skeletons {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .search-result-skeleton {
    min-height: 82px;
    grid-template-columns: 62px minmax(0, 1fr);
    padding: 9px;
    border-radius: 12px;
  }

  .search-result-skeleton-cover {
    width: 62px;
    height: 62px;
    border-radius: 10px;
  }

  .search-container .grid-container > .track-card,
  .search-container .playlists-grid > .playlist-card,
  .search-container .account-results-grid > .account-result-card {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    scroll-snap-align: unset;
  }

  .search-container .track-card,
  .search-container .playlist-card,
  .search-container .account-result-card {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    background: var(--white);
    box-shadow: none;
  }

  .search-container .track-card {
    padding: 9px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .search-container .playlist-card {
    padding: 9px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .search-container .track-card-image-wrapper {
    width: 62px;
    min-width: 62px;
    margin-bottom: 0;
    border-radius: 9px;
  }

  .search-container .track-info {
    min-width: 0;
  }

  .search-container .playlist-cover {
    width: 62px;
    min-width: 62px;
    margin-bottom: 0;
    border-radius: 9px;
  }

  .search-container .playlist-info {
    min-width: 0;
  }

  .search-container .account-result-card {
    align-items: center;
    padding: 10px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .search-container .account-result-avatar {
    width: 48px;
    height: 48px;
  }

  .search-container .track-title,
  .search-container .playlist-name {
    font-size: 14px;
  }

  .search-container .track-artist,
  .search-container .playlist-count,
  .search-container .account-result-handle,
  .search-container .account-result-meta {
    font-size: 12px;
  }

  .search-container .track-meta-info,
  .search-container .playlist-description {
    display: none;
  }

  .search-container .play-track-btn-large {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .search-empty-filter,
  .search-container .empty-state {
    padding: 24px 14px;
    border-radius: 12px;
  }

  .search-container .track-title,
  .search-container .playlist-name,
  .discovery-home .track-title,
  .discovery-home .playlist-name,
  .discovery-top-card-text strong {
    display: block;
    max-width: 100%;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


.playlist-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.playlist-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  margin-bottom: 40px;
  align-items: start;
}

@media (max-width: 768px) {
  .playlist-header {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mobile-top-blend-playlist.playlist-detail-container {
    padding-top: 16px;
  }

  .mobile-top-blend-playlist .playlist-header {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 20px;
  }

  .mobile-top-blend-playlist .playlist-cover-large {
    width: 92px;
    height: 92px;
    border-radius: 10px;
  }

  .mobile-top-blend-playlist .playlist-cover-large-image {
    border-radius: 10px;
  }

  .mobile-top-blend-playlist .default-playlist-cover-large,
  .mobile-top-blend-playlist .playlist-placeholder-large {
    font-size: 32px;
  }

  .mobile-top-blend-playlist .playlist-header-info {
    padding: 0 42px 0 0;
    min-width: 0;
  }

  .mobile-top-blend-playlist .detail-context-menu-trigger {
    width: 34px;
    height: 34px;
  }

  .mobile-top-blend-playlist .playlist-title {
    font-size: 24px;
    line-height: 1.12;
    margin: 6px 0;
    overflow-wrap: anywhere;
  }

  .mobile-top-blend-playlist .playlist-description {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mobile-top-blend-playlist .playlist-meta {
    gap: 6px 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .mobile-top-blend-playlist .meta-item {
    font-size: 12px;
  }

  .mobile-top-blend-playlist .playlist-actions {
    margin-top: 8px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .mobile-top-blend-playlist .playlist-actions .btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border-radius: 10px;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .mobile-top-blend-playlist .playlist-actions .btn i {
    font-size: 15px;
    margin: 0;
  }

  .mobile-top-blend-release.playlist-detail-container {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    margin-top: -14px;
  }

  .mobile-top-blend-release .playlist-header {
    gap: 0;
    margin-bottom: 28px;
    position: relative;
  }

  .mobile-top-blend-release .playlist-cover-large {
    width: 100vw;
    height: min(100vw, 520px);
    margin: 0;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    position: relative;
  }

  .mobile-top-blend-release .playlist-cover-large::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(6, 10, 20, 0) 36%, rgba(6, 10, 20, 0.26) 72%, var(--white) 100%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 72%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 34%, #000 72%, #000 100%);
    pointer-events: none;
  }

  .mobile-top-blend-release .playlist-cover-large-image {
    border-radius: 0;
    object-position: top center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  }

  .mobile-top-blend-release .default-playlist-cover-large,
  .mobile-top-blend-release .playlist-placeholder-large {
    width: 100%;
    height: 100%;
    font-size: clamp(72px, 22vw, 120px);
    background: linear-gradient(145deg, rgba(26, 92, 255, 0.24), rgba(12, 17, 30, 0.92));
    color: rgba(255, 255, 255, 0.9);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  }

  .mobile-top-blend-release .playlist-header-info {
    margin-top: clamp(-220px, -46vw, -120px);
    padding: 0 16px;
    padding-right: 56px;
    position: relative;
    z-index: 2;
  }

  .mobile-top-blend-release.cover-tone-dark .playlist-type,
  .mobile-top-blend-release.cover-tone-dark .playlist-description,
  .mobile-top-blend-release.cover-tone-dark .meta-item {
    color: var(--white);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26), 0 2px 14px rgba(0, 0, 0, 0.62);
  }

  .mobile-top-blend-release.cover-tone-dark .playlist-title,
  .mobile-top-blend-release.cover-tone-dark .release-title-link,
  .mobile-top-blend-release.cover-tone-dark .release-artist-link {
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
  }

  .mobile-top-blend-release.cover-tone-light .playlist-type,
  .mobile-top-blend-release.cover-tone-light .meta-item {
    color: rgba(17, 24, 39, 0.66);
  }

  .mobile-top-blend-release.cover-tone-light .playlist-description {
    color: var(--white);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26), 0 2px 14px rgba(0, 0, 0, 0.62);
  }

  .mobile-top-blend-release.cover-tone-light .playlist-title,
  .mobile-top-blend-release.cover-tone-light .release-title-link,
  .mobile-top-blend-release.cover-tone-light .release-artist-link {
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.713);
  }

  .mobile-top-blend-release.cover-tone-auto .playlist-type,
  .mobile-top-blend-release.cover-tone-auto .playlist-description,
  .mobile-top-blend-release.cover-tone-auto .meta-item,
  .mobile-top-blend-release.cover-tone-auto .playlist-title,
  .mobile-top-blend-release.cover-tone-auto .release-title-link,
  .mobile-top-blend-release.cover-tone-auto .release-artist-link {
    color: #f7faff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26), 0 2px 14px rgba(0, 0, 0, 0.62);
  }

  .mobile-top-blend-release .playlist-content {
    padding: 0 16px;
  }
}

.playlist-cover-large {
  aspect-ratio: 1;
  background: #f0f0f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.playlist-cover-large-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.default-playlist-cover-large,
.playlist-placeholder-large {
  font-size: 64px;
  color: var(--muted);
}

.default-playlist-cover-large {
  color: var(--blue);
}

.playlist-header-info {
  padding: 16px 0;
  position: relative;
  padding-right: 52px;
}

.detail-context-menu-trigger {
  position: absolute;
  top: 2px;
  right: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(242, 242, 247, 0.78);
  color: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.14s ease;
}

.detail-context-menu-trigger:hover {
  border-color: rgba(26, 92, 255, 0.34);
  background: rgba(26, 92, 255, 0.1);
}

.detail-context-menu-trigger:active {
  transform: scale(0.96);
}

.playlist-type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 1px;
}

.playlist-title {
  font-family: 'Syne', Georgia, serif;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 400;
  letter-spacing: -0.5px;
  margin: 12px 0;
}

.playlist-description {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.6;
}

.playlist-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.meta-item {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.playlist-creators-inline {
  display: inline;
}

.playlist-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.playlist-content {
  margin-top: 40px;
}

.playlist-track-search-row {
  margin: 2px 0 24px;
  width: 100%;
}

.playlist-track-search-shell {
  width: 100%;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 48px;
  padding: 0 12px;
  background: var(--white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.playlist-track-search-shell > i {
  color: var(--blue);
  font-size: 13px;
}

.playlist-track-search-input {
  width: 100%;
  min-height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  color: var(--text-primary);
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.playlist-track-search-input::placeholder {
  color: var(--text-secondary);
}

.playlist-track-search-input:focus {
  outline: none;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.playlist-track-search-shell input[type="search"].playlist-track-search-input,
#playlistTrackSearchInput {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 100% !important;
}

.playlist-track-search-shell input[type="search"].playlist-track-search-input:focus,
#playlistTrackSearchInput:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.playlist-track-search-shell:focus-within {
  border-color: rgba(26, 92, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.12);
}

.playlist-track-search-clear {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}

.playlist-track-search-clear:hover {
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
}

.playlist-track-search-empty {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  background: color-mix(in srgb, var(--white) 90%, var(--blue) 10%);
}

.track-row.is-search-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .playlist-content.has-mobile-playlist-search {
    padding-top: 0;
  }

  .playlist-track-search-row {
    display: block;
    margin: 0 0 12px;
  }

  .playlist-track-search-shell {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(26, 92, 255, 0.14);
    border-radius: 14px;
    min-height: 46px;
    padding: 0 10px;
    background: transparent;
    box-shadow: 0 10px 24px rgba(7, 14, 35, 0.2);
  }

  .playlist-track-search-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11, 18, 38, 0.62);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    z-index: 0;
    pointer-events: none;
  }

  .playlist-track-search-shell > i,
  .playlist-track-search-shell .playlist-track-search-input,
  .playlist-track-search-shell .playlist-track-search-clear {
    position: relative;
    z-index: 1;
  }

  .playlist-track-search-input {
    font-size: 14px;
    text-align: center;
  }

  .playlist-track-search-input::placeholder {
    text-align: center;
  }

  .playlist-track-search-clear {
    width: 26px;
    height: 26px;
  }

  .playlist-track-search-empty {
    margin-top: 8px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .playlist-detail-container[data-playlist-id] .playlist-track-search-row {
    display: none;
  }
}

.playlist-recommendations {
  margin-top: 28px;
}

.playlist-recommendations-header {
  margin-bottom: 12px;
}

.playlist-recommendations-header h2 {
  margin: 0;
  font-family: 'Syne', Georgia, serif;
  font-size: clamp(20px, 3.2vw, 30px);
  letter-spacing: -0.4px;
}

.playlist-recommendations-header p {
  margin: 6px 0 0 !important;
  color: var(--text-secondary);
  font-size: 13px;
}

.playlist-recommendations-list {
  overflow: hidden;
}

.playlist-recommendations-body {
  display: block;
}

.playlist-recommendations-loading,
.playlist-recommendations-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.playlist-recommendations-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.playlist-recommendations .track-btn[data-recommend-add="true"] {
  color: var(--blue);
}

.playlist-recommendations .track-btn[data-recommend-add="true"]:hover {
  background: rgba(26, 92, 255, 0.14);
}

.playlist-recommendations .track-btn.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.playlist-track-row-enter {
  animation: playlistTrackRowEnter 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.playlist-recommendation-row-enter {
  animation: playlistRecommendationRowEnter 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.playlist-recommendation-row-exit {
  animation: playlistRecommendationRowExit 320ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.playlist-tracks-list-enter {
  animation: playlistTracksListEnter 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.playlist-content .empty-state.playlist-empty-state-exit {
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 320ms ease, transform 320ms ease, max-height 320ms ease, margin 320ms ease, padding 320ms ease;
}

@keyframes playlistTrackRowEnter {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    background: rgba(26, 92, 255, 0.14);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: transparent;
  }
}

@keyframes playlistRecommendationRowEnter {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.988);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes playlistRecommendationRowExit {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
    max-height: 96px;
    margin: 0;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  100% {
    opacity: 0;
    transform: translateX(20px) scale(0.98);
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
  }
}

@keyframes playlistTracksListEnter {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.988);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


.tracks-list {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

#editReleaseTracksList,
#labelEditReleaseTracksList,
#releaseTracksList,
#labelReleaseTracksList {
  overflow: visible;
}

.tracks-header {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 100px;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(26, 92, 255, 0.02);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .playlists-header {
    flex-direction: column;
    align-items: stretch;
  }

  .playlists-header .btn {
    width: 100%;
  }

  .upload-header {
    flex-direction: column;
    align-items: stretch;
  }

  .upload-header-steps {
    justify-content: flex-start;
  }

  .upload-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .upload-span-2 {
    grid-column: auto;
  }

  .upload-tracks-header {
    flex-direction: column;
    align-items: stretch;
  }

  .tracks-header {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .tracks-header .track-artist,
  .track-row .track-artist {
    display: none;
  }
}

.track-row {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 100px;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.2s;
}

.track-row:hover {
  background: rgba(26, 92, 255, 0.02);
}

#releaseTracksList .track-row,
#labelReleaseTracksList .track-row,
#editReleaseTracksList .release-track-row,
#labelEditReleaseTracksList .release-track-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 16px;
  align-items: start;
}

#releaseTracksList .track-row .track-item-info h3,
#labelReleaseTracksList .track-row .track-item-info h3,
#editReleaseTracksList .release-track-row .track-item-info h3,
#labelEditReleaseTracksList .release-track-row .track-item-info h3 {
  font-size: 18px;
  margin-bottom: 6px;
  line-height: 1.2;
}

#releaseTracksList .track-row .track-meta,
#labelReleaseTracksList .track-row .track-meta,
#editReleaseTracksList .release-track-row .track-meta,
#labelEditReleaseTracksList .release-track-row .track-meta {
  font-size: 13px;
}

#releaseTracksList .track-row .track-item-actions,
#labelReleaseTracksList .track-row .track-item-actions,
#editReleaseTracksList .release-track-row .track-item-actions,
#labelEditReleaseTracksList .release-track-row .track-item-actions {
  justify-content: flex-end;
  align-items: center;
}

#releaseTracksList .track-row .track-edit-panel,
#labelReleaseTracksList .track-row .track-edit-panel,
#editReleaseTracksList .release-track-row .track-edit-panel,
#labelEditReleaseTracksList .release-track-row .track-edit-panel {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
}

#releaseTracksList .track-row .track-edit-panel .form-group,
#labelReleaseTracksList .track-row .track-edit-panel .form-group,
#editReleaseTracksList .release-track-row .track-edit-panel .form-group,
#labelEditReleaseTracksList .release-track-row .track-edit-panel .form-group {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  #releaseTracksList .track-row,
  #labelReleaseTracksList .track-row,
  #editReleaseTracksList .release-track-row,
  #labelEditReleaseTracksList .release-track-row {
    grid-template-columns: 1fr;
  }

  #releaseTracksList .track-row .track-item-actions,
  #labelReleaseTracksList .track-row .track-item-actions,
  #editReleaseTracksList .release-track-row .track-item-actions,
  #labelEditReleaseTracksList .release-track-row .track-item-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .track-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .track-row .track-title {
    min-width: 0;
  }

  .track-row .track-actions,
  .tracks-header .track-actions {
    justify-content: flex-end;
  }
}

.track-col {
  display: flex;
  align-items: center;
  gap: 8px;
}

.track-number {
  font-size: 12px;
  color: var(--muted);
  justify-content: center;
}

.drag-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 12px;
}

.drag-handle:active {
  cursor: grabbing;
}

.track-thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.track-info-small {
  flex: 1;
}

.track-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-name a {
  color: var(--black);
  text-decoration: none;
}

.track-name a:hover {
  color: var(--blue);
}

.track-meta-small {
  font-size: 11px;
  color: var(--muted);
}

.track-artist {
  font-size: 13px;
  color: var(--text-secondary);
}

.track-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.track-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.track-btn:hover {
  color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
}

.sv-now-playing-card {
  border-color: var(--blue);
  position: relative;
}

.sv-now-playing-card:hover {
  transform: none;
  box-shadow: none;
}

.sv-now-playing-card::before {
  content: none;
}


.sv-now-playing-badge {
  display: none !important;
}

.sv-now-playing-label {
  color: inherit;
}

.sv-now-playing-badge,
.sv-now-playing-badge .sv-now-playing-label {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.sv-now-playing-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--white);
  z-index: -1;
}

.sv-now-playing-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
  isolation: isolate;
}

.sv-now-playing-bars > span {
  display: block;
  width: 2px;
  border-radius: 999px;
  background: #9dc2ff;
  transform-origin: 50% 100%;
  will-change: transform;
  animation: none;
}

.sv-now-playing-bars > span:nth-child(1) { height: 5px; }
.sv-now-playing-bars > span:nth-child(2) { height: 10px; animation-delay: 0.14s; }
.sv-now-playing-bars > span:nth-child(3) { height: 7px; animation-delay: 0.28s; }

@keyframes svNowPlayingCardEnter {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes svNowPlayingBars {
  0%, 100% { transform: scaleY(0.4); }
  50%       { transform: scaleY(1); }
}

.sd-btn-play .sv-inline-play-label {
  display: inline;
}

.track-row.sv-now-playing-track,
.track-item.sv-now-playing-track {
  background: rgba(26, 92, 255, 0.06);
}


.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 40px;
}

.profile-cover {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: 18px;
  background: radial-gradient(circle at 85% 0%, rgba(39, 66, 139, 0.42), rgba(4, 6, 17, 0) 46%), linear-gradient(110deg, #04050b 0%, #0a0f2b 52%, #192750 100%);
  overflow: hidden;
  isolation: isolate;
}

.profile-liquid-source {
  display: none;
}

.profile-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(4, 5, 11, 0.04) 0%, rgba(4, 5, 11, 0.28) 52%, rgba(4, 5, 11, 0.9) 100%);
  pointer-events: none;
}

.profile-header {
  position: relative;
  display: block;
  padding: 0 0 34px;
  margin-bottom: 20px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.profile-info.playlist-header-info {
  padding-right: 0;
}

.profile-info {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 18px;
  position: relative;
}

.profile-container.has-profile-banner .profile-info {
  align-items: flex-end;
  margin-top: -74px;
  padding: 0 24px;
}

.profile-container.has-profile-banner .profile-title-row .usernamee {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.profile-container.has-profile-banner .profile-monthly-listeners {
  color: rgba(255, 255, 255, 0.68);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.profile-details {
  flex: 1;
  min-width: 0;
  padding-top: 14px;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-left: 0;
  padding-top: 0;
  width: 100%;
}

.profile-actions .follow-btn {
  height: 38px;
  border-radius: 999px;
  padding: 0 14px;
  width: 100%;
}

.profile-actions #followBtn {
  min-width: 0;
}

.profile-blocked-state {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  padding: 20px 18px;
}

.profile-right-rail {
  margin-left: auto;
  min-width: 220px;
  width: min(320px, 100%);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.profile-social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(26, 92, 255, 0.2);
  background: rgba(26, 92, 255, 0.06);
  color: #2a3f75;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.profile-social-link:hover {
  background: rgba(26, 92, 255, 0.12);
  border-color: rgba(26, 92, 255, 0.36);
  color: var(--blue);
  transform: translateY(-1px);
}

.profile-social-link i {
  font-size: 12px;
  flex-shrink: 0;
}
.profile-social-link img { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 4px; object-fit: contain; }
.profile-about-card-socials { display: flex; flex-wrap: wrap; margin-top: 12px; gap: 7px; }
.profile-about-card-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(26,92,255,.16);
  border-radius: 50%;
  color: var(--blue);
  background: rgba(26,92,255,.06);
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.profile-about-card-socials a:hover { border-color: rgba(26,92,255,.34); background: rgba(26,92,255,.12); transform: translateY(-1px); }
.profile-about-card-socials img { width: 17px; height: 17px; border-radius: 4px; object-fit: contain; }

.profile-social-link {
  overflow: visible;
}

@media (max-width: 1023px) {
  .profile-right-rail {
    margin-left: 0;
    min-width: 0;
    width: 100%;
  }

  .profile-social-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .mobile-top-blend-profile.profile-container {
    padding: 14px 14px 28px;
    margin-top: 0;
  }

  .mobile-top-blend-profile .profile-header {
    padding: 0;
    margin-bottom: 18px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .profile-container {
    padding: 12px 14px 28px;
  }

  .profile-cover {
    height: 190px;
    border-radius: 14px;
  }

  .profile-info {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 12px;
  }

  .profile-details {
    width: 100%;
    padding-top: 0;
  }

  .profile-actions {
    width: 100%;
    margin-left: 0;
    padding-top: 0;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .profile-actions .follow-btn {
    height: 36px;
    width: auto;
    flex: 1 1 104px;
    padding: 0 12px;
    font-size: 13px;
  }

  .profile-right-rail {
    padding: 0;
    border: 0;
    background: transparent;
    gap: 10px;
  }

  .profile-social-link {
    font-size: 12px;
    padding: 6px 10px;
  }

  .profile-social-links {
    grid-template-columns: 1fr;
  }

  .mobile-top-blend-profile .profile-cover {
    position: relative;
    width: 100%;
    height: 150px;
    border-radius: 14px;
    margin: 0;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mobile-top-blend-profile .profile-cover::after {
    content: '';
  }

  .mobile-top-blend-profile .profile-info {
    margin-top: -40px;
    padding: 0 10px;
    position: relative;
    z-index: 2;
  }

  .profile-container.has-profile-banner.mobile-top-blend-profile .profile-info {
    margin-top: -40px;
    padding: 0 10px;
  }

  .mobile-top-blend-profile .profile-details h1 {
    font-size: 26px;
    line-height: 1.05;
    margin-bottom: 3px;
    overflow-wrap: anywhere;
  }

  .mobile-top-blend-profile .profile-monthly-listeners {
    font-size: 13px;
    margin-bottom: 4px !important;
  }

  .mobile-top-blend-profile .profile-avatar {
    width: 72px;
    height: 72px;
    font-size: 28px;
  }

  .mobile-top-blend-profile .profile-right-rail {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .mobile-top-blend-profile .profile-content {
    padding-left: 0;
    padding-right: 0;
  }
}

.profile-avatar {
  width: 116px;
  height: 116px;
  background: #04050b;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  color: #ffffff;
  overflow: hidden;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .profile-avatar {
    width: 92px;
    height: 92px;
    font-size: 34px;
    border-width: 3px;
  }
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-details h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: clamp(34px, 4.3vw, 50px);
  font-weight: 400;
  margin-bottom: 4px;
  letter-spacing: -0.8px;
  line-height: 1;
}

.profile-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.profile-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.profile-badge-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(26, 92, 255, 0.3);
  background: rgba(26, 92, 255, 0.08);
  color: #36529a;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: default;
  user-select: none;
}

.profile-badge-chip i {
  font-size: 11px;
}

.profile-badge-chip.badge-og {
  border-color: rgba(183, 124, 24, 0.42);
  background: rgba(183, 124, 24, 0.12);
  color: #8b5e13;
}

.profile-badge-chip.badge-donator {
  border-color: rgba(208, 86, 153, 0.42);
  background: rgba(208, 86, 153, 0.12);
  color: #92426f;
}

.profile-badge-chip.badge-artist_plus {
  border-color: rgba(35, 196, 255, 0.56);
  background: linear-gradient(135deg, rgba(35, 196, 255, 0.2), rgba(74, 124, 255, 0.16));
  color: #13508f;
  box-shadow: 0 0 0 1px rgba(35, 196, 255, 0.26), 0 0 20px rgba(35, 196, 255, 0.28);
}

.profile-badge-chip.badge-artist_plus.badge-particles::before,
.profile-badge-chip.badge-artist_plus.badge-particles::after {
  background: radial-gradient(circle, rgba(87, 220, 255, 0.95) 0%, rgba(80, 140, 255, 0.1) 72%);
}

.profile-badge-chip.badge-contributor,
.profile-badge-chip.badge-contributor_1,
.profile-badge-chip.badge-contributor_2,
.profile-badge-chip.badge-contributor_3,
.profile-badge-chip.badge-contributor_4,
.profile-badge-chip.badge-contributor_5 {
  border-color: rgba(28, 148, 107, 0.42);
  background: rgba(28, 148, 107, 0.12);
  color: #186a51;
}

.profile-badge-chip.badge-curator {
  border-color: rgba(124, 77, 205, 0.44);
  background: rgba(124, 77, 205, 0.12);
  color: #6038a8;
}
.profile-badge-chip.badge-contributor_2{border-color:rgba(38,110,255,.44)}
.profile-badge-chip.badge-contributor_3{background:linear-gradient(135deg,rgba(42,103,255,.18),rgba(104,68,255,.13));border-color:rgba(83,85,255,.5)}
.profile-badge-chip.badge-contributor_4{background:linear-gradient(135deg,rgba(36,94,255,.23),rgba(137,55,255,.17));border-color:rgba(108,70,255,.62)}
.profile-badge-chip.badge-contributor_5{background:linear-gradient(135deg,rgba(26,92,255,.28),rgba(181,48,255,.21));border-color:rgba(147,62,255,.72)}

.profile-badge-chip.badge-zabka_uwolnij_swoj_czas {
  border-color: rgba(58, 165, 84, 0.5);
  background: linear-gradient(135deg, rgba(78, 196, 98, 0.2), rgba(58, 165, 84, 0.14));
  color: #1f7436;
  box-shadow: 0 0 0 1px rgba(58, 165, 84, 0.22), 0 0 18px rgba(58, 165, 84, 0.2);
}

.profile-badge-chip.badge-creator_i,
.profile-badge-chip.badge-creator_ii,
.profile-badge-chip.badge-creator_iii,
.profile-badge-chip.badge-creator_iv,
.profile-badge-chip.badge-creator_v {
  border-color: rgba(122, 77, 205, 0.44);
  background: rgba(122, 77, 205, 0.12);
  color: #5f37a7;
}

.profile-badge-chip.badge-glow {
  box-shadow: 0 0 0 1px rgba(122, 77, 205, 0.2), 0 0 18px rgba(122, 77, 205, 0.2);
}

.profile-badge-chip.badge-particles::before,
.profile-badge-chip.badge-particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(132, 88, 210, 0.95) 0%, rgba(132, 88, 210, 0.1) 70%);
  opacity: 0.6;
  pointer-events: none;
}

.profile-badge-chip.badge-particles::before {
  top: -3px;
  right: 10px;
}

.profile-badge-chip.badge-particles::after {
  bottom: -3px;
  left: 8px;
}

.profile-title-row .usernamee {
  margin-bottom: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
}

.profile-title-row .sv-verification-badge {
  font-size: 0.72em;
}

.profile-title-row .profile-role {
  margin-bottom: 0;
}

.profile-role-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-role-wrap .sv-tooltip-trigger {
  margin-top: 0;
  align-self: center;
}

.profile-role {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--blue);
  letter-spacing: 0.5px;
  margin-top: 0;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  background: rgba(26, 92, 255, 0.12);
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1;
  transform: translateY(4px);
}

.profile-bio {
  color: #4f5870;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 760px;
}

.profile-monthly-listeners {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-monthly-loading-bar {
  width: 132px;
  height: 12px;
  border-radius: 999px;
}

.profile-stats {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.stat-link {
  text-decoration: none;
  color: var(--blue);
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.stat-link:hover {
  background: rgba(26, 92, 255, 0.06);
  border-color: rgba(26, 92, 255, 0.25);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-number {
  font-size: 34px;
  font-weight: 700;
  color: var(--black);
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #7782a0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.profile-social-proof {
  font-size: 16px;
  color: #8b93a8;
  margin-top: 16px;
  letter-spacing: 0;
  line-height: 1.3;
  font-family: 'Syne', 'Syne', 'Segoe UI', sans-serif;
  font-style: italic;
  font-weight: 500;
}

.follow-btn {
  min-height: 44px;
  padding: 0 18px;
  background: #f5f7ff;
  color: #1f325e;
  border: 1px solid rgba(38, 86, 211, 0.24);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.follow-btn:hover {
  background: #edf2ff;
  border-color: rgba(38, 86, 211, 0.38);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 32, 79, 0.14);
}

.profile-actions a.follow-btn {
  background: #f7f8fc;
  color: #2e3a57;
  border-color: rgba(31, 42, 71, 0.16);
}

.profile-actions a.follow-btn:hover {
  background: #eef1f8;
  border-color: rgba(31, 42, 71, 0.28);
}

.profile-actions #followBtn {
  background: linear-gradient(135deg, #1a5cff 0%, #1f44cb 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 18px rgba(26, 92, 255, 0.24);
}

.profile-actions #followBtn:hover {
  background: linear-gradient(135deg, #174fe0 0%, #1a3eb7 100%);
  box-shadow: 0 12px 24px rgba(26, 92, 255, 0.32);
}

.claim-artist-btn {
  text-decoration: none;
}

.profile-content {
  padding: 18px 8px 4px;
}

.profile-deferred-sections-root {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.profile-deferred-sections-root.is-loading {
  pointer-events: none;
}

.profile-content-tabs {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 48px);
  min-height: 50px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.profile-content-tabs::-webkit-scrollbar {
  display: none;
}

.profile-content-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 50px;
  padding: 0 1px 13px;
  border: 0;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 650;
  cursor: pointer;
  transition: color 0.2s ease;
}

.profile-content-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--blue);
  content: '';
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.profile-content-tab:hover,
.profile-content-tab.is-active {
  color: var(--black);
}

.profile-content-tab.is-active::after {
  transform: scaleX(1);
}

.profile-content-tab:focus-visible {
  border-radius: 5px;
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}

.profile-tab-panels {
  position: relative;
  min-width: 0;
  overflow-x: clip;
}

.profile-tab-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 30px;
}

.profile-tab-panel[hidden] {
  display: none;
}

.profile-tab-panel.is-leaving-to-left,
.profile-tab-panel.is-leaving-to-right {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  pointer-events: none;
}

.profile-tab-panel.is-entering-from-right { animation: profileTabEnterRight 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
.profile-tab-panel.is-entering-from-left { animation: profileTabEnterLeft 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
.profile-tab-panel.is-leaving-to-left { animation: profileTabLeaveLeft 0.28s ease both; }
.profile-tab-panel.is-leaving-to-right { animation: profileTabLeaveRight 0.28s ease both; }

@keyframes profileTabEnterRight { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: translateX(0); } }
@keyframes profileTabEnterLeft { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: translateX(0); } }
@keyframes profileTabLeaveLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-30px); } }
@keyframes profileTabLeaveRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } }

.profile-merch-section.sv-merch-section {
  margin-top: 0;
}

@keyframes profileSkeletonShimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.profile-skeleton-section {
  padding: 0;
  border: 0;
  background: transparent;
}

.profile-skeleton-section h2 {
  display: block;
}

.profile-skeleton-line,
.profile-skeleton-box {
  display: block;
  border-radius: 10px;
  background-image: linear-gradient(100deg, rgba(199, 204, 214, 0.36) 20%, rgba(228, 231, 238, 0.86) 45%, rgba(199, 204, 214, 0.36) 70%);
  background-color: rgba(199, 204, 214, 0.32);
  background-size: 220% 100%;
  animation: profileSkeletonShimmer 1.35s linear infinite;
}

.profile-skeleton-heading {
  width: min(40%, 230px);
  height: 23px;
  margin: 0;
}

.profile-skeleton-heading-medium {
  width: min(36%, 200px);
}

.profile-skeleton-heading-short {
  width: min(30%, 160px);
}

.profile-skeleton-track-list {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}

.profile-skeleton-track-list .track-item.is-skeleton {
  cursor: default;
}

.profile-skeleton-track-list .track-item.is-skeleton:active,
.profile-skeleton-track-list .track-item.is-skeleton:hover {
  background: transparent;
}

.profile-skeleton-track-list .track-item.is-skeleton {
  border-bottom: 1px solid var(--border);
}

.profile-skeleton-track-list .track-item.is-skeleton:last-child {
  border-bottom: 0;
}

.profile-skeleton-cover {
  background-color: rgba(199, 204, 214, 0.36);
}

.profile-skeleton-line-title {
  width: min(70%, 360px);
  height: 13px;
}

.profile-skeleton-track-list .track-item.is-skeleton .track-meta {
  margin-top: 4px;
}

.profile-skeleton-line-meta {
  width: min(42%, 220px);
  height: 10px;
}

.profile-skeleton-line-stat {
  width: 52px;
  height: 11px;
}

.profile-skeleton-card-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 14px;
}

.profile-skeleton-card {
  flex: 0 0 clamp(148px, 20vw, 196px);
}

.profile-skeleton-card-grid .playlist-card.is-skeleton {
  cursor: default;
}

.profile-skeleton-card-grid .playlist-card.is-skeleton:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

.profile-skeleton-card-cover {
  margin-bottom: 0;
}

.profile-skeleton-card-title {
  width: 70%;
  height: 12px;
}

.profile-skeleton-card-meta {
  width: 46%;
  height: 10px;
}

.profile-skeleton-about-card {
  border: 1px solid rgba(26, 92, 255, 0.16);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(160deg, rgba(26, 92, 255, 0.05), rgba(255, 255, 255, 0.96));
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
}

.profile-skeleton-about-card.is-skeleton {
  cursor: default;
}

.profile-skeleton-about-card.is-skeleton:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(26, 92, 255, 0.16);
}

.profile-skeleton-about-avatar {
  border-color: transparent;
}

.profile-skeleton-about-body {
  display: grid;
  gap: 8px;
  align-content: center;
}

.profile-skeleton-about-title {
  width: min(48%, 230px);
  height: 14px;
}

.profile-skeleton-about-line {
  width: min(70%, 380px);
  height: 10px;
}

.profile-skeleton-about-line-short {
  width: min(54%, 280px);
}

.profile-skeleton-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-skeleton-chip {
  width: 84px;
  height: 24px;
  border-radius: 999px;
}

.profile-skeleton-artist-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 14px;
}

.profile-skeleton-artist {
  flex: 0 0 clamp(126px, 17vw, 160px);
}

.profile-skeleton-artist-grid .discovery-artist-card.is-skeleton {
  cursor: default;
}

.profile-skeleton-artist-grid .discovery-artist-card.is-skeleton:hover {
  transform: none;
  border-color: var(--border);
}

.profile-skeleton-artist-avatar {
  border-color: transparent;
}

.profile-skeleton-artist-name {
  width: 72%;
  height: 11px;
}

.profile-deferred-sections-root .profile-section-reveal {
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
}

.profile-deferred-sections-root .profile-section-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.42s ease,
    transform 0.52s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .profile-content-tab,
  .profile-content-tab::after,
  .profile-tab-panel {
    animation: none !important;
    transition: none !important;
  }

  .profile-deferred-sections-root .profile-section-reveal,
  .profile-deferred-sections-root .profile-section-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 768px) {
  .profile-deferred-sections-root {
    gap: 22px;
  }

  .profile-content-tabs {
    gap: 30px;
    min-height: 46px;
    margin-right: -16px;
    margin-bottom: 0;
    margin-left: -16px;
    padding: 0 16px;
  }

  .profile-content-tab {
    min-height: 46px;
    padding-bottom: 12px;
    font-size: 16px;
  }

  .profile-tab-panel {
    gap: 22px;
  }

  .profile-skeleton-track-list .track-item.is-skeleton {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .profile-skeleton-cover {
    width: 42px;
    height: 42px;
  }

  .profile-skeleton-track-list .track-item.is-skeleton .track-item-stats {
    padding-left: 0;
  }

  .profile-skeleton-line-stat {
    width: 66px;
  }

  .profile-skeleton-about-card {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 12px;
    gap: 12px;
  }

  .profile-skeleton-about-avatar {
    width: 56px;
    height: 56px;
  }
}

.profile-about-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  width: 100%;
  min-height: 120px;
  padding: 12px;
  gap: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--blue));
  border-radius: 22px;
  color: var(--black);
  background: color-mix(in srgb, var(--white) 96%, var(--blue));
  box-shadow: 0 12px 34px rgba(12, 20, 38, 0.06);
  text-align: left;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.profile-about-card p,
.profile-about-modal p,
.profile-about-modal h2 {
  margin-bottom: 0 !important;
}

.profile-about-card-backdrop {
  display: none;
}

.profile-about-card-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-about-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--blue) 38%, var(--border));
  box-shadow: 0 20px 46px rgba(12, 20, 38, 0.12);
}

.profile-about-avatar {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 14px;
  background: var(--surface-2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  box-shadow: 0 10px 28px rgba(10, 16, 30, 0.16);
}

.profile-about-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-about-main {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 2px 4px 2px 0;
}

.profile-about-card-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.profile-about-open-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--black);
  background: color-mix(in srgb, var(--white) 82%, transparent);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease, background-color 0.2s ease;
}

.profile-about-card:hover .profile-about-open-icon {
  color: #fff;
  background: var(--blue);
  transform: translate(2px, -2px);
}

.profile-about-title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 780;
  color: var(--black);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.profile-about-handle {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
}

.profile-about-modal-handle {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 650;
}

.profile-about-bio {
  margin: 0;
  max-width: 720px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.profile-about-bio.is-muted {
  opacity: 0.66;
}

.profile-about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-about-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 11px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  color: var(--black);
  font-size: 12px;
  font-weight: 650;
}

.profile-about-stat strong {
  font-size: 13px;
}

.profile-about-modal .modal-content {
  width: min(640px, calc(100vw - 28px));
  max-width: 640px;
  max-height: min(820px, calc(100dvh - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 28px 90px rgba(7, 12, 24, 0.3);
}

.profile-about-modal .modal-body {
  position: relative;
  z-index: 1;
  margin-top: -36px;
  max-height: min(706px, calc(100dvh - 142px));
  padding: 0;
  overflow-y: auto;
}

.profile-about-modal-hero {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 22%, var(--surface-2)), var(--surface-2));
}

.profile-about-modal-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 1;
}

.profile-about-modal-backdrop::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 20, 0.04), rgba(6, 10, 20, 0.4));
  content: '';
}

.profile-about-modal-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.02);
}

.profile-about-modal-backdrop.has-avatar-fallback img {
  filter: blur(22px) saturate(1.2);
  transform: scale(1.22);
}

.profile-about-modal-backdrop.has-avatar-fallback::after {
  background: linear-gradient(135deg, rgba(8, 13, 27, 0.25), rgba(8, 13, 27, 0.58));
}

.profile-about-modal-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: #fff;
  background: rgba(7, 11, 20, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.profile-about-modal-body {
  display: grid;
  gap: 18px;
  padding: 0 24px 26px;
}

.profile-about-modal-identity {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  gap: 15px;
  margin-top: 0;
}

.profile-about-modal-identity > div:last-child {
  min-width: 0;
  padding-bottom: 8px;
}

.profile-about-modal-identity h2 {
  margin: 0;
  overflow: hidden;
  color: var(--black);
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-about-modal-avatar {
  width: 98px;
  height: 98px;
  flex: 0 0 98px;
  overflow: hidden;
  border: 4px solid var(--white);
  border-radius: 24px;
  background: var(--surface-2);
  color: #fff;
  font-size: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(7, 12, 24, 0.24);
}

.profile-about-modal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-about-modal-bio {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.profile-about-modal-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--border);
}

.profile-about-modal-copy {
  display: grid;
  gap: 7px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface-2);
}

.profile-about-modal-copy > span,
.profile-about-modal-detail-section h3,
.profile-about-modal-social-wrap h4 {
  margin: 0;
  color: var(--black);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-about-modal-detail-section {
  display: grid;
  gap: 10px;
}

.profile-about-modal-social-wrap {
  width: 100%;
  display: grid;
  gap: 10px;
}

.profile-about-modal-social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-about-modal-social-links .profile-social-link {
  min-height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
}

.profile-about-modal-stat {
  text-decoration: none;
  border: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  padding: 14px 8px;
  display: grid;
  gap: 4px;
  justify-items: center;
}

.profile-about-modal-stat strong {
  font-size: 20px;
  line-height: 1;
}

.profile-about-modal-stat span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .profile-about-card {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 124px;
    padding: 12px;
    gap: 13px;
    border-radius: 18px;
  }

  .profile-about-avatar {
    width: 92px;
    height: 100%;
    min-height: 100px;
    border-radius: 13px;
    font-size: 32px;
  }

  .profile-about-main {
    gap: 8px;
    padding: 2px 0;
  }

  .profile-about-title {
    font-size: 20px;
  }

  .profile-about-open-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 12px;
  }

  .profile-about-bio {
    overflow: hidden;
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .profile-about-card .profile-badges,
  .profile-about-card .profile-about-stats {
    display: none;
  }

  .profile-about-modal .modal-content {
    width: min(100%, 620px) !important;
    border-radius: 24px !important;
  }

  .profile-about-modal-hero {
    height: 130px;
  }

  .profile-about-modal .modal-body {
    margin-top: -28px;
    max-height: calc(88dvh - 102px);
  }

  .profile-about-modal-body {
    gap: 15px;
    padding: 0 16px 20px;
  }

  .profile-about-modal-avatar {
    width: 84px;
    height: 84px;
    flex-basis: 84px;
    border-radius: 20px;
  }

  .profile-about-modal-identity h2 {
    font-size: 25px;
  }

  .profile-about-modal-social-links {
    grid-template-columns: 1fr;
  }
}

.profile-upcoming-countdown {
  display: grid;
  grid-template-columns: minmax(120px, 164px) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(26, 92, 255, 0.24);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(130deg, rgba(26, 92, 255, 0.09), rgba(26, 92, 255, 0.03) 45%, rgba(255, 255, 255, 0.9));
  box-shadow: 0 10px 22px rgba(16, 38, 96, 0.08);
}

.profile-upcoming-countdown-cover {
  width: 100%;
}

.profile-upcoming-countdown-cover .playlist-cover-image,
.profile-upcoming-countdown-cover .playlist-placeholder {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
}

.profile-upcoming-countdown-main {
  min-width: 0;
}

.profile-upcoming-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #3157b8;
}

.profile-upcoming-countdown-main h3 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.1;
}

.profile-upcoming-subtitle {
  margin: 0 0 10px;
  color: #556081;
  font-size: 14px;
}

.profile-upcoming-timer {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #2f3e66;
}

@media (max-width: 768px) {
  .profile-upcoming-countdown {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .profile-upcoming-countdown-cover {
    max-width: 210px;
  }
}

.profile-section {
  margin-bottom: 34px;
}

.profile-section:last-child {
  margin-bottom: 0;
}

.profile-section h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-section .tracks-list {
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
}

.profile-section .track-item {
  padding: 18px 20px;
  gap: 16px;
}

.profile-section .track-item-info h3 {
  margin-bottom: 6px;
}

.profile-section .track-item-actions {
  align-items: center;
}

.profile-track-open-btn {
  min-width: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
}

.release-title-link,
.release-artist-link {
  color: var(--black);
  text-decoration: none;
}

.sv-verification-badge {
  color: var(--blue);
  font-size: 0.92em;
  vertical-align: middle;
}

html.dark-mode .sv-verification-badge {
  color: #ffffff;
}

.release-title-link:hover,
.release-artist-link:hover {
  color: var(--black);
  text-decoration: none;
}
.song-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.song-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  margin-bottom: 60px;
  align-items: start;
}

@media (max-width: 768px) {
  .song-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.song-cover-large {
  aspect-ratio: 1;
  background: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.song-cover-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.song-info-large {
  padding: 16px 0;
}

.song-artist-section {
  margin-bottom: 16px;
}

.artist-link {
  text-decoration: none;
}

.song-artist-name {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 8px;
}

.song-artist-name:hover {
  color: var(--blue);
}

.song-title-large {
  font-family: 'Syne', Georgia, serif;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 400;
  letter-spacing: -0.5px;
  margin-bottom: 24px;
  line-height: 1.1;
}

.song-stats-container {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 32px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--black);
}

.stat-value-secondary {
  color: var(--black);
  font-weight: 500;
}

.song-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.song-details-section {
  margin-bottom: 60px;
}

.song-section {
  margin-bottom: 40px;
}

.song-section h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.song-section p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

.lyrics-text {
  background: rgba(26, 92, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--black);
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}


.song-comments-section {
  margin-bottom: 40px;
}

.song-comments-section h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-form {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  padding: 24px;
  background: rgba(26, 92, 255, 0.02);
  border-radius: 12px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}

.comment-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-input-wrapper textarea {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  color: var(--black);
  resize: vertical;
  min-height: 60px;
}

.comment-input-wrapper textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.1);
}

.comment-input-wrapper .btn {
  align-self: flex-end;
}

.comment-login-prompt {
  padding: 24px;
  background: rgba(26, 92, 255, 0.05);
  border-radius: 8px;
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.comment-login-prompt a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}

.comment-login-prompt a:hover {
  text-decoration: underline;
}

.comments-list {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.comment-author {
  color: var(--black);
  font-size: 14px;
}

.comment-author a {
  color: var(--black);
  text-decoration: none;
}

.comment-author a:hover {
  color: var(--blue);
}

.comment-time {
  font-size: 12px;
  color: var(--muted);
}

.comment-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.artist-hub-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px 56px;
}

.artist-hub-container > .playlists-header {
  margin-bottom: 18px;
}

.artist-hub-container > .playlists-header h1 {
  margin-bottom: 6px;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.05;
}

.artist-hub-container > .playlists-header p {
  max-width: 560px;
  margin: 0;
  line-height: 1.45;
}

.hub-header {
  margin-bottom: 40px;
}

.hub-header h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hub-header p {
  color: var(--text-secondary);
  font-size: 15px;
}

.artist-hub-discord-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(88, 101, 242, 0.34);
  text-decoration: none;
  color: var(--black);
  background:
    radial-gradient(125% 160% at 2% -20%, rgba(88, 101, 242, 0.24), transparent 55%),
    radial-gradient(125% 160% at 100% 120%, rgba(88, 101, 242, 0.16), transparent 52%),
    linear-gradient(128deg, rgba(88, 101, 242, 0.14), rgba(26, 92, 255, 0.06) 48%, rgba(255, 255, 255, 0.95));
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 20px rgba(88, 101, 242, 0.1);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.artist-hub-discord-banner:hover {
  transform: translateY(-1px);
  border-color: rgba(88, 101, 242, 0.56);
  box-shadow: 0 14px 28px rgba(88, 101, 242, 0.15);
}

.artist-hub-discord-glow {
  position: absolute;
  inset: -40% auto auto -12%;
  width: 44%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88, 101, 242, 0.3) 0%, rgba(88, 101, 242, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.artist-hub-discord-icon,
.artist-hub-discord-copy,
.artist-hub-discord-cta {
  position: relative;
  z-index: 1;
}

.artist-hub-discord-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid rgba(88, 101, 242, 0.32);
  background: linear-gradient(155deg, rgba(88, 101, 242, 0.95), rgba(108, 123, 255, 0.88));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 8px 16px rgba(88, 101, 242, 0.24);
}

.artist-hub-discord-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.artist-hub-discord-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(69, 78, 186, 0.92);
}

.artist-hub-discord-copy strong {
  font-size: 16px;
  line-height: 1.15;
}

.artist-hub-discord-copy small {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.artist-hub-discord-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid rgba(88, 101, 242, 0.34);
  background: rgba(88, 101, 242, 0.12);
  color: #4650c8;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .artist-hub-discord-banner {
    grid-template-columns: auto 1fr;
    gap: 10px 12px;
    padding: 13px;
  }

  .artist-hub-discord-cta {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .artist-hub-discord-copy strong {
    font-size: 15px;
  }
}

.hub-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(26, 92, 255, 0.035);
  overflow-x: auto;
  scrollbar-width: thin;
}

.hub-tab {
  padding: 10px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hub-tab:hover {
  color: var(--blue);
  background: rgba(26, 92, 255, 0.07);
}

.hub-tab.active {
  color: var(--blue);
  border-color: rgba(26, 92, 255, 0.2);
  background: var(--white);
  box-shadow: 0 4px 14px rgba(26, 92, 255, 0.08);
}

.hub-content {
  animation: fadeIn 0.3s ease-out;
  display: grid;
  gap: 16px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hub-content h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 0;
  letter-spacing: -0.5px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: 12px;
}

.tracks-list {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .contracklist {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
  }
}

.track-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.2s;
}

.track-item:hover {
  background: rgba(26, 92, 255, 0.02);
}

@media (max-width: 768px) {
  .track-item {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }

  .track-item-cover {
    width: 110px;
    height: 110px;
  }

  .track-item-info {
    min-width: 0;
  }

  .track-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .track-item-actions {
    grid-column: auto;
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  .track-item-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .track-item-cover {
    width: 94px;
    height: 94px;
  }
}

.track-item-cover {
  width: 80px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.track-item-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.track-item-info h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--black);
}

.track-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

.track-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lyrics-status-pill {
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  font-weight: 600;
}

.lyrics-status-pill.is-synced {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.35);
  color: #0d9b6b;
}

.lyrics-status-pill.is-unsynced {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #c37d08;
}

.lyrics-status-pill.is-empty {
  background: rgba(26, 92, 255, 0.08);
  border-color: rgba(26, 92, 255, 0.25);
  color: var(--blue);
}

.lyrics-marketplace-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.lyrics-marketplace-sample {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.lyrics-marketplace-sample-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.lyrics-marketplace-sample strong {
  font-size: 14px;
}

.lyrics-marketplace-access-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
}

.lyrics-marketplace-access-pill.is-pro {
  color: #0f8dff;
  background: rgba(26, 92, 255, 0.12);
  border-color: rgba(26, 92, 255, 0.34);
}

.lyrics-marketplace-access-pill.is-free {
  color: var(--text-secondary);
  background: rgba(26, 92, 255, 0.06);
}

.lyrics-marketplace-section {
  margin-bottom: 22px;
}

.lyrics-marketplace-section-head {
  margin-bottom: 12px;
}

.lyrics-marketplace-section-head h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
}

.lyrics-marketplace-section-head p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.lyrics-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.lyrics-marketplace-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
}

.lyrics-marketplace-card-hit {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.lyrics-marketplace-preview {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #111;
  overflow: hidden;
}

.lyrics-marketplace-preview img,
.lyrics-marketplace-preview video,
.lyrics-marketplace-preview canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lyrics-marketplace-preview-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.52);
  border-radius: 999px;
  padding: 4px 8px;
}

.lyrics-marketplace-lock-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(13, 18, 28, 0.72);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lyrics-marketplace-card-body {
  padding: 10px 11px 12px;
}

.lyrics-marketplace-card-body h4 {
  margin: 0;
  font-size: 14px;
}

.lyrics-marketplace-card-body p {
  margin: 5px 0 8px;
  color: var(--text-secondary);
  font-size: 12px;
  min-height: 32px;
}

.lyrics-marketplace-tier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
}

.lyrics-marketplace-tier.is-free {
  color: #0f8dff;
  background: rgba(26, 92, 255, 0.1);
  border-color: rgba(26, 92, 255, 0.3);
}

.lyrics-marketplace-tier.is-premium {
  color: #7b4be0;
  background: rgba(123, 75, 224, 0.12);
  border-color: rgba(123, 75, 224, 0.36);
}

.lyrics-marketplace-song-modal .modal-content,
.lyrics-marketplace-pro-modal .modal-content {
  max-width: 560px;
}

.lyrics-marketplace-song-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.lyrics-marketplace-song-category {
  margin: 10px 0 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--text-secondary);
}

.lyrics-marketplace-song-item {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 4%, var(--white));
  padding: 8px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.lyrics-marketplace-song-item.is-unavailable {
  cursor: default;
  opacity: 0.82;
  background: color-mix(in srgb, var(--border) 24%, var(--white));
}

.lyrics-marketplace-song-item:hover {
  border-color: rgba(26, 92, 255, 0.38);
  background: color-mix(in srgb, var(--blue) 10%, var(--white));
}

.lyrics-marketplace-song-item.is-unavailable:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--border) 24%, var(--white));
}

.lyrics-marketplace-song-cover {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  overflow: hidden;
  display: block;
}

.lyrics-marketplace-song-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lyrics-marketplace-song-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lyrics-marketplace-song-meta strong {
  font-size: 13px;
}

.lyrics-marketplace-song-meta small {
  color: var(--text-secondary);
  font-size: 11px;
}

.lyrics-marketplace-song-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
}

.lyrics-marketplace-song-links a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
}

.lyrics-marketplace-song-links a:hover {
  text-decoration: underline;
}

.lyrics-marketplace-song-cta {
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .lyrics-marketplace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.artist-hub-dmca-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #991b1b;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.track-item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.artist-hub-disabled-video-tooltip {
  display: inline-flex;
  cursor: help;
}

.artist-hub-disabled-video-tooltip > .btn[disabled] {
  pointer-events: none;
}

.artist-release-context-trigger {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(242, 242, 247, 0.78);
  color: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.14s ease;
}

.artist-release-context-trigger:hover {
  border-color: rgba(26, 92, 255, 0.34);
  background: rgba(26, 92, 255, 0.1);
}

.artist-release-context-trigger:active {
  transform: scale(0.96);
}

.artist-hub-releases-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

#editReleaseModal {
  --edit-release-loading-border: rgba(148, 163, 184, 0.22);
  --edit-release-loading-background: rgba(255, 255, 255, 0.78);
  --edit-release-loading-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
  --edit-release-loading-spinner-track: rgba(15, 23, 42, 0.12);
  --edit-release-loading-spinner-accent: rgba(15, 23, 42, 0.72);
  --edit-release-loading-copy: rgba(15, 23, 42, 0.74);
  --edit-release-loading-dim-opacity: 0.5;
  --edit-release-loading-dim-filter: blur(0.3px);
  --edit-release-loading-shimmer: linear-gradient(90deg, rgba(148, 163, 184, 0.14) 18%, rgba(226, 232, 240, 0.44) 50%, rgba(148, 163, 184, 0.14) 82%);
}

.artist-hub-release-item {
  --artist-release-grad-a: rgba(28, 102, 255, 0.34);
  --artist-release-grad-b: rgba(13, 176, 255, 0.26);
  --artist-release-grad-c: rgba(133, 199, 255, 0.18);
  --artist-release-grad-d: rgba(255, 255, 255, 0.08);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--white);
}

@keyframes artistHubReleaseGradientDrift {
  0% {
    background-position: 0% 28%, 100% 72%, 50% 50%;
  }
  50% {
    background-position: 100% 72%, 0% 28%, 50% 44%;
  }
  100% {
    background-position: 0% 28%, 100% 72%, 50% 50%;
  }
}

@keyframes artistHubReleaseGradientPulse {
  0%, 100% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.08) brightness(1.05);
  }
}

.artist-hub-release-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(140% 170% at 8% -34%, var(--artist-release-grad-a), transparent 57%),
    radial-gradient(155% 185% at 112% -38%, var(--artist-release-grad-b), transparent 63%),
    linear-gradient(132deg, var(--artist-release-grad-c), var(--artist-release-grad-d));
  background-size: 180% 180%, 170% 170%, 145% 145%;
  background-position: 0% 28%, 100% 72%, 50% 50%;
  opacity: 0;
  transition: opacity 0.22s linear;
  animation: artistHubReleaseGradientDrift 16s linear infinite, artistHubReleaseGradientPulse 5.4s ease-in-out infinite;
  will-change: background-position, opacity, filter;
}

.artist-hub-release-item > * {
  position: relative;
  z-index: 1;
}

.artist-hub-release-item.is-expanded {
  border-color: rgba(26, 92, 255, 0.34);
  background: linear-gradient(180deg, rgba(26, 92, 255, 0.07), rgba(247, 251, 255, 0.97));
  box-shadow: 0 12px 28px rgba(26, 92, 255, 0.12);
}

.artist-hub-release-item.is-expanded::before,
.artist-hub-release-item.is-expanded:hover::before {
  opacity: 1;
}

.artist-hub-release-item.is-expanded:hover {
  background: linear-gradient(180deg, rgba(26, 92, 255, 0.07), rgba(247, 251, 255, 0.97));
  box-shadow: 0 12px 28px rgba(26, 92, 255, 0.12);
}

.artist-hub-release-head-actions {
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  margin-left: auto;
  gap: 8px;
}

.artist-hub-release-expand-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(242, 242, 247, 0.78);
  color: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.14s ease;
}

.artist-hub-release-expand-btn:hover {
  border-color: rgba(26, 92, 255, 0.34);
  background: rgba(26, 92, 255, 0.1);
}

.artist-hub-release-expand-btn:active {
  transform: scale(0.96);
}

.artist-hub-release-expand-btn i {
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.artist-hub-release-item.is-expanded .artist-hub-release-expand-btn i {
  transform: rotate(180deg);
}

.artist-hub-release-item .artist-hub-release-tracks {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transform-origin: top center;
}

.artist-hub-release-tracks-list {
  display: grid;
  gap: 8px;
}

.artist-hub-release-track-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "cover info actions";
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--white) 98%, rgba(26, 92, 255, 0.04)), color-mix(in srgb, var(--blue) 6%, var(--white)));
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.artist-hub-release-track-row:hover {
  border-color: rgba(26, 92, 255, 0.28);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(26, 92, 255, 0.12);
}

.artist-hub-release-track-row .track-item-info h3 {
  margin-bottom: 5px;
  font-size: 14px;
}

.artist-hub-release-track-row .track-item-info {
  grid-area: info;
  min-width: 0;
  overflow: hidden;
}

.artist-hub-release-track-row .track-meta {
  row-gap: 5px;
  column-gap: 10px;
}

.artist-hub-release-track-row .track-item-actions {
  grid-area: actions;
  margin-left: 0;
  justify-self: end;
  align-self: center;
}

.artist-hub-release-track-cover {
  grid-area: cover;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: block;
  justify-self: start;
  flex-shrink: 0;
}

.artist-hub-release-track-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.artist-track-context-trigger {
  width: 34px;
  height: 34px;
}

.artist-hub-release-tracks-empty {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.artist-hub-container .hub-tab-panel.is-active {
  display: block;
}

.artist-hub-container .hub-content > .content-header {
  align-items: flex-start;
}

.artist-hub-container .artist-hub-release-actions {
  width: 100%;
  justify-content: flex-start;
}

.artist-hub-releases-list .artist-hub-release-item {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.artist-hub-releases-list .artist-hub-release-item > .track-item-cover {
  width: 72px;
  height: 72px;
  border-radius: 10px;
}

.artist-hub-releases-list .artist-hub-release-item .track-item-info h3 {
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 1.25;
}

.artist-hub-releases-list .artist-hub-release-item .track-meta {
  gap: 7px 12px;
  line-height: 1.25;
}

.artist-hub-container .tracks-list:not(.artist-hub-releases-list) {
  border-radius: 10px;
}

.artist-hub-container .tracks-list:not(.artist-hub-releases-list) .track-item {
  padding: 14px;
  gap: 14px;
}

.release-track-row-focus {
  border-color: rgba(26, 92, 255, 0.56) !important;
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.16), 0 14px 26px rgba(26, 92, 255, 0.18) !important;
  background: linear-gradient(155deg, rgba(26, 92, 255, 0.11), rgba(14, 150, 255, 0.08)) !important;
}

@media (max-width: 768px) {
  .artist-hub-container {
    padding: 22px 14px 40px;
  }

  .artist-hub-container > .playlists-header {
    margin-bottom: 14px;
  }

  .artist-hub-discord-banner {
    margin-bottom: 14px;
    border-radius: 10px;
  }

  .hub-tabs {
    margin-bottom: 18px;
    padding: 5px;
    gap: 5px;
  }

  .hub-tab {
    padding: 9px 10px;
    font-size: 13px;
  }

  .hub-content {
    gap: 14px;
  }

  .artist-hub-container .hub-content > .content-header {
    display: flex !important;
  }

  .artist-hub-container .artist-hub-release-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .artist-hub-container .artist-hub-release-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .artist-hub-release-item {
    cursor: default;
  }

  .artist-hub-release-head-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .artist-hub-release-item .artist-hub-release-tracks {
    margin-top: 2px;
    padding-top: 12px;
  }


  .artist-hub-release-track-cover {
    width: 22px;
    height: 22px;
  }

  .artist-hub-release-track-row .track-item-actions {
    width: auto;
    flex-direction: row;
  }

  .artist-hub-release-track-row .track-item-actions .btn {
    width: auto;
    height: auto;
    font-size: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .artist-hub-release-item,
  .artist-hub-release-item::before,
  .artist-hub-release-expand-btn,
  .artist-hub-release-expand-btn i,
  .artist-hub-release-track-row {
    transition: none !important;
  }
}

.profile-container .discovery-section .tracks-list .track-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.profile-container .discovery-section .tracks-list .track-item:active {
  background: rgba(26, 92, 255, 0.04);
}

.profile-container .discovery-section .tracks-list .track-item-cover {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

.profile-container .discovery-section .tracks-list .track-item-info {
  min-width: 0;
}

.profile-container .discovery-section .tracks-list .track-item-info h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-container .discovery-section .tracks-list .track-meta {
  margin-top: 4px;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

.profile-container .discovery-section .tracks-list .track-item-stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  padding-left: 8px;
}

.profile-container .discovery-section .tracks-list .track-item-stats span {
  white-space: nowrap;
}

.profile-container .discovery-section .tracks-list .track-item:focus {
  outline: none;
}

.profile-container .discovery-section .tracks-list .track-item:focus-visible {
  outline: 2px solid rgba(26, 92, 255, 0.6);
  outline-offset: -2px;
}

.profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.profile-section-head h2 {
  margin-bottom: 0 !important;
}

.profile-view-all-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--white));
  color: var(--blue);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.profile-view-all-link:hover {
  background: color-mix(in srgb, var(--blue) 14%, var(--white));
}

.profile-view-all-mobile {
  display: none;
}

.profile-release-list-page {
  padding-top: 28px;
}

.profile-release-list-header {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.profile-release-section-tabs {
  margin-bottom: 18px;
}

.profile-release-compact-year {
  display: none;
}

.profile-release-row-meta {
  display: none;
}

.profile-release-section {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
  transition: opacity 0.24s ease, transform 0.24s ease, max-height 0.32s ease, margin 0.24s ease;
  max-height: 2400px;
  overflow: hidden;
}

.profile-release-section.is-filter-hidden {
  opacity: 0;
  transform: translateY(8px);
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.profile-release-section h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 800;
}

.profile-release-empty-row {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
}

.profile-release-list-card {
  width: 100%;
  max-width: none;
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
}

.profile-release-list-card .playlist-header {
  margin-bottom: 18px;
}

@media (max-width: 1023px) {
  body.mobile-profile-release-list-active .mobile-top-nav-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.25px;
  }

  .profile-release-list-card[data-release-href] {
    cursor: pointer;
  }

  .profile-release-list-card .playlist-actions {
    display: none;
  }
}

@media (max-width: 768px) {
  .profile-view-all-desktop {
    display: none;
  }

  .profile-view-all-mobile {
    display: inline;
  }

  .profile-section-head {
    align-items: flex-start;
  }

  .main-content:has(.profile-release-list-page) {
    background: var(--white);
  }

  #mainContentContainer:has(.profile-release-list-page) {
    padding-left: 20px;
    padding-right: 20px;
  }

  .profile-release-list-page {
    margin: 0;
    padding: 0 0 24px;
    background: var(--white);
    color: var(--black);
    border: 0;
    box-shadow: none;
  }

  .profile-release-list-header {
    display: none;
  }

  .profile-release-section-tabs {
    margin: 0 0 18px;
    padding-bottom: 12px;
  }

  .profile-release-section-tabs::-webkit-scrollbar {
    display: none;
  }

  .profile-release-section-tabs .library-filter-chip {
    scroll-snap-align: start;
  }

  .profile-release-list-results {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 0;
  }

  .profile-release-section {
    gap: 9px;
    margin-bottom: 20px;
  }

  .profile-release-section h2 {
    color: var(--black);
    font-size: 22px;
    line-height: 1.06;
    font-weight: 800;
  }

  .profile-release-latest-section {
    margin-bottom: 22px;
  }

  .profile-release-list-card {
    margin-bottom: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    width: 100%;
    min-width: 0;
  }

  .profile-release-list-card + .profile-release-list-card {
    margin-top: 8px;
  }

  .profile-release-list-card .playlist-header {
    margin: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
  }

  .profile-release-list-card .playlist-cover-large {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: none;
  }

  .profile-release-list-card-latest .playlist-cover-large {
    width: 64px;
    height: 64px;
    min-width: 64px;
  }

  .profile-release-list-card .playlist-cover-large-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .profile-release-list-card .playlist-header-info {
    min-width: 0;
    align-self: center;
  }

  .profile-release-list-card .playlist-type {
    display: none;
  }

  .profile-release-list-card .playlist-title {
    margin: 0;
    color: var(--black);
    font-size: 16px;
    line-height: 1.15;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profile-release-list-card .release-title-link {
    color: var(--black);
  }

  .profile-release-list-card .playlist-description {
    display: none;
  }

  .profile-release-row-meta {
    display: block;
    margin: 3px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.15;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profile-release-row-meta span {
    display: inline;
  }

  .profile-release-list-card .playlist-content {
    display: none;
  }

  .profile-release-compact-year {
    display: none;
  }

  .profile-release-empty-row {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 0 8px;
  }
}

@media (max-width: 430px) {
  .profile-release-list-card .playlist-header {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
  }

  .profile-release-list-card .playlist-cover-large,
  .profile-release-list-card-latest .playlist-cover-large {
    width: 54px;
    height: 54px;
    min-width: 54px;
  }

  .profile-release-list-card .playlist-title {
    font-size: 15px;
  }

  .profile-release-row-meta {
    font-size: 12px;
  }
}

.artist-analytics-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audience-detail-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audience-detail-header {
  margin-bottom: 0;
}

.audience-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.audience-entity-hero {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--white) 94%, transparent), color-mix(in srgb, var(--blue) 7%, var(--white)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--black) 8%, transparent);
}

.audience-entity-cover {
  width: 124px;
  height: 124px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--blue) 6%, var(--white));
  overflow: hidden;
  flex-shrink: 0;
}

.audience-entity-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.audience-entity-meta h2 {
  margin: 0 0 6px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.audience-entity-meta p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.audience-entity-meta p + p {
  margin-top: 4px;
}

.artist-audience-demographics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.artist-audience-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  padding: 14px;
}

.artist-audience-block h3 {
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.artist-audience-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.artist-audience-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--blue) 4%, var(--white));
  border-radius: 10px;
  padding: 8px 10px;
}

.artist-audience-label,
.artist-audience-value {
  font-size: 13px;
}

.artist-audience-label {
  font-weight: 600;
}

.artist-audience-value {
  color: var(--text-secondary);
  text-align: right;
}

.artist-audience-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.artist-audience-entities {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  padding: 14px;
}

.artist-audience-entity-list {
  display: grid;
  gap: 10px;
}

.artist-audience-entity-item {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 4%, var(--white));
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.artist-audience-entity-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.artist-audience-entity-head strong {
  font-size: 14px;
}

.artist-audience-entity-head span {
  color: var(--text-secondary);
  font-size: 12px;
}

.artist-audience-entity-actions {
  margin-left: auto;
}

.promo-card-section {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.promo-card-section-header h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.promo-card-section-header p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.promo-card-controls {
  display: grid;
  gap: 12px;
}

.promo-card-control-group {
  display: grid;
  gap: 8px;
}

.promo-card-control-group > label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.promo-card-layout-picker,
.promo-card-theme-picker,
.promo-card-accent-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.promo-layout-btn,
.promo-theme-btn,
.promo-accent-btn {
  border: 1px solid rgba(26, 92, 255, 0.26);
  border-radius: 999px;
  background: rgba(26, 92, 255, 0.06);
  color: #29417d;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.promo-layout-btn:hover,
.promo-theme-btn:hover,
.promo-accent-btn:hover {
  background: rgba(26, 92, 255, 0.12);
  border-color: rgba(26, 92, 255, 0.4);
  color: var(--blue);
  transform: translateY(-1px);
}

.promo-layout-btn.is-active,
.promo-theme-btn.is-active,
.promo-accent-btn.is-active {
  border-color: rgba(26, 92, 255, 0.5);
  background: rgba(26, 92, 255, 0.16);
  color: var(--blue);
  box-shadow: 0 0 0 1px rgba(26, 92, 255, 0.2) inset;
}

.promo-card-preview-wrap {
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 14px;
  padding: 10px;
  background: linear-gradient(160deg, rgba(26, 92, 255, 0.08), rgba(26, 92, 255, 0.02) 45%, var(--white));
}

.promo-card-preview-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--black) 10%, transparent);
  background: #0f172a;
}

.promo-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.artist-analytics-header h2 {
  margin-bottom: 4px;
}

.artist-analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.artist-analytics-header p {
  font-size: 13px;
  color: var(--text-secondary);
}

.artist-analytics-range-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.artist-analytics-range-form label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.artist-analytics-range-form select {
  min-width: 154px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text-color);
  font-size: 13px;
  padding: 7px 10px;
}

.artist-analytics-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 14px;
  background: rgba(26, 92, 255, 0.06);
}

.artist-analytics-tip i {
  margin-top: 3px;
  color: var(--blue);
}

.artist-analytics-tip strong {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
}

.artist-analytics-tip p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.artist-analytics-tip-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.26);
}

.artist-analytics-tip-success i {
  color: #0d9b6b;
}

.artist-analytics-tip-action {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

.artist-analytics-tip-action i {
  color: #c27b05;
}

.artist-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.artist-stat-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.3s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.artist-stat-card:hover {
  border-color: rgba(26, 92, 255, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(12, 12, 14, 0.08);
}

.artist-stat-card.is-highlight {
  background: rgba(26, 92, 255, 0.06);
  border-color: rgba(26, 92, 255, 0.25);
}

.artist-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.artist-stat-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.artist-stat-value {
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.6px;
  margin: 0;
}

.artist-stat-change {
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.artist-stat-change.is-positive {
  background: rgba(16, 185, 129, 0.14);
  color: #0d9b6b;
}

.artist-stat-change.is-negative {
  background: rgba(239, 68, 68, 0.14);
  color: #d93a3a;
}

.artist-analytics-chart-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.artist-chart-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.artist-chart-meta h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.3px;
}

.artist-chart-meta p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.artist-chart-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.artist-chart-switch {
  border: 1px solid var(--border);
  background: rgba(26, 92, 255, 0.05);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.artist-chart-switch:hover {
  border-color: rgba(26, 92, 255, 0.28);
  color: var(--blue);
}

.artist-chart-switch.is-active {
  background: rgba(26, 92, 255, 0.12);
  border-color: rgba(26, 92, 255, 0.35);
  color: var(--blue);
}

.artist-smoothed-chart {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(26, 92, 255, 0.03);
  padding: 10px;
}

.artist-smoothed-chart svg {
  width: 100%;
  height: 250px;
  display: block;
}

.artist-chart-grid line {
  stroke: rgba(12, 12, 14, 0.08);
  stroke-width: 1;
}

#artistLinePath {
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.artist-chart-axis-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.artist-chart-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.artist-chart-kpi-item {
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--blue) 5%, var(--white));
  border-radius: 10px;
  padding: 10px 11px;
}

.artist-chart-kpi-item p {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.artist-chart-kpi-item strong {
  font-size: 19px;
  letter-spacing: -0.2px;
}

.artist-chart-kpi-item strong.is-positive {
  color: #0d9b6b;
}

.artist-chart-kpi-item strong.is-negative {
  color: #d93a3a;
}

.artist-world-map-block {
  grid-column: 1 / -1;
}

.artist-world-map-wrap {
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 12px;
  background: radial-gradient(circle at 20% 16%, rgba(26, 92, 255, 0.1), rgba(26, 92, 255, 0.02) 45%, rgba(255, 255, 255, 0.9));
  padding: 8px;
}

#artistAudienceWorldMap {
  display: block;
  width: 100%;
  height: 280px;
}

.artist-world-map-country {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 0.7;
  transition: fill 0.2s ease, stroke 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.artist-world-map-country.is-hovered {
  stroke: rgba(12, 12, 14, 0.55);
  stroke-width: 1.3;
}

.artist-world-map-info {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.artist-world-map-top-list {
  margin-top: 10px;
}

@media (max-width: 768px) {
  .artist-hub-container {
    padding: 24px 14px;
  }

  .audience-detail-topbar {
    align-items: stretch;
  }

  .audience-detail-topbar .btn {
    width: 100%;
    justify-content: center;
  }

  .audience-entity-hero {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .audience-entity-cover {
    width: 110px;
    height: 110px;
  }

  .artist-audience-demographics {
    grid-template-columns: 1fr;
  }

  .artist-audience-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .artist-audience-value {
    text-align: left;
  }

  .artist-audience-entity-actions {
    margin-left: 0;
    width: 100%;
  }

  .artist-audience-entity-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .promo-card-section {
    padding: 14px;
  }

  .promo-card-layout-picker,
  .promo-card-theme-picker,
  .promo-card-accent-picker {
    gap: 6px;
  }

  .promo-layout-btn,
  .promo-theme-btn,
  .promo-accent-btn {
    width: calc(50% - 3px);
    justify-content: center;
  }

  .promo-card-actions {
    justify-content: stretch;
  }

  .promo-card-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .artist-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .artist-stat-value {
    font-size: 26px;
  }

  .artist-analytics-chart-card {
    padding: 14px;
  }

  .artist-analytics-header {
    align-items: stretch;
  }

  .artist-analytics-range-form {
    width: 100%;
    justify-content: space-between;
  }

  .artist-analytics-range-form select {
    flex: 1;
    min-width: 0;
  }

  #artistAudienceWorldMap {
    height: 220px;
  }

  .artist-chart-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .artist-smoothed-chart svg {
    height: 206px;
  }
}

.settings-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.settings-section p {
  color: var(--text-secondary);
  font-size: 14px;
}

.settings-section a {
  color: var(--blue);
  text-decoration: none;
}

.settings-section a:hover {
  text-decoration: underline;
}

.artist-setting-toggle-row {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.verification-submit-btn {
  color: #ffffff !important;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.artist-hub-verification-btn {
  color: #ffffff !important;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.verification-requirements-list {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.verification-requirements-list li {
  margin: 0;
}

.verification-requirement-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.25;
}

.verification-requirement-icon {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: 20px;
  line-height: 1;
}

.verification-requirement-icon.is-passed {
  color: #19b44a;
}

.verification-requirement-icon.is-pending {
  color: #bfbfc4;
}

.verification-confirm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.32;
}

.verification-confirm-row input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

.verification-confirm-row span {
  display: inline-block;
  position: relative;
  top: 0;
}

.verification-preview-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--blue) 3%, var(--white));
}

.verification-preview-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--blue) 10%, var(--white));
}

.verification-preview-avatar-image,
.verification-preview-avatar-fallback {
  width: 100%;
  height: 100%;
}

.verification-preview-avatar-image {
  display: block;
  object-fit: cover;
}

.verification-preview-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 21px;
  color: var(--text-secondary);
}

.verification-preview-username {
  color: var(--text-secondary);
  font-size: 13px;
}

.artist-settings-status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  min-height: 1.2em;
}

.presave-page .playlist-header-info .playlist-type {
  color: var(--blue);
}

.presave-status-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.presave-toggle-btn.is-presaved {
  background: rgba(26, 92, 255, 0.12);
  border-color: rgba(26, 92, 255, 0.35);
  color: var(--blue);
}

.presave-track-list .track-actions-disabled {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.profile-upcoming-card {
  border: 1px solid rgba(26, 92, 255, 0.28);
  box-shadow: 0 8px 20px rgba(26, 92, 255, 0.08);
}

.profile-upcoming-section .profile-upcoming-card {
  display: block;
  width: clamp(156px, 22vw, 210px);
  max-width: 100%;
}

@media (max-width: 768px) {
  .profile-upcoming-section .profile-upcoming-card {
    width: min(72vw, 210px);
  }
}


.upload-anim-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 12, 18, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.upload-anim-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.upload-anim-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
}

.upload-anim-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.upload-anim-rings span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(26, 92, 255, 0.22);
  animation: upload-ring-pulse 2.4s ease-out infinite;
}

.upload-anim-rings span:nth-child(1) { width: 180px; height: 180px; animation-delay: 0s; }
.upload-anim-rings span:nth-child(2) { width: 280px; height: 280px; animation-delay: 0.6s; }
.upload-anim-rings span:nth-child(3) { width: 380px; height: 380px; animation-delay: 1.2s; }

@keyframes upload-ring-pulse {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.85); }
  80% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

.upload-anim-logo {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 10vw, 92px);
  letter-spacing: -0.03em;
  line-height: 1;
  position: relative;
  z-index: 1;
  user-select: none;
}

.upload-anim-sound {
  color: #ffffff;
}

.upload-anim-via {
  color: #1A5CFF;
  background: linear-gradient(90deg, #1A5CFF 0%, #4B8BFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.upload-anim-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 36px;
  position: relative;
  z-index: 1;
}

.upload-anim-bars span {
  display: block;
  width: 5px;
  background: #1A5CFF;
  border-radius: 3px 3px 0 0;
  animation: upload-bar-dance 1.1s ease-in-out infinite;
  min-height: 4px;
}

.upload-anim-bars span:nth-child(1) { animation-delay: 0s; height: 20px; }
.upload-anim-bars span:nth-child(2) { animation-delay: 0.1s; height: 30px; }
.upload-anim-bars span:nth-child(3) { animation-delay: 0.18s; height: 14px; }
.upload-anim-bars span:nth-child(4) { animation-delay: 0.28s; height: 36px; }
.upload-anim-bars span:nth-child(5) { animation-delay: 0.14s; height: 22px; }
.upload-anim-bars span:nth-child(6) { animation-delay: 0.08s; height: 28px; }
.upload-anim-bars span:nth-child(7) { animation-delay: 0.22s; height: 16px; }

@keyframes upload-bar-dance {
  0%, 100% { transform: scaleY(0.35); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}

.upload-anim-status {
  color: rgba(200, 215, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 300px;
  position: relative;
  z-index: 1;
  margin: 0;
}

.upload-anim-status.is-done {
  color: #3ad29f;
}

.upload-anim-prog-wrap {
  width: 240px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.upload-anim-prog-fill {
  height: 100%;
  width: 0%;
  background: #1A5CFF;
  border-radius: 2px;
  transition: width 0.2s ease;
}

.upload-container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.upload-stepper {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 24px;
  height: 64px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 5%, transparent);
}

.upload-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.upload-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--border);
  color: var(--text-secondary);
  transition: background 0.22s, color 0.22s, box-shadow 0.22s;
}

.upload-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.22s;
  white-space: nowrap;
}

.upload-step-item.is-active .upload-step-num {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}

.upload-step-item.is-active .upload-step-label {
  color: var(--blue);
}

.upload-step-item.is-done .upload-step-num {
  background: color-mix(in srgb, var(--blue) 15%, var(--white));
  color: var(--blue);
  border: 1.5px solid color-mix(in srgb, var(--blue) 40%, transparent);
}

.upload-step-item.is-done .upload-step-label {
  color: var(--text-secondary);
}

.upload-step-connector {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 14px;
  min-width: 20px;
}

.upload-status {
  margin-bottom: 14px;
}

.upload-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--black) 5%, transparent);
  margin-bottom: 16px;
}

.upload-section-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.upload-section-title {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.15;
}

.upload-section-title i {
  color: var(--blue);
  font-size: 0.85em;
}

.upload-section-sub {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.upload-req {
  color: var(--blue);
  font-weight: 700;
}

.upload-draft-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}

.upload-cover-col {
  position: sticky;
  top: 24px;
}

.upload-cover-zone {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px dashed color-mix(in srgb, var(--blue) 30%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 3%, var(--white));
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

.upload-cover-zone:hover,
.upload-cover-zone:focus-visible {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, var(--white));
  outline: none;
}

.upload-cover-zone.is-drag-over {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--white));
}

.upload-cover-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.upload-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  pointer-events: none;
  text-align: center;
  padding: 12px;
}

.upload-cover-placeholder i {
  font-size: 28px;
  color: color-mix(in srgb, var(--blue) 50%, var(--text-secondary));
}

.upload-cover-placeholder span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.upload-cover-placeholder small {
  font-size: 11px;
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
}

.upload-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.upload-fields-col {
  min-width: 0;
}

.upload-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.upload-form-grid .form-group {
  margin-bottom: 0;
}

.upload-span-2 {
  grid-column: 1 / -1;
}

.upload-section-divider {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  margin: 24px 0;
}

.upload-meta-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.upload-meta-tags {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.upload-meta-visibility {
  flex-shrink: 0;
  margin-bottom: 0;
}

.upload-visibility-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.upload-vis-opt {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}

.upload-vis-opt input[type="radio"] {
  display: none;
}

.upload-vis-opt span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 4%, var(--white));
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.upload-vis-opt input[type="radio"]:checked + span {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--white));
  color: var(--blue);
  font-weight: 600;
}

.upload-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  justify-content: flex-end;
}

.upload-cta-btn {
  min-width: 180px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.upload-tracks-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.upload-add-track-bar {
  margin-bottom: 16px;
}

.upload-add-track-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.upload-track-form-card {
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border));
  border-radius: 14px;
  padding: 20px;
  background: color-mix(in srgb, var(--blue) 3%, var(--white));
  margin-bottom: 20px;
}

.upload-audio-dropzone {
  border: 2px dashed color-mix(in srgb, var(--blue) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 4%, var(--white));
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
}

.upload-audio-dropzone:hover,
.upload-audio-dropzone.is-drag-over {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--white));
}

.upload-audio-dz-inner {
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  text-align: center;
}

.upload-audio-dz-inner i {
  font-size: 30px;
  color: color-mix(in srgb, var(--blue) 60%, var(--text-secondary));
}

.upload-audio-dz-inner p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.upload-browse-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.upload-audio-dz-inner small {
  font-size: 12px;
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
}

.upload-field-error {
  display: block;
  min-height: 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.upload-field-error:empty {
  display: none;
}

#releaseUploadPage :is(input, select, textarea).is-invalid,
#releaseUploadPage .upload-audio-dropzone.is-invalid,
#releaseUploadPage .upload-policy-row:has(#releaseRightsAttestation.is-invalid) {
  border-color: var(--danger) !important;
}

.upload-dropzone-error {
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 7px;
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  text-align: center;
}

.upload-section-error {
  margin-top: 12px;
}

.upload-action-error {
  flex: 1 1 260px;
  align-self: center;
  margin-right: auto;
}

.upload-audio-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.upload-track-meta-grid {
  margin-top: 14px;
}

.upload-policy-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-policy-row {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--white) 80%, transparent);
}

.upload-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}

.upload-track-prog-wrap {
  margin-top: 14px;
}

.upload-progress-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--blue);
  border-radius: 3px;
  transition: width 0.2s;
}

.upload-inline-helper {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.upload-actions-track {
  margin-top: 16px;
}

.upload-actions-publish {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.upload-tracks-list {
  margin-bottom: 8px;
}

#releaseTracksList .drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  margin-right: 8px;
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#releaseTracksList .drag-handle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

#releaseTracksList .drag-handle[aria-disabled="true"] {
  cursor: default;
  opacity: .42;
}

#releaseTracksList .track-item-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 7px;
}

#releaseTracksList .track-row {
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}

#releaseTracksList .track-row.is-track-order-dragging {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--border));
  background: color-mix(in srgb, var(--blue) 7%, var(--white));
  opacity: .72;
}

#releaseTracksList.is-track-order-reordering {
  cursor: grabbing;
}

#releaseTracksList.is-track-order-saving .track-reorder-btn,
#releaseTracksList.is-track-order-saving .drag-handle {
  pointer-events: none;
}

.upload-add-credit-btn {
  margin-top: 10px;
}

.upload-progress-container {
  display: none;
  margin-top: 16px;
  align-items: center;
}

.upload-progress-track-wrap {
  flex: 1;
}

.upload-cancel-btn {
  margin-left: 12px;
  display: none;
  min-width: 80px;
}

@media (max-width: 720px) {
  .upload-container {
    padding: 20px 14px 60px;
  }

  .upload-stepper {
    padding: 12px 14px;
    gap: 0;
  }

  .upload-step-label {
    display: none;
  }

  .upload-step-connector {
    flex: 0 0 20px;
  }

  .upload-draft-layout {
    grid-template-columns: 1fr;
  }

  .upload-cover-col {
    position: static;
  }

  .upload-cover-zone {
    max-width: 180px;
    margin: 0 auto;
  }

  .upload-form-grid {
    grid-template-columns: 1fr;
  }

  .upload-span-2 {
    grid-column: 1 / -1;
  }

  .upload-meta-row {
    flex-direction: column;
    gap: 16px;
  }

  .upload-section {
    padding: 18px 16px;
  }
}

.hub-tab-panel {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.24s ease, transform 0.3s ease;
}

.hub-tab-panel.is-active {
  opacity: 1;
  transform: translateY(0);
}

.hub-section-intro {
  margin-bottom: 0;
}

.hub-section-intro h2 {
  margin-bottom: 8px;
}

.hub-section-intro p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.hub-search-row {
  margin-bottom: 0;
  width: 100%;
}

.hub-tab-search {
  display: block;
  width: min(100%, 560px);
  min-width: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.2;
  padding: 11px 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hub-tab-search::placeholder {
  color: var(--text-secondary);
}

.hub-tab-search:focus {
  outline: none;
  border-color: rgba(26, 92, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.14);
}

.hub-tab-empty-search {
  margin-top: 0;
  font-size: 13px;
  color: var(--muted);
}

.artist-hub-faq-list {
  display: grid;
  gap: 10px;
}

.artist-hub-faq-item {
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 3%, var(--white));
  overflow: hidden;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.artist-hub-faq-item[open] {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--border));
  box-shadow: 0 10px 24px rgba(26, 92, 255, 0.1);
  background: color-mix(in srgb, var(--blue) 6%, var(--white));
}

.artist-hub-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  transition: background 0.24s ease;
}

.artist-hub-faq-item summary::-webkit-details-marker {
  display: none;
}

.artist-hub-faq-item summary::after {
  content: "\f0d7";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  font-size: 11px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.artist-hub-faq-item[open] summary::after {
  transform: rotate(180deg);
}

.artist-hub-faq-item summary:hover {
  background: rgba(26, 92, 255, 0.06);
}

.artist-hub-faq-item p {
  margin: 0;
  padding: 0 14px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.artist-hub-faq-item.is-animating summary {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .artist-hub-faq-item,
  .artist-hub-faq-item summary,
  .artist-hub-faq-item summary::after {
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .artist-hub-faq-item summary {
    align-items: flex-start;
    padding: 12px;
    font-size: 13px;
  }

  .artist-hub-faq-item p {
    padding: 0 12px 12px;
  }
}

.hub-search-hidden {
  display: none !important;
}

.promotion-campaign-board {
  display: grid;
  gap: 14px;
}

.promotion-campaign-group h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.promotion-campaign-row {
  text-decoration: none;
  color: inherit;
}

.promotion-campaign-row-link,
.promotion-campaign-row-link:visited,
.promotion-campaign-row-link:hover,
.promotion-campaign-row-link:focus,
.promotion-campaign-row-link:active {
  text-decoration: none;
  color: inherit;
}

.promotion-campaign-row-link .track-item-info h3,
.promotion-campaign-row-link .track-meta,
.promotion-campaign-row-link .track-meta span {
  color: inherit;
  text-decoration: none;
}

.promotion-campaign-row-link:hover {
  border-color: rgba(26, 92, 255, 0.36);
}

.promotion-select-list .promotion-select-row {
  cursor: pointer;
}

#promotionCampaignSelectPage .promotion-select-list {
  margin-bottom: 12px;
}

#promotionCampaignSelectPage .upload-actions {
  margin-bottom: 12px;
}

#promotionCampaignSelectPage #bumpCampaignSuccessPanel {
  margin-top: 20px;
}

.promotion-select-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.tag-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.tag-chip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Syne", sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
  border: 1px solid rgba(26, 92, 255, 0.24);
  border-radius: 999px;
  padding: 5px 11px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.14s ease;
}

.tag-chip-link:hover {
  background: rgba(26, 92, 255, 0.14);
  border-color: rgba(26, 92, 255, 0.34);
  transform: translateY(-1px);
}

.tag-widget {
  display: grid;
  gap: 10px;
}

.tag-widget-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 10px;
}

.tag-widget-chip {
  border: 1px solid rgba(26, 92, 255, 0.28);
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
  border-radius: 999px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.tag-widget-chip i {
  font-size: 11px;
  opacity: 0.8;
}

.tag-widget-chip:hover {
  background: rgba(26, 92, 255, 0.16);
  border-color: rgba(26, 92, 255, 0.4);
}

.tag-widget-input-wrap {
  position: relative;
  display: grid;
  gap: 6px;
}

.tag-widget-input {
  width: 100%;
}

.tag-widget-hint {
  font-size: 11px;
  color: var(--muted);
  justify-self: end;
}

.track-title a {
  color: var(--black);
  text-decoration: none;
}

.tag-widget-dropdown {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  right: 0;
  z-index: 40;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(12, 12, 14, 0.15);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}

.tag-widget-dropdown-item {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.tag-widget-dropdown-item small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.tag-widget-dropdown-item:hover {
  background: rgba(26, 92, 255, 0.08);
}

.tag-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 24px 56px;
}

.tag-page-header {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(26, 92, 255, 0.08), rgba(26, 92, 255, 0.02));
  margin-bottom: 18px;
}

.tag-page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-page-header h1 {
  margin: 8px 0 4px;
  font-family: 'Syne', Georgia, serif;
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: -0.8px;
}

.tag-page-header p {
  margin: 0;
  color: var(--text-secondary);
}

.tag-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.tag-tab-link {
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(26, 92, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  transition: all 0.18s ease;
}

.tag-tab-link:hover {
  color: var(--blue);
  border-color: rgba(26, 92, 255, 0.25);
}

.tag-tab-link.is-active {
  color: var(--blue);
  border-color: rgba(26, 92, 255, 0.34);
  background: rgba(26, 92, 255, 0.12);
}

.tag-tab-panel {
  animation: fadeIn 0.24s ease;
}

.tag-page-note {
  margin-bottom: 12px;
  border: 1px solid rgba(26, 92, 255, 0.22);
  border-radius: 10px;
  background: rgba(26, 92, 255, 0.08);
  color: var(--text-secondary);
  padding: 10px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tag-track-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.settings-container.lyrics-video-page {
  max-width: 1640px;
  --lyrics-video-flyout-width: clamp(320px, 24vw, 420px);
  padding-right: calc(var(--lyrics-video-flyout-width) + 140px);
}

.lyrics-video-header {
  margin-bottom: 20px;
}

.lyrics-video-subtitle {
  margin-top: 8px;
  margin-bottom: 5px;
  color: var(--text-secondary);
}

.lyrics-video-editor-shell {
  display: block;
  min-height: 420px;
}

.lyrics-video-stage-column {
  width: min(100%, 1080px);
  margin: 0 auto 0 clamp(24px, 3vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lyrics-video-preview-panel {
  border-radius: 30px;
  border: 1px solid rgba(26, 92, 255, 0.16);
  background:
    radial-gradient(circle at 16% 18%, rgba(26, 92, 255, 0.16), rgba(26, 92, 255, 0.02) 38%, rgba(255, 255, 255, 0.9) 100%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.95));
  box-shadow: 0 24px 60px rgba(12, 12, 14, 0.12);
  padding: 18px;
  margin-bottom: 0;
  animation: lyricsVideoRiseIn 0.42s cubic-bezier(0.2, 0.72, 0, 1);
}

.lyrics-video-canvas-stage {
  border-radius: 28px;
  border: 1px solid rgba(26, 92, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 14px 32px rgba(8, 10, 14, 0.2);
}

.lyrics-video-canvas-wrap canvas {
  width: 100%;
  display: block;
}

.soundvia-loop-page .lyrics-video-stage-column {
  width: min(100%, 560px);
}

.soundvia-loop-canvas-stage {
  width: min(100%, 360px);
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  background: #070a12;
}

.soundvia-loop-canvas-stage canvas {
  aspect-ratio: 9 / 16;
  max-height: min(68vh, 720px);
  object-fit: contain;
}

.soundvia-loop-actions {
  justify-content: center;
}

.soundvia-loop-card-preview {
  display: grid;
  place-items: center;
  min-height: 180px;
  background:
    radial-gradient(circle at 30% 20%, rgba(103, 248, 255, 0.42), transparent 34%),
    radial-gradient(circle at 70% 72%, rgba(255, 79, 216, 0.34), transparent 38%),
    linear-gradient(145deg, #090d18, #17264e);
}

.soundvia-loop-preview-phone {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  color: #fff;
  font-size: 28px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.soundvia-loop-preview-glow {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 90deg, #67f8ff, #ff4fd8, #f8ff3d, #67f8ff);
  opacity: 0.42;
  filter: blur(12px);
  animation: soundviaLoopSpin 8s linear infinite;
}

.soundvia-loop-preview-phone i {
  position: relative;
  z-index: 1;
}

@keyframes soundviaLoopSpin {
  to { transform: rotate(360deg); }
}

.lyrics-video-canvas-wrap canvas.lyrics-video-can-drag {
  cursor: grab;
}

.lyrics-video-canvas-wrap canvas.lyrics-video-is-dragging {
  cursor: grabbing;
}

.lyrics-video-fake-player {
  margin-top: 12px;
  border: 1px solid rgba(26, 92, 255, 0.2);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(26, 92, 255, 0.06);
  display: grid;
  gap: 8px;
}

.lyrics-video-fake-player-times {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.lyrics-video-fake-player input[type="range"] {
  width: 100%;
}

.lyrics-video-controls-column {
  display: grid;
  grid-template-columns: minmax(0, var(--lyrics-video-flyout-width)) 72px;
  gap: 10px;
  align-items: start;
  position: fixed;
  right: 14px;
  top: calc(var(--desktop-top-nav-height) + 10px);
  z-index: 1300;

  padding-right: 24px;
}

.lyrics-video-control-flyout {
  border: 1px solid rgba(26, 92, 255, 0.18);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 255, 0.96));
  box-shadow: 0 18px 44px rgba(12, 12, 14, 0.12);
  max-height: calc(100vh - var(--desktop-top-nav-height) - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.26s cubic-bezier(0.2, 0.72, 0, 1), opacity 0.2s ease;
}

.lyrics-video-control-flyout.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.lyrics-video-control-surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(26, 92, 255, 0.12);
}

.lyrics-video-control-surface-header h2 {
  margin: 0;
  font-size: 15px;
}

.lyrics-video-mobile-sheet-close {
  display: none;
  border: 1px solid rgba(26, 92, 255, 0.2);
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
  width: 30px;
  height: 30px;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
}

.lyrics-video-control-panels {
  overflow-y: auto;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.lyrics-video-control-panel {
  gap: 12px;
  animation: fadeIn 0.2s ease;
}

.lyrics-video-effect-row {
  --lyrics-video-effect-delay: 0ms;
  --lyrics-video-effect-height: 999px;
  overflow: hidden;
  max-height: var(--lyrics-video-effect-height);
  opacity: 1;
  transform: translate3d(0,0,0);
  will-change: max-height, opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
  transition:
    max-height 0.22s cubic-bezier(0.22, 0.9, 0.28, 1) var(--lyrics-video-effect-delay),
    opacity 0.16s ease var(--lyrics-video-effect-delay),
    transform 0.14s cubic-bezier(0.22, 0.9, 0.28, 1) var(--lyrics-video-effect-delay);
}

.lyrics-video-effect-row.is-collapsed {
  max-height: 0;
  opacity: 0;
  transform: translate3d(0,-6px,0);
  pointer-events: none;
}

.lyrics-video-effect-row.lyrics-video-effect-row-no-anim {
  transition: none !important;
}

.lyrics-video-control-panel h3 {
  font-size: 15px;
  margin: 0;
}

.lyrics-video-visual-select {
  display: grid;
  gap: 8px;
}

.lyrics-video-visual-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lyrics-video-visual-select-grid {
  max-height: 520px;
  overflow: auto;
  padding-right: 6px;
  align-items: start;
  grid-auto-rows: minmax(56px, auto);
  row-gap: 8px;
  column-gap: 10px;
  box-sizing: border-box;
}

.lyrics-video-visual-select.lyrics-video-visual-select-font .lyrics-video-visual-select-grid {
  grid-auto-rows: minmax(72px, auto);
  row-gap: 12px;
  column-gap: 12px;
}

.lyrics-video-visual-select-card {
  border: 1px solid rgba(26, 92, 255, 0.22);
  background: rgba(26, 92, 255, 0.06);
  color: var(--black);
  border-radius: 10px;
  padding: 8px 9px;
  text-align: left;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.16s ease;
}

.lyrics-video-visual-select-card:hover {
  border-color: rgba(26, 92, 255, 0.4);
  background: rgba(26, 92, 255, 0.12);
}

.lyrics-video-visual-select-card.is-active {
  border-color: rgba(26, 92, 255, 0.52);
  background: rgba(26, 92, 255, 0.16);
}

.lyrics-video-visual-select-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lyrics-video-visual-select-title {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lyrics-video-visual-select-value {
  margin-top: 3px;
  display: block;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-video-visual-select-desc {
  margin-top: 4px;
  display: block;
  font-size: 11px;
  line-height: 1.28;
  color: var(--text-secondary);
}

.lyrics-video-visual-select-font-preview {
  margin-top: 4px;
  display: block;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.lyrics-video-visual-select-font-name {
  margin-top: 4px;
  display: block;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-video-visual-select-toggle {
  justify-self: start;
}

.lyrics-video-choice-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lyrics-video-choice-card {
  border: 1px solid rgba(26, 92, 255, 0.22);
  background: rgba(26, 92, 255, 0.06);
  color: var(--black);
  border-radius: 12px;
  padding: 10px;
  min-height: 76px;
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.16s ease;
}

.lyrics-video-choice-card:hover {
  border-color: rgba(26, 92, 255, 0.42);
  background: rgba(26, 92, 255, 0.13);
}

.lyrics-video-choice-card.is-active {
  border-color: rgba(26, 92, 255, 0.54);
  background: rgba(26, 92, 255, 0.18);
}

.lyrics-video-choice-card-icon {
  font-size: 18px;
  color: var(--blue);
  line-height: 1;
}

.lyrics-video-choice-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.lyrics-video-choice-card-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.lyrics-video-control-rail {
  border: 1px solid rgba(26, 92, 255, 0.2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
  box-shadow: 0 12px 30px rgba(12, 12, 14, 0.12);
  display: grid;
  gap: 8px;
  padding: 8px;
  width: 98px;
  max-height: 70vh;
  overflow-y: auto;
}

.lyrics-video-rail-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 12px;
  min-height: 66px;
  padding: 8px 6px;
  display: grid;
  place-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  overflow: hidden;
}

.lyrics-video-rail-btn i {
  font-size: 15px;
}

.lyrics-video-rail-btn span {
  display: block;
  line-height: 1.08;
  max-width: 80px;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
}

.lyrics-video-rail-btn:hover,
.lyrics-video-rail-btn.is-active {
  color: var(--blue);
  border-color: rgba(26, 92, 255, 0.3);
  background: rgba(26, 92, 255, 0.1);
}

.lyrics-video-range-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lyrics-video-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.lyrics-video-count {
  margin: 6px 0;
  font-size: 13px;
  color: var(--muted);
}

.lyrics-video-count.is-valid {
  color: var(--success);
  font-weight: 600;
}

.lyrics-video-range-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.lyrics-video-lines {
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 340px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.lyrics-video-empty {
  color: var(--text-secondary);
  font-size: 13px;
  padding: 8px;
}

.lyrics-video-line-option {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f7f8fc;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 8px 10px;
  color: var(--black);
  cursor: pointer;
}

.lyrics-video-line-option:hover {
  border-color: rgba(26, 92, 255, 0.28);
}

.lyrics-video-line-option.is-in-range {
  background: rgba(26, 92, 255, 0.08);
  border-color: rgba(26, 92, 255, 0.26);
}

.lyrics-video-line-option.is-point-start,
.lyrics-video-line-option.is-point-end {
  border-color: rgba(26, 92, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(26, 92, 255, 0.2) inset;
}

.lyrics-video-line-time {
  font-family: 'Syne', monospace;
  font-size: 11px;
  color: var(--muted);
}

.lyrics-video-line-text {
  font-size: 13px;
  font-weight: 600;
}

.lyrics-video-mobile-category-bar {
  display: none;
}

.lyrics-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.lyrics-video-status {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.lyrics-video-status.is-error {
  color: var(--danger);
}

.lyrics-video-progress-container {
  margin-top: 8px;
}

.lyrics-video-bg-empty {
  border: 1px dashed rgba(26, 92, 255, 0.28);
  border-radius: 10px;
  padding: 10px;
  color: var(--text-secondary);
  font-size: 12px;
}

.lyrics-video-bg-items {
  display: grid;
  gap: 8px;
}

.lyrics-video-pinterest-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.lyrics-video-pinterest-search-row input[type="search"] {
  margin: 0;
}

.lyrics-video-pinterest-results {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lyrics-video-pinterest-empty {
  grid-column: 1 / -1;
  border: 1px dashed rgba(26, 92, 255, 0.24);
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

.lyrics-video-pinterest-card {
  border: 1px solid rgba(26, 92, 255, 0.18);
  border-radius: 12px;
  background: rgba(26, 92, 255, 0.05);
  overflow: hidden;
  display: grid;
}

.lyrics-video-pinterest-thumb-wrap {
  aspect-ratio: 1 / 1;
  background: rgba(26, 92, 255, 0.08);
}

.lyrics-video-pinterest-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lyrics-video-pinterest-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
}

.lyrics-video-pinterest-meta span {
  font-size: 11px;
  color: var(--text-secondary);
}
.lyrics-video-pinterest-meta .lyrics-video-pinterest-card-actions{display:inline-flex;gap:5px;align-items:center}

.lyrics-video-pinterest-search .form-hint.is-error {
  color: var(--danger);
}

.lyrics-video-bg-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(26, 92, 255, 0.16);
  border-radius: 12px;
  background: rgba(26, 92, 255, 0.05);
  padding: 8px 10px;
}

.lyrics-video-bg-preview-trigger {
  position: relative;
  width: 54px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(26, 92, 255, 0.2);
  border-radius: 8px;
  background: #0a0d14;
  cursor: zoom-in;
}

.lyrics-video-bg-preview-trigger > img,
.lyrics-video-bg-preview-trigger > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lyrics-video-bg-preview-trigger > span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.68);
  font-size: 8px;
}

.lyrics-video-bg-preview-trigger:is(:hover, :focus-visible) {
  border-color: rgba(26, 92, 255, 0.72);
  outline: 2px solid rgba(26, 92, 255, 0.2);
  outline-offset: 2px;
}

.lyrics-video-bg-item.is-active {
  border-color: rgba(26, 92, 255, 0.42);
  background: rgba(26, 92, 255, 0.12);
}

.lyrics-video-bg-item-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.lyrics-video-bg-item-meta strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-video-bg-item-meta span {
  font-size: 11px;
  color: var(--text-secondary);
}

.lyrics-video-bg-item-actions {
  display: flex;
  gap: 6px;
}

.lyrics-video-background-preview-modal .modal-content {
  width: min(900px, 94vw);
  max-height: 92dvh;
  overflow: hidden;
}

.lyrics-video-background-preview-modal .modal-body {
  padding: 0;
}

.lyrics-video-background-preview-stage {
  display: grid;
  place-items: center;
  min-height: 260px;
  max-height: 78dvh;
  overflow: hidden;
  background: #07090e;
}

.lyrics-video-background-preview-stage > img,
.lyrics-video-background-preview-stage > video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 78dvh;
  object-fit: contain;
}

.lyrics-video-background-preview-stage > [hidden] {
  display: none;
}

@media (max-width: 520px) {
  .lyrics-video-bg-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .lyrics-video-bg-preview-trigger {
    width: 48px;
    height: 42px;
  }

  .lyrics-video-bg-item-actions {
    grid-column: 2;
  }
}

.lyrics-video-control-panel input[type="color"] {
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 4px;
}

.lyrics-video-position-overrides-list {
  display: grid;
  gap: 10px;
}

.lyrics-video-override-accordion {
  border: 1px solid rgba(26, 92, 255, 0.2);
  border-radius: 12px;
  background: rgba(26, 92, 255, 0.06);
  overflow: hidden;
}

.lyrics-video-override-accordion > summary,
.lyrics-video-override-subaccordion > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lyrics-video-override-accordion > summary::-webkit-details-marker,
.lyrics-video-override-subaccordion > summary::-webkit-details-marker {
  display: none;
}

.lyrics-video-override-summary {
  padding: 10px 12px;
  font-size: 13px;
}

.lyrics-video-override-summary strong {
  font-weight: 700;
}

.lyrics-video-override-body {
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(26, 92, 255, 0.16);
}

.lyrics-video-override-word-list {
  margin-left: 14px;
  display: grid;
  gap: 8px;
}

.lyrics-video-override-subaccordion {
  border: 1px solid rgba(26, 92, 255, 0.18);
  border-radius: 10px;
  background: rgba(26, 92, 255, 0.05);
  margin-bottom: 8px;
}

.lyrics-video-override-subaccordion > summary {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
}

.lyrics-video-override-subaccordion > .lyrics-video-override-body {
  border-top: 1px solid rgba(26, 92, 255, 0.14);
  padding: 8px 10px 10px;
}

.lyrics-video-override-section {
  border: 1px solid rgba(26, 92, 255, 0.14);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.lyrics-video-effect-selector {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafcff;
  display: grid;
  gap: 10px;
  padding: 10px;
  max-height: 320px;
  overflow: auto;
}

.lyrics-video-effect-line-row {
  border: 1px solid rgba(26, 92, 255, 0.16);
  border-radius: 10px;
  padding: 8px;
  background: rgba(26, 92, 255, 0.04);
  display: grid;
  gap: 8px;
}

.lyrics-video-effect-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lyrics-video-effect-line-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.lyrics-video-effect-line-meta strong {
  font-size: 12px;
  line-height: 1.25;
}

.lyrics-video-effect-line-meta span {
  font-size: 11px;
  color: var(--text-secondary);
}

.lyrics-video-word-split-input {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lyrics-video-word-split-input input {
  min-width: 0;
  flex: 1;
}

.lyrics-video-word-split-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.lyrics-video-word-split-chip {
  border: 1px solid rgba(26, 92, 255, 0.22);
  border-radius: 8px;
  background: rgba(26, 92, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 8px;
}

.lyrics-video-effect-word-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lyrics-video-effect-word-chip {
  border: 1px solid rgba(26, 92, 255, 0.22);
  border-radius: 999px;
  background: #ffffff;
  color: var(--black);
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.lyrics-video-effect-word-chip.is-selected {
  border-color: rgba(26, 92, 255, 0.52);
  background: rgba(26, 92, 255, 0.16);
  color: var(--blue);
}

.lyrics-video-effect-selection-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.lyrics-video-effect-layers-list {
  display: grid;
  gap: 10px;
}

.lyrics-video-effect-layer-card {
  border: 1px solid rgba(26, 92, 255, 0.22);
  border-radius: 12px;
  background: rgba(26, 92, 255, 0.06);
  overflow: hidden;
}

.lyrics-video-effect-layer-card > summary,
.lyrics-video-effect-layer-group > summary {
  list-style: none;
  cursor: pointer;
}

.lyrics-video-effect-layer-card > summary::-webkit-details-marker,
.lyrics-video-effect-layer-group > summary::-webkit-details-marker {
  display: none;
}

.lyrics-video-effect-layer-summary {
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.lyrics-video-effect-layer-summary strong {
  font-size: 13px;
}

.lyrics-video-effect-layer-summary span {
  font-size: 11px;
  color: var(--text-secondary);
}

.lyrics-video-effect-layer-body {
  border-top: 1px solid rgba(26, 92, 255, 0.16);
  padding: 10px 12px 12px;
  display: grid;
  gap: 10px;
}

.lyrics-video-effect-layer-group {
  border: 1px solid rgba(26, 92, 255, 0.18);
  border-radius: 10px;
  background: rgba(26, 92, 255, 0.04);
}

.lyrics-video-effect-layer-group > summary {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
}

.lyrics-video-effect-layer-group-body {
  border-top: 1px solid rgba(26, 92, 255, 0.14);
  padding: 8px 10px;
  display: grid;
  gap: 8px;
}

.lyrics-video-mobile-sheet-backdrop {
  display: none;
}

@keyframes lyricsVideoRiseIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1023px) {
  .settings-container.lyrics-video-page {
    --lyrics-video-flyout-width: min(92vw, 560px);
    padding-left: 12px;
    padding-right: 24px;
  }

  .lyrics-video-editor-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .lyrics-video-stage-column {
    width: 100%;
    margin: 0;
  }

  .lyrics-video-range-controls {
    grid-template-columns: 1fr;
  }

  .lyrics-video-controls-column {
    position: static;
    grid-template-columns: 1fr;
    width: 100%;
    z-index: auto;
  }

  .lyrics-video-control-rail {
    display: none;
  }

  .lyrics-video-mobile-category-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .lyrics-video-mobile-panel-btn {
    border: 1px solid rgba(26, 92, 255, 0.2);
    background: rgba(26, 92, 255, 0.08);
    color: var(--text-secondary);
    border-radius: 12px;
    min-height: 58px;
    display: grid;
    place-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }

  .lyrics-video-mobile-panel-btn i {
    font-size: 15px;
  }

.lyrics-video-mobile-panel-btn.is-active {
  border-color: rgba(26, 92, 255, 0.38);
  background: rgba(26, 92, 255, 0.14);
  color: var(--blue);
}

.lyrics-video-action-btn {
  font-size: 11px;
}

  .lyrics-video-control-flyout {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 120%);
    bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-player-height) + 8px);
    width: min(94vw, 560px);
    max-height: min(72vh, 700px);
    border-radius: 18px;
    z-index: 1505;
    opacity: 0;
    pointer-events: none;
  }

  .lyrics-video-mobile-sheet-close {
    display: inline-flex;
  }

  .lyrics-video-control-flyout.is-open.is-mobile-open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }

  .lyrics-video-mobile-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(4, 6, 10, 0.54);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 1500;
  }

  .lyrics-video-mobile-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

.lyrics-video-render-modal .modal-content,
.lyrics-video-render-choice-modal .modal-content {
  width: min(560px, calc(100vw - 26px));
}

.lyrics-video-donate-modal .modal-content {
  width: min(560px, calc(100vw - 26px));
}

.lyrics-video-preset-modal .modal-content {
  width: min(780px, calc(100vw - 26px));
}

.lyrics-video-preset-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(48vh, 420px);
  overflow: auto;
  padding-right: 4px;
}

.lyrics-video-preset-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(21, 33, 58, 0.12);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(248, 251, 255, 0.9);
}

.lyrics-video-donate-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lyrics-video-donate-actions .btn {
  flex: 1 1 220px;
  justify-content: center;
}

.lyrics-video-render-choices {
  display: grid;
  margin-top: 14px;
  gap: 10px;
}

.lyrics-video-render-choice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--black);
  background: var(--surface-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.lyrics-video-render-choice:hover:not(:disabled) {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, var(--surface-1));
  transform: translateY(-1px);
}

.lyrics-video-render-choice > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.lyrics-video-render-choice strong { font-size: 14px; }
.lyrics-video-render-choice small { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.lyrics-video-render-choice > .fa-chevron-right { color: var(--muted); font-size: 11px; }
.lyrics-video-render-choice:disabled { opacity: .52; cursor: not-allowed; }

.lyrics-video-render-choice-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-2));
  font-size: 17px;
}

body.artist-plus-upgrade-open { overflow: hidden; }

.artist-plus-upgrade-modal { z-index: 10050; }

.artist-plus-upgrade-card {
  width: min(520px, calc(100vw - 26px));
}

.artist-plus-upgrade-card .modal-header h2 i { margin-right: 6px; color: var(--blue); }
.artist-plus-upgrade-message { margin: 0; font-size: 15px; line-height: 1.55; }
.artist-plus-upgrade-includes { margin: 8px 0 22px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.artist-plus-upgrade-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 2px 0 18px; padding: 0; gap: 8px; list-style: none; }
.artist-plus-upgrade-features li { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 12px; }
.artist-plus-upgrade-features i { width: 16px; color: var(--blue); text-align: center; }
.lyrics-pending-videos-notice { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(76, 175, 80, .35); border-radius: 12px; background: rgba(76, 175, 80, .1); color: var(--text-primary); }
.lyrics-pending-videos-notice i { color: #48b96b; }
.lyrics-quick-randomize { margin-top: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.lyrics-quick-randomize h4, .lyrics-quick-randomize p { margin: 0 0 7px; }
.lyrics-quick-randomize p { color: var(--text-secondary); font-size: 12px; }
.lyrics-quick-randomize > div { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.lyrics-quick-randomize label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.artist-plus-upgrade-plan { display: flex; min-height: 50px; padding: 12px 14px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.artist-plus-upgrade-plan strong { font-size: 15px; }
.artist-plus-upgrade-plan span { color: var(--text-secondary); font-size: 11px; text-align: right; }
.artist-plus-upgrade-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; gap: 10px; }
.artist-plus-upgrade-actions .btn { min-height: 44px; justify-content: center; }
.artist-plus-upgrade-note { margin: 10px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.artist-plus-offer-disclosure { display:flex; margin:12px 0 0; align-items:flex-start; gap:9px; color:var(--text-secondary); font-size:11px; line-height:1.45; }
.artist-plus-offer-disclosure[hidden] { display:none; }
.artist-plus-offer-disclosure input { margin-top:2px; flex:0 0 auto; }

@media (max-width: 520px) {
  .artist-plus-upgrade-plan { align-items: flex-start; flex-direction: column; }
  .artist-plus-upgrade-plan span { text-align: left; }
  .artist-plus-upgrade-actions { grid-template-columns: 1fr; }
}

.lyrics-video-render-progress {
  position: relative;
  margin-top: 10px;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(26, 92, 255, 0.16);
  overflow: hidden;
}

.lyrics-video-render-progress-fill {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2a6dff, #4ca9ff);
  overflow: hidden;
  transition: width 0.16s ease-out;
}

.lyrics-video-render-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 46%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-120%);
  animation: lyricsVideoProgressSweep .7s linear infinite;
}

@keyframes lyricsVideoProgressSweep {
  to { transform: translateX(320%); }
}

@media (max-width: 640px) {
  .lyrics-video-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .lyrics-video-donate-actions .btn {
    width: 100%;
    flex-basis: 100%;
  }

  .lyrics-video-mobile-category-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lyrics-video-preset-item {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lyrics-video-preview-panel,
  .lyrics-video-control-flyout,
  .lyrics-video-rail-btn,
  .lyrics-video-mobile-panel-btn,
  .lyrics-video-mobile-sheet-backdrop,
  .lyrics-video-effect-row {
    animation: none !important;
    transition: none !important;
  }

  .lyrics-video-render-progress-fill::after {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .tag-page-wrap {
    padding: 18px 12px 30px;
  }

  .tag-track-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .tag-track-grid {
    grid-template-columns: 1fr;
  }
}

.settings-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px 160px;
}

.settings-container > .playlists-header {
  margin-bottom: 18px;
}

.settings-container > .playlists-header h1 {
  margin-bottom: 0;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.05;
}

.settings-header {
  margin-bottom: 40px;
}

.settings-header h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(26, 92, 255, 0.035);
  overflow-x: auto;
  scrollbar-width: thin;
}

.settings-tab {
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
  white-space: nowrap;
}

.settings-tab:hover {
  color: var(--blue);
  background: rgba(26, 92, 255, 0.07);
}

.settings-tab.active {
  color: var(--blue);
  border-color: rgba(26, 92, 255, 0.2);
  background: var(--white);
  box-shadow: 0 4px 14px rgba(26, 92, 255, 0.08);
}

.settings-tab-content {
  display: none;
}

.settings-tab-content.active {
  display: grid;
  gap: 16px;
  animation: fadeIn 0.3s ease-out;
}

.settings-form {
  display: grid;
  gap: 18px;
}

.settings-tab-content > h2 {
  margin: 0;
  font-family: 'Syne', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.3px;
}

.settings-tab-content > .warning-text {
  margin: -6px 0 0;
}

.settings-tab-content hr {
  margin: 12px 0 !important;
  border: none !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.settings-container .settings-form > .form-group,
.settings-profile-main,
.settings-profile-social-card,
.settings-container .preferences-card,
.settings-container .danger-section {
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--white) 96%, rgba(26, 92, 255, 0.04));
  padding: 18px;
}

.settings-container .settings-form > .form-group {
  display: grid;
  gap: 7px;
}

.settings-container .settings-form > .form-actions {
  margin-top: 0;
}

.settings-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}

.settings-profile-main {
  display: grid;
  gap: 16px;
}

.settings-profile-social-card {
  display: grid;
  gap: 14px;
}

.settings-profile-social-card h3 {
  margin: 0;
  font-size: 16px;
}

.settings-profile-social-card .form-group,
.settings-profile-main .form-group,
.settings-container .preferences-card .form-group {
  margin-bottom: 0;
}

.settings-container .preferences-card {
  padding: 24px;
  margin-bottom: 26px;
}

.settings-container .preferences-row {
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.settings-container .danger-section {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(220, 38, 38, 0.035);
}

@media (max-width: 860px) {
  .settings-profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .settings-container {
    padding: 22px 14px 140px;
  }

  .settings-container > .playlists-header {
    margin-bottom: 14px;
  }

  .settings-tabs {
    margin-bottom: 18px;
    padding: 5px;
    gap: 5px;
  }

  .settings-tab {
    padding: 9px 10px;
    font-size: 13px;
  }

  .settings-tab-content.active {
    gap: 14px;
  }

  .settings-container .settings-form > .form-group,
  .settings-profile-main,
  .settings-profile-social-card,
  .settings-container .preferences-card,
  .settings-container .danger-section {
    padding: 15px;
    border-radius: 10px;
  }

  .settings-container .preferences-row {
    align-items: flex-start;
  }
}

.lyrics-editor-page {
  max-width: 980px;
}

.lyrics-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.lyrics-editor-subtitle {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.lyrics-mobile-send-wrap {
  display: none;
}

.lyrics-send-btn {
  white-space: nowrap;
}

.lyrics-ai-sync-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(26, 92, 255, 0.25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(26, 92, 255, 0.09), rgba(139, 92, 246, 0.08));
}

.lyrics-ai-sync-card strong {
  display: block;
  margin-bottom: 5px;
}

.lyrics-ai-sync-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.lyrics-ai-sync-progress {
  width: min(420px, 60vw);
  height: 5px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(26, 92, 255, 0.13);
}

.lyrics-ai-sync-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 0.25s ease;
}

.lyrics-transcribe-input {
  width: 100%;
  min-height: 52vh;
  font-family: 'Syne', Georgia, serif;
  font-size: 15px;
  line-height: 1.7;
}

.lyrics-sync-status {
  font-size: 13px;
  color: var(--text-secondary);
}

.lyrics-sync-list {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 52vh;
  overflow: auto;
  background: #fafafa;
}

.lyrics-sync-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  align-items: center;
}

.lyrics-sync-row.is-current {
  background: rgba(26, 92, 255, 0.1);
  outline: 1px solid rgba(26, 92, 255, 0.28);
}

.lyrics-sync-row.is-synced .lyrics-sync-row-time {
  color: var(--blue);
  font-weight: 700;
}

.lyrics-sync-row[data-seek-time],
.lyrics-word-sync-word[data-seek-time] {
  cursor: pointer;
}

.lyrics-sync-row[data-seek-time]:hover,
.lyrics-sync-row[data-seek-time]:focus-visible {
  background: rgba(26, 92, 255, 0.08);
}

.lyrics-word-sync-word[data-seek-time]:hover,
.lyrics-word-sync-word[data-seek-time]:focus-visible {
  border-color: rgba(26, 92, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(26, 92, 255, 0.2) inset;
}

.lyrics-sync-row-time {
  font-family: 'Syne', monospace;
  color: var(--muted);
  font-size: 12px;
}

.lyrics-sync-row-text {
  color: var(--black);
  font-size: 14px;
  line-height: 1.4;
}

.lyrics-sync-row.is-tag {
  grid-template-columns: 1fr;
  padding: 6px 10px;
}

.lyrics-sync-row-tag {
  color: var(--text-secondary);
  font-size: 13px;
}

.lyrics-sync-row.is-blank {
  grid-template-columns: 1fr;
  min-height: 12px;
  padding: 0;
}

.lyrics-sync-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.lyrics-sync-control {
  min-width: 56px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.lyrics-word-sync-list .lyrics-sync-row {
  grid-template-columns: 96px 1fr;
}

.lyrics-word-sync-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lyrics-word-sync-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--black);
  font-size: 13px;
  line-height: 1.1;
  transition: all 0.18s ease;
}

.lyrics-word-sync-word.is-synced {
  border-color: rgba(26, 92, 255, 0.35);
  background: rgba(26, 92, 255, 0.12);
  color: var(--blue);
  font-weight: 700;
}

.lyrics-word-sync-word.is-current {
  border-color: rgba(26, 92, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(26, 92, 255, 0.3) inset;
}

.lyrics-word-sync-word.is-preview {
  background: rgba(26, 92, 255, 0.18);
  border-color: rgba(26, 92, 255, 0.45);
  color: var(--blue);
}

.lyrics-word-sync-word.is-preview-add {
  background: rgba(26, 92, 255, 0.24);
  border-color: rgba(26, 92, 255, 0.56);
}

.lyrics-word-sync-word.is-preview-undo {
  background: rgba(255, 169, 83, 0.2);
  border-color: rgba(255, 169, 83, 0.44);
  color: #a85a12;
}

.lyrics-word-sync-word.is-last-synced {
  background: rgba(20, 184, 124, 0.16);
  border-color: rgba(20, 184, 124, 0.36);
  color: #0f8d61;
}

.lyrics-word-sync-word-time {
  margin-left: 4px;
  font-family: 'Syne', monospace;
  font-size: 10px;
  color: var(--text-secondary);
}

.lyrics-word-sync-mobile {
  display: none;
}

.lyrics-word-sync-mobile-meta {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  margin-top: 2px;
}

.lyrics-word-sync-mobile-time {
  font-family: 'Syne', monospace;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.lyrics-word-sync-mobile-line {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafafa;
  padding: 12px;
  min-height: 76px;
  max-height: 76px;
  overflow-y: hidden;
  overflow-x: auto;
  display: block;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.lyrics-word-sync-mobile-line::-webkit-scrollbar {
  height: 7px;
}

.lyrics-word-sync-mobile-line::-webkit-scrollbar-thumb {
  background: rgba(26, 92, 255, 0.34);
  border-radius: 999px;
}

.lyrics-word-sync-mobile-line .lyrics-word-sync-word {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.lyrics-word-sync-mobile-line .lyrics-word-sync-word:last-child {
  margin-right: 0;
}

.lyrics-word-sync-mobile-swipe {
  --lyrics-word-sync-progress: 0;
  position: relative;
  margin-top: 12px;
  height: 60px;
  border-radius: 16px;
  border: 1px solid rgba(26, 92, 255, 0.3);
  background: rgba(26, 92, 255, 0.1);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: ew-resize;
}

.lyrics-word-sync-mobile-swipe-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(26, 92, 255, 0.22), rgba(26, 92, 255, 0.42));
  transition: none;
  pointer-events: none;
}

.lyrics-word-sync-mobile-swipe-thumb {
  position: absolute;
  top: 50%;
  left: calc((100% - 44px) * var(--lyrics-word-sync-progress));
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--blue);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(26, 92, 255, 0.36);
  transition: none;
  pointer-events: none;
}

.lyrics-word-sync-mobile-swipe-label {
  position: absolute;
  left: 54px;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #2d3f74;
  line-height: 1.3;
  pointer-events: none;
}

.lyrics-word-sync-mobile-swipe.is-dragging .lyrics-word-sync-mobile-swipe-thumb {
  transform: translateY(-50%) scale(1.04);
}

.lyrics-word-sync-mobile-swipe.is-disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.lyrics-word-sync-mobile-undo {
  width: 100%;
}

.settings-form h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}

.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.save-status {
  font-size: 12px;
  color: var(--muted);
}

.invite-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
}

.invite-code-row + .invite-code-row {
  margin-top: 10px;
}

.invite-code-code {
  font-weight: 800;
  letter-spacing: 1px;
  font-family: 'Syne', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--black);
}

.invite-code-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary);
}

.invite-code-badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.invite-badge-unused {
  background: rgba(26, 92, 255, 0.12);
  border-color: rgba(26, 92, 255, 0.25);
  color: var(--blue);
}

.invite-badge-used {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text-secondary);
}

.danger-section {
  border: 2px solid var(--danger);
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.danger-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--danger);
  margin-bottom: 8px;
}

.danger-section p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 16px;
}

.oauth-apps-list {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.oauth-app-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.oauth-app-main {
  min-width: 0;
}

.oauth-app-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
}

.oauth-app-meta {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
}

.oauth-app-scopes {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.oauth-app-scope {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(26, 92, 255, 0.12);
  border: 1px solid rgba(26, 92, 255, 0.22);
  color: var(--blue);
}

.oauth-app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.oauth-app-connected {
  font-size: 12px;
  color: var(--success);
  font-weight: 700;
}

.oauth-app-revoke-btn.is-loading {
  opacity: 0.8;
  pointer-events: none;
}

.oauth-app-empty {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

@media (max-width: 640px) {
  .oauth-app-card {
    flex-direction: column;
    align-items: stretch;
  }

  .oauth-app-actions {
    justify-content: space-between;
  }
}

.warning-text {
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}


.modal {
  display: none;
  position: fixed;
  z-index: 3500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(12, 12, 14, 0.42);
  backdrop-filter: blur(0px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, backdrop-filter 0.64s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.64s;
}

.modal.show {
  display: flex;
}

.modal[style*="display: flex"]:not(.show) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition: opacity 0.5s ease, backdrop-filter 0.64s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition: opacity 0.5s ease, backdrop-filter 0.64s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal.is-closing {
  opacity: 0;
  pointer-events: none;
}

.modal-content {
  background: var(--white);
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.985);
  opacity: 0.96;
  transition: transform 0.56s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.32s ease;
}

.modal.is-open .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal[style*="display: flex"]:not(.show) .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal.is-closing .modal-content {
  transform: translateY(12px) scale(0.985);
  opacity: 0.96;
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-family: 'Syne', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.3px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--black);
}

.modal-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.add-to-playlist-modal .modal-content {
  width: min(92vw, 720px);
  max-width: 720px;
  max-height: min(86vh, 760px);
  overflow: hidden;
}

.player-add-actions-modal .modal-content {
  width: min(92vw, 360px);
}

.player-add-actions {
  display: grid;
  gap: 10px;
}

.player-add-action-btn {
  border: 1px solid var(--lvm-border);
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.player-add-action-btn i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 92, 255, 0.12);
  color: var(--blue);
}

.player-add-action-btn:hover,
.player-add-action-btn:focus-visible {
  background: var(--hover-bg);
  border-color: rgba(26, 92, 255, 0.28);
  outline: none;
  transform: translateY(-1px);
}

.add-to-playlist-modal .modal-header h2 {
  max-width: calc(100% - 42px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-to-playlist-modal .modal-body {
  padding-top: 16px;
  padding-bottom: 16px;
}

.add-playlist-shell {
  display: grid;
  gap: 14px;
}

.add-playlist-summary {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
}

.add-playlist-scroll {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: #fcfcff;
  max-height: min(54vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.add-playlist-list {
  display: grid;
  gap: 10px;
}

.add-playlist-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.add-playlist-card:hover {
  border-color: rgba(26, 92, 255, 0.35);
  box-shadow: 0 8px 20px rgba(26, 92, 255, 0.12);
  transform: translateY(-1px);
}

.add-playlist-cover {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(26, 92, 255, 0.16), rgba(26, 92, 255, 0.06));
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  overflow: hidden;
}

.add-playlist-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.add-playlist-meta {
  min-width: 0;
}

.add-playlist-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-playlist-count {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.add-playlist-description {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-playlist-action {
  min-width: 92px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  flex-shrink: 0;
}

.add-playlist-action.is-loading {
  opacity: 0.78;
}

.add-playlist-action.is-loading i {
  animation: spin 0.85s linear infinite;
}

.add-playlist-action.is-added {
  cursor: default;
}

.add-playlist-loading,
.add-playlist-empty {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  background: #fcfcfe;
}

.add-playlist-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}

.add-playlist-empty a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.add-playlist-empty a:hover {
  text-decoration: underline;
}

.playlist-sheet-modal {
  background:
    radial-gradient(circle at 50% 0%, rgba(26, 92, 255, 0.16), transparent 34%),
    rgba(8, 10, 14, 0.46);
}

.playlist-sheet-modal .modal-content {
  width: min(94vw, 760px);
  max-width: 760px;
  max-height: min(88vh, 780px);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(26, 92, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.98) 100%);
  box-shadow: 0 30px 90px rgba(10, 20, 40, 0.24);
}

.playlist-sheet-grabber {
  display: none;
}

.playlist-sheet-modal .modal-header {
  align-items: flex-start;
  gap: 18px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid rgba(26, 92, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(26, 92, 255, 0.08), rgba(28, 185, 116, 0.06));
}

.playlist-sheet-title-wrap {
  min-width: 0;
}

.playlist-sheet-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.playlist-sheet-modal .modal-header h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 760;
  letter-spacing: 0;
  color: var(--black);
}

.playlist-sheet-title-wrap p {
  margin: 7px 0 0;
  max-width: 560px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.playlist-sheet-modal .modal-close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(26, 92, 255, 0.14);
  color: var(--text-secondary);
  font-size: 15px;
  box-shadow: 0 10px 22px rgba(12, 22, 44, 0.08);
}

.playlist-sheet-modal .modal-close:hover {
  color: var(--black);
  transform: translateY(-1px);
}

.playlist-sheet-modal .modal-body {
  padding: 18px 24px 20px;
  overflow: hidden;
}

.playlist-sheet-modal .modal-footer {
  padding: 16px 24px 22px;
  border-top: 1px solid rgba(26, 92, 255, 0.1);
  background: rgba(255, 255, 255, 0.72);
}

.playlist-sheet-primary,
.playlist-sheet-secondary {
  min-height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 18px;
}

.add-playlist-shell {
  gap: 12px;
}

.add-playlist-create-card {
  width: 100%;
  border: 1px solid rgba(26, 92, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(26, 92, 255, 0.08), rgba(28, 185, 116, 0.08));
  color: var(--black);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.add-playlist-create-card:hover,
.add-playlist-create-card:focus-visible {
  outline: none;
  border-color: rgba(26, 92, 255, 0.34);
  box-shadow: 0 16px 34px rgba(26, 92, 255, 0.13);
  transform: translateY(-1px);
}

.add-playlist-create-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 24px rgba(26, 92, 255, 0.24);
}

.add-playlist-create-card strong,
.add-playlist-create-card small {
  display: block;
  min-width: 0;
}

.add-playlist-create-card strong {
  font-size: 15px;
  font-weight: 800;
}

.add-playlist-create-card small {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.add-playlist-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.add-playlist-summary i {
  color: var(--muted);
  font-size: 11px;
}

.add-playlist-scroll {
  border: none;
  border-radius: 18px;
  padding: 0 4px 0 0;
  background: transparent;
  max-height: min(50vh, 430px);
}

.add-playlist-list {
  gap: 8px;
}

.add-playlist-card {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  border: 1px solid rgba(18, 28, 42, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 28px rgba(20, 30, 50, 0.07);
}

.add-playlist-card:hover {
  border-color: rgba(26, 92, 255, 0.28);
  box-shadow: 0 18px 42px rgba(26, 92, 255, 0.12);
}

.add-playlist-cover {
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(26, 92, 255, 0.16), rgba(28, 185, 116, 0.12));
}

.add-playlist-cover img {
  border-radius: 14px;
}

.add-playlist-name {
  font-weight: 760;
}

.add-playlist-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.add-playlist-action {
  min-width: 86px;
  min-height: 42px;
  border: none;
  border-radius: 999px;
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
  font-weight: 850;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.add-playlist-action:hover,
.add-playlist-action:focus-visible {
  outline: none;
  background: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}

.add-playlist-action.is-added {
  background: rgba(28, 185, 116, 0.14);
  color: #0f8c54;
}

.add-playlist-empty {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 28px 18px;
  border-radius: 18px;
}

.add-playlist-empty i {
  color: var(--blue);
  font-size: 24px;
}

.create-playlist-modal .modal-content {
  width: min(94vw, 680px);
  max-width: 680px;
}

.create-playlist-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.create-playlist-cover-picker {
  border: 1px solid rgba(26, 92, 255, 0.16);
  border-radius: 20px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 250, 255, 0.82));
  cursor: pointer;
  display: grid;
  gap: 10px;
}

.create-playlist-cover-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(26, 92, 255, 0.16), rgba(28, 185, 116, 0.13));
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
}

.create-playlist-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.create-playlist-cover-copy strong,
.create-playlist-cover-copy small {
  display: block;
}

.create-playlist-cover-copy strong {
  color: var(--black);
  font-size: 14px;
}

.create-playlist-cover-copy small {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
}

.create-playlist-cover-picker input {
  display: none;
}

.create-playlist-fields {
  display: grid;
  gap: 14px;
}

.playlist-field {
  margin: 0;
}

.playlist-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.playlist-input-shell {
  border: 1px solid rgba(26, 92, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.playlist-input-shell:focus-within {
  border-color: rgba(26, 92, 255, 0.42);
  box-shadow: 0 0 0 4px rgba(26, 92, 255, 0.1);
}

.playlist-input-shell i {
  color: var(--blue);
  text-align: center;
}

.playlist-input-shell input,
.playlist-input-shell textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--black);
  font: inherit;
  padding: 14px 14px 14px 0;
}

.playlist-input-shell textarea {
  resize: none;
  min-height: 104px;
}

.playlist-input-shell-textarea {
  align-items: start;
}

.playlist-input-shell-textarea i {
  padding-top: 17px;
}

html.dark-mode .playlist-sheet-modal .modal-content {
  background:
    linear-gradient(180deg, rgba(21, 27, 38, 0.98) 0%, rgba(13, 18, 27, 0.98) 100%);
  border-color: rgba(120, 164, 255, 0.2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
}

html.dark-mode .playlist-sheet-modal .modal-header,
html.dark-mode .playlist-sheet-modal .modal-footer {
  background:
    linear-gradient(135deg, rgba(76, 132, 255, 0.12), rgba(28, 185, 116, 0.07));
  border-color: rgba(120, 164, 255, 0.16);
}

html.dark-mode .playlist-sheet-modal .modal-header h2,
html.dark-mode .add-playlist-create-card,
html.dark-mode .add-playlist-name,
html.dark-mode .create-playlist-cover-copy strong {
  color: var(--text-color);
}

html.dark-mode .playlist-sheet-modal .modal-close,
html.dark-mode .add-playlist-card,
html.dark-mode .create-playlist-cover-picker,
html.dark-mode .playlist-input-shell {
  background: rgba(18, 24, 35, 0.82);
  border-color: rgba(120, 164, 255, 0.16);
}

html.dark-mode .add-playlist-create-card {
  background:
    linear-gradient(135deg, rgba(76, 132, 255, 0.12), rgba(28, 185, 116, 0.09));
  border-color: rgba(120, 164, 255, 0.2);
}

html.dark-mode .playlist-input-shell input,
html.dark-mode .playlist-input-shell textarea {
  color: var(--text-color);
}

html.dark-mode .add-playlist-action.is-added {
  color: #64d898;
}

@media (max-width: 768px) {
  .artist-hub-releases-list .artist-hub-release-item {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  .artist-hub-releases-list .artist-hub-release-item .track-item-cover {
    width: 64px;
    height: 64px;
  }

  .artist-hub-releases-list .artist-hub-release-item .track-item-info h3 {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .artist-hub-releases-list .artist-hub-release-item .track-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11.5px;
  }

  .artist-hub-releases-list .artist-hub-release-item .track-item-actions {
    grid-column: auto;
    width: auto;
    flex-direction: row;
    gap: 6px;
    align-self: start;
  }

  .artist-hub-releases-list .artist-hub-release-head-actions {
    width: auto;
    justify-content: flex-end;
    justify-self: end;
    margin-left: auto;
  }

  .artist-hub-releases-list .artist-hub-release-expand-btn,
  .artist-hub-releases-list .artist-hub-release-item > .track-item-actions .artist-release-context-trigger {
    width: 34px;
    height: 34px;
  }

  .artist-hub-releases-list .artist-hub-release-item .artist-hub-release-tracks {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 10px;
  }

  .artist-hub-releases-list .artist-hub-release-track-row .track-item-actions {
    width: auto;
    flex-direction: row;
    gap: 6px;
    justify-self: end;
  }

  .artist-hub-releases-list .artist-hub-release-track-row .artist-track-context-trigger {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
}

@media (max-width: 480px) {
  .artist-hub-releases-list .artist-hub-release-item {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    padding: 10px;
    gap: 8px;
  }

  .artist-hub-releases-list .artist-hub-release-item .track-item-cover {
    width: 56px;
    height: 56px;
  }

  .artist-hub-releases-list .artist-hub-release-expand-btn,
  .artist-hub-releases-list .artist-hub-release-item > .track-item-actions .artist-release-context-trigger {
    width: 32px;
    height: 32px;
  }

  .artist-hub-releases-list .artist-hub-release-track-row .artist-track-context-trigger {
    width: 28px;
    height: 28px;
  }
}

.desktop-download-modal .modal-content {
  width: min(92vw, 680px);
  max-width: 680px;
}

.desktop-download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.desktop-download-card {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
  padding: 14px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas:
    'icon content'
    'action action';
  gap: 10px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.desktop-download-card:hover {
  border-color: rgba(26, 92, 255, 0.35);
  box-shadow: 0 10px 24px rgba(26, 92, 255, 0.14);
  transform: translateY(-1px);
}

.desktop-download-card-icon {
  grid-area: icon;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(26, 92, 255, 0.22);
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.desktop-download-card-content {
  grid-area: content;
  min-width: 0;
}

.desktop-download-card-content h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.desktop-download-card-content p {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.desktop-download-card-action {
  grid-area: action;
  justify-self: start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
}

@media (max-width: 700px) {
  .add-to-playlist-modal {
    align-items: flex-end;
  }

  .add-to-playlist-modal .modal-content {
    width: 100%;
    max-width: none;
    max-height: min(86vh, 86vh);
    border-radius: 18px 18px 0 0;
    margin: 0;
  }

  .add-to-playlist-modal .modal-header,
  .add-to-playlist-modal .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .add-to-playlist-modal .modal-body {
    padding: 12px 16px;
  }

  .add-playlist-scroll {
    max-height: min(58vh, 58vh);
    padding: 8px;
  }

  .add-playlist-card {
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
  }

  .desktop-download-grid {
    grid-template-columns: 1fr;
  }

  .add-playlist-cover {
    width: 46px;
    height: 46px;
  }

  .add-playlist-action {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
  }
}

@media (max-width: 640px) {
  .hub-search-row {
    margin-bottom: 14px;
  }

  .hub-tab-panel[data-hub-panel="releases"] .hub-search-row {
    margin-bottom: 18px;
  }

  .hub-tab-panel[data-hub-panel="releases"] .hub-search-row + .content-header {
    margin-top: 8px;
  }

  .hub-tab-search {
    width: 100%;
    max-width: none;
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 11px;
  }

  .content-header {
    align-items: stretch;
  }

  .artist-hub-release-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .content-header .btn {
    width: 100%;
    justify-content: center;
  }

  .tracks-list {
    border: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .add-playlist-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    background: var(--white);
  }

  .track-item:last-child {
    border-bottom: 1px solid var(--border);
  }

  .track-item-cover {
    width: 72px;
    height: 72px;
  }

  .track-item-info {
    min-width: 0;
  }

  .track-item-info h3 {
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 6px;
    word-break: break-word;
  }

  .track-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 13px;
  }

  .track-meta span {
    min-width: 0;
    line-height: 1.35;
    word-break: break-word;
  }

  .add-playlist-cover {
    grid-column: 1 / -1;
    margin-top: 2px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .track-item-actions .btn {
    width: 100%;
    justify-content: center;
    height: 44px;
    font-size: 16px;

@media (max-width: 480px) {
  .track-item {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 12px;
  }

  .track-item-cover {
    width: 64px;
    height: 64px;
  }

  .track-item-info h3 {
    font-size: 16px;
  }

  .track-meta {
    font-size: 12px;
    gap: 5px;
  }
}
  }

  .add-playlist-action {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
  }
}


.player-footer {
  background: var(--white);
  border-top: 1px solid var(--border);
}

#playerSection {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  z-index: 600;
}

#playerSection.is-preview-expanding {
  will-change: transform, opacity, filter;
}

@media (max-width: 1023px) {
  #playerSection {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 8px);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(250, 250, 250, 0.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 14px 36px rgba(12, 12, 14, 0.16);
    overflow: hidden;
  }

  .player-wrapper {
    max-width: none;
    margin: 0;
    padding: 10px 12px;
  }
}

@media (min-width: 1024px) {
  #playerSection {
    left: var(--desktop-sidebar-width);
    right: 0;
    width: auto;
  }
}

.player-section {
  width: 100%;
  touch-action: pan-y;
}

.player-wrapper {
  max-width: 90%;
  margin: 0 auto;
  padding: 12px 24px;
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 20px;
  align-items: center;
  overflow: visible;
}

@media (min-width: 1024px) {
  .player-wrapper {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  .player-wrapper {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .player-center,
  .player-right {
    order: -1;
  }
}

.player-track-info {
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: default;
  min-width: 0;
}

.player-mobile-play-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(43, 81, 218, 0);
  color: var(--blue);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.player-mobile-play-btn:hover {
  transform: scale(0.94);
}

.player-mobile-play-btn:active {
  transform: scale(0.96);
}

.player-cover {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.player-info {
  flex: 1;
  min-width: 0;
}

.player-title {
  font-family: 'Syne', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.player-title2 {
  font-family: 'Syne', Georgia, serif;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-artist {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.player-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.player-btn:hover {
  background: rgba(26, 92, 255, 0.2);
  transform: scale(1.05);
}

.player-play-btn {
  width: 44px;
  height: 44px;
  background: var(--blue);
  color: var(--white);
  font-size: 16px;
}

.player-play-btn:hover {
  background: var(--purple);
}

.player-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time {
  font-size: 11px;
  color: var(--muted);
  min-width: 30px;
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: transform 0.18s ease, background-color 0.2s ease;
}

.progress-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  width: 0%;
  transition: width 0.14s linear;
}

.progress-bar.is-hovering {
  transform: scaleY(1.25);
}

.progress-bar.is-scrubbing {
  transform: scaleY(1.45);
}

.progress-bar.is-scrubbing .progress-fill {
  transition: none;
}

.player-progress-lyric-preview {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  transform: translate(-50%, 8px) scale(0.96);
  width: min(280px, 42vw);
  padding: 9px 11px 8px;
  border-radius: 10px;
  border: 1px solid rgba(16, 22, 38, 0.12);
  background: rgba(255, 255, 255, 0.98);
  color: #101626;
  box-shadow: 0 10px 26px rgba(16, 22, 38, 0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 12;
  backdrop-filter: blur(10px);
  transition: opacity 0.14s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.player-progress-lyric-preview.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.player-progress-lyric-preview-text {
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-progress-lyric-preview-time {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(16, 22, 38, 0.62);
}

@media (max-width: 1023px) {
  .player-progress-lyric-preview {
    display: none;
  }
}

.player-right {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.player-btn-small {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s;
}

.player-btn-small:hover {
  background: rgba(26, 92, 255, 0.2);
}

.player-btn-small.active {
  background: var(--blue);
  color: var(--white);
}

#playerQueueLoopBtn[data-loop-mode="off"] {
  width: auto;
  min-width: 56px;
  padding: 0 10px;
  gap: 5px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

#playerQueueLoopBtn[data-loop-mode="off"] span {
  font-size: 11px;
  font-weight: 850;
}

.player-btn-small:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.lyrics-theater {
  --lyrics-theater-left: 260px;
  --lyrics-theater-right: 0px;
  --lyrics-theater-bottom: 78px;
  --lyrics-theater-bg-rgb: 212, 227, 250;
  --lyrics-theater-accent-rgb: 104, 142, 220;
  --lyrics-theater-glow-rgb: 153, 183, 238;
  --lyrics-theater-tint-rgb: 234, 245, 255;
  --lyrics-theater-overlay-rgb: 208, 223, 246;
  --lyrics-theater-text-rgb: 18, 28, 42;
  --lyrics-theater-muted-rgb: 79, 95, 122;
  --lyrics-theater-mesh-base-rgb: 4, 8, 18;
  --lyrics-theater-mesh-1-rgb: 130, 44, 72;
  --lyrics-theater-mesh-2-rgb: 36, 82, 152;
  --lyrics-theater-mesh-3-rgb: 92, 50, 150;
  --lyrics-theater-mesh-4-rgb: 12, 25, 58;
  --lyrics-theater-mesh-5-rgb: 154, 86, 126;
  position: fixed;
  top: 0;
  left: var(--lyrics-theater-left);
  right: var(--lyrics-theater-right);
  bottom: var(--lyrics-theater-bottom);
  z-index: 560;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.992);
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease, visibility 0s linear 0.52s;
  backdrop-filter: blur(12px);
  border-radius: var(--lyrics-theater-drag-radius, 0px) var(--lyrics-theater-drag-radius, 0px) 0 0;
  overflow: hidden;
}

.lyrics-theater.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
}

.lyrics-theater-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(72% 86% at 76% 84%, rgba(var(--lyrics-theater-glow-rgb), 0.5), rgba(var(--lyrics-theater-bg-rgb), 0.2) 42%, transparent 72%),
    radial-gradient(82% 92% at 14% 16%, rgba(var(--lyrics-theater-accent-rgb), 0.42), rgba(var(--lyrics-theater-bg-rgb), 0.58) 44%, transparent 78%),
    linear-gradient(125deg, rgba(var(--lyrics-theater-overlay-rgb), 0.92), rgba(var(--lyrics-theater-bg-rgb), 0.86) 46%, rgba(var(--lyrics-theater-tint-rgb), 0.8));
  background-size: 130% 130%;
  transition: background 0.78s cubic-bezier(0.22, 1, 0.36, 1);
  animation: lyricsTheaterBetaGradient 16s ease-in-out infinite alternate;
}

.lyrics-theater-liquid-canvas {
  display: none;
}

.lyrics-theater.has-liquid-background .lyrics-theater-liquid-canvas {
  display: block;
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  z-index: 0;
  opacity: 0.94;
  filter: blur(30px) saturate(1.2) contrast(0.98);
  transform: translateZ(0) scale(1.03);
}

.lyrics-theater.has-liquid-background[data-track-theme] .lyrics-theater-backdrop {
  background: linear-gradient(135deg, rgb(var(--lyrics-theater-mesh-base-rgb)), rgba(var(--lyrics-theater-mesh-4-rgb), 0.94));
  animation: none;
}

.lyrics-theater.has-liquid-background .lyrics-theater-backdrop::before,
.lyrics-theater.has-liquid-background .lyrics-theater-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  animation: none;
}

.lyrics-theater.has-liquid-background .lyrics-theater-backdrop::before {
  background:
    radial-gradient(80% 54% at 48% 42%, rgba(255, 255, 255, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 36%, rgba(0, 0, 0, 0.1));
  filter: none;
  opacity: 1;
}

.lyrics-theater.has-liquid-background .lyrics-theater-backdrop::after {
  background: radial-gradient(110% 78% at 50% 45%, transparent 42%, rgba(var(--lyrics-theater-mesh-base-rgb), 0.2) 100%);
  filter: none;
  opacity: 1;
}

.lyrics-theater.has-liquid-background.is-beta-fullscreen .lyrics-theater-liquid-canvas {
  opacity: 0.94;
  filter: blur(42px) saturate(0.94) contrast(1.08) brightness(0.96);
  transform: translateZ(0) scale(1.045);
}

.lyrics-theater.has-liquid-background.is-beta-fullscreen .lyrics-theater-backdrop::before {
  background:
    radial-gradient(62% 48% at 42% 43%, rgba(255, 244, 242, 0.09), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 32%, rgba(0, 0, 0, 0.2));
}

.lyrics-theater.has-liquid-background.is-beta-fullscreen .lyrics-theater-backdrop::after {
  background:
    radial-gradient(105% 78% at 43% 45%, transparent 30%, rgba(0, 0, 0, 0.34) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06), transparent 34%, rgba(0, 0, 0, 0.28) 100%);
}

.lyrics-theater-backdrop::before,
.lyrics-theater-backdrop::after {
  content: "";
  position: absolute;
  inset: -24%;
  pointer-events: none;
  background:
    radial-gradient(46% 34% at 26% 62%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(42% 38% at 78% 42%, rgba(var(--lyrics-theater-glow-rgb), 0.24), transparent 72%);
  filter: blur(30px);
  opacity: 0.68;
  animation: lyricsTheaterBetaWave 20s ease-in-out infinite alternate;
}

.lyrics-theater-backdrop::after {
  animation-duration: 26s;
  animation-direction: alternate-reverse;
  opacity: 0.48;
}

.lyrics-theater[data-track-theme="light"] .lyrics-theater-backdrop {
  background:
    radial-gradient(circle at 14% 13%, rgba(var(--lyrics-theater-glow-rgb), 0.46), rgba(var(--lyrics-theater-bg-rgb), 0.34) 56%, rgba(var(--lyrics-theater-overlay-rgb), 0.72) 100%),
    linear-gradient(180deg, rgba(var(--lyrics-theater-tint-rgb), 0.84), rgba(var(--lyrics-theater-overlay-rgb), 0.64));
}

.lyrics-theater[data-track-theme="dark"] .lyrics-theater-backdrop {
  background:
    radial-gradient(circle at 15% 16%, rgba(var(--lyrics-theater-glow-rgb), 0.5), rgba(var(--lyrics-theater-bg-rgb), 0.36) 52%, rgba(var(--lyrics-theater-overlay-rgb), 0.84) 100%),
    linear-gradient(180deg, rgba(var(--lyrics-theater-tint-rgb), 0.94), rgba(var(--lyrics-theater-overlay-rgb), 0.8));
}

.lyrics-theater-shell {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: rgb(var(--lyrics-theater-text-rgb));
  transition: color 0.5s ease;
}

.lyrics-theater-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 28px 14px;
}

.lyrics-theater-now-playing {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: rgba(var(--lyrics-theater-muted-rgb), 0.84);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-theater-mobile-now {
  display: none;
}

.lyrics-theater-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(var(--lyrics-theater-accent-rgb), 0.34);
  background: rgba(var(--lyrics-theater-overlay-rgb), 0.3);
  color: rgb(var(--lyrics-theater-text-rgb));
  cursor: pointer;
  transition: border-color 0.4s ease, background 0.4s ease, color 0.4s ease;
}

.lyrics-theater-content {
  min-height: 0;
  padding: 0 28px;
  position: relative;
}

.lyrics-theater-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8vh 0 12vh;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
}

.lyrics-theater-scroll::-webkit-scrollbar {
  display: none;
}

.lyrics-theater-empty {
  font-size: 19px;
  line-height: 1.5;
  color: rgba(var(--lyrics-theater-text-rgb), 0.72);
  max-width: 680px;
}

.lyrics-theater-lines {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.lyrics-theater-attribution {
  margin-top: clamp(44px, 9vh, 96px);
  padding: 18px 0 clamp(24px, 5vh, 56px);
  color: rgba(var(--lyrics-theater-muted-rgb), 0.82);
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1.35;
}

.lyrics-theater.is-beta-fullscreen .lyrics-theater-attribution {
  margin-top: clamp(64px, 12vh, 130px);
}

.lyrics-theater-line {
  max-width: min(74ch, 78%);
  font-size: clamp(30px, 3vw, 52px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
  color: rgba(var(--lyrics-theater-text-rgb), 0.42);
  opacity: 0.34;
  filter: blur(1.4px);
  transform: translateY(calc(var(--lyrics-line-distance, 0) * 14px)) scale(0.98);
  transition:
    color 0.42s ease,
    transform 0.78s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.68s ease,
    filter 0.68s ease;
  transition-delay: var(--lyrics-line-step-delay, 0ms);
}

.lyrics-theater-line.is-tag {
  font-size: clamp(18px, 1.45vw, 26px);
  font-style: italic;
  letter-spacing: 0;
  color: rgba(var(--lyrics-theater-text-rgb), 0.58);
}

.lyrics-theater-line.is-empty {
  min-height: 0.8em;
  opacity: 0.42;
}

.lyrics-theater-line.is-past {
  opacity: 0.16;
  filter: blur(7px);
  transform: translateY(calc(var(--lyrics-line-distance, 1) * -22px)) scale(0.94);
}

.lyrics-theater-line.is-future {
  opacity: 0.28;
  filter: blur(2px);
  transform: translateY(calc(var(--lyrics-line-distance, 1) * 18px)) scale(0.96);
}

.lyrics-theater-line.is-nearby {
  opacity: 0.48;
  filter: blur(0.6px);
}

.lyrics-theater-line.is-tag.is-past,
.lyrics-theater-line.is-tag.is-future {
  transform: translateX(0) scale(0.99);
  opacity: 0.48;
}

.lyrics-theater-line.is-current {
  color: rgb(var(--lyrics-theater-text-rgb));
  font-weight: 850;
  filter: blur(0);
  transform: translateY(0) scale(1);
  opacity: 1;
  animation: none;
  transition: color 0.18s ease;
  transition-delay: 0ms !important;
}

.lyrics-theater-line.is-line-progress {
  color: rgb(var(--lyrics-theater-text-rgb)) !important;
  opacity: 1 !important;
  filter: blur(0) drop-shadow(0 0 12px rgba(var(--lyrics-theater-glow-rgb), 0.24)) !important;
  transform: translateY(0) scale(1) !important;
}

.lyrics-theater-line.is-clickable {
  cursor: pointer;
}

.lyrics-theater-line.is-clickable:hover {
  opacity: 0.86;
}

.lyrics-theater-word {
  color: inherit;
  transition: color 0.18s ease, text-shadow 0.24s ease;
}

.lyrics-theater-word-base {
  color: inherit;
}

.lyrics-theater-word-fill {
  display: none;
}

.lyrics-theater-line.is-word-progress {
  color: rgba(var(--lyrics-theater-text-rgb), 0.38);
}

.lyrics-theater-line.is-word-progress .lyrics-theater-word {
  --word-progress: 0%;
  --word-progress-scale: 0;
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    rgb(var(--lyrics-theater-text-rgb)) calc(var(--word-progress) - 8%),
    rgba(var(--lyrics-theater-text-rgb), 0.88) var(--word-progress),
    rgba(var(--lyrics-theater-text-rgb), 0.56) calc(var(--word-progress) + 6%),
    rgba(var(--lyrics-theater-text-rgb), 0.3) calc(var(--word-progress) + 14%),
    rgba(var(--lyrics-theater-text-rgb), 0.3) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  position: relative;
  isolation: isolate;
}

.lyrics-theater-line.is-word-progress .lyrics-theater-word.is-sung {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: none;
}

.lyrics-theater-line.is-word-progress .lyrics-theater-word.is-active-word {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: none;
}

.lyrics-theater-line.is-word-progress .lyrics-theater-word.is-active-word::after {
  content: attr(aria-label);
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(
    ellipse 24% 125% at var(--word-progress) 50%,
    rgba(var(--lyrics-theater-glow-rgb), 1) 0%,
    rgba(var(--lyrics-theater-glow-rgb), 0.72) 30%,
    rgba(var(--lyrics-theater-glow-rgb), 0.24) 58%,
    transparent 78%
  );
  background-clip: text;
  -webkit-background-clip: text;
  mix-blend-mode: screen;
  filter: blur(4px) drop-shadow(0 0 8px rgba(var(--lyrics-theater-glow-rgb), 0.38));
  opacity: 0.82;
  pointer-events: none;
  transform: scale(1.01);
  transform-origin: left center;
}

.lyrics-theater-translation {
  margin-top: 8px;
  font-size: clamp(0.62em, 0.74em, 0.78em);
  line-height: 1.35;
  color: rgba(var(--lyrics-theater-muted-rgb), 0.76);
  opacity: 0.86;
  font-weight: 500;
}

.lyrics-theater-line.is-current .lyrics-theater-translation {
  color: rgba(var(--lyrics-theater-muted-rgb), 0.9);
  opacity: 0.95;
}

.desktop-lyrics-translate-btn.is-loading i {
  animation: lyricsTranslateJump 0.72s cubic-bezier(0.2, 0.8, 0.28, 1) infinite;
}

@keyframes lyricsTranslateJump {
  0%, 100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-5px);
  }
}

.lyrics-theater[data-track-theme="dark"] {
  color-scheme: dark;
}

.lyrics-theater[data-track-theme="light"] {
  color-scheme: light;
}

@property --word-progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.lyrics-theater-flight-dot {
  position: fixed;
  left: var(--lyrics-flight-x, 50vw);
  top: var(--lyrics-flight-y, 48px);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgb(var(--lyrics-theater-accent-rgb));
  box-shadow: 0 0 0 10px rgba(var(--lyrics-theater-accent-rgb), 0.14), 0 0 42px rgba(var(--lyrics-theater-glow-rgb), 0.7);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  z-index: 1500;
}

.lyrics-theater.is-beta-launching .lyrics-theater-flight-dot {
  opacity: 1;
  animation: lyricsTheaterFlightDot 0.68s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lyrics-theater-beta-now {
  display: none;
}

@media (min-width: 1024px) {
  .lyrics-theater.is-beta-preflight .lyrics-theater-shell {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(18px) scale(0.985);
    transition: opacity 0.24s ease, filter 0.26s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }

  .lyrics-theater.is-beta-fullscreen,
  .lyrics-theater.is-beta-launching {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1350;
  }

  .lyrics-theater.is-beta-fullscreen {
    transform: none;
    backdrop-filter: blur(12px);
  }

  .lyrics-theater.is-beta-launching .lyrics-theater-shell {
    opacity: 0;
    pointer-events: none;
  }

  .lyrics-theater.is-beta-launching .lyrics-theater-backdrop {
    opacity: 0;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-backdrop {
    overflow: hidden;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-header {
    height: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-shell {
    grid-template-rows: 0 minmax(0, 1fr) auto;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-content {
    display: grid;
    grid-template-columns: minmax(280px, 33vw) minmax(0, 1fr);
    gap: clamp(42px, 6vw, 98px);
    align-items: center;
    min-height: 0;
    padding: calc(var(--desktop-top-nav-height, 64px) + 48px) clamp(48px, 7vw, 132px) 58px;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-beta-now {
    display: grid;
    gap: 0;
    justify-items: center;
    align-self: center;
    position: relative;
    z-index: 4;
    pointer-events: auto;
    animation: lyricsTheaterBetaMetaIn 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .lyrics-theater-beta-cover {
    width: min(28vw, 370px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 22px 52px rgba(3, 10, 24, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.12);
  }

  .lyrics-theater-beta-progress-row {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: auto auto;
    gap: 7px;
    width: min(28vw, 370px);
    color: rgba(var(--lyrics-theater-text-rgb), 0.66);
    font-size: 12px;
    font-weight: 650;
    margin-top: 18px;
    cursor: default;
    touch-action: none;
    user-select: none;
    padding: 0;
  }

  .lyrics-theater-beta-progress-row span:last-of-type {
    text-align: right;
  }

  .lyrics-theater-beta-progress-row > span {
    grid-row: 2;
  }

  .lyrics-theater-beta-progress {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    height: 4px;
    border-radius: 999px;
    overflow: visible;
    background: rgba(var(--lyrics-theater-text-rgb), 0.42);
    cursor: pointer;
    touch-action: none;
    padding: 0;
    transition: transform 0.18s ease, background 0.18s ease;
  }

  .lyrics-theater-beta-progress::before {
    content: none;
  }

  .lyrics-theater-beta-progress:hover,
  .lyrics-theater-beta-progress.is-scrubbing,
  .lyrics-theater-beta-progress-row.is-scrubbing .lyrics-theater-beta-progress {
    transform: none;
  }

  .lyrics-theater-beta-progress:hover::before,
  .lyrics-theater-beta-progress.is-scrubbing::before,
  .lyrics-theater-beta-progress-row.is-scrubbing .lyrics-theater-beta-progress::before {
    content: none;
  }

  .lyrics-theater-beta-progress:hover,
  .lyrics-theater-beta-progress.is-scrubbing,
  .lyrics-theater-beta-progress-row.is-scrubbing .lyrics-theater-beta-progress {
    background: rgba(var(--lyrics-theater-text-rgb), 0.5);
  }

  .lyrics-theater-beta-progress-fill {
    position: relative;
    z-index: 1;
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    overflow: visible;
    background: rgb(var(--lyrics-theater-text-rgb));
    transition: width 0.16s linear;
  }

  .lyrics-theater-beta-progress-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgb(var(--lyrics-theater-text-rgb));
    box-shadow: 0 2px 8px rgba(3, 10, 24, .22);
    transform: translate(50%, -50%);
  }

  .lyrics-theater-beta-controls {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
    width: min(28vw, 370px);
    margin-top: 17px;
    padding: 0 40px;
  }

  .lyrics-theater-beta-control {
    display: inline-grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: rgb(var(--lyrics-theater-text-rgb));
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    font-size: 22px;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, opacity .16s ease;
  }

  .lyrics-theater-beta-control:hover:not(:disabled) {
    transform: scale(1.08);
    background: transparent;
  }

  .lyrics-theater-beta-control:active:not(:disabled) {
    transform: scale(.96);
  }

  .lyrics-theater-beta-control:focus-visible {
    outline: 2px solid rgb(var(--lyrics-theater-text-rgb));
    outline-offset: 3px;
  }

  .lyrics-theater-beta-control:disabled {
    opacity: .38;
    cursor: not-allowed;
  }

  .lyrics-theater-beta-play {
    width: 52px;
    height: 52px;
    border-color: transparent;
    color: rgb(var(--lyrics-theater-text-rgb));
    background: transparent;
    font-size: 34px;
  }

  .lyrics-theater-beta-play:hover:not(:disabled) {
    background: transparent;
  }

  .lyrics-theater-beta-meta {
    width: min(28vw, 370px);
    min-width: 0;
    margin-top: 18px;
    text-align: left;
  }

  .lyrics-theater-beta-meta h2 {
    margin: 0;
    overflow: hidden;
    color: rgb(var(--lyrics-theater-text-rgb));
    font-size: clamp(17px, 1.25vw, 22px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lyrics-theater-beta-meta p {
    margin: 5px 0 0;
    overflow: hidden;
    color: rgba(var(--lyrics-theater-muted-rgb), 0.88);
    font-size: clamp(13px, .9vw, 16px);
    line-height: 1.2;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-scroll {
    position: relative;
    z-index: 1;
    padding: 29vh 0 32vh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 62%, transparent 92%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 62%, transparent 92%);
    animation: lyricsTheaterBetaLyricsIn 0.72s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-lines {
    gap: clamp(20px, 3vh, 38px);
    transform: translateZ(0);
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line {
    max-width: min(760px, 70vw);
    font-size: clamp(28px, 3.15vw, 54px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0;
    opacity: 0.34;
    filter: blur(1.6px);
    transform: translateY(calc(var(--lyrics-line-distance, 0) * 15px)) scale(0.98);
    transition:
      transform 0.82s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.72s ease,
      color 0.44s ease,
      filter 0.72s ease;
    transition-delay: var(--lyrics-line-step-delay, 0ms);
    will-change: transform, opacity, filter;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-past {
    opacity: 0.16;
    filter: blur(7px);
    transform: translateY(calc(var(--lyrics-line-distance, 1) * -24px)) scale(0.94);
  }

  .lyrics-theater.is-beta-fullscreen:not(.is-manual-scroll) .lyrics-theater-line.is-past:not(.is-tag):not(.is-empty) {
    opacity: 0 !important;
    filter: blur(14px) !important;
    transform: translateY(calc(var(--lyrics-line-distance, 1) * -36px - 28px)) scale(0.9) !important;
    transition-delay: calc(240ms + var(--lyrics-line-step-delay, 0ms)) !important;
    pointer-events: none !important;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-tag,
  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-tag.is-past,
  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-tag.is-future {
    opacity: 0.54 !important;
    filter: blur(0.4px) !important;
    transform: translateY(calc(var(--lyrics-line-distance, 0) * 8px)) scale(0.98) !important;
    pointer-events: none !important;
  }

  .lyrics-theater.is-beta-fullscreen:not(.is-manual-scroll) .lyrics-theater-line.is-tag.is-section-tag-expired {
    opacity: 0 !important;
    filter: blur(14px) !important;
    transform: translateY(calc(var(--lyrics-line-distance, 1) * -30px - 20px)) scale(0.9) !important;
    transition-delay: calc(260ms + var(--lyrics-line-step-delay, 0ms)) !important;
    pointer-events: none !important;
  }

  .lyrics-theater.is-beta-fullscreen.is-manual-scroll .lyrics-theater-line.is-past {
    opacity: 0.3 !important;
    filter: blur(3px) !important;
    transform: translateY(calc(var(--lyrics-line-distance, 1) * -14px)) scale(0.96) !important;
    pointer-events: auto !important;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-future {
    opacity: 0.28;
    filter: blur(2px);
    transform: translateY(calc(var(--lyrics-line-distance, 1) * 20px)) scale(0.96);
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-nearby {
    opacity: 0.48;
    filter: blur(0.7px);
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-current {
    color: rgb(var(--lyrics-theater-text-rgb));
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    animation: none !important;
    transition: color 0.18s ease !important;
    transition-delay: 0ms !important;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-line-progress {
    color: rgb(var(--lyrics-theater-text-rgb)) !important;
    opacity: 1 !important;
    filter: blur(0) drop-shadow(0 0 12px rgba(var(--lyrics-theater-glow-rgb), 0.24)) !important;
    transform: translateY(0) scale(1) !important;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-word-progress .lyrics-theater-word {
    --word-progress: 0%;
    --word-progress-scale: 0;
    display: inline-block !important;
    position: relative !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(
      90deg,
      rgb(var(--lyrics-theater-text-rgb)) calc(var(--word-progress) - 8%),
      rgba(var(--lyrics-theater-text-rgb), 0.88) var(--word-progress),
      rgba(var(--lyrics-theater-text-rgb), 0.56) calc(var(--word-progress) + 6%),
      rgba(var(--lyrics-theater-text-rgb), 0.3) calc(var(--word-progress) + 14%),
      rgba(var(--lyrics-theater-text-rgb), 0.3) 100%
    ) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    filter: none !important;
    text-shadow: none !important;
    vertical-align: bottom !important;
    transition: filter 0.12s linear !important;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-word-progress .lyrics-theater-word-base {
    display: contents !important;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-word-progress .lyrics-theater-word-fill {
    display: none !important;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-word-progress .lyrics-theater-word.is-active-word {
    transform: translateZ(0) !important;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-line.is-word-progress .lyrics-theater-word.is-sung {
    display: inline-block !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    filter: none !important;
    text-shadow: none !important;
    transition: none !important;
    animation: none !important;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-footer {
    position: fixed;
    right: clamp(24px, 4vw, 72px);
    bottom: 26px;
    padding: 0;
    z-index: 2;
  }

  .lyrics-theater.is-beta-fullscreen .lyrics-theater-go-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-color: rgba(var(--lyrics-theater-text-rgb), 0.22);
    background: rgba(var(--lyrics-theater-overlay-rgb), 0.38);
    box-shadow: 0 18px 34px rgba(3, 10, 24, 0.18);
    backdrop-filter: blur(18px);
  }
}

@keyframes lyricsTheaterFlightDot {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  55% {
    transform: translate(calc(50vw - var(--lyrics-flight-x, 50vw) - 50%), calc(50vh - var(--lyrics-flight-y, 48px) - 50%)) scale(7);
    opacity: 0.92;
  }
  100% {
    transform: translate(calc(50vw - var(--lyrics-flight-x, 50vw) - 50%), calc(50vh - var(--lyrics-flight-y, 48px) - 50%)) scale(220);
    opacity: 0;
  }
}

@keyframes lyricsTheaterBetaGradient {
  0% {
    background-position: 0% 44%;
    filter: hue-rotate(0deg) saturate(1.08);
  }
  100% {
    background-position: 100% 58%;
    filter: hue-rotate(8deg) saturate(1.18);
  }
}

@keyframes lyricsTheaterBetaWave {
  0% {
    transform: translate3d(-3%, 2%, 0) rotate(0deg) scale(1);
  }
  100% {
    transform: translate3d(4%, -4%, 0) rotate(8deg) scale(1.08);
  }
}

@keyframes lyricsTheaterMeshDrift {
  0% {
    background-position: 42% 48%, 86% 48%, 8% 86%, 55% 8%, 50% 50%;
    filter: saturate(1.12) contrast(1.02);
  }
  45% {
    background-position: 54% 42%, 76% 58%, 16% 72%, 46% 20%, 50% 50%;
    filter: saturate(1.28) contrast(1.05);
  }
  100% {
    background-position: 32% 58%, 92% 42%, 2% 78%, 62% 14%, 50% 50%;
    filter: saturate(1.18) contrast(1.03);
  }
}

@keyframes lyricsTheaterMeshBloomA {
  0% {
    border-radius: 48% 52% 55% 45% / 52% 44% 56% 48%;
    transform: translate3d(-5%, 2%, 0) rotate(-2deg) scale(1.04);
  }
  48% {
    border-radius: 56% 44% 46% 54% / 46% 56% 44% 54%;
    transform: translate3d(4%, -4%, 0) rotate(3deg) scale(1.18);
  }
  100% {
    border-radius: 44% 56% 58% 42% / 58% 42% 56% 44%;
    transform: translate3d(8%, 3%, 0) rotate(1deg) scale(1.1);
  }
}

@keyframes lyricsTheaterMeshBloomB {
  0% {
    border-radius: 54% 46% 48% 52% / 44% 56% 46% 54%;
    transform: translate3d(4%, -3%, 0) rotate(2deg) scale(1.08);
  }
  52% {
    border-radius: 46% 54% 58% 42% / 56% 44% 54% 46%;
    transform: translate3d(-5%, 5%, 0) rotate(-3deg) scale(1.2);
  }
  100% {
    border-radius: 60% 40% 44% 56% / 48% 54% 42% 58%;
    transform: translate3d(-2%, -6%, 0) rotate(-1deg) scale(1.12);
  }
}

@keyframes lyricsTheaterBetaMetaIn {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes lyricsTheaterBetaLyricsIn {
  0% {
    opacity: 0;
    transform: translateX(28px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes lyricsTheaterBetaWordSwing {
  0% {
    transform: translateY(6px) rotate(-1deg) scale(0.96);
  }
  70% {
    transform: translateY(-2px) rotate(1deg) scale(1.08);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

.lyrics-theater-footer {
  padding: 10px 28px 22px;
  display: flex;
  justify-content: flex-start;
}

.lyrics-theater-mobile-player {
  display: none;
}

.lyrics-theater-mobile-player-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  width: 100%;
}

.lyrics-theater-mobile-player-time {
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--player-expanded-muted-rgb), 0.94);
  min-width: 34px;
  grid-row: 2;
}

.lyrics-theater-mobile-player-time:first-child {
  text-align: left;
}

.lyrics-theater-mobile-player-time:last-child {
  text-align: right;
}

.lyrics-theater-mobile-player-progress {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(var(--player-expanded-accent-rgb), 0.2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  touch-action: none;
  transition: transform 0.18s ease, background 0.5s ease;
}

.lyrics-theater-mobile-player-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgb(var(--player-expanded-progress-rgb));
  box-shadow: 0 0 10px rgba(var(--player-expanded-progress-rgb), 0.46);
  transition: width 0.14s linear, background 0.56s ease, box-shadow 0.56s ease;
}

.lyrics-theater-mobile-player-progress.is-scrubbing {
  transform: scaleY(1.28);
}

.lyrics-theater-mobile-player-progress.is-scrubbing .lyrics-theater-mobile-player-progress-fill {
  transition: none;
}

.lyrics-theater-mobile-player-play {
  border: 1px solid rgba(var(--player-expanded-control-rgb), 0.72);
  background: rgb(var(--player-expanded-control-rgb));
  color: rgb(var(--player-expanded-control-icon-rgb, 255, 255, 255));
  border-radius: 999px;
  width: 72px;
  height: 72px;
  min-height: 72px;
  padding: 0;
  font-size: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  box-shadow: 0 18px 36px rgba(var(--player-expanded-control-rgb), 0.32);
  transition: transform 0.22s ease, background 0.36s ease, border-color 0.36s ease, box-shadow 0.36s ease;
}

.lyrics-theater-mobile-player-play:active {
  transform: scale(0.985);
}

.lyrics-theater-mobile-player-play.is-playing {
  background: rgba(var(--player-expanded-control-rgb), 0.88);
}

.lyrics-theater-mobile-player-play.is-playing i {
  color: #fff;
}

.lyrics-theater-mobile-player-controls {
  display: none;
}

.lyrics-theater-mobile-control {
  border: 0;
  border-radius: 999px;
  background: rgba(var(--lyrics-theater-text-rgb), 0.12);
  color: rgb(var(--lyrics-theater-text-rgb));
  cursor: pointer;
}

.lyrics-theater-go-current {
  border: 1px solid rgba(var(--lyrics-theater-accent-rgb), 0.34);
  background: rgba(var(--lyrics-theater-overlay-rgb), 0.36);
  color: rgb(var(--lyrics-theater-text-rgb));
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}

.lyrics-theater-go-current.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

body.lyrics-theater-open .main-content {
  overflow: hidden;
}

@media (min-width: 1024px) {
  body.lyrics-theater-open {
    overflow: hidden;
  }
}

@media (max-width: 1023px) {
  .lyrics-theater {
    left: 0 !important;
    right: 0 !important;
    top: 0;
    bottom: 0 !important;
    z-index: 2100;
    backdrop-filter: blur(22px) saturate(128%);
    border-radius: var(--lyrics-theater-drag-radius, 0px) var(--lyrics-theater-drag-radius, 0px) 0 0;
  }

  .lyrics-theater:not(.is-open) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
  }

  .lyrics-theater-header {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .lyrics-theater-shell {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .lyrics-theater-mobile-now {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto 42px;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 4;
    padding: calc(28px + env(safe-area-inset-top)) 18px 14px;
    cursor: pointer;
    animation: lyricsTheaterBetaMetaIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .lyrics-theater-mobile-grabber {
    position: absolute;
    top: calc(9px + env(safe-area-inset-top));
    left: 50%;
    width: 48px;
    height: 5px;
    border-radius: 999px;
    background: rgba(var(--lyrics-theater-text-rgb), 0.36);
    transform: translateX(-50%);
  }

  .lyrics-theater-mobile-cover {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.16);
  }

  .lyrics-theater-mobile-meta {
    min-width: 0;
  }

  .lyrics-theater-mobile-title {
    color: rgb(var(--lyrics-theater-text-rgb));
    font-size: 15px;
    line-height: 1.15;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lyrics-theater-mobile-artist {
    margin-top: 3px;
    color: rgba(var(--lyrics-theater-muted-rgb), 0.9);
    font-size: 13px;
    line-height: 1.15;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.lyrics-theater-mobile-add,
.lyrics-theater-mobile-translate,
.lyrics-theater-mobile-share {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--lyrics-theater-text-rgb), 0.1);
  color: rgb(var(--lyrics-theater-text-rgb));
  box-shadow: none;
  backdrop-filter: blur(12px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 800;
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1), min-width 0.34s cubic-bezier(0.22, 1, 0.36, 1), padding 0.34s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.34s cubic-bezier(0.22, 1, 0.36, 1), background 0.34s ease, color 0.34s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.lyrics-theater-mobile-share {
  width: 104px;
  min-width: 104px;
  padding: 0 20px;
  justify-self: end;
  overflow: hidden;
}

.lyrics-theater-mobile-share span {
  display: inline-flex;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.lyrics-theater-mobile-share.is-selecting {
  width: 116px;
  min-width: 116px;
  background: rgba(var(--lyrics-theater-text-rgb), 0.16);
}

.lyrics-theater-mobile-share.is-confirm {
  width: 132px;
  min-width: 132px;
  background: rgb(var(--lyrics-theater-text-rgb));
  color: rgb(var(--lyrics-theater-bg-rgb));
}

.lyrics-theater-mobile-share.is-morphing {
  animation: lyricsShareButtonMorph 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.lyrics-theater-mobile-share.is-morphing i,
.lyrics-theater-mobile-share.is-morphing span {
  animation: lyricsShareButtonContentMorph 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.lyrics-theater-mobile-add i,
.lyrics-theater-mobile-add svg,
.lyrics-theater-mobile-translate i,
.lyrics-theater-mobile-translate svg,
.lyrics-theater-mobile-share i {
  font-size: 18px;
  line-height: 1;
}

.lyrics-theater-mobile-add i,
.lyrics-theater-mobile-add svg {
  font-size: 24px;
}

.lyrics-theater-mobile-translate.active {
  background: rgb(var(--lyrics-theater-text-rgb));
  color: rgb(var(--lyrics-theater-bg-rgb));
}

.lyrics-theater-mobile-translate.is-loading i {
  animation: lyricsTranslateJump 0.72s cubic-bezier(0.2, 0.8, 0.28, 1) infinite;
}

@keyframes lyricsShareButtonMorph {
  0% { transform: scale(1); }
  38% { transform: scale(0.92); border-radius: 18px; }
  100% { transform: scale(1); }
}

@keyframes lyricsShareButtonContentMorph {
  0% { opacity: 0.42; transform: translateY(4px) scale(0.92); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

  .lyrics-theater-content {
    padding: 0 20px;
  }

  .lyrics-theater-scroll {
    padding: 10vh 0 calc(28vh + env(safe-area-inset-bottom));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 58%, transparent 88%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 58%, transparent 88%);
  }

  .lyrics-theater-lines {
    gap: clamp(18px, 4vh, 34px);
  }

  .lyrics-theater-line {
    max-width: min(100%, 85vw);
    font-size: clamp(30px, 9.5vw, 56px);
    line-height: 1.08;
    font-weight: 850;
    word-break: break-word;
    overflow-wrap: break-word;
    transform: translateY(calc(var(--lyrics-line-distance, 0) * 18px)) scale(0.98);
    transition:
      transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.62s ease,
      filter 0.62s ease,
      color 0.34s ease;
  }

  .lyrics-theater-line.is-past,
  .lyrics-theater-line.is-future,
  .lyrics-theater-line.is-nearby,
  .lyrics-theater-line.is-current,
  .lyrics-theater-line.is-tag.is-past,
  .lyrics-theater-line.is-tag.is-future {
    animation: none;
  }

  .lyrics-theater-line.is-past {
    opacity: 0.1;
    filter: blur(8px);
    transform: translateY(calc(var(--lyrics-line-distance, 1) * -26px)) scale(0.93);
  }

  .lyrics-theater-line.is-future {
    opacity: 0.22;
    filter: blur(4px);
    transform: translateY(calc(var(--lyrics-line-distance, 1) * 28px)) scale(0.96);
  }

  .lyrics-theater-line.is-nearby {
    opacity: 0.38;
    filter: blur(2px);
  }

  .lyrics-theater-line.is-current {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }

  .lyrics-theater.is-share-lyrics-mode .lyrics-theater-scroll {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .lyrics-theater.is-share-lyrics-mode .lyrics-theater-line {
    opacity: 0.76 !important;
    filter: none !important;
    transform: none !important;
    color: rgba(var(--lyrics-theater-text-rgb), 0.78) !important;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
  }

  .lyrics-theater.is-share-lyrics-mode .lyrics-theater-line.is-share-selectable {
    cursor: pointer;
  }

  .lyrics-theater.is-share-lyrics-mode .lyrics-theater-line.is-share-selected {
    opacity: 1 !important;
    color: rgb(var(--lyrics-theater-text-rgb)) !important;
    border-color: rgba(var(--lyrics-theater-text-rgb), 0.24);
    background: rgba(var(--lyrics-theater-text-rgb), 0.12);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
  }

  .lyrics-theater-footer {
    padding: 8px 24px calc(34px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
  }

  .lyrics-theater-go-current {
    order: 1;
    width: 100%;
    justify-self: stretch;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .lyrics-theater-go-current:not(.visible) {
    display: none;
  }

  .lyrics-theater-go-current.visible {
    display: inline-flex;
  }

  .lyrics-theater-mobile-player {
    order: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
    align-self: stretch;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    padding: 0;
  }

  .lyrics-theater-mobile-player-progress-row {
    grid-column: 1 / -1;
  }

  .lyrics-theater-mobile-player-play {
    grid-column: 2;
    grid-row: 2;
    width: 76px;
    height: 76px;
    min-height: 76px;
    border: 0;
    background: rgba(var(--lyrics-theater-text-rgb), 0.94);
    color: rgba(var(--lyrics-theater-bg-rgb), 0.98);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
  }

  .lyrics-theater-mobile-player-controls {
    display: contents;
  }

  .lyrics-theater-mobile-control {
    width: 58px;
    height: 58px;
    align-self: center;
    justify-self: center;
    font-size: 22px;
    background: rgba(var(--lyrics-theater-text-rgb), 0.1);
    color: rgb(var(--lyrics-theater-text-rgb));
    backdrop-filter: blur(16px);
    transition: transform 0.18s ease, background 0.2s ease;
  }

  #lyricsTheaterMobilePrevBtn {
    grid-column: 1;
    grid-row: 2;
  }

  #lyricsTheaterMobileNextBtn {
    grid-column: 3;
    grid-row: 2;
  }

  .lyrics-theater-mobile-control:active,
  .lyrics-theater-mobile-add:active,
  .lyrics-theater-mobile-translate:active,
  .lyrics-theater-mobile-player-play:active {
    transform: scale(0.96);
  }

  body.lyrics-theater-open,
  body.lyrics-theater-mobile-open {
    overflow: hidden;
  }
}

.volume-container {
  position: relative;
}

#volumeControl {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 210px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 10px 24px rgba(12, 12, 14, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: all 0.2s ease;
  z-index: 150;
}

#volumeControl.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

#volumeSlider {
  flex: 1;
  margin: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--blue) 0%, var(--blue) var(--volume-percent, 100%), var(--border) var(--volume-percent, 100%), var(--border) 100%);
  appearance: none;
  -webkit-appearance: none;
}

#volumeSlider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: -5px;
  border: 2px solid var(--white);
  box-shadow: 0 2px 6px rgba(12, 12, 14, 0.18);
}

#volumeSlider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}

#volumeSlider::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--blue);
}

#volumeSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
}

.volume-display {
  min-width: 36px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
}

.volume-display::after {
  content: '%';
  color: var(--text-secondary);
  margin-left: 1px;
}

.claim-selected {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}

.connections-page,
.notifications-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 0;
}

.connections-header h1,
.notifications-header h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

.connections-header p,
.notifications-header p {
  color: var(--text-secondary);
  font-size: 15px;
}

.connections-header p a {
  color: var(--blue);
  text-decoration: none;
}

.connections-list,
.notifications-list-page {
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}

.connection-item {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.connection-item:last-child,
.notifications-item-page:last-child {
  border-bottom: none;
}

.connection-main {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--black);
  min-width: 0;
}

.connection-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 38px;
  flex-shrink: 0;
}

.connection-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.connection-details {
  min-width: 0;
}

.connection-name {
  font-size: 15px;
  font-weight: 700;
}

.connection-handle {
  font-size: 13px;
  color: var(--muted);
}

.connection-meta,
.connection-proof {
  font-size: 12px;
  color: var(--text-secondary);
}

.connection-follow-btn {
  padding: 8px 14px;
}

.notifications-filters {
  margin-top: 18px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

.notifications-filter-chip {
  border: 1px solid var(--border);
  background: #f7f9ff;
  color: var(--black);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.notifications-filter-chip strong {
  min-width: 18px;
  text-align: center;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 11px;
  background: rgba(26, 92, 255, 0.12);
  color: var(--blue);
}

.notifications-filter-chip:hover {
  border-color: rgba(26, 92, 255, 0.45);
  background: rgba(26, 92, 255, 0.1);
}

.notifications-filter-chip.is-active {
  border-color: var(--blue);
  background: rgba(26, 92, 255, 0.14);
  color: var(--blue);
}

.notifications-empty-filter {
  margin-top: 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 18px;
  color: var(--text-secondary);
  background: rgba(26, 92, 255, 0.04);
}

.notifications-item-page {
  display: block;
  text-decoration: none;
  color: var(--black);
  padding: 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}

.notifications-item-page[hidden] {
  display: none !important;
}

.notifications-item-page:hover {
  background: rgba(26, 92, 255, 0.08);
}

.notifications-item-page.unread {
  background: rgba(26, 92, 255, 0.1);
}

.notifications-item-message {
  font-size: 14px;
  margin-bottom: 4px;
}

.notifications-item-time {
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }

  .nav-menu {
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 8px;
  }

  .hero {
    padding: 60px 16px;
  }

  .form-container h2 {
    font-size: 24px;
  }

  .profile-header {
    padding: 0 16px 24px;
  }

  .song-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .song-cover-large {
    max-width: 280px;
  }

  .discovery-container,
  .playlists-container,
  .artist-hub-container,
  .settings-container,
  .upload-container {
    padding: 24px 16px;
  }

  .lyrics-editor-header {
    flex-direction: column;
    align-items: stretch;
  }

  .lyrics-ai-sync-card {
    align-items: stretch;
    flex-direction: column;
  }

  .lyrics-ai-sync-card .btn {
    justify-content: center;
    width: 100%;
  }

  .lyrics-ai-sync-progress {
    width: 100%;
  }

  .lyrics-mobile-send-wrap {
    display: block;
    margin-bottom: 12px;
  }

  .lyrics-send-btn {
    width: 100%;
    justify-content: center;
  }

  .lyrics-transcribe-input {
    min-height: 48vh;
    font-size: 16px;
  }

  .lyrics-sync-list {
    max-height: 46vh;
  }

  .lyrics-sync-row {
    grid-template-columns: 92px 1fr;
    gap: 10px;
    padding: 10px 8px;
  }

  .lyrics-sync-row-text {
    font-size: 15px;
  }

  #word-sync-tab .lyrics-word-sync-list,
  #word-sync-tab .lyrics-sync-controls {
    display: none;
  }

  #word-sync-tab .lyrics-word-sync-mobile {
    display: grid;
    gap: 10px;
  }

  .discovery-header h1,
  .playlists-header h1,
  .hub-header h1,
  .settings-header h1,
  .upload-header h1 {
    font-size: 24px;
  }

  .track-card-image-wrapper {
    aspect-ratio: 1;
  }

  .modal-content {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .nav-brand {
    font-size: 18px;
  }

  .nav-menu {
    gap: 4px;
  }

  .nav-link {
    font-size: 12px;
    padding: 6px 8px;
  }

  .form-container h2 {
    font-size: 20px;
  }

  .hero h1 {
    font-size: 24px;
  }

  .grid-container,
  .playlists-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
  }

  .playlist-header {
    grid-template-columns: 1fr;
  }

  .mobile-top-blend-playlist .playlist-header {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
  }

  .mobile-top-blend-playlist .playlist-cover-large {
    width: 78px;
    height: 78px;
  }

  .tracks-header,
  .track-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .tracks-header,
  .track-row {
    padding-left: 12px;
    padding-right: 12px;
  }

  .track-row .track-actions {
    gap: 4px;
  }

  .profile-info {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 12px;
  }

  .profile-details {
    grid-column: 2;
  }

  .profile-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .profile-actions .follow-btn {
    width: auto;
    justify-content: center;
  }

  .profile-avatar {
    width: 66px;
    height: 66px;
  }

  .player-wrapper {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }
}

.player-expand-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  display: none;
}

.player-collapsed {
  grid-template-columns: 1fr auto !important;
  padding: 12px 24px !important;
}

.player-collapsed .player-track-info {
  flex: 1;
  cursor: pointer;
}

.player-collapsed .player-center,
.player-collapsed .player-right {
  display: none;
}

.player-collapsed .player-expand-btn {
  display: block;
}

.player-expanded-panel {
  --player-expanded-bg-rgb: 214, 229, 251;
  --player-expanded-accent-rgb: 100, 136, 216;
  --player-expanded-glow-rgb: 147, 176, 233;
  --player-expanded-tint-rgb: 234, 245, 255;
  --player-expanded-overlay-rgb: 212, 226, 247;
  --player-expanded-text-rgb: 15, 22, 36;
  --player-expanded-muted-rgb: 69, 82, 104;
  --player-expanded-control-rgb: 86, 124, 205;
  --player-expanded-progress-rgb: 102, 140, 219;
  --player-expanded-artist-rgb: 64, 95, 166;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(var(--player-expanded-tint-rgb), 0.98) 0%, rgba(var(--player-expanded-bg-rgb), 0.95) 58%, rgba(var(--player-expanded-overlay-rgb), 0.94) 100%);
  backdrop-filter: blur(14px) saturate(118%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--player-expanded-drag-radius, 0px) var(--player-expanded-drag-radius, 0px) 0 0;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease, visibility 0s linear 0.42s, background 0.78s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 0.78s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.player-expanded-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 14%, rgba(var(--player-expanded-glow-rgb), 0.42), transparent 46%),
    radial-gradient(circle at 84% 88%, rgba(var(--player-expanded-accent-rgb), 0.26), transparent 50%);
  pointer-events: none;
  transition: background 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

.player-expanded-liquid-canvas {
  display: none;
}

.player-expanded-panel.has-liquid-background[data-track-theme] {
  background: linear-gradient(135deg, rgb(var(--lyrics-theater-mesh-base-rgb, 4, 8, 18)), rgba(var(--lyrics-theater-mesh-4-rgb, 12, 25, 58), 0.96));
}

.player-expanded-panel.has-liquid-background .player-expanded-liquid-canvas {
  display: block;
  position: absolute;
  inset: -14%;
  width: 128%;
  height: 128%;
  z-index: 0;
  opacity: 0.95;
  filter: blur(32px) saturate(1.2) contrast(0.98);
  pointer-events: none;
  transform: translateZ(0);
}

.player-expanded-panel.has-liquid-background::before {
  content: '';
  z-index: 1;
  background:
    radial-gradient(86% 58% at 48% 39%, rgba(255, 255, 255, 0.12), transparent 72%),
    radial-gradient(110% 82% at 50% 44%, transparent 40%, rgba(var(--lyrics-theater-mesh-base-rgb, 4, 8, 18), 0.22) 100%);
}

.player-expanded-panel.has-liquid-background > :not(.player-expanded-liquid-canvas) {
  position: relative;
  z-index: 1;
}

.player-expanded-panel[data-track-theme="light"] {
  background: linear-gradient(180deg, rgba(var(--player-expanded-tint-rgb), 0.95) 0%, rgba(var(--player-expanded-bg-rgb), 0.92) 58%, rgba(var(--player-expanded-overlay-rgb), 0.9) 100%);
  backdrop-filter: blur(15px) saturate(130%);
}

.player-expanded-panel[data-track-theme="light"]::before {
  background:
    radial-gradient(circle at 17% 12%, rgba(var(--player-expanded-glow-rgb), 0.54), transparent 47%),
    radial-gradient(circle at 84% 88%, rgba(var(--player-expanded-accent-rgb), 0.34), transparent 52%);
}

.player-expanded-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
}

.player-expanded-panel.is-preview-expanding {
  visibility: visible;
  transition: none !important;
  will-change: transform, opacity;
}

.player-expanded-panel.is-preview-expanding .player-expanded-cover {
  transition-delay: 0s !important;
}

.player-expanded-header {
  display: grid;
  grid-template-columns: 44px 1fr 88px;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 4px) 14px 4px;
  min-height: 38px;
  background: rgba(var(--player-expanded-overlay-rgb), 0.02);
  backdrop-filter: none;
  border-bottom: none;
  transition: background 0.56s ease, border-color 0.56s ease;
}

.player-expanded-header h3 {
  margin: 0;
  font-size: 0;
  line-height: 0;
  height: 0;
  opacity: 0;
  color: transparent;
  pointer-events: none;
  user-select: none;
  text-align: center;
}

.player-expanded-header-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 8px;
}

.player-expanded-queue-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(var(--player-expanded-accent-rgb), 0.28);
  background: transparent;
  color: rgb(var(--player-expanded-text-rgb));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.player-expanded-queue-btn:hover {
  border-color: rgba(var(--player-expanded-accent-rgb), 0.62);
  background: rgba(var(--player-expanded-accent-rgb), 0.16);
}

.player-collapse-btn {
  background: none;
  border: none;
  color: rgb(var(--player-expanded-text-rgb));
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), background 0.34s ease, border-radius 0.34s ease, color 0.34s ease;
}

.player-expanded-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 36px 24px 44px;
  gap: 26px;
  width: 100%;
  margin: 0;
}

.player-expanded-cover {
  width: 228px;
  height: 228px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 24px 52px rgba(var(--player-expanded-accent-rgb), 0.26), 0 0 0 1px rgba(var(--player-expanded-accent-rgb), 0.2);
  transform: scale(0.78);
  opacity: 1;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, box-shadow 0.78s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
  touch-action: pan-y;
}

.player-expanded-loop-video {
  order: 0;
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  aspect-ratio: 9 / 16;
  height: auto;
  min-height: 560px;
  max-height: none;
  margin: -64px -24px clamp(-340px, -28dvh, -190px);
  border-radius: 0;
  object-fit: cover;
  background: #050507;
  box-shadow: none;
  transform: scale(1.012);
  opacity: 0;
  transition: transform 0.78s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
  will-change: transform, opacity;
  touch-action: pan-y;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0.82) 76%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0.82) 76%, rgba(0,0,0,0) 100%);
}

.player-expanded-loop-video[hidden] {
  display: none;
}

.player-expanded-panel.is-soundvia-loop-suspended .player-expanded-loop-video {
  display: none;
}

.player-expanded-panel.is-soundvia-loop-suspended .player-expanded-cover {
  display: block;
}

.player-expanded-loop-video.is-visible {
  opacity: 1;
}

.player-expanded-panel.active .player-expanded-loop-video.is-visible {
  transform: scale(1);
}

.player-expanded-panel.has-soundvia-loop .player-expanded-content {
  justify-content: flex-start;
  padding-top: 64px;
  gap: 16px;
}

.player-expanded-panel.has-soundvia-loop::after {
  content: none;
}

.player-expanded-panel.has-soundvia-loop .player-expanded-content {
  position: relative;
  z-index: 2;
}

.player-expanded-panel.has-soundvia-loop .player-expanded-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}

.player-expanded-panel.has-soundvia-loop .player-expanded-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0));
}

.player-expanded-panel.has-soundvia-loop .player-expanded-cover {
  display: none;
}

.player-expanded-panel.has-soundvia-loop .player-expanded-info {
  color: #fff;
  margin-top: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.player-expanded-panel.has-soundvia-loop .player-expanded-info,
.player-expanded-panel.has-soundvia-loop .player-expanded-progress,
.player-expanded-panel.has-soundvia-loop .player-expanded-controls,
.player-expanded-panel.has-soundvia-loop .player-expanded-lyrics-card,
.player-expanded-panel.has-soundvia-loop .player-expanded-cherry-preview,
.player-expanded-panel.has-soundvia-loop .player-expanded-comments-preview,
.player-expanded-panel.has-soundvia-loop .player-expanded-drawer-grid {
  position: relative;
  z-index: 3;
}

.player-expanded-panel.has-soundvia-loop .player-expanded-info h2,
.player-expanded-panel.has-soundvia-loop .player-expanded-info p,
.player-expanded-panel.has-soundvia-loop .player-expanded-info .player-artist-link,
.player-expanded-panel.has-soundvia-loop .player-collapse-btn {
  color: #fff;
}

.player-expanded-panel.has-soundvia-loop .player-expanded-progress .time,
.player-expanded-panel.has-soundvia-loop .player-expanded-mini-card small {
  color: rgba(255, 255, 255, 0.78);
}

.player-expanded-panel.has-soundvia-loop .player-expanded-progress .progress-bar {
  background: rgba(255, 255, 255, 0.24);
}

.player-expanded-panel.has-soundvia-loop .player-expanded-progress .progress-fill {
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

.player-expanded-panel.active .player-expanded-cover {
  transform: scale(1);
  opacity: 1;
  transition-delay: 0.5s;
}

.player-expanded-info {
  text-align: center;
  width: 100%;
}

.player-expanded-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 360px);
  margin: 0 auto 6px;
}

.player-expanded-info h2 {
  flex: 1;
  margin: 0;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1.12;
  font-weight: 850;
  color: rgb(var(--player-expanded-text-rgb));
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  text-overflow: ellipsis;
}

.player-expanded-info h2 span {
  display: inline;
}



.player-expanded-add-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgb(var(--player-expanded-text-rgb));
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.18s ease, color 0.2s ease;
}

.player-expanded-add-btn i,
.player-expanded-add-btn svg {
  font-size: 42px;
  width: 42px;
  height: 42px;
  line-height: 42px;
}

.player-expanded-add-btn:active {
  transform: scale(0.96);
}

.player-expanded-info p {
  margin: 0;
  color: rgba(var(--player-expanded-muted-rgb), 0.96);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0;
  transition: color 0.56s ease;
}

.player-expanded-info .player-artist-link {
  color: rgb(var(--player-expanded-artist-rgb));
  transition: color 0.56s ease, opacity 0.2s ease;
}

.player-expanded-info .player-artist-link:hover {
  color: rgb(var(--player-expanded-progress-rgb));
}

.player-expanded-progress {
  width: min(560px, 100%);
  display: flex;
  gap: 14px;
  align-items: center;
}

.player-expanded-progress .progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(var(--player-expanded-accent-rgb), 0.2);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  touch-action: none;
  transition: background 0.5s ease;
}

.player-expanded-progress .progress-fill {
  background: rgb(var(--player-expanded-progress-rgb));
  box-shadow: 0 0 10px rgba(var(--player-expanded-progress-rgb), 0.46);
  transition: width 0.14s linear, background 0.56s ease, box-shadow 0.56s ease;
}

.player-expanded-progress .time {
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--player-expanded-muted-rgb), 0.94);
  min-width: 44px;
}

.player-expanded-controls {
  display: flex;
  gap: 46px;
  justify-content: center;
  width: 100%;
  align-items: center;
}

.player-expanded-lyrics-card {
  display: none;
}

.player-expanded-comments-preview {
  display: none;
}

.player-expanded-drawer-grid {
  width: min(92vw, 390px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.player-expanded-mini-card {
  border: 1px solid rgba(var(--player-expanded-accent-rgb), 0.28);
  background: rgba(var(--player-expanded-overlay-rgb), 0.56);
  color: rgb(var(--player-expanded-text-rgb));
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
}

.player-expanded-mini-card span {
  font-weight: 800;
  font-size: 0.9rem;
}

.player-expanded-mini-card small {
  color: rgba(var(--player-expanded-muted-rgb), 0.92);
  font-size: 0.76rem;
  line-height: 1.25;
}

.player-expanded-mini-card:focus-visible,
.player-expanded-mini-card:hover {
  outline: 2px solid rgba(var(--player-expanded-progress-rgb), 0.58);
  background: rgba(var(--player-expanded-accent-rgb), 0.16);
}

.player-expanded-cherry-preview {
  display: none;
}

.player-btn-large {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(26, 92, 255, 0.2);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.player-expanded-controls .player-btn-large {
  border: 1px solid rgba(var(--player-expanded-control-rgb), 0.4);
  background: rgba(var(--player-expanded-control-rgb), 0.14);
  color: rgb(var(--player-expanded-control-rgb));
  box-shadow: 0 10px 22px rgba(var(--player-expanded-control-rgb), 0.18);
  transition: background 0.36s ease, color 0.36s ease, box-shadow 0.36s ease, border-color 0.36s ease, transform 0.2s;
}

.player-expanded-controls .player-btn-large:hover {
  background: rgba(var(--player-expanded-control-rgb), 0.22);
  box-shadow: 0 13px 28px rgba(var(--player-expanded-control-rgb), 0.24);
}

.player-expanded-controls .player-btn-large.player-play-btn {
  background: rgb(var(--player-expanded-control-rgb));
  border-color: rgba(var(--player-expanded-control-rgb), 0.72);
  color: rgb(var(--player-expanded-control-icon-rgb, 255, 255, 255));
  box-shadow: 0 18px 36px rgba(var(--player-expanded-control-rgb), 0.32);
}

.player-btn-large:hover {
  background: var(--purple);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(120, 147, 254, 0.28);
}

.player-btn-large.player-play-btn {
  width: 78px;
  height: 78px;
  font-size: 28px;
  box-shadow: 0 18px 34px rgba(26, 92, 255, 0.3);
}

#playerExpandedPrevBtn,
#playerExpandedNextBtn {
  background: transparent;
  border: none;
  color: rgb(var(--player-expanded-text-rgb));
  box-shadow: none;
  transition: color 0.56s ease;
}

#playerExpandedPrevBtn:hover,
#playerExpandedNextBtn:hover {
  background: transparent;
  border: none;
  box-shadow: none;
}

@media (max-width: 768px) {
  .player-wrapper {
    grid-template-columns: 1fr auto !important;
    gap: 8px;
    padding: 8px;
  }

  .player-track-info {
    cursor: pointer;
  }

  .player-center,
  .player-right {
    display: none !important;
  }

  .player-mobile-play-btn {
    display: inline-flex !important;
    justify-self: end;
  }

  .player-expanded-panel {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .player-expanded-content,
  .player-expanded-info,
  .player-expanded-progress,
  .player-expanded-controls,
  .player-expanded-lyrics-card,
  .player-expanded-cherry-preview,
  .player-expanded-comments-preview,
  .player-expanded-drawer-grid,
  #playerQueuePanel {
    transition: transform 0.58s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease, width 0.58s cubic-bezier(0.16, 1, 0.3, 1), height 0.58s cubic-bezier(0.16, 1, 0.3, 1), padding 0.58s cubic-bezier(0.16, 1, 0.3, 1), margin 0.58s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .player-expanded-info {
    transition-property: transform, opacity, top, left, right, width, height, padding, margin;
  }

  .player-expanded-cover {
    transition: transform 0.58s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, width 0.58s cubic-bezier(0.16, 1, 0.3, 1), height 0.58s cubic-bezier(0.16, 1, 0.3, 1), top 0.58s cubic-bezier(0.16, 1, 0.3, 1), left 0.58s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.58s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.58s ease;
  }

	  .player-expanded-content {
	    justify-content: flex-start;
	    align-items: center;
	    overflow-y: auto;
	    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
	    padding: clamp(88px, 15vh, 152px) 18px calc(130px + env(safe-area-inset-bottom));
	    gap: 18px;
	  }

	  .player-expanded-panel.has-soundvia-loop .player-expanded-loop-video {
	    width: calc(100% + 36px);
	    max-width: none;
	    aspect-ratio: 9 / 16;
	    height: auto;
	    min-height: 620px;
	    max-height: none;
	    margin: calc(-1 * (62px + env(safe-area-inset-top))) -18px clamp(-360px, -30dvh, -220px);
	    border-radius: 0;
	  }

	  .player-expanded-panel.has-soundvia-loop .player-expanded-content {
	    padding: calc(62px + env(safe-area-inset-top)) 18px calc(130px + env(safe-area-inset-bottom));
	    gap: 14px;
	  }

	  .player-expanded-panel.has-soundvia-loop .player-expanded-lyrics-card {
	    margin-top: 12px;
	  }

	  .player-expanded-panel.has-soundvia-loop .player-expanded-controls {
	    margin-top: 0;
	  }

  .player-expanded-cover {
    order: 1;
  }

  .player-expanded-info {
    order: 2;
    max-width: 560px;
  }

  .player-expanded-progress {
    order: 3;
    width: min(560px, 100%);
  }

  .player-expanded-controls {
    order: 4;
    width: min(560px, 100%);
    margin-top: 6px;
  }

  .player-expanded-lyrics-card {
    order: 5;
    display: block;
    width: min(560px, 100%);
    margin-top: 72px;
    border: 1px solid rgba(var(--player-expanded-accent-rgb), 0.28);
    border-radius: 16px;
    background: rgba(var(--player-expanded-overlay-rgb), 0.56);
    backdrop-filter: blur(8px);
    color: rgb(var(--player-expanded-text-rgb));
    text-align: left;
    padding: 14px 14px 12px;
    cursor: pointer;
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.56s ease, background 0.56s ease, color 0.56s ease;
  }

  .player-expanded-lyrics-card:active {
    transform: scale(0.985);
  }

  .player-expanded-lyrics-card.is-disabled {
    opacity: 0.78;
  }

  .player-expanded-comments-preview {
    order: 7;
    display: block;
    width: min(560px, 100%);
    border: 1px solid rgba(var(--player-expanded-accent-rgb), 0.28);
    border-radius: 16px;
    background: rgba(var(--player-expanded-overlay-rgb), 0.56);
    backdrop-filter: blur(8px);
    color: rgb(var(--player-expanded-text-rgb));
    text-align: left;
    padding: 14px 14px 12px;
    cursor: pointer;
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.56s ease, background 0.56s ease, color 0.56s ease;
  }

  .player-expanded-drawer-grid {
    order: 8;
    width: min(560px, 100%);
    gap: 10px;
  }

  .player-expanded-mini-card {
    border-radius: 16px;
    padding: 14px;
    background: rgba(var(--player-expanded-overlay-rgb), 0.56);
    backdrop-filter: blur(8px);
  }

  .player-expanded-mini-card span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(var(--player-expanded-muted-rgb), 0.92);
  }

  .player-expanded-mini-card small {
    font-size: 14px;
    color: rgb(var(--player-expanded-text-rgb));
  }

  .player-expanded-cherry-preview {
    order: 6;
    display: block;
    width: min(560px, 100%);
    border: 1px solid rgba(var(--player-expanded-accent-rgb), 0.28);
    border-radius: 16px;
    background: rgba(var(--player-expanded-overlay-rgb), 0.56);
    backdrop-filter: blur(8px);
    color: rgb(var(--player-expanded-text-rgb));
    text-align: left;
    padding: 14px 14px 12px;
    cursor: pointer;
    transition: border-color 0.56s ease, background 0.56s ease, color 0.56s ease;
  }

  .player-expanded-cherry-preview:focus-visible {
    outline: 2px solid rgba(var(--player-expanded-progress-rgb), 0.72);
    outline-offset: 2px;
  }

  .player-expanded-cherry-preview:active {
    transform: scale(0.985);
  }

  .player-expanded-cherry-preview-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(var(--player-expanded-muted-rgb), 0.92);
    margin-bottom: 8px;
  }

  .player-expanded-cherry-preview-summary {
    font-size: 15px;
    line-height: 1.36;
    color: rgb(var(--player-expanded-text-rgb));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .player-expanded-cherry-preview-age {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(var(--player-expanded-muted-rgb), 0.94);
  }

  .player-expanded-comments-preview:active {
    transform: scale(0.985);
  }

  .player-expanded-comments-preview-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(var(--player-expanded-muted-rgb), 0.92);
    margin-bottom: 8px;
  }

  .player-expanded-comments-preview-line {
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-expanded-comments-preview-line + .player-expanded-comments-preview-line {
    margin-top: 3px;
  }

  .player-expanded-lyrics-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(var(--player-expanded-muted-rgb), 0.92);
    margin-bottom: 8px;
  }

  .player-expanded-lyrics-line {
    font-size: 16px;
    line-height: 1.28;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-expanded-lyrics-line.is-prev,
  .player-expanded-lyrics-line.is-next {
    color: rgba(var(--player-expanded-muted-rgb), 0.9);
    opacity: 0.88;
  }

  .player-expanded-lyrics-line.is-current {
    font-size: 18px;
    font-weight: bold;
    color: rgb(var(--player-expanded-text-rgb));
    margin: 4px 0;
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Syne";
  color: var(--black);
  background: var(--white);
  transition: all 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.1);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="date"]::placeholder,
input[type="time"]::placeholder,
input[type="search"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
  color: var(--muted);
}

textarea {
  resize: vertical;
  min-height: 120px;
  font-family: "Syne", Georgia, serif;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
  cursor: pointer;
}

select option {
  padding: 8px;
  color: var(--black);
  background: var(--white);
}

input[type="file"] {
  display: none;
}

.file-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.file-input-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  background: rgba(26, 92, 255, 0.02);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  min-height: 120px;
  flex-direction: column;
}

.file-input-label:hover {
  border-color: var(--blue);
  background: rgba(26, 92, 255, 0.05);
}

.file-input-label.active {
  border-color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
}

.file-input-label i {
  font-size: 32px;
  color: var(--blue);
}

.file-input-label .text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-input-label .text strong {
  color: var(--black);
  font-weight: 600;
}

.file-input-label .text span {
  color: var(--muted);
  font-size: 12px;
}

.file-input-name {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(26, 92, 255, 0.08);
  border-radius: 6px;
  color: var(--blue);
  font-size: 13px;
  display: none;
}

.file-input-name.active {
  display: block;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid rgba(26, 92, 255, 0.42);
  border-radius: 5px;
  background: var(--white);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="checkbox"]::before {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  margin-top: -1px;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}

input[type="checkbox"]:checked::before {
  border-left-color: #ffffff;
  border-bottom-color: #ffffff;
  transform: rotate(-45deg) scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.2);
}

input[type="checkbox"]:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--blue);
}

input[type="range"] {
  width: 100%;
  height: 18px;
  cursor: pointer;
  accent-color: var(--blue);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 999px;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: #d7deeb;
  border-radius: 999px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--blue);
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(12, 12, 14, 0.18);
  margin-top: -5px;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  background: #d7deeb;
  border-radius: 999px;
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  background: var(--blue);
  border-radius: 999px;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--blue);
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(12, 12, 14, 0.18);
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
  color: var(--black);
  font-size: 14px;
}

.form-group.error input,
.form-group.error textarea,
.form-group.error select {
  border-color: #e74c3c;
}

.form-group.error input:focus,
.form-group.error textarea:focus,
.form-group.error select:focus {
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.form-group .error-message {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.form-group.error .error-message {
  display: block;
}

.form-group .helper-text {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.handle-suggestions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.suggestion-chip {
  display: inline-block;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.suggestion-chip:hover {
  background-color: #e0e0e0;
  border-color: #999;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-trigger {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  transition: all 0.2s;
}

.dropdown-trigger:hover {
  border-color: var(--blue);
}

.dropdown-trigger.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.1);
}

.dropdown-trigger i {
  transition: transform 0.2s;
}

.dropdown-trigger.active i {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}

.dropdown-menu.active {
  display: block;
}

.dropdown-item {
  padding: 12px 16px;
  color: var(--black);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdown-item:hover {
  background: rgba(26, 92, 255, 0.05);
  color: var(--blue);
}

.dropdown-item.selected {
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
  font-weight: 500;
}

.dropdown-item.disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.dropdown-item.disabled:hover {
  background: transparent;
  color: var(--muted);
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    padding: 12px 14px;
    font-size: 16px;
  }

  .file-input-label {
    min-height: 100px;
    padding: 20px 12px;
  }

  .dropdown-menu {
    max-height: 250px;
  }
}
.page-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 100px;
}

.sv-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sv-auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 2px 24px rgba(12,12,14,0.06);
}

.sv-auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.sv-auth-brand-icon {
  width: 38px;
  height: 38px;
  background: var(--black);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}

.sv-auth-brand-name {
  font-family: 'Syne', Georgia, serif;
  font-size: 20px;
  letter-spacing: -0.3px;
  color: var(--black);
}

.sv-auth-heading {
  margin-bottom: 28px;
}

.sv-auth-heading h1 {
  font-family: 'Syne', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.8px;
  color: var(--black);
  margin-bottom: 6px !important;
}

.sv-auth-heading p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 !important;
}

.sv-auth-form .form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.sv-auth-form .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 0 !important;
}

.sv-auth-form .form-group input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  font-family: "Syne";
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sv-auth-form .form-group input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,92,255,0.1);
}

.sv-auth-form .form-group input::placeholder {
  color: var(--muted);
}

.sv-auth-submit {
  width: 100%;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  font-family: "Syne";
}

.sv-auth-submit:hover { background: var(--blue); }
.sv-auth-submit:active { transform: scale(0.99); }

.sv-auth-footer {
  margin-top: 20px !important;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.sv-auth-footer a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.lp-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 36px 28px 80px;
}

.lp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 40px;
}

.lp-title {
  font-family: 'Syne', Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -1px;
  color: var(--black);
  margin-bottom: 4px !important;
}

.lp-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 0 !important;
}

.portal-section {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}

.portal-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.lp-section-header { margin-bottom: 16px; }

.lp-section-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--black);
  margin-bottom: 4px !important;
}

.lp-section-note {
  font-size: 13px;
  color: var(--muted);
  margin: 0 !important;
}

.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .lp-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.lp-stat {
  background: #F7F7FA;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--black);
  line-height: 1;
}

.lp-stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.lp-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.lp-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--white);
  transition: background 0.15s;
}

.lp-list-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.lp-list-item:hover { background: #F7F7FA; }

.lp-list-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.lp-list-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lp-list-info strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
}

.lp-list-meta {
  font-size: 12px;
  color: var(--muted);
}

.lp-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  background: var(--white);
}

.lp-empty-full {
  border: 1px solid var(--border);
  border-radius: 10px;
}

.lp-inline-form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.lp-inline-form input[type="text"],
.lp-inline-form input[type="file"],
.lp-inline-form select {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Syne";
  color: var(--black);
  transition: border-color 0.2s, box-shadow 0.2s;
  display: block;
}

.lp-inline-form input[type="text"]:focus,
.lp-inline-form select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,92,255,0.1);
}

.lp-manager-access {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
}

.lp-manager-access h3 {
  margin: 0 0 3px;
  font-size: 16px;
}

.lp-artist-grid { display: flex; flex-direction: column; gap: 20px; }

.lp-artist-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.lp-artist-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: #FAFAFA;
}

.lp-artist-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}

.lp-artist-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 2px !important;
}

.lp-artist-handle {
  font-size: 13px;
  color: var(--muted);
  margin: 0 !important;
}

.lp-artist-badge {
  margin-left: auto;
  background: rgba(26,92,255,0.08);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.lp-artist-metrics {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.lp-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 20px 14px 0;
  min-width: 80px;
}

.lp-metric-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.lp-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.3px;
}

.lp-artist-block {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.lp-artist-block:last-child { border-bottom: none; }

.lp-block-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px !important;
}

.lp-track-title { font-size: 14px; font-weight: 500; color: var(--black); }
.lp-track-genre { color: var(--muted); font-weight: 400; }

.lp-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

.lp-danger-btn { color: var(--danger) !important; }

.lp-escalated-badge {
  display: inline-block;
  background: rgba(245,158,11,0.1);
  color: #B45309;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
}

.lp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

@media (max-width: 600px) {
  .lp-form-grid { grid-template-columns: 1fr; }
  .lp-span-2 { grid-column: auto; }
}

.lp-span-2 { grid-column: 1 / -1; }

.lp-token-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.lp-token-box {
  flex: 1;
  font-family: 'Syne', monospace;
  font-size: 13px;
  background: #F2F2F7;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--black);
  word-break: break-all;
  min-height: 42px;
}

.lp-api-docs {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.lp-api-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.lp-api-row:last-child { border-bottom: none; }

.lp-api-key {
  font-weight: 700;
  color: var(--muted);
  min-width: 72px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.lp-api-row code {
  font-family: 'Syne', monospace;
  font-size: 12px;
  color: var(--black);
  background: rgba(26,92,255,0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.lp-contract-modal { max-width: 920px; width: 96%; }
.lp-contract-notice { margin-bottom: 14px !important; font-size: 14px; color: var(--black); }
.lp-contract-iframe { width: 100%; height: 380px; border: 1px solid var(--border); border-radius: 8px; }
.lp-contract-scroll {
  margin-top: 14px;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.lp-signature-canvas { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }
.lp-edit-modal { max-width: 680px; width: 96%; }

.portal-status { margin-top: 10px; font-size: 13px; }

.lp-messages-page,
.lp-notifications-page {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.lp-notifications-page .notifications-header {
  margin-bottom: 6px;
}

.lp-notifications-page .notifications-header p {
  margin: 0;
}

.lp-details-note {
  background: #f7f9ff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0 18px;
  font-size: 13px;
  color: var(--muted);
}

.lp-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.lp-details-grid.lp-details-grid-full {
  grid-template-columns: 1fr;
}

.lp-details-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  padding: 14px;
}

.lp-details-card h3 {
  margin: 0 0 12px !important;
  font-size: 14px;
}

.lp-media-preview {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  background: #f3f5fb;
  overflow: hidden;
}

.lp-media-preview-avatar {
  width: 120px;
  height: 120px;
}

.lp-media-preview-banner {
  width: 100%;
  height: 120px;
}

.lp-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-media-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--muted);
}

.lp-media-fallback-banner {
  font-size: 13px;
  font-weight: 500;
}

.lp-details-form .portal-status {
  margin-top: 8px;
}

.lp-details-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

@media (max-width: 768px) {
  .lp-details-grid,
  .lp-details-social-grid {
    grid-template-columns: 1fr;
  }
}

.sd-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: flex-start;
  margin-bottom: 52px;
}

@media (max-width: 600px) {
  .sd-hero { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 768px) {

  .player-footer {
    border-color: rgba(26, 91, 255, 0);
  }

  .mobile-top-blend-song.song-detail-container.page-wrap {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    margin-top: -14px;
  }

  .mobile-top-blend-song .sd-hero {
    gap: 0;
    margin-bottom: 24px;
    position: relative;
  }

  .mobile-top-blend-song .sd-cover-wrap {
    width: 100vw;
    height: min(100vw, 520px);
    margin: 0;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
    position: relative;
  }

  .mobile-top-blend-song .sd-cover-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(6, 10, 20, 0) 36%, rgba(6, 10, 20, 0.28) 74%, var(--white) 100%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 72%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 34%, #000 72%, #000 100%);
    pointer-events: none;
  }

  .mobile-top-blend-song .sd-cover-img {
    border-radius: 0;
    object-position: top center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  }

  .mobile-top-blend-song .sd-meta {
    margin-top: clamp(-220px, -46vw, -120px);
    padding: 0 16px;
    padding-right: 56px;
    padding-top: 0;
    position: relative;
    z-index: 2;
  }

  .detail-context-menu-trigger {
    top: 0;
    right: 16px;
    width: 36px;
    height: 36px;
  }

  .mobile-top-blend-song.cover-tone-dark .sd-artist-link {
    color: rgba(180, 209, 255, 0.98);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  }

  .mobile-top-blend-song.cover-tone-dark .sd-title {
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
  }

  .mobile-top-blend-song.cover-tone-dark .sd-chip {
    color: rgba(18, 25, 39, 0.78);
    border-color: rgba(17, 24, 39, 0.12);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(4px);
  }

  .mobile-top-blend-song.cover-tone-dark .sd-plays-chip {
    color: #0d1325;
    background: rgba(255, 255, 255, 0.92);
  }

  .mobile-top-blend-song.cover-tone-light .sd-artist-link {
    color: #2b57c6;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.35);
  }

  .mobile-top-blend-song.cover-tone-light .sd-title {
    color: #0d1325;
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.45);
  }

  .mobile-top-blend-song.cover-tone-light .sd-chip {
    color: rgba(18, 25, 39, 0.78);
    border-color: rgba(17, 24, 39, 0.12);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(4px);
  }

  .mobile-top-blend-song.cover-tone-light .sd-plays-chip {
    color: #0d1325;
    background: rgba(255, 255, 255, 0.92);
  }

  .mobile-top-blend-song.cover-tone-auto .sd-artist-link,
  .mobile-top-blend-song.cover-tone-auto .sd-title {
    color: #f7faff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 14px rgba(0, 0, 0, 0.62);
  }

  .mobile-top-blend-song.cover-tone-auto .sd-chip {
    color: #f4f7ff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(6, 10, 20, 0.42);
    backdrop-filter: blur(4px);
  }

  .mobile-top-blend-song.cover-tone-auto .sd-plays-chip {
    color: #ffffff;
    background: rgba(6, 10, 20, 0.56);
  }

  .mobile-top-blend-song .sd-body,
  .mobile-top-blend-song .sd-section,
  .mobile-top-blend-song .sd-comments {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mobile-top-blend-song .sd-lyrics {
    margin-left: -16px;
    margin-right: -16px;
  }
}

.sd-cover-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: 0 8px 32px rgba(12,12,14,0.14);
  flex-shrink: 0;
}

.sd-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sd-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6px;
  position: relative;
  padding-right: 52px;
}

.sd-artist-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
  transition: opacity 0.15s;
}

.sd-artist-link:hover { opacity: 0.7; }

.sd-title {
  font-family: 'Syne', Georgia, serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 18px !important;
}

.sd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.sd-chip {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: #F2F2F7;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
}

.sd-plays-chip { color: var(--black); background: var(--white); }

.sd-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.sd-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: "Syne";
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.sd-btn-play:hover { background: var(--blue); }
.sd-btn-play:active { transform: scale(0.98); }

.sd-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  background: transparent;
  color: var(--black);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Syne";
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.sd-btn-ghost:hover { border-color: var(--black); background: #F2F2F7; }

.sd-body {
  border-top: 1px solid var(--border);
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-bottom: 48px;
}

.sd-section { display: flex; flex-direction: column; gap: 14px; }

.sd-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin: 0 !important;
}

.sd-detail-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.sd-detail-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.sd-detail-row:last-child { border-bottom: none; }

.sd-detail-key {
  font-weight: 600;
  color: var(--black);
  min-width: 100px;
  flex-shrink: 0;
}

.sd-detail-val { color: var(--text-secondary); }
.sd-mono { font-family: 'Syne', monospace; font-size: 13px; }

.sd-credits-list { display: flex; flex-direction: column; gap: 8px; }

.sd-credit-row { display: flex; gap: 12px; font-size: 14px; }

.sd-credit-role {
  font-weight: 600;
  color: var(--black);
  min-width: 130px;
  flex-shrink: 0;
}

.sd-credit-name { color: var(--text-secondary); }

.sd-description {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 !important;
}

.sd-lyrics {
  font-family: 'Syne', Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--black);
  white-space: normal;
  margin: 0;
  background: #FAFAFA;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
}

.sd-lyrics-line {
  margin: 0;
  white-space: pre-wrap;
}

.sd-lyrics-attribution {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sd-lyrics-tag {
  margin: 4px 0;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.sd-lyrics-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.sd-lyrics-summary::-webkit-details-marker {
  display: none;
}

.sd-lyrics-chevron {
  color: var(--muted);
  font-size: 13px;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.sd-lyrics-summary:hover .sd-lyrics-chevron {
  color: var(--black);
}

.sd-lyrics-disclosure.is-expanded .sd-lyrics-chevron {
  transform: rotate(180deg);
}

.sd-lyrics-expand,
.sd-lyrics-disclosure:not([open]) > .sd-lyrics-expand {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.46s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.sd-lyrics-disclosure.is-expanded > .sd-lyrics-expand {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sd-lyrics-expand-inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
  transition: padding-top 0.35s ease;
}

.sd-lyrics-disclosure.is-expanded .sd-lyrics-expand-inner {
  padding-top: 20px;
}

.sd-comments {
  border-top: 1px solid var(--border);
  padding-top: 36px;
}

.sd-comments-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px !important;
}

.sd-comments-count {
  background: #F2F2F7;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--black);
  font-family: 'Syne', sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

.sd-comment-compose {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.sd-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F2F2F7;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 15px;
}

.sd-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sd-comment-input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sd-comment-input-wrap textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: "Syne";
  font-size: 14px;
  color: var(--black);
  resize: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--white);
}

.sd-comment-input-wrap textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,92,255,0.1);
}

.sd-btn-comment {
  align-self: flex-end;
  padding: 8px 20px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-family: "Syne";
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.sd-btn-comment:hover { background: var(--blue); }

.sd-comment-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sd-comment-timed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.sd-comment-timed-toggle input {
  margin: 0;
}

.sd-login-prompt {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px !important;
}

.sd-login-prompt a { color: var(--blue); text-decoration: none; font-weight: 600; }

.sd-comments-list { display: flex; flex-direction: column; }

.sd-comment-item {
  display: flex;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.sd-comment-item:last-child { border-bottom: none; }

.sd-comment-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.sd-comment-header { display: flex; align-items: baseline; gap: 10px; }

.sd-comment-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
}

.sd-comment-author:hover { color: var(--blue); }

.sd-comment-time { font-size: 12px; color: var(--muted); }

.sd-comment-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 !important;
}

.comment-mention-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.comment-mention-link:hover {
  text-decoration: underline;
}

.sd-comment-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sd-comment-action {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}

.sd-comment-icon-action {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sd-comment-action.primary {
  color: var(--blue);
}

.sd-comment-action.danger {
  color: #c44747;
}

.sd-comment-replies {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  margin-left: 8px;
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

.sd-comment-item-reply {
  border-bottom: none;
  padding: 10px 0;
}

.sd-comment-load-replies,
.sd-comments-load-more {
  margin-top: 10px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}

.sd-comment-reply-compose {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sd-comment-reply-text {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  resize: vertical;
  min-height: 52px;
}

.sd-comment-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sd-comments-sentinel {
  height: 2px;
}

.sd-no-comments {
  font-size: 14px;
  color: var(--muted);
  padding: 24px 0;
  margin: 0 !important;
}

.messages-page {
  --cs-accent-r: 26;
  --cs-accent-g: 92;
  --cs-accent-b: 255;
  --cs-icon-ink: #ffffff;
  --messages-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --messages-ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
  --messages-speed-fast: 220ms;
  --messages-speed-base: 340ms;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  height: calc(100vh - 80px - var(--mobile-player-height, 0px));
  max-height: calc(100dvh - 80px - var(--mobile-player-height, 0px));
  overflow: hidden;
  background: var(--bg);
}

.messages-shell {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

.messages-sidebar,
.messages-thread {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--messages-speed-base) var(--messages-ease-apple), opacity var(--messages-speed-fast) var(--messages-ease-out);
}

.messages-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.messages-sidebar-header,
.messages-thread-header {
  padding: 18px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  transition: background var(--messages-speed-fast) var(--messages-ease-out), border-color var(--messages-speed-fast) var(--messages-ease-out);
}

.messages-thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.messages-thread-header-main {
  min-width: 0;
  flex: 1;
}

.messages-mobile-back {
  display: none;
  border: none;
  background: transparent;
  color: var(--blue);
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity var(--messages-speed-fast) var(--messages-ease-out), transform var(--messages-speed-fast) var(--messages-ease-out);
}

.messages-mobile-back:active {
  transform: translateX(-1px) scale(0.98);
}

.messages-sidebar-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.messages-sidebar-header p,
.messages-thread-meta {
  margin: 5px 0 0;
  color: #7782a0;
  font-size: 12px;
  line-height: 1.4;
}

.messages-thread-user {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: var(--black);
}

.messages-conversation-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
  gap: 0;
}

.messages-conversation-item {
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  transition: background var(--messages-speed-fast) var(--messages-ease-out), transform var(--messages-speed-fast) var(--messages-ease-out);
}

.messages-conversation-item:hover,
.messages-conversation-item.is-active {
  background: rgba(26, 92, 255, 0.08);
}

.messages-conversation-item:active {
  transform: scale(0.997);
}

.messages-conversation-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f2f2f7;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.messages-conversation-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.messages-conversation-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.messages-conversation-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.messages-conversation-top strong {
  font-size: 14px;
  line-height: 1.2;
  color: var(--black);
}

.messages-conversation-top span,
.messages-conversation-preview {
  font-size: 12px;
  color: #7782a0;
}

.messages-conversation-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-conversation-unread {
  min-width: 21px;
  height: 21px;
  border-radius: 999px;
  background: var(--danger);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-shadow: 0 8px 14px rgba(240, 65, 72, 0.32);
}

.messages-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.messages-thread-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  scroll-behavior: smooth;
}

.messages-message {
  max-width: min(96%, 860px);
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: transparent;
  box-shadow: none;
  transform-origin: 0% 100%;
}

.messages-message.is-outgoing {
  margin-left: 0;
  flex-direction: row;
  transform-origin: 0% 100%;
}

.messages-message-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  background: var(--hover-bg);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}

.messages-message.is-incoming .messages-message-avatar {
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.98);
  color: var(--cs-icon-ink);
}

.messages-message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.messages-message-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.messages-message-bubble {
  max-width: 100%;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.messages-message.is-outgoing .messages-message-bubble {
  border: none;
  background: transparent;
}

.messages-message-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.messages-message-meta strong {
  color: var(--text-primary);
  font-weight: 600;
  margin-right: 6px;
}

.messages-message-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.messages-message.is-outgoing .messages-message-text {
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.08);
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  display: inline-block;
}

.messages-inline-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.messages-inline-link:hover {
  text-decoration: underline;
}

.messages-entity-card-slot {
  width: min(560px, 100%);
}

.messages-link-card-placeholder {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 12px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--white) 94%, #5b88ff 6%);
}

.messages-entity-card {
  width: 100%;
  min-width: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, #5b88ff 22%);
  background: color-mix(in srgb, var(--white) 93%, #5b88ff 7%);
  box-shadow: 0 8px 18px rgba(23, 33, 58, 0.12);
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.messages-entity-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border) 60%);
  box-shadow: 0 10px 20px rgba(23, 33, 58, 0.16);
}

.messages-entity-card-cover {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--blue) 18%);
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--white) 87%, #8aaeff 13%);
}

.messages-entity-card-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.messages-entity-card-cover-fallback {
  color: color-mix(in srgb, var(--muted) 74%, var(--blue) 26%);
  font-size: 20px;
}

.messages-entity-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.messages-entity-card-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-secondary) 85%, var(--blue) 15%);
}

.messages-entity-card-title {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-entity-card-meta {
  font-size: 11px;
  line-height: 1.25;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-message-actions {
  display: flex;
  justify-content: flex-start;
}

.messages-message-actions .sd-comment-action {
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
}

.messages-message-reply-preview {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 8px;
  color: #667598;
  font-size: 12px;
  text-align: left;
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.messages-message-reply-preview:hover {
  border-color: rgba(26, 92, 255, 0.34);
  background: rgba(26, 92, 255, 0.12);
}

.messages-reply-preview {
  border-top: 1px solid var(--border-color);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  transition: opacity var(--messages-speed-fast) var(--messages-ease-out), transform var(--messages-speed-fast) var(--messages-ease-out);
}

.messages-reply-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.messages-reply-text strong {
  font-size: 12px;
  color: var(--black);
}

.messages-reply-text span {
  font-size: 12px;
  color: #7782a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-reply-cancel {
  border: 1px solid var(--border);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: transparent;
  color: #667598;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.messages-reply-cancel:hover {
  border-color: rgba(26, 92, 255, 0.3);
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
}

.messages-compose {
  flex-shrink: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border-color);
  transition: border-color var(--messages-speed-fast) var(--messages-ease-out), background var(--messages-speed-fast) var(--messages-ease-out);
}

.messages-compose-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 6px 6px 6px 16px;
  transition: border-color 0.15s;
}

.messages-compose-inner:focus-within {
  border-color: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.5);
}

.messages-compose textarea {
  flex: 1;
  border: none;
  border-radius: 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: 14px;
  min-height: 24px;
  line-height: 1.4;
  max-height: 120px;
  background: transparent;
  color: var(--text-primary);
  resize: none;
  transition: background var(--messages-speed-fast) var(--messages-ease-out);
}

.messages-compose textarea:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.messages-compose-status {
  min-height: 16px;
  font-size: 12px;
  color: #7782a0;
  padding: 2px 16px 0;
}

.messages-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgb(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b));
  color: var(--cs-icon-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.messages-send-btn:hover {
  opacity: 0.85;
}

.messages-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.messages-empty {
  margin: auto;
  text-align: center;
  color: #7782a0;
  font-size: 14px;
  padding: 30px 18px;
}

.messages-empty.messages-empty-small {
  margin: 0;
}

@keyframes messagesBubbleIn {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 980px) {
  .messages-page.is-mobile-messages {
    position: relative;
  }

  .messages-page.is-mobile-messages .messages-shell {
    display: block;
    position: relative;
    overflow: hidden;
  }

  .messages-page.is-mobile-messages .messages-sidebar,
  .messages-page.is-mobile-messages .messages-thread {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
  }

  .messages-page.is-mobile-messages .messages-sidebar {
    border-right: none;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
  }

  .messages-page.is-mobile-messages .messages-thread {
    transform: translateX(100%);
    opacity: 0.95;
    pointer-events: none;
    z-index: 3;
    background: var(--white);
  }

  .messages-page.is-mobile-messages.is-mobile-thread-view .messages-sidebar {
    transform: translateX(-18%);
    opacity: 0;
    pointer-events: none;
  }

  .messages-page.is-mobile-messages.is-mobile-thread-view .messages-thread {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    bottom: 68px !important;
  }

  .messages-mobile-back {
    display: inline-flex;
  }

  .messages-page.is-mobile-messages.is-mobile-list-view .messages-mobile-back {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px);
  }

  .messages-page.is-mobile-messages .messages-conversation-item,
  .messages-page.is-mobile-messages .messages-message,
  .messages-page.is-mobile-messages .messages-compose,
  .messages-page.is-mobile-messages .messages-thread-header,
  .messages-page.is-mobile-messages .messages-sidebar-header {
    will-change: transform, opacity;
  }
}

@media (max-width: 640px) {
  .messages-page {
    height: calc(100vh - 60px - var(--mobile-player-height, 0px) - var(--mobile-bottom-nav-height, 56px));
    max-height: calc(100dvh - 60px - var(--mobile-player-height, 0px) - var(--mobile-bottom-nav-height, 56px));
    min-height: 420px;
  }

  .messages-shell {
    gap: 0;
  }

  .messages-sidebar,
  .messages-thread {
    border-radius: 0;
  }

  .messages-sidebar-header,
  .messages-thread-header,
  .messages-thread-body,
  .messages-compose,
  .messages-reply-preview {
    padding-left: 12px;
    padding-right: 12px;
  }

  .messages-thread-body {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .messages-thread-user {
    font-size: 16px;
  }

  .messages-message {
    max-width: 100%;
  }

  .messages-message-bubble {
    max-width: 100%;
  }
}

.custom-context-menu {
  position: fixed;
  z-index: 6000;
  min-width: 220px;
  max-width: min(300px, calc(100vw - 24px));
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(12, 12, 14, 0.2);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.custom-context-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity 0.16s ease, transform 0.2s ease;
}

.custom-context-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-context-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--black);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-context-menu-item:hover {
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
}

.custom-context-menu-item:disabled {
  color: var(--muted);
  cursor: not-allowed;
  background: transparent;
}

.custom-context-menu-item i {
  width: 14px;
  text-align: center;
}

.custom-context-menu-item.context-action-priority {
  background: rgba(26, 92, 255, 0.08);
  color: var(--blue);
}

.custom-context-menu-account-head {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--black);
  padding: 8px 8px 12px;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.custom-context-menu-account-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}

.custom-context-menu-account-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
}

.custom-context-menu-account-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.custom-context-menu-account-copy strong,
.custom-context-menu-account-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-context-menu-account-copy strong {
  font-size: 13px;
  line-height: 1.2;
}

.custom-context-menu-account-copy small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.2;
}

.custom-context-menu-account-head > .fas {
  color: var(--text-secondary);
  font-size: 12px;
}

.custom-context-menu-static-head {
  cursor: default;
}

.mobile-notification-menu-item span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mobile-notification-menu-item strong,
.mobile-notification-menu-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-notification-menu-item strong {
  font-size: 13px;
  line-height: 1.2;
}

.mobile-notification-menu-item small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.2;
}

.custom-context-menu-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d6d, #e03152);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.custom-context-menu-item.context-action-danger,
.custom-context-menu-item.context-action-danger i {
  color: var(--danger) !important;
}

.mobile-account-unread-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.custom-context-menu--share {
  min-width: 260px;
  width: min(320px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  border-radius: 10px;
  padding: 6px;
}

.custom-context-menu-list--share {
  gap: 2px;
}

.custom-context-share-head {
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.custom-context-share-title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-context-share-title-wrap strong {
  font-size: 13px;
  line-height: 1.2;
  color: var(--black);
}

.custom-context-share-title-wrap small {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
  word-break: break-word;
}

.custom-context-share-friends {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(44vh, 260px);
  overflow-y: auto;
  padding: 0;
}

.custom-context-share-friend {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-context-share-friend:hover {
  background: rgba(26, 92, 255, 0.1);
}

.custom-context-share-friend.is-sending {
  opacity: 0.68;
}

.custom-context-share-friend-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: color-mix(in srgb, var(--white) 85%, #d8e4ff 15%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--muted) 74%, var(--blue) 26%);
  font-size: 16px;
  flex-shrink: 0;
}

.custom-context-share-friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-context-share-friend-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.custom-context-share-friend-meta strong,
.custom-context-share-friend-meta small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-context-share-friend-meta strong {
  color: var(--black);
  font-size: 13px;
  line-height: 1.2;
}

.custom-context-share-friend-meta small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.2;
}

.custom-context-share-friend-send {
  width: 18px;
  height: 18px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6f9eff;
  background: transparent;
  flex-shrink: 0;
  font-size: 14px;
}

.custom-context-share-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin: 4px 8px;
  padding: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-context-share-empty.is-error {
  border-color: rgba(240, 65, 72, 0.4);
  color: var(--danger);
}

.custom-context-share-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 4px;
}

.custom-context-share-status {
  min-height: 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  padding: 0 8px 2px;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.custom-context-share-status.is-visible {
  min-height: 18px;
  opacity: 1;
}

.custom-context-share-status.is-error {
  color: var(--danger);
}

html.dark-mode .messages-link-card-placeholder,
html.dark-mode .custom-context-share-friend {
  background: linear-gradient(120deg, rgba(16, 24, 42, 0.94), rgba(12, 19, 34, 0.96));
}

html.dark-mode .messages-entity-card {
  background: linear-gradient(120deg, rgba(21, 31, 55, 0.9), rgba(12, 20, 37, 0.96));
  border-color: rgba(117, 146, 210, 0.4);
  box-shadow: 0 12px 24px rgba(5, 8, 16, 0.38);
}

html.dark-mode .custom-context-share-friend:hover {
  background: rgba(122, 163, 255, 0.14);
}

html.dark-mode .custom-context-menu--share {
  background: linear-gradient(120deg, rgba(7, 13, 24, 0.98), rgba(10, 18, 34, 0.99));
  border-color: rgba(117, 146, 210, 0.36);
}

html.dark-mode .custom-context-share-head,
html.dark-mode .custom-context-share-footer {
  border-color: rgba(117, 146, 210, 0.28);
}

html.dark-mode .custom-context-share-friend-avatar {
  border-color: rgba(117, 146, 210, 0.45);
  background: rgba(15, 28, 54, 0.9);
  color: #9db9ff;
}

html.dark-mode .custom-context-share-friend-send {
  color: #9ec0ff;
  background: transparent;
}

html.dark-mode .custom-context-share-title-wrap strong,
html.dark-mode .custom-context-share-friend-meta strong {
  color: #edf2ff;
}

html.dark-mode .custom-context-share-title-wrap small,
html.dark-mode .custom-context-share-friend-meta small,
html.dark-mode .custom-context-share-empty,
html.dark-mode .messages-link-card-placeholder {
  color: #9eaad1;
}

html.dark-mode .messages-entity-card:hover {
  border-color: rgba(142, 174, 255, 0.62);
}

.context-long-press-target,
.context-long-press-target * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 768px) {
  body.context-menu-open,
  body.player-mobile-overlay-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .custom-context-menu,
  .custom-context-menu * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .custom-context-menu {
    left: 0 !important;
    top: 0 !important;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(10, 10, 12, 0.48);
    box-shadow: none;
    transform: none;
    transform-origin: center;
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  }

  .custom-context-menu.open {
    transform: none;
    transition: opacity 0.18s ease;
  }

  .custom-context-menu-list {
    width: 100vw;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -20px 40px rgba(12, 12, 14, 0.25);
    margin: 0;
    padding: 10px 12px calc(22px + env(safe-area-inset-bottom)) 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    touch-action: pan-y;
  }

  .custom-context-menu.open .custom-context-menu-list {
    transform: translateY(0);
  }

  .custom-context-menu.closing {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .custom-context-menu.closing .custom-context-menu-list {
    transform: translateY(100%);
  }

  .custom-context-menu-list::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    margin: 2px auto 10px;
  }

  .custom-context-menu-item {
    font-size: 14px;
    padding: 12px 12px;
    border-radius: 10px;
  }

  .custom-context-menu-mobile-spacer {
    flex: 0 0 auto;
    min-height: 22px;
    height: calc(min(22vh, 180px) + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .custom-context-menu,
  .custom-context-menu.open,
  .custom-context-menu-list {
    transition: none !important;
  }
}

.discovery-home {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.discovery-home .playlists-grid,
.discovery-home .grid-container {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
  margin-top: -6px;
  padding-top: 6px;
  padding-bottom: 14px;
}

.discovery-home .discovery-artist-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  margin-top: -6px;
  padding-top: 6px;
  padding-bottom: 14px;
}

.discovery-home .playlists-grid > .playlist-card {
  flex: 0 0 clamp(148px, 20vw, 196px);
  scroll-snap-align: start;
}

.discovery-home .grid-container > .track-card {
  flex: 0 0 clamp(148px, 20vw, 196px);
  scroll-snap-align: start;
}

.discovery-home .discovery-artist-grid > .discovery-artist-card {
  flex: 0 0 clamp(126px, 17vw, 160px);
  scroll-snap-align: start;
}

.discovery-home .playlist-card {
  padding: 12px;
  border-radius: 10px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.discovery-home .playlist-cover {
  margin-bottom: 10px;
  border-radius: 7px;
}

.discovery-home .playlist-cover-image {
  border-radius: 7px;
}

.discovery-home .playlist-name {
  font-size: 13px;
  margin-bottom: 3px;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-home .playlist-count {
  font-size: 11px;
  margin-bottom: 6px;
}

.discovery-home .playlist-description {
  font-size: 10px;
}

.discovery-home .track-card {
  padding: 10px;
  border-radius: 10px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.discovery-home .track-card.sv-now-playing-track,
.discovery-home .playlist-card.sv-now-playing-track {
  transform: none;
}

.discovery-home .track-card-image-wrapper {
  border-radius: 10px;
  margin-bottom: 8px;
}

.discovery-home .track-info {
  padding: 0 2px;
}

.discovery-home .track-title {
  font-size: 13px;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-home .track-artist {
  font-size: 11px;
}

.discovery-home .track-meta-info {
  font-size: 10px;
  margin-bottom: 0;
}

.discovery-home .play-track-btn-large {
  width: 48px;
  height: 48px;
  font-size: 17px;
  transition: transform 0.14s ease, background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.discovery-home .play-track-btn-large:hover {
  transform: translateZ(0) scale(1.06);
}

.discovery-home .play-track-btn-large:active {
  transform: translateZ(0) scale(0.96);
}

.discovery-home .play-track-btn-large.is-now-playing {
  animation: none;
  transform: translateZ(0) scale(1.03);
}

.discovery-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.discovery-section h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.3px;
}

.profile-section-count {
  color: var(--muted);
  font-size: 12px;
}

.profile-label-empty-state {
  margin: 0;
  min-height: 88px;
}

.profile-label-releases-section .playlist-count {
  color: var(--black);
}

.discovery-home .profile-label-releases-section .playlists-grid > .playlist-card {
  width: clamp(148px, 20vw, 196px);
  min-width: 0;
  max-width: clamp(148px, 20vw, 196px);
}

.profile-label-releases-section .playlist-info {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.profile-label-releases-section .playlist-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-soft-intro {
  gap: 8px;
}

.discovery-soft-note {
  margin: 0;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.discovery-home-top-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.discovery-top-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(26, 92, 255, 0.06), rgba(26, 92, 255, 0));
  text-decoration: none;
  color: var(--black);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.discovery-top-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12, 12, 14, 0.12);
}

.discovery-top-card-cover {
  width: 58px;
  height: 58px;
  background: rgba(26, 92, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 20px;
}

.discovery-top-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discovery-top-card-text {
  min-width: 0;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.discovery-top-card-text strong,
.discovery-top-card-text small,
.discovery-top-card-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-top-card-type {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.discovery-top-card-text strong {
  font-size: 12px;
}

.discovery-top-card-text small {
  font-size: 11px;
  color: var(--muted);
}

.discovery-artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.discovery-artist-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--black);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.discovery-artist-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
}

.discovery-artist-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 36px;
}

.discovery-artist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discovery-artist-card strong {
  font-size: 13px;
  text-align: center;
}

.discovery-artist-card span {
  font-size: 11px;
  color: var(--muted);
}

.player-queue-panel {
  position: fixed;
  right: 14px;
  bottom: 88px;
  width: min(420px, calc(100vw - 20px));
  max-height: min(72vh, 620px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(12, 12, 14, 0.25);
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s linear 0.3s;
  display: flex;
  flex-direction: column;
}

.player-queue-mobile-now,
.player-queue-flight-dot {
  display: none;
}

.player-comments-panel {
  z-index: 125;
}

.player-comments-panel .player-queue-panel-header h3 {
  gap: 8px;
}

.player-comments-panel-body {
  gap: 12px;
}

.player-expanded-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.player-expanded-comments-header h4 {
  margin: 0;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.player-expanded-comments-track {
  font-size: 12px;
  color: var(--muted);
}

.player-expanded-comments-now-cover,
.player-expanded-comments-now-copy > span {
  display: none;
}

.player-expanded-comments-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-expanded-comments-compose.sd-comment-compose {
  flex-direction: row;
  gap: 12px;
  margin-bottom: 12px;
}

.player-expanded-comments-compose textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  resize: vertical;
  min-height: 52px;
}

.player-expanded-comments-compose .sd-comment-input-wrap textarea {
  padding: 10px 14px;
  font-size: 14px;
  min-height: 52px;
}

.player-expanded-comments-login,
.player-expanded-comments-empty {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.player-expanded-comments-empty.sd-no-comments {
  font-size: 14px;
  padding: 24px 0;
  margin: 0 !important;
}

.player-expanded-comments-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: none;
  overflow: visible;
}

.player-comments-panel .sd-comment-item {
  padding: 14px 0;
}

.player-expanded-comment-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-expanded-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.player-expanded-comment-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.player-expanded-comment-author {
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
}

.player-expanded-comment-time {
  font-size: 11px;
  color: var(--muted);
}

.player-expanded-comment-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.player-expanded-comment-actions {
  display: flex;
  justify-content: flex-end;
}

.player-expanded-comment-seek {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}

.player-queue-panel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
}

.player-party-panel {
  z-index: 126;
}

.player-party-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.player-party-status-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.player-party-role-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--blue);
}

.player-party-code-row {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.player-party-code-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.player-party-code-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}

.player-party-forms,
.player-party-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-party-form-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.player-party-join-group input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
}

.player-party-member-role {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.player-party-member-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.player-queue-panel.party-readonly .queue-move-btn,
.player-queue-panel.party-readonly .queue-play-now-btn,
.player-queue-list.party-readonly .queue-move-btn,
.player-queue-list.party-readonly .queue-play-now-btn {
  opacity: 0.45;
  pointer-events: none;
}

.player-queue-panel.party-readonly .player-queue-item {
  touch-action: pan-y;
}

.player-queue-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.player-queue-panel-header h3 {
  margin: 0;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.player-queue-panel-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.player-queue-panel-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
}

.player-queue-group h4 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.player-queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.player-queue-list .player-queue-item {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--white);
  position: relative;
  transition: transform 0.18s ease, opacity 0.18s ease;
  touch-action: pan-y;
}

.player-queue-list .player-queue-item[draggable="true"] {
  cursor: grab;
}

.player-queue-list .player-queue-item.is-dragging {
  opacity: 0.62;
}

.player-queue-list .player-queue-item.is-drag-over {
  outline: 2px solid var(--blue);
}

.player-queue-list .player-queue-item-cover {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(26, 92, 255, 0.08);
}

.player-queue-list .player-queue-item-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-queue-list .player-queue-item-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.player-queue-list .player-queue-item-title,
.player-queue-list .player-queue-item-artist {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-queue-list .player-queue-item-title {
  font-size: 13px;
  font-weight: 700;
}

.player-queue-list .player-queue-item-artist {
  font-size: 12px;
  color: var(--muted);
}

.player-queue-list .player-queue-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
}

.queue-remove-btn {
  color: var(--danger);
}

.player-queue-clear-btn {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 11px;
  font: 800 12px/1 "Syne", sans-serif;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.player-queue-clear-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(26, 92, 255, 0.08);
}

.player-queue-item-grip {
  display: none;
}

.player-expanded-credits-body {
  display: grid;
  gap: 14px;
}

.player-credit-heading {
  margin: 4px 0 0;
  font-size: 0.95rem;
}

.player-credit-list {
  display: grid;
  gap: 8px;
}

.player-credit-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
}

.player-credit-row span {
  color: var(--gray);
}

.player-credit-row strong {
  text-align: right;
}

.player-panel-loading {
  min-height: 72px;
}

.library-filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 16px;
  margin-top: -4px;
}

.library-filter-chip,
.search-filter-chip {
  white-space: nowrap;
}

.library-filter-chip {
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 700;
  cursor: pointer;
}

.library-filter-chip.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.search-suggest-anchor {
  position: relative;
}

.search-suggest-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 2500;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  border-radius: 14px;
  padding: 8px;
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transform-origin: top center;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.search-suggest-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.search-suggest-title {
  color: var(--gray);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 8px;
  text-transform: uppercase;
}

.search-suggest-row {
  border: 0;
  background: transparent;
  color: var(--text-color);
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
}

.search-suggest-row:hover,
.search-suggest-row:focus-visible {
  background: var(--hover-bg);
  outline: none;
}

.search-suggest-row small {
  color: var(--gray);
  font-size: 0.76rem;
}

.search-suggest-skeleton {
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.14), rgba(148, 163, 184, 0.26), rgba(148, 163, 184, 0.14));
  background-size: 180% 100%;
  animation: sv-skeleton-pulse 1.1s ease-in-out infinite;
}

@keyframes sv-skeleton-pulse {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (max-width: 768px) {
  .mobile-top-search-form .search-suggest-panel {
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  }

  .mobile-top-search-form .search-suggest-row {
    width: 100%;
    height: auto;
    border: 0;
    background: transparent;
    color: var(--text-color);
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    justify-content: initial;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    text-align: left;
  }

  .mobile-top-search-form .search-suggest-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.sd-comment-action.is-liked {
  color: var(--blue);
  border-color: rgba(26, 92, 255, 0.35);
  background: rgba(26, 92, 255, 0.08);
}

.sd-comment-action.is-animating .fa-heart {
  animation: sdCommentHeartPulse 360ms ease;
}

.sd-comment-pinned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  color: var(--blue);
  font-weight: 800;
}

@keyframes sdCommentHeartPulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.sv-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.18);
}

.sv-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent);
  animation: svSkeleton 1.2s infinite;
}

@keyframes svSkeleton {
  to { transform: translateX(100%); }
}

.player-queue-list .player-queue-item--auto {
  padding-right: 10px;
}

.player-queue-list .player-queue-item--with-actions .player-queue-item-meta {
  padding-right: 4px;
}

body.onboard-page .main-content .container {
  max-width: 1040px;
  padding-top: 10px;
}

.onboard-shell {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(26, 92, 255, 0.08), rgba(26, 92, 255, 0.02) 45%, rgba(255, 255, 255, 0.98));
  overflow: hidden;
  padding: 28px;
  min-height: 640px;
}

.onboard-ambient {
  position: absolute;
  inset: -120px;
  background:
    radial-gradient(circle at 15% 20%, rgba(120, 147, 254, 0.22), transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(26, 92, 255, 0.24), transparent 44%);
  pointer-events: none;
}

.onboard-header,
.onboard-stage-wrap {
  position: relative;
  z-index: 1;
}

.onboard-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(26, 92, 255, 0.18);
  background: rgba(255, 255, 255, 0.84);
  color: var(--blue);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.onboard-header h1 {
  margin: 12px 0 8px;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -1.1px;
}

.onboard-header p {
  margin: 0;
  max-width: 720px;
  color: var(--text-secondary);
}

.onboard-progress {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.onboard-progress-pill {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}

.onboard-progress-pill span {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
}

.onboard-progress-pill.is-active,
.onboard-progress-pill.is-complete {
  border-color: rgba(26, 92, 255, 0.3);
  color: var(--black);
}

.onboard-progress-pill.is-complete span,
.onboard-progress-pill.is-active span {
  background: var(--blue);
  color: var(--white);
}

.onboard-stage-wrap {
  margin-top: 24px;
}

.onboard-stage {
  display: none;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(26, 92, 255, 0.14);
  border-radius: 18px;
  padding: 18px;
  animation: onboardStageIn 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboard-stage.is-active {
  display: block;
}

@keyframes onboardStageIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.onboard-stage-head h2 {
  margin: 0;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 24px;
}

.onboard-stage-head p {
  margin: 6px 0 0;
  color: var(--text-secondary);
}

.onboard-genres-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
}

.onboard-genre-card {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 14px;
  color: var(--black);
  text-align: left;
  padding: 10px;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.onboard-genre-card:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 92, 255, 0.38);
  box-shadow: 0 12px 26px rgba(26, 92, 255, 0.14);
}

.onboard-genre-card.is-selected {
  border-color: rgba(26, 92, 255, 0.5);
  background: rgba(26, 92, 255, 0.07);
}

.onboard-genre-card-media {
  width: 54px;
  height: 54px;
  border-radius: 11px;
  overflow: hidden;
  background: rgba(26, 92, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 20px;
}

.onboard-genre-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.onboard-genre-card-meta strong {
  display: block;
  font-size: 14px;
}

.onboard-genre-card-meta span {
  font-size: 11px;
  color: var(--muted);
}

.onboard-genre-check {
  color: var(--blue);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.18s ease;
}

.onboard-genre-card.is-selected .onboard-genre-check {
  opacity: 1;
  transform: scale(1);
}

.onboard-stage-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.onboard-stage-actions-split {
  justify-content: space-between;
  gap: 12px;
}

.onboard-search-box {
  margin-top: 16px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}

.onboard-search-box i {
  color: var(--muted);
}

.onboard-search-box input {
  border: none;
  box-shadow: none;
  padding: 12px 0;
}

.onboard-search-box input:focus {
  box-shadow: none;
}

.onboard-selected {
  margin-top: 12px;
  min-height: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.onboard-selected-chip {
  border: 1px solid rgba(26, 92, 255, 0.3);
  background: rgba(26, 92, 255, 0.1);
  color: var(--blue);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.onboard-artist-results {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.onboard-artist-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  padding: 10px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.onboard-artist-card.is-selected {
  border-color: rgba(26, 92, 255, 0.4);
  background: rgba(26, 92, 255, 0.06);
}

.onboard-artist-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 92, 255, 0.12);
  color: var(--blue);
}

.onboard-artist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.onboard-artist-meta {
  min-width: 0;
}

.onboard-artist-meta strong,
.onboard-artist-meta span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.onboard-artist-meta strong {
  font-size: 14px;
}

.onboard-artist-meta span {
  font-size: 12px;
  color: var(--muted);
}

.onboard-artist-action {
  min-width: 78px;
}

.onboard-summary {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.onboard-summary-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  padding: 12px;
}

.onboard-summary-card h3 {
  margin: 0;
  font-size: 14px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.onboard-summary-chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.onboard-summary-chips span {
  border: 1px solid rgba(26, 92, 255, 0.22);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  background: rgba(26, 92, 255, 0.06);
}

.onboard-notification-options {
  display: grid;
  gap: 10px;
}

.onboard-notification-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  border-radius: 14px;
  font-weight: 700;
}

.onboard-notification-row span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.onboard-notification-row input {
  width: 20px;
  height: 20px;
}

.onboard-hint,
.onboard-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.onboard-empty {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.6);
}

.onboard-loading {
  position: absolute;
  inset: 0;
  background: rgba(250, 251, 255, 0.78);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.onboard-loading.is-visible {
  display: flex;
}

.onboard-loading-card {
  border: 1px solid rgba(26, 92, 255, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  padding: 22px 24px;
  text-align: center;
  min-width: 280px;
  box-shadow: 0 26px 40px rgba(14, 32, 80, 0.22);
}

.onboard-loading-card h3 {
  margin: 10px 0 4px;
  font-size: 22px;
}

.onboard-loading-card p {
  margin: 0;
  color: var(--text-secondary);
}

.onboard-loading-spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(26, 92, 255, 0.22);
  border-top-color: var(--blue);
  margin: 0 auto;
  animation: onboardSpin 0.8s linear infinite;
}

@keyframes onboardSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .onboard-shell {
    padding: 18px;
    min-height: 560px;
  }

  .onboard-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .onboard-progress-pill {
    font-size: 11px;
  }

  .onboard-genres-grid {
    grid-template-columns: 1fr;
  }

  .onboard-stage-actions,
  .onboard-stage-actions-split {
    flex-direction: column;
    align-items: stretch;
  }

  .onboard-stage-actions .btn {
    width: 100%;
  }
}

.queue-move-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.queue-move-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.player-queue-empty {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px;
  color: var(--text-secondary);
  font-size: 13px;
}

@media (max-width: 768px) {
  .player-queue-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-height: 88dvh;
    border-radius: 28px 28px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transform: translateY(100%);
    z-index: 900;
  }

  .player-expanded-panel.is-queue-view .player-expanded-header {
    background: transparent;
  }

  .player-expanded-panel.is-queue-view .player-expanded-content {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-auto-rows: auto;
    justify-content: flex-start;
    align-items: center;
    padding: calc(52px + env(safe-area-inset-top)) 20px calc(96px + env(safe-area-inset-bottom));
    column-gap: 12px;
    row-gap: 24px;
    overflow-y: auto;
    scroll-behavior: auto;
  }

  .player-expanded-panel.is-queue-view::after {
    content: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(156px + env(safe-area-inset-top));
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    pointer-events: none;
    z-index: 4;
  }

  .player-expanded-panel.is-queue-view .player-expanded-cover {
    position: relative;
    order: 1;
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    margin: 0;
    flex: none;
    border-radius: 8px;
    z-index: 2;
    transform: scale(1);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.16);
    transition-delay: 0s;
  }

  .player-expanded-panel.is-queue-view .player-expanded-info {
    position: relative;
    order: 2;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: none;
    z-index: 2;
    text-align: left;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .player-expanded-panel.is-queue-view .player-expanded-title-row {
    width: 100%;
    min-width: 0;
    margin: 0 0 3px;
  }

  .player-expanded-panel.is-queue-view .player-expanded-info h2 {
    width: 100%;
    min-width: 0;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 800;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .player-expanded-panel.is-queue-view #playerExpandedTitleText {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .player-expanded-panel.is-queue-view .player-expanded-info p {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-expanded-panel.is-queue-view .player-expanded-info .player-artist-link {
    display: inline;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-expanded-panel.is-queue-view .player-expanded-progress {
    position: relative;
    order: 4;
    grid-column: 1 / -1;
    flex: 0 0 auto;
    width: min(560px, 100%);
    margin: 10px 0 0;
  }

  .player-expanded-panel.is-queue-view .player-expanded-controls {
    position: relative;
    order: 5;
    grid-column: 1 / -1;
    flex: 0 0 auto;
    width: min(560px, 100%);
    margin: 2px 0 0;
  }

  .player-expanded-panel.is-queue-view .player-expanded-lyrics-card {
    order: 6;
    grid-column: 1 / -1;
    flex: 0 0 auto;
    margin-top: 24px;
  }

  .player-expanded-panel.is-queue-view .player-expanded-cherry-preview {
    order: 7;
    grid-column: 1 / -1;
    flex: 0 0 auto;
  }

  .player-expanded-panel.is-queue-view .player-expanded-comments-preview {
    order: 8;
    grid-column: 1 / -1;
    flex: 0 0 auto;
  }

  .player-expanded-panel.is-queue-view .player-expanded-drawer-grid {
    order: 9;
    grid-column: 1 / -1;
    flex: 0 0 auto;
  }

  .player-expanded-panel.is-queue-view #playerExpandedQueueBtn {
    background: rgba(var(--player-expanded-text-rgb), 0.18);
    border-radius: 999px;
    transform: scale(1.08);
  }

  .player-expanded-panel.is-queue-view #playerQueuePanel {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    order: 3;
    grid-column: 1 / -1;
    width: min(560px, 100%);
    flex: 0 0 clamp(300px, 40dvh, 460px);
    height: clamp(300px, 40dvh, 460px);
    min-height: clamp(300px, 40dvh, 460px);
    max-height: clamp(300px, 40dvh, 460px);
    border: 1px solid rgba(var(--player-expanded-accent-rgb), 0.24);
    border-radius: 20px;
    box-shadow: none;
    background: rgba(var(--player-expanded-overlay-rgb), 0.32);
    backdrop-filter: blur(16px) saturate(118%);
    padding: 14px;
    overflow: hidden;
    z-index: 4 !important;
    opacity: 0;
    visibility: visible;
    transform: translateY(14px);
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.22s ease,
      background 0.28s ease,
      border-color 0.28s ease;
    pointer-events: auto;
  }

  .player-expanded-panel.is-queue-view #playerQueuePanel.open {
    opacity: 1;
    transform: translateY(0);
  }

  .player-expanded-panel.is-queue-view.is-queue-closing #playerQueuePanel {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
  }

  .player-expanded-panel.is-queue-view.is-queue-closing .player-queue-panel-header,
  .player-expanded-panel.is-queue-view.is-queue-closing .player-queue-panel-body {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .player-expanded-panel.is-queue-view .player-queue-mobile-now,
  .player-expanded-panel.is-queue-view #playerQueueCloseBtn {
    display: none;
  }

  .player-expanded-panel.is-queue-view .player-queue-panel-header {
    position: relative;
    top: auto;
    padding: 0 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .player-expanded-panel.is-queue-view .player-queue-panel-header h3 {
    font-size: 22px;
    color: rgb(var(--player-expanded-text-rgb));
  }

  .player-expanded-panel.is-queue-view .player-queue-panel-header h3 i {
    display: none;
  }

  .player-expanded-panel.is-queue-view .player-queue-panel-controls .player-btn-small,
  .player-expanded-panel.is-queue-view .player-queue-clear-btn {
    border: 0;
    background: rgba(var(--player-expanded-text-rgb), 0.1);
    color: rgb(var(--player-expanded-text-rgb));
    border-radius: 999px;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
  }

  .player-expanded-panel.is-queue-view #playerQueueLoopBtn[data-loop-mode="off"] {
    min-width: 72px;
    background: rgba(var(--player-expanded-text-rgb), 0.05);
    color: rgba(var(--player-expanded-muted-rgb), 0.68);
    box-shadow: inset 0 0 0 1px rgba(var(--player-expanded-text-rgb), 0.14);
  }

  .player-expanded-panel.is-queue-view #playerQueueLoopBtn[data-loop-mode="off"] span {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 850;
  }

  .player-expanded-panel.is-queue-view .player-queue-clear-btn {
    display: inline-flex;
    min-width: 88px;
    color: rgba(var(--player-expanded-muted-rgb), 0.98);
    font-size: 14px;
  }

  .player-expanded-panel.is-queue-view .player-queue-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 0 2px 8px 0;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  }

  .player-expanded-panel.is-queue-view .player-queue-group h4 {
    color: rgba(var(--player-expanded-muted-rgb), 0.9);
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
  }

  .player-expanded-panel.is-queue-view .player-queue-list {
    gap: 7px;
  }

  .player-expanded-panel.is-queue-view .player-queue-list .player-queue-item {
    border: 0;
    border-radius: 12px;
    background: transparent;
    padding: 6px 0;
    gap: 12px;
    animation: queueItemCascadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--queue-item-index, 0) * 42ms);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }

  .player-expanded-panel.is-queue-view .player-queue-list .player-queue-item[data-queue-type="user"] {
    cursor: grab;
    touch-action: pan-y;
  }

  @keyframes queueItemCascadeIn {
    0% {
      opacity: 0;
      transform: translateY(12px) scale(0.985);
      filter: blur(5px);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  .player-expanded-panel.is-queue-view .player-queue-list .player-queue-item-cover {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    border-radius: 9px;
  }

  .player-expanded-panel.is-queue-view .player-queue-list .player-queue-item-title {
    font-size: 17px;
    color: rgb(var(--player-expanded-text-rgb));
  }

  .player-expanded-panel.is-queue-view .player-queue-list .player-queue-item-artist {
    font-size: 14px;
    color: rgba(var(--player-expanded-muted-rgb), 0.86);
  }

  .player-expanded-panel.is-queue-view .player-queue-list .player-queue-item-actions {
    display: none;
  }

  .player-expanded-panel.is-queue-view .player-queue-list .player-queue-item .player-queue-item-grip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin-left: auto;
    border-radius: 999px;
    background: rgba(var(--player-expanded-text-rgb), 0.1);
    color: rgba(var(--player-expanded-text-rgb), 0.82);
    font-weight: 900;
    line-height: 1;
    font-size: 22px;
    padding: 0;
    touch-action: none;
    box-shadow: inset 0 0 0 1px rgba(var(--player-expanded-text-rgb), 0.08);
  }

  .player-expanded-panel.is-queue-view .player-queue-item-grip i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .player-expanded-panel.is-queue-view .player-queue-list.is-touch-reordering .player-queue-item {
    opacity: 0.58;
  }

  .player-expanded-panel.is-queue-view .player-queue-list .player-queue-item.is-dragging {
    opacity: 1;
    background: rgba(var(--player-expanded-overlay-rgb), 0.42);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(var(--player-expanded-text-rgb), 0.12);
  }

  .player-expanded-panel.is-queue-view .player-queue-list .player-queue-item.is-dragging .player-queue-item-grip {
    background: rgb(var(--player-expanded-text-rgb));
    color: rgb(var(--player-expanded-bg-rgb));
    transform: scale(1.08);
  }

  .player-expanded-panel.is-queue-view .player-queue-empty {
    border-color: rgba(var(--player-expanded-accent-rgb), 0.28);
    background: rgba(var(--player-expanded-overlay-rgb), 0.28);
    color: rgba(var(--player-expanded-muted-rgb), 0.92);
  }

  .player-comments-panel {
    z-index: 901;
  }

  .player-queue-panel.open {
    transform: translateY(0);
  }

  .player-queue-panel-header {
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 2;
    padding: 12px;
    border-radius: 28px 28px 0 0;
  }

  .player-queue-panel-body {
    max-height: calc(88dvh - 58px);
    padding: 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    overscroll-behavior-y: contain;
  }

  .player-queue-list .player-queue-item {
    padding: 10px;
  }

  .player-queue-list .player-queue-item-cover {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }

  .player-queue-list .player-queue-item {
    gap: 8px;
  }

  .player-queue-list .player-queue-item-title {
    font-size: 14px;
  }

  .player-queue-list .player-queue-item-artist {
    font-size: 12px;
  }

  .queue-move-btn {
    width: 30px;
    height: 30px;
  }

  .player-party-code-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .player-party-form-group {
    flex-direction: column;
    align-items: stretch;
  }

  .player-party-form-group .btn {
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .discovery-home-top-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-queue-panel {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 82px;
    max-height: 62vh;
  }
}

@media (max-width: 640px) {
  .discovery-home-top-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .discovery-top-card {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    border-radius: 10px;
    min-height: 44px;
    padding: 0;
  }

  .discovery-top-card-cover {
    width: 44px;
    height: 44px;
    aspect-ratio: auto;
    font-size: 15px;
  }

  .discovery-top-card-text {
    padding: 0 6px 0 0;
    gap: 1px;
  }

  .discovery-top-card-type {
    display: block;
    font-size: 9px;
  }

  .discovery-top-card-text strong {
    font-size: 11px;
  }

  .discovery-top-card-text small {
    display: none;
  }
}

.usernamee {
  overflow-wrap: anywhere;
}

.sa-widget,
.secondary-artists-widget {
  width: 100%;
}

.sa-search-wrap {
  position: relative;
  margin-bottom: 8px;
}

.sa-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #333);
  outline: none;
  transition: border-color 0.2s;
}

.sa-search-input:focus {
  border-color: var(--primary-color, #6366f1);
}

.sa-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 2000;
  margin-top: 4px;
  overflow: hidden;
}

.sa-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.sa-dropdown-item:hover {
  background: var(--bg-secondary, #f5f5f5);
}

.sa-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sa-list:not(:empty) {
  margin-bottom: 12px;
}

.secondary-artists-widget .sa-list:not(:empty) + .sa-search-wrap,
.sa-widget .sa-list:not(:empty) + .sa-search-wrap {
  margin-top: 10px;
}

.sa-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary, #f3f3f3);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 20px;
  padding: 4px 10px 4px 4px;
  font-size: 13px;
}

.sa-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.sa-avatar-icon {
  font-size: 24px;
  color: var(--text-muted, #999);
}

.sa-name {
  color: var(--text-primary, #333);
  font-weight: 500;
}

.sa-handle {
  color: var(--text-muted, #888);
  font-size: 12px;
}

.sa-status {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}

.sa-status-pending {
  background: #fef3c7;
  color: #92400e;
}

.sa-status-accepted {
  background: #d1fae5;
  color: #065f46;
}

.sa-status-declined {
  background: #fee2e2;
  color: #991b1b;
}

.sa-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #999);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}

.sa-remove-btn:hover {
  color: var(--danger-color, #ef4444);
}

.sa-dropdown-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.sa-dropdown-avatar-icon {
  font-size: 28px;
  color: var(--text-muted, #999);
  flex-shrink: 0;
}

.sa-dropdown-name {
  font-size: 14px;
  color: var(--text-primary, #333);
  font-weight: 500;
}

.sa-dropdown-handle {
  font-size: 12px;
  color: var(--text-muted);
}

.sa-inline-link {
  color: var(--muted) !important;
  text-decoration: none;
  transition: color 0.15s;
}

.sa-inline-link:hover {
  color: var(--blue);
  text-decoration: underline;
}

.sa-separator {
  color: var(--blue);
  margin: 0 2px;
}

.sd-artist-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
}

.sd-secondary-artist-link {
  font-size: var(--blue);
  opacity: 0.85;
}

.player-artist-link {
  color: var(--blue);
  text-decoration: none;
  transition: opacity 0.15s;
}

.player-artist-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}




@media (max-width: 1000px) {
  .player-footer {
    z-index: 2000 !important;
  }

  .player-wrapper {
    z-index: 1000 !important;
  }
  .mobile-bottom-nav {
    z-index: 1001 !important;
  }

  .player-wrapper {
    z-index: 1002 !important;
  }

  .mobile-top-nav-action {
    z-index: 1003 !important;
  }
  .mobile-top-nav {
    z-index: 1002 !important;
  }
  .loading-overlay {
    z-index: 700 !important;
  }
  .player-expanded-panel {
    z-index: 2000 !important;
  }
  .player-expanded-header {
    z-index: 2001 !important;
  }
  .player-expanded-header-actions {
    z-index: 2002 !important;
  }
  .player-expanded-progress {
    z-index: 2003 !important;
  }
  .player-expanded-content {
    z-index: 2000 !important;
  }
  #playerSection {
    z-index: 1999 !important;
  }

  .player-queue-panel {
    z-index: 3000 !important;
  }


  .mobile-account-panel {
    z-index: 3001 !important;
  }

  .mbr {
    display: none;
  }

  .sidebar-nav-mobile {
    display: block;
    background-color: var(--white);
  }
}

button {
  font-family: "Syne"
}

.custom-context-menu-item {
  font-family: "Syne";
}

.sidebar-link.is-active {
  border-radius: 12px !important;
}

.sidebar-link.active {
  border-radius: 12px !important;
}

.cherry-summary-section {
  background: #FAFAFA;
  border-radius: 10px;
  padding: 24px 28px;
  border: 1px solid var(--border);
}

.cherry-summary-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cherry-icon {
  font-size: 1.1em;
}

.cherry-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 8px 0;
}

.cherry-bounce {
  display: inline-block;
  animation: cherryBounce 0.6s ease-in-out infinite alternate;
  font-size: 1.2em;
}

@keyframes cherryBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

.cherry-summary-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
}

.cherry-sub-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin: 0 0 10px 0;
}

.cherry-themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.cherry-theme-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
}

.cherry-theme-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
  margin-bottom: 4px;
}

.cherry-theme-example {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

.cherry-moods {
  margin-bottom: 16px;
}

.cherry-moods-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cherry-mood-badge {
  background: #F2F2F7;
  color: var(--black);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
}

.cherry-age-badge {
  display: inline-block;
  background: var(--black);
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.cherry-error {
  color: var(--text-secondary);
  font-size: 14px;
  padding: 8px 0;
}

.clips-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.clips-tabs {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 810;
  display: flex;
  gap: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 3px;
}

.clips-tabs[hidden],
.clips-artist-context[hidden] {
  display: none !important;
}

.clips-artist-context {
  position: absolute;
  z-index: 810;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(78vw, 360px);
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .52);
  color: #fff;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.clips-artist-context-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
}

.clips-artist-context-avatar img { width:100%; height:100%; object-fit:cover; }
.clips-artist-context > span:last-child { min-width:0; }
.clips-artist-context small,
.clips-artist-context strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clips-artist-context small { color:rgba(255,255,255,.58); font-size:8px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.clips-artist-context strong { margin-top:2px; font-size:12px; }

.clips-tab {
  padding: 7px 20px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 700;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.clips-tab.is-active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.clips-feed {
  flex: 1;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.clips-feed::-webkit-scrollbar {
  display: none;
}

.clips-card {
  width: 100%;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20vh;
  box-sizing: border-box;
  overflow: hidden;
}

.clips-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: background 0.4s ease;
}

.clips-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

.clips-cover-wrap {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
}

.clips-cover-wrap:active {
  transform: scale(0.95);
}

.clips-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clips-cover-muted-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.clips-cover-muted-icon i {
  font-size: 36px;
  color: #fff;
}

.clips-card.is-muted .clips-cover-muted-icon {
  opacity: 1;
}

.clips-falling-bookmark {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  font-size: 42px;
  color: var(--blue);
  transform: translate(-50%, -50%) scale(0.22) rotate(var(--fall-rot-start, 0deg));
  opacity: 0;
  filter: drop-shadow(0 2px 8px rgba(59,130,246,0.5));
}

.clips-falling-bookmark.is-animating {
  animation: clips-bookmark-fall 0.92s cubic-bezier(.18,.72,.28,1) forwards;
}

@keyframes clips-bookmark-fall {
  0% {
    transform: translate(-50%, -50%) scale(0.22) rotate(var(--fall-rot-start, 0deg));
    opacity: 0;
  }
  14% {
    transform: translate(-50%, calc(-50% + 8px)) scale(1.02) rotate(calc(var(--fall-rot-start, 0deg) * 0.75));
    opacity: 1;
  }
  100% {
    transform: translate(-50%, calc(-50% + 122px)) scale(0.58) rotate(var(--fall-rot-end, 0deg));
    opacity: 0;
  }
}

.clips-save-particle {
  position: absolute;
  z-index: 10;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  animation: clips-particle-burst 0.65s cubic-bezier(.15,.6,.35,1) forwards;
}

@keyframes clips-particle-burst {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

.clips-rain-bookmark {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  font-size: var(--size, 26px);
  color: #93c5fd;
  text-shadow: 0 0 12px rgba(147, 197, 253, 0.62), 0 3px 14px rgba(0, 0, 0, 0.35);
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.42));
  opacity: 0;
  transform: translate(-50%, -40%) rotate(0deg) scale(0.92);
}

.clips-rain-bookmark.is-animating {
  animation: clips-bookmark-rain 1.45s cubic-bezier(.2,.65,.2,1) forwards;
}

@keyframes clips-bookmark-rain {
  0% {
    opacity: 0;
    transform: translate(-50%, -10vh) rotate(0deg) scale(0.86);
  }
  14% {
    opacity: 1;
    transform: translate(calc(-50% + (var(--drift, 0px) * 0.24)), 0vh) rotate(calc(var(--spin, 0deg) * 0.24)) scale(1.02);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift, 0px)), 110vh) rotate(var(--spin, 0deg)) scale(0.9);
  }
}

.clips-save-pop {
  animation: clips-save-pop-scale 0.4s cubic-bezier(.2,.8,.3,1.4);
}

@keyframes clips-save-pop-scale {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.clips-cover-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.clips-cover-loading.is-visible {
  opacity: 1;
}

.clips-cover-loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: clips-spin 0.75s linear infinite;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}

.clips-center-col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.clips-lyrics-wrap {
  width: 260px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  perspective: 600px;
}

.clips-lyrics-line {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  line-height: 1.4;
  max-width: 100%;
  transition: opacity 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1), filter 0.35s cubic-bezier(.4,0,.2,1);
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
  filter: blur(0px);
  will-change: opacity, transform, filter;
}

.clips-lyrics-line.clips-lyrics-idle {
  opacity: 0;
}

.clips-lyrics-line.clips-lyrics-exit {
  opacity: 0;
  transform: translateY(-8px) scale(0.92) rotateX(20deg);
  filter: blur(4px);
  transition-duration: 0.18s;
}

.clips-lyrics-line.clips-lyrics-enter {
  opacity: 0;
  transform: translateY(12px) scale(0.95) rotateX(-15deg);
  filter: blur(3px);
  transition-duration: 0s;
}

.clips-card-actions {
  position: absolute;
  right: 12px;
  bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 100px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.clips-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.clips-action-btn i {
  font-size: 30px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.clips-action-btn span {
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.clips-action-btn.is-saved i {
  color: var(--blue);
}

.clips-card-info {
  position: absolute;
  left: 12px;
  right: 60px;
  bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 24px);
  z-index: 3;
}

.clips-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 6px;
  cursor: pointer;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}

.clips-card-title:hover {
  text-decoration: underline;
}

.clips-card-artist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clips-card-artist {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

.clips-card-artist:hover {
  text-decoration: underline;
}

.clips-follow-btn {
  padding: 4px 12px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
  font-family: inherit;
}

.clips-follow-btn.is-following {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
}

.clips-follow-btn:active {
  transform: scale(0.95);
}

.clips-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  gap: 12px;
  padding: 40px;
  text-align: center;
}

.clips-empty i {
  font-size: 40px;
}

.clips-empty p {
  font-size: 14px;
  max-width: 260px;
  line-height: 1.5;
}

.clips-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.clips-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: clips-spin 0.7s linear infinite;
}

@keyframes clips-spin {
  to { transform: rotate(360deg); }
}

.clips-progress-bar {
  position: absolute;
  bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
  z-index: 4;
  transition: width 0.2s linear;
}

body.clips-active .player-footer,
body.clips-active .mobile-top-nav {
  display: none !important;
}

body.clips-active .main-content {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.clips-active .main-content .container {
  padding: 0 !important;
  margin: 0 !important;
}

body.clips-active .main-content .container > *:not(.clips-page) {
  display: none !important;
}

body.clips-active #lyricsTheaterPanel {
  display: none !important;
}

@media (max-width: 1023px) {
  .clips-page {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .clips-page {
    display: flex;
    position: fixed;
    top: calc(var(--desktop-top-nav-height) + 8px);
    left: var(--desktop-sidebar-width);
    right: 0;
    bottom: 0;
    z-index: 800;
    background: #000;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  .clips-tabs {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-top: 10px;
    margin-bottom: 0;
    z-index: 820;
  }

  .clips-feed {
    flex: 1;
    width: 100%;
    max-width: 480px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  }

  .clips-card {
    height: 100%;
    min-height: 100%;
    padding-top: 22px;
    padding-bottom: 8vh;
  }

  .clips-cover-wrap {
    width: 280px;
    height: 280px;
    border-radius: 20px;
  }

  .clips-lyrics-wrap {
    width: 340px;
  }

  .clips-lyrics-line {
    font-size: 16px;
  }

  .clips-card-actions {
    right: 20px;
    bottom: 100px;
  }

  .clips-action-btn i {
    font-size: 28px;
  }

  .clips-action-btn span {
    font-size: 13px;
  }

  .clips-card-info {
    left: 20px;
    right: 80px;
    bottom: 32px;
  }

  .clips-card-title {
    font-size: 16px;
  }

  .clips-card-artist {
    font-size: 14px;
  }

  .clips-progress-bar {
    bottom: 0;
  }

  body.clips-active .player-footer {
    display: flex !important;
  }

  body.clips-active .mobile-top-nav {
    display: none !important;
  }

  body.clips-active .main-content {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
}

.cherry-select-page {
  --cs-accent-r: 26;
  --cs-accent-g: 92;
  --cs-accent-b: 255;
  --cs-icon-ink: #ffffff;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px - var(--mobile-player-height, 0px));
  max-height: calc(100dvh - 80px - var(--mobile-player-height, 0px));
  overflow: hidden;
  background: var(--bg);
  transition: background 0.6s ease;
}

.cherry-select-page,
.cherry-select-header-icon,
.cherry-select-welcome-icon,
.cs-msg-dj .cs-msg-avatar,
.cs-typing .cs-msg-avatar,
.cs-play-all-btn,
.cs-track-play-btn,
.cs-track-tag,
.cs-track-commentary i,
.cs-beta-badge,
.cherry-select-speech-btn,
.cherry-select-send-btn,
.cherry-select-compose-inner,
.cherry-select-suggestion,
.cs-track-card {
  transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease;
}

.cherry-select-page.has-dynamic-theme {
  background: linear-gradient(
    180deg,
    rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.08) 0%,
    var(--bg) 40%
  );
}

.cherry-select-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.cherry-select-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 12px;
  flex-shrink: 0;
}

.cherry-select-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 1), rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.88));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--cs-icon-ink);
  flex-shrink: 0;
}

.cherry-select-header-text {
  flex: 1;
  min-width: 0;
}

.cherry-select-header-text h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.cherry-select-header-text p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 2px 0 0;
}

.cherry-select-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cherry-select-header-actions button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s;
}

.cherry-select-header-actions button:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.cherry-select-toggle-btn {
  width: auto !important;
  min-width: 102px;
  padding: 0 12px;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700;
}

.cs-track-card-hidden {
  display: none;
}

.cherry-select-chat {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.cherry-select-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 16px;
  flex: 1;
}

.cherry-select-welcome-icon {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 1), rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.9));
  font-size: 48px;
  color: var(--cs-icon-ink);
  margin-bottom: 16px;
}

.cherry-select-welcome h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.cherry-select-welcome p {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 380px;
  margin: 0 0 20px;
  line-height: 1.5;
}

.cherry-select-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.cherry-select-suggestion {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.cherry-select-suggestion:hover {
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.1);
  border-color: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.3);
}

.cs-msg {
  display: flex;
  gap: 10px;
  animation: csFadeIn 0.3s ease;
}

@keyframes csFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cs-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cs-msg-user .cs-msg-avatar {
  background: var(--hover-bg);
  color: var(--text-secondary);
}

.cs-msg-dj .cs-msg-avatar {
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.98);
  color: var(--cs-icon-ink);
}

.cs-msg-body {
  flex: 1;
  min-width: 0;
}

.cs-msg-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.cs-msg-meta strong {
  color: var(--text-primary);
  font-weight: 600;
  margin-right: 6px;
}

.cs-beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cs-icon-ink);
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.95);
  vertical-align: middle;
}

.cs-msg-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.cs-msg-user .cs-msg-text {
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.08);
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  display: inline-block;
}

.cs-msg-tracks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.cs-track-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.cs-msg-tracks-staged {
  animation: csTracksWrapFadeIn 0.22s ease;
}

@keyframes csTracksWrapFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.cs-play-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 20px;
  border: none;
  background: rgb(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b));
  color: var(--cs-icon-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: inherit;
  align-self: flex-start;
}

.cs-play-all-btn:hover {
  opacity: 0.85;
}

.cs-create-playlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.35);
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.08);
  color: rgb(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
}

.cs-create-playlist-btn:hover {
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.14);
  border-color: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.52);
}

.cs-track-card {
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px;
  transition: border-color 0.15s;
}

.cs-track-card-enter {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-track-card-enter.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cs-track-card:hover {
  border-color: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.3);
}

.cs-track-commentary {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 8px;
  font-style: italic;
  line-height: 1.45;
}

.cs-track-commentary i {
  color: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.5);
  margin-right: 4px;
  font-size: 11px;
}

.cs-track-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cs-track-cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--hover-bg);
}

.cs-track-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-track-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 18px;
}

.cs-track-info {
  flex: 1;
  min-width: 0;
}

.cs-track-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-track-artist {
  font-size: 12px;
  color: var(--text-secondary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-track-tags {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.cs-track-tag {
  font-size: 11px;
  color: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.7);
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.06);
  padding: 1px 7px;
  border-radius: 8px;
}

.cs-track-play-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgb(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b));
  color: var(--cs-icon-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.cs-track-play-btn:hover {
  opacity: 0.85;
}

.cs-typing {
  display: flex;
  gap: 10px;
  align-items: center;
  animation: csFadeIn 0.3s ease;
}

.cs-typing .cs-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.98);
  color: var(--cs-icon-ink);
}

.cs-typing-dots {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: var(--hover-bg);
  border-radius: 16px;
}

.cs-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-secondary);
  animation: csTypingBounce 1.2s infinite;
}

.cs-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.cs-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes csTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-msg,
  .cs-typing,
  .cs-msg-tracks-staged,
  .cs-track-card-enter {
    animation: none !important;
    transition: none !important;
  }

  .cs-track-card-enter {
    opacity: 1 !important;
    transform: none !important;
  }
}

.cherry-select-compose {
  flex-shrink: 0;
  padding: 12px 0 16px;
  border-top: 1px solid var(--border-color);
}

.cherry-select-compose-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 6px 6px 6px 16px;
  transition: border-color 0.15s;
}

.cherry-select-compose-inner:focus-within {
  border-color: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.5);
}

.cherry-select-compose-inner textarea {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  line-height: 1.4;
  max-height: 120px;
  padding: 6px 0;
  color: var(--text-primary);
}

.cherry-select-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgb(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b));
  color: var(--cs-icon-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.cherry-select-speech-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.36);
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.1);
  color: rgb(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: opacity 0.15s, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cherry-select-speech-btn:hover {
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.16);
  border-color: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.55);
}

.cherry-select-speech-btn.is-listening {
  background: rgb(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b));
  color: var(--cs-icon-ink);
  border-color: transparent;
}

.cherry-select-speech-btn.is-unsupported,
.cherry-select-speech-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cherry-select-send-btn:hover {
  opacity: 0.85;
}

.cherry-select-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cherry-select-compose-status {
  font-size: 12px;
  padding: 2px 16px 0;
  min-height: 16px;
  color: var(--text-secondary);
}

.cherry-select-discovery-card {
  max-width: 420px;
  background: linear-gradient(145deg, rgba(26, 92, 255, 0.1), rgba(26, 92, 255, 0.02));
  border-color: rgba(26, 92, 255, 0.22);
}

.cherry-select-discovery-card:hover {
  border-color: rgba(26, 92, 255, 0.45);
}

.cherry-select-discovery-card-cover {
  font-size: 18px !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(26, 92, 255, 1), rgba(85, 128, 255, 0.96)) !important;
}

.cherry-select-discovery-card-text strong {
  font-size: 13px;
}

.cherry-select-discovery-card-text small {
  font-size: 11px;
}

.cherry-support-launch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg, var(--bg));
}

.cherry-support-launch-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.cherry-support-launch-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.cherry-support-launch-copy strong {
  color: var(--text-primary);
  font-size: 15px;
}

.cherry-support-launch-copy span {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.cherry-support-popup {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.cherry-support-popup[hidden] {
  display: none;
}

.cherry-support-popup.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cherry-support-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.cherry-support-window {
  position: relative;
  z-index: 1;
  width: min(760px, 96vw);
  height: min(720px, 88dvh);
  border-radius: 18px;
  border: 1px solid var(--border-color);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.cherry-support-popup.is-open .cherry-support-backdrop {
  opacity: 1;
}

.cherry-support-popup.is-open .cherry-support-window {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cherry-support-window .cherry-select-shell {
  max-width: none;
}

.cherry-support-action {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.28);
  border-radius: 12px;
  background: rgba(var(--cs-accent-r), var(--cs-accent-g), var(--cs-accent-b), 0.07);
  animation: cherrySupportRise 0.22s ease both;
}

.cherry-support-action strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-primary);
  font-size: 13px;
}

.cherry-support-action p {
  margin: 6px 0 10px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.cherry-support-action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.cherry-support-open {
  overflow: hidden;
}

.cherry-support-window .cs-msg {
  animation: cherrySupportRise 0.24s ease both;
}

.cherry-support-typing {
  animation: cherrySupportRise 0.2s ease both;
}

@keyframes cherrySupportRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cherry-support-popup,
  .cherry-support-backdrop,
  .cherry-support-window,
  .cherry-support-action,
  .cherry-support-window .cs-msg,
  .cherry-support-typing {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .cherry-support-launch {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .cherry-support-launch .btn {
    width: 100%;
    justify-content: center;
  }

  .cherry-support-popup {
    padding: 0;
    align-items: stretch;
  }

  .cherry-support-window {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
}

@media (min-width: 1024px) {
  .cherry-select-page,
  .messages-page {
    height: calc(100dvh - 152px);
    max-height: calc(100dvh - 152px);
  }

  .cherry-select-header {
    padding: 14px 0 10px;
  }

  .cherry-select-chat {
    padding: 6px 0 12px;
  }

  .cherry-select-compose {
    padding: 10px 0 12px;
  }

  .messages-sidebar-header,
  .messages-thread-header {
    padding: 14px 14px 10px;
  }

  .messages-thread-body {
    padding: 6px 14px 12px;
  }

  .messages-compose {
    padding: 10px 14px 12px;
  }
}

@media (max-width: 1023px) {
  .cherry-select-page {
    height: calc(100vh - 60px - var(--mobile-player-height, 0px) - var(--mobile-bottom-nav-height, 56px));
    max-height: calc(100dvh - 60px - var(--mobile-player-height, 0px) - var(--mobile-bottom-nav-height, 56px));
  }
}

body.messages-thread-scroll-lock {
  overflow: hidden;
}

.messages-user-title-link,
.messages-user-meta-link,
.messages-sender-link,
.messages-message-avatar-link {
  color: inherit;
  text-decoration: none;
}

.messages-message-avatar-link {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.messages-user-title-link:hover,
.messages-user-meta-link:hover,
.messages-sender-link:hover {
  text-decoration: underline;
}

.messages-message,
.cs-msg {
  position: relative;
}

.messages-message-text,
.cs-msg-text,
.messages-inline-link {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.messages-message.is-grouped,
.cs-msg.is-grouped {
  margin-top: -10px;
}

.messages-message.is-grouped .messages-message-avatar,
.cs-msg.is-grouped .cs-msg-avatar {
  visibility: hidden;
}

.messages-message.is-grouped .messages-message-meta,
.cs-msg.is-grouped .cs-msg-meta {
  display: none;
}

.messages-message {
  --swipe-reply-x: 0px;
  touch-action: pan-y;
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.messages-message.is-swipe-tracking {
  transform: translateX(var(--swipe-reply-x));
}

.messages-message::before {
  content: "\f3e5";
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: -34px;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--blue);
  opacity: 0;
  transform: translateY(-50%) scale(0.82);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}

.messages-message.is-swipe-replying::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.messages-compose-status:empty,
.cherry-select-compose-status:empty {
  display: none;
}

:root {
  --messages-app-bg: var(--white);
  --messages-input-bg: rgba(250, 250, 250, 0.94);
  --messages-input-border: var(--border);
}

html.dark-mode {
  --messages-app-bg: var(--surface-1);
  --messages-input-bg: rgba(15, 17, 21, 0.94);
  --messages-input-border: rgba(140, 160, 200, 0.18);
}

.messages-page,
.messages-shell,
.messages-sidebar,
.messages-thread,
.messages-thread-body {
  background: var(--messages-app-bg);
}

.messages-thread-intro {
  align-self: center;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  padding: 22px 16px 18px;
  margin: 0 auto 12px;
  color: var(--text-primary);
}

.messages-thread-intro-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hover-bg);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 28px;
  font-weight: 800;
}

.messages-thread-intro-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.messages-thread-intro-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.messages-thread-intro-name,
.messages-thread-intro-handle {
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.messages-thread-intro-name {
  font-size: 17px;
  font-weight: 700;
}

.messages-thread-intro-handle,
.messages-thread-intro-mutual {
  font-size: 12px;
  color: var(--text-secondary);
}

.messages-thread-intro-mutual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.messages-thread-intro-mutual:not(.is-muted) {
  color: var(--blue);
}

.messages-thread-intro-btn {
  margin-top: 8px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.messages-message-reply-preview,
.messages-reply-text,
.messages-reply-text strong,
.messages-reply-text span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.messages-reply-text span {
  white-space: normal;
}

@media (max-width: 980px) {
  .messages-page.is-mobile-messages .messages-thread {
    background: var(--messages-app-bg) !important;
  }

  .messages-page.is-mobile-messages .messages-sidebar,
  .messages-page.is-mobile-messages .messages-shell,
  .messages-page.is-mobile-messages {
    background: var(--messages-app-bg) !important;
  }

  .messages-page.is-mobile-messages.is-mobile-thread-view .messages-thread-header {
    display: none;
  }

  .messages-page.is-mobile-messages .messages-thread-body {
    gap: 5px;
    padding: calc(var(--mobile-top-nav-height, 62px) + 14px) 10px 132px;
    background: var(--messages-app-bg) !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  .messages-page.is-mobile-messages .messages-message {
    max-width: 84%;
    animation: messagesBubbleIn 360ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .messages-page.is-mobile-messages .messages-message.is-incoming {
    align-self: flex-start;
  }

  .messages-page.is-mobile-messages .messages-message.is-outgoing {
    align-self: flex-end;
    flex-direction: row-reverse;
  }

  .messages-page.is-mobile-messages .messages-message-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
    margin-top: auto;
  }

  .messages-page.is-mobile-messages .messages-message.is-outgoing .messages-message-avatar {
    display: none;
  }

  .messages-page.is-mobile-messages .messages-message-meta,
  .messages-page.is-mobile-messages .messages-message-actions {
    display: none;
  }

  .messages-page.is-mobile-messages .messages-message-bubble {
    gap: 4px;
  }

  .messages-page.is-mobile-messages .messages-message-text {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 9px 13px;
    border-radius: 18px;
    line-height: 1.38;
    box-shadow: 0 1px 1px rgba(12, 12, 14, 0.04);
  }

  .messages-page.is-mobile-messages .messages-message.is-incoming .messages-message-text {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-bottom-left-radius: 6px;
  }

  .messages-page.is-mobile-messages .messages-message.is-outgoing .messages-message-text {
    background: var(--blue);
    color: #fff;
    border-radius: 18px;
    border-bottom-right-radius: 6px;
  }

  .messages-page.is-mobile-messages .messages-message.is-grouped {
    margin-top: -1px;
  }

  .messages-page.is-mobile-messages .messages-message.is-grouped .messages-message-text {
    border-radius: 18px;
  }

  .messages-page.is-mobile-messages .messages-message.is-outgoing.is-grouped .messages-message-text {
    border-bottom-right-radius: 6px;
  }

  .messages-page.is-mobile-messages .messages-message.is-incoming.is-grouped .messages-message-text {
    border-bottom-left-radius: 6px;
  }

  .messages-page.is-mobile-messages.is-mobile-thread-view .messages-compose {
    position: fixed;
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-bottom-nav-height, 56px) + var(--mobile-player-height, 0px) - 2px) !important;
    z-index: 1300;
    padding: 0;
    border: 1px solid var(--messages-input-border);
    border-radius: 16px;
    background: var(--messages-input-bg) !important;
    box-shadow: 0 14px 36px rgba(12, 12, 14, 0.16);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 340ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .messages-page.is-mobile-messages.is-mobile-list-view .messages-compose {
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
  }

  .messages-page.is-mobile-messages .messages-compose-inner {
    min-height: 50px;
    border-radius: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
    padding: 7px 7px 7px 14px;
  }

  .messages-page.is-mobile-messages .messages-reply-preview {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-bottom-nav-height, 56px) + var(--mobile-player-height, 0px) + 62px) !important;
    z-index: 1299;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--messages-input-bg) !important;
    box-shadow: 0 10px 24px rgba(12, 12, 14, 0.12);
  }

  .messages-page.is-mobile-messages .messages-thread-intro {
    padding-top: 4px;
  }
}

@media (max-width: 1023px) {
  .cherry-select-chat {
    padding-bottom: 116px;
    overflow-x: hidden;
  }

  .cherry-select-compose {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-bottom-nav-height, 56px) + var(--mobile-player-height, 0px) + 12px);
    z-index: 1300;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .cherry-select-compose-inner {
    min-height: 50px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--white) 92%, transparent);
    box-shadow: 0 12px 34px rgba(12, 12, 14, 0.16);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }

  .cs-msg {
    max-width: 84%;
    gap: 8px;
  }

  .cs-msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
  }

  .cs-msg-dj {
    align-self: flex-start;
  }

  .cs-msg-user .cs-msg-avatar {
    display: none;
  }

  .cs-msg.is-grouped {
    margin-top: -11px;
  }

  .cs-msg-meta {
    display: none;
  }

  .cs-msg-text {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 4px;
    padding: 9px 13px;
    border-radius: 18px;
    line-height: 1.38;
  }

  .cs-msg-dj .cs-msg-text {
    background: var(--hover-bg);
    border-bottom-left-radius: 6px;
  }

  .cs-msg-user .cs-msg-text {
    background: var(--blue);
    color: #fff;
    border-radius: 18px;
    border-bottom-right-radius: 6px;
  }

  .cs-msg-tracks,
  .cs-track-card {
    max-width: 100%;
  }
}


.is-collapsed {
  opacity: 0;
  pointer-events: none;
  padding: 0 0 0 0 !important;
  border: none !important;
  height: 0 !important;
  overflow: hidden !important;
  max-height: 0 !important;
}

.gift-pro-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 32px 16px;
}

.gift-pro-card {
  position: relative;
  max-width: 500px;
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 44px 36px 36px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(26,92,255,0.1);
}

.gift-pro-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(26,92,255,0.13) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.gift-pro-icon-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.gift-pro-gem-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(26,92,255,0.15), rgba(167,139,250,0.15));
  border: 2px solid rgba(26,92,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: giftGemPulse 2.4s ease-in-out infinite;
}

.gift-pro-gem {
  font-size: 28px;
  background: linear-gradient(135deg, #1a5cff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes giftGemPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(26,92,255,0.3); }
  50% { transform: scale(1.07); box-shadow: 0 0 0 12px rgba(26,92,255,0); }
}

.gift-pro-from {
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.gift-pro-title {
  position: relative;
  z-index: 1;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.8px;
  margin: 0 0 10px;
  background: linear-gradient(135deg, #1a5cff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gift-pro-sub {
  position: relative;
  z-index: 1;
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 20px;
}

.gift-pro-perks {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.gift-pro-perks li {
  font-size: 14px;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 8px;
}

.gift-pro-perks li i {
  color: #1a5cff;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.gift-accept-btn {
  position: relative;
  z-index: 1;
  font-size: 16px;
  padding: 12px 28px;
}

.gift-pro-status {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-size: 13px;
  min-height: 18px;
}

.gift-pro-notice {
  position: relative;
  z-index: 1;
  background: rgba(255,193,7,0.1);
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--black);
  margin-bottom: 12px;
}

.gift-pro-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.gift-particle {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  animation: giftParticleRise linear forwards;
  opacity: 0;
}

@keyframes giftParticleRise {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 0.7; }
  100% { transform: translateY(-380px) scale(1.2) rotate(360deg); opacity: 0; }
}

.gift-welcome-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(4px);
}

.gift-welcome-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.gift-welcome-modal {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 48px 40px 40px;
  max-width: 440px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  transform: scale(0.88) translateY(24px);
  transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease;
  overflow: hidden;
}

.gift-welcome-overlay.is-visible .gift-welcome-modal {
  transform: scale(1) translateY(0);
}

.gift-confetti-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  z-index: 0;
}

.gift-confetti-piece {
  position: absolute;
  transform-origin: center;
  animation: giftConfettiExplode both;
}

@keyframes giftConfettiExplode {
  0% { transform: translate(0,0) scale(0) rotate(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(540deg); opacity: 0; }
}

.gift-welcome-gem-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  z-index: 1;
}

.gift-welcome-gem-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(26,92,255,0.15), rgba(167,139,250,0.2));
  border: 2px solid rgba(26,92,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: giftWelcomeGemSpin 1.2s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.gift-welcome-gem-ring i {
  font-size: 32px;
  background: linear-gradient(135deg, #1a5cff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes giftWelcomeGemSpin {
  0% { transform: scale(0) rotate(-180deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.gift-welcome-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gift-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  animation: giftSparkle 0.9s ease-out both;
}

.gift-sparkle:nth-child(1) { top: 0; left: 50%; animation-delay: 0.1s; }
.gift-sparkle:nth-child(2) { top: 15%; right: 10%; animation-delay: 0.15s; }
.gift-sparkle:nth-child(3) { top: 50%; right: 0; animation-delay: 0.2s; }
.gift-sparkle:nth-child(4) { bottom: 10%; right: 15%; animation-delay: 0.25s; }
.gift-sparkle:nth-child(5) { bottom: 0; left: 40%; animation-delay: 0.3s; }
.gift-sparkle:nth-child(6) { top: 30%; left: 0; animation-delay: 0.35s; }

@keyframes giftSparkle {
  0% { transform: scale(0); opacity: 1; }
  60% { transform: scale(1.8); opacity: 0.9; }
  100% { transform: scale(0); opacity: 0; }
}

.gift-welcome-title {
  position: relative;
  z-index: 1;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
  margin: 0 0 10px;
  background: linear-gradient(135deg, #1a5cff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: giftTitlePop 0.6s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes giftTitlePop {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.gift-welcome-sub {
  position: relative;
  z-index: 1;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 24px;
  animation: giftTitlePop 0.6s 0.45s both;
}

.gift-welcome-btn {
  position: relative;
  z-index: 1;
  animation: giftTitlePop 0.5s 0.55s both;
}

.artist-plus-gift-card {
  margin-top: 16px;
}

.gift-send-form {
  margin-top: 14px;
}

.gift-send-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.gift-recipient-input {
  flex: 1;
  min-width: 160px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--black);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.gift-recipient-input:focus {
  border-color: rgba(26,92,255,0.5);
}

.gift-plan-btns {
  display: flex;
  gap: 8px;
}

.gift-plan-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  gap: 2px;
  min-width: 80px;
  transition: all 0.2s;
  font-size: 13px;
}

.gift-plan-btn.is-active {
  background: rgba(26,92,255,0.1);
  border-color: rgba(26,92,255,0.4);
  color: var(--blue);
}

.gift-plan-label {
  font-weight: 700;
  font-size: 12px;
}

.gift-plan-price {
  font-size: 13px;
  font-weight: 600;
}

.msg-gift-bubble {
  padding: 0 !important;
  overflow: hidden;
}

.msg-gift-card {
  position: relative;
  padding: 16px;
  background: linear-gradient(135deg, rgba(26,92,255,0.06) 0%, rgba(167,139,250,0.05) 100%);
  border-radius: 12px;
  overflow: hidden;
  transition: opacity 0.3s;
}

.msg-gift-card.is-redeemed {
  opacity: 0.7;
}

.msg-gift-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(26,92,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.msg-gift-icon-row {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.msg-gift-gem-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(26,92,255,0.15), rgba(167,139,250,0.15));
  border: 1.5px solid rgba(26,92,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: giftGemPulse 2.4s ease-in-out infinite;
}

.msg-gift-gem-ring i {
  font-size: 20px;
  background: linear-gradient(135deg, #1a5cff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.msg-gift-info {
  text-align: center;
  margin-bottom: 14px;
}

.msg-gift-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.msg-gift-duration {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  background: linear-gradient(135deg, #1a5cff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.msg-gift-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

.msg-gift-action {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.msg-gift-accept-btn {
  padding: 9px 20px;
  background: linear-gradient(135deg, #1a5cff, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  gap: 7px;
}

.msg-gift-accept-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.msg-gift-accept-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.msg-gift-view-btn {
  padding: 8px 18px;
  background: rgba(26,92,255,0.1);
  color: var(--blue);
  border: 1px solid rgba(26,92,255,0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.msg-gift-view-btn:hover {
  background: rgba(26,92,255,0.18);
}

.msg-gift-redeemed-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(52,211,153,0.12);
  color: #059669;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.msg-gift-err {
  font-size: 12px;
  color: var(--danger);
  text-align: center;
  margin-top: 8px;
}

.gift-share-box{margin:18px 0 6px;text-align:left}
.gift-share-label{font-size:.85rem;color:var(--text-muted);margin-bottom:8px}
.gift-share-row{display:flex;gap:8px;align-items:center}
.gift-share-input{flex:1;background:var(--input-bg,#1a1a2e);color:var(--text-primary,#fff);border:1px solid var(--border-color,#333);border-radius:8px;padding:8px 12px;font-size:.85rem;outline:none}
.gift-copy-btn{flex-shrink:0;padding:8px 16px;font-size:.85rem}
.gift-share-hint{font-size:.78rem;color:var(--success,#34d399);display:block;min-height:18px;margin-top:4px}

.ap-card {
    position: relative;
    background: #fff;
    border: 1.5px solid rgba(99,102,241,.15);
    border-radius: 18px;
    padding: 28px 28px 24px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(99,102,241,.07), 0 1px 0 rgba(255,255,255,.8) inset;
    transition: box-shadow .3s;
}
.ap-card:hover { box-shadow: 0 6px 40px rgba(99,102,241,.13); }

.ap-card-glow {
    pointer-events: none;
    position: absolute;
    top: -60px; left: 50%; transform: translateX(-50%);
    width: 420px; height: 200px;
    background: radial-gradient(ellipse at center, rgba(99,102,241,.08) 0%, transparent 70%);
    animation: apGlowPulse 4s ease-in-out infinite;
}
@keyframes apGlowPulse {
    0%,100% { opacity: .6; transform: translateX(-50%) scaleX(1); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1.1); }
}

.ap-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.ap-gem-wrap {
    position: relative;
    width: 52px; height: 52px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ap-gem-icon {
    font-size: 1.6rem;
    background: linear-gradient(135deg, #6366f1, #818cf8, #a78bfa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(99,102,241,.4));
    animation: apGemFloat 3s ease-in-out infinite;
    position: relative; z-index: 1;
}
@keyframes apGemFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.ap-gem-ring {
    position: absolute; inset: 0;
    border: 1.5px solid rgba(99,102,241,.25);
    border-radius: 50%;
    animation: apGemRingSpin 8s linear infinite;
}
@keyframes apGemRingSpin { to { transform: rotate(360deg); } }

.ap-card-title-block { flex: 1; }
.ap-card-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 3px; color: #1e1b4b; }
.ap-card-sub { font-size: .78rem; color: var(--text-secondary, #666); margin: 0; }

.ap-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    background: rgba(0,0,0,.05);
    color: #888;
    border: 1px solid rgba(0,0,0,.08);
    transition: background .3s, color .3s, border-color .3s;
    white-space: nowrap;
}
.ap-status-pill.is-active {
    background: rgba(16,185,129,.1);
    color: #059669;
    border-color: rgba(16,185,129,.25);
}

.ap-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 24px;
}
.ap-feature {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; color: #444;
    background: #f5f6ff;
    border: 1px solid rgba(99,102,241,.1);
    border-radius: 10px;
    padding: 8px 12px;
    transition: background .2s, border-color .2s;
}
.ap-feature:hover { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.2); }
.ap-feature i { color: #6366f1; font-size: .85rem; width: 16px; text-align: center; }

.ap-plan-selector {
    display: flex; gap: 12px;
    margin-bottom: 20px;
}
.ap-plan-btn {
    flex: 1;
    position: relative;
    background: #f8f8ff;
    border: 1.5px solid rgba(99,102,241,.15);
    border-radius: 14px;
    padding: 16px 14px 14px;
    cursor: pointer;
    text-align: center;
    transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.ap-plan-btn:hover {
    background: rgba(99,102,241,.07);
    border-color: rgba(99,102,241,.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(99,102,241,.1);
}
.ap-plan-btn.is-selected {
    background: rgba(99,102,241,.08);
    border-color: rgba(99,102,241,.55);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1), 0 6px 20px rgba(99,102,241,.12);
}
.ap-plan-name { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #888; font-weight: 600; }
.ap-plan-price { font-size: 1.5rem; font-weight: 800; color: #1e1b4b; line-height: 1.15; }
.ap-plan-period { font-size: .72rem; color: #888; }
.ap-plan-trial { font-size: .7rem; color: #6366f1; margin-top: 2px; }
.ap-plan-save-badge {
    position: absolute; top: -9px; right: 10px;
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    color: #fff; font-size: .65rem; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
    letter-spacing: .04em;
}

.ap-actions {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ap-subscribe-btn {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    border: none; color: #fff; font-weight: 700;
    padding: 11px 28px; border-radius: 12px; font-size: .9rem;
    box-shadow: 0 4px 18px rgba(99,102,241,.3);
    transition: opacity .2s, transform .15s, box-shadow .2s;
    cursor: pointer;
}
.ap-subscribe-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 26px rgba(99,102,241,.38); }
.ap-subscribe-btn:disabled { opacity: .4; transform: none; cursor: not-allowed; }
.ap-manage-btn {
    background: #f0f0f8;
    border: 1px solid rgba(99,102,241,.15);
    color: #555;
    padding: 10px 20px; border-radius: 12px; font-size: .85rem;
    transition: background .2s, border-color .2s;
    cursor: pointer;
}
.ap-manage-btn:hover { background: #e8e8f8; border-color: rgba(99,102,241,.25); }
.ap-billing-status { font-size: .78rem; color: #888; margin-left: 4px; }

#billing-tab .ap-plan-selector[hidden],
#billing-tab .ap-legal-disclosure[hidden],
#billing-tab .ap-subscribe-btn[hidden] { display: none !important; }

.ap-invoices {
    background: #f8f8ff;
    border: 1px solid rgba(99,102,241,.1);
    border-radius: 12px;
    overflow: hidden;
}
.ap-invoices-head {
    padding: 11px 16px;
    font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    color: #888;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display: flex; align-items: center; gap: 8px;
}
.ap-invoice-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(0,0,0,.05);
    text-decoration: none; color: inherit; font-size: .82rem;
    transition: background .15s;
}
.ap-invoice-row:last-child { border-bottom: none; }
.ap-invoice-row:hover { background: rgba(99,102,241,.04); }
.ap-invoice-date { color: #888; flex-shrink: 0; width: 90px; }
.ap-invoice-status { text-transform: capitalize; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: rgba(0,0,0,.06); color: #555; }
.ap-invoice-status--paid { background: rgba(16,185,129,.12); color: #059669; }
.ap-invoice-status--open { background: rgba(245,158,11,.12); color: #d97706; }
.ap-invoice-status--void,.ap-invoice-status--uncollectible { background: rgba(239,68,68,.1); color: #dc2626; }
.ap-invoice-amount { margin-left: auto; font-weight: 600; color: #1e1b4b; }
.ap-invoice-arrow { color: rgba(0,0,0,.2); font-size: .72rem; margin-left: 6px; flex-shrink: 0; }
.ap-invoice-empty { padding: 18px 16px; text-align: center; color: #888; font-size: .82rem; }

.ap-card.artist-plus-celebrate { animation: apCelebrate .5s ease-in-out; }
@keyframes apCelebrate {
    0% { box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
    70% { box-shadow: 0 0 0 18px rgba(99,102,241,0); }
    100% { box-shadow: 0 4px 24px rgba(99,102,241,.07); }
}

.ap-gift-card {
    position: relative;
    background: #fff;
    border: 1.5px solid rgba(167,139,250,.2);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(167,139,250,.08);
    overflow: hidden;
    transition: box-shadow .3s;
}
.ap-gift-card:hover { box-shadow: 0 6px 32px rgba(167,139,250,.14); }
.ap-gift-card::before {
    content: '';
    pointer-events: none;
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(167,139,250,.08) 0%, transparent 70%);
    border-radius: 50%;
}

.ap-gift-card-header {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 20px;
}
.ap-gift-icon-wrap {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(167,139,250,.15), rgba(99,102,241,.1));
    border: 1px solid rgba(167,139,250,.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1.2rem; color: #7c3aed;
    box-shadow: 0 0 12px rgba(167,139,250,.15);
}
.ap-gift-title { font-size: 1rem; font-weight: 700; color: #1e1b4b; margin: 0 0 4px; }
.ap-gift-sub { font-size: .78rem; color: var(--text-secondary, #666); margin: 0; line-height: 1.5; }

.ap-gift-recipient-wrap { position: relative; margin-bottom: 16px; }
.ap-gift-input-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: rgba(124,58,237,.5); font-size: .85rem; pointer-events: none;
}
.ap-gift-recipient-input {
    width: 100%;
    background: #f8f7ff;
    border: 1.5px solid rgba(167,139,250,.2);
    border-radius: 11px;
    padding: 11px 14px 11px 36px;
    color: #1e1b4b; font-size: .88rem; outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
    box-sizing: border-box;
}
.ap-gift-recipient-input::placeholder { color: rgba(0,0,0,.3); }
.ap-gift-recipient-input:focus {
    border-color: rgba(167,139,250,.5);
    background: rgba(167,139,250,.04);
    box-shadow: 0 0 0 3px rgba(167,139,250,.1);
}

.ap-gift-plans {
    display: flex; gap: 12px;
    margin-bottom: 18px;
}
.ap-gift-plan-btn {
    flex: 1;
    position: relative;
    background: #f8f7ff;
    border: 1.5px solid rgba(167,139,250,.18);
    border-radius: 12px;
    padding: 14px 12px;
    cursor: pointer; text-align: center;
    transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ap-gift-plan-btn:hover {
    background: rgba(167,139,250,.08);
    border-color: rgba(167,139,250,.35);
    transform: translateY(-2px);
}
.ap-gift-plan-btn.is-active {
    background: rgba(167,139,250,.1);
    border-color: rgba(124,58,237,.45);
    box-shadow: 0 0 0 3px rgba(167,139,250,.1), 0 4px 16px rgba(167,139,250,.12);
}
.ap-gift-plan-duration { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #888; font-weight: 600; }
.ap-gift-plan-price { font-size: 1.3rem; font-weight: 800; color: #1e1b4b; line-height: 1.2; }
.ap-gift-plan-save {
    position: absolute; top: -9px; right: 8px;
    background: linear-gradient(135deg, #a78bfa, #6366f1);
    color: #fff; font-size: .62rem; font-weight: 700;
    padding: 2px 7px; border-radius: 20px;
}

.ap-gift-actions { display: flex; align-items: center; gap: 12px; }
.ap-gift-send-btn {
    background: linear-gradient(135deg, #a78bfa 0%, #6366f1 100%);
    border: none; color: #fff; font-weight: 700;
    padding: 11px 26px; border-radius: 11px; font-size: .88rem;
    box-shadow: 0 4px 16px rgba(124,58,237,.25);
    transition: opacity .2s, transform .15s, box-shadow .2s;
    cursor: pointer;
}
.ap-gift-send-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(124,58,237,.35); }
.ap-gift-send-btn:disabled { opacity: .4; transform: none; cursor: not-allowed; }
.ap-gift-status { font-size: .8rem; color: #888; }

.gift-share-input { background: #f8f7ff; color: #1e1b4b; border: 1.5px solid rgba(167,139,250,.2); }
.gift-share-label { color: #666; }

.ap-my-gifts-card {
    background: #fff;
    border: 1.5px solid rgba(99,102,241,.13);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 14px rgba(99,102,241,.06);
}
.ap-my-gifts-header {
    padding: 12px 18px;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: #888;
    background: #f8f8ff;
    border-bottom: 1px solid rgba(99,102,241,.1);
    display: flex; align-items: center; gap: 8px;
}
.ap-my-gift-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: .82rem;
    transition: background .15s;
}
.ap-my-gift-row:last-child { border-bottom: none; }
.ap-my-gift-row:hover { background: rgba(99,102,241,.035); }
.ap-my-gift-meta { display: flex; flex-direction: column; gap: 1px; min-width: 72px; }
.ap-my-gift-months { font-weight: 700; color: #1e1b4b; font-size: .82rem; }
.ap-my-gift-date { font-size: .73rem; color: #aaa; }
.ap-my-gift-mid { flex: 1; }
.ap-my-gift-recipient { font-size: .8rem; color: #555; display: flex; align-items: center; gap: 5px; }
.ap-my-gift-recipient i { opacity: .55; }
.ap-my-gift-recipient--none { color: #aaa; font-style: italic; }
.ap-my-gift-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ap-my-gift-status {
    font-size: .72rem; font-weight: 700; text-transform: capitalize;
    padding: 3px 9px; border-radius: 20px;
    background: rgba(0,0,0,.06); color: #666;
}
.ap-my-gift-status--available { background: rgba(99,102,241,.1); color: #4f46e5; }
.ap-my-gift-status--redeemed { background: rgba(16,185,129,.1); color: #059669; }
.ap-my-gift-status--expired  { background: rgba(239,68,68,.08); color: #dc2626; }
.ap-my-gift-copy-btn {
    background: none; border: 1px solid rgba(99,102,241,.22);
    color: #6366f1; border-radius: 7px;
    padding: 4px 8px; font-size: .75rem; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ap-my-gift-copy-btn:hover { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.4); }

@media (max-width: 540px) {
    .ap-card, .ap-gift-card { padding: 18px 16px; }
    .ap-plan-selector, .ap-gift-plans { flex-direction: column; }
    .ap-features-grid { grid-template-columns: 1fr 1fr; }
    .ap-card-header { flex-wrap: wrap; }
    .ap-my-gift-row { flex-wrap: wrap; gap: 8px; }
}

.settings-container #billing-tab .ap-card,
.settings-container #billing-tab .ap-gift-card,
.settings-container #billing-tab .ap-my-gifts-card {
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--white) 96%, rgba(26, 92, 255, 0.04));
    padding: 18px;
    box-shadow: none;
    margin-bottom: 0;
    overflow: hidden;
}

.settings-container #billing-tab .ap-card:hover,
.settings-container #billing-tab .ap-gift-card:hover {
    box-shadow: none;
}

.settings-container #billing-tab .ap-card-glow,
.settings-container #billing-tab .ap-gem-ring,
.settings-container #billing-tab .ap-gift-card::before {
    display: none;
}

.settings-container #billing-tab .ap-card-header,
.settings-container #billing-tab .ap-gift-card-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.settings-container #billing-tab .ap-gem-wrap,
.settings-container #billing-tab .ap-gift-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(26, 92, 255, 0.08);
    border: 1px solid rgba(26, 92, 255, 0.16);
    box-shadow: none;
}

.settings-container #billing-tab .ap-gem-icon,
.settings-container #billing-tab .ap-gift-icon-wrap {
    color: var(--blue);
    filter: none;
    animation: none;
}

.settings-container #billing-tab .ap-card-title,
.settings-container #billing-tab .ap-gift-title {
    color: var(--black);
    font-size: 16px;
    line-height: 1.25;
}

.settings-container #billing-tab .ap-card-sub,
.settings-container #billing-tab .ap-gift-sub {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
}

.settings-container #billing-tab .ap-status-pill {
    border-color: var(--border);
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-secondary);
}

.settings-container #billing-tab .ap-status-pill.is-active {
    border-color: rgba(16, 185, 129, 0.26);
    background: rgba(16, 185, 129, 0.1);
    color: #0f7a54;
}

.settings-container #billing-tab .ap-features-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.settings-container #billing-tab .ap-feature {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--black);
    font-size: 14px;
    padding: 10px 12px;
}

.settings-container #billing-tab .ap-feature:hover {
    background: rgba(26, 92, 255, 0.06);
    border-color: rgba(26, 92, 255, 0.22);
}

.settings-container #billing-tab .ap-feature i {
    color: var(--blue);
}

.settings-container #billing-tab .ap-plan-selector,
.settings-container #billing-tab .ap-gift-plans {
    gap: 10px;
    margin-bottom: 16px;
}

.settings-container #billing-tab .ap-plan-btn,
.settings-container #billing-tab .ap-gift-plan-btn {
    align-items: flex-start;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    padding: 14px;
    box-shadow: none;
    transform: none;
}

.settings-container #billing-tab .ap-plan-btn:hover,
.settings-container #billing-tab .ap-gift-plan-btn:hover {
    background: rgba(26, 92, 255, 0.05);
    border-color: rgba(26, 92, 255, 0.26);
    box-shadow: none;
    transform: none;
}

.settings-container #billing-tab .ap-plan-btn.is-selected,
.settings-container #billing-tab .ap-gift-plan-btn.is-active {
    background: rgba(26, 92, 255, 0.08);
    border-color: rgba(26, 92, 255, 0.36);
    box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.08);
}

.settings-container #billing-tab .ap-plan-name,
.settings-container #billing-tab .ap-gift-plan-duration {
    color: var(--text-secondary);
    font-size: 12px;
}

.settings-container #billing-tab .ap-plan-price,
.settings-container #billing-tab .ap-gift-plan-price {
    color: var(--black);
    font-size: 22px;
}

.settings-container #billing-tab .ap-plan-period,
.settings-container #billing-tab .ap-plan-trial {
    color: var(--text-secondary);
    font-size: 12px;
}

.settings-container #billing-tab .ap-plan-save-badge,
.settings-container #billing-tab .ap-gift-plan-save {
    background: rgba(26, 92, 255, 0.1);
    color: var(--blue);
    border: 1px solid rgba(26, 92, 255, 0.18);
}

.settings-container #billing-tab .ap-billing-disclosure {
    border-color: var(--border);
    background: rgba(0, 0, 0, 0.02);
    color: var(--text-secondary);
}

.settings-container #billing-tab .ap-actions,
.settings-container #billing-tab .ap-gift-actions {
    margin-bottom: 18px;
}

.settings-container #billing-tab .ap-subscribe-btn,
.settings-container #billing-tab .ap-gift-send-btn {
    background: var(--blue);
    border: 1px solid var(--blue);
    color: var(--white);
    border-radius: 8px;
    box-shadow: none;
}

.settings-container #billing-tab .ap-subscribe-btn:hover,
.settings-container #billing-tab .ap-gift-send-btn:hover {
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: none;
}

.settings-container #billing-tab .ap-manage-btn {
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--black);
    border-radius: 8px;
}

.settings-container #billing-tab .ap-manage-btn:hover {
    background: rgba(26, 92, 255, 0.08);
    border-color: var(--blue);
}

.settings-container #billing-tab .ap-invoices,
.settings-container #billing-tab .ap-my-gifts-card {
    border-color: var(--border);
    border-radius: 10px;
    background: var(--white);
    box-shadow: none;
}

.settings-container #billing-tab .ap-invoices-head,
.settings-container #billing-tab .ap-my-gifts-header {
    background: rgba(0, 0, 0, 0.02);
    border-bottom-color: var(--border);
    color: var(--text-secondary);
}

.settings-container #billing-tab .ap-invoice-row,
.settings-container #billing-tab .ap-my-gift-row {
    border-bottom-color: var(--border);
}

.settings-container #billing-tab .ap-invoice-row:hover,
.settings-container #billing-tab .ap-my-gift-row:hover {
    background: rgba(26, 92, 255, 0.05);
}

.settings-container #billing-tab .ap-invoice-date,
.settings-container #billing-tab .ap-my-gift-date,
.settings-container #billing-tab .ap-gift-status,
.settings-container #billing-tab .ap-billing-status {
    color: var(--text-secondary);
}

.settings-container #billing-tab .ap-invoice-amount,
.settings-container #billing-tab .ap-my-gift-months {
    color: var(--black);
}

@media (max-width: 540px) {
    .settings-container #billing-tab .ap-features-grid {
        grid-template-columns: 1fr;
    }
}

.sv-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.sv-crop-overlay.is-open { opacity: 1; }
.sv-crop-dialog {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
}
.sv-crop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sv-crop-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--black);
}
.sv-crop-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}
.sv-crop-close:hover { color: var(--black); }
.sv-crop-stage {
  flex-shrink: 0;
}
.sv-crop-canvas-wrap {
  width: 100%;
  background: #111;
  overflow: hidden;
  position: relative;
}
.sv-crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}
.sv-crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sv-crop-zoom-icon {
  color: var(--text-secondary);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.sv-crop-zoom-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  outline: none;
  cursor: pointer;
}
.sv-crop-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  border: none;
}
.sv-crop-zoom-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  border: none;
}
.sv-crop-previews {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.sv-crop-prev-item {
  flex: 1;
  min-width: 180px;
}
.sv-crop-prev-item--mobile {
  flex: 0 0 auto;
  min-width: 80px;
  max-width: 130px;
}
.sv-crop-prev-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}
.sv-crop-prev-canvas {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}
.sv-crop-prev-canvas.sv-crop-prev-mobile {
  border-radius: 50%;
}
.sv-crop-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  flex-shrink: 0;
}

@keyframes upub-pop {
  0%   { opacity: 0; transform: scale(0.55) rotate(-8deg); }
  60%  { transform: scale(1.12) rotate(3deg); }
  80%  { transform: scale(0.96) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes upub-ring {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes upub-fadeslide {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes upub-card-in {
  0%   { opacity: 0; transform: translateX(-14px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes upub-action-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes upub-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.upload-published-section {
  opacity: 0;
}
.upload-published-section.is-visible {
  opacity: 1;
}
.upload-published-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 16px 24px;
  gap: 14px;
  position: relative;
}
.upload-published-check-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.upload-published-section.is-visible .upload-published-check-wrap {
  animation: upub-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.1s forwards;
}
.upload-published-check-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--success, #22c55e) 60%, transparent);
  opacity: 0;
}
.upload-published-section.is-visible .upload-published-check-ring {
  animation: upub-ring 0.9s ease-out 0.55s forwards;
}
.upload-published-check {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success, #22c55e) 14%, var(--white));
  border: 2px solid color-mix(in srgb, var(--success, #22c55e) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-published-check-icon {
  font-size: 2.1rem;
  color: var(--success, #22c55e);
}
.upload-published-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0;
  opacity: 0;
  background: linear-gradient(90deg, var(--black) 0%, var(--blue) 50%, var(--black) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
}
.upload-published-section.is-visible .upload-published-title {
  animation: upub-fadeslide 0.45s ease 0.62s forwards, upub-shimmer 1.6s linear 0.62s 1;
  -webkit-text-fill-color: transparent;
}
.upload-published-sub {
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.95rem;
  opacity: 0;
}
.upload-published-section.is-visible .upload-published-sub {
  animation: upub-fadeslide 0.4s ease 0.85s forwards;
}
.upload-published-recs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 8px;
}
.upload-rec-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--white);
  opacity: 0;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.upload-rec-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
  transform: translateY(-1px);
}
.upload-rec-card.is-visible {
  animation: upub-card-in 0.38s cubic-bezier(0.22,1,0.36,1) forwards;
}
.upload-rec-card--highlight {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  background: color-mix(in srgb, var(--blue) 5%, var(--white));
}
.upload-rec-card--highlight:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--blue) 18%, transparent);
}
.upload-rec-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 10%, var(--white));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--blue);
  transition: background 0.18s ease;
}
.upload-rec-card:hover .upload-rec-icon {
  background: color-mix(in srgb, var(--blue) 16%, var(--white));
}
.upload-rec-card--highlight .upload-rec-icon {
  background: color-mix(in srgb, var(--blue) 18%, var(--white));
}
.upload-rec-body {
  flex: 1;
  min-width: 0;
}
.upload-rec-title {
  font-size: 0.9rem;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.upload-rec-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}
.upload-rec-action-wrap {
  flex-shrink: 0;
}
.upload-published-actions {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
  opacity: 0;
}
.upload-published-section.is-visible .upload-published-actions {
  animation: upub-action-in 0.4s ease var(--pub-action-delay, 1.2s) forwards;
}

.upload-audio-dropzone.has-files {
  border-color: color-mix(in srgb, var(--success, #22c55e) 60%, var(--border));
  background: color-mix(in srgb, var(--success, #22c55e) 5%, var(--white));
}
.upload-audio-dropzone.has-files .upload-audio-dz-icon {
  color: var(--success, #22c55e);
}
#uploadAudioDzText {
  word-break: break-all;
}

.upload-audio-first-section .upload-audio-dropzone {
  min-height: 150px;
}

.upload-file-queue {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.upload-file-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 3%, var(--white));
}

.upload-file-icon {
  width: 28px;
  color: var(--blue);
  text-align: center;
}

.upload-file-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.upload-file-copy strong,
.upload-file-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-file-copy strong { font-size: 13px; }
.upload-file-copy small,
.upload-file-percent { color: var(--text-secondary); font-size: 11px; }
.upload-file-row.is-done .upload-file-icon { color: var(--success, #22c55e); }
.upload-file-row.is-failed .upload-file-icon,
.upload-file-row.is-failed .upload-file-copy small { color: var(--danger, #dc3545); }

.upload-publishing-section {
  padding-block: clamp(40px, 7vw, 72px);
  text-align: center;
}

.upload-publishing-section h2 { margin: 14px 0 8px; }
.upload-publishing-section > p { max-width: 580px; margin: 0 auto 24px; color: var(--text-secondary); }
.upload-publishing-section > .upload-progress-track { max-width: 620px; margin: 0 auto; }
.upload-publishing-files { max-width: 620px; margin: 16px auto 0; text-align: left; }

.upload-publishing-spinner {
  display: inline-grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 12%, var(--white));
  color: var(--blue);
  font-size: 25px;
  animation: upload-cloud-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes upload-cloud-pulse {
  from { transform: translateY(2px) scale(.96); opacity: .72; }
  to { transform: translateY(-2px) scale(1.04); opacity: 1; }
}

.basic-interior-hero {
  padding: clamp(54px, 7vw, 80px) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(24px, 4vw, 44px);
}
.basic-interior-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.03;
  margin: 0 0 14px;
}
.basic-interior-hero p {
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  color: var(--text-secondary);
  max-width: 60ch;
  line-height: 1.72;
  margin: 0;
}
.basic-interior-hero .basic-hero-actions {
  margin-top: 22px;
}
.basic-section-heading {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.basic-section-sub {
  color: var(--text-secondary);
  font-size: clamp(0.95rem, 1.2vw, 1.06rem);
  line-height: 1.72;
  margin: 0 0 26px;
  max-width: 62ch;
}
.basic-section-block {
  margin-bottom: 44px;
}
.basic-reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}
.basic-reasons-grid-compact {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}
.basic-reason-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  background: var(--white);
  box-shadow: 0 6px 20px rgba(12, 12, 14, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.basic-reason-card:hover {
  border-color: rgba(26, 92, 255, 0.28);
  box-shadow: 0 14px 30px rgba(26, 92, 255, 0.09);
  transform: translateY(-2px);
}
.basic-reason-icon {
  font-size: 1.75rem;
  margin-bottom: 10px;
  display: block;
}
.basic-reason-card h3 {
  margin: 0 0 7px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.basic-reason-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.65;
}
.basic-card-link {
  display: inline-flex;
  align-items: center;
  margin-top: 13px;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}
.basic-card-link:hover {
  text-decoration: underline;
}
.basic-feature-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: start;
}
.basic-screenshot-card {
  margin: 0;
  border: 1px solid rgba(26, 92, 255, 0.22);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.9));
  box-shadow: 0 18px 40px rgba(14, 20, 36, 0.18);
  overflow: hidden;
}
.basic-screenshot-card img {
  display: block;
  width: 100%;
  height: auto;
}
.basic-screenshot-card figcaption {
  padding: 11px 14px 13px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  border-top: 1px solid rgba(26, 92, 255, 0.12);
}
.superfans-preview {
  min-height: 330px;
  padding: clamp(30px, 5vw, 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--black);
  background:
    radial-gradient(circle at 84% 14%, rgba(255, 122, 56, 0.2), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(255, 79, 120, 0.16), transparent 38%);
}
.superfans-preview-pulse {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  margin-bottom: 18px;
  color: #fff;
  background: #ff7a38;
  box-shadow: 0 12px 28px rgba(255, 122, 56, 0.3);
  font-size: 1.55rem;
}
.superfans-preview-rank {
  color: #ff7a38;
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.superfans-preview h3 {
  margin: 7px 0 5px;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}
.superfans-preview > p {
  margin: 0 0 24px;
  color: var(--text-secondary);
}
.superfans-preview-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 122, 56, 0.14);
}
.superfans-preview-track span {
  display: block;
  width: 47%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4f78, #ff7a38);
}
.superfans-preview-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  color: var(--text-secondary);
  font-size: 0.76rem;
}
.superfans-preview-meta b {
  color: var(--black);
}
.superfans-preview-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 28px;
}
.superfans-preview-tiers span {
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.55;
}
.superfans-preview-tiers .is-rose { color: #ff4f78; }
.superfans-preview-tiers .is-ember { color: #ff7a38; }
.superfans-preview-tiers .is-aqua { color: #24c8c5; }
.superfans-preview-tiers .is-gold { color: #b78700; }
.superfans-preview-tiers .is-active {
  color: #fff;
  border-color: #ff7a38;
  background: #ff7a38;
  opacity: 1;
}
.lyric-video-featured-example video,
.lyric-video-example-card video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #07080b;
}
.lyric-video-carousel-shell {
  min-width: 0;
}
.lyric-video-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: -42px 0 14px;
}
.lyric-video-carousel-controls span {
  min-width: 52px;
  color: var(--text-secondary);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.lyric-video-carousel-controls .btn {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
}
.lyric-video-carousel {
  display: flex;
  gap: clamp(14px, 2.5vw, 24px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding: 2px 2px 12px;
  scrollbar-width: none;
}
.lyric-video-carousel::-webkit-scrollbar {
  display: none;
}
.lyric-video-example-card {
  flex: 0 0 min(82vw, 520px);
  scroll-snap-align: center;
}
@media (max-width: 680px) {
  .lyric-video-carousel-controls {
    margin-top: 0;
  }
  .lyric-video-example-card {
    flex-basis: 88vw;
  }
}
@media (max-width: 900px) {
  .basic-feature-split {
    grid-template-columns: 1fr;
  }
}
.basic-divider-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 24px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.basic-divider-label::before,
.basic-divider-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.basic-comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 36px;
  font-size: 0.93rem;
}
.basic-comparison-table th,
.basic-comparison-table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.basic-comparison-table th {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.basic-comparison-table td:not(:first-child) {
  text-align: center;
  font-weight: 600;
}
.basic-comparison-table tr:last-child td,
.basic-comparison-table tr:last-child th {
  border-bottom: none;
}
.basic-comparison-table .check { color: var(--blue); }
.basic-comparison-table .cross { color: #b0b4c0; }
.basic-comparison-table .partial { color: var(--text-secondary); font-weight: 400; font-size: 0.88rem; }
.pricing-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.pricing-toggle-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.87rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--black);
  font-family: inherit;
  transition: all 0.18s ease;
}
.pricing-toggle-btn.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.pricing-save-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  color: #0d7a56;
  border: 1px solid rgba(16, 185, 129, 0.26);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}
.artist-plus-pricing-block {
  max-width: 920px;
}
.artist-plus-pricing-block .pricing-toggle-row,
.artist-plus-pricing-block .artist-plus-pricing-grid {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.artist-plus-pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.artist-plus-page .basic-section-block {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.artist-plus-gift-block .basic-feature-card {
  max-width: 720px !important;
  margin-left: auto;
  margin-right: auto;
}
.pricing-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(12, 12, 14, 0.04);
  display: flex;
  flex-direction: column;
}
.pricing-card.is-featured {
  border-color: rgba(26, 92, 255, 0.44);
  background: linear-gradient(160deg, rgba(26, 92, 255, 0.07), rgba(26, 92, 255, 0.02));
  box-shadow: 0 16px 36px rgba(26, 92, 255, 0.12);
}
.pricing-card-name {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.pricing-card-price {
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}
.pricing-card-price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0;
}
.pricing-card-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  min-height: 1.4em;
}
.pricing-feature-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 9px;
  flex: 1;
}
.pricing-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--black);
  line-height: 1.5;
}
.pricing-feature-list li::before {
  content: "✓";
  color: var(--blue);
  font-weight: 800;
  margin-top: 1px;
  flex-shrink: 0;
}
.pricing-feature-list li.is-muted {
  color: var(--text-secondary);
}
.pricing-feature-list li.is-muted::before {
  color: #b0b4c0;
}
.pricing-feature-list .perk-extra {
  display: none;
}
.pricing-feature-list .perk-extra.is-visible {
  display: flex;
  animation: perkReveal 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.perk-expand-btn {
  width: 100%;
  margin-bottom: 12px;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.perk-expand-btn:hover {
  transform: translateY(-1px);
}
.perk-expand-btn.is-expanded {
  box-shadow: 0 8px 18px rgba(26, 92, 255, 0.12);
}
@keyframes perkReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.pricing-faq {
  display: grid;
  gap: 10px;
  margin-bottom: 36px;
}
.pricing-faq-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.pricing-faq-item summary {
  padding: 16px 20px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.97rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pricing-faq-item summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}
.pricing-faq-item[open] summary::after {
  transform: rotate(45deg);
}
.pricing-faq-item p {
  padding: 0 20px 16px;
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.68;
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.changelog-list {
  display: grid;
  gap: 12px;
  margin-bottom: 36px;
}
.changelog-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  background: var(--white);
  box-shadow: 0 5px 18px rgba(12, 12, 14, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.changelog-card:hover {
  border-color: rgba(26, 92, 255, 0.28);
  box-shadow: 0 12px 28px rgba(26, 92, 255, 0.08);
}
.changelog-card-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}
.changelog-date {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.changelog-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(26, 92, 255, 0.22);
  background: rgba(26, 92, 255, 0.07);
  color: #2144a8;
}
.changelog-card h2 {
  margin: 0 0 5px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.changelog-card-excerpt {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.91rem;
  line-height: 1.62;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.changelog-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  border-radius: 16px;
}
.changelog-admin-panel {
  border: 1px solid rgba(26, 92, 255, 0.2);
  border-radius: 18px;
  padding: 22px;
  background: linear-gradient(160deg, rgba(26, 92, 255, 0.05), rgba(26, 92, 255, 0.01));
  margin-bottom: 28px;
}
.changelog-admin-panel h2 {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
}
.changelog-form-grid {
  display: grid;
  gap: 11px;
}
.changelog-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.changelog-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.87rem;
  font-weight: 600;
}
.changelog-body-display {
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--black);
  white-space: pre-wrap;
  word-break: break-word;
}
.changelog-detail-header {
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.changelog-detail-header h1 {
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.changelog-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.09);
  border: 1px solid rgba(239, 68, 68, 0.24);
  color: #c02020;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease;
}
.changelog-delete-btn:hover {
  background: rgba(239, 68, 68, 0.16);
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 34px;
  align-items: start;
  margin-bottom: 36px;
}
.about-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.78;
  color: var(--text-secondary);
  margin: 0 0 18px;
}
.about-body p {
  color: var(--text-secondary);
  line-height: 1.76;
  margin: 0 0 14px;
  font-size: 0.97rem;
}
.about-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.about-stat-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  background: var(--white);
  box-shadow: 0 5px 16px rgba(12, 12, 14, 0.04);
}
.about-stat-card strong {
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--blue);
  margin-bottom: 2px;
}
.about-stat-card span {
  font-size: 0.83rem;
  color: var(--text-secondary);
}
.about-info-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  background: var(--white);
  box-shadow: 0 6px 20px rgba(12, 12, 14, 0.04);
}
.about-info-card h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
}
.about-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.about-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.about-info-list li strong {
  color: var(--black);
}
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 13px;
  margin-bottom: 36px;
}
.about-value-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  background: var(--white);
}
.about-value-card .basic-reason-icon {
  font-size: 1.5rem;
}
.about-value-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
}
.about-value-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}
.presave-mockup {
  border: 1px solid rgba(26, 92, 255, 0.24);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 255, 0.9));
  box-shadow: 0 18px 40px rgba(14, 20, 36, 0.18);
  padding: clamp(18px, 3vw, 28px);
  display: grid;
  gap: 16px;
}
.presave-track-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.presave-cover {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(26, 92, 255, 0.28), rgba(111, 90, 255, 0.38));
  flex-shrink: 0;
  display: block;
  object-fit: cover;
}
.presave-track-info strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 3px;
}
.presave-track-info span {
  font-size: 0.83rem;
  color: var(--text-secondary);
}
.presave-countdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.presave-countdown-unit {
  border: 1px solid rgba(26, 92, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  text-align: center;
}
.presave-countdown-unit strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--blue);
}
.presave-countdown-unit span {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.yourspace-mockup {
  border: 1px solid rgba(26, 92, 255, 0.22);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(243, 248, 255, 0.9));
  box-shadow: 0 18px 40px rgba(14, 20, 36, 0.18);
  overflow: hidden;
}
.yourspace-mockup-header {
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(26, 92, 255, 0.1);
}
.yourspace-mockup-header strong {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.yourspace-generated-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(26, 92, 255, 0.22);
  background: rgba(26, 92, 255, 0.08);
  color: #2144a8;
}
.yourspace-track-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 0.91rem;
}
.yourspace-track-row:last-child {
  border-bottom: none;
}
.yourspace-track-cover {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
}
.yourspace-track-info strong {
  display: block;
  font-size: 0.91rem;
  font-weight: 700;
  margin-bottom: 1px;
}
.yourspace-track-info span {
  font-size: 0.79rem;
  color: var(--text-secondary);
}
.yourspace-track-dur {
  font-size: 0.79rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.community-mockup {
  border: 1px solid rgba(26, 92, 255, 0.22);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(243, 248, 255, 0.9));
  box-shadow: 0 18px 40px rgba(14, 20, 36, 0.18);
  padding: clamp(16px, 2.8vw, 22px);
  display: grid;
  gap: 12px;
}
.community-comment {
  border: 1px solid rgba(26, 92, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  padding: 12px 14px;
}
.community-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.community-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(26, 92, 255, 0.3), rgba(111, 90, 255, 0.4));
}
.community-comment-header strong {
  font-size: 0.86rem;
  font-weight: 700;
}
.community-timestamp-badge {
  margin-left: auto;
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(26, 92, 255, 0.1);
  color: #2144a8;
  border: 1px solid rgba(26, 92, 255, 0.18);
}
.community-comment p {
  margin: 0;
  font-size: 0.88rem;
  color: #3a3f5a;
  line-height: 1.55;
}
.plus-teaser-panel {
  border: 1px solid rgba(26, 92, 255, 0.26);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.9));
  box-shadow: 0 18px 40px rgba(14, 20, 36, 0.18);
  overflow: hidden;
}
.plus-teaser-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(26, 92, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.plus-teaser-header strong {
  font-size: 1rem;
  font-weight: 800;
}
.plus-teaser-badge {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--blue);
  color: #fff;
}
.plus-teaser-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 80px;
  gap: 8px;
  align-items: center;
  padding: 11px 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 0.88rem;
}
.plus-teaser-row:last-child {
  border-bottom: none;
}
.plus-teaser-row-head {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.plus-teaser-col {
  text-align: center;
  font-weight: 600;
  font-size: 0.88rem;
}
.plus-teaser-col.is-plus {
  color: var(--blue);
  font-weight: 800;
}
.plus-teaser-col.is-muted {
  color: #b0b4c0;
}
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .changelog-form-row {
    grid-template-columns: 1fr;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .basic-comparison-table th,
  .basic-comparison-table td {
    padding: 11px 12px;
    font-size: 0.85rem;
  }
  .yourspace-track-row {
    padding: 10px 14px;
  }
  .plus-teaser-row {
    padding: 10px 14px;
  }
}
.sc-tracks-list{display:flex;flex-direction:column;gap:12px;}
.sc-track-row{background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:16px;transition:box-shadow 0.18s;}
.sc-track-row:hover{box-shadow:0 4px 24px rgba(0,0,0,0.08);}
.sc-track-row-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.sc-track-order{min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;border-radius:50%;font-size:0.78rem;font-weight:700;flex-shrink:0;}
.sc-track-title{flex:1;font-size:0.95rem;font-weight:500;}
.sc-track-reorder{display:flex;gap:4px;flex-shrink:0;}
.sc-track-duration{font-size:0.78rem;color:var(--text-secondary);white-space:nowrap;flex-shrink:0;}
.sc-track-row-fields{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:12px;}
@media(max-width:640px){.sc-track-row-fields{grid-template-columns:1fr;}}
.sc-audio-zone{border:2px dashed var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color 0.18s,background 0.18s;position:relative;overflow:hidden;}
.sc-audio-zone:hover{border-color:var(--blue);background:rgba(var(--blue-rgb,59,130,246),0.04);}
.sc-audio-zone.has-file{border-color:var(--success,#22c55e);background:rgba(34,197,94,0.05);border-style:solid;}
.sc-audio-zone-inner{display:flex;flex-direction:column;gap:4px;pointer-events:none;}
.sc-audio-dz-icon{font-size:1.3rem;color:var(--text-secondary);transition:color 0.18s;}
.sc-audio-zone.has-file .sc-audio-dz-icon{color:var(--success,#22c55e);}
.sc-audio-dz-text{font-size:0.85rem;font-weight:500;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-audio-dz-sub{font-size:0.75rem;color:var(--text-secondary);opacity:0.7;}
.sc-audio-input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
.sc-progress-section{display:flex;flex-direction:column;align-items:center;gap:28px;padding:48px 24px;}
.sc-progress-hero{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.sc-progress-icon-wrap{width:72px;height:72px;border-radius:50%;background:rgba(var(--blue-rgb,59,130,246),0.1);display:flex;align-items:center;justify-content:center;}
.sc-progress-cloud-icon{font-size:2rem;color:var(--blue);animation:sc-cloud-bob 1.4s ease-in-out infinite alternate;}
@keyframes sc-cloud-bob{from{transform:translateY(0);}to{transform:translateY(-6px);}}
.sc-progress-title{font-size:1.2rem;font-weight:700;margin:0;}
.sc-progress-sub{font-size:0.9rem;color:var(--text-secondary);margin:0;}
.sc-progress-bar-wrap{width:100%;max-width:420px;display:flex;align-items:center;gap:12px;}
.sc-progress-bar-track{flex:1;height:8px;background:var(--border);border-radius:99px;overflow:hidden;}

.release-track-loop-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--bg-secondary);
}

.release-track-loop-preview {
  width: min(180px, 42vw);
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #080b12;
  margin-bottom: 10px;
}

.release-track-loop-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.release-track-loop-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.release-track-loop-input {
  max-width: 260px;
}
.sc-progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),#6366f1);border-radius:99px;transition:width 0.3s ease;}
.sc-progress-pct{font-size:0.85rem;font-weight:600;color:var(--blue);min-width:36px;text-align:right;}


.lyrics-quick-launch{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;margin:20px 0 28px;border:1px solid color-mix(in srgb,var(--blue) 28%,var(--border));border-radius:22px;background:radial-gradient(circle at 90% 10%,rgba(111,90,255,.16),transparent 42%),linear-gradient(135deg,color-mix(in srgb,var(--blue) 8%,var(--white)),var(--white));box-shadow:0 18px 50px rgba(26,92,255,.08)}
.lyrics-quick-launch-copy h3{font-size:clamp(1.25rem,2vw,1.65rem);margin:5px 0 6px;letter-spacing:-.025em}.lyrics-quick-launch-copy p{margin:0;color:var(--text-secondary);max-width:650px}.lyrics-quick-kicker{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-size:.72rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.lyrics-quick-launch-actions{display:flex;gap:9px;flex-wrap:wrap;flex-shrink:0}
.lyrics-quick-recent{margin:0 0 28px}.lyrics-quick-recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}.lyrics-quick-recent-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:11px;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--white);color:var(--text);text-decoration:none}.lyrics-quick-recent-card:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--border));transform:translateY(-1px)}.lyrics-quick-recent-card img{width:48px;height:48px;border-radius:10px;object-fit:cover}.lyrics-quick-recent-card span{min-width:0}.lyrics-quick-recent-card strong,.lyrics-quick-recent-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lyrics-quick-recent-card small{color:var(--text-secondary);font-size:.75rem;margin-top:2px}.lyrics-quick-recent-card>i{color:var(--text-secondary)}
.lyrics-quick-modal,.lyrics-collections-modal,.lyrics-quick-render-modal{z-index:10020}.lyrics-quick-modal-content{width:min(1160px,96vw);height:min(820px,94vh);max-height:94vh;padding:0;overflow:hidden;border-radius:24px;display:flex;flex-direction:column;background:var(--white)}
.lyrics-quick-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 13px;border-bottom:1px solid var(--border)}.lyrics-quick-modal-head h2{font-size:1.25rem;margin:2px 0 0}.lyrics-quick-stepper{display:flex;gap:8px;padding:10px 22px;border-bottom:1px solid var(--border)}.lyrics-quick-stepper span{height:5px;border-radius:99px;background:var(--border);flex:1;transition:.2s}.lyrics-quick-stepper span.is-active{background:var(--blue)}.lyrics-quick-stepper span.is-done{background:color-mix(in srgb,var(--blue) 45%,var(--border))}
.lyrics-quick-modal-grid{display:grid;grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);min-height:0;flex:1}.lyrics-quick-preview-column{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;background:color-mix(in srgb,var(--bg-secondary) 88%,#0a1020);border-right:1px solid var(--border)}.lyrics-quick-preview-frame{position:relative;width:min(100%,420px);height:auto;max-height:min(58vh,610px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#090b12;box-shadow:0 24px 65px rgba(0,0,0,.28)}.lyrics-quick-preview-frame canvas{width:100%;height:100%;display:block}.lyrics-quick-preview-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.72);background:radial-gradient(circle at center,#222a48,#080a12)}.lyrics-quick-preview-empty i{font-size:2rem}.lyrics-quick-preview-caption{margin:12px 0 0;font-size:.78rem;color:var(--text-secondary);text-align:center}
.lyrics-quick-preview-empty[hidden]{display:none!important}
.lyrics-quick-options-column{overflow:auto;padding:22px 24px}.lyrics-quick-step-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}.lyrics-quick-step-head>span{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;color:#fff;background:var(--blue);font-size:.75rem;font-weight:800}.lyrics-quick-step-head h3{margin:0;font-size:1.15rem}.lyrics-quick-step-head p{margin:3px 0 0;color:var(--text-secondary);font-size:.82rem}.lyrics-quick-group-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin:20px 0 9px;color:var(--text-secondary)}
.lyrics-quick-track-grid,.lyrics-quick-collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.lyrics-quick-track-card,.lyrics-quick-collection-card{display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:10px;border:1.5px solid var(--border);border-radius:14px;background:var(--white);padding:8px;color:var(--text);text-align:left;cursor:pointer}.lyrics-quick-track-card:hover,.lyrics-quick-collection-card:hover,.lyrics-quick-choice-card:hover{border-color:color-mix(in srgb,var(--blue) 42%,var(--border))}.lyrics-quick-track-card.is-selected,.lyrics-quick-collection-card.is-selected,.lyrics-quick-choice-card.is-selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,92,255,.1)}.lyrics-quick-track-card img,.lyrics-quick-collection-card img,.lyrics-quick-collection-placeholder{width:50px;height:50px;border-radius:10px;object-fit:cover;background:var(--bg-secondary);display:grid;place-items:center}.lyrics-quick-track-card strong,.lyrics-quick-track-card small,.lyrics-quick-collection-card strong,.lyrics-quick-collection-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lyrics-quick-track-card small,.lyrics-quick-collection-card small{font-size:.72rem;color:var(--text-secondary);margin-top:3px}
.lyrics-quick-range{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;padding:14px;border-radius:14px;background:var(--bg-secondary)}.lyrics-quick-range label{font-size:.78rem;font-weight:700}.lyrics-quick-range select{display:block;width:100%;margin-top:5px}.lyrics-quick-range p{grid-column:1/-1;margin:0}.lyrics-quick-inline-actions{display:flex;justify-content:flex-end;margin:-4px 0 10px}
.lyrics-quick-card-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.lyrics-quick-choice-card{min-height:78px;border:1.5px solid var(--border);border-radius:14px;background:var(--white);color:var(--text);padding:10px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;cursor:pointer}.lyrics-quick-choice-card:disabled{opacity:.45;cursor:not-allowed}.lyrics-quick-choice-swatch{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:24px;padding:0 7px;border-radius:7px;background:linear-gradient(135deg,rgba(26,92,255,.16),rgba(137,92,246,.16));color:var(--blue);font-size:.68rem;font-weight:900;margin-bottom:7px}.lyrics-quick-choice-card strong{font-size:.81rem}.lyrics-quick-choice-card small{font-size:.68rem;color:var(--text-secondary);margin-top:2px;line-height:1.25}.lyrics-quick-count{display:grid;grid-template-columns:auto 1fr 34px;align-items:center;gap:12px;margin-top:22px;padding:14px;border:1px solid var(--border);border-radius:14px;font-size:.82rem;font-weight:750}.lyrics-quick-count strong{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#fff;background:var(--blue)}.lyrics-quick-error{margin:12px 0 0;color:#d6293e;font-size:.82rem;font-weight:650}.lyrics-quick-footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 20px calc(13px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--white)}.lyrics-quick-footer span{text-align:center;font-size:.77rem;color:var(--text-secondary)}
.lyrics-collections-content{width:min(980px,95vw);max-height:90vh;overflow:hidden;padding:0;border-radius:22px}.lyrics-collections-content .modal-header p{margin:3px 0 0;color:var(--text-secondary);font-size:.8rem}.lyrics-collections-toolbar{display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border)}.lyrics-collections-toolbar input{flex:1}.lyrics-collections-layout{display:grid;grid-template-columns:250px 1fr;min-height:520px;max-height:68vh}.lyrics-collections-list{padding:12px;border-right:1px solid var(--border);overflow:auto;background:var(--bg-secondary)}.lyrics-collections-list-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--text);text-align:left;cursor:pointer}.lyrics-collections-list-item.is-selected{background:var(--white);border-color:var(--border)}.lyrics-collections-list-item small{color:var(--text-secondary)}.lyrics-collection-editor{padding:16px;overflow:auto}.lyrics-collection-empty{min-height:300px;display:grid;place-items:center;color:var(--text-secondary)}.lyrics-collection-editor-head{display:grid;grid-template-columns:1fr auto auto;gap:7px}.lyrics-collection-upload{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px 0;padding:16px;border:1.5px dashed var(--border);border-radius:14px;cursor:pointer;color:var(--text-secondary)}.lyrics-collection-upload input{display:none}.lyrics-collection-pinterest{display:flex;gap:7px}.lyrics-collection-pinterest input{flex:1}.lyrics-collection-pinterest-results{display:flex;gap:8px;overflow-x:auto;margin:10px 0}.lyrics-collection-pinterest-results button{position:relative;flex:0 0 100px;height:100px;border:0;border-radius:11px;overflow:hidden;padding:0;cursor:pointer}.lyrics-collection-pinterest-results img{width:100%;height:100%;object-fit:cover}.lyrics-collection-pinterest-results span{position:absolute;inset:auto 6px 6px;padding:4px;background:rgba(0,0,0,.7);color:#fff;border-radius:6px}.lyrics-collection-assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.lyrics-collection-asset{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:9px;padding:7px;border:1px solid var(--border);border-radius:12px}.lyrics-collection-asset img,.lyrics-collection-asset video{width:64px;height:64px;border-radius:8px;object-fit:cover;background:#080a10}.lyrics-collection-asset span,.lyrics-collection-asset small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lyrics-collection-asset small{color:var(--text-secondary);font-size:.7rem}.lyrics-collection-asset>button{border:0;background:transparent;color:var(--text-secondary);cursor:pointer}.lyrics-collection-asset.is-locked{opacity:.6}.lyrics-collections-content>.lyrics-quick-error{padding:0 18px 14px}
.lyrics-quick-results-page{padding:24px 0 64px}.lyrics-quick-results-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}.lyrics-quick-results-title{display:flex;align-items:center;gap:12px;flex:1}.lyrics-quick-results-title img{width:58px;height:58px;border-radius:13px;object-fit:cover}.lyrics-quick-results-title h1{font-size:clamp(1.35rem,3vw,2rem);margin:2px 0}.lyrics-quick-results-title p{margin:0;color:var(--text-secondary)}.lyrics-quick-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.lyrics-quick-result-card{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--white);box-shadow:0 8px 26px rgba(8,12,28,.06)}.lyrics-quick-result-preview{position:relative;aspect-ratio:9/16;background:#080a12;max-height:520px}.lyrics-quick-result-preview canvas{width:100%;height:100%;display:block}.lyrics-quick-result-preview>span{position:absolute;top:10px;left:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:.72rem;font-weight:800}.lyrics-quick-hover-hint{position:absolute;left:50%;bottom:12px;display:flex;align-items:center;padding:7px 10px;gap:6px;border-radius:99px;color:#fff;background:rgba(0,0,0,.68);font-size:.68rem;font-weight:750;transform:translateX(-50%);transition:opacity .15s ease;white-space:nowrap}.lyrics-quick-result-card:hover .lyrics-quick-hover-hint,.lyrics-quick-result-card:focus-within .lyrics-quick-hover-hint,.lyrics-quick-result-card.is-rendering .lyrics-quick-hover-hint{opacity:0}.lyrics-quick-result-body{padding:12px}.lyrics-quick-result-body>div:first-child{display:flex;justify-content:space-between;gap:8px}.lyrics-quick-result-body strong,.lyrics-quick-result-body small{display:block}.lyrics-quick-result-body small{color:var(--text-secondary);font-size:.73rem;text-transform:capitalize}.lyrics-quick-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}.lyrics-quick-result-actions .btn{justify-content:center}
.lyrics-quick-render-modal .modal-content{width:min(430px,94vw);border-radius:20px;padding:0;overflow:hidden}.lyrics-quick-render-body{text-align:center;padding:28px 24px}.lyrics-quick-render-orbit{width:64px;height:64px;margin:0 auto 15px;display:grid;place-items:center;border-radius:50%;color:var(--blue);background:rgba(26,92,255,.1);animation:lyricsQuickOrbit 1.6s ease-in-out infinite}.lyrics-quick-render-body p{font-weight:750}.lyrics-quick-render-track{height:8px;border-radius:99px;background:var(--bg-secondary);overflow:hidden;margin:16px 0 8px}.lyrics-quick-render-track span{display:block;width:3%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),#8b5cf6);transition:width .45s ease}.lyrics-quick-render-body small{color:var(--text-secondary)}.lyrics-quick-render-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--border)}@keyframes lyricsQuickOrbit{50%{transform:translateY(-5px) rotate(6deg)}}
.lyrics-quick-server-render{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:.72rem;cursor:pointer;padding:5px}.lyrics-quick-server-render small{font-size:.62rem;padding:2px 6px;border-radius:99px;background:var(--bg-secondary);color:var(--text-secondary)}.lyrics-quick-server-render:hover{color:var(--text)}
.lyrics-quick-results-grid,.lyrics-quick-result-card{transition:opacity .2s ease,transform .2s ease,width .25s ease}
.lyrics-quick-results-page.is-rendering-draft .lyrics-quick-result-card:not(.is-rendering){opacity:.2;transform:scale(.97);pointer-events:none}
.lyrics-quick-result-card.is-rendering{grid-column:1/-1;display:grid;grid-template-columns:minmax(300px,620px) minmax(220px,1fr);width:min(980px,100%);margin-inline:auto;border-color:var(--blue);box-shadow:0 24px 70px rgba(15,30,90,.22)}
.lyrics-quick-result-card.is-rendering .lyrics-quick-result-preview{width:100%;max-height:76vh}
.lyrics-quick-result-card.is-rendering .lyrics-quick-result-body{display:flex;flex-direction:column;justify-content:center;padding:24px}
.lyrics-quick-batch-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.lyrics-quick-tools-dialog{position:fixed;inset:0;width:min(720px,calc(100vw - 28px));max-height:min(900px,calc(100dvh - 28px));margin:auto;padding:0;overflow:visible;border:0;border-radius:14px;color:var(--as-text,var(--text));background:transparent;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .16s ease,transform .16s ease}
.lyrics-quick-tools-dialog.is-open{opacity:1;transform:none}
.lyrics-quick-tools-dialog::backdrop{background:rgba(8,11,18,.64);backdrop-filter:blur(4px)}
.lyrics-quick-tools-dialog.lyrics-quick-schedule-dialog{width:min(820px,calc(100vw - 28px))}
.lyrics-quick-tools-dialog.lyrics-quick-fuse-dialog{width:min(520px,calc(100vw - 28px))}
.lyrics-quick-tools-card{display:flex!important;max-height:min(900px,calc(100dvh - 28px))!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;gap:0!important;border:1px solid var(--as-border,var(--border))!important;border-radius:14px!important;background:var(--as-panel,var(--white))!important;box-shadow:0 28px 90px rgba(0,0,0,.32)}
.lyrics-quick-tools-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start!important;justify-content:space-between;padding:22px 24px 18px;border-bottom:1px solid var(--as-border,var(--border));background:var(--as-panel,var(--white))}
.lyrics-quick-tools-head>div{display:flex;align-items:flex-start;gap:13px;min-width:0}
.lyrics-quick-tools-head h2{margin:0 0 4px!important;font-size:1.28rem!important}
.lyrics-quick-tools-head p{margin:0;color:var(--as-muted,var(--text-secondary));font-size:.82rem;line-height:1.45}
.lyrics-quick-tools-icon{display:grid;place-items:center;width:39px;height:39px;flex:0 0 39px;border-radius:10px;color:var(--as-accent,var(--blue));background:color-mix(in srgb,var(--as-accent,var(--blue)) 10%,transparent)}
.lyrics-quick-tools-card>section,.lyrics-quick-tools-card>.lyrics-quick-schedule-flow,.lyrics-quick-tools-card>.lyrics-quick-tool-status,.lyrics-quick-tools-card>.lyrics-quick-caption-result{margin-inline:24px}
.lyrics-quick-tool-step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:13px;padding:18px 0;border-bottom:1px solid var(--as-border,var(--border))}
.lyrics-quick-tool-step-number{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;color:#fff;background:var(--as-accent,var(--blue));font-size:.75rem;font-weight:800}
.lyrics-quick-tool-step h3{margin:3px 0 4px;color:var(--as-text,var(--text));font-size:.93rem}
.lyrics-quick-tool-step p{margin:0 0 13px;color:var(--as-muted,var(--text-secondary));font-size:.78rem;line-height:1.5}
.lyrics-quick-tool-step label,.lyrics-quick-tools-card>label{display:grid;gap:6px;color:var(--as-muted,var(--text-secondary));font-size:.78rem;font-weight:700}
.lyrics-quick-tools-card>label{margin:18px 24px 0}
.lyrics-quick-tool-step label small{font-weight:500}
.lyrics-quick-tool-step small{display:block;margin-top:7px;color:var(--as-muted,var(--text-secondary));font-size:.72rem;line-height:1.45}
.lyrics-quick-tools-card input:not([type=checkbox]),.lyrics-quick-tools-card select,.lyrics-quick-tools-card textarea{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--as-border,var(--border));border-radius:8px;outline:0;color:var(--as-text,var(--text));background:var(--as-panel,var(--white));font:inherit;font-weight:500}
.lyrics-quick-tools-card textarea{resize:vertical}
.lyrics-quick-tools-card input:focus,.lyrics-quick-tools-card select:focus,.lyrics-quick-tools-card textarea:focus{border-color:var(--as-accent,var(--blue));box-shadow:0 0 0 3px color-mix(in srgb,var(--as-accent,var(--blue)) 12%,transparent)}
.lyrics-quick-tools-card input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;accent-color:var(--as-accent,var(--blue))}
.lyrics-quick-tools-card fieldset{display:flex;align-items:center;flex-wrap:wrap;margin:12px 0 0;padding:11px 13px;gap:8px 18px;border:1px solid var(--as-border,var(--border));border-radius:9px}
.lyrics-quick-tools-card fieldset legend{padding:0 6px;color:var(--as-muted,var(--text-secondary));font-size:.75rem;font-weight:700}
.lyrics-quick-tools-card fieldset label{margin:0!important;padding:0!important}
.lyrics-quick-tools-card footer{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;margin:0!important;padding:15px 24px;gap:8px;border-top:1px solid var(--as-border,var(--border));background:var(--as-panel,var(--white))}
.lyrics-quick-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.lyrics-quick-tool-status{display:flex;align-items:flex-start;min-height:46px;margin-block:16px!important;padding:12px 14px;gap:10px;border:1px solid var(--as-border,var(--border));border-radius:9px;color:var(--as-muted,var(--text-secondary));background:var(--as-panel-subtle,var(--bg-secondary));font-size:.8rem;line-height:1.45}
.lyrics-quick-tool-status i{margin-top:2px;color:var(--as-accent,var(--blue))}
.lyrics-quick-tool-status[data-state=working] i{animation:lyricsQuickSpin 1s linear infinite}
.lyrics-quick-tool-status[data-state=success]{border-color:rgba(21,145,91,.3);color:#15915b;background:rgba(21,145,91,.07)}
.lyrics-quick-tool-status[data-state=error]{border-color:rgba(220,38,38,.3);color:#dc2626;background:rgba(220,38,38,.07)}
.lyrics-quick-caption-result{padding:14px;border:1px solid var(--as-border,var(--border));border-radius:9px;background:var(--as-panel-subtle,var(--bg-secondary))}
.lyrics-quick-caption-result strong{display:block;margin-bottom:8px;font-size:.8rem}
.lyrics-quick-caption-result ol{max-height:150px;margin:0;padding-left:22px;overflow:auto;color:var(--as-muted,var(--text-secondary));font-size:.76rem;line-height:1.65}
.lyrics-quick-tool-note{display:flex;margin:0 24px;padding:13px;gap:10px;border-radius:9px;color:var(--as-muted,var(--text-secondary));background:var(--as-panel-subtle,var(--bg-secondary));font-size:.8rem;line-height:1.45}
.lyrics-quick-schedule-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 0 2px;gap:8px}
.lyrics-quick-schedule-flow span{display:flex;align-items:center;gap:7px;color:var(--as-muted,var(--text-secondary));font-size:.7rem;font-weight:700}
.lyrics-quick-schedule-flow b{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;color:var(--as-accent,var(--blue));background:color-mix(in srgb,var(--as-accent,var(--blue)) 10%,transparent)}
.lyrics-quick-plan-row{display:grid;grid-template-columns:72px minmax(0,1fr) 120px;gap:10px;align-items:end;padding:12px 0;border-top:1px solid var(--as-border,var(--border))}
.lyrics-quick-plan-row:first-child{margin-top:12px}
.lyrics-quick-plan-row small{grid-column:2/-1;color:var(--as-muted,var(--text-secondary))}
@keyframes lyricsQuickSpin{to{transform:rotate(360deg)}}
.lyrics-quick-results-skeleton{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:94px}.lyrics-quick-results-skeleton span{display:block;aspect-ratio:9/16;max-height:520px;border-radius:18px;background:linear-gradient(100deg,var(--bg-secondary) 25%,color-mix(in srgb,var(--white) 78%,var(--border)) 42%,var(--bg-secondary) 60%);background-size:300% 100%;animation:lyricsQuickSkeleton 1.25s ease-in-out infinite}.lyrics-quick-results-skeleton:not([hidden])~.lyrics-quick-results-head,.lyrics-quick-results-skeleton:not([hidden])~.lyrics-quick-results-grid{display:none}@keyframes lyricsQuickSkeleton{to{background-position:-150% 0}}
html.dark-mode .lyrics-quick-launch{background:radial-gradient(circle at 90% 10%,rgba(111,90,255,.2),transparent 42%),linear-gradient(135deg,rgba(26,92,255,.1),var(--white))}html.dark-mode .lyrics-quick-result-card,html.dark-mode .lyrics-quick-recent-card{box-shadow:0 10px 30px rgba(0,0,0,.22)}
@media(max-width:760px){.lyrics-quick-launch{align-items:flex-start;flex-direction:column;padding:18px}.lyrics-quick-launch-actions{width:100%}.lyrics-quick-launch-actions .btn{flex:1}.lyrics-quick-modal{align-items:stretch!important}.lyrics-quick-modal-content{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}.lyrics-quick-modal-head{padding-top:calc(14px + env(safe-area-inset-top))}.lyrics-quick-modal-grid{display:flex;flex-direction:column}.lyrics-quick-preview-column{flex:0 0 auto;padding:10px 16px;border-right:0;border-bottom:1px solid var(--border)}.lyrics-quick-preview-frame{width:min(100%,240px);height:auto;max-height:30vh;border-radius:16px}.lyrics-quick-preview-caption{margin-top:6px}.lyrics-quick-options-column{padding:16px;flex:1}.lyrics-quick-track-grid,.lyrics-quick-collection-grid{grid-template-columns:1fr}.lyrics-quick-card-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px}.lyrics-quick-choice-card{flex:0 0 145px;scroll-snap-align:start}.lyrics-quick-footer{position:sticky;bottom:0}.lyrics-collections-modal{align-items:flex-end!important}.lyrics-collections-content{width:100vw!important;max-height:92dvh!important;border-radius:22px 22px 0 0!important;padding-bottom:env(safe-area-inset-bottom)}.lyrics-collections-layout{display:block;min-height:0;max-height:70dvh}.lyrics-collections-list{display:flex;gap:5px;border-right:0;border-bottom:1px solid var(--border);overflow-x:auto}.lyrics-collections-list-item{flex:0 0 auto;width:auto;gap:12px}.lyrics-collection-editor-head{grid-template-columns:1fr auto}.lyrics-collection-editor-head .is-danger{grid-column:1/-1}.lyrics-collection-assets{grid-template-columns:1fr}.lyrics-quick-results-head{align-items:flex-start;flex-wrap:wrap}.lyrics-quick-results-head>a{order:1}.lyrics-quick-results-title{order:3;flex-basis:100%}.lyrics-quick-results-head>button{order:2;margin-left:auto}.lyrics-quick-results-grid{grid-template-columns:1fr}.lyrics-quick-result-card{display:grid;grid-template-columns:minmax(125px,40vw) 1fr}.lyrics-quick-result-preview{max-height:none}.lyrics-quick-result-body{display:flex;flex-direction:column;justify-content:space-between}.lyrics-quick-result-actions{grid-template-columns:1fr}.lyrics-quick-range{grid-template-columns:1fr}.lyrics-quick-range p{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.lyrics-quick-render-orbit{animation:none}.lyrics-quick-recent-card,.lyrics-quick-stepper span,.lyrics-quick-render-track span{transition:none!important}}
@media(max-width:760px){.lyrics-quick-batch-actions{width:100%;justify-content:stretch}.lyrics-quick-batch-actions .btn{flex:1}.lyrics-quick-tools-grid,.lyrics-quick-plan-row{grid-template-columns:1fr}.lyrics-quick-plan-row small{grid-column:auto}.lyrics-quick-results-skeleton{grid-template-columns:1fr;margin-top:130px}}
@media(max-width:760px){.lyrics-quick-tools-dialog,.lyrics-quick-tools-dialog.lyrics-quick-schedule-dialog,.lyrics-quick-tools-dialog.lyrics-quick-fuse-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.lyrics-quick-tools-card{max-height:calc(100dvh - 16px)!important}.lyrics-quick-tools-head{padding:17px 16px 14px}.lyrics-quick-tools-card>section,.lyrics-quick-tools-card>.lyrics-quick-schedule-flow,.lyrics-quick-tools-card>.lyrics-quick-tool-status,.lyrics-quick-tools-card>.lyrics-quick-caption-result{margin-inline:16px}.lyrics-quick-tools-card footer{padding:13px 16px}.lyrics-quick-tool-note{margin-inline:16px}.lyrics-quick-schedule-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.lyrics-quick-tool-step{grid-template-columns:28px minmax(0,1fr);gap:10px}.lyrics-quick-tools-head p{display:none}}
@media(prefers-reduced-motion:reduce){.lyrics-quick-results-skeleton span{animation:none}}

.cherry-video-tagged-song[hidden],
.cherry-video-mention-dropdown[hidden],
.cherry-video-mode-dropdown[hidden] { display: none !important; }

.your-presets-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.your-presets-head-inner { display: flex; align-items: center; gap: 10px; }
.your-presets-see-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--blue); background: rgba(26,92,255,0.07); border: 1px solid rgba(26,92,255,0.18); border-radius: 99px; padding: 4px 12px; text-decoration: none; transition: background 0.15s; }
.your-presets-see-more:hover { background: rgba(26,92,255,0.14); }
.lyrics-marketplace-tier.is-yours { color: #0ea5e9; background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.3); }

.cherry-video-hub-head-left { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cherry-video-hub-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid; letter-spacing: 0.02em; vertical-align: middle; }
.cherry-video-hub-badge.is-unlocked { color: #22c55e; background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.25); }
.cherry-video-hub-badge.is-locked { color: var(--text-secondary); background: var(--bg-secondary); border-color: var(--border); }

.cherry-video-hub-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cherry-video-prompt-row { display: flex; flex-direction: column; gap: 8px; }
.cherry-video-prompt-textarea { display: block; width: 100%; min-height: 72px; resize: vertical; border: 1px solid var(--border); border-radius: 12px; background: var(--white); color: var(--text); font-size: 14px; font-family: inherit; padding: 10px 14px; line-height: 1.5; box-shadow: 0 1px 0 rgba(0,0,0,0.02); transition: border-color 0.2s, box-shadow 0.2s; }
.cherry-video-prompt-textarea::placeholder { color: var(--text-secondary); }
.cherry-video-prompt-textarea:focus { outline: none; border-color: rgba(26,92,255,0.5); box-shadow: 0 0 0 3px rgba(26,92,255,0.1); }

.cherry-video-prompt-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cherry-video-prompt-footer-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }

.cherry-video-mention-wrap { position: relative; isolation: isolate; overflow: visible; }
.cherry-video-mention-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5000 !important; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.14); max-height: min(42vh, 320px); overflow-y: auto; }
.cherry-video-mention-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: none; border: none; cursor: pointer; text-align: left; font-size: 14px; transition: background 0.1s; }
.cherry-video-mention-option:hover { background: var(--bg-secondary); }
.cherry-video-mention-cover { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.cherry-video-mention-title { font-size: 13px; font-weight: 600; }

.cherry-video-mode-select-wrap { position: relative; isolation: isolate; overflow: visible; }
.cherry-video-mode-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--white); color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; white-space: nowrap; }
.cherry-video-mode-btn:hover { border-color: rgba(26,92,255,0.4); background: var(--bg-secondary); }
.cherry-video-mode-dropdown { position: absolute; top: calc(100% + 4px); left: 0; z-index: 2400; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.14); min-width: 190px; overflow: hidden; max-height: min(42vh, 320px); overflow-y: auto; }
.cherry-video-mode-option { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 14px; background: none; border: none; cursor: pointer; text-align: left; transition: background 0.1s; border-bottom: 1px solid var(--border); }
.cherry-video-mode-option:last-child { border-bottom: none; }
.cherry-video-mode-option:hover { background: var(--bg-secondary); }
.cherry-video-mode-option.is-active .cherry-video-mode-option-main { color: var(--blue); }
.cherry-video-mode-option-main { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.cherry-video-mode-option-sub { font-size: 12px; color: var(--text-secondary); padding-left: 20px; }

.cherry-video-tagged-song { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--blue) 8%, var(--white)); border: 1px solid rgba(26,92,255,0.25); border-radius: 8px; padding: 3px 8px 3px 4px; max-width: 220px; height: 34px; }
.cherry-video-tagged-cover { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.cherry-video-tagged-title { font-size: 12px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cherry-video-tagged-remove { background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 11px; padding: 2px; line-height: 1; flex-shrink: 0; }
.cherry-video-tagged-remove:hover { color: var(--text); }

.cherry-video-generate-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; font-size: 14px; font-weight: 700; white-space: nowrap; }

.cherry-video-upsell-inline { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.cherry-video-upsell-inline a { color: var(--blue); text-decoration: underline; }

.cherry-video-popup { position: fixed; inset: 0; z-index: 9990; display: none; align-items: center; justify-content: center; }
.cherry-video-popup:not([hidden]) { display: flex; }
.cherry-video-popup-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); }
.cherry-video-popup-inner { position: relative; z-index: 1; background: var(--white); border-radius: 18px; width: min(460px, 96vw); max-height: 92vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,0.3); display: flex; flex-direction: column; }
.cherry-video-popup-header { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid var(--border); }
.cherry-video-popup-icon { font-size: 1.1rem; color: var(--blue); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(26,92,255,0.1); border-radius: 9px; flex-shrink: 0; }
.cherry-video-popup-icon.is-spinning i { animation: cherry-spin 1s linear infinite; display: inline-block; }
@keyframes cherry-spin { to { transform: rotate(360deg); } }
.cherry-video-popup-subtitle { font-size: 12px; color: var(--text-secondary); margin: 0; line-height: 1.3; }
.cherry-video-popup-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.cherry-video-popup-status { background: var(--bg-secondary); border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.7; color: var(--text-secondary); max-height: 100px; overflow-y: auto; font-family: ui-monospace, monospace; }
.cherry-video-popup-canvas-wrap { border-radius: 12px; overflow: hidden; background: #0a0a12; margin: 0 auto; width: min(240px, 54vw); aspect-ratio: 1/1; }
.cherry-video-popup-canvas { width: 100%; height: 100%; display: block; }
.cherry-video-popup-actions { padding: 12px 18px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
.cherry-video-popup-open-btn { display: inline-flex; align-items: center; gap: 7px; }
.cherry-video-popup-open-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cherry-video-upsell-modal .modal-content { max-width: 400px; text-align: center; }
.cherry-video-upsell-body { padding: 8px 0 4px; }
.cherry-video-upsell-body h4 { font-size: 1.1rem; font-weight: 800; margin: 0 0 8px; }
.cherry-video-upsell-body p { font-size: 14px; color: var(--text-secondary); margin: 0 0 12px; }
.cherry-video-upsell-price { font-size: 1rem; font-weight: 700; color: var(--blue); }

.lyric-presets-page { padding: 28px 0 60px; }
.lyric-presets-page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.lyric-presets-back-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 99px; padding: 6px 14px; text-decoration: none; cursor: pointer; }
.lyric-presets-page-title { font-size: 1.25rem; font-weight: 800; margin: 0; }
.lyric-presets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.lyric-presets-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.lyric-presets-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.lyric-presets-empty-title { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.lyric-presets-empty-sub { font-size: 0.88rem; margin: 0 0 18px; }
.lyric-preset-card-meta { margin-top: 4px; }
.lyric-preset-card-date { font-size: 0.76rem; color: var(--text-secondary); }

.cherry-bulk-page { padding: 28px 0 60px; }
.cherry-bulk-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.cherry-bulk-header-title { flex: 1; }
.cherry-bulk-header-title h1 { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; }
.cherry-bulk-header-title p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.92rem; }
.cherry-bulk-prompt-bar { background: var(--white); border: 1.5px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.cherry-bulk-textarea { width: 100%; min-height: 70px; resize: vertical; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 0.9rem; background: var(--bg-secondary); color: var(--text); font-family: inherit; }
.cherry-bulk-textarea:focus { outline: none; border-color: rgba(26,92,255,0.5); }
.cherry-bulk-prompt-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cherry-bulk-generate-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 22px; background: var(--blue); color: #fff; border: none; border-radius: 99px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: opacity 0.15s; }
.cherry-bulk-generate-btn:hover { opacity: 0.87; }
.cherry-bulk-choose-song-prompt { font-size: 0.85rem; color: #e57c00; font-weight: 600; }
.cherry-bulk-error { font-size: 0.88rem; color: #dc2626; font-weight: 600; margin-top: 4px; }
.cherry-bulk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.cherry-bulk-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.cherry-bulk-card-preview { position: relative; aspect-ratio: 1/1; background: #0a0a12; overflow: hidden; }
.cherry-bulk-card-canvas { width: 100%; height: 100%; display: block; }
.cherry-bulk-card-overlay { position: absolute; inset: 0; background: rgba(10,10,18,0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.cherry-bulk-card-spinner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cherry-bulk-spinner-icon { font-size: 2rem; animation: cherry-bounce 1s ease-in-out infinite alternate; }
.cherry-bulk-spinner-icon i { display: inline-block; }
@keyframes cherry-bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.cherry-bulk-spinner-label { font-size: 0.78rem; color: rgba(255,255,255,0.8); text-align: center; max-width: 160px; line-height: 1.4; }
.cherry-bulk-card-index { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.cherry-bulk-card-body { padding: 12px 14px 6px; }
.cherry-bulk-card-name { font-size: 0.9rem; font-weight: 700; margin: 0 0 3px; }
.cherry-bulk-card-style { font-size: 0.78rem; color: var(--text-secondary); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cherry-bulk-card-actions { padding: 10px 14px 14px; display: flex; gap: 8px; }
.cherry-bulk-save-btn, .cherry-bulk-use-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 0; border-radius: 99px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: opacity 0.15s; }
.cherry-bulk-save-btn { background: var(--bg-secondary); color: var(--text); border: 1.5px solid var(--border); }
.cherry-bulk-save-btn:hover { border-color: rgba(26,92,255,0.4); }
.cherry-bulk-save-btn:disabled { opacity: 0.5; cursor: default; }
.cherry-bulk-use-btn { background: var(--blue); color: #fff; border: none; }
.cherry-bulk-use-btn:hover { opacity: 0.87; }

#cherryBulkTaggedCover {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

#cherryBulkTaggedTitle {
  max-width: 150px;
  font-size: 11px;
}

@media (max-width: 1023px) {
  .cherry-bulk-page .cherry-bulk-back-btn,
  .lyric-presets-page .cherry-bulk-back-btn {
    display: none;
  }
}

@media (max-width: 768px) {
  .artist-hub-container {
    padding: 22px 14px 40px;
  }

  .settings-container {
    padding: 22px 14px 140px;
  }
}

.admin-map-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

.admin-map-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.admin-map-eyebrow {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-map-header h1 {
  margin: 0 0 6px;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.05;
}

.admin-map-header p:not(.admin-map-eyebrow) {
  margin: 0;
  color: var(--text-secondary);
}

.admin-map-kpis,
.admin-map-grid {
  display: grid;
  gap: 12px;
}

.admin-map-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.admin-map-kpi,
.admin-map-card {
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--white) 96%, rgba(26, 92, 255, 0.04));
  box-shadow: 0 1px 0 rgba(12, 12, 14, 0.04);
}

.admin-map-kpi {
  padding: 15px;
  display: grid;
  gap: 5px;
}

.admin-map-kpi span,
.admin-map-card-head p,
.admin-map-hover,
.admin-map-empty,
.admin-map-ranked-row small,
.admin-map-list-row small {
  color: var(--text-secondary);
}

.admin-map-kpi strong {
  font-size: 28px;
  line-height: 1;
}

.admin-map-kpi small {
  color: var(--text-secondary);
  font-size: 12px;
}

.admin-map-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.admin-map-card {
  padding: 16px;
  min-width: 0;
}

.admin-map-card-wide {
  min-height: 470px;
}

.admin-map-card h2,
.admin-map-card-head h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.admin-map-card-head {
  margin-bottom: 12px;
}

.admin-map-card-head p {
  margin: -6px 0 0;
  font-size: 13px;
}

.admin-world-map {
  width: 100%;
  min-height: 330px;
  display: block;
  border-radius: 10px;
  background: radial-gradient(circle at 20% 16%, rgba(26, 92, 255, 0.09), rgba(26, 92, 255, 0.02) 45%, rgba(255, 255, 255, 0.68));
}

.admin-world-map-country {
  stroke: rgba(255, 255, 255, 0.68);
  stroke-width: 0.7;
  transition: fill 0.2s ease, stroke 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.admin-world-map-country.is-hovered {
  stroke: rgba(12, 12, 14, 0.62);
  stroke-width: 1.35;
}

.admin-map-hover {
  margin-top: 10px;
  font-size: 13px;
}

.admin-map-list,
.admin-map-ranked,
.admin-map-moderation {
  display: grid;
  gap: 9px;
}

.admin-map-list-row {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 9px;
  background: rgba(26, 92, 255, 0.045);
}

.admin-map-list-row > * {
  position: relative;
  z-index: 1;
}

.admin-map-list-row i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(26, 92, 255, 0.09);
  z-index: 0;
}

.admin-map-list-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-map-list-row span,
.admin-map-ranked-row strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-map-bars {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 7px;
  min-height: 210px;
  align-items: end;
}

.admin-map-bar {
  height: 190px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 7px;
  align-items: end;
}

.admin-map-bar span {
  display: block;
  min-height: 5px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, rgba(26, 92, 255, 0.9), rgba(26, 92, 255, 0.32));
}

.admin-map-bar small {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--text-secondary);
  font-size: 10px;
  justify-self: center;
}

.admin-map-ranked-row {
  display: grid;
  grid-template-columns: 28px 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border-radius: 9px;
  background: rgba(26, 92, 255, 0.045);
}

.admin-map-rank {
  font-weight: 800;
  color: var(--text-secondary);
}

.admin-map-ranked-cover {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 92, 255, 0.08);
  color: var(--blue);
}

.admin-map-ranked-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-map-ranked-row div:nth-child(3) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-map-moderation {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-map-moderation div {
  border-radius: 9px;
  padding: 11px;
  background: rgba(26, 92, 255, 0.045);
  display: grid;
  gap: 4px;
}

.admin-map-moderation span {
  color: var(--text-secondary);
  font-size: 12px;
}

.admin-map-moderation strong {
  font-size: 22px;
}

@media (max-width: 980px) {
  .admin-map-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-map-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-map-page {
    padding: 22px 14px 56px;
  }

  .admin-map-header {
    display: grid;
  }

  .admin-map-kpis,
  .admin-map-moderation {
    grid-template-columns: 1fr;
  }

  .admin-world-map {
    min-height: 230px;
  }
}

@media (max-width: 900px) {
  .playlist-sheet-modal {
    align-items: flex-end;
    justify-content: center;
    background:
      radial-gradient(circle at 50% 0%, rgba(26, 92, 255, 0.18), transparent 34%),
      rgba(6, 8, 12, 0.58);
    backdrop-filter: blur(20px) saturate(128%);
  }

  .playlist-sheet-modal .modal-content {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: 0;
    border-radius: 28px 28px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    transform: translateY(100%);
    box-shadow: 0 -24px 72px rgba(0, 0, 0, 0.32);
    touch-action: pan-y;
  }

  .playlist-sheet-modal.is-open .modal-content,
  .playlist-sheet-modal[style*="display: flex"]:not(.show) .modal-content {
    transform: translateY(0);
  }

  .playlist-sheet-modal.is-closing .modal-content {
    transform: translateY(100%);
    opacity: 0.72;
  }

  .playlist-sheet-grabber {
    display: block;
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: rgba(130, 145, 165, 0.52);
    margin: 10px auto 0;
    flex: 0 0 auto;
  }

  .playlist-sheet-modal .modal-header {
    padding: 14px 18px 14px;
  }

  .playlist-sheet-modal .modal-header h2 {
    font-size: 23px;
  }

  .playlist-sheet-title-wrap p {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .playlist-sheet-modal .modal-close {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .playlist-sheet-modal .modal-body {
    padding: 14px 14px 16px;
    max-height: calc(92dvh - 168px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .playlist-sheet-modal .modal-footer {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  .playlist-sheet-primary,
  .playlist-sheet-secondary {
    flex: 1 1 0;
    min-width: 0;
  }

  .add-playlist-create-card {
    grid-template-columns: 44px minmax(0, 1fr);
    border-radius: 18px;
    padding: 12px;
  }

  .add-playlist-create-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .add-playlist-scroll {
    max-height: none;
    padding-right: 2px;
  }

  .add-playlist-list {
    gap: 7px;
  }

  .add-playlist-card {
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .add-playlist-cover {
    grid-column: auto !important;
    width: 54px !important;
    height: 54px !important;
    display: flex !important;
    margin: 0 !important;
  }

  .add-playlist-action {
    grid-column: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px;
  }

  .add-playlist-action span {
    display: none;
  }

  .add-playlist-description {
    display: none;
  }

  .create-playlist-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .create-playlist-cover-picker {
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    padding: 10px;
    border-radius: 18px;
  }

  .create-playlist-cover-preview {
    width: 74px;
    height: 74px;
  }

  .playlist-input-shell {
    min-height: 50px;
  }

  .playlist-input-shell textarea {
    min-height: 96px;
  }
}

.playlist-sheet-modal {
  background: rgba(12, 12, 14, 0.48);
}

.playlist-sheet-modal .modal-content {
  width: min(92vw, 620px);
  max-width: 620px;
  max-height: min(88vh, 720px);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
}

.create-playlist-modal .modal-content {
  width: min(92vw, 560px);
  max-width: 560px;
}

.playlist-sheet-modal .modal-header {
  padding: 22px 24px 18px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.playlist-sheet-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.playlist-sheet-eyebrow {
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.playlist-sheet-modal .modal-header h2,
.add-to-playlist-modal .modal-header h2 {
  max-width: none;
  margin: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--black);
}

.playlist-sheet-title-wrap p {
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
}

.playlist-sheet-modal .modal-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
}

.playlist-sheet-modal .modal-body {
  padding: 16px 24px;
}

.playlist-sheet-modal .modal-footer {
  padding: 16px 24px;
  background: transparent;
  border-top: 1px solid var(--border);
}

.playlist-sheet-primary,
.playlist-sheet-secondary {
  min-height: 42px;
  border-radius: 8px;
}

.add-playlist-create-card,
.add-playlist-card,
.create-playlist-cover-picker,
.playlist-input-shell {
  border-radius: 10px;
  border-color: var(--border);
  background: var(--white);
  box-shadow: none;
}

.add-playlist-create-card {
  padding: 12px;
}

.add-playlist-create-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  box-shadow: none;
}

.add-playlist-card {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 10px;
}

.add-playlist-card:hover,
.add-playlist-create-card:hover,
.add-playlist-create-card:focus-visible {
  box-shadow: none;
  border-color: rgba(26, 92, 255, 0.35);
}

.add-playlist-cover {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: rgba(26, 92, 255, 0.1);
}

.add-playlist-cover img {
  border-radius: 8px;
}

.add-playlist-name {
  font-weight: 600;
}

.add-playlist-action {
  min-width: 74px;
  min-height: 38px;
  border-radius: 8px;
  background: rgba(26, 92, 255, 0.1);
  font-weight: 600;
}

.create-playlist-layout {
  grid-template-columns: 1fr;
  gap: 14px;
}

.create-playlist-cover-picker {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
}

.create-playlist-cover-picker .file-input-wrapper,
.create-playlist-cover-picker .file-input-label,
.create-playlist-cover-picker .file-input-name {
  display: none !important;
}

.create-playlist-cover-preview {
  width: 72px;
  height: 72px;
  max-width: 72px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(26, 92, 255, 0.1);
  font-size: 22px;
}

.create-playlist-cover-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.playlist-input-shell {
  min-height: 48px;
  grid-template-columns: 36px minmax(0, 1fr);
}

.playlist-input-shell input,
.playlist-input-shell textarea,
.playlist-input-shell input:focus,
.playlist-input-shell textarea:focus {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 900px) {
  .playlist-sheet-modal .modal-content {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
  }

  .playlist-sheet-modal .modal-header {
    padding: 14px 16px;
  }

  .playlist-sheet-modal .modal-header h2,
  .add-to-playlist-modal .modal-header h2 {
    font-size: 21px;
  }

  .playlist-sheet-modal .modal-close {
    display: none !important;
  }

  .playlist-sheet-modal .modal-body {
    padding: 14px 16px;
  }

  .playlist-sheet-modal .modal-footer {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  }

  .create-playlist-cover-picker {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .create-playlist-cover-preview,
  .create-playlist-cover-preview img {
    width: 64px;
    height: 64px;
    max-width: 64px;
  }
}

@media (max-width: 768px) {
  .custom-context-menu,
  .custom-context-menu--share {
    background: rgba(6, 8, 12, 0.58) !important;
    -webkit-backdrop-filter: blur(20px) saturate(128%) !important;
    backdrop-filter: blur(20px) saturate(128%) !important;
  }

  .custom-context-menu-list,
  .custom-context-menu-list--share {
    width: 100vw !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    border: 1px solid var(--border) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--white) !important;
    box-shadow: 0 -24px 72px rgba(0, 0, 0, 0.32) !important;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
  }

  .custom-context-menu-list::before,
  .custom-context-menu-list--share::before {
    width: 42px !important;
    height: 5px !important;
    margin: 0 auto 10px !important;
    border-radius: 999px !important;
    background: rgba(130, 145, 165, 0.52) !important;
  }

  .custom-context-menu-item {
    min-height: 52px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--white) !important;
    color: var(--black) !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .custom-context-menu-item i {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(26, 92, 255, 0.1) !important;
    color: var(--blue) !important;
    font-size: 15px !important;
  }

  .custom-context-menu-item:hover,
  .custom-context-menu-item:focus-visible,
  .custom-context-menu-item.context-action-priority {
    background: var(--white) !important;
    border-color: rgba(26, 92, 255, 0.35) !important;
    color: var(--black) !important;
  }

  .custom-context-menu-item:disabled {
    opacity: 0.52 !important;
    color: var(--muted) !important;
  }

  .custom-context-share-head,
  .custom-context-share-footer {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .custom-context-share-title-wrap {
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--white) !important;
    padding: 12px !important;
  }

  .custom-context-share-title-wrap strong {
    color: var(--black) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  .custom-context-share-title-wrap small {
    margin-top: 4px !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .custom-context-share-friends {
    max-height: min(48dvh, 380px) !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }

  .custom-context-share-friend {
    min-height: 62px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--white) !important;
    box-shadow: none !important;
    padding: 9px 10px !important;
    gap: 10px !important;
  }

  .custom-context-share-friend-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 8px !important;
    background: rgba(26, 92, 255, 0.1) !important;
  }

  .custom-context-share-friend-meta strong {
    color: var(--black) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .custom-context-share-friend-meta small {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
  }

  .custom-context-share-friend-send {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 8px !important;
    background: rgba(26, 92, 255, 0.1) !important;
    color: var(--blue) !important;
  }

  .custom-context-share-friend-avatar i,
  .custom-context-share-friend-send i {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 16px !important;
  }

  .custom-context-share-empty {
    min-height: 62px !important;
    margin: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--white) !important;
    color: var(--text-secondary) !important;
    padding: 14px !important;
  }

  .custom-context-share-status {
    min-height: 18px !important;
    padding: 0 4px !important;
  }

  html.dark-mode .custom-context-menu-list,
  html.dark-mode .custom-context-menu-list--share,
  html.dark-mode .custom-context-menu-item,
  html.dark-mode .custom-context-share-title-wrap,
  html.dark-mode .custom-context-share-friend,
  html.dark-mode .custom-context-share-empty {
    background: #141a24 !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
  }

  html.dark-mode .custom-context-menu-item,
  html.dark-mode .custom-context-menu-item:hover,
  html.dark-mode .custom-context-menu-item:focus-visible,
  html.dark-mode .custom-context-share-title-wrap strong,
  html.dark-mode .custom-context-share-friend-meta strong {
    color: var(--text-color) !important;
  }

  html.dark-mode .custom-context-menu-item i,
  html.dark-mode .custom-context-share-friend-avatar,
  html.dark-mode .custom-context-share-friend-send {
    background: rgba(120, 164, 255, 0.12) !important;
    color: var(--blue) !important;
    border-color: var(--border) !important;
  }

  html.dark-mode .custom-context-share-title-wrap small,
  html.dark-mode .custom-context-share-friend-meta small,
  html.dark-mode .custom-context-share-empty {
    color: var(--text-secondary) !important;
  }
}


@media (max-width: 1023px) {
  .lyrics-theater,
  .player-expanded-panel {
    transform-origin: center bottom;
    will-change: transform, opacity, border-radius, backdrop-filter;
    transition:
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.24s ease,
      border-radius 0.32s ease,
      -webkit-backdrop-filter 0.32s ease,
      backdrop-filter 0.32s ease,
      visibility 0s linear 0.42s;
  }

  .lyrics-theater:not(.is-open),
  .player-expanded-panel:not(.active) {
    opacity: 0.52;
    transform: translate3d(0, calc(100% + 24px), 0) scale(0.982);
    border-radius: 28px 28px 0 0;
    -webkit-backdrop-filter: blur(0) saturate(100%);
    backdrop-filter: blur(0) saturate(100%);
  }

  .lyrics-theater.is-open,
  .player-expanded-panel.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    -webkit-backdrop-filter: blur(22px) saturate(128%);
    backdrop-filter: blur(22px) saturate(128%);
    transition:
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.24s ease,
      border-radius 0.32s ease,
      -webkit-backdrop-filter 0.32s ease,
      backdrop-filter 0.32s ease;
  }

  .lyrics-theater.is-open {
    border-radius: var(--lyrics-theater-drag-radius, 0px) var(--lyrics-theater-drag-radius, 0px) 0 0;
  }

  .player-expanded-panel.active {
    border-radius: var(--player-expanded-drag-radius, 0px) var(--player-expanded-drag-radius, 0px) 0 0;
  }
}

@media (max-width: 768px) {
  .modal.is-closing {
    background: rgba(6, 8, 12, 0) !important;
    -webkit-backdrop-filter: blur(0) saturate(100%) !important;
    backdrop-filter: blur(0) saturate(100%) !important;
    transition: background-color 0.32s ease, -webkit-backdrop-filter 0.32s ease, backdrop-filter 0.32s ease !important;
  }

  .custom-context-menu.closing,
  .custom-context-menu--share.closing {
    opacity: 1 !important;
    pointer-events: none !important;
    background: rgba(6, 8, 12, 0) !important;
    -webkit-backdrop-filter: blur(0) saturate(100%) !important;
    backdrop-filter: blur(0) saturate(100%) !important;
    transition: background-color 0.32s ease, -webkit-backdrop-filter 0.32s ease, backdrop-filter 0.32s ease !important;
  }

  .modal {
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 !important;
    background: rgba(6, 8, 12, 0.58) !important;
    -webkit-backdrop-filter: blur(20px) saturate(128%) !important;
    backdrop-filter: blur(20px) saturate(128%) !important;
  }

  .modal .modal-content {
    width: 100vw !important;
    max-width: none !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border: 1px solid var(--border) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--white) !important;
    box-shadow: 0 -24px 72px rgba(0, 0, 0, 0.32) !important;
    overflow: hidden !important;
    transform: translateY(100%) !important;
    opacity: 1 !important;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease !important;
    will-change: transform;
    touch-action: pan-y;
  }

  .modal.is-open .modal-content,
  .modal.show.is-open .modal-content {
    transform: translateY(0) !important;
  }

  .modal.is-closing .modal-content {
    transform: translateY(100%) !important;
    opacity: 0.72 !important;
  }

  .modal:not(.playlist-sheet-modal) .modal-content::before {
    content: '';
    display: block;
    width: 42px;
    height: 5px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: rgba(130, 145, 165, 0.52);
    flex: 0 0 auto;
  }

  .modal .modal-header {
    padding: 12px 16px 14px !important;
    border-bottom: 0 !important;
    background: transparent !important;
    gap: 12px !important;
  }

  .modal .modal-header h2 {
    max-width: none !important;
    margin: 0 !important;
    color: var(--black) !important;
    font-size: 21px !important;
    font-weight: 650 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.2px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .modal .modal-close {
    display: none !important;
  }

  .modal .modal-body {
    padding: 0 16px 16px !important;
    max-height: calc(92dvh - 136px) !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
  }

  .modal .modal-footer {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) !important;
    border-top: 0 !important;
    background: transparent !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }

  .modal .modal-footer .btn,
  .modal .modal-footer button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }
}

.messages-page {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 0 !important;
}

.messages-shell {
  min-height: 0 !important;
  height: auto !important;
}

.messages-thread {
  min-height: 0 !important;
}

.messages-thread-body {
  padding-bottom: 12px !important;
}

.messages-bottom-rail {
  width: 100% !important;
  position: relative !important;
  z-index: 20 !important;
  background: var(--messages-app-bg) !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 40px !important;
}

.messages-bottom-rail-inner {
  width: 100% !important;
  max-width: 1160px !important;
  height: 40px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
  align-items: center !important;
  overflow: hidden !important;
}

.messages-bottom-rail-inner > * {
  min-height: 0 !important;
  height: 40px !important;
}

.messages-bottom-rail-inner .messages-reply-preview,
.messages-bottom-rail-inner .messages-compose {
  grid-column: 2 !important;
}

@media (min-width: 1024px) {
  .messages-page {
    height: calc(100dvh - 152px - max(0px, calc(var(--desktop-player-height, 0px) - 45px))) !important;
    max-height: calc(100dvh - 152px - max(0px, calc(var(--desktop-player-height, 0px) - 45px))) !important;
  }

  .messages-bottom-rail {
    padding: 0 0 8px !important;
  }

  .messages-bottom-rail-inner .messages-reply-preview {
    position: static !important;
    margin: 0 14px !important;
    padding: 8px 2px !important;
    border-top: 1px solid var(--border-color) !important;
    background: transparent !important;
  }

  .messages-bottom-rail-inner .messages-compose {
    position: static !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border-top: 1px solid var(--border-color) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

@media (max-width: 980px) {
  .messages-bottom-rail {
    padding-bottom: calc(var(--mobile-player-height, 0px) + var(--mobile-bottom-nav-height, 76px) + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent !important;
  }

  .messages-page.is-mobile-messages .messages-thread-body {
    padding-bottom: 10px !important;
  }

  .messages-bottom-rail-inner {
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .messages-bottom-rail-inner .messages-reply-preview,
  .messages-bottom-rail-inner .messages-compose {
    grid-column: 1 !important;
  }

  .messages-page.is-mobile-messages .messages-reply-preview {
    position: static !important;
    margin: 0 10px !important;
    padding: 8px 4px !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  .messages-page.is-mobile-messages.is-mobile-thread-view .messages-compose {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

.profile-title-row .usernamee {
  font-weight: 750;
}

@media (max-width: 768px) {
  .mobile-top-blend-profile.profile-container {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    margin-top: -14px;
  }

  .mobile-top-blend-profile .profile-header {
    padding: 0;
    gap: 0;
    margin-bottom: 28px;
    position: relative;
    background: transparent;
    overflow: visible;
  }

  .mobile-top-blend-profile .profile-info,
  .profile-container.has-profile-banner.mobile-top-blend-profile .profile-info {
    display: block;
    margin-top: clamp(-220px, -46vw, -120px);
    padding: 0 16px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    z-index: 2;
    min-height: clamp(168px, 36vw, 196px);
  }

  .mobile-top-blend-profile .profile-cover {
    width: 100vw;
    height: min(100vw, 520px);
    margin: 0;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
    background-color: transparent !important;
    background-image: var(--profile-mobile-cover-image, linear-gradient(145deg, rgba(26, 92, 255, 0.24), rgba(12, 17, 30, 0.92))), linear-gradient(145deg, rgba(26, 92, 255, 0.24), rgba(12, 17, 30, 0.92)) !important;
    background-size: cover, 100% 100% !important;
    background-position: top center, center !important;
    background-repeat: no-repeat !important;
    position: relative;
  }

  .mobile-top-blend-profile .profile-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(6, 10, 20, 0) 36%, rgba(6, 10, 20, 0.26) 72%, var(--white) 100%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 72%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 34%, #000 72%, #000 100%);
    pointer-events: none;
  }

  .mobile-top-blend-profile .profile-avatar {
    display: none;
  }

  .mobile-top-blend-profile .profile-details {
    grid-column: auto;
    align-self: center;
    padding-top: 0;
  }

  .mobile-top-blend-profile .profile-title-row {
    margin-bottom: 0;
  }

  .mobile-top-blend-profile .profile-details h1 {
    font-size: clamp(24px, 5vw, 40px);
    line-height: 1.08;
    margin: 12px 0;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
  }

  .mobile-top-blend-profile .playlist-type,
  .mobile-top-blend-profile .profile-monthly-listeners {
    color: #f7faff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26), 0 2px 14px rgba(0, 0, 0, 0.62);
  }

  .mobile-top-blend-profile .profile-monthly-listeners {
    font-size: 15px;
    margin-bottom: 0 !important;
  }

  .mobile-top-blend-profile .profile-right-rail {
    grid-column: 1 / -1;
    margin-top: 14px;
  }

  .mobile-top-blend-profile .profile-actions.playlist-actions {
    gap: 8px;
    flex-wrap: nowrap;
  }

  .mobile-top-blend-profile .profile-actions .follow-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 10px;
  }

  .mobile-top-blend-profile .profile-content {
    padding: 0 16px;
  }
}

@media (max-width: 900px) {
  html:has(body.mobile-popup-scroll-locked),
  body.mobile-popup-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .playlist-sheet-modal {
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .playlist-sheet-modal .modal-content {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    max-height: min(88dvh, 760px) !important;
    margin: 0 auto !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.34) !important;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
    transform-origin: center bottom !important;
  }

  .playlist-sheet-grabber {
    width: 40px !important;
    height: 5px !important;
    margin-top: 9px !important;
    background: rgba(95, 105, 120, 0.42) !important;
  }
}

@media (max-width: 768px) {
  .modal {
    justify-content: center !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .modal .modal-content {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    max-height: min(88dvh, 760px) !important;
    margin: 0 auto !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.34) !important;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
    transform-origin: center bottom !important;
  }

  .modal:not(.playlist-sheet-modal) .modal-content::before {
    width: 40px !important;
    height: 5px !important;
    margin: 9px auto 3px !important;
    background: rgba(95, 105, 120, 0.42) !important;
  }

  .custom-context-menu,
  .custom-context-menu--share {
    justify-content: center !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .custom-context-menu-list,
  .custom-context-menu-list--share {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    max-height: min(88dvh, 760px) !important;
    margin: 0 auto !important;
    padding: 9px 12px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.34) !important;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease !important;
    transform-origin: center bottom !important;
  }

  .custom-context-menu-list::before,
  .custom-context-menu-list--share::before {
    width: 40px !important;
    height: 5px !important;
    margin: 0 auto 10px !important;
    background: rgba(95, 105, 120, 0.42) !important;
  }
}

:is(.mobile-top-blend-release, .mobile-top-blend-song) :is(
  .playlist-title,
  .playlist-title .release-title-link,
  .playlist-type,
  .playlist-description,
  .playlist-meta,
  .playlist-meta .meta-item,
  .playlist-meta .release-artist-link,
  .sd-title,
  .sd-artist-link,
  .sd-chip
) {
  color: rgb(var(--detail-readable-rgb, 255, 255, 255)) !important;
  text-shadow: 0 1px 3px rgba(var(--detail-readable-panel-rgb, 0, 0, 0), 0.62);
}

:is(.mobile-top-blend-release, .mobile-top-blend-song) :is(.sd-chip, .tag-chip-link) {
  border-color: rgba(var(--detail-readable-rgb, 255, 255, 255), 0.46) !important;
  background: rgba(var(--detail-readable-panel-rgb, 0, 0, 0), 0.68) !important;
  color: rgb(var(--detail-readable-rgb, 255, 255, 255)) !important;
  text-shadow: none;
}

@media (min-width: 1024px) {
  .profile-container.no-profile-banner .profile-cover {
    display: none !important;
  }

  .main-content:has(> .detail-liquid-background) .mobile-top-blend-profile :is(
    .profile-title-row .usernamee,
    .playlist-type,
    .profile-monthly-listeners,
    .profile-bio,
    .sv-verification-badge
  ) {
    color: rgb(var(--detail-readable-rgb, 255, 255, 255)) !important;
    text-shadow: 0 1px 3px rgba(var(--detail-readable-panel-rgb, 0, 0, 0), 0.62);
  }

  .main-content:has(> .detail-liquid-background) .mobile-top-blend-profile .profile-actions .follow-btn {
    border-color: rgba(var(--detail-readable-rgb, 255, 255, 255), 0.46);
    background: rgba(var(--detail-readable-panel-rgb, 0, 0, 0), 0.68);
    color: rgb(var(--detail-readable-rgb, 255, 255, 255));
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
  }

  .main-content:has(> .detail-liquid-background) {
    position: relative;
    overflow-x: clip;
  }

  .main-content:has(> .detail-liquid-background) > #mainContentContainer {
    position: relative;
    z-index: 1;
  }

  .detail-liquid-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 680px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: var(--white);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.72) 66%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.72) 66%, transparent 100%);
    transition: opacity 2.4s ease;
  }

  .detail-liquid-background.is-ready {
    opacity: 0.62;
  }

  .detail-liquid-canvas {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    filter: blur(44px) saturate(1.18) contrast(0.98);
    transform: translateZ(0) scale(1.06);
  }
}

.release-details-list {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: var(--white);
}

.release-details-list .sd-detail-row {
  padding: 11px 12px;
  border-bottom-color: color-mix(in srgb, var(--border) 72%, transparent);
}

@media (min-width: 1024px) {
  .detail-liquid-background::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(var(--detail-liquid-dim-rgb, 0, 0, 0), var(--detail-liquid-dim-opacity, 0.12));
  }

  .main-content:has(> .detail-liquid-background) :is(.playlist-actions .btn-primary, .sd-actions .sd-btn-play) {
    border-color: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.92);
    background: rgb(var(--detail-accent-rgb, 26, 92, 255));
    color: rgb(var(--detail-accent-contrast-rgb, 255, 255, 255));
    box-shadow: 0 10px 28px rgba(var(--detail-accent-rgb, 26, 92, 255), 0.24);
  }

  .main-content:has(> .detail-liquid-background) :is(.playlist-actions .btn-secondary, .playlist-actions .btn-danger, .sd-actions .sd-btn-ghost) {
    border-color: rgba(var(--detail-readable-rgb, 255, 255, 255), 0.46);
    background: rgba(var(--detail-readable-panel-rgb, 0, 0, 0), 0.68);
    color: rgb(var(--detail-readable-rgb, 255, 255, 255));
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
  }

  .main-content:has(> .detail-liquid-background) :is(.playlist-actions .btn, .sd-actions .sd-btn-play, .sd-actions .sd-btn-ghost):hover {
    border-color: rgb(var(--detail-accent-rgb, 26, 92, 255));
    background: color-mix(in srgb, rgb(var(--detail-accent-rgb, 26, 92, 255)) 86%, var(--white));
    color: rgb(var(--detail-accent-contrast-rgb, 255, 255, 255));
  }

  .main-content:has(> .detail-liquid-background) .detail-context-menu-trigger {
    border-color: rgba(var(--detail-readable-rgb, 255, 255, 255), 0.46);
    background: rgba(var(--detail-readable-panel-rgb, 0, 0, 0), 0.68);
    color: rgb(var(--detail-readable-rgb, 255, 255, 255));
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }

  .main-content:has(> .detail-liquid-background) :is(.detail-context-menu-trigger:hover, .track-btn:hover) {
    background: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.2);
    color: rgb(var(--detail-accent-rgb, 26, 92, 255));
  }

  .main-content:has(> .detail-liquid-background) :is(.track-btn, .sv-verification-badge) {
    color: rgb(var(--detail-accent-rgb, 26, 92, 255));
  }

  .main-content:has(> .detail-liquid-background) .tag-chip-link {
    border-color: rgba(var(--detail-readable-rgb, 255, 255, 255), 0.46);
    background: rgba(var(--detail-readable-panel-rgb, 0, 0, 0), 0.68);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
  }
}

#playlistTracksList,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist,
.release-details-list,
.song-detail-container .sd-detail-grid {
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

#playlistTracksList .tracks-header,
#playlistTracksList .track-row,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .tracks-header,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row,
.release-details-list .sd-detail-row,
.song-detail-container .sd-detail-grid .sd-detail-row {
  background: transparent;
}

#playlistTracksList .tracks-header,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .tracks-header {
  background: rgba(255, 255, 255, 0.2);
}

#playlistTracksList .track-row:hover,
.playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row:hover {
  background: rgba(255, 255, 255, 0.28);
}

#mainContent #playlistTracksList .track-row.sv-now-playing-track,
#mainContent .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .track-row.sv-now-playing-track {
  background: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.16) !important;
}

#mainContent #playlistTracksList .play-track-btn.is-now-playing,
#mainContent .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .play-track-btn.is-now-playing,
#mainContent .song-detail-container .sd-btn-play.is-now-playing {
  border-color: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.9) !important;
  background: rgb(var(--detail-accent-rgb, 26, 92, 255)) !important;
  color: rgb(var(--detail-accent-contrast-rgb, 255, 255, 255)) !important;
  box-shadow: 0 0 0 7px rgba(var(--detail-accent-rgb, 26, 92, 255), 0.2) !important;
}

#mainContent #playlistTracksList .play-track-btn.is-now-playing i,
#mainContent .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist .play-track-btn.is-now-playing i,
#mainContent .song-detail-container .sd-btn-play.is-now-playing i {
  color: inherit !important;
}

@media (max-width: 768px) {
  #playlistTracksList,
  .playlist-detail-container:not([data-playlist-id]):not(.profile-release-list-card) .playlist-content > .tracks-list.contracklist,
  .release-details-list,
  .song-detail-container .sd-detail-grid {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

#playlistRecommendationsList {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

#playlistRecommendationsList .tracks-header,
#playlistRecommendationsList .track-row {
  grid-template-columns: 44px minmax(220px, 1.4fr) minmax(140px, 0.8fr) 96px;
  gap: 16px;
  background: transparent;
}

#playlistRecommendationsList .tracks-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.2);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

#playlistRecommendationsList .track-row {
  min-height: 64px;
  padding: 8px 12px;
  border-bottom: 0 !important;
  transition: background-color 0.16s ease;
}

#playlistRecommendationsList .track-row:hover {
  background: rgba(255, 255, 255, 0.28);
}

#playlistRecommendationsList .track-name,
#playlistRecommendationsList .track-name a {
  color: var(--black);
  font-weight: 600;
}

#playlistRecommendationsList .track-meta-small {
  margin-top: 3px;
  color: var(--text-secondary);
}

#playlistRecommendationsList .track-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgb(var(--detail-accent-rgb, 26, 92, 255));
}

#playlistRecommendationsList .track-btn:hover {
  background: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.16);
  color: rgb(var(--detail-accent-rgb, 26, 92, 255));
}

#mainContent #playlistRecommendationsList .track-row.sv-now-playing-track {
  background: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.16) !important;
}

#mainContent #playlistRecommendationsList .play-track-btn.is-now-playing {
  border-color: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.9) !important;
  background: rgb(var(--detail-accent-rgb, 26, 92, 255)) !important;
  color: rgb(var(--detail-accent-contrast-rgb, 255, 255, 255)) !important;
  box-shadow: 0 0 0 7px rgba(var(--detail-accent-rgb, 26, 92, 255), 0.2) !important;
}

.playlist-recommendations-actions #playlistRecommendationsRefreshBtn {
  border-color: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.52);
  background: rgba(var(--detail-accent-rgb, 26, 92, 255), 0.12);
  color: rgb(var(--detail-accent-rgb, 26, 92, 255));
}

.playlist-recommendations-actions #playlistRecommendationsRefreshBtn:hover {
  border-color: rgb(var(--detail-accent-rgb, 26, 92, 255));
  background: rgb(var(--detail-accent-rgb, 26, 92, 255));
  color: rgb(var(--detail-accent-contrast-rgb, 255, 255, 255));
}

@media (max-width: 768px) {
  .playlist-recommendations {
    margin-top: 36px;
  }

  #playlistRecommendationsList {
    width: 100%;
    max-width: 100%;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #playlistRecommendationsList .tracks-header {
    display: none;
  }

  #playlistRecommendationsList .track-row {
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 8px;
    min-height: 60px;
    padding: 8px 2px;
  }

  #playlistRecommendationsList .track-number,
  #playlistRecommendationsList .track-artist {
    display: none;
  }

  #playlistRecommendationsList .track-thumbnail {
    width: 42px;
    height: 42px;
    border-radius: 4px;
  }

  #playlistRecommendationsList .track-info-small {
    min-width: 0;
  }

  #playlistRecommendationsList .track-name,
  #playlistRecommendationsList .track-meta-small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #playlistRecommendationsList .track-actions {
    gap: 4px;
  }

  #playlistRecommendationsList .track-btn {
    width: 34px;
    height: 34px;
  }

  .playlist-recommendations-actions #playlistRecommendationsRefreshBtn {
    min-height: 40px;
    border-radius: 999px;
    padding: 9px 16px;
  }
}

@media (max-width: 900px) {
  .add-to-playlist-modal .add-playlist-native-option {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    column-gap: 14px !important;
    padding: 8px 12px !important;
    overflow: hidden;
  }

  .add-to-playlist-modal .add-playlist-native-option > .add-playlist-cover {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    margin: 0 !important;
    display: flex !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .add-to-playlist-modal .add-playlist-native-option > .add-playlist-cover img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  .add-to-playlist-modal .add-playlist-native-option > .add-playlist-meta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 0;
  }

  .add-to-playlist-modal .add-playlist-native-option .add-playlist-name,
  .add-to-playlist-modal .add-playlist-native-option .add-playlist-meta small {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .add-to-playlist-modal .add-playlist-native-option > i:last-child {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 28px;
    margin: 0;
    text-align: center;
  }

  .custom-context-share-friends > .mobile-library-filter-option[data-share-action="send-friend"] {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    column-gap: 14px !important;
    padding: 8px 12px !important;
    overflow: hidden;
  }

  .custom-context-share-friends > .mobile-library-filter-option[data-share-action="send-friend"] > .custom-context-share-friend-avatar {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    margin: 0 !important;
    display: flex !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .custom-context-share-friends > .mobile-library-filter-option[data-share-action="send-friend"] > .custom-context-share-friend-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  .custom-context-share-friends > .mobile-library-filter-option[data-share-action="send-friend"] > .custom-context-share-friend-meta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 0;
  }

  .custom-context-share-friends > .mobile-library-filter-option[data-share-action="send-friend"] .custom-context-share-friend-meta strong,
  .custom-context-share-friends > .mobile-library-filter-option[data-share-action="send-friend"] .custom-context-share-friend-meta small {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .custom-context-share-friends > .mobile-library-filter-option[data-share-action="send-friend"] > i:last-child {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 28px;
    margin: 0;
    text-align: center;
  }
}

.settings-profile-media-row button[hidden] { display: none !important; }
#settingsPage .settings-profile-name-input,
#settingsPage .settings-profile-bio-input {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}
#settingsPage .settings-profile-name-input {
  font: 750 clamp(38px, 5vw, 64px)/0.98 "Syne", sans-serif;
}
#settingsPage .settings-profile-bio-input {
  font: 500 16px/1.45 "Syne", sans-serif;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1023px) {
  #settingsPage.settings-container { max-width: none; padding: 8px 14px 130px; }
  #settingsPage > .playlists-header,
  #settingsPage > .settings-tabs { display: none !important; }
  #settingsPage > .settings-mobile-index { display: block; }
  #settingsPage:not(.mobile-settings-section-open) > .settings-tab-content { display: none !important; }
  #settingsPage.mobile-settings-section-open > .settings-mobile-index { display: none !important; }
  #settingsPage.mobile-settings-section-open > .settings-tab-content.active { display: grid !important; }
  #settingsPage .settings-form > .form-group,
  #settingsPage .settings-profile-main,
  #settingsPage .settings-profile-social-card,
  #settingsPage .preferences-card,
  #settingsPage .danger-section {
    margin: 0;
    padding: 16px 2px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #settingsPage .settings-tab-content hr { display: none !important; }
  #settingsPage .preferences-row { padding: 15px 2px; border-bottom: 1px solid var(--border); }
  #settingsPage .settings-profile-name-input { margin: 11px 0 8px; font-size: clamp(30px, 9vw, 46px); }
  #settingsPage .settings-profile-bio-input { min-height: 44px; font-size: 14px; }
  #settingsPage :is(.form-group, .settings-social-field) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
  }
  #settingsPage :is(.preferences-note, .oauth-app-card, .connected-app-card) {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.search-lyrics-match {
  display: block;
  width: 100%;
  color: var(--text-secondary, #667085);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-remote-device-badge {
  display: none;
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary, #1a5cff);
  color: #fff;
  font-size: 7px;
  box-shadow: 0 0 0 2px var(--background, #fff);
}
.player-btn-small:has(.player-remote-device-badge) { position: relative; }
.player-remote-device-badge.is-visible { display: inline-flex; }
.player-device-list { display: grid; gap: 7px; }
.player-device-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.player-device-option.is-output { border-color: var(--primary, #1a5cff); background: rgba(26,92,255,.08); }
.player-device-option span { display: grid; flex: 1; }
.player-device-option small { opacity: .65; }
.player-device-option .fa-check { color: var(--primary, #1a5cff); }

.super-fan-liquid {
  --super-fan-color: #ff4f78;
  --super-fan-secondary: #35b8ff;
  --surface-color: var(--white, #fff);
  --text-color: var(--black, #15171c);
  --text-muted: var(--muted, #747b89);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 8% 5%, color-mix(in srgb, var(--super-fan-color) 34%, transparent), transparent 62%),
    radial-gradient(90% 90% at 100% 90%, color-mix(in srgb, var(--super-fan-secondary) 36%, transparent), transparent 68%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-color, #fff) 94%, var(--super-fan-color) 6%), var(--surface-color, #fff));
}

.super-fan-liquid-orb { position:absolute; z-index:-1; width:280px; height:280px; border-radius:45% 55% 62% 38%; background:var(--super-fan-color); opacity:.16; filter:blur(32px); animation:superFanLiquidDrift 9s cubic-bezier(.45,0,.2,1) infinite alternate; pointer-events:none; }
.super-fan-liquid-orb-one { top:-150px; right:-80px; }
.super-fan-liquid-orb-two { bottom:-180px; left:-90px; animation-delay:-4.5s; animation-direction:alternate-reverse; }
@keyframes superFanLiquidDrift { to { transform:translate3d(-32px,42px,0) rotate(28deg) scale(1.18); border-radius:62% 38% 42% 58%; } }

.super-fan-sheet { position:fixed; inset:0; z-index:10050; visibility:hidden; pointer-events:none; }
.super-fan-sheet.is-open,.super-fan-sheet.is-closing { visibility:visible; }
.super-fan-sheet.is-open { pointer-events:auto; }
.super-fan-sheet.is-closing { pointer-events:none; }
.super-fan-sheet-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(6,8,12,.58); opacity:0; -webkit-backdrop-filter:blur(0) saturate(100%); backdrop-filter:blur(0) saturate(100%); transition:opacity .42s cubic-bezier(.32,.72,0,1),-webkit-backdrop-filter .42s cubic-bezier(.32,.72,0,1),backdrop-filter .42s cubic-bezier(.32,.72,0,1); }
.super-fan-sheet.is-open .super-fan-sheet-backdrop { opacity:1; -webkit-backdrop-filter:blur(20px) saturate(128%); backdrop-filter:blur(20px) saturate(128%); }
.super-fan-sheet-panel { position:absolute; left:50%; bottom:0; width:min(100%,560px); max-height:min(88dvh,820px); padding:10px 22px max(24px,env(safe-area-inset-bottom)); border-radius:30px 30px 0 0; box-shadow:0 -18px 70px rgba(6,12,28,.28); transform:translate3d(-50%,105%,0) scale(.98); transition:transform .52s cubic-bezier(.32,.72,0,1); display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:contain; }
.super-fan-sheet.is-open .super-fan-sheet-panel { transform:translate3d(-50%,0,0) scale(1); }
.super-fan-sheet.is-dragging .super-fan-sheet-panel,.super-fan-sheet.is-dragging .super-fan-sheet-backdrop { transition:none; }
.super-fan-sheet-grabber { position:relative; z-index:4; display:flex; flex:0 0 32px; justify-content:center; width:100%; height:32px; padding-top:9px; cursor:grab; touch-action:none; }
.super-fan-sheet-grabber:active { cursor:grabbing; }
.super-fan-sheet-grabber span { display:block; width:40px; height:5px; border-radius:999px; background:rgba(95,105,120,.42); }
.super-fan-sheet-content { min-height:0; padding:10px 0 4px; color:var(--text-color); text-align:center; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none; }
.super-fan-sheet-content::-webkit-scrollbar { display:none; width:0; height:0; }
.super-fan-pair { display:flex; align-items:center; justify-content:center; min-height:100px; margin-bottom:8px; }
.super-fan-pair-avatar { width:82px; height:82px; display:grid; place-items:center; overflow:hidden; border:3px solid color-mix(in srgb,var(--surface-color,#fff) 88%,transparent); border-radius:50%; background:var(--surface-color,#fff); box-shadow:0 12px 34px rgba(8,15,32,.18); }
.super-fan-pair-avatar:first-child { transform:translateX(12px) rotate(-4deg); }
.super-fan-pair-avatar:last-child { transform:translateX(-12px) rotate(4deg); }
.super-fan-pair-avatar img { width:100%; height:100%; object-fit:cover; }
.super-fan-pair > i { z-index:2; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#fff; background:var(--super-fan-color); box-shadow:0 0 0 7px color-mix(in srgb,var(--surface-color,#fff) 88%,transparent),0 9px 30px color-mix(in srgb,var(--super-fan-color) 55%,transparent); animation:superFanHeartPulse 2.2s cubic-bezier(.32,.72,0,1) infinite; }
@keyframes superFanHeartPulse { 50% { transform:scale(1.09); box-shadow:0 0 0 10px color-mix(in srgb,var(--surface-color,#fff) 72%,transparent),0 12px 38px color-mix(in srgb,var(--super-fan-color) 65%,transparent); } }
.super-fan-eyebrow { margin:4px 0 5px; color:var(--super-fan-color); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.super-fan-sheet-content h2 { margin:0; font-size:clamp(28px,8vw,40px); letter-spacing:-.04em; }
.super-fan-sheet-lead { max-width:430px; margin:10px auto 22px; color:var(--text-muted); line-height:1.45; }
.super-fan-level-track { height:8px; margin:0 5px 8px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--text-color) 12%,transparent); }
.super-fan-level-track span { display:block; height:100%; border-radius:inherit; background:var(--super-fan-color); box-shadow:0 0 18px var(--super-fan-color); transition:width .8s cubic-bezier(.32,.72,0,1); }
.super-fan-level-meta { display:flex; justify-content:space-between; gap:8px; font-size:12px; }
.super-fan-level-meta span { color:var(--text-muted); }
.super-fan-pulse-note { display:inline-flex; gap:7px; align-items:center; margin:18px 0; padding:8px 12px; border-radius:999px; color:var(--super-fan-color); background:color-mix(in srgb,var(--super-fan-color) 11%,transparent); font-size:12px; font-weight:700; }
.super-fan-primary-action,.super-fan-secondary-action { width:100%; min-height:52px; border:0; border-radius:16px; font-size:15px; font-weight:800; transition:transform .28s cubic-bezier(.32,.72,0,1),filter .2s; }
.super-fan-primary-action { display:flex; align-items:center; justify-content:center; gap:9px; color:#fff; background:var(--super-fan-color); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.super-fan-share-action { margin:18px 0 10px; background:linear-gradient(115deg,var(--super-fan-color),var(--super-fan-secondary)); }
.super-fan-secondary-action { color:#e34b60; background:color-mix(in srgb,#e34b60 9%,transparent); }
.super-fan-primary-action:active,.super-fan-secondary-action:active { transform:scale(.975); filter:brightness(.96); }
.super-fan-locked-note { padding:14px; border-radius:16px; color:var(--text-muted); background:color-mix(in srgb,var(--text-color) 6%,transparent); }
.super-fan-sheet-top { margin-top:26px; text-align:left; }
.super-fan-sheet-top h3 { margin:0 0 8px; font-size:14px; }
.super-fan-mini-rank { display:grid; grid-template-columns:28px 36px 1fr auto; gap:9px; align-items:center; min-height:48px; border-bottom:1px solid color-mix(in srgb,var(--text-color) 8%,transparent); }
.super-fan-mini-rank > b,.super-fan-mini-rank > em { color:var(--super-fan-color); font-size:12px; font-style:normal; }
.super-fan-mini-rank > span { width:32px; height:32px; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:color-mix(in srgb,var(--text-color) 8%,transparent); }
.super-fan-mini-rank img { width:100%; height:100%; object-fit:cover; }
.super-fan-sheet-loading { min-height:330px; display:grid; place-content:center; gap:14px; color:var(--text-muted); }
.super-fan-sheet-loading i { color:var(--super-fan-color); font-size:42px; animation:superFanHeartPulse 1.7s infinite; }
.super-fan-roadmap,.super-fan-insights,.super-fan-preferences { margin-top:24px; padding:18px; border-radius:22px; background:color-mix(in srgb,var(--surface-color,#fff) 80%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text-color) 7%,transparent); text-align:left; }
.super-fan-roadmap h3,.super-fan-insights h3,.super-fan-preferences h3 { margin:0 0 12px; font-size:15px; }
.super-fan-roadmap > div { display:grid; gap:8px; }
.super-fan-roadmap article { display:grid; grid-template-columns:44px 1fr 20px; gap:11px; align-items:center; padding:10px; border-radius:14px; opacity:.58; background:color-mix(in srgb,var(--text-color) 4%,transparent); }
.super-fan-roadmap article.is-unlocked { opacity:1; }
.super-fan-roadmap article.is-active { background:color-mix(in srgb,var(--super-fan-color) 13%,transparent); }
.super-fan-roadmap article > b { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:var(--super-fan-color); background:color-mix(in srgb,var(--super-fan-color) 13%,transparent); font-size:12px; }
.super-fan-roadmap article span { min-width:0; display:grid; gap:2px; }
.super-fan-roadmap article small,.super-fan-preferences small,.super-fan-insights small { color:var(--text-muted); font-size:11px; line-height:1.35; }
.super-fan-roadmap article > i { color:var(--super-fan-color); text-align:center; }
.super-fan-insight-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.super-fan-insight-stats > span { display:grid; padding:13px; border-radius:14px; background:color-mix(in srgb,var(--super-fan-color) 10%,transparent); }
.super-fan-insight-stats b { color:var(--super-fan-color); font-size:23px; }
.super-fan-insights h4 { margin:12px 0 5px; font-size:12px; }
.super-fan-insights > p { display:flex; justify-content:space-between; gap:12px; margin:0; padding:8px 0; border-bottom:1px solid color-mix(in srgb,var(--text-color) 7%,transparent); font-size:12px; }
.super-fan-insights > p span { color:var(--text-muted); }
.super-fan-timeline { display:flex; gap:10px; align-items:center; margin-top:14px; padding:12px; border-radius:14px; color:var(--super-fan-color); background:color-mix(in srgb,var(--super-fan-color) 9%,transparent); }
.super-fan-timeline span { display:grid; }
.super-fan-preferences label { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:56px; border-top:1px solid color-mix(in srgb,var(--text-color) 7%,transparent); }
.super-fan-preferences label > span { display:grid; gap:2px; }
.super-fan-preferences select { max-width:135px; padding:8px 28px 8px 10px; border:1px solid color-mix(in srgb,var(--text-color) 12%,transparent); border-radius:10px; color:var(--text-color); background:var(--surface-color,#fff); }
.super-fan-preferences input[type=checkbox] { width:20px; height:20px; accent-color:var(--super-fan-color); }
body.super-fan-sheet-open { overflow:hidden; }

.super-fan-settings-shell,.super-fan-hub { padding:clamp(20px,4vw,38px); border-radius:26px; min-height:300px; }
.super-fan-settings-head,.super-fan-hub-head { position:relative; display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.super-fan-hub { gap:24px; }
.super-fan-hub-head { align-items:flex-start; justify-content:space-between; }
.super-fan-hub-identity { min-width:0; display:flex; align-items:center; gap:14px; }
.super-fan-hub-copy { min-width:0; display:grid; gap:4px; }
.super-fan-hub-copy p { margin:0; max-width:42rem; color:var(--text-muted); }
.super-fan-hub-kicker { color:var(--super-fan-color); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.super-fan-settings-head p { margin:0 0 2px; color:var(--text-muted); font-size:12px; }
.super-fan-settings-head h2,.super-fan-hub-head h2 { margin:0; }
.super-fan-settings-icon { flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--super-fan-color); box-shadow:0 10px 30px color-mix(in srgb,var(--super-fan-color) 35%,transparent); }
.super-fan-mobile-summary { display:none; }
.super-fan-summary-pill { min-width:0; display:flex; flex-direction:column; gap:2px; padding:13px 14px; border-radius:20px; background:color-mix(in srgb,var(--surface-color,#fff) 80%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--super-fan-color) 8%,transparent); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); }
.super-fan-summary-pill b { font-size:20px; line-height:1; letter-spacing:-.04em; }
.super-fan-summary-pill small { color:var(--text-muted); font-size:11px; font-weight:700; }
.super-fan-settings-list,.super-fan-leaderboard { position:relative; }
.super-fan-native-row { width:100%; min-height:72px; display:flex; align-items:center; gap:13px; padding:10px 4px; border:0; border-bottom:1px solid color-mix(in srgb,var(--text-color) 9%,transparent); color:var(--text-color); background:transparent; text-align:left; text-decoration:none; opacity:0; animation:superFanRowIn .48s cubic-bezier(.32,.72,0,1) forwards; animation-delay:var(--row-delay,0ms); }
.super-fan-native-row:last-child { border-bottom:0; }
@keyframes superFanRowIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.super-fan-native-row > span:not(.super-fan-row-avatar) { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.super-fan-native-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.super-fan-native-row small { color:var(--text-muted); }
.super-fan-native-row em { display:flex; align-items:center; gap:9px; color:var(--super-fan-color); font-size:12px; font-style:normal; font-weight:750; white-space:nowrap; }
.super-fan-row-avatar { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; overflow:hidden; border-radius:50%; color:var(--super-fan-color); background:color-mix(in srgb,var(--super-fan-color) 13%,var(--surface-color,#fff)); }
.super-fan-row-avatar img { width:100%; height:100%; object-fit:cover; }
.super-fan-native-row.is-loading span:first-child { width:48px; height:48px; border-radius:50%; background:color-mix(in srgb,var(--text-color) 9%,transparent); }
.super-fan-native-row.is-loading div { flex:1; }
.super-fan-native-row.is-loading i { display:block; width:55%; height:10px; margin:7px; border-radius:999px; background:color-mix(in srgb,var(--text-color) 9%,transparent); animation:artistHubDeferredShimmer 1.2s linear infinite; }
.super-fan-empty { padding:38px 12px; color:var(--text-muted); text-align:center; }
.super-fan-empty > i { color:var(--super-fan-color); font-size:34px; }
.super-fan-empty h3 { margin:10px 0 4px; color:var(--text-color); }
.super-fan-empty p { margin:0; }
.super-fan-hub-columns { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.super-fan-hub-columns h3 { margin:0; }
.super-fan-panel { min-width:0; padding:18px 18px 8px; border-radius:28px; background:color-mix(in srgb,var(--surface-color,#fff) 76%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text-color) 5%,transparent); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); }
.super-fan-legends { position:relative; margin-top:18px; background:linear-gradient(125deg,color-mix(in srgb,var(--super-fan-color) 14%,var(--surface-color,#fff)),color-mix(in srgb,#a7f3ff 10%,var(--surface-color,#fff))); }
.super-fan-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:8px; }
.super-fan-panel-head p { margin:6px 0 0; color:var(--text-muted); font-size:12px; line-height:1.4; }
.super-fan-panel-count { flex:0 0 auto; min-width:36px; padding:6px 10px; border-radius:999px; color:var(--super-fan-color); background:color-mix(in srgb,var(--super-fan-color) 12%,transparent); font-size:12px; font-weight:800; text-align:center; }
.super-fan-count { margin-left:auto; padding:8px 12px; border-radius:999px; color:var(--super-fan-color); background:color-mix(in srgb,var(--super-fan-color) 12%,transparent); font-size:12px; }
.super-fan-rank { flex:0 0 24px; color:var(--super-fan-color); text-align:center; }

.super-fan-comment-badge { position:relative; display:inline-flex; align-items:center; gap:3px; margin-left:4px; border:0; padding:1px 2px; color:var(--super-fan-color); background:none; cursor:pointer; vertical-align:middle; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--super-fan-color) 45%,transparent)); }
.super-fan-comment-badge small { padding:2px 4px; border-radius:999px; color:#fff; background:linear-gradient(110deg,var(--super-fan-color),var(--super-fan-secondary)); font-size:7px; letter-spacing:.06em; }
.super-fan-badge-double-outline { text-shadow:0 0 0 var(--super-fan-secondary),0 0 7px var(--super-fan-color); }
.super-fan-badge-gradient-orbit { color:var(--super-fan-secondary); filter:drop-shadow(0 0 8px var(--super-fan-color)); }
.super-fan-badge-animated-aura,.super-fan-badge-eternal { color:var(--super-fan-color); animation:superFanBadgeAura 2.2s ease-in-out infinite alternate; }
.super-fan-badge-century { animation:superFanBadgeAura 2.8s ease-in-out infinite alternate; }
.super-fan-badge-prestige > i { color:transparent; background:linear-gradient(105deg,var(--super-fan-color),var(--super-fan-secondary)); -webkit-background-clip:text; background-clip:text; }
.super-fan-badge-eternal > i { color:transparent; background:linear-gradient(100deg,#a7f3ff,#f0abfc,#fde68a); -webkit-background-clip:text; background-clip:text; }
.super-fan-frame-orbit { padding:3px; border:1px solid var(--super-fan-secondary); border-radius:50%; }
.super-fan-frame-crest { padding:3px 4px; border-radius:3px 3px 7px 7px; background:color-mix(in srgb,var(--super-fan-color) 11%,transparent); }
.super-fan-frame-halo { border-top:2px solid var(--super-fan-secondary); border-radius:50%; }
@keyframes superFanBadgeAura { to { filter:drop-shadow(0 0 11px var(--super-fan-secondary)); transform:translateY(-1px) scale(1.05); } }
.super-fan-profile-showcase { margin-bottom:26px; }
.super-fan-profile-showcase-card { display:flex; align-items:center; gap:15px; min-height:116px; padding:18px 20px; border-radius:24px; color:var(--text-color); text-decoration:none; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--super-fan-color) 18%,transparent),0 16px 40px rgba(10,16,30,.08); }
.super-fan-profile-showcase-avatar { flex:0 0 76px; width:76px; height:76px; display:grid; place-items:center; overflow:hidden; border:3px solid color-mix(in srgb,var(--super-fan-color) 45%,#fff); border-radius:50%; }
.super-fan-profile-showcase-avatar img { width:100%; height:100%; object-fit:cover; }
.super-fan-profile-showcase-card > span:nth-of-type(3) { min-width:0; display:grid; flex:1; gap:2px; }
.super-fan-profile-showcase-card small { color:var(--super-fan-color); font-size:9px; font-weight:850; letter-spacing:.1em; }
.super-fan-profile-showcase-card b { font-size:16px; }
.super-fan-profile-showcase-card em,.super-fan-profile-showcase-card span i { color:var(--text-muted); font-size:12px; font-style:normal; }
.super-fan-profile-showcase-card > strong { color:var(--super-fan-color); font-size:25px; }
.super-fan-level-up-toast { --surface-color:var(--white,#fff);--text-color:var(--black,#15171c);--text-muted:var(--muted,#747b89);position:fixed;z-index:10070;left:50%;top:max(18px,env(safe-area-inset-top));display:flex;align-items:center;gap:12px;min-width:min(300px,calc(100vw - 24px));padding:10px 14px 10px 10px;border:1px solid color-mix(in srgb,var(--border,#dfe3ea) 82%,var(--super-fan-color) 18%);border-radius:16px;color:var(--text-color);background:color-mix(in srgb,var(--surface-color,#fff) 94%,transparent);box-shadow:0 12px 34px rgba(8,14,28,.16);-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%);opacity:0;transform:translate3d(-50%,-18px,0) scale(.96);transition:opacity .32s ease,transform .48s cubic-bezier(.32,.72,0,1); }
.super-fan-level-up-toast.is-visible { opacity:1; transform:translate3d(-50%,0,0) scale(1); }
.super-fan-level-up-toast > i { display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;color:#fff;background:var(--super-fan-color);font-size:17px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.super-fan-level-up-toast span { display:flex;min-width:0;flex-direction:column;gap:2px; }
.super-fan-level-up-toast b { font-size:13px;line-height:1.2;letter-spacing:-.01em; }
.super-fan-level-up-toast small { color:var(--text-muted);font-size:11px;font-weight:650;line-height:1.2;letter-spacing:0; }

@media (max-width:900px) {
  .playlist-sheet-grabber,
  .site-popup-card::before,
  .custom-context-menu-list::before,
  .custom-context-menu-list--share::before,
  .modal:not(.playlist-sheet-modal) .modal-content::before,
  .lyrics-theater-mobile-grabber,
  .player-queue-mobile-grabber {
    transition: width .22s cubic-bezier(.32,.72,0,1), background-color .22s ease, opacity .22s ease !important;
  }
  .site-popup-card::before,
  .custom-context-menu-list::before,
  .custom-context-menu-list--share::before {
    position:sticky !important;
    z-index:4 !important;
    top:0 !important;
  }
  .modal.is-sheet-dragging .playlist-sheet-grabber,
  .site-popup-modal.is-sheet-dragging .site-popup-card::before,
  .custom-context-menu.is-sheet-dragging .custom-context-menu-list::before,
  .custom-context-menu.is-sheet-dragging .custom-context-menu-list--share::before,
  .modal.is-sheet-dragging:not(.playlist-sheet-modal) .modal-content::before,
  .lyrics-theater.is-sheet-dragging .lyrics-theater-mobile-grabber,
  .is-sheet-dragging .player-queue-mobile-grabber {
    width:52px !important;
    background-color:rgba(130,145,165,.76) !important;
  }
}

@media (max-width:900px) {
  .super-fan-sheet-panel { bottom:calc(12px + env(safe-area-inset-bottom)); width:min(calc(100% - 24px),560px); max-height:min(88dvh,760px); padding:10px 18px 18px; border:1px solid var(--border); border-radius:22px; }
}

@media (max-width:767px) {
  .super-fan-hub-columns { grid-template-columns:1fr; }
  .super-fan-settings-shell { margin:-4px -12px 0; border-radius:24px; padding:20px 16px; }
  .super-fan-hub { min-height:auto; margin:-8px -12px 0; padding:20px 16px calc(24px + env(safe-area-inset-bottom)); border-radius:30px 30px 0 0; }
  .super-fan-liquid-orb { width:220px; height:220px; filter:blur(26px); }
  .super-fan-liquid-orb-one { top:-120px; right:-90px; }
  .super-fan-liquid-orb-two { bottom:-160px; left:-110px; }
  .super-fan-hub-head { gap:12px; margin-bottom:0; flex-direction:column; }
  .super-fan-hub-identity { align-items:flex-start; }
  .super-fan-settings-icon { width:52px; height:52px; }
  .super-fan-hub-copy { gap:6px; }
  .super-fan-count { margin-left:0; }
  .super-fan-mobile-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .super-fan-summary-pill { padding:12px; border-radius:18px; }
  .super-fan-summary-pill b { font-size:18px; }
  .super-fan-hub-columns { gap:14px; }
  .super-fan-panel { padding:14px 14px 6px; border-radius:22px; background:color-mix(in srgb,var(--surface-color,#fff) 84%,transparent); }
  .super-fan-panel-head { margin-bottom:4px; }
  .super-fan-native-row { display:grid; grid-template-columns:auto 44px minmax(0,1fr) auto; gap:12px; min-height:68px; padding:14px 2px; }
  .super-fan-row-avatar { width:44px; height:44px; flex-basis:44px; }
  .super-fan-rank { flex-basis:auto; min-width:18px; text-align:left; }
  .super-fan-native-row em { align-self:start; margin-top:2px; padding:7px 10px; border-radius:999px; background:color-mix(in srgb,var(--super-fan-color) 10%,transparent); font-size:11px; }
  .super-fan-empty { padding:28px 10px; }
}

@media (max-width:480px) {
  .super-fan-mobile-summary { grid-template-columns:1fr; }
  .super-fan-summary-pill { flex-direction:row; align-items:flex-end; justify-content:space-between; }
  .super-fan-native-row { grid-template-columns:auto 42px minmax(0,1fr); }
  .super-fan-native-row em { grid-column:2 / 4; justify-self:start; margin-top:-2px; }
}

@media (prefers-reduced-motion:reduce) {
  .super-fan-liquid-orb,.super-fan-pair > i,.super-fan-sheet-loading i,.super-fan-comment-badge { animation:none!important; }
  .super-fan-sheet-panel,.super-fan-sheet-backdrop,.super-fan-native-row,.super-fan-level-track span { transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

.artist-hub-mobile-index { display:none; }

.artist-release-editor {
  width:min(1040px,calc(100vw - 40px));
  max-width:1040px !important;
  max-height:min(92dvh,900px);
  overflow:hidden;
}
.artist-editor-title-wrap { min-width:0; display:grid; gap:3px; }
.artist-editor-eyebrow { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.artist-editor-title-wrap h2 { margin:0; }
.artist-editor-title-wrap p { margin:0 !important; color:var(--text-secondary); font-size:12px; }
.artist-release-editor .modal-body { padding:20px 22px; background:color-mix(in srgb,var(--white) 96%,var(--blue) 4%); }
.edit-release-editor-section { padding:20px; border:1px solid var(--border); border-radius:18px; background:var(--white); }
.edit-release-editor-section + .edit-release-editor-section { margin-top:16px; }
.artist-editor-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.artist-editor-section-head h3,.artist-editor-subsection-head h4 { margin:0; font-size:17px; }
.artist-editor-section-head p,.artist-editor-subsection-head p { margin:4px 0 0 !important; color:var(--text-secondary); font-size:12px; }
.artist-editor-section-head > i { color:var(--blue); font-size:18px; }
.edit-release-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 18px; }
.edit-release-field-grid .form-group { min-width:0; margin:0; }
.edit-release-field-wide { grid-column:1 / -1; }
.artist-editor-toggle-row { padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.edit-release-tracklist-head { align-items:center; }
.edit-release-tracklist-head .btn { flex:0 0 auto; }
#editReleaseTracksList { overflow:visible; border-radius:14px; }
#editReleaseTracksList .release-track-row { background:transparent; }
#editReleaseTracksList .release-track-row.is-editing-track { background:color-mix(in srgb,var(--blue) 4%,var(--white)); }
#editReleaseTracksList .track-edit-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; padding:18px 2px 2px; }
#editReleaseTracksList .track-edit-panel > .form-group { min-width:0; margin:0; }
#editReleaseTracksList .track-edit-panel > :is(.release-track-editor-head,.release-track-save-btn),
#editReleaseTracksList .track-edit-panel > .form-group:has(textarea),
#editReleaseTracksList .track-edit-panel > .form-group:has(.release-track-loop-input),
#editReleaseTracksList .track-edit-panel > .form-group:has(.release-track-credits) { grid-column:1 / -1; }
.release-track-editor-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.release-track-editor-head > span { color:var(--text-secondary); font-size:12px; }
.release-track-editor-back-btn { display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:transparent; color:var(--blue); font:700 13px/1.2 "Syne",sans-serif; cursor:pointer; }
#editReleaseTracksList .release-track-save-btn { justify-self:end; min-width:150px; }
.edit-release-add-track { margin-top:16px; padding-top:18px; border-top:1px solid var(--border); }
.artist-editor-subsection-head { margin-bottom:14px; }
.edit-release-add-track > .form-group { margin-bottom:14px; }
.edit-release-add-track .tag-widget-chips:empty { display:none; }
.edit-release-add-track .tag-widget { gap:6px; }
.artist-editor-audio-picker { display:grid; gap:7px; }
.artist-editor-audio-picker > label {
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 13px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:color-mix(in srgb,var(--blue) 3%,var(--white));
  cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.artist-editor-audio-picker > label:hover {
  border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 8%,var(--white));
  transform:translateY(-1px);
}
.artist-editor-audio-picker > label > i { flex:0 0 28px; color:var(--blue); font-size:18px; text-align:center; }
.artist-editor-audio-picker > label > span { min-width:0; display:grid; gap:2px; }
.artist-editor-audio-picker > label strong { color:var(--black); font-size:13px; }
.artist-editor-audio-picker > label small,.artist-editor-audio-picker > output { color:var(--text-secondary); font-size:11px; }
.artist-editor-audio-picker > output {
  overflow:hidden;
  padding-inline:2px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:1023px) {
  body:has(:is(#artistHubReleasesPage,.artist-hub-container[data-mobile-nav-parent])) .mobile-top-nav-action { display:none !important; }
  :is(#artistHubReleasesPage,.artist-hub-container[data-mobile-nav-parent]) { max-width:none; padding:8px 14px calc(126px + env(safe-area-inset-bottom)); }
  :is(#artistHubReleasesPage,.artist-hub-container[data-mobile-nav-parent]) > .playlists-header { display:none; }

  #artistHubReleasesPage > :is(.hub-tabs,.artist-hub-discord-banner) { display:none !important; }
  .artist-hub-mobile-index { display:block; }
  .artist-hub-mobile-profile { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:13px; padding:16px 4px 22px; }
  .artist-hub-mobile-avatar,.artist-hub-mobile-avatar img { width:58px; height:58px; border-radius:50%; }
  .artist-hub-mobile-avatar { display:grid; place-items:center; overflow:hidden; background:var(--hover-bg); color:var(--muted); font-size:20px; }
  .artist-hub-mobile-avatar img { object-fit:cover; }
  .artist-hub-mobile-profile > span:last-child { display:grid; gap:3px; min-width:0; }
  .artist-hub-mobile-profile small { color:var(--text-secondary); font-size:12px; }
  .artist-hub-mobile-profile strong { overflow:hidden; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
  .artist-hub-mobile-index-row { width:100%; min-height:56px; display:grid; grid-template-columns:28px minmax(0,1fr) 18px; align-items:center; gap:10px; padding:0 6px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; color:var(--black); font:700 15px/1.2 "Syne",sans-serif; text-align:left; text-decoration:none; }
  .artist-hub-mobile-index-row:active { background:var(--hover-bg); }
  .artist-hub-mobile-index-icon { width:28px; height:auto; display:grid; place-items:center; border-radius:0; color:var(--muted); background:transparent; font-size:16px; text-align:center; }
  .artist-hub-mobile-index-copy { min-width:0; display:block; }
  .artist-hub-mobile-index-copy strong { font:inherit; }
  .artist-hub-mobile-index-copy small { display:none; }
  .artist-hub-mobile-index-row > i:last-child { color:var(--muted); font-size:11px; text-align:center; }
  .artist-hub-mobile-index-row[data-artist-hub-mobile-section="super-fans"] .artist-hub-mobile-index-icon { color:#ff4f78; }
  .artist-hub-mobile-community-row .artist-hub-mobile-index-icon { color:#5865f2; background:transparent; }

  #artistHubReleasesPage:not(.mobile-artist-hub-section-open) > .hub-tab-panel { display:none !important; }
  #artistHubReleasesPage.mobile-artist-hub-section-open > .artist-hub-mobile-index { display:none; }
  #artistHubReleasesPage.mobile-artist-hub-section-open > .hub-tab-panel.is-active { display:block !important; }
  #artistHubReleasesPage .hub-content { gap:16px; }
  #artistHubReleasesPage .hub-section-intro { padding:8px 2px 4px; }
  #artistHubReleasesPage .hub-section-intro h2 { font-size:24px; }
  #artistHubReleasesPage .hub-section-intro p { font-size:13px; }

  #artistHubReleasesPage .tracks-list { width:auto; margin-inline:-14px; border:0; border-radius:0; background:transparent; gap:0; overflow:visible; }
  #artistHubReleasesPage .tracks-list .track-item { margin:0; padding:13px 14px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; }
  #artistHubReleasesPage .artist-hub-release-item::before { display:none; }
  #artistHubReleasesPage .artist-hub-release-item:hover { transform:none; }
  #artistHubReleasesPage .artist-hub-release-tracks { border-top:1px solid var(--border); }
  #artistHubReleasesPage .artist-hub-release-track-row { border-radius:0; background:transparent; }
  #artistHubReleasesPage :is(.hub-tab-search,.artist-analytics-range-form select) { min-height:44px; border:0; border-radius:12px; background:var(--hover-bg); box-shadow:none; }
  #artistHubReleasesPage .content-header .btn { min-height:44px; }

  #artistHubReleasesPage .artist-stats-grid { margin-inline:-14px; gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  #artistHubReleasesPage .artist-stat-card { min-height:104px; padding:16px 14px; border:0; border-right:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; }
  #artistHubReleasesPage .artist-stat-card:nth-child(2n) { border-right:0; }
  #artistHubReleasesPage :is(.artist-analytics-chart-card,.artist-analytics-map-card) { margin-inline:-14px; padding:16px 14px; border-right:0; border-left:0; border-radius:0; box-shadow:none; }
  #artistHubReleasesPage .artist-audience-demographics { grid-template-columns:1fr; gap:0; margin-inline:-14px; }
  #artistHubReleasesPage .artist-audience-block { padding:17px 14px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
  #artistHubReleasesPage .artist-audience-list li { padding:10px 0; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
  #artistHubReleasesPage .artist-audience-list li:last-child { border-bottom:0; }

  #artistHubReleasesPage .artist-hub-faq-list { gap:0; margin-inline:-14px; }
  #artistHubReleasesPage .artist-hub-faq-item,#artistHubReleasesPage .artist-hub-faq-item[open] { border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; }
  #artistHubReleasesPage .artist-hub-faq-item summary { padding:16px 14px; font-size:14px; }
  #artistHubReleasesPage .artist-hub-faq-item p { padding:0 14px 16px; }
  #artistHubReleasesPage .cherry-support-launch { margin-inline:-14px; border-right:0; border-left:0; border-radius:0; box-shadow:none; }
  #artistHubReleasesPage .settings-section { padding:17px 2px; border-bottom:1px solid var(--border); }
  #artistHubReleasesPage .artist-setting-toggle-row { width:100%; justify-content:space-between; }

  #artistHubReleasesPage .super-fan-hub { margin:-8px -14px 0; padding:18px 14px calc(24px + env(safe-area-inset-bottom)); border-radius:0; }
  #artistHubReleasesPage .super-fan-mobile-summary { gap:0; border-top:1px solid color-mix(in srgb,var(--text-color) 9%,transparent); border-bottom:1px solid color-mix(in srgb,var(--text-color) 9%,transparent); }
  #artistHubReleasesPage .super-fan-summary-pill { padding:14px 10px; border-radius:0; background:transparent; box-shadow:none; }
  #artistHubReleasesPage .super-fan-panel { padding:14px 0 0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }

  .artist-hub-container[data-mobile-nav-parent] { padding-top:8px; }
  .artist-hub-container[data-mobile-nav-parent] .audience-detail-topbar > .btn-secondary:first-child { display:none; }
  .artist-hub-container[data-mobile-nav-parent] .audience-detail-topbar:empty { display:none; }
  .audience-detail-page .audience-entity-hero { margin-inline:-14px; padding:14px; border-right:0; border-left:0; border-radius:0; box-shadow:none; }
  .audience-detail-page .artist-stats-grid,#bumpCampaignStatsPage .artist-stats-grid { margin-inline:-14px !important; gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .audience-detail-page .artist-stat-card,#bumpCampaignStatsPage .artist-stat-card { padding:16px 14px; border:0; border-right:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; transform:none; }
  .audience-detail-page .artist-stat-card:nth-child(2n),#bumpCampaignStatsPage .artist-stat-card:nth-child(2n) { border-right:0; }
  .audience-detail-page :is(.artist-analytics-chart-card,.promo-card-section,.artist-audience-entities) { margin-inline:-14px; padding:16px 14px; border-right:0; border-left:0; border-radius:0; box-shadow:none; }
  .audience-detail-page .artist-audience-demographics,#bumpCampaignStatsPage .artist-audience-demographics { grid-template-columns:1fr; gap:0; margin-inline:-14px; }
  .audience-detail-page .artist-audience-block,#bumpCampaignStatsPage .artist-audience-block { padding:16px 14px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
  #promotionCampaignSelectPage .settings-section,#requestVerificationPage .settings-section { padding:17px 2px; border-radius:0; background:transparent; box-shadow:none; }
  #promotionCampaignSelectPage .promotion-select-list { margin-inline:-14px; }
  #promotionCampaignSelectPage .promotion-select-row,#bumpCampaignStatsPage .tracks-list .track-item { margin:0; padding:14px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; }
  #bumpCampaignStatsPage .tracks-list { margin-inline:-14px; border:0; border-radius:0; }
  #promotionCampaignSelectPage .upload-actions { position:sticky; z-index:5; bottom:calc(var(--mobile-bottom-nav-height,64px) + var(--mobile-player-height,0px) + 8px); padding:10px 0; background:var(--white); }
  #promotionCampaignSelectPage .upload-actions .btn { width:100%; }
  #requestVerificationPage > div[style*="grid-template-columns"] { grid-template-columns:1fr !important; gap:0 !important; }

  .artist-editor-modal .artist-release-editor { max-height:94dvh !important; border-radius:24px 24px 0 0 !important; }
  .artist-editor-modal .modal-header { padding:10px 16px 12px !important; }
  .artist-editor-title-wrap p { display:none; }
  .artist-editor-modal .modal-body { max-height:calc(94dvh - 128px) !important; padding:0 16px 18px !important; background:var(--white); }
  .edit-release-editor-section { margin:0; padding:16px 0; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
  .edit-release-editor-section + .edit-release-editor-section { margin-top:0; }
  .artist-editor-section-head { margin-bottom:13px; }
  .artist-editor-section-head > i { display:none; }
  .edit-release-field-grid { grid-template-columns:1fr; gap:0; }
  .edit-release-field-wide { grid-column:auto; }
  .edit-release-field-grid .form-group,#editReleaseTracksList .track-edit-panel > .form-group { padding:13px 0; border-bottom:1px solid var(--border); }
  .edit-release-field-grid .form-group :is(input:not([type="checkbox"]),textarea,select),#editReleaseTracksList .track-edit-panel .form-group :is(input:not([type="checkbox"]),textarea,select) { border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; padding-right:0; padding-left:0; }
  .artist-editor-toggle-row { border-top:0; }
  .edit-release-tracklist-head { align-items:flex-start; }
  .edit-release-tracklist-head .btn { min-width:42px; min-height:42px; }
  #editReleaseTracksList { margin-inline:-16px; border:0; border-radius:0; }
  #editReleaseTracksList .release-track-row { grid-template-columns:minmax(0,1fr) auto; padding:14px 16px; border-bottom:1px solid var(--border); }
  #editReleaseTracksList .release-track-row .track-item-actions { justify-content:flex-end; }
  #editReleaseTracksList .release-track-row .track-item-actions .btn { min-height:38px; }
  #editReleaseTracksList .track-edit-panel { grid-template-columns:1fr; gap:0; padding:0; border:0; }
  #editReleaseTracksList .track-edit-panel > * { grid-column:auto; }
  .release-track-editor-head { position:sticky; z-index:3; top:0; padding:12px 0; background:var(--white); }
  .release-track-editor-head > span { display:none; }
  #editReleaseTracksList .release-track-save-btn { position:sticky; z-index:4; bottom:8px; width:100%; min-height:48px; margin-top:14px; justify-self:stretch; }
  .artist-editor-modal.is-editing-track .edit-release-details-section,
  .artist-editor-modal.is-editing-track .edit-release-tracklist-head,
  .artist-editor-modal.is-editing-track .edit-release-add-track,
  .artist-editor-modal.is-editing-track #editReleaseTracksList > .release-track-row:not(.is-editing-track),
  .artist-editor-modal.is-editing-track .modal-footer { display:none !important; }
  .artist-editor-modal.is-editing-track .edit-release-tracks-section { padding-top:0; border-bottom:0; }
  .artist-editor-modal.is-editing-track #editReleaseTracksList .release-track-row.is-editing-track { display:block; padding:0 16px 16px; border:0; background:transparent; }
  .artist-editor-modal.is-editing-track #editReleaseTracksList .release-track-row.is-editing-track > :is(.track-item-info,.track-item-actions) { display:none; }
  .artist-editor-modal.is-editing-track .modal-body { max-height:calc(94dvh - 82px) !important; }
  .artist-editor-modal .modal-footer { position:sticky; bottom:0; gap:10px; }
  .artist-editor-modal .modal-footer .btn { flex:1; min-height:46px; }
}

@media (max-width:480px) {
  .artist-hub-mobile-index-copy small { white-space:normal; }
  .audience-detail-page .audience-entity-hero { grid-template-columns:88px minmax(0,1fr); }
  .audience-detail-page .audience-entity-cover { width:88px; height:88px; }
  #artistHubReleasesPage .super-fan-mobile-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #artistHubReleasesPage .super-fan-summary-pill { display:grid; align-content:center; justify-content:start; }
}

@media (max-width:1023px) {
  body:has(#releaseUploadPage) .mobile-top-nav-action { display:none !important; }
  #releaseUploadPage {
    --upload-native-action-bg:color-mix(in srgb,var(--white) 94%,transparent);
    max-width:none;
    padding:8px 14px calc(132px + env(safe-area-inset-bottom));
  }
  #releaseUploadPage .upload-stepper {
    position:sticky;
    z-index:20;
    top:calc(var(--mobile-top-nav-height,62px) + env(safe-area-inset-top));
    height:54px;
    margin:0 -14px 14px;
    padding:0 18px;
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:var(--upload-native-action-bg);
    box-shadow:none;
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
  }
  #releaseUploadPage .upload-step-item { flex:0 0 auto; gap:7px; }
  #releaseUploadPage .upload-step-num { width:25px; height:25px; font-size:11px; }
  #releaseUploadPage .upload-step-label { display:block; font-size:0; }
  #releaseUploadPage .upload-step-label::after { content:attr(data-mobile-label); font-size:11px; font-weight:700; }
  #releaseUploadPage .upload-step-connector { min-width:12px; margin:0 8px; }
  #releaseUploadPage .upload-status { margin:0 0 10px; padding:0 2px; font-size:12px; }

  #releaseUploadPage .upload-section {
    margin:0 -14px 16px;
    padding:10px 14px 20px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  #releaseUploadPage .upload-section-hd { align-items:flex-start; margin-bottom:18px; padding:4px 2px 0; }
  #releaseUploadPage .upload-section-title { font-size:24px; }
  #releaseUploadPage .upload-section-sub { font-size:13px; line-height:1.4; }
  #releaseUploadPage .upload-draft-layout { grid-template-columns:1fr; gap:18px; }
  #releaseUploadPage .upload-cover-col { position:static; }
  #releaseUploadPage .upload-cover-zone { width:min(68vw,260px); max-width:none; margin:0 auto; border-radius:20px; background:color-mix(in srgb,var(--blue) 4%,var(--white)); }
  #releaseUploadPage .upload-cover-img { border-radius:18px; }

  #releaseUploadPage .upload-fields-col { margin-inline:-14px; }
  #releaseUploadPage .upload-form-grid { grid-template-columns:1fr; gap:0; }
  #releaseUploadPage .upload-span-2 { grid-column:auto; }
  #releaseUploadPage .upload-form-grid > .form-group,
  #releaseUploadPage .upload-meta-row > .form-group,
  #releaseUploadPage .track-edit-panel > .form-group {
    min-width:0;
    margin:0;
    padding:14px;
    border-bottom:1px solid var(--border);
  }
  #releaseUploadPage .form-group > label,
  #releaseUploadPage .form-group > .sv-label-with-tooltip { margin-bottom:6px !important; }
  #releaseUploadPage .form-group :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
    width:100%;
    min-height:44px;
    padding-right:0;
    padding-left:0;
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:transparent;
    color:var(--black);
    box-shadow:none;
  }
  #releaseUploadPage .form-group textarea { min-height:84px; padding-top:10px; }
  #releaseUploadPage .upload-section-divider { display:none; }
  #releaseUploadPage .upload-meta-row { display:grid; gap:0; margin-inline:-14px; }
  #releaseUploadPage .upload-meta-tags,#releaseUploadPage .upload-meta-visibility { width:100%; min-width:0; }
  #releaseUploadPage .upload-visibility-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:3px; border-radius:12px; background:var(--hover-bg); }
  #releaseUploadPage .upload-vis-opt { min-width:0; }
  #releaseUploadPage .upload-vis-opt span { width:100%; min-height:38px; justify-content:center; padding:7px 6px; border:0; border-radius:9px; background:transparent; font-size:12px; }
  #releaseUploadPage .upload-vis-opt input[type="radio"]:checked + span { border:0; background:var(--white); box-shadow:0 1px 5px color-mix(in srgb,var(--black) 12%,transparent); }

  #releaseUploadPage .upload-policy-rows { gap:0; margin-inline:-14px; }
  #releaseUploadPage .upload-policy-row { padding:14px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
  #releaseUploadPage .upload-checkbox-label { align-items:flex-start; gap:11px; font-size:13px; line-height:1.42; }
  #releaseUploadPage .upload-checkbox-label input { flex:0 0 auto; margin-top:2px; }

  #releaseUploadPage .upload-actions {
    position:sticky;
    z-index:12;
    bottom:calc(var(--mobile-bottom-nav-height,76px) + var(--mobile-player-height,0px) + 8px);
    margin:18px -14px -20px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border);
    background:var(--upload-native-action-bg);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
  }
  #releaseUploadPage .upload-actions .btn { min-height:48px; }
  #releaseUploadPage .upload-actions:not(.upload-actions-publish) .btn { width:100%; }
  #releaseUploadPage .upload-cta-btn { min-width:0; }

  #releaseUploadPage .upload-tracks-hd { align-items:flex-start; }
  #releaseUploadPage .upload-tracks-hd .btn { min-width:42px; min-height:42px; }
  #releaseUploadPage .upload-add-track-bar { margin:0 -14px; padding:0 14px 14px; border-bottom:1px solid var(--border); }
  #releaseUploadPage .upload-add-track-toggle { width:100%; min-height:46px; justify-content:center; }
  #releaseUploadPage .upload-track-form-card { margin:0 -14px 16px; padding:16px 14px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
  #releaseUploadPage .upload-audio-dropzone { border-radius:16px; background:color-mix(in srgb,var(--blue) 4%,var(--white)); }
  #releaseUploadPage .upload-audio-dz-inner { min-height:146px; padding:24px 16px; }
  #releaseUploadPage .upload-track-meta-grid { margin:14px -14px 0; }
  #releaseUploadPage .upload-track-meta-grid .upload-policy-rows { margin-inline:0; }
  #releaseUploadPage .upload-track-meta-grid .upload-policy-row { padding-inline:0; }
  #releaseUploadPage .upload-actions-track { position:static; margin:14px 0 0; padding:0; border:0; background:transparent; backdrop-filter:none; }

  #releaseUploadPage .upload-tracks-list { display:flex; flex-direction:column; gap:0; margin:0 -14px 8px; border:0; border-radius:0; overflow:visible; }
  #releaseUploadPage #releaseTracksList .track-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin:0; padding:14px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; }
  #releaseUploadPage #releaseTracksList .track-item-actions { justify-content:flex-end; }
  #releaseUploadPage #releaseTracksList .track-item-actions .btn { width:38px; height:38px; padding:0; }
  #releaseUploadPage #releaseTracksList .track-edit-panel { display:grid; grid-column:1 / -1; grid-template-columns:1fr; gap:0; margin-top:10px !important; padding-top:4px; border-top:1px solid var(--border); }
  #releaseUploadPage #releaseTracksList .track-edit-panel > .form-group { padding-inline:0; }
  #releaseUploadPage #releaseTracksList .save-track-info-btn { width:100%; min-height:46px; margin-top:14px; }
  #releaseUploadPage .upload-actions-publish { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }

  #releaseUploadPage .upload-published-hero { padding:32px 8px 22px; }
  #releaseUploadPage .upload-published-recs { gap:0; margin-inline:-14px; }
  #releaseUploadPage .upload-rec-card,#releaseUploadPage .upload-rec-card--highlight { padding:15px 14px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; }
  #releaseUploadPage .upload-rec-card:hover { transform:none; box-shadow:none; }
  #releaseUploadPage .upload-published-actions { padding:16px 0 8px; }
  #releaseUploadPage .upload-published-actions .btn { width:100%; min-height:48px; }
}

@media (max-width:370px) {
  #releaseUploadPage .upload-stepper { padding-inline:12px; }
  #releaseUploadPage .upload-step-label::after { font-size:10px; }
  #releaseUploadPage .upload-step-connector { margin-inline:5px; }
  #releaseUploadPage .upload-actions-publish { grid-template-columns:1fr; }
}

.player-mobile-sheet-backdrop { display:none; }

@media (max-width:768px) {
  .player-mobile-sheet-backdrop {
    position:fixed;
    inset:0;
    z-index:2999 !important;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(6,8,12,0);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    -webkit-backdrop-filter:blur(0) saturate(100%);
    backdrop-filter:blur(0) saturate(100%);
    transition:opacity .32s ease,background-color .42s cubic-bezier(.22,1,.36,1),-webkit-backdrop-filter .42s cubic-bezier(.22,1,.36,1),backdrop-filter .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s;
  }
  .player-mobile-sheet-backdrop.is-open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    background:rgba(6,8,12,.58);
    -webkit-backdrop-filter:blur(20px) saturate(128%);
    backdrop-filter:blur(20px) saturate(128%);
    transition-delay:0s;
  }
  :is(#playerExpandedCommentsPanel.player-comments-panel,#playerPartyPanel.player-party-panel) {
    left:12px;
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    width:auto;
    max-height:min(88dvh,760px);
    border:1px solid var(--border);
    border-radius:22px;
    background:var(--white);
    box-shadow:0 20px 64px rgba(0,0,0,.34);
    transform:translateY(calc(100% + 28px));
    z-index:3000 !important;
  }
  :is(#playerExpandedCommentsPanel.player-comments-panel,#playerPartyPanel.player-party-panel).open { transform:translateY(0); }
  :is(#playerExpandedCommentsPanel,#playerPartyPanel) .player-queue-panel-header {
    position:relative;
    padding:26px 14px 12px;
    border:0;
    border-radius:22px 22px 0 0;
    background:var(--white);
  }
  :is(#playerExpandedCommentsPanel,#playerPartyPanel) .player-queue-panel-header::before {
    content:'';
    position:absolute;
    top:9px;
    left:50%;
    width:40px;
    height:5px;
    border-radius:999px;
    background:rgba(95,105,120,.42);
    transform:translateX(-50%);
  }
  :is(#playerExpandedCommentsPanel,#playerPartyPanel) .player-queue-panel-header h3 { font-size:21px; }
  :is(#playerExpandedCommentsCloseBtn,#playerPartyCloseBtn) { display:none !important; }
  #playerExpandedCommentsPanel .player-comments-panel-body {
    max-height:calc(88dvh - 76px);
    padding:0 14px calc(18px + env(safe-area-inset-bottom));
    gap:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  #playerExpandedCommentsPanel .player-comments-panel-body::-webkit-scrollbar { display:none; width:0; }
  #playerExpandedCommentsPanel .player-expanded-comments-track { padding:0 0 14px; }
  #playerExpandedCommentsPanel .player-expanded-comments-compose.sd-comment-compose {
    margin:0 -14px;
    padding:14px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  #playerExpandedCommentsPanel .sd-comment-item { padding:16px 0; background:transparent; }
  #playerExpandedCommentsPanel .sd-comment-body { min-width:0; }
  #playerExpandedCommentsPanel .sd-comment-header { align-items:flex-start; justify-content:space-between; }
  #playerExpandedCommentsPanel .sd-comment-author {
    display:inline-flex;
    min-width:0;
    max-width:100%;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
  }
  #playerExpandedCommentsPanel .super-fan-comment-badge {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    margin-left:2px;
    color:var(--super-fan-color,#ff4f78) !important;
    font-size:13px;
    line-height:1;
    opacity:1 !important;
    visibility:visible !important;
  }
  #playerPartyPanel .player-queue-panel-body {
    max-height:calc(88dvh - 76px);
    padding:0 14px calc(18px + env(safe-area-inset-bottom));
    gap:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  #playerPartyPanel .player-queue-panel-body::-webkit-scrollbar { display:none; width:0; }
  #playerPartyPanel :is(.player-party-status-row,.player-party-code-row,.player-party-forms,.player-party-actions,.player-queue-group) {
    margin:0 -14px;
    padding:14px;
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:transparent;
  }
  #playerPartyPanel .player-queue-group:last-child { border-bottom:0; }
}

.lyrics-collection-asset-actions{display:flex;flex-direction:column}.lyrics-collection-asset-actions button{border:0;background:transparent;color:var(--text-secondary);cursor:pointer;padding:3px}.lyrics-collection-asset-actions button:disabled{opacity:.25;cursor:default}
.lyrics-collection-editor-head input {
  width:100%;
  min-width:0;
  height:42px;
  box-sizing:border-box;
  padding:0 13px;
  border:1.5px solid var(--border);
  border-radius:12px;
  outline:0;
  background:var(--white);
  color:var(--text);
  font:inherit;
  font-size:.88rem;
  font-weight:650;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.lyrics-collection-editor-head input:hover { border-color:color-mix(in srgb,var(--blue) 38%,var(--border)); }
.lyrics-collection-editor-head input:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 15%,transparent);
}
.lyrics-collection-access{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0}.lyrics-collection-access label{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text-secondary);cursor:pointer}.lyrics-collection-access input{accent-color:var(--blue)}
html.dark-mode .lyrics-collection-editor-head input { background:color-mix(in srgb,var(--white) 92%,#fff 8%); }
.lyrics-collection-clip-discovery{margin:18px 0;padding:18px 0;border:0;border-block:1px solid var(--border);border-radius:0;background:transparent}
.lyrics-collection-clip-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:13px}.lyrics-collection-clip-head h4{margin:0 0 4px;font-size:1rem}.lyrics-collection-clip-head p{max-width:660px;margin:0;color:var(--text-secondary);font-size:.78rem;line-height:1.45}.lyrics-collection-clip-head>i{color:#ff0033;font-size:1.4rem}
.lyrics-collection-clip-form{display:grid;grid-template-columns:minmax(0,1fr) 104px auto;gap:8px}.lyrics-collection-clip-form input,.lyrics-collection-clip-form select{min-width:0;height:42px;padding:0 13px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--black);font:inherit;font-size:.84rem;outline:0}.lyrics-collection-clip-form input:focus,.lyrics-collection-clip-form select:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 15%,transparent)}
.lyrics-collection-clip-rights{display:flex;align-items:center;gap:7px;margin-top:10px;color:var(--text-secondary);font-size:.72rem}.lyrics-collection-clip-rights input{accent-color:var(--blue)}.lyrics-collection-clip-status{min-height:18px;margin:9px 0 0;color:var(--text-secondary);font-size:.75rem}.lyrics-collection-clip-status.is-error{color:#d1435b}
.lyrics-collection-clip-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px;margin-top:10px}.lyrics-collection-clip-card{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--black);cursor:pointer;transition:border-color .16s ease,transform .16s ease}.lyrics-collection-clip-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--blue) 45%,var(--border))}.lyrics-collection-clip-card.is-selected{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 10%,transparent)}.lyrics-collection-clip-preview{position:relative;grid-column:1/-1;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#080a10}.lyrics-collection-clip-preview video{width:100%;height:100%;object-fit:cover}.lyrics-collection-clip-preview input{position:absolute;top:7px;right:7px;width:20px;height:20px;margin:0;opacity:0}.lyrics-collection-clip-preview>i{position:absolute;top:7px;right:7px;display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:rgba(8,10,16,.72);color:transparent;font-size:.65rem}.lyrics-collection-clip-card.is-selected .lyrics-collection-clip-preview>i{background:var(--blue);color:#fff}.lyrics-collection-clip-card strong{font-size:.78rem}.lyrics-collection-clip-card small{color:var(--text-secondary);font-size:.68rem;text-align:right}.lyrics-collection-clip-add{margin-top:10px}.lyrics-collection-clip-discovery.is-locked .lyrics-collection-clip-rights{opacity:.55}

.settings-container.lyrics-video-page .lyrics-video-control-panel .form-group.lyrics-video-source-clips{display:grid;gap:9px}
.settings-container.lyrics-video-page .lyrics-video-clip-head{display:flex;align-items:flex-start;justify-content:space-between;margin:0;gap:12px}.settings-container.lyrics-video-page .lyrics-video-clip-head h4{margin:0;color:var(--lvm-text);font-size:13px}.settings-container.lyrics-video-page .lyrics-video-clip-head p{margin:3px 0 0;color:var(--lvm-muted);font-size:10px;line-height:1.45}.settings-container.lyrics-video-page .lyrics-video-clip-head>i{color:#ff0033;font-size:17px}
.settings-container.lyrics-video-page .lyrics-video-clip-form{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:7px}.settings-container.lyrics-video-page .lyrics-video-clip-form .btn{grid-column:1/-1;width:100%;justify-content:center}.settings-container.lyrics-video-page .lyrics-video-clip-form select{width:90px}
.settings-container.lyrics-video-page .lyrics-video-clip-rights{align-items:flex-start;margin:0;padding:1px 0;gap:8px;line-height:1.35}.settings-container.lyrics-video-page .lyrics-video-clip-rights input{width:16px!important;height:16px!important;min-height:0!important;margin:0!important;flex:0 0 16px}.settings-container.lyrics-video-page .lyrics-video-clip-status{min-height:0;margin:0;color:var(--lvm-muted);font-size:10px;line-height:1.4}.settings-container.lyrics-video-page .lyrics-video-clip-status:empty{display:none}.settings-container.lyrics-video-page .lyrics-video-clip-status.is-error{color:var(--danger)}
.settings-container.lyrics-video-page .lyrics-video-clip-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.settings-container.lyrics-video-page .lyrics-video-clip-results:empty{display:none}.settings-container.lyrics-video-page .lyrics-video-clip-results .lyrics-collection-clip-card{border-color:var(--lvm-border);background:var(--lvm-subtle);color:var(--lvm-text)}.settings-container.lyrics-video-page .lyrics-video-clip-results .lyrics-collection-clip-card small{color:var(--lvm-muted)}
.settings-container.lyrics-video-page .lyrics-video-clip-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}.settings-container.lyrics-video-page .lyrics-video-clip-actions[hidden]{display:none}.settings-container.lyrics-video-page .lyrics-video-clip-actions .btn{width:100%;justify-content:center}


.lyrics-quick-modal .lyrics-quick-modal-content {
  width:min(1720px,calc(100% - 32px)) !important;
  max-width:none !important;
  margin-inline:auto;
  box-sizing:border-box;
}
.lyrics-collections-modal .lyrics-collections-content {
  width:min(1720px,calc(100% - 32px)) !important;
  max-width:none !important;
  height:min(900px,calc(100dvh - 32px));
  max-height:calc(100dvh - 32px);
  margin-inline:auto;
  box-sizing:border-box;
}
.lyrics-collections-modal .lyrics-collections-layout {
  grid-template-columns:minmax(260px,22%) minmax(0,78%);
  min-height:0;
  max-height:none;
  flex:1;
}
.lyrics-collections-modal .lyrics-collection-assets {
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
@media (min-width:761px) {
  .lyrics-quick-modal-content {
    width:min(1720px,calc(100% - 32px)) !important;
    max-width:none !important;
    height:min(940px,calc(100dvh - 32px));
    max-height:calc(100dvh - 32px);
  }
  .lyrics-quick-modal-grid {
    grid-template-columns:minmax(340px,36%) minmax(560px,64%);
  }
  .lyrics-quick-preview-column { padding:24px 28px; }
  .lyrics-quick-options-column { padding:28px 34px; }
  .lyrics-quick-step-head>span {
    width:42px;
    height:42px;
    border-radius:14px;
    font-size:.82rem;
    flex:0 0 auto;
  }
  .lyrics-quick-step-head h3 { font-size:1.4rem; }
  .lyrics-quick-step-head p { font-size:.92rem; }
  .lyrics-quick-choice-card {
    min-height:104px;
    padding:14px;
    border-radius:17px;
  }
  .lyrics-quick-choice-card strong { font-size:.94rem; }
  .lyrics-quick-choice-card small { font-size:.78rem; line-height:1.38; }
  .lyrics-quick-choice-swatch { height:30px; min-width:38px; font-size:.74rem; }
  .lyrics-quick-track-card,.lyrics-quick-collection-card { min-height:76px; padding:11px; }
}
.lyrics-quick-modal-grid,.lyrics-quick-preview-column,.lyrics-quick-options-column,.lyrics-quick-step { min-width:0; box-sizing:border-box; }
.lyrics-quick-options-column { overflow-x:hidden; padding-right:max(34px,3vw) !important; }
.lyrics-quick-step { width:100%; padding-right:2px; }
#lyricsQuickMediaFilters { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lyrics-quick-collection-card.is-shared{border-color:color-mix(in srgb,#8b5cf6 38%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,#8b5cf6 7%,var(--white)),var(--white))}.lyrics-quick-collection-card em,.lyrics-collections-list-item em{display:inline-flex;margin-left:5px;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,#8b5cf6 15%,transparent);color:#7950d6;font-size:.58rem;font-style:normal;font-weight:850;vertical-align:middle}.lyrics-collections-list-item.is-shared{background:color-mix(in srgb,#8b5cf6 5%,transparent)}.lyrics-collection-shared-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding:15px;border:1px solid color-mix(in srgb,#8b5cf6 30%,var(--border));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,#8b5cf6 9%,var(--white)),var(--white))}.lyrics-collection-shared-head>span{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:#8b5cf6;color:#fff}.lyrics-collection-shared-head strong,.lyrics-collection-shared-head small{display:block}.lyrics-collection-shared-head small{margin-top:2px;color:var(--text-secondary);font-size:.72rem}.lyrics-collection-shared-head p{margin:7px 0 0;color:var(--text-secondary);font-size:.76rem}
.lyrics-quick-track-category{grid-column:1/-1;margin:12px 0 0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}.lyrics-quick-track-category:first-child{margin-top:0}.lyrics-quick-track-card{position:relative}.lyrics-quick-track-card.is-unavailable{cursor:not-allowed;border-style:dashed;background:color-mix(in srgb,var(--bg-secondary) 74%,var(--white));padding-right:34px}.lyrics-quick-track-card.is-unavailable:hover{border-color:var(--border)}.lyrics-quick-track-card.is-unavailable small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;color:#b14a58}.lyrics-quick-track-lock{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.72rem;color:var(--text-secondary)}
.lyrics-quick-choice-visual {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:58px;
  margin-bottom:10px;
  overflow:hidden;
  border-radius:11px;
  background:linear-gradient(145deg,#11172a,#252e4b);
  color:#fff;
  isolation:isolate;
}
.lyrics-quick-choice-visual b { position:relative;z-index:2;font-size:1.08rem;line-height:1;text-align:center; }
.lyrics-quick-choice-visual i { position:absolute;inset:0;opacity:.55; }
.lyrics-quick-choice-visual.is-style.preview-clean_mono b{font-family:Inter,sans-serif;font-weight:800}.lyrics-quick-choice-visual.is-style.preview-clean_mono{background:#111318}
.lyrics-quick-choice-visual.is-style.preview-poster_punch b{font-family:"Archivo Black",sans-serif;font-size:1.2rem;text-transform:uppercase;-webkit-text-stroke:1px #080808;text-shadow:2px 2px 0 #000}.lyrics-quick-choice-visual.is-style.preview-poster_punch{background:radial-gradient(#30384d 1px,transparent 1px),#ef5b34;background-size:5px 5px}
.lyrics-quick-choice-visual.is-style.preview-editorial b{font-family:"Cormorant Garamond",serif;font-size:1.35rem;font-style:italic;color:#fff4e3}.lyrics-quick-choice-visual.is-style.preview-editorial{background:linear-gradient(145deg,#4a3028,#17141a)}
.lyrics-quick-choice-visual.is-style.preview-neon_glass b{font-family:"Exo 2",sans-serif;font-weight:800;color:#9dffff;text-shadow:-2px 0 8px #ff2bd6,2px 0 10px #3cf6ff}.lyrics-quick-choice-visual.is-style.preview-neon_glass{background:radial-gradient(circle at 70% 20%,#40245d,#080c1e 66%)}
.lyrics-quick-choice-visual.is-style.preview-soft_film b{font-family:Raleway,sans-serif;color:#fff7ef;text-shadow:0 0 12px #bfa8ff}.lyrics-quick-choice-visual.is-style.preview-soft_film{background:linear-gradient(135deg,#d7a8bc,#927cae)}
.lyrics-quick-choice-visual.is-style.preview-vhs_tape b{font-family:"Bebas Neue",sans-serif;font-size:1.3rem;letter-spacing:.1em;text-shadow:-2px 0 #f24,2px 0 #0df}.lyrics-quick-choice-visual.is-style.preview-vhs_tape{background:repeating-linear-gradient(0deg,#101217 0 2px,#292c37 3px 4px)}
.lyrics-quick-choice-visual.is-style.preview-chrome_pop b{font-family:"Archivo Black",sans-serif;font-size:.92rem;background:linear-gradient(#fff,#7f96dc 45%,#fff 70%,#7385c3);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 7px #fff)}.lyrics-quick-choice-visual.is-style.preview-chrome_pop{background:linear-gradient(145deg,#071239,#5f3ab7)}
.lyrics-quick-choice-visual.is-style.preview-midnight_reverie{background:radial-gradient(circle at 68% 28%,#41414b,#050507 64%)}.lyrics-quick-choice-visual.is-style.preview-midnight_reverie b{font-family:"Playfair Display",serif;font-size:.9rem;font-style:italic;text-transform:lowercase;filter:contrast(1.25);text-shadow:0 3px 12px #000}
.lyrics-quick-choice-visual.is-style.preview-ethereal_frost{background:linear-gradient(125deg,#25d7dc,#6f5ca9 48%,#ff81c8);filter:saturate(.78)}.lyrics-quick-choice-visual.is-style.preview-ethereal_frost b{font-family:"Cormorant Garamond",serif;font-size:1.05rem;text-transform:uppercase;color:#f4fdff;text-shadow:0 0 12px #b7f8ff}
.lyrics-quick-choice-visual.is-style.preview-spectral_nocturne{background:repeating-linear-gradient(112deg,#050505 0 8px,#333 9px 10px,#0b0b0d 11px 17px)}.lyrics-quick-choice-visual.is-style.preview-spectral_nocturne b{font-family:"Playfair Display",serif;font-style:italic;text-transform:lowercase;text-shadow:-1px 0 #fff,2px 2px 0 #000}
.lyrics-quick-choice-visual.is-style.preview-purple_scene{background:repeating-linear-gradient(0deg,#240034 0 3px,#612080 4px,#190025 6px)}.lyrics-quick-choice-visual.is-style.preview-purple_scene b{font-family:"Playfair Display",serif;color:#f4ddff;text-shadow:-2px 0 #ef38ff,2px 0 #725cff;transform:skewX(-5deg)}
.lyrics-quick-choice-visual.is-style.preview-toxic_kandi{background:radial-gradient(circle,#b7ff00 0 8%,#193500 9% 20%,#050805 22%)}.lyrics-quick-choice-visual.is-style.preview-toxic_kandi b{font-family:"Archivo Black",sans-serif;font-size:1rem;text-transform:uppercase;color:#d7ff37;-webkit-text-stroke:1px #0b1200;text-shadow:0 0 10px #82ff00}
.lyrics-quick-choice-visual.is-style.preview-angel_error{background:linear-gradient(145deg,#eafcff,#2c69a8 46%,#15143e)}.lyrics-quick-choice-visual.is-style.preview-angel_error b{font-family:"Cormorant Garamond",serif;font-size:1.12rem;font-style:italic;color:#eef9ff;text-shadow:-2px 0 #9adfff,2px 0 #a783ff,0 0 14px #fff}
.lyrics-quick-choice-visual.is-font{height:48px;background:linear-gradient(145deg,#171d30,#252d48)}.lyrics-quick-choice-visual.is-font b{font-size:1.35rem}.lyrics-quick-choice-visual.is-font.preview-mode_default b{font-family:Syne,sans-serif}.lyrics-quick-choice-visual.is-font.preview-inter b{font-family:Inter,sans-serif}.lyrics-quick-choice-visual.is-font.preview-syne b{font-family:Syne,sans-serif}.lyrics-quick-choice-visual.is-font.preview-space_grotesk b{font-family:"Space Grotesk",sans-serif}.lyrics-quick-choice-visual.is-font.preview-archivo_black b{font-family:"Archivo Black",sans-serif}.lyrics-quick-choice-visual.is-font.preview-bebas_neue b{font-family:"Bebas Neue",sans-serif}.lyrics-quick-choice-visual.is-font.preview-cormorant_garamond b{font-family:"Cormorant Garamond",serif;font-style:italic}.lyrics-quick-choice-visual.is-font.preview-exo_2 b{font-family:"Exo 2",sans-serif}.lyrics-quick-choice-visual.is-font.preview-raleway b{font-family:Raleway,sans-serif}.lyrics-quick-choice-visual.is-font.preview-montserrat b{font-family:Montserrat,sans-serif}.lyrics-quick-choice-visual.is-font.preview-anton b{font-family:Anton,sans-serif}.lyrics-quick-choice-visual.is-font.preview-playfair_display b{font-family:"Playfair Display",serif;font-style:italic}
.lyrics-quick-choice-visual.is-mode b{font-size:.82rem}.lyrics-quick-choice-visual.is-mode.preview-classic b{font-family:Inter,sans-serif;text-shadow:0 3px 10px #000}.lyrics-quick-choice-visual.is-mode.preview-typographic_edit b{font-family:"Cormorant Garamond",serif;font-size:1rem;font-style:italic}.lyrics-quick-choice-visual.is-mode.preview-typewriter_focus b{font-family:"Space Mono",monospace;font-size:.72rem}.lyrics-quick-choice-visual.is-mode.preview-brat_force_justify b{font-family:Arial,sans-serif;transform:scaleX(1.35);letter-spacing:-.08em}.lyrics-quick-choice-visual.is-mode.preview-karaoke_word_sweep b{font-family:Inter,sans-serif;background:linear-gradient(90deg,#ff4ba2 0 48%,#fff 50%);-webkit-background-clip:text;background-clip:text;color:transparent}.lyrics-quick-choice-visual.is-mode.preview-glitch_word_by_word b{text-shadow:-3px 0 #ff2b89,3px 0 #1ee9ff;transform:skewX(-8deg)}.lyrics-quick-choice-visual.is-mode.preview-font_flip_word_focus b{font-family:"Playfair Display",serif;font-size:1rem;transform:rotate(-2deg)}.lyrics-quick-choice-visual.is-mode.preview-wikipedia_lookup{background:#f3f1ea;color:#141414}.lyrics-quick-choice-visual.is-mode.preview-wikipedia_lookup b{font-family:Georgia,serif}.lyrics-quick-choice-visual.is-mode.preview-smart_3d_lyrics b{text-shadow:1px 1px #798cff,2px 2px #6577db,3px 3px #4c5ba8;transform:perspective(80px) rotateX(-8deg)}
.lyrics-quick-choice-visual.is-motion i{inset:17px auto auto 50%;width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#fff,#6d85ff);transform:translateX(-50%);opacity:1}.lyrics-quick-choice-visual.is-motion b{display:none}
.lyrics-quick-choice-visual.is-motion.preview-gentle_drift i{animation:quickPreviewDrift 2.3s ease-in-out infinite}.lyrics-quick-choice-visual.is-motion.preview-pop_pulse i{animation:quickPreviewPulse 1.1s ease-in-out infinite}.lyrics-quick-choice-visual.is-motion.preview-handheld i{animation:quickPreviewHandheld .45s steps(2) infinite}.lyrics-quick-choice-visual.is-motion.preview-wavy i{animation:quickPreviewWavy 1.3s ease-in-out infinite;border-radius:50%}.lyrics-quick-choice-visual.is-motion.preview-hyper_glitch i{animation:quickPreviewGlitch .35s steps(2) infinite;box-shadow:-7px 0 #ff2f92,7px 0 #28e8ff}
.lyrics-quick-choice-visual.is-transition b{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.lyrics-quick-choice-visual.is-transition i{background:linear-gradient(90deg,#ff3b87 0 48%,#637bff 52% 100%)}.lyrics-quick-choice-visual.is-transition.preview-hard_cut i{background:linear-gradient(90deg,#ffb23f 0 50%,#18203c 50%)}.lyrics-quick-choice-visual.is-transition.preview-zoom_fade i{background:radial-gradient(circle,#8ea0ff 0 18%,#252e4b 20% 42%,#101526 44%)}.lyrics-quick-choice-visual.is-transition.preview-slide_left i{background:linear-gradient(110deg,#202944 0 35%,#6f85ff 36% 68%,#ef4f9e 69%)}.lyrics-quick-choice-visual.is-transition.preview-wipe_up i{background:linear-gradient(0deg,#7d55f4 0 48%,#161b31 50%)}.lyrics-quick-choice-visual.is-transition.preview-radial_reveal i{background:radial-gradient(circle,#ff538d 0 35%,#1a213b 37%)}.lyrics-quick-choice-visual.is-transition.preview-flash_cut i{background:linear-gradient(120deg,#27304d 0 43%,#fff 45% 55%,#744bda 57%)}.lyrics-quick-choice-visual.is-transition.preview-spin_mix i{background:conic-gradient(#ff468e,#687eff,#ffca5b,#ff468e)}
.lyrics-quick-choice-visual.is-format{height:52px}.lyrics-quick-choice-visual.is-format i{inset:8px auto;width:22px;border:2px solid #aebaff;border-radius:3px}.lyrics-quick-choice-visual.is-format.preview-1\:1 i{width:34px}.lyrics-quick-choice-visual.is-format.preview-16\:9 i{width:48px}.lyrics-quick-choice-visual.is-format b{display:none}
.lyrics-quick-text-settings{margin-top:22px;padding:18px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--bg-secondary) 68%,var(--white))}.lyrics-quick-text-settings-head h4{margin:0;font-size:1rem}.lyrics-quick-text-settings-head p{margin:3px 0 14px;color:var(--text-secondary);font-size:.76rem}.lyrics-quick-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lyrics-quick-setting{display:block;min-width:0;font-size:.76rem;font-weight:750}.lyrics-quick-setting.is-wide,.lyrics-quick-toggle.is-wide{grid-column:1/-1}.lyrics-quick-setting select{width:100%;margin-top:7px}.lyrics-quick-setting output{float:right;color:var(--blue)}.lyrics-quick-setting input[type=range]{width:100%;margin-top:10px}.lyrics-quick-color-setting input[type=color]{display:block;width:100%;height:42px;margin-top:7px;padding:4px;border:1px solid var(--border);border-radius:10px;background:var(--white);cursor:pointer}.lyrics-quick-fine-tune{margin:20px 0}.lyrics-quick-toggle{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:13px;cursor:pointer;background:var(--white)}.lyrics-quick-toggle input{width:18px;height:18px;accent-color:var(--blue)}.lyrics-quick-toggle span,.lyrics-quick-toggle strong,.lyrics-quick-toggle small{display:block}.lyrics-quick-toggle small{margin-top:2px;color:var(--text-secondary);font-size:.7rem;font-weight:500}
@keyframes quickPreviewDrift{50%{transform:translate(-50%,-7px) rotate(5deg)}}@keyframes quickPreviewPulse{50%{transform:translateX(-50%) scale(1.35)}}@keyframes quickPreviewHandheld{25%{transform:translate(-55%,-2px) rotate(-4deg)}75%{transform:translate(-45%,3px) rotate(3deg)}}@keyframes quickPreviewWavy{50%{transform:translate(-50%,-4px) scaleX(1.45) scaleY(.75)}}@keyframes quickPreviewGlitch{50%{transform:translate(-65%,3px) skewX(14deg)}}
.lyrics-quick-empty-action {
  grid-column:1/-1;
  width:100%;
  min-height:132px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:22px;
  border:1.5px dashed color-mix(in srgb,var(--blue) 52%,var(--border));
  border-radius:18px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 8%,var(--white)),var(--white));
  color:var(--text);
  font:inherit;
  font-size:.95rem;
  font-weight:750;
  text-align:center;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.lyrics-quick-empty-action i {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:var(--blue);
  color:#fff;
  font-size:1rem;
}
.lyrics-quick-empty-action:hover {
  transform:translateY(-2px);
  border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 12%,var(--white));
}
html.dark-mode .lyrics-quick-empty-action {
  background:linear-gradient(145deg,rgba(98,126,255,.13),rgba(255,255,255,.025));
}
@media (min-width:761px) and (max-width:1120px) {
  .lyrics-quick-modal-grid { grid-template-columns:minmax(310px,36%) minmax(0,64%); }
  .lyrics-quick-options-column { padding:24px; }
  .lyrics-quick-card-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #lyricsQuickMediaFilters { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .lyrics-quick-modal .lyrics-quick-modal-content { width:100vw !important; max-width:none !important; }
  .lyrics-collections-modal .lyrics-collections-content {
    width:100vw !important;
    max-width:none !important;
    height:92dvh;
    max-height:92dvh !important;
  }
  .lyrics-collections-modal .lyrics-collections-layout { display:block; max-height:70dvh; }
  .lyrics-collections-modal .lyrics-collection-assets { grid-template-columns:1fr; }
  .lyrics-quick-empty-action { min-height:110px; }
  .lyrics-quick-options-column { padding-right:16px !important; }
  .lyrics-quick-choice-visual{height:52px}.lyrics-quick-settings-grid{grid-template-columns:1fr}.lyrics-quick-setting.is-wide,.lyrics-quick-toggle.is-wide{grid-column:auto}.lyrics-quick-text-settings{padding:14px}
  .lyrics-quick-result-card.is-rendering{display:block;width:100%}.lyrics-quick-result-card.is-rendering .lyrics-quick-result-preview{width:min(100%,420px);max-height:68vh;margin-inline:auto}.lyrics-quick-result-card.is-rendering .lyrics-quick-result-body{padding:16px}
  .lyrics-collection-clip-form{display:grid;grid-template-columns:1fr}.lyrics-collection-clip-form .btn{width:100%}.lyrics-collection-clip-results{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px) {
  html.lyrics-mobile-page-active,body.lyrics-mobile-page-active{height:100%;overflow:hidden!important}
  .lyrics-quick-modal.is-mobile-page,.lyrics-collections-modal.is-mobile-page{position:fixed!important;inset:0!important;display:flex!important;align-items:stretch!important;justify-content:stretch!important;width:100vw!important;height:100dvh!important;margin:0!important;padding:0!important;background:var(--white)!important;z-index:11050!important;overflow:hidden!important}
  .lyrics-quick-modal.is-mobile-page>.modal-backdrop,.lyrics-collections-modal.is-mobile-page>.modal-backdrop{display:none!important}
  .lyrics-quick-modal.is-mobile-page .lyrics-quick-modal-content,.lyrics-collections-modal.is-mobile-page .lyrics-collections-content{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:100dvh!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  .lyrics-quick-modal.is-mobile-page .lyrics-quick-modal-head,.lyrics-collections-modal.is-mobile-page .modal-header{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:58px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px!important;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--white) 94%,transparent);backdrop-filter:blur(18px);z-index:4}
  .lyrics-quick-modal.is-mobile-page .lyrics-quick-modal-head>div,.lyrics-collections-modal.is-mobile-page .modal-header>div{min-width:0;flex:1}
  .lyrics-quick-modal.is-mobile-page .lyrics-quick-modal-head h2,.lyrics-collections-modal.is-mobile-page .modal-header h2{font-size:1.05rem;margin:0}
  .lyrics-quick-modal.is-mobile-page .lyrics-quick-kicker{display:none}
  .lyrics-mobile-page-back{position:static!important;display:grid!important;place-items:center!important;width:38px!important;height:38px!important;flex:0 0 38px!important;margin:0!important;border:0!important;border-radius:12px!important;background:var(--bg-secondary)!important;color:var(--text)!important;font-size:.9rem!important}
  .lyrics-quick-modal.is-mobile-page .lyrics-quick-modal-grid{min-height:0;flex:1;overflow:hidden}
  .lyrics-quick-modal.is-mobile-page .lyrics-quick-options-column{padding-bottom:28px!important}
  .lyrics-quick-modal.is-mobile-page .lyrics-quick-footer{flex:0 0 auto}
  .lyrics-collections-modal.is-mobile-page .lyrics-collections-toolbar{flex:0 0 auto}
  .lyrics-collections-modal.is-mobile-page .lyrics-collections-layout{display:flex!important;flex-direction:column;min-height:0!important;max-height:none!important;height:auto!important;flex:1;overflow:hidden}
  .lyrics-collections-modal.is-mobile-page .lyrics-collections-list{flex:0 0 auto;max-height:116px}
  .lyrics-collections-modal.is-mobile-page .lyrics-collection-editor{min-height:0;flex:1;overflow:auto;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.lyrics-quick-choice-visual i{animation:none!important}}

.lyrics-workspace-tool-page{width:100%;min-width:0}
.lyrics-workspace-tool-head{align-items:flex-end}
.lyrics-workspace-tool-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;color:var(--text-secondary);font-size:.78rem;font-weight:750;text-decoration:none}
.lyrics-workspace-tool-back:hover{color:var(--blue)}
.lyrics-workspace-tool-surface{position:relative;display:block;width:100%;min-width:0}
.lyrics-workspace-tool-surface>.modal-content{width:100%!important;max-width:none!important;margin:0!important;border:1px solid var(--border);border-radius:20px!important;box-shadow:none}
.lyrics-workspace-tool-surface.lyrics-quick-modal>.lyrics-quick-modal-content{height:max(650px,calc(100dvh - 235px));max-height:none}
.lyrics-workspace-tool-surface.lyrics-collections-modal>.lyrics-collections-content{height:max(600px,calc(100dvh - 235px));max-height:none}
@media(max-width:760px){
  .lyrics-workspace-tool-head{align-items:flex-start;gap:13px}
  .lyrics-workspace-tool-head>div{min-width:0}
  .lyrics-workspace-tool-head p{display:none}
  .lyrics-workspace-tool-head>.artist-studio-button{flex:0 0 auto;width:42px;height:42px;padding:0;font-size:0}
  .lyrics-workspace-tool-head>.artist-studio-button i{font-size:.9rem}
  .lyrics-workspace-tool-surface.lyrics-quick-modal{align-items:initial!important}
  .lyrics-workspace-tool-surface>.modal-content{width:100%!important;border-radius:16px!important}
  .lyrics-workspace-tool-surface.lyrics-quick-modal>.lyrics-quick-modal-content{height:calc(100dvh - 185px)!important;max-height:none!important}
  .lyrics-workspace-tool-surface .lyrics-quick-modal-head{display:none}
  .lyrics-workspace-tool-surface .lyrics-quick-modal-grid{width:100%;min-width:0}
  .lyrics-workspace-tool-surface .lyrics-quick-options-column{width:100%;min-width:0;box-sizing:border-box;padding:18px 14px 28px!important}
  .lyrics-workspace-tool-surface .lyrics-quick-step{width:100%;min-width:0}
  .lyrics-workspace-tool-surface .lyrics-quick-track-grid{width:100%;grid-template-columns:minmax(0,1fr)}
  .lyrics-workspace-tool-surface .lyrics-quick-track-card{width:100%;min-height:76px;box-sizing:border-box}
  .lyrics-workspace-tool-surface.is-song-step:not(.has-selected-track) .lyrics-quick-preview-column{display:none}
  .lyrics-workspace-tool-surface.lyrics-collections-modal>.lyrics-collections-content{height:auto!important;min-height:calc(100dvh - 185px);max-height:none!important;padding-bottom:0}
  .lyrics-workspace-tool-surface .lyrics-collections-layout{max-height:none;min-height:0}
}


.mobile-upload-gateway,.player-mobile-controls { display:none; }

@media (max-width:1023px) {
  :root {
    --mobile-bottom-nav-height:64px;
    --mobile-dock-background:color-mix(in srgb,var(--white) 88%,transparent);
    --mobile-dock-border:color-mix(in srgb,var(--border) 78%,transparent);
  }

  .mobile-bottom-nav,
  .mobile-bottom-nav.has-install-action {
    grid-template-columns:repeat(5,minmax(0,1fr));
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom,0px));
    padding:0 0 env(safe-area-inset-bottom,0px);
    overflow:hidden;
    border:0;
    border-top:1px solid var(--mobile-dock-border);
    border-radius:0;
    background:var(--mobile-dock-background);
    -webkit-backdrop-filter:blur(24px) saturate(155%);
    backdrop-filter:blur(24px) saturate(155%);
    box-shadow:0 -8px 28px rgba(12,12,14,.08);
    transition:border-radius .48s cubic-bezier(.16,1,.3,1),background .3s ease,box-shadow .3s ease;
  }

  body:not(.mobile-player-visible) .mobile-bottom-nav {
    border-radius:20px 20px 0 0;
    box-shadow:0 -12px 34px rgba(12,12,14,.12);
  }

  body.mobile-player-visible .mobile-bottom-nav { border-top-color:transparent; }
  body.mobile-player-visible .mobile-bottom-nav::before { opacity:0; }

  .mobile-bottom-nav::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background:var(--mobile-dock-border);
    opacity:.75;
    pointer-events:none;
  }

  .mobile-bottom-link,
  .mobile-bottom-upload {
    position:relative;
    min-width:0;
    min-height:64px;
    padding-bottom:8px;
    margin:0;
    gap:0;
    border-radius:0;
    color:color-mix(in srgb,var(--text-secondary) 88%,transparent);
    transform:none;
    isolation:isolate;
    transition:color .28s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-bottom-link::before,
  .mobile-bottom-upload::before {
    content:"";
    position:absolute;
    width:42px;
    height:36px;
    inset:auto;
    z-index:-1;
    border-radius:18px;
    background:color-mix(in srgb,var(--blue) 11%,transparent);
    box-shadow:none;
    opacity:0;
    transform:scale(.82);
    transition:opacity .28s ease,transform .48s cubic-bezier(.16,1,.3,1);
  }

  .mobile-bottom-link i,
  .mobile-bottom-upload i {
    font-size:20px;
    line-height:1;
    transition:filter .28s ease;
  }

  .mobile-bottom-label {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }

  .mobile-bottom-link.is-active,
  .mobile-bottom-upload.is-active { color:var(--blue); }
  .mobile-bottom-link.is-active::before,
  .mobile-bottom-upload.is-active::before { opacity:1; transform:scale(1); }
  .mobile-bottom-link.is-active i,
  .mobile-bottom-upload.is-active i { filter:drop-shadow(0 4px 7px color-mix(in srgb,var(--blue) 20%,transparent)); }
  .mobile-bottom-link:active,.mobile-bottom-upload:active { transform:none; }
  .mobile-bottom-link.is-nav-tapped i { animation:mobileNavTap .42s cubic-bezier(.16,1,.3,1); }
  .mobile-bottom-link.is-nav-entering::before { animation:mobileNavSelection .5s cubic-bezier(.16,1,.3,1); }

  #playerSection {
    left:0;
    right:0;
    bottom:calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom,0px));
    width:100%;
    border:0;
    border-top:1px solid var(--mobile-dock-border);
    border-bottom:0;
    border-radius:18px 18px 0 0;
    background:var(--mobile-dock-background);
    -webkit-backdrop-filter:blur(24px) saturate(155%);
    backdrop-filter:blur(24px) saturate(155%);
    box-shadow:0 -10px 32px rgba(12,12,14,.1);
    overflow:hidden;
  }

  body.mobile-player-visible #playerSection.active { animation:mobilePlayerEnter .58s cubic-bezier(.16,1,.3,1) both; }
  #playerSection.is-preview-expanding .player-wrapper { will-change:transform,opacity; }
  #playerSection .player-wrapper { padding:10px 14px; }
  #playerSection .player-cover { border-radius:9px; box-shadow:0 4px 10px rgba(12,12,14,.14); }

  .mobile-upload-gateway:not(.is-create-route) {
    display:block;
    width:min(100%,620px);
    min-height:calc(100dvh - var(--mobile-top-nav-height) - var(--mobile-player-height) - var(--mobile-bottom-nav-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px);
    margin:0 auto 24px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .upload-container:not(.mobile-create-release-route) { display:none; }
  .mobile-upload-gateway-inner { padding:20px 4px 24px; }
  .mobile-upload-heading { padding:0 4px 22px; border-bottom:1px solid var(--border); }
  .mobile-upload-heading h1 {
    margin:0 0 8px!important;
    font-size:30px;
    line-height:1.08;
    letter-spacing:-.035em;
  }
  .mobile-upload-heading p {
    max-width:430px;
    margin:0!important;
    color:var(--text-secondary);
    font-size:13px;
    line-height:1.5;
  }

  .mobile-upload-actions { display:block; margin-top:24px; }
  .mobile-upload-action {
    color:var(--black);
    text-decoration:none;
    transition:transform .3s cubic-bezier(.16,1,.3,1),background .24s ease,border-color .24s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-upload-action-primary {
    display:flex;
    min-height:208px;
    padding:26px 20px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    border:1.5px dashed color-mix(in srgb,var(--blue) 48%,var(--border));
    border-radius:18px;
    color:var(--black);
    text-align:center;
    background:color-mix(in srgb,var(--blue) 4%,var(--white));
    box-shadow:none;
  }

  .mobile-upload-action-primary .mobile-upload-action-icon {
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    font-size:21px;
    box-shadow:0 10px 24px color-mix(in srgb,var(--blue) 24%,transparent);
  }
  .mobile-upload-action-copy strong,.mobile-upload-action-copy small { display:block; }
  .mobile-upload-action-copy strong { margin-bottom:5px; font-size:16px; }
  .mobile-upload-action-copy small { color:var(--text-secondary); font-size:12px; }
  .mobile-upload-action-primary .mobile-upload-action-copy small { color:var(--text-secondary); }
  .mobile-upload-action-primary .mobile-upload-action-arrow { display:none; }
  .mobile-upload-action:active { transform:scale(.985); }
  .mobile-upload-formats { margin:10px 0 28px!important; color:var(--muted); font-size:10px; letter-spacing:.05em; text-align:center; }
  .mobile-upload-section-label { margin:0 4px 8px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }

  .mobile-upload-action-secondary {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 20px;
    align-items:center;
    gap:12px;
    min-height:72px;
    padding:10px 4px;
    border:0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .mobile-upload-action-secondary .mobile-upload-action-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:color-mix(in srgb,var(--blue) 10%,var(--white)); color:var(--blue); font-size:16px; }
  .mobile-upload-action-secondary .mobile-upload-action-arrow { justify-self:end; color:var(--muted); font-size:12px; }
}

@media (max-width:768px) {
  .player-mobile-controls { display:flex; align-items:center; justify-self:end; gap:2px; }
  .player-mobile-play-btn,
  .player-mobile-next-btn {
    color:var(--black)!important;
    background:transparent;
  }
  .player-mobile-next-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:40px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--black);
    font-size:15px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s ease;
  }
  .player-mobile-next-btn:active { transform:scale(.82); background:color-mix(in srgb,var(--black) 7%,transparent); }
}

@keyframes mobileNavTap {
  0% { transform:scale(1); }
  38% { transform:scale(.72); }
  72% { transform:scale(1.12); }
  100% { transform:scale(1); }
}

@keyframes mobileNavSelection {
  0% { transform:scale(.82); opacity:.2; }
  60% { transform:scale(1.08); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}

@keyframes mobilePlayerEnter {
  0% { transform:translate3d(0,18px,0) scale(.985); opacity:0; }
  100% { transform:translate3d(0,0,0) scale(1); opacity:1; }
}

@keyframes artistStudioMobilePlayerExit {
  0% { opacity:1; filter:blur(0); transform:translate3d(0,0,0) scale(1); }
  100% { opacity:0; filter:blur(8px); transform:translate3d(0,30px,0) scale(.97); }
}

@keyframes artistStudioMobileDockExit {
  0% { opacity:1; filter:blur(0); transform:translate3d(0,0,0); }
  100% { opacity:0; filter:blur(5px); transform:translate3d(0,calc(100% + env(safe-area-inset-bottom,0px)),0); }
}

@keyframes artistStudioMobileLaunchIcon {
  0% { opacity:1; transform:translateY(0) scale(1); }
  38% { opacity:1; transform:translateY(1px) scale(.78); }
  72% { opacity:1; transform:translateY(-5px) scale(1.12); }
  100% { opacity:0; transform:translateY(-20px) scale(.88); }
}

@media (max-width:1023px) {
  body.artist-studio-mobile-exit {
    overflow:hidden;
  }

  body.artist-studio-mobile-exit #playerSection {
    pointer-events:none;
    animation:artistStudioMobilePlayerExit .34s cubic-bezier(.4,0,.2,1) both!important;
    will-change:transform,opacity,filter;
  }

  body.artist-studio-mobile-exit .mobile-bottom-nav {
    pointer-events:none;
    animation:artistStudioMobileDockExit .4s cubic-bezier(.32,.72,0,1) 70ms both!important;
    will-change:transform,opacity,filter;
  }

  body.artist-studio-mobile-exit .mobile-bottom-upload.is-launching-artist-studio i {
    animation:artistStudioMobileLaunchIcon .4s cubic-bezier(.16,1,.3,1) both!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .mobile-bottom-nav,.mobile-bottom-link,.mobile-bottom-link::before,.mobile-bottom-link i,.mobile-upload-action,#playerSection { transition:none!important; animation:none!important; }
}

:is(.track-card,.playlist-card,.discovery-artist-card,.account-result-card,.discovery-top-card,.messages-entity-card,.profile-about-card,.profile-upcoming-card) {
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

:is(.track-card,.playlist-card) {
  padding:0!important;
  border-radius:0!important;
  color:var(--black);
  text-decoration:none;
  transform:none!important;
}

:is(.track-card,.playlist-card):hover {
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}

:is(.track-card-image-wrapper,.playlist-cover) {
  position:relative;
  width:100%;
  aspect-ratio:1;
  height:auto;
  margin:0 0 11px!important;
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  background:color-mix(in srgb,var(--black) 5%,var(--white));
  box-shadow:none!important;
}

:is(.track-image,.playlist-cover-image) {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit!important;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}

:is(.track-card,.playlist-card):hover :is(.track-image,.playlist-cover-image) { transform:scale(1.025); }

.track-card-overlay {
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:10px;
  background:linear-gradient(180deg,transparent 54%,rgba(0,0,0,.28));
  opacity:1!important;
  pointer-events:none;
}

.play-track-btn-large,
.media-card-play-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px!important;
  height:40px!important;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(18,20,26,.82)!important;
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  color:#fff!important;
  box-shadow:0 5px 16px rgba(0,0,0,.28)!important;
  font-size:14px!important;
  cursor:pointer;
  pointer-events:auto;
  transition:transform .34s cubic-bezier(.16,1,.3,1),background .2s ease!important;
  transform:none;
}

.play-track-btn-large:hover,
.media-card-play-btn:hover { transform:scale(1.08)!important; background:var(--blue)!important; }
.play-track-btn-large:active,
.media-card-play-btn:active { transform:scale(.86)!important; }
.play-track-btn-large i,
.media-card-play-btn i { margin-left:2px; }

.media-card-play-btn {
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:4;
}

:is(.track-card,.playlist-card) :is(.track-info,.playlist-info) {
  min-width:0;
  padding:0!important;
  text-align:left!important;
  background:transparent!important;
}

:is(.track-card .track-title,.playlist-card .playlist-name) {
  display:-webkit-box!important;
  margin:0 0 5px!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  white-space:normal!important;
  text-overflow:ellipsis;
  color:var(--black);
  font-size:17px!important;
  font-weight:700!important;
  line-height:1.2!important;
}

:is(.track-card .track-artist,.playlist-card .playlist-count) {
  margin:0!important;
  overflow:hidden;
  color:var(--text-secondary)!important;
  font-size:13px!important;
  line-height:1.35!important;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.track-card .track-meta-info:empty,
.track-card .track-meta-info:not(:has(.search-lyrics-match)),
.playlist-card .playlist-description { display:none!important; }

.track-card .search-lyrics-match {
  display:-webkit-box;
  margin-top:6px;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  color:var(--muted);
}

.discovery-artist-card,
.account-result-card {
  padding:0!important;
  border-radius:0!important;
}

@media (min-width:769px) {
  .grid-container,
  .playlists-grid,
  .search-container .grid-container,
  .search-container .playlists-grid {
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;
    gap:32px 20px!important;
    overflow:visible!important;
  }

  .discovery-home .grid-container,
  .discovery-home .playlists-grid {
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;
    gap:32px 20px!important;
    overflow:visible!important;
  }

  .search-container .grid-container>.track-card,
  .search-container .playlists-grid>.playlist-card,
  .discovery-home .grid-container>.track-card,
  .discovery-home .playlists-grid>.playlist-card {
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
  }

  .search-container :is(.track-card-image-wrapper,.playlist-cover) {
    width:100%!important;
    height:auto!important;
    aspect-ratio:1;
    margin:0 0 11px!important;
    border-radius:16px!important;
  }

  .search-container :is(.track-info,.playlist-info) { display:block!important; text-align:left!important; }
  .search-container .track-card-overlay { padding:10px; }
}

@media (max-width:768px) {
  .grid-container,
  .playlists-grid,
  .discovery-home .grid-container,
  .discovery-home .playlists-grid,
  .search-container .grid-container,
  .search-container .playlists-grid {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:28px 14px!important;
    overflow:visible!important;
    margin:0!important;
    padding:0 0 8px!important;
  }

  :is(.grid-container,.playlists-grid)>.track-card,
  :is(.grid-container,.playlists-grid)>.playlist-card,
  .discovery-home :is(.grid-container,.playlists-grid)>:is(.track-card,.playlist-card),
  .search-container :is(.grid-container,.playlists-grid)>:is(.track-card,.playlist-card) {
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    flex:none!important;
  }

  :is(.track-card-image-wrapper,.playlist-cover),
  .search-container :is(.track-card-image-wrapper,.playlist-cover) {
    width:100%!important;
    height:auto!important;
    aspect-ratio:1;
    border-radius:18px!important;
  }

  :is(.track-card .track-title,.playlist-card .playlist-name) { font-size:16px!important; }
  :is(.track-card .track-artist,.playlist-card .playlist-count) { font-size:12.5px!important; }
  .play-track-btn-large,.media-card-play-btn { width:38px!important; height:38px!important; }

  .discovery-top-card {
    border-radius:0!important;
    background:transparent!important;
  }

  .profile-about-card,
  .profile-upcoming-card,
  .messages-entity-card {
    padding-left:0!important;
    padding-right:0!important;
    border-radius:0!important;
  }


  .discovery-home .grid-container,
  .discovery-home .playlists-grid,
  .search-container .grid-container,
  .search-container .playlists-grid {
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    margin:0!important;
    padding:4px 0 14px!important;
  }

  .discovery-home .grid-container::-webkit-scrollbar,
  .discovery-home .playlists-grid::-webkit-scrollbar,
  .search-container .grid-container::-webkit-scrollbar,
  .search-container .playlists-grid::-webkit-scrollbar { display:none; }

  .discovery-home :is(.grid-container,.playlists-grid)>:is(.track-card,.playlist-card),
  .search-container :is(.grid-container,.playlists-grid)>:is(.track-card,.playlist-card) {
    flex:0 0 clamp(166px,44vw,210px)!important;
    width:clamp(166px,44vw,210px)!important;
    min-width:clamp(166px,44vw,210px)!important;
    scroll-snap-align:start;
  }


  #libraryGrid[data-library-view="grid"] {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px 12px!important;
    overflow:visible!important;
  }

  #libraryGrid[data-library-view="list"] {
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
    overflow:visible!important;
  }

  #libraryGrid[data-library-view="list"] .library-card {
    display:grid!important;
    grid-template-columns:66px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:13px!important;
    width:100%!important;
    min-height:82px!important;
    padding:8px 2px!important;
  }

  #libraryGrid[data-library-view="list"] .playlist-cover {
    width:66px!important;
    height:66px!important;
    aspect-ratio:1!important;
    margin:0!important;
    border-radius:11px!important;
  }

  #libraryGrid[data-library-view="list"] .playlist-info {
    display:block!important;
    min-width:0!important;
    text-align:left!important;
  }

  #libraryGrid[data-library-view="list"] .playlist-name {
    display:block!important;
    margin:0 0 5px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:16px!important;
    line-height:1.2!important;
  }

  #libraryGrid[data-library-view="list"] .playlist-description { display:none!important; }
}

@media (min-width:769px) {
  .discovery-home .grid-container,
  .discovery-home .playlists-grid {
    display:flex!important;
    grid-template-columns:none!important;
    gap:18px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:5px 0 16px!important;
  }

  .discovery-home .grid-container::-webkit-scrollbar,
  .discovery-home .playlists-grid::-webkit-scrollbar { display:none; }

  .discovery-home :is(.grid-container,.playlists-grid)>:is(.track-card,.playlist-card) {
    flex:0 0 clamp(200px,21vw,244px)!important;
    width:clamp(200px,21vw,244px)!important;
    min-width:clamp(200px,21vw,244px)!important;
    scroll-snap-align:start;
  }
}


.search-container:has(.search-start-page) > .playlists-header {
  display:none;
}

.search-start-page {
  display:grid;
  gap:42px;
  padding:42px 0 44px;
}

.search-start-hero {
  position:relative;
  overflow:hidden;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:38px;
  border-radius:28px;
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb,var(--blue) 35%,transparent) 0,transparent 34%),
    linear-gradient(135deg,color-mix(in srgb,var(--blue) 17%,var(--white)),color-mix(in srgb,var(--surface-2) 92%,var(--white)));
}

.search-start-hero::after {
  content:'\f002';
  position:absolute;
  right:34px;
  top:20px;
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-size:128px;
  line-height:1;
  color:color-mix(in srgb,var(--blue) 18%,transparent);
  transform:rotate(-10deg);
  pointer-events:none;
}

.search-start-eyebrow,
.search-start-kicker {
  color:var(--blue);
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.search-start-hero h1 {
  position:relative;
  z-index:1;
  margin:9px 0 8px;
  font-size:clamp(38px,5vw,64px);
  line-height:.96;
  letter-spacing:-.045em;
}

.search-start-hero p {
  position:relative;
  z-index:1;
  max-width:570px;
  margin:0;
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.5;
}

.search-start-section {
  display:grid;
  gap:18px;
}

.search-start-section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}

.search-start-section-head h2 {
  margin:7px 0 0;
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.025em;
}

.search-start-section-head > a {
  color:var(--text-secondary);
  text-decoration:none;
  font-size:13px;
  font-weight:750;
}

.search-start-section-head > a:hover { color:var(--blue); }

.search-genre-tags {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}

.search-genre-tag {
  min-width:0;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 18px;
  align-items:center;
  gap:11px;
  min-height:58px;
  padding:8px 13px 8px 8px;
  border:1px solid color-mix(in srgb,var(--border) 72%,transparent);
  border-radius:15px;
  color:var(--black);
  background:color-mix(in srgb,var(--surface-2) 72%,transparent);
  text-decoration:none;
  font-size:14px;
  font-weight:750;
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s ease,border-color .2s ease;
}

.search-genre-tag img {
  width:42px;
  height:42px;
  object-fit:cover;
  border-radius:10px;
}

.search-genre-tag > span {
  min-width:0;
  overflow:hidden;
  line-height:1.15;
}

.search-genre-tag > i {
  color:var(--text-secondary);
  font-size:11px;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}

.search-genre-tag:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--blue) 42%,var(--border));
  background:color-mix(in srgb,var(--blue) 9%,var(--surface-2));
}

.search-genre-tag:hover > i { transform:translateX(3px); }

.profile-catalog-page {
  width:100%;
  max-width:1380px;
  margin:0 auto;
  padding:28px 0 50px;
}

.profile-catalog-hero {
  display:grid;
  grid-template-columns:42px 82px minmax(0,1fr);
  align-items:center;
  gap:18px;
  padding:4px 0 26px;
  margin-bottom:20px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 74%,transparent);
}

.profile-catalog-back {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--black);
  background:var(--surface-2);
  text-decoration:none;
  transition:transform .25s ease,background .2s ease;
}

.profile-catalog-back:hover { transform:translateX(-2px); background:color-mix(in srgb,var(--blue) 12%,var(--surface-2)); }

.profile-catalog-avatar {
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  color:var(--text-secondary);
  background:var(--surface-2);
  font-size:26px;
}

.profile-catalog-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-catalog-heading { min-width:0; }
.profile-catalog-heading > span { color:var(--text-secondary); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.profile-catalog-heading h1 { margin:5px 0 5px; font-size:clamp(28px,3vw,42px); line-height:1; letter-spacing:-.035em; }
.profile-catalog-heading p { margin:0; color:var(--text-secondary); font-size:14px; font-weight:650; }
.profile-catalog-filters { margin:0 0 24px; }

.profile-catalog-grid {
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important;
  gap:32px 20px!important;
}

.profile-catalog-card[hidden] { display:none!important; }
.profile-catalog-card.is-filter-entering { animation:profileCatalogCardIn .42s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--profile-card-order,0) * 24ms); }

@keyframes profileCatalogCardIn {
  from { opacity:0; transform:translateY(8px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

.profile-catalog-filter-empty,
.profile-catalog-empty {
  padding:52px 10px;
  color:var(--text-secondary);
  text-align:center;
}

.profile-catalog-empty > i { display:block; margin-bottom:13px; font-size:30px; color:var(--blue); }
.profile-catalog-empty h2 { margin:0 0 7px; color:var(--black); }
.profile-catalog-empty p { margin:0; }

@media (max-width:768px) {
  .search-start-page { gap:34px; padding:22px 0 34px; }
  .search-start-hero { min-height:180px; margin:0 -4px; padding:25px 22px; border-radius:22px; }
  .search-start-hero::after { right:12px; top:18px; font-size:88px; }
  .search-start-hero h1 { font-size:38px; }
  .search-start-hero p { max-width:88%; font-size:14px; }
  .search-start-section { gap:15px; }
  .search-start-section-head h2 { font-size:23px; }
  .search-start-section-head > a { font-size:12px; }
  .search-genre-tags { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .search-genre-tag { grid-template-columns:30px minmax(0,1fr); min-height:50px; gap:7px; padding:8px; border-radius:13px; font-size:clamp(11px,3.5vw,12.5px); }
  .search-genre-tag img { width:30px; height:30px; border-radius:8px; }
  .search-genre-tag > span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere; }
  .search-genre-tag > i { display:none; }

  .profile-catalog-page { margin:0; padding:0 0 32px; }
  .profile-catalog-hero { grid-template-columns:48px minmax(0,1fr); gap:12px; padding:2px 0 18px; margin-bottom:14px; }
  .profile-catalog-back { display:none; }
  .profile-catalog-avatar { width:48px; height:48px; font-size:17px; }
  .profile-catalog-heading > span { display:none; }
  .profile-catalog-heading h1 { margin:0 0 4px; font-size:19px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .profile-catalog-heading p { font-size:12px; }
  .profile-catalog-filters { margin:0 0 19px; padding-bottom:2px; }
  .profile-catalog-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:27px 14px!important; overflow:visible!important; padding:0 0 8px!important; }
  .profile-catalog-grid > .profile-catalog-card { display:block!important; width:auto!important; min-width:0!important; max-width:none!important; flex:none!important; }
  .profile-catalog-grid > .profile-catalog-card[hidden] { display:none!important; }
}

.notifications-native-page {
  max-width:980px;
  padding:42px 0 56px;
}

.notifications-native-page .notifications-header {
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:18px;
  padding:0 0 26px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}

.notifications-header-icon {
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:var(--blue);
  background:color-mix(in srgb,var(--blue) 12%,var(--surface-2));
  font-size:24px;
}

.notifications-eyebrow {
  display:block;
  margin-bottom:6px;
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.notifications-native-page .notifications-header h1 {
  margin:0 0 5px;
  font-size:clamp(30px,4vw,42px);
  line-height:1;
  font-weight:800;
  letter-spacing:-.035em;
}

.notifications-native-page .notifications-header p { margin:0; font-size:14px; }

.notifications-native-page .notifications-filters {
  margin-top:20px;
  padding:0 0 6px;
  gap:7px;
  scrollbar-width:none;
}

.notifications-native-page .notifications-filters::-webkit-scrollbar { display:none; }

.notifications-native-page .notifications-filter-chip {
  min-height:38px;
  padding:8px 12px;
  border-color:transparent;
  background:var(--surface-2);
  font-size:12px;
}

.notifications-native-page .notifications-filter-chip.is-active {
  border-color:transparent;
  background:var(--black);
  color:var(--white);
}

.notifications-native-page .notifications-filter-chip.is-active strong {
  color:var(--white);
  background:color-mix(in srgb,var(--white) 18%,transparent);
}

.notifications-native-page .notifications-list-page {
  display:grid;
  margin-top:18px;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
}

.notifications-native-page .notifications-item-page {
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto 14px;
  align-items:center;
  gap:14px;
  min-height:76px;
  padding:13px 8px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 74%,transparent);
  border-radius:0;
  background:transparent;
  transition:background .2s ease,transform .3s cubic-bezier(.16,1,.3,1);
}

.notifications-native-page .notifications-item-page:first-child { border-top:1px solid color-mix(in srgb,var(--border) 74%,transparent); }
.notifications-native-page .notifications-item-page:hover { background:color-mix(in srgb,var(--blue) 5%,transparent); transform:translateX(3px); }
.notifications-native-page .notifications-item-page.unread { background:color-mix(in srgb,var(--blue) 5%,transparent); }

.notifications-item-icon {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:var(--blue);
  background:color-mix(in srgb,var(--blue) 11%,var(--surface-2));
  font-size:16px;
}

.notifications-item-icon-follows { color:#8b5cf6; background:color-mix(in srgb,#8b5cf6 12%,var(--surface-2)); }
.notifications-item-icon-release_saves { color:#ef476f; background:color-mix(in srgb,#ef476f 12%,var(--surface-2)); }
.notifications-item-icon-playlist_adds { color:#00a878; background:color-mix(in srgb,#00a878 12%,var(--surface-2)); }
.notifications-item-icon-comments { color:#f59e0b; background:color-mix(in srgb,#f59e0b 12%,var(--surface-2)); }
.notifications-item-icon-collabs { color:#7c3aed; background:color-mix(in srgb,#7c3aed 12%,var(--surface-2)); }

.notifications-item-copy { display:grid; min-width:0; gap:5px; }
.notifications-native-page .notifications-item-message { margin:0; font-size:14px; line-height:1.4; font-weight:600; }
.notifications-native-page .notifications-item-time { font-size:11.5px; }
.notifications-unread-dot { width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 12%,transparent); }
.notifications-item-chevron { color:var(--muted); font-size:10px; }

.notifications-native-empty { padding:76px 20px; }
.notifications-native-empty > span { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 16px; border-radius:18px; color:var(--blue); background:color-mix(in srgb,var(--blue) 10%,var(--surface-2)); font-size:21px; }
.notifications-native-empty h2 { margin:0 0 7px; }
.notifications-native-empty p { max-width:420px; margin:0 auto; color:var(--text-secondary); }

.notifications-load-sentinel {
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
}

.notifications-load-sentinel[hidden] { display:none!important; }
.notifications-load-spinner { width:18px; height:18px; border:2px solid color-mix(in srgb,var(--blue) 18%,var(--border)); border-top-color:var(--blue); border-radius:50%; animation:notificationsSpinner .75s linear infinite; }
.notifications-load-sentinel:not(.is-loading) .notifications-load-spinner { animation-play-state:paused; }
.notifications-load-sentinel.has-error span:last-child { font-size:0; }
.notifications-load-sentinel.has-error span:last-child::after { content:'Could not load more'; font-size:12px; }

@keyframes notificationsSpinner { to { transform:rotate(360deg); } }

.artist-hub-container {
  max-width:1360px;
  padding-top:42px;
}

.artist-hub-hero {
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:0 0 28px;
  margin-bottom:18px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}

.artist-hub-hero-avatar {
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  color:var(--blue);
  background:color-mix(in srgb,var(--blue) 10%,var(--surface-2));
  font-size:24px;
}

.artist-hub-hero-avatar img { width:100%; height:100%; object-fit:cover; }
.artist-hub-hero-copy { display:grid; min-width:0; gap:4px; }
.artist-hub-hero-copy small { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.artist-hub-hero-copy h1 { margin:0; font-size:clamp(32px,4vw,46px); line-height:1; letter-spacing:-.04em; }
.artist-hub-hero-copy p { margin:2px 0 0; color:var(--text-secondary); font-size:14px; }
.artist-hub-hero-action { min-height:44px; border-radius:999px; padding-inline:18px; }

.artist-hub-container .artist-hub-discord-banner {
  min-height:68px;
  margin-bottom:12px;
  border-color:transparent;
  border-radius:18px;
  box-shadow:none;
  background:color-mix(in srgb,#5865f2 9%,var(--surface-2));
}

.artist-hub-container .artist-hub-discord-banner:hover { box-shadow:none; background:color-mix(in srgb,#5865f2 14%,var(--surface-2)); }

.artist-hub-container .hub-tabs {
  gap:5px;
  margin-bottom:28px;
  padding:6px 0 10px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
  border-radius:0;
  background:transparent;
  scrollbar-width:none;
}

.artist-hub-container .hub-tabs::-webkit-scrollbar { display:none; }
.artist-hub-container .hub-tab { min-height:40px; padding:9px 13px; border:0; border-radius:999px; font-weight:700; }
.artist-hub-container .hub-tab.active { border:0; color:var(--white); background:var(--black); box-shadow:none; }

.artist-hub-container .hub-content { gap:18px; }
.artist-hub-container .hub-section-intro h2,
.artist-hub-container .content-header h2 { font-size:26px; font-weight:800; letter-spacing:-.025em; }
.artist-hub-container .hub-tab-search { width:min(100%,620px); min-height:46px; border:0; border-radius:15px; background:var(--surface-2); box-shadow:none; }

.artist-hub-container .artist-hub-releases-list { gap:0; border-top:1px solid color-mix(in srgb,var(--border) 76%,transparent); }
.artist-hub-container .artist-hub-release-item {
  padding:15px 6px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.artist-hub-container .artist-hub-release-item::before { display:none; }
.artist-hub-container .artist-hub-release-item:hover { background:color-mix(in srgb,var(--blue) 4%,transparent); }
.artist-hub-container .artist-hub-release-item.is-expanded,
.artist-hub-container .artist-hub-release-item.is-expanded:hover { border-color:color-mix(in srgb,var(--blue) 34%,var(--border)); background:color-mix(in srgb,var(--blue) 5%,transparent); box-shadow:none; }
.artist-hub-container .artist-hub-release-tracks-list { gap:0; }
.artist-hub-container .artist-hub-release-track-row { padding:10px 4px; border:0; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); border-radius:0; background:transparent; }
.artist-hub-container .artist-hub-release-track-row:hover { transform:none; box-shadow:none; background:color-mix(in srgb,var(--blue) 4%,transparent); }
.artist-hub-container .artist-hub-release-expand-btn,
.artist-hub-container .artist-release-context-trigger { border-color:transparent; border-radius:50%; background:var(--surface-2); }

.artist-hub-container .tracks-list:not(.artist-hub-releases-list) { border:0; border-top:1px solid var(--border); border-radius:0; }
.artist-hub-container .tracks-list:not(.artist-hub-releases-list) .track-item { border:0; border-bottom:1px solid var(--border); background:transparent; }
.artist-hub-container .artist-hub-faq-item,
.artist-hub-container .artist-hub-faq-item[open] { border-width:0 0 1px; border-radius:0; background:transparent; box-shadow:none; }

.artist-hub-mobile-index-heading { display:none; }

@media (max-width:1023px) {
  .notifications-native-page { padding:18px 0 40px; }
  .notifications-native-page .notifications-header { grid-template-columns:48px minmax(0,1fr); gap:13px; padding-bottom:18px; }
  .notifications-header-icon { width:48px; height:48px; border-radius:15px; font-size:18px; }
  .notifications-eyebrow { display:none; }
  .notifications-native-page .notifications-header h1 { font-size:22px; }
  .notifications-native-page .notifications-header p { font-size:12px; }
  .notifications-native-page .notifications-filters { margin-inline:-14px; padding-inline:14px; }
  .notifications-native-page .notifications-list-page { margin-inline:-14px; }
  .notifications-native-page .notifications-item-page { grid-template-columns:44px minmax(0,1fr) auto 12px; min-height:72px; gap:12px; padding:12px 14px; }
  .notifications-native-page .notifications-item-page:hover { transform:none; }
  .notifications-item-icon { width:44px; height:44px; border-radius:14px; }
  .notifications-native-page .notifications-item-message { font-size:13px; }
  .notifications-load-sentinel { min-height:84px; }

  #artistHubReleasesPage { padding-top:8px; }
  #artistHubReleasesPage > .artist-hub-hero { display:none; }
  .artist-hub-mobile-index-heading { display:block; padding:13px 2px 17px; }
  .artist-hub-mobile-index-heading span { display:block; font-size:28px; line-height:1; font-weight:800; letter-spacing:-.035em; }
  .artist-hub-mobile-index-heading p { margin:6px 0 0; color:var(--text-secondary); font-size:13px; }
  .artist-hub-mobile-profile { grid-template-columns:52px minmax(0,1fr); gap:12px; padding:14px 2px 19px; border-bottom:1px solid var(--border); }
  .artist-hub-mobile-avatar,.artist-hub-mobile-avatar img { width:52px; height:52px; }
  .artist-hub-mobile-profile strong { font-size:16px; }
  .artist-hub-mobile-index-row { min-height:76px; grid-template-columns:44px minmax(0,1fr) 16px; gap:13px; padding:8px 2px; }
  .artist-hub-mobile-index-icon { width:42px; height:42px; border-radius:14px; color:var(--blue); background:color-mix(in srgb,var(--blue) 10%,var(--surface-2)); font-size:16px; }
  .artist-hub-mobile-index-copy { display:grid; gap:4px; }
  .artist-hub-mobile-index-copy strong { font-size:15px; }
  .artist-hub-mobile-index-copy small { display:block; overflow:hidden; color:var(--text-secondary); font:500 11.5px/1.25 "Syne",sans-serif; white-space:nowrap; text-overflow:ellipsis; }
  .artist-hub-mobile-index-row[data-artist-hub-mobile-section="features"] .artist-hub-mobile-index-icon { color:#8b5cf6; background:color-mix(in srgb,#8b5cf6 11%,var(--surface-2)); }
  .artist-hub-mobile-index-row[data-artist-hub-mobile-section="lyrics"] .artist-hub-mobile-index-icon { color:#00a878; background:color-mix(in srgb,#00a878 11%,var(--surface-2)); }
  .artist-hub-mobile-index-row[data-artist-hub-mobile-section="promotion"] .artist-hub-mobile-index-icon { color:#f59e0b; background:color-mix(in srgb,#f59e0b 11%,var(--surface-2)); }
  .artist-hub-mobile-index-row[data-artist-hub-mobile-section="audience"] .artist-hub-mobile-index-icon { color:#06b6d4; background:color-mix(in srgb,#06b6d4 11%,var(--surface-2)); }
  .artist-hub-mobile-index-row[data-artist-hub-mobile-section="super-fans"] .artist-hub-mobile-index-icon { color:#ef476f; background:color-mix(in srgb,#ef476f 11%,var(--surface-2)); }
  .artist-hub-mobile-index-row[data-artist-hub-mobile-section="faq"] .artist-hub-mobile-index-icon,
  .artist-hub-mobile-index-row[data-artist-hub-mobile-section="settings"] .artist-hub-mobile-index-icon { color:var(--text-secondary); background:var(--surface-2); }
  .artist-hub-mobile-community-row .artist-hub-mobile-index-icon { color:#5865f2; background:color-mix(in srgb,#5865f2 11%,var(--surface-2)); }

  #artistHubReleasesPage.mobile-artist-hub-section-open .hub-section-intro { padding-top:14px; }
  #artistHubReleasesPage .artist-hub-release-item { padding:13px 14px; }
  #artistHubReleasesPage .artist-hub-releases-list .artist-hub-release-item > .track-item-cover { border-radius:13px; }
}

/* Shared desktop workspace tabs */
@media (min-width:1024px) {
  :is(.playlists-container,.settings-container) > .hub-tabs {
    display:flex;
    gap:5px;
    margin:0 0 28px;
    padding:6px 0 10px;
    border:0;
    border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
    border-radius:0;
    background:transparent;
    overflow-x:auto;
    scrollbar-width:none;
  }

  :is(.playlists-container,.settings-container) > .hub-tabs::-webkit-scrollbar { display:none; }

  :is(.playlists-container,.settings-container) > .hub-tabs .hub-tab {
    min-height:40px;
    display:inline-flex;
    align-items:center;
    padding:9px 13px;
    border:0;
    border-radius:999px;
    color:var(--text-secondary);
    background:transparent;
    box-shadow:none;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
  }

  :is(.playlists-container,.settings-container) > .hub-tabs .hub-tab:hover {
    color:var(--black);
    background:var(--surface-2);
  }

  :is(.playlists-container,.settings-container) > .hub-tabs .hub-tab:is(.active,.is-active) {
    border:0;
    color:var(--white);
    background:var(--black);
    box-shadow:none;
  }

  /* Native desktop Library sidebar */
  .desktop-sidebar-library {
    padding:10px 9px 16px;
  }

  .desktop-sidebar-library-head {
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 30px;
    align-items:center;
    gap:10px;
    margin:0 0 8px;
    padding:8px 4px 14px;
    border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
  }

  .desktop-sidebar-library-head-icon {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:var(--blue);
    background:color-mix(in srgb,var(--blue) 10%,var(--surface-2));
    font-size:14px;
  }

  .desktop-sidebar-library-head-copy { display:grid; min-width:0; gap:3px; }
  .desktop-sidebar-library-head h2 { color:var(--black); font-size:14px; font-weight:800; }
  .desktop-sidebar-library-head small { overflow:hidden; color:var(--text-secondary); font-size:10.5px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; }

  .desktop-sidebar-library-open {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--text-secondary);
    background:transparent;
    text-decoration:none;
    font-size:11px;
    transition:background .2s ease,color .2s ease,transform .25s ease;
  }

  .desktop-sidebar-library-open:hover { color:var(--blue); background:var(--surface-2); transform:translateX(2px); }

  .desktop-sidebar-library-list {
    gap:2px;
    padding:2px 3px 12px 0;
  }

  .desktop-sidebar-library-item {
    position:relative;
    border-color:transparent;
    border-radius:12px;
    background:transparent;
    box-shadow:none;
    transition:background .2s ease,color .2s ease,transform .25s cubic-bezier(.16,1,.3,1);
  }

  .desktop-sidebar-library-item::before {
    content:'';
    position:absolute;
    left:0;
    top:50%;
    width:3px;
    height:0;
    border-radius:999px;
    background:var(--blue);
    transform:translateY(-50%);
    transition:height .25s cubic-bezier(.16,1,.3,1);
  }

  .desktop-sidebar-library-item:hover,
  .desktop-sidebar-library-item.is-active {
    border-color:transparent;
    background:var(--surface-2);
    color:var(--black);
    box-shadow:none;
    transform:none;
  }

  .desktop-sidebar-library-item.is-active::before { height:28px; }

  .desktop-sidebar-library-icon {
    border:0;
    border-radius:10px;
    background:color-mix(in srgb,var(--blue) 8%,var(--surface-2));
    box-shadow:none;
  }

  .desktop-sidebar-library-item-create,
  .desktop-sidebar-library-item-download {
    border-color:transparent;
    background:transparent;
  }

  .desktop-sidebar-library-item-create .desktop-sidebar-library-icon { color:#00a878; background:color-mix(in srgb,#00a878 11%,var(--surface-2)); }
  .desktop-sidebar-library-item-download .desktop-sidebar-library-icon { color:#8b5cf6; background:color-mix(in srgb,#8b5cf6 11%,var(--surface-2)); }
  .desktop-sidebar-library-item-download { order:9999; margin-top:9px; }
  .desktop-sidebar-library-item-download::after { content:''; position:absolute; top:-5px; right:5px; left:5px; height:1px; background:color-mix(in srgb,var(--border) 70%,transparent); }

  .desktop-sidebar-library-item-create:hover,
  .desktop-sidebar-library-item-create:focus-visible,
  .desktop-sidebar-library-item-download:hover,
  .desktop-sidebar-library-item-download:focus-visible { border-color:transparent; background:var(--surface-2); color:var(--black); }

  .desktop-sidebar-library-name { font-weight:750; }
  .desktop-sidebar-library-meta { font-weight:500; }
  .desktop-sidebar-library-loading,
  .desktop-sidebar-library-empty { border:0; border-radius:12px; background:var(--surface-2); }

  .sidebar.labels-hidden .desktop-sidebar-library-head { grid-template-columns:1fr; justify-items:center; padding-inline:0; }
  .sidebar.labels-hidden .desktop-sidebar-library-head-copy,
  .sidebar.labels-hidden .desktop-sidebar-library-open { display:none; }
  .sidebar.labels-hidden .desktop-sidebar-library-item::before,
  .sidebar.labels-hidden .desktop-sidebar-library-item-download::after { display:none; }
}

/* Refreshed onboarding */
body.onboard-page .main-content .container { max-width:1120px; padding-top:34px; }

.onboard-shell {
  min-height:620px;
  padding:20px 30px 48px;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}

.onboard-ambient {
  position:fixed;
  inset:0;
  opacity:.62;
  background:
    radial-gradient(circle at 18% 14%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 30%),
    radial-gradient(circle at 84% 72%,color-mix(in srgb,#8b5cf6 9%,transparent),transparent 34%);
}

.onboard-header { max-width:900px; }
.onboard-brand { padding:0; border:0; border-radius:0; background:transparent; font-size:11px; letter-spacing:.1em; }
.onboard-header h1 { margin:14px 0 8px; font-size:clamp(38px,6vw,68px); line-height:.95; letter-spacing:-.05em; }
.onboard-header p { max-width:650px; font-size:15px; line-height:1.55; }

.onboard-progress { gap:0; margin-top:30px; border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent); flex-wrap:nowrap; overflow-x:auto; }
.onboard-progress-pill { min-width:max-content; padding:0 18px 13px 0; border:0; border-radius:0; background:transparent; color:var(--text-secondary); }
.onboard-progress-pill + .onboard-progress-pill { padding-left:18px; }
.onboard-progress-pill span { width:22px; height:22px; background:var(--surface-2); }
.onboard-progress-pill.is-active,
.onboard-progress-pill.is-complete { border:0; color:var(--black); }
.onboard-progress-pill.is-active { box-shadow:inset 0 -2px 0 var(--blue); }

.onboard-stage-wrap { margin-top:28px; }
.onboard-stage { padding:4px 0; border:0; border-radius:0; background:transparent; }
.onboard-stage-head h2 { font-size:clamp(23px,3vw,30px); font-weight:800; letter-spacing:-.025em; }
.onboard-stage-head h2 i { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:var(--blue); background:color-mix(in srgb,var(--blue) 10%,var(--surface-2)); font-size:16px; }
.onboard-stage-head p { margin:8px 0 0 52px; font-size:13px; }

.onboard-search-box { min-height:52px; border:0; border-radius:16px; background:var(--surface-2); }
.onboard-search-box input { background:transparent; }
.onboard-search-box:focus-within { box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent); }

.onboard-genres-grid { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.onboard-genre-card { border:0; border-radius:16px; background:var(--surface-2); box-shadow:none; }
.onboard-genre-card:hover { border:0; background:color-mix(in srgb,var(--blue) 7%,var(--surface-2)); box-shadow:none; }
.onboard-genre-card.is-selected { border:0; background:color-mix(in srgb,var(--blue) 12%,var(--surface-2)); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--blue) 55%,transparent); }
.onboard-genre-card-media { border-radius:13px; background:color-mix(in srgb,var(--blue) 12%,var(--surface-2)); }

.onboard-artist-results { gap:0; border-top:1px solid var(--border); }
.onboard-artist-card { padding:12px 4px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
.onboard-artist-card.is-selected { border-color:var(--border); background:color-mix(in srgb,var(--blue) 5%,transparent); }
.onboard-artist-avatar { background:var(--surface-2); }

.onboard-notification-options { gap:0; border-top:1px solid var(--border); }
.onboard-notification-row { min-height:62px; padding:12px 4px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
.onboard-notification-row span i { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:var(--blue); background:var(--surface-2); }

.onboard-summary { gap:10px; }
.onboard-summary-card { padding:16px; border:0; border-radius:16px; background:var(--surface-2); }
.onboard-summary-chips span,.onboard-selected-chip { border:0; background:color-mix(in srgb,var(--blue) 10%,var(--surface-2)); }
.onboard-empty { border:0; border-radius:14px; background:var(--surface-2); }
.onboard-stage-actions { margin-top:24px; }
.onboard-stage-actions .auth-submit-btn { min-height:46px; border-radius:999px; padding-inline:22px; }
.onboard-loading { position:fixed; background:color-mix(in srgb,var(--white) 72%,transparent); z-index:20000; }
.onboard-loading-card { border:0; border-radius:24px; background:var(--surface-1); box-shadow:0 28px 80px rgba(5,10,24,.22); }

/* Desktop spotlight tutorial */
.desktop-tour[hidden] { display:none!important; }
.desktop-tour { position:fixed; inset:0; z-index:30000; font-family:"Syne",sans-serif; }
.desktop-tour-shade { position:fixed; background:rgba(18,22,30,.58); transition:all .42s cubic-bezier(.22,1,.36,1); }
.desktop-tour-spotlight { position:fixed; border:2px solid var(--blue); border-radius:14px; box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent); pointer-events:none; transition:all .42s cubic-bezier(.22,1,.36,1); }
.desktop-tour-spotlight > span { display:none; }

.desktop-tour-card { position:fixed; z-index:30004; padding:22px; border:1px solid var(--border); border-radius:16px; color:var(--black); background:var(--surface-1); box-shadow:0 16px 44px rgba(12,18,30,.18); }
.desktop-tour-card.is-entering { animation:desktopTourCardIn .28s ease-out both; }
@keyframes desktopTourCardIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.desktop-tour-skip { position:absolute; top:16px; right:17px; padding:4px; border:0; background:transparent; color:var(--text-secondary); font:700 11px/1 "Syne",sans-serif; cursor:pointer; }
.desktop-tour-skip:hover { color:var(--black); }
.desktop-tour-step-label { margin:0 70px 15px 0; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.desktop-tour-icon { width:auto; height:auto; display:block; margin:0 0 12px; border:0; border-radius:0; color:var(--text-secondary); background:transparent; box-shadow:none; font-size:17px; }
.desktop-tour-card h2 { margin:0 0 8px; color:var(--black); font-size:24px; line-height:1.1; letter-spacing:-.03em; }
.desktop-tour-copy { margin:0; color:var(--text-secondary); font-size:13.5px; line-height:1.55; }
.desktop-tour-progress { display:flex; gap:5px; margin:20px 0 18px; }
.desktop-tour-progress span { width:7px; height:4px; border-radius:999px; background:var(--border); transition:width .25s ease,background .2s ease; }
.desktop-tour-progress span.is-complete { background:color-mix(in srgb,var(--blue) 52%,var(--border)); }
.desktop-tour-progress span.is-active { width:24px; background:var(--blue); }
.desktop-tour-actions { display:flex; justify-content:flex-end; gap:9px; }
.desktop-tour-actions .btn { min-height:38px; border-radius:10px; padding-inline:16px; box-shadow:none; }
.desktop-tour-back:disabled { opacity:.34; }
.desktop-tour.is-moving .desktop-tour-card { opacity:.4; transform:translateY(3px); }

html.dark-mode .desktop-tour-shade { background:rgba(0,0,0,.7); }
html.dark-mode .desktop-tour-card { border-color:#2a303b; background:#14171d; color:#edf0f5; box-shadow:0 16px 44px rgba(0,0,0,.35); }
html.dark-mode .desktop-tour-card h2,
html.dark-mode .desktop-tour-skip:hover { color:#edf0f5; }
html.dark-mode .desktop-tour-copy,
html.dark-mode .desktop-tour-skip,
html.dark-mode .desktop-tour-icon { color:#a8b0bd; }
html.dark-mode .desktop-tour-progress span { background:#303641; }
html.dark-mode .desktop-tour-progress span.is-complete { background:#4c609e; }
html.dark-mode .desktop-tour-progress span.is-active { background:var(--blue); }

body.desktop-tutorial-player-preview .player-footer,
body.desktop-tutorial-player-preview #playerSection { display:block!important; opacity:1!important; visibility:visible!important; transform:none!important; }
body.desktop-tutorial-player-preview #playerSection { pointer-events:none; }

.desktop-tutorial-preference-card .preferences-row { display:grid; grid-template-columns:50px minmax(0,1fr) auto; align-items:center; gap:14px; }
.desktop-tutorial-preference-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; color:var(--black); background:var(--surface-2); font-size:16px; }
.desktop-tutorial-preference-card .btn { border-radius:10px; white-space:nowrap; box-shadow:none; }

@media (max-width:1023px) {
  .desktop-tutorial-preference-card { display:none!important; }
  body.onboard-page .main-content .container { padding-top:10px; }
  .onboard-shell { padding:18px 2px 36px; }
  .onboard-header h1 { font-size:42px; }
  .onboard-progress { margin-top:23px; }
  .onboard-progress-pill { font-size:0; padding-right:12px; }
  .onboard-progress-pill + .onboard-progress-pill { padding-left:12px; }
  .onboard-progress-pill span { font-size:11px; }
  .onboard-stage-head p { margin-left:0; }
}


.discovery-top-card-cover,
.discovery-top-card-cover img {
  border-radius:14px;
}

.discovery-top-card-cover {
  overflow:hidden;
}

:is(.play-track-btn-large,.media-card-play-btn) {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(5px) scale(.9)!important;
  transition:opacity .2s ease,visibility 0s linear .2s,transform .38s cubic-bezier(.16,1,.3,1),background .2s ease!important;
}

:is(.track-card,.playlist-card):is(:hover,:focus-within) :is(.play-track-btn-large,.media-card-play-btn) {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1)!important;
  transition-delay:0s;
}

:is(.track-card,.playlist-card):not(:hover):not(:focus-within) .track-card-overlay {
  background:transparent;
}

@media (max-width:768px) {
  .search-container .grid-container,
  .search-container .playlists-grid,
  .search-container .account-results-grid {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:28px 14px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    margin:0!important;
    padding:0 0 8px!important;
  }

  .search-container .grid-container>.track-card,
  .search-container .playlists-grid>.playlist-card {
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    scroll-snap-align:none!important;
  }

  .search-container .account-results-grid>.account-result-card {
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    scroll-snap-align:none!important;
  }
}

/* Unified release, playlist, and track detail refresh. */
.detail-cover-ambient { display:none; }

:is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song) :is(.playlist-title,.sd-title) {
  font-family:"Syne",sans-serif;
  font-weight:800;
  letter-spacing:-.045em;
}

:is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song) :is(.playlist-actions,.sd-actions) :is(.btn,.sd-btn-play,.sd-btn-ghost) {
  min-height:48px;
  border-radius:999px;
  padding-inline:22px;
  box-shadow:none;
}

:is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song) .detail-context-menu-trigger {
  border-radius:50%;
  box-shadow:none;
}

:is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song) :is(.sd-section-title,.tracks-header) {
  font-family:"Syne",sans-serif;
  font-weight:750;
}

@media (min-width:1024px) {
  .playlist-detail-container.mobile-top-blend-release,
  .song-detail-container.mobile-top-blend-song.page-wrap {
    max-width:1200px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-header,
  .song-detail-container.mobile-top-blend-song .sd-hero {
    grid-template-columns:280px minmax(0,1fr);
    gap:44px;
    min-height:280px;
    align-items:end;
    margin-bottom:32px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-cover-large,
  .song-detail-container.mobile-top-blend-song .sd-cover-wrap {
    width:280px;
    height:280px;
    border-radius:10px;
    box-shadow:0 18px 42px rgba(0,0,0,.2);
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-cover-large-image,
  .song-detail-container.mobile-top-blend-song .sd-cover-img {
    border-radius:10px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-header-info,
  .song-detail-container.mobile-top-blend-song .sd-meta {
    justify-content:flex-end;
    min-width:0;
    padding:0 54px 4px 0;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-title,
  .song-detail-container.mobile-top-blend-song .sd-title {
    max-width:820px;
    margin:10px 0 14px!important;
    font-size:clamp(42px,5vw,68px);
    line-height:.96;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-description {
    max-width:720px;
    margin-bottom:14px;
    font-size:14px;
    line-height:1.55;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-meta {
    gap:10px 18px;
    margin-bottom:0;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-actions,
  .song-detail-container.mobile-top-blend-song .sd-actions {
    margin-top:26px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-actions .btn-primary,
  .song-detail-container.mobile-top-blend-song .sd-btn-play {
    min-width:154px;
    justify-content:center;
    font-size:14px;
  }

  .song-detail-container.mobile-top-blend-song .sd-artist-line {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
  }

  .song-detail-container.mobile-top-blend-song .sd-artist-link {
    display:inline;
    margin:0;
    font-size:15px;
    text-transform:none;
    letter-spacing:0;
  }

  .song-detail-container.mobile-top-blend-song .sd-chips {
    margin:0;
  }

  .song-detail-container.mobile-top-blend-song .sd-chip {
    padding:0;
    border:0;
    background:transparent;
    font-size:11px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content,
  .song-detail-container.mobile-top-blend-song .sd-body {
    margin-top:0;
    padding-top:26px;
    border-top:1px solid color-mix(in srgb,var(--border) 74%,transparent);
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content {
    border-top:0;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content > br,
  .song-detail-container.mobile-top-blend-song .sd-body > br {
    display:none;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content > .sd-section-title,
  .playlist-detail-container.mobile-top-blend-release .playlist-recommendations > .sd-section-title {
    margin-bottom:14px!important;
  }

  .song-detail-container.mobile-top-blend-song .sd-body {
    max-width:880px;
    gap:30px;
  }

  .song-detail-container.mobile-top-blend-song :is(.sd-comments,.sd-section:has(> .playlists-grid)) {
    max-width:880px;
  }

  #playlistTracksList,
  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist,
  #playlistRecommendationsList,
  .release-details-list,
  .song-detail-container .sd-detail-grid {
    border:0;
    border-radius:0;
    background:transparent!important;
    box-shadow:none;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  #playlistTracksList :is(.tracks-header,.track-row),
  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist :is(.tracks-header,.track-row),
  #playlistRecommendationsList :is(.tracks-header,.track-row) {
    background:transparent!important;
  }

  #playlistTracksList .tracks-header,
  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist .tracks-header,
  #playlistRecommendationsList .tracks-header {
    padding-block:12px;
    border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent);
  }

  #playlistTracksList .track-row,
  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist .track-row,
  #playlistRecommendationsList .track-row {
    min-height:68px;
    border-bottom:0;
    border-radius:8px;
  }

  #playlistTracksList .track-row:hover,
  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist .track-row:hover,
  #playlistRecommendationsList .track-row:hover {
    background:color-mix(in srgb,var(--black) 5%,transparent)!important;
  }

  :is(.release-details-list,.song-detail-container .sd-detail-grid) .sd-detail-row {
    padding-inline:0;
    background:transparent;
  }
}

@media (max-width:1023px) {
  .playlist-detail-container.mobile-top-blend-release,
  .song-detail-container.mobile-top-blend-song.page-wrap {
    max-width:none;
    margin-top:-14px;
    padding-top:0;
    padding-right:0;
    padding-left:0;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-header,
  .song-detail-container.mobile-top-blend-song .sd-hero {
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    margin-bottom:30px;
    position:relative;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-cover-large,
  .song-detail-container.mobile-top-blend-song .sd-cover-wrap {
    width:100vw;
    height:min(124vw,590px);
    margin:0 0 0 calc(50% - 50vw);
    padding-top:clamp(36px,10vw,64px);
    border-radius:0;
    background:var(--white);
    box-shadow:none;
    aspect-ratio:auto;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    isolation:isolate;
    overflow:hidden;
  }

  .detail-cover-ambient {
    display:block;
    position:absolute;
    inset:-34px;
    z-index:-2;
    overflow:hidden;
    background:var(--surface-2);
  }

  .detail-cover-ambient img {
    width:100%;
    height:100%;
    object-fit:cover;
    filter:blur(28px) saturate(1.08);
    transform:scale(1.13);
    opacity:.82;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-cover-large::after,
  .song-detail-container.mobile-top-blend-song .sd-cover-wrap::after {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(to bottom,rgba(3,5,10,.14) 0%,rgba(3,5,10,.28) 58%,var(--white) 100%);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    -webkit-mask-image:none;
    mask-image:none;
    pointer-events:none;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-cover-large-image,
  .song-detail-container.mobile-top-blend-song .sd-cover-img,
  .playlist-detail-container.mobile-top-blend-release :is(.default-playlist-cover-large,.playlist-placeholder-large) {
    position:relative;
    z-index:1;
    width:clamp(214px,61vw,330px);
    height:clamp(214px,61vw,330px);
    flex:0 0 auto;
    border-radius:14px;
    object-fit:cover;
    object-position:center;
    -webkit-mask-image:none;
    mask-image:none;
    box-shadow:0 18px 48px rgba(0,0,0,.3);
  }

  .playlist-detail-container.mobile-top-blend-release :is(.default-playlist-cover-large,.playlist-placeholder-large) {
    display:grid;
    place-items:center;
    font-size:72px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-header-info,
  .song-detail-container.mobile-top-blend-song .sd-meta {
    z-index:3;
    width:100%;
    margin-top:calc(
      clamp(36px,10vw,64px) +
      clamp(214px,61vw,330px) +
      24px -
      min(124vw,590px)
    );
    padding:0 16px;
    align-items:center;
    text-align:center;
  }

  .playlist-detail-container.mobile-top-blend-release .detail-context-menu-trigger,
  .song-detail-container.mobile-top-blend-song .detail-context-menu-trigger {
    top:-24px;
    right:16px;
    width:40px;
    height:40px;
    border:0;
    background:color-mix(in srgb,var(--white) 76%,transparent);
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-type {
    margin-bottom:8px;
    font-size:10px;
    letter-spacing:.11em;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-title,
  .song-detail-container.mobile-top-blend-song .sd-title {
    max-width:calc(100vw - 48px);
    margin:0 0 10px!important;
    font-size:clamp(31px,9vw,44px);
    line-height:1;
    overflow-wrap:anywhere;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-description {
    max-width:560px;
    margin:0 auto 12px;
    font-size:13px;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-meta,
  .song-detail-container.mobile-top-blend-song .sd-artist-line,
  .song-detail-container.mobile-top-blend-song .sd-chips {
    justify-content:center;
    text-align:center;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-meta {
    gap:6px 12px;
    margin-bottom:0;
    flex-wrap:wrap;
  }

  .playlist-detail-container.mobile-top-blend-release .meta-item {
    font-size:12px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-actions {
    width:min(100%,560px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:24px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-actions .btn {
    width:100%;
    min-width:0;
    min-height:54px;
    padding:0 15px;
    font-size:13px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-actions .btn:only-child {
    grid-column:1/-1;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content {
    margin-top:0;
    padding:0 16px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content > br,
  .song-detail-container.mobile-top-blend-song .sd-body > br {
    display:none;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content > .sd-section-title,
  .playlist-detail-container.mobile-top-blend-release .playlist-recommendations > .sd-section-title {
    margin:0 0 12px!important;
    font-size:12px;
  }

  .song-detail-container.mobile-top-blend-song .sd-artist-line {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:8px;
  }

  .song-detail-container.mobile-top-blend-song .sd-artist-link {
    display:inline;
    margin:0;
    font-size:15px;
    text-transform:none;
    letter-spacing:0;
  }

  .song-detail-container.mobile-top-blend-song .sd-chips {
    gap:7px 14px;
    margin:0;
  }

  .song-detail-container.mobile-top-blend-song .sd-chip,
  :is(.mobile-top-blend-release,.mobile-top-blend-song) .tag-chip-link {
    padding:0!important;
    border:0!important;
    background:transparent!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .song-detail-container.mobile-top-blend-song .sd-actions {
    width:min(100%,560px);
    margin-top:24px;
  }

  .song-detail-container.mobile-top-blend-song .sd-btn-play {
    width:100%;
    min-height:56px;
    justify-content:center;
    font-size:15px;
  }

  .song-detail-container.mobile-top-blend-song :is(.sd-body,.sd-section,.sd-comments) {
    padding-right:16px;
    padding-left:16px;
  }

  .song-detail-container.mobile-top-blend-song .sd-body {
    gap:28px;
    margin-bottom:38px;
    padding-top:22px;
    border-top:1px solid color-mix(in srgb,var(--border) 76%,transparent);
  }

  #playlistTracksList,
  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist,
  #playlistRecommendationsList,
  .release-details-list,
  .song-detail-container .sd-detail-grid {
    border:0;
    border-radius:0;
    background:transparent!important;
    box-shadow:none;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  :is(#playlistTracksList,#playlistRecommendationsList) .tracks-header,
  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist .tracks-header {
    display:none;
  }

  #playlistTracksList .track-row,
  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist .track-row,
  #playlistRecommendationsList .track-row {
    grid-template-columns:30px minmax(0,1fr) 42px;
    gap:10px;
    min-height:70px;
    padding:8px 0;
    border:0;
    border-radius:0;
    background:transparent!important;
  }

  :is(#playlistTracksList,#playlistRecommendationsList) .track-artist,
  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist .track-artist {
    display:none;
  }

  :is(#playlistTracksList,#playlistRecommendationsList) .track-thumbnail {
    width:48px;
    height:48px;
    border-radius:6px;
  }

  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist .track-thumbnail {
    display:none;
  }

  :is(#playlistTracksList,#playlistRecommendationsList) .track-btn,
  .playlist-detail-container:not([data-playlist-id]) .playlist-content > .tracks-list.contracklist .track-btn {
    width:40px;
    height:40px;
    border:0;
    background:transparent;
  }

  :is(.release-details-list,.song-detail-container .sd-detail-grid) .sd-detail-row {
    padding:12px 0;
    background:transparent;
  }
}

/* Media detail rhythm corrections after live desktop/mobile review. */
@media (min-width:1024px) {
  .playlist-detail-container.mobile-top-blend-release .playlist-title,
  .song-detail-container.mobile-top-blend-song .sd-title {
    max-width:760px;
    font-size:clamp(32px,3.2vw,46px);
    line-height:1.02;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-type {
    margin-bottom:4px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-meta {
    margin-top:4px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content,
  .song-detail-container.mobile-top-blend-song .sd-body {
    padding-top:34px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content > .sd-section:first-child:not(:empty) {
    margin-bottom:30px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content > .tracks-list ~ .sd-section-title {
    margin-top:52px!important;
    margin-bottom:16px!important;
  }
}

.song-detail-container.mobile-top-blend-song .sd-chips {
  align-items:center;
  gap:0;
}

.song-detail-container.mobile-top-blend-song .sd-chip {
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.4;
  text-transform:none;
}

#mainContent .song-detail-container.mobile-top-blend-song .sd-chips .sd-chip {
  border:0!important;
  background:transparent!important;
  color:rgba(var(--detail-readable-rgb,0,0,0),.78)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

.song-detail-container.mobile-top-blend-song .sd-chip + .sd-chip::before {
  content:"•";
  display:inline-block;
  margin:0 10px;
  color:currentColor;
  opacity:.58;
}

.song-detail-container.mobile-top-blend-song .sd-plays-chip i {
  font-size:10px;
}

.playlist-recommendations {
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}

.playlist-recommendations-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.playlist-recommendations-header h2 {
  margin:0!important;
  color:var(--black);
  font-family:"Syne",sans-serif;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.1;
  text-transform:none;
}

.playlist-recommendations-header p {
  margin:6px 0 0!important;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.45;
}

.playlist-recommendations-header #playlistRecommendationsRefreshBtn {
  flex:0 0 auto;
  min-height:40px;
  padding:0 15px;
  border:0;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--black);
  box-shadow:none;
}

#playlistRecommendationsList .track-row {
  border-bottom:1px solid color-mix(in srgb,var(--border) 58%,transparent)!important;
}

#playlistRecommendationsList .track-row:last-child {
  border-bottom:0!important;
}

#playlistRecommendationsList .track-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}

#playlistRecommendationsList .track-btn[data-recommend-add="true"] {
  background:color-mix(in srgb,var(--blue) 11%,transparent);
  color:var(--blue);
}

@media (max-width:1023px) {
  .playlist-detail-container.mobile-top-blend-release .playlist-title,
  .song-detail-container.mobile-top-blend-song .sd-title {
    max-width:calc(100vw - 72px);
    margin-bottom:14px!important;
    font-size:clamp(28px,8vw,36px);
    line-height:1.04;
  }

  .song-detail-container.mobile-top-blend-song .sd-artist-line {
    margin-bottom:12px;
  }

  .song-detail-container.mobile-top-blend-song .sd-chips {
    margin-top:2px;
  }

  .song-detail-container.mobile-top-blend-song .sd-chip {
    font-size:12px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-meta {
    margin-top:2px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-actions,
  .song-detail-container.mobile-top-blend-song .sd-actions {
    margin-top:28px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content > .sd-section:first-child:not(:empty) {
    margin:4px 0 28px;
  }

  .playlist-detail-container.mobile-top-blend-release .playlist-content > .tracks-list ~ .sd-section-title {
    margin-top:46px!important;
    margin-bottom:14px!important;
  }

  :is(.mobile-top-blend-release,.mobile-top-blend-song) .tag-strip {
    gap:7px;
  }

  :is(.mobile-top-blend-release,.mobile-top-blend-song) .tag-chip-link {
    padding:7px 10px!important;
    border:0!important;
    border-radius:999px;
    background:var(--surface-2)!important;
    color:var(--text-secondary)!important;
    font-family:"Syne",sans-serif;
    font-size:11px;
    font-weight:650;
    letter-spacing:0;
    line-height:1;
    text-shadow:none!important;
    text-transform:none;
  }

  .playlist-recommendations {
    margin-top:42px;
    padding-top:24px;
  }

  .playlist-recommendations-header {
    align-items:flex-start;
    margin-bottom:14px;
  }

  .playlist-recommendations-header h2 {
    font-size:20px;
  }

  .playlist-recommendations-header p {
    max-width:230px;
    font-size:12px;
  }

  .playlist-recommendations-header #playlistRecommendationsRefreshBtn {
    width:40px;
    min-width:40px;
    height:40px;
    padding:0;
    font-size:0;
  }

  .playlist-recommendations-header #playlistRecommendationsRefreshBtn i {
    margin:0;
    font-size:14px;
  }

  #playlistRecommendationsList .track-row {
    grid-template-columns:minmax(0,1fr) 82px;
    gap:10px;
    min-height:68px;
  }

  #playlistRecommendationsList :is(.track-number,.track-artist) {
    display:none;
  }

  #playlistRecommendationsList .track-thumbnail {
    width:46px;
    height:46px;
    border-radius:6px;
  }

  #playlistRecommendationsList .track-btn {
    width:36px;
    height:36px;
  }
}

/* Native-feeling mobile pull stretch for media and profile artwork. */
@media (max-width:1023px) {
  :is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song) {
    --mobile-hero-pull:0px;
    --mobile-hero-pull-scale:1;
    --mobile-hero-ambient-scale:1.13;
  }

  :is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song)
  :is(.playlist-cover-large,.sd-cover-wrap) {
    height:calc(min(124vw,590px) + var(--mobile-hero-pull));
    transition:height .56s cubic-bezier(.22,1,.36,1);
    will-change:height;
  }

  :is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song)
  :is(.playlist-cover-large-image,.sd-cover-img,.default-playlist-cover-large,.playlist-placeholder-large) {
    transform:scale(var(--mobile-hero-pull-scale));
    transform-origin:center top;
    transition:transform .56s cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }

  :is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song)
  .detail-cover-ambient img {
    transform:scale(var(--mobile-hero-ambient-scale));
    transition:transform .56s cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }

  :is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song).is-mobile-hero-pulling
  :is(.playlist-cover-large,.sd-cover-wrap),
  :is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song).is-mobile-hero-pulling
  :is(.playlist-cover-large-image,.sd-cover-img,.default-playlist-cover-large,.playlist-placeholder-large),
  :is(.playlist-detail-container.mobile-top-blend-release,.song-detail-container.mobile-top-blend-song).is-mobile-hero-pulling
  .detail-cover-ambient img {
    transition:none;
  }
}

@media (max-width:768px) {
  .profile-container.mobile-top-blend-profile {
    --mobile-hero-pull:0px;
  }

  .profile-container.mobile-top-blend-profile .profile-cover {
    height:calc(min(100vw,520px) + var(--mobile-hero-pull));
    transition:height .56s cubic-bezier(.22,1,.36,1);
    will-change:height;
  }

  .profile-container.mobile-top-blend-profile.is-mobile-hero-pulling .profile-cover {
    transition:none;
  }
}

/* Keep native momentum from escaping above controlled mobile detail heroes. */
@media (max-width:1023px) {
  html.mobile-detail-controlled-overscroll,
  html.mobile-detail-controlled-overscroll body,
  html.mobile-detail-controlled-overscroll .main-content {
    overscroll-behavior-y:none!important;
  }
}

/* Profile detail refresh: shared media-page language without boxed sections. */
.profile-cover-ambient,
.profile-hero-art,
.profile-header-banner {
  display:none;
}

.mobile-top-blend-profile :is(.profile-title-row .usernamee,.profile-content h2) {
  font-family:"Syne",sans-serif;
  font-weight:800;
  letter-spacing:-.04em;
}

.mobile-top-blend-profile .profile-content .tracks-list {
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible;
}

.mobile-top-blend-profile .profile-content .track-item {
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 68%,transparent);
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
}

.mobile-top-blend-profile .profile-content .track-item:last-child {
  border-bottom:0;
}

@media (min-width:1024px) {
  body:has(#mainContentContainer.profile-customization-scope) .main-content {
    padding-top:var(--desktop-top-nav-height);
  }

  #mainContentContainer.profile-customization-scope {
    width:100%;
    max-width:none;
    padding:0;
  }

  #mainContentContainer.profile-customization-scope > .mbr {
    display:none;
  }

  .mobile-top-blend-profile.profile-container {
    width:100%;
    max-width:none;
    margin:0;
    padding:0 0 40px;
  }

  .mobile-top-blend-profile .profile-header {
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:44px;
    min-height:280px;
    align-items:end;
    margin-bottom:32px;
    padding:0 max(24px,calc((100% - 1200px) / 2 + 24px));
    isolation:isolate;
  }

  .profile-container.has-profile-banner.mobile-top-blend-profile .profile-header {
    min-height:382px;
    padding-top:48px;
    padding-bottom:54px;
  }

  .profile-container.no-profile-banner.mobile-top-blend-profile .profile-header {
    padding-top:28px;
  }

  .profile-container.has-profile-banner.mobile-top-blend-profile .profile-header::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:var(--white);
    pointer-events:none;
  }

  .mobile-top-blend-profile .profile-header-banner {
    display:block;
    position:absolute;
    inset:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none;
  }

  .mobile-top-blend-profile .profile-header-banner img {
    width:100%;
    height:100%;
    object-fit:cover;
    filter:none;
    opacity:1;
    transform:none;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 62%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 62%,transparent 100%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
  }

  .mobile-top-blend-profile .profile-header-banner::after {
    display:none;
  }

  .profile-container.mobile-top-blend-profile .profile-cover,
  .profile-container.no-profile-banner.mobile-top-blend-profile .profile-cover {
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:280px;
    height:280px;
    margin:0;
    border-radius:10px;
    background:var(--surface-2)!important;
    box-shadow:0 18px 42px rgba(0,0,0,.2);
    overflow:hidden;
  }

  .mobile-top-blend-profile .profile-cover::after,
  .mobile-top-blend-profile .profile-cover-ambient {
    display:none;
  }

  .mobile-top-blend-profile .profile-hero-art {
    display:grid;
    width:100%;
    height:100%;
    place-items:center;
  }

  .mobile-top-blend-profile .profile-hero-art-image {
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .mobile-top-blend-profile .profile-hero-art-placeholder {
    color:var(--text-secondary);
    font-size:72px;
  }

  .mobile-top-blend-profile .profile-info,
  .profile-container.has-profile-banner.mobile-top-blend-profile .profile-info {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:24px;
    align-items:end;
    align-self:end;
    min-width:0;
    margin:0;
    padding:0 54px 4px 0;
  }

  .mobile-top-blend-profile .profile-avatar {
    display:none;
  }

  .mobile-top-blend-profile .profile-details {
    min-width:0;
    padding:0;
  }

  .mobile-top-blend-profile .profile-title-row .usernamee {
    max-width:760px;
    margin:8px 0 12px;
    color:rgb(var(--detail-readable-rgb,255,255,255));
    font-size:clamp(32px,3.2vw,46px);
    line-height:1.02;
    overflow-wrap:anywhere;
    text-shadow:0 1px 3px rgba(var(--detail-readable-panel-rgb,0,0,0),.62);
  }

  .mobile-top-blend-profile .playlist-type {
    margin:0 0 4px;
  }

  .mobile-top-blend-profile .profile-monthly-listeners {
    margin:0!important;
  }

  .mobile-top-blend-profile .profile-right-rail {
    width:auto;
    min-width:0;
    margin:0;
    align-self:end;
  }

  .mobile-top-blend-profile .profile-actions.playlist-actions {
    width:auto;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .mobile-top-blend-profile .profile-actions .follow-btn {
    width:auto;
    min-height:44px;
    padding:0 18px;
    border-radius:999px;
  }

  .mobile-top-blend-profile .profile-content {
    width:min(1200px,100%);
    margin:0 auto;
    padding-right:32px;
    padding-left:32px;
    padding-top:34px;
    border-top:0;
  }

  .mobile-top-blend-profile .profile-content .track-item {
    min-height:68px;
    padding:8px 10px;
  }
}

@media (max-width:768px) {
  .mobile-top-blend-profile.profile-container {
    max-width:none;
    margin-top:-14px;
    padding:0 0 28px;
  }

  .mobile-top-blend-profile .profile-header {
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    margin-bottom:30px;
    padding:0;
    position:relative;
  }

  .profile-container.mobile-top-blend-profile .profile-cover,
  .profile-container.no-profile-banner.mobile-top-blend-profile .profile-cover {
    display:flex!important;
    align-items:flex-start;
    justify-content:center;
    isolation:isolate;
    width:100vw;
    height:calc(min(124vw,590px) + var(--mobile-hero-pull,0px));
    margin:0 0 0 calc(50% - 50vw);
    padding-top:clamp(36px,10vw,64px);
    border-radius:0;
    background:var(--white)!important;
    box-shadow:none;
    overflow:hidden;
    transition:height .56s cubic-bezier(.22,1,.36,1);
    will-change:height;
  }

  .mobile-top-blend-profile .profile-cover-ambient {
    display:block;
    position:absolute;
    inset:-34px;
    z-index:-2;
    overflow:hidden;
    background:var(--surface-2);
  }

  .mobile-top-blend-profile .profile-cover-ambient img {
    width:100%;
    height:100%;
    object-fit:cover;
    filter:blur(28px) saturate(1.08);
    opacity:.82;
    transform:scale(var(--mobile-hero-ambient-scale,1.13));
    transition:transform .56s cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }

  .mobile-top-blend-profile .profile-cover::after {
    display:block;
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(to bottom,rgba(3,5,10,.14) 0%,rgba(3,5,10,.28) 58%,var(--white) 100%);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    -webkit-mask-image:none;
    mask-image:none;
    pointer-events:none;
  }

  .mobile-top-blend-profile .profile-hero-art {
    display:grid;
    position:relative;
    z-index:1;
    width:clamp(214px,61vw,330px);
    height:clamp(214px,61vw,330px);
    flex:0 0 auto;
    place-items:center;
    border-radius:14px;
    background:var(--surface-2);
    box-shadow:0 18px 48px rgba(0,0,0,.3);
    overflow:hidden;
    transform:scale(var(--mobile-hero-pull-scale,1));
    transform-origin:center top;
    transition:transform .56s cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }

  .mobile-top-blend-profile .profile-hero-art-image {
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .mobile-top-blend-profile .profile-hero-art-placeholder {
    color:var(--text-secondary);
    font-size:72px;
  }

  .mobile-top-blend-profile .profile-info,
  .profile-container.has-profile-banner.mobile-top-blend-profile .profile-info {
    display:block;
    z-index:3;
    width:100%;
    min-height:0;
    margin-top:calc(clamp(36px,10vw,64px) + clamp(214px,61vw,330px) + 24px - min(124vw,590px));
    padding:0 16px;
    text-align:center;
  }

  .mobile-top-blend-profile .profile-avatar {
    display:none;
  }

  .mobile-top-blend-profile .profile-details {
    padding:0;
  }

  .mobile-top-blend-profile .profile-title-row .usernamee {
    max-width:calc(100vw - 48px);
    margin:0 auto 12px;
    color:rgb(var(--detail-readable-rgb,0,0,0));
    font-size:clamp(28px,8vw,36px);
    line-height:1.04;
    overflow-wrap:anywhere;
    text-shadow:0 1px 3px rgba(var(--detail-readable-panel-rgb,255,255,255),.44);
  }

  .mobile-top-blend-profile .playlist-type {
    display:block;
    margin:0 0 8px;
    color:rgba(var(--detail-readable-rgb,0,0,0),.76);
    font-size:10px;
    letter-spacing:.11em;
    text-shadow:none;
  }

  .mobile-top-blend-profile .profile-monthly-listeners {
    display:flex;
    justify-content:center;
    margin:0!important;
    color:rgba(var(--detail-readable-rgb,0,0,0),.76);
    font-size:13px;
    text-shadow:none;
  }

  .mobile-top-blend-profile .profile-right-rail {
    width:100%;
    margin-top:24px;
  }

  .mobile-top-blend-profile .profile-actions.playlist-actions {
    display:flex;
    width:min(100%,560px);
    margin:0 auto;
    gap:10px;
  }

  .mobile-top-blend-profile .profile-actions .follow-btn {
    min-height:52px;
    border-radius:999px;
  }

  .mobile-top-blend-profile .profile-content {
    margin:0;
    padding:0 16px;
  }

  .mobile-top-blend-profile .profile-content .discovery-section {
    margin-bottom:36px;
  }

  .mobile-top-blend-profile .profile-content h2 {
    margin-bottom:14px;
    font-size:23px;
    line-height:1.1;
  }

  .mobile-top-blend-profile .profile-content .track-item {
    min-height:70px;
    padding:8px 0;
  }

  .mobile-top-blend-profile.is-mobile-hero-pulling :is(.profile-cover,.profile-hero-art,.profile-cover-ambient img) {
    transition:none;
  }
}

/* Profile pulls mirror song-page behavior exactly. */
@media (max-width:768px) {
  .profile-container.mobile-top-blend-profile .profile-cover {
    height:calc(min(124vw,590px) + var(--mobile-hero-pull,0px));
    transform:none;
    transition:height .56s cubic-bezier(.22,1,.36,1);
    will-change:height;
  }

  .profile-container.mobile-top-blend-profile .profile-hero-art {
    transform:scale(var(--mobile-hero-pull-scale,1));
    transform-origin:center top;
    transition:transform .56s cubic-bezier(.22,1,.36,1);
  }

  .profile-container.mobile-top-blend-profile :is(.profile-info,.profile-content) {
    transform:none;
    transition:none;
    will-change:auto;
  }

  .profile-container.mobile-top-blend-profile.is-mobile-hero-pulling :is(.profile-cover,.profile-hero-art,.profile-cover-ambient img) {
    transition:none;
  }
}

/* Unified workspace headers and listening history */
@media (min-width:1024px) {
  :is(.settings-container,.playlists-container) > .workspace-page-hero.playlists-header {
    display:grid;
    grid-template-columns:72px minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    margin:0 0 18px;
    padding:0 0 28px;
    border:0;
    border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  :is(.settings-container,.playlists-container) > .workspace-page-hero.playlists-header:hover {
    border-bottom-color:color-mix(in srgb,var(--border) 76%,transparent);
    background:transparent;
    box-shadow:none;
  }

  .workspace-page-hero.playlists-header h1 {
    display:block;
    margin:0;
    font-size:clamp(32px,4vw,46px);
    font-weight:800;
    line-height:1;
    letter-spacing:-.04em;
  }
}

.history-page {
  max-width:1360px;
  margin:0 auto;
  padding:42px 24px 100px;
  gap:40px;
}

.history-page > .history-page-hero {
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin:0;
  padding:0 0 28px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.history-page-hero-icon { color:#8b5cf6; background:color-mix(in srgb,#8b5cf6 11%,var(--surface-2)); }

.history-total-plays {
  min-width:112px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:right;
}

.history-total-plays span { margin-bottom:4px; font-size:10px; letter-spacing:.1em; }
.history-total-plays strong { color:var(--black); font-size:30px; font-weight:800; letter-spacing:-.04em; }

.history-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px; }

.history-panel {
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.history-grid > .history-panel + .history-panel {
  padding-left:42px;
  border-left:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}

.history-panel-head {
  min-height:47px;
  margin:0;
  padding:0 0 14px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}

.history-panel-head h2 { font-size:24px; font-weight:800; letter-spacing:-.03em; }

.history-tabs {
  gap:3px;
  padding:3px;
  border:0;
  border-radius:999px;
  background:var(--surface-2);
}

.history-tab {
  min-height:32px;
  padding:7px 11px;
  border:0;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  transition:color .18s ease,background .18s ease,transform .18s ease;
}

.history-tab:hover { color:var(--black); }
.history-tab:active { transform:scale(.96); }
.history-tab.is-active { border:0; color:var(--white); background:var(--black); box-shadow:none; }

.history-track-list,
.history-artist-list,
.history-recent-list { gap:0; }

.history-page .history-track-row,
.history-page .history-artist-row {
  min-height:68px;
  grid-template-columns:25px 48px minmax(0,1fr) auto 36px;
  gap:12px;
  padding:10px 4px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 66%,transparent);
  border-radius:0;
  background:transparent;
  transform:none;
  transition:background .18s ease;
}

.history-page .history-track-row:hover,
.history-page .history-artist-row:hover {
  border-color:color-mix(in srgb,var(--border) 66%,transparent);
  background:color-mix(in srgb,var(--blue) 5%,transparent);
  transform:none;
}

.history-page .history-recent-list .history-track-row {
  grid-template-columns:48px minmax(0,1fr) auto 36px;
  padding-inline:4px;
}

.history-track-cover,
.history-artist-avatar {
  width:48px;
  height:48px;
  border:0;
  border-radius:10px;
  background:var(--surface-2);
}

.history-artist-avatar { border-radius:50%; }
.history-track-rank { color:var(--muted); font-size:13px; font-weight:700; }
.history-track-title,
.history-artist-name { color:var(--black); font-size:15px; font-weight:750; line-height:1.2; }
.history-track-artist,
.history-artist-handle { margin-top:3px; font-size:12px; }
.history-track-count,
.history-listened-at { font-size:11px; font-weight:650; }

.history-page .play-track-btn {
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--black);
  opacity:0;
  transform:scale(.9);
  transition:opacity .18s ease,transform .18s ease,background .18s ease;
}

.history-page :is(.history-track-row:hover,.history-track-row:focus-within) .play-track-btn,
.history-page .play-track-btn.is-now-playing { opacity:1; transform:scale(1); }
.history-page .play-track-btn:hover { border:0; color:var(--white); background:var(--blue); }
.history-page .play-track-btn.is-now-playing { border:0; color:var(--white); background:var(--blue); }

.history-recent-panel {
  margin:0;
  padding-top:2px;
  border-top:0;
}

.history-empty {
  padding:24px 4px;
  border:0;
  border-radius:0;
  background:transparent;
}

@media (max-width:1023px) {
  .history-page { max-width:none; padding:8px 14px 130px; gap:34px; }
  .history-page > .history-page-hero {
    grid-template-columns:52px minmax(0,1fr) auto;
    gap:13px;
    padding:14px 2px 22px;
  }
  .history-page-hero-icon { width:52px; height:52px; font-size:18px; }
  .history-page-hero .artist-hub-hero-copy h1 { font-size:26px; }
  .history-page-hero .artist-hub-hero-copy p { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
  .history-total-plays { min-width:54px; text-align:right; }
  .history-total-plays span { font-size:8px; }
  .history-total-plays strong { font-size:22px; }
  .history-grid { grid-template-columns:1fr; gap:34px; }
  .history-grid > .history-panel + .history-panel { padding:0; border-left:0; }
  .history-panel-head { align-items:center; flex-direction:row; }
  .history-panel-head h2 { font-size:21px; }
  .history-tabs { width:auto; }
  .history-page .play-track-btn { opacity:1; transform:none; }
}

@media (max-width:640px) {
  .history-page > .history-page-hero { grid-template-columns:48px minmax(0,1fr) auto; align-items:center; }
  .history-page-hero-icon { width:48px; height:48px; }
  .history-page-hero .artist-hub-hero-copy h1 { font-size:23px; }
  .history-page .history-track-row,
  .history-page .history-artist-row { grid-template-columns:20px 44px minmax(0,1fr) 34px; gap:10px; padding:9px 2px; }
  .history-page .history-artist-row { grid-template-columns:20px 44px minmax(0,1fr); }
  .history-page .history-recent-list .history-track-row { grid-template-columns:44px minmax(0,1fr) 34px; gap:11px; padding-inline:2px; }
  .history-page .history-recent-list .history-track-row .play-track-btn { grid-column:3; }
  .history-track-cover,
  .history-artist-avatar { width:44px; height:44px; }
  .history-tab { padding-inline:9px; }
}

/* Native Settings sections (Profile and Super Fan intentionally retain their own layouts) */
#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) {
  gap:0;
}

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) > h2 {
  margin:2px 0 20px;
  padding:0 2px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
  font-size:28px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.035em;
}

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) > .warning-text {
  margin:-10px 2px 18px;
  color:var(--text-secondary);
}

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) > .settings-form { gap:0; }
#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) hr { display:none!important; }

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) .settings-form > .form-group,
#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) .settings-form > .preferences-card,
#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) > .danger-section {
  margin:0!important;
  padding:18px 2px!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) .settings-form > .form-actions {
  margin:0!important;
  padding:0 2px 18px;
}

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) .preferences-card > h3,
#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) .danger-section > h3 {
  margin:0 0 10px;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
}

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) .preferences-row {
  padding:14px 0;
  gap:18px;
}

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select) {
  border:1px solid transparent;
  border-radius:12px;
  background:var(--surface-2);
  box-shadow:none;
}

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select):focus {
  border-color:color-mix(in srgb,var(--blue) 48%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 10%,transparent);
}

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) :is(.preferences-note,.oauth-app-card,.oauth-app-empty) {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) .preferences-note {
  margin:10px 0;
  padding:12px 0;
  border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);
}

#settingsPage > #danger-tab .danger-section {
  border-bottom-color:color-mix(in srgb,var(--danger) 34%,var(--border))!important;
}

/* Artist Plus uses the same native section language without losing its billing controls. */
#settingsPage #billing-tab :is(.ap-card,.ap-gift-card,.ap-my-gifts-card) {
  margin:0!important;
  padding:22px 2px!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#settingsPage #billing-tab :is(.ap-card,.ap-gift-card)::before,
#settingsPage #billing-tab .ap-card-glow { display:none!important; }

#settingsPage #billing-tab .ap-card:hover,
#settingsPage #billing-tab .ap-gift-card:hover { box-shadow:none!important; }

#settingsPage #billing-tab .ap-features-grid { gap:0; }
#settingsPage #billing-tab .ap-feature {
  min-height:46px;
  padding:10px 4px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 62%,transparent);
  border-radius:0;
  background:transparent;
}

#settingsPage #billing-tab .ap-feature:hover { border-color:color-mix(in srgb,var(--border) 62%,transparent); background:transparent; }
#settingsPage #billing-tab :is(.ap-plan-btn,.ap-gift-plan-btn) { border:0; border-radius:14px; background:var(--surface-2); box-shadow:none; }
#settingsPage #billing-tab :is(.ap-plan-btn,.ap-gift-plan-btn):hover { transform:none; box-shadow:none; }
#settingsPage #billing-tab :is(.ap-plan-btn.is-selected,.ap-gift-plan-btn.is-active) { box-shadow:inset 0 0 0 2px var(--blue); }

#settingsPage #billing-tab :is(.ap-native-disclosure,.ap-invoices) {
  border-width:1px 0 0;
  border-color:color-mix(in srgb,var(--border) 72%,transparent);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#settingsPage #billing-tab :is(.ap-billing-disclosure,.ap-invoice-empty) {
  border:0;
  border-radius:12px;
  background:var(--surface-2);
  box-shadow:none;
}

/* One restrained, flat visual system across Artist Hub (Super Fans keeps its bespoke experience). */
#artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) .hub-content { gap:0; }

#artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) :is(.hub-section-intro,.artist-analytics-header) {
  margin:0 0 20px;
  padding:2px 2px 18px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}

#artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) .hub-section-intro h2,
#artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) > .hub-content > h2,
#artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) > .hub-content > .content-header h2,
#artistHubReleasesPage .artist-analytics-header h2 {
  font-size:28px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.035em;
}

#artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) > .hub-content > h2 {
  margin:0;
  padding:2px 2px 18px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}

#artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) > .hub-content > .content-header {
  min-height:58px;
  padding:0 2px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}

#artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) :is(.settings-section,.promotion-kpi-card) {
  margin:0!important;
  padding:20px 2px!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#artistHubReleasesPage .lyrics-quick-launch {
  margin:0 0 24px;
  padding:22px 2px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#artistHubReleasesPage :is(.lyrics-marketplace-topbar,.lyrics-marketplace-section,.cherry-video-hub-section) {
  border-color:color-mix(in srgb,var(--border) 72%,transparent);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#artistHubReleasesPage .lyrics-marketplace-card {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#artistHubReleasesPage .lyrics-marketplace-preview { border-radius:16px; }
#artistHubReleasesPage .lyrics-marketplace-card-body { padding-inline:2px; }

#artistHubReleasesPage .artist-stats-grid { gap:0; border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent); }
#artistHubReleasesPage .artist-stat-card,
#artistHubReleasesPage .artist-stat-card:is(:hover,.is-highlight) {
  padding:18px 14px;
  border:0;
  border-right:1px solid color-mix(in srgb,var(--border) 66%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--border) 66%,transparent);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}

#artistHubReleasesPage :is(.artist-analytics-chart-card,.artist-audience-block,.artist-audience-entities,.artist-audience-entity-card) {
  padding:20px 2px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#artistHubReleasesPage :is(.artist-chart-kpi-item,.artist-audience-list li,.artist-audience-entity-item) {
  padding:11px 2px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 62%,transparent);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#artistHubReleasesPage .artist-smoothed-chart {
  border:0;
  border-radius:0;
  background:transparent;
}

#artistHubReleasesPage .artist-analytics-tip {
  border:0;
  border-left:3px solid var(--blue);
  border-radius:0;
  background:var(--surface-2);
  box-shadow:none;
}

#artistHubReleasesPage .cherry-support-launch {
  border:0;
  border-radius:16px;
  background:var(--surface-2);
  box-shadow:none;
}

@media (max-width:1023px) {
  #settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) > h2 {
    margin-top:8px;
    padding-inline:2px;
    font-size:24px;
  }

  #settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) .settings-form > :is(.form-group,.preferences-card),
  #settingsPage > .settings-tab-content:not(#profile-tab):not(#super-fan-tab) > .danger-section { padding-inline:2px!important; }

  #artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) :is(.hub-section-intro,.artist-analytics-header) { padding-inline:2px; }
  #artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) .hub-section-intro h2,
  #artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) > .hub-content > h2,
  #artistHubReleasesPage > .hub-tab-panel:not([data-hub-panel="super-fans"]) > .hub-content > .content-header h2,
  #artistHubReleasesPage .artist-analytics-header h2 { font-size:24px; }
  #artistHubReleasesPage .artist-stat-card { border-right:0; }
}

/* Artist Hub release toolbar */
#artistHubReleasesPage .artist-hub-release-toolbar {
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 26px;
}

#artistHubReleasesPage .artist-hub-release-toolbar .hub-search-row {
  flex:1 1 auto;
  min-width:0;
}

#artistHubReleasesPage .artist-hub-release-toolbar .hub-tab-search {
  width:100%;
  max-width:none;
}

#artistHubReleasesPage .artist-hub-release-toolbar .content-header {
  min-height:0;
  flex:0 0 auto;
  margin:0;
  padding:0;
  border:0;
}

#artistHubReleasesPage .artist-hub-release-toolbar .artist-hub-release-actions { display:flex; gap:10px; }

/* Native, viewport-measured Messages shell */
body.messages-page-open { overflow:hidden; }

body.messages-page-open .main-content {
  height:var(--messages-viewport-height,100dvh);
  min-height:0;
  position:relative;
  padding:0;
  overflow:hidden;
  transform:translateY(var(--messages-viewport-offset-top,0px));
}

body.messages-page-open .messages-page-container {
  position:absolute;
  top:var(--messages-top-obstruction,var(--desktop-top-nav-height,72px));
  right:0;
  bottom:var(--messages-bottom-obstruction,var(--desktop-player-height,0px));
  left:0;
  width:100%;
  max-width:none;
  height:auto!important;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
}

body.messages-page-open .messages-page-container > .mbr { display:none; }

.messages-page {
  display:block!important;
  width:100%;
  height:100%!important;
  max-height:none!important;
  min-height:0!important;
  padding:18px 24px 0;
  overflow:hidden;
  background:var(--white);
}

.messages-shell {
  width:100%;
  max-width:1360px;
  height:100%!important;
  min-height:0!important;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  overflow:hidden;
  border-top:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}

.messages-sidebar,
.messages-thread { min-height:0; background:transparent; }

.messages-sidebar { border-right:1px solid color-mix(in srgb,var(--border) 76%,transparent); }
.messages-sidebar-header,
.messages-thread-header { min-height:72px; padding:18px 18px 14px; border-color:color-mix(in srgb,var(--border) 76%,transparent); }

.messages-sidebar-header h1 {
  font-size:28px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
}

.messages-sidebar-header h1 i {
  width:34px;
  height:34px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  color:var(--blue);
  background:color-mix(in srgb,var(--blue) 10%,var(--surface-2));
  font-size:13px;
}

.messages-thread-user { font-size:17px; font-weight:800; }
.messages-conversation-list { flex:1; min-height:0; }

.messages-conversation-item {
  min-height:68px;
  padding:10px 14px;
  border-bottom-color:color-mix(in srgb,var(--border) 66%,transparent);
}

.messages-conversation-item:hover { background:color-mix(in srgb,var(--blue) 5%,transparent); }
.messages-conversation-item.is-active { box-shadow:inset 3px 0 0 var(--blue); background:var(--surface-2); }
.messages-conversation-avatar { width:46px; height:46px; border:0; background:var(--surface-2); }

.messages-thread { display:flex; flex-direction:column; overflow:hidden; }
.messages-thread-body {
  flex:1;
  min-height:0;
  gap:7px;
  padding:18px clamp(16px,3vw,38px) 14px!important;
  overflow:auto;
  overscroll-behavior:contain;
  background:transparent;
}

.messages-message { width:auto; max-width:min(76%,720px); gap:9px; }
.messages-message.is-incoming { align-self:flex-start; }
.messages-message.is-outgoing { align-self:flex-end; flex-direction:row-reverse; }
.messages-message.is-outgoing .messages-message-avatar { display:none; }
.messages-message-avatar { width:30px; height:30px; margin-top:auto; }
.messages-message-meta { margin:0 0 3px; font-size:11px; }
.messages-message.is-outgoing .messages-message-meta { text-align:right; }
.messages-message-bubble { gap:3px; }

.messages-message .messages-message-text,
.messages-message.is-outgoing .messages-message-text {
  display:inline-block;
  width:fit-content;
  max-width:100%;
  margin:0;
  padding:10px 14px;
  border-radius:18px;
  font-size:14px;
  line-height:1.42;
  box-shadow:none;
}

.messages-message.is-incoming .messages-message-text {
  border-bottom-left-radius:6px;
  background:var(--surface-2);
  color:var(--black);
}

.messages-message.is-outgoing .messages-message-text {
  margin-left:auto;
  border-bottom-right-radius:6px;
  background:var(--blue);
  color:#fff;
}

.messages-message.is-grouped { margin-top:-3px; }
.messages-entity-card { border:0; border-radius:14px; background:var(--surface-2); box-shadow:none; }
.messages-entity-card:hover { transform:none; border:0; box-shadow:none; }

.messages-bottom-rail {
  position:static!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  flex:0 0 auto;
  padding:0!important;
  border-top:1px solid color-mix(in srgb,var(--border) 76%,transparent);
  background:var(--white)!important;
}

.messages-bottom-rail-inner {
  display:flex!important;
  flex-direction:column;
  align-items:stretch!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  overflow:visible!important;
}

.messages-bottom-rail-inner > * {
  grid-column:auto!important;
  width:auto;
  height:auto!important;
  min-height:0!important;
}

.messages-bottom-rail-inner .messages-reply-preview {
  position:static!important;
  margin:0 14px!important;
  padding:9px 2px!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--border) 66%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.messages-bottom-rail-inner .messages-compose {
  position:static!important;
  inset:auto!important;
  width:auto!important;
  margin:0!important;
  padding:10px 14px 14px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1;
  transform:none;
}

.messages-compose-inner {
  min-height:50px;
  padding:7px 7px 7px 16px;
  border:1px solid transparent;
  border-radius:16px;
  background:var(--surface-2);
  box-shadow:none;
}

.messages-compose-inner:focus-within { border-color:color-mix(in srgb,var(--blue) 42%,transparent); }
.messages-compose textarea { min-height:28px; max-height:min(140px,24dvh); padding:5px 0; }
.messages-send-btn { width:36px; height:36px; }

@media (max-width:980px) {
  body.messages-page-open .messages-page-container {
    top:var(--messages-top-obstruction,calc(var(--mobile-top-nav-height,62px) + env(safe-area-inset-top,0px)));
    bottom:var(--messages-bottom-obstruction,calc(var(--mobile-player-height,0px) + var(--mobile-bottom-nav-height,76px) + env(safe-area-inset-bottom,0px)));
  }

  .messages-page { padding:0; }
  .messages-shell { display:block; position:relative; border-top:0; }

  .messages-page.is-mobile-messages .messages-sidebar,
  .messages-page.is-mobile-messages .messages-thread {
    position:absolute;
    inset:0!important;
    bottom:0!important;
    width:100%;
    height:100%!important;
  }

  .messages-page.is-mobile-messages .messages-sidebar { display:flex; border:0; }
  .messages-page.is-mobile-messages .messages-sidebar-header { display:none; }
  .messages-page.is-mobile-messages .messages-conversation-list { padding-top:4px; }
  .messages-page.is-mobile-messages .messages-conversation-item { min-height:72px; padding:11px 14px; }
  .messages-page.is-mobile-messages .messages-conversation-avatar { width:50px; height:50px; }
  .messages-page.is-mobile-messages .messages-thread-header { display:none; }

  .messages-page.is-mobile-messages .messages-thread-body {
    gap:5px;
    padding:12px 10px 10px!important;
  }

  .messages-page.is-mobile-messages .messages-message { max-width:86%; }
  .messages-page.is-mobile-messages .messages-message-text { font-size:14px; }
  .messages-page.is-mobile-messages .messages-thread-intro { padding:10px 14px 16px; }

  .messages-bottom-rail { background:var(--white)!important; }
  .messages-bottom-rail-inner .messages-compose { margin:0!important; padding:8px 10px 10px!important; }
  .messages-bottom-rail-inner .messages-reply-preview { margin:0 10px!important; }
  .messages-compose-inner { border-radius:15px; }
}

/* Cherry Select and Cherry Support share the same native conversation language. */
.main-content:has(.cherry-select-page-container) {
  height:100dvh;
  min-height:0;
  position:relative;
  padding:0;
  overflow:hidden;
}

.cherry-select-page-container {
  position:absolute;
  top:var(--desktop-top-nav-height,72px);
  right:0;
  bottom:var(--desktop-player-height,0px);
  left:0;
  width:100%;
  max-width:none;
  height:auto!important;
  min-height:0;
  padding:0;
  overflow:hidden;
}

.cherry-select-page-container > .mbr { display:none; }
#cherrySelectPage { width:100%; height:100%; max-height:none; background:var(--white); }
#cherrySelectPage.has-dynamic-theme { background:var(--white); }

.cherry-select-shell { max-width:920px; padding:0 20px; }
.cherry-select-header { min-height:74px; padding:14px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent); }
.cherry-select-header-icon,
.cherry-select-welcome-icon {
  border-radius:50%;
  color:var(--blue);
  background:color-mix(in srgb,var(--blue) 10%,var(--surface-2));
  box-shadow:none;
}

.cherry-select-header-icon { width:44px; height:44px; font-size:17px; }
.cherry-select-header-text h1 { font-size:20px; font-weight:800; letter-spacing:-.03em; }
.cherry-select-header-actions button { border:0; background:var(--surface-2); }
.cherry-select-toggle-btn { min-width:92px; }
.cherry-select-chat { gap:7px; padding:16px 2px; }
.cherry-select-welcome { padding:34px 16px; }
.cherry-select-welcome-icon { width:68px; height:68px; font-size:30px; }
.cherry-select-welcome h2 { font-size:25px; font-weight:800; letter-spacing:-.03em; }
.cherry-select-suggestion { border:0; background:var(--surface-2); }

.cs-msg { max-width:78%; gap:9px; }
.cs-msg-user { align-self:flex-end; flex-direction:row-reverse; }
.cs-msg-dj { align-self:flex-start; }
.cs-msg-user .cs-msg-avatar { display:none; }
.cs-msg-avatar { width:30px; height:30px; margin-top:auto; }
.cs-msg-meta { margin-bottom:3px; font-size:11px; }
.cs-msg-user .cs-msg-meta { text-align:right; }
.cs-msg-text,
.cs-msg-user .cs-msg-text {
  display:inline-block;
  width:fit-content;
  max-width:100%;
  margin:0;
  padding:10px 14px;
  border-radius:18px;
  font-size:14px;
  line-height:1.42;
}

.cs-msg-dj .cs-msg-text { border-bottom-left-radius:6px; background:var(--surface-2); }
.cs-msg-user .cs-msg-text { margin-left:auto; border-bottom-right-radius:6px; background:var(--blue); color:#fff; }
.cs-track-card { padding:10px 2px; border:0; border-bottom:1px solid color-mix(in srgb,var(--border) 66%,transparent); border-radius:0; background:transparent; }
.cs-track-card:hover { border-color:color-mix(in srgb,var(--border) 66%,transparent); }

.cherry-select-compose,
.cherry-support-window .cherry-select-compose {
  position:static!important;
  inset:auto!important;
  width:auto!important;
  flex:0 0 auto;
  margin:0!important;
  padding:10px 0 14px!important;
  border-top:1px solid color-mix(in srgb,var(--border) 76%,transparent)!important;
  background:transparent!important;
  box-shadow:none!important;
}

.cherry-select-compose-inner {
  min-height:50px;
  padding:7px 7px 7px 16px;
  border:1px solid transparent;
  border-radius:16px;
  background:var(--surface-2);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.cherry-select-compose-inner:focus-within { border-color:color-mix(in srgb,var(--blue) 42%,transparent); }
.cherry-select-compose-inner textarea { min-height:28px; height:auto; max-height:min(140px,24dvh); padding:5px 0; }

.cherry-support-window {
  width:min(820px,calc(100vw - 32px));
  height:min(760px,calc(100dvh - 32px));
  border:0;
  border-radius:20px;
  background:var(--white);
  box-shadow:0 24px 80px rgba(0,0,0,.26);
}

.cherry-support-window .cherry-select-shell { padding:0 18px; }
.cherry-support-action { border:0; border-left:3px solid var(--blue); border-radius:0; background:var(--surface-2); box-shadow:none; }

@media (max-width:1023px) {
  #artistHubReleasesPage .artist-hub-release-toolbar { align-items:stretch; flex-direction:column; gap:12px; margin-bottom:22px; }
  #artistHubReleasesPage .artist-hub-release-toolbar .content-header { display:flex!important; }
  #artistHubReleasesPage .artist-hub-release-toolbar .artist-hub-release-actions,
  #artistHubReleasesPage .artist-hub-release-toolbar .artist-hub-release-actions .btn { width:100%; }

  .main-content:has(.cherry-select-page-container) {
    padding:0;
  }

  .cherry-select-page-container {
    top:calc(var(--mobile-top-nav-height,62px) + env(safe-area-inset-top,0px));
    bottom:calc(var(--mobile-player-height,0px) + var(--mobile-bottom-nav-height,76px) + env(safe-area-inset-bottom,0px));
  }

  .cherry-select-shell { padding:0 10px; }
  .cherry-select-header { min-height:62px; padding:9px 2px; }
  .cherry-select-header-icon { width:40px; height:40px; }
  .cherry-select-header-text h1 { font-size:18px; }
  .cherry-select-toggle-btn { min-width:0; width:auto!important; padding-inline:10px; }
  .cherry-select-chat { padding:12px 2px 10px; }
  .cs-msg { max-width:86%; }
  .cherry-select-compose { padding:8px 0 10px!important; }

  .cherry-support-popup { padding:0; align-items:stretch; }
  .cherry-support-window {
    width:100vw;
    height:100dvh;
    max-height:none;
    border-radius:0;
  }
  .cherry-support-window .cherry-select-shell { padding:0 10px; }
  .cherry-support-window .cherry-select-chat { padding-bottom:10px; }
  .cherry-support-window .cherry-select-compose { padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important; }
}
/* soundvia for Artists workspace */
.artist-studio {
    --as-bg: var(--white);
    --as-panel: var(--surface-1);
    --as-panel-subtle: var(--surface-2);
    --as-border: var(--border);
    --as-text: var(--black);
    --as-muted: var(--text-secondary);
    --as-hover: color-mix(in srgb, var(--blue) 8%, var(--surface-2));
    --as-accent: var(--blue);
    /* Legacy artist tools use these names; keep them tied to Soundvia's palette. */
    --bg: var(--white);
    --text-primary: var(--black);
    --border-color: var(--border);
    --hover-bg: var(--surface-2);
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--as-text);
    background: var(--as-bg);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.artist-studio *,
.artist-studio *::before,
.artist-studio *::after { box-sizing: border-box; }
:where(.artist-studio) :where(button, input, textarea, select) { font: inherit; }
.artist-studio button,
.artist-studio a { -webkit-tap-highlight-color: transparent; }
.artist-studio a { color: inherit; text-decoration: none; }
.artist-studio img { display: block; max-width: 100%; }

.artist-studio-shell {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns .46s cubic-bezier(.32,.72,0,1);
    will-change: grid-template-columns;
}
.artist-studio-shell.is-sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr); }

.artist-studio-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: 272px;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    padding: 0 12px 12px;
    border-right: 1px solid var(--as-border);
    background: var(--as-panel);
    transition: width .46s cubic-bezier(.32,.72,0,1), transform .42s cubic-bezier(.32,.72,0,1);
}
.artist-studio-shell.is-sidebar-collapsed .artist-studio-sidebar { width: 76px; }
.artist-studio-brand {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 0 8px;
    gap: 8px;
    border-bottom: 1px solid var(--as-border);
    white-space: nowrap;
}
.artist-studio-brand-link { display: flex; align-items: center; min-width: 0; }
.artist-studio-brand-link img { width: 104px; max-height: 32px; object-fit: contain; }
.artist-studio-brand > span { font-size: 14px; font-weight: 700; color: var(--as-muted); }
.artist-studio-mobile-close { display: none; }
.artist-studio-shell.is-sidebar-collapsed .artist-studio-brand > span { display: none; }
.artist-studio-shell.is-sidebar-collapsed .artist-studio-brand-link img { width: 42px; height: 42px; object-fit: cover; object-position: left; }

.artist-studio-artist-switcher { position: relative; margin: 14px 0 10px; }
.artist-studio-artist-switcher > button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 16px;
    align-items: center;
    width: 100%;
    min-height: 58px;
    padding: 8px;
    gap: 10px;
    border: 1px solid var(--as-border);
    border-radius: 10px;
    color: var(--as-text);
    background: var(--as-panel);
    text-align: left;
    cursor: pointer;
}
.artist-studio-artist-switcher > button:hover { background: var(--as-hover); }
.artist-studio-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    overflow: hidden;
    border-radius: 50%;
    color: var(--as-muted);
    background: var(--as-panel-subtle);
}
.artist-studio-avatar img { width: 100%; height: 100%; object-fit: cover; }
.artist-studio-switcher-copy { display: flex; flex-direction: column; min-width: 0; }
.artist-studio-switcher-copy strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio-switcher-copy small { margin-top: 2px; font-size: 12px; color: var(--as-muted); }
.artist-studio-switcher-chevron { font-size: 11px; color: var(--as-muted); }
.artist-studio-shell.is-sidebar-collapsed .artist-studio-artist-switcher > button {
    display: flex; justify-content: center; min-height: 52px; padding: 5px; border-color: transparent;
}
.artist-studio-shell.is-sidebar-collapsed .artist-studio-switcher-copy,
.artist-studio-shell.is-sidebar-collapsed .artist-studio-switcher-chevron { display: none; }

.artist-studio-artist-menu,
.artist-studio-user-menu,
.artist-studio-search-results {
    position: absolute;
    z-index: 100;
    padding: 7px;
    border: 1px solid var(--as-border);
    border-radius: 10px;
    background: var(--as-panel);
    box-shadow: 0 12px 34px rgba(24, 32, 48, .14);
}
.artist-studio-artist-menu {
    top: calc(100% + 6px);
    left: 0;
    width: 290px;
    max-height: min(420px, 70vh);
    overflow-y: auto;
}
.artist-studio-artist-menu a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    min-height: 52px;
    padding: 6px 8px;
    gap: 9px;
    border-radius: 7px;
}
.artist-studio-artist-menu a:hover,
.artist-studio-artist-menu a.is-active { background: var(--as-hover); }
.artist-studio-artist-menu .artist-studio-avatar { width: 38px; height: 38px; flex-basis: 38px; }
.artist-studio-artist-menu a > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.artist-studio-artist-menu strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio-artist-menu small { font-size: 12px; color: var(--as-muted); }

.artist-studio-nav { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 3px; overflow-y: auto; }
.artist-studio-nav a,
.artist-studio-collapse {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    gap: 13px;
    border: 0;
    border-radius: 8px;
    color: var(--as-muted);
    background: transparent;
    font-size: 14px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: padding .46s cubic-bezier(.32,.72,0,1), color .2s ease, background .2s ease;
}
.artist-studio-nav a i,
.artist-studio-collapse i { width: 20px; flex: 0 0 20px; font-size: 17px; text-align: center; }
.artist-studio-nav a:hover,
.artist-studio-collapse:hover { color: var(--as-text); background: var(--as-hover); }
.artist-studio-nav a.artist-studio-upgrade-link {
    margin-top: 5px;
    color: var(--as-accent);
    background: color-mix(in srgb, var(--as-accent) 10%, transparent);
}
.artist-studio-nav a.artist-studio-upgrade-link:hover {
    color: var(--as-accent);
    background: color-mix(in srgb, var(--as-accent) 16%, transparent);
}
.artist-studio-nav a.is-active { color: var(--as-text); background: var(--as-panel-subtle); }
.artist-studio-nav a.is-active::before {
    position: absolute;
    left: 0;
    width: 3px;
    height: 24px;
    border-radius: 0 3px 3px 0;
    background: var(--as-accent);
    content: "";
}
.artist-studio-nav a { position: relative; }
.artist-studio-collapse { margin-top: 8px; border-top: 1px solid var(--as-border); border-radius: 0; }
.artist-studio-shell.is-sidebar-collapsed .artist-studio-nav a,
.artist-studio-shell.is-sidebar-collapsed .artist-studio-collapse { justify-content: center; padding: 0; }
.artist-studio-shell.is-sidebar-collapsed .artist-studio-nav span,
.artist-studio-shell.is-sidebar-collapsed .artist-studio-collapse span { display: none; }
.artist-studio-shell.is-sidebar-collapsed .artist-studio-collapse i { transform: rotate(180deg); }

.artist-studio-main { grid-column: 2; min-width: 0; }
.artist-studio-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 0 24px;
    gap: 18px;
    border-bottom: 1px solid var(--as-border);
    background: color-mix(in srgb, var(--as-bg) 92%, transparent);
    backdrop-filter: blur(12px);
}
.artist-studio-mobile-menu { display: none; }
.artist-studio-search { position: relative; width: min(420px, 44vw); margin: 0 auto; }
.artist-studio-search > i { position: absolute; top: 50%; left: 15px; z-index: 1; color: var(--as-muted); transform: translateY(-50%); }
.artist-studio-search input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 43px;
    border: 1px solid var(--as-border);
    border-radius: 22px;
    outline: 0;
    color: var(--as-text);
    background: var(--as-panel);
}
.artist-studio-search input:focus { border-color: var(--as-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-accent) 14%, transparent); }
.artist-studio-search-results { top: calc(100% + 6px); left: 0; width: 100%; }
.artist-studio-search-results a { display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; padding: 7px; gap: 8px; border-radius: 7px; }
.artist-studio-search-results a:hover { background: var(--as-hover); }
.artist-studio-search-results > div { padding: 12px; color: var(--as-muted); }
.artist-studio-top-actions { position: relative; display: flex; align-items: center; gap: 9px; }
.artist-studio-icon-button,
.artist-studio-user-button,
.artist-studio-mobile-menu,
.artist-studio-mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--as-text);
    background: transparent;
    cursor: pointer;
}
.artist-studio-icon-button:hover,
.artist-studio-user-button:hover { background: var(--as-hover); }
.artist-studio-user-button { overflow: hidden; color: #fff; background: var(--as-accent); font-weight: 800; }
.artist-studio-user-button img { width: 100%; height: 100%; object-fit: cover; }
.artist-studio-user-menu { top: 54px; right: 0; width: 260px; }
.artist-studio-user-identity { display: flex; flex-direction: column; padding: 11px 12px 13px; border-bottom: 1px solid var(--as-border); }
.artist-studio-user-identity small { margin-top: 3px; color: var(--as-muted); }
.artist-studio-user-menu a,
.artist-studio-user-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    gap: 12px;
    border: 0;
    border-radius: 7px;
    color: var(--as-text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.artist-studio-user-menu a:hover,
.artist-studio-user-menu button:hover { background: var(--as-hover); }
.artist-studio-user-menu i { width: 18px; color: var(--as-muted); text-align: center; }

.artist-studio-content { width: 100%; max-width: 1540px; margin: 0 auto; padding: 28px 30px 60px; }
.artist-studio-page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 20px; }
.artist-studio-page-head h1 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.035em; }
.artist-studio-page-head p { max-width: 720px; margin: 8px 0 0; color: var(--as-muted); line-height: 1.55; }
.artist-studio-range-select { min-height: 42px; padding: 0 12px; border: 1px solid var(--as-border); border-radius: 8px; color: var(--as-text); background: var(--as-panel); }
.artist-studio-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    gap: 7px;
    border: 1px solid var(--as-border);
    border-radius: 999px;
    color: var(--as-text);
    background: var(--as-panel);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.artist-studio-button:hover { border-color: color-mix(in srgb, var(--as-accent) 34%, var(--as-border)); background: var(--as-hover); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,32,79,.12); }
.artist-studio-button.is-primary { border-color: var(--as-accent); color: #fff; background: var(--as-accent); }
.artist-studio-button.is-primary:hover { background: color-mix(in srgb, var(--as-accent) 88%, var(--as-text)); }
.artist-studio-button.is-small { min-height: 36px; padding: 0 13px; font-size: 12px; }
.artist-studio-button:disabled { opacity: .55; cursor: wait; }
.artist-studio :is(
    .btn,
    .artist-studio-button,
    .follow-btn,
    .cherry-video-mode-btn,
    .artist-chart-switch
) {
    border-radius: 999px;
}

.artist-studio-hero {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid var(--as-border);
    border-radius: 18px;
    background: #17191d var(--artist-banner) center/cover no-repeat;
}
.artist-studio-hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,10,12,.92), rgba(9,10,12,.1) 68%); }
.artist-studio-hero-content { position: absolute; inset: auto 28px 26px; display: flex; align-items: flex-end; gap: 18px; color: #fff; }
.artist-studio-hero-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.88);
    border-radius: 50%;
    background: #2a2d34;
    font-size: 32px;
}
.artist-studio-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.artist-studio-hero-content h1 { margin: 0; font-size: clamp(42px, 6vw, 78px); font-weight: 800; line-height: .98; letter-spacing: -.055em; }
.artist-studio-hero-content h1 .sv-verification-badge { margin-left: .06em; font-size: .3em; vertical-align: .32em; }
.artist-studio-hero-content p { margin: 10px 0 0; color: rgba(255,255,255,.82); }
.artist-studio-hero-actions { display: flex; margin-left: auto; gap: 9px; }
.artist-studio-hero .artist-studio-button:not(.is-primary) { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(15,16,18,.64); }
.artist-studio-hero .artist-studio-profile-action {
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    color: #2e3a57;
    background: #f7f8fc;
    border-color: rgba(31,42,71,.16);
}
.artist-studio-hero .artist-studio-profile-action:hover {
    color: #2e3a57;
    background: #eef1f8;
    border-color: rgba(31,42,71,.28);
}
.artist-studio-live-listening { display: flex; align-items: center; gap: 9px; }
.artist-studio-listening-bars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    gap: 2px;
}
.artist-studio-listening-bars i {
    display: block;
    width: 3px;
    height: 13px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    animation: artistStudioListeningBar .92s ease-in-out infinite;
}
.artist-studio-listening-bars i:nth-child(2) { animation-delay: -.62s; }
.artist-studio-listening-bars i:nth-child(3) { animation-delay: -.31s; }
@keyframes artistStudioListeningBar {
    0%,100% { transform: scaleY(.3); }
    50% { transform: scaleY(1); }
}

.artist-studio-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 22px 0; border: 1px solid var(--as-border); border-radius: 12px; background: var(--as-panel); box-shadow: 0 3px 12px rgba(12,12,14,.04); }
.artist-studio-metrics article { min-width: 0; padding: 19px 22px; border-right: 1px solid var(--as-border); }
.artist-studio-metrics article:last-child { border-right: 0; }
.artist-studio-metrics span,
.artist-studio-metrics small { display: block; color: var(--as-muted); font-size: 12px; }
.artist-studio-metrics strong { display: block; margin: 6px 0 5px; font-size: 30px; line-height: 1; letter-spacing: -.04em; }

.artist-studio-home-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(320px,.8fr); gap: 20px; }
.artist-studio-section {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-panel);
    box-shadow: 0 3px 12px rgba(12,12,14,.04);
}
.artist-studio-section > h2,
.artist-studio-section-head h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.artist-studio-section > h2 + :is(.artist-studio-event-list,.artist-studio-team-list) { margin-top: 12px; }
.artist-studio-section-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 18px; }
.artist-studio-section-head p { margin: 5px 0 0; color: var(--as-muted); font-size: 13px; }
.artist-studio-section-head > a { color: var(--as-accent); font-size: 13px; font-weight: 750; }
.artist-studio-subhead { margin: 18px 0 10px; color: var(--as-muted); font-size: 12px; font-weight: 750; }
.artist-studio-section-head + .artist-studio-subhead { margin-top: 0; }

.artist-studio-campaign-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
.artist-studio-campaign-groups { display: grid; gap: 18px; }
.artist-studio-campaign-group { padding-bottom: 4px; }
.artist-studio-campaign-list { display: grid; }
.artist-studio-campaign-row {
    display: grid;
    grid-template-columns: 64px minmax(0,1fr) auto;
    align-items: center;
    min-height: 92px;
    padding: 14px 2px;
    gap: 16px;
    border-top: 1px solid var(--as-border);
}
.artist-studio-campaign-row:first-child { border-top: 0; }
.artist-studio-campaign-row > img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--as-panel-subtle); }
.artist-studio-campaign-row h3 { margin: 0; font-size: 16px; letter-spacing: -.015em; }
.artist-studio-campaign-row p { display: flex; flex-wrap: wrap; margin: 7px 0 0; gap: 6px 15px; color: var(--as-muted); font-size: 12px; }
.artist-studio-campaign-row p span { display: inline-flex; align-items: center; gap: 6px; }
.artist-studio-campaign-actions { display: flex; align-items: center; justify-content: flex-end; }
.artist-studio .artist-studio-campaign-select { width: min(1120px,100%); margin: 0 auto; }
.artist-studio .artist-studio-campaign-select-content { display: grid; gap: 14px; }
.artist-studio .artist-studio-promotion-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.artist-studio .artist-studio-promotion-toolbar > span { color: var(--as-muted); font-size: 13px; font-weight: 700; }
.artist-studio .artist-studio-promotion-selection {
    max-height: none;
    overflow: visible;
    gap: 0;
    padding: 4px 18px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-panel);
}
.artist-studio .artist-studio-promotion-selection .promotion-select-row {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) auto;
    min-height: 82px;
    padding: 12px 2px;
    gap: 14px;
    border: 0;
    border-bottom: 1px solid var(--as-border);
    border-radius: 0;
    color: var(--as-text);
    background: transparent;
    box-shadow: none;
}
.artist-studio .artist-studio-promotion-selection .promotion-select-row:last-child { border-bottom: 0; }
.artist-studio .artist-studio-promotion-selection .promotion-select-row.is-unavailable { opacity: .58; cursor: not-allowed; }
.artist-studio .artist-studio-promotion-selection .promotion-select-row.is-unavailable:hover { background: transparent; }
.artist-studio .artist-studio-promotion-selection .track-item-cover,
.artist-studio .artist-studio-promotion-selection .track-item-cover img { width: 58px; height: 58px; border-radius: 7px; object-fit: cover; }
.artist-studio .artist-studio-promotion-selection .track-item-info h3 { margin: 0; font-size: 15px; }
.artist-studio .artist-studio-promotion-selection .track-meta { display: flex; flex-wrap: wrap; margin-top: 6px; gap: 5px 12px; color: var(--as-muted); font-size: 12px; }
.artist-studio .artist-studio-promotion-selection .track-item-actions { display: flex; align-items: center; }
.artist-studio .artist-studio-promotion-selection .promotion-select-checkbox { width: 20px; height: 20px; accent-color: var(--as-accent); }
.artist-studio .artist-studio-promotion-selection .promotion-select-checkbox:disabled { opacity: .45; }
.artist-studio .artist-studio-campaign-select .upload-actions { display: flex; justify-content: flex-end; }

.artist-studio .artist-studio-campaign-detail {
    width: 100%;
}
.artist-studio .artist-studio-campaign-back {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 0 0 18px;
    padding: 0 12px;
    gap: 8px;
    border-radius: 999px;
    color: var(--as-muted);
    background: var(--as-panel-subtle);
    font-size: 13px;
    font-weight: 700;
}
.artist-studio .artist-studio-campaign-back:hover {
    color: var(--as-text);
    background: var(--as-hover);
}
.artist-studio .artist-studio-campaign-head {
    margin-bottom: 0;
}
.artist-studio .artist-studio-campaign-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    margin-bottom: 18px;
    gap: 18px;
}
.artist-studio .artist-studio-campaign-sources > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 8px 2px;
    gap: 16px;
    border-top: 1px solid var(--as-border);
}
.artist-studio .artist-studio-campaign-sources > div:first-child {
    border-top: 0;
}
.artist-studio .artist-studio-campaign-sources span:first-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.artist-studio .artist-studio-campaign-sources small,
.artist-studio .artist-studio-campaign-track-list small {
    margin-top: 3px;
    color: var(--as-muted);
    font-size: 11px;
}
.artist-studio .artist-studio-campaign-source-share {
    color: var(--as-muted);
    font-size: 13px;
    font-weight: 750;
}
.artist-studio .artist-studio-campaign-insight > .artist-studio-section-head > i {
    color: var(--as-accent);
}
.artist-studio .artist-studio-campaign-insight > strong {
    display: block;
    font-size: 17px;
}
.artist-studio .artist-studio-campaign-insight > p {
    margin: 8px 0 0;
    color: var(--as-muted);
    font-size: 13px;
    line-height: 1.55;
}
.artist-studio .artist-studio-campaign-insight ul {
    display: grid;
    margin: 18px 0 0;
    padding: 0;
    gap: 10px;
    list-style: none;
}
.artist-studio .artist-studio-campaign-insight li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.45;
}
.artist-studio .artist-studio-campaign-insight li i {
    margin-top: 4px;
    color: var(--as-accent);
    font-size: 10px;
}
.artist-studio .artist-studio-campaign-track-list {
    display: grid;
}
.artist-studio .artist-studio-campaign-track-list article {
    display: grid;
    grid-template-columns: 48px minmax(180px,1fr) minmax(90px,.35fr) minmax(90px,.35fr);
    align-items: center;
    min-height: 70px;
    padding: 10px 4px;
    gap: 14px;
    border-top: 1px solid var(--as-border);
}
.artist-studio .artist-studio-campaign-track-list article:first-child {
    border-top: 0;
}
.artist-studio .artist-studio-campaign-track-list img {
    width: 48px;
    height: 48px;
    border-radius: 5px;
    object-fit: cover;
    background: var(--as-panel-subtle);
}
.artist-studio .artist-studio-campaign-track-list article > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.artist-studio .artist-studio-campaign-track-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.artist-studio-release-strip { display: grid; grid-template-columns: repeat(5, minmax(110px,1fr)); gap: 14px; }
.artist-studio-release-strip a { min-width: 0; }
.artist-studio-release-strip img { width: 100%; aspect-ratio: 1; border-radius: 5px; object-fit: cover; background: var(--as-panel-subtle); }
.artist-studio-release-strip strong,
.artist-studio-release-strip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio-release-strip strong { margin-top: 9px; font-size: 13px; }
.artist-studio-release-strip span { margin-top: 3px; color: var(--as-muted); font-size: 11px; }
.artist-studio-empty { padding: 24px 4px; color: var(--as-muted); line-height: 1.5; text-align: center; }
.artist-studio-checklist-head,
.artist-studio-event-summary { display: flex; align-items: center; gap: 12px; }
.artist-studio-checklist-head img { width: 56px; height: 56px; border-radius: 5px; object-fit: cover; }
.artist-studio-checklist-head span,
.artist-studio-event-summary small { display: block; margin-top: 4px; color: var(--as-muted); font-size: 12px; }
.artist-studio-checklist { display: grid; margin: 17px 0 0; padding: 0; list-style: none; }
.artist-studio-checklist li { display: flex; align-items: center; min-height: 38px; gap: 10px; border-top: 1px solid var(--as-border); color: var(--as-muted); }
.artist-studio-checklist li.is-done { color: var(--as-text); }
.artist-studio-checklist li.is-done i { color: #16a365; }
.artist-studio-date-box { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: 0 0 56px; flex-direction: column; border: 1px solid var(--as-border); border-radius: 7px; background: var(--as-panel-subtle); }
.artist-studio-date-box strong { font-size: 20px; }
.artist-studio-date-box span { margin-top: 1px; color: var(--as-muted); font-size: 10px; }

.artist-studio-notice { display: flex; align-items: flex-start; margin-bottom: 18px; padding: 13px 15px; gap: 10px; border: 1px solid color-mix(in srgb, var(--as-accent) 28%, var(--as-border)); border-radius: 8px; color: var(--as-text); background: color-mix(in srgb, var(--as-accent) 8%, var(--as-panel)); font-size: 13px; line-height: 1.5; }
.artist-studio-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.artist-studio-toolbar input {
    width: min(420px,100%);
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--as-border);
    border-radius: 8px;
    outline: none;
    color: var(--as-text);
    background: var(--as-panel);
}
.artist-studio-toolbar span { color: var(--as-muted); font-size: 12px; }
.artist-studio-table { width: 100%; overflow-x: auto; }
.artist-studio-table-head,
.artist-studio-table-row { display: grid; grid-template-columns: minmax(280px,2fr) minmax(130px,1fr) 80px 90px 60px; align-items: center; min-width: 760px; padding: 11px 10px; gap: 14px; border-bottom: 1px solid var(--as-border); }
.artist-studio-table-head { color: var(--as-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.artist-studio-table-row { min-height: 72px; font-size: 13px; }
.artist-studio-table-row:hover { background: var(--as-hover); }
.artist-studio-table-head.is-campaign,
.artist-studio-table-row.is-campaign { grid-template-columns: minmax(280px,2fr) 120px 90px minmax(160px,1fr); }
.artist-studio-table-head.is-lyrics,
.artist-studio-table-row.is-lyrics { grid-template-columns: minmax(280px,2fr) 130px 100px 120px; }
.artist-studio-release-cell { display: flex; align-items: center; min-width: 0; gap: 12px; }
.artist-studio-release-cell img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 4px; object-fit: cover; background: var(--as-panel-subtle); }
.artist-studio-release-cell > span { min-width: 0; }
.artist-studio-release-cell strong,
.artist-studio-release-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio-release-cell small { margin-top: 4px; color: var(--as-muted); font-size: 11px; }
.artist-studio-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.artist-studio-row-actions button,
.artist-studio-row-actions a,
.artist-studio-team-row > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: var(--as-muted);
    background: transparent;
    cursor: pointer;
}
.artist-studio-row-actions button:hover,
.artist-studio-row-actions a:hover,
.artist-studio-team-row > button:hover { color: var(--as-text); background: var(--as-panel-subtle); }
.artist-studio-row { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 9px 2px; gap: 16px; border-bottom: 1px solid var(--as-border); }
.artist-studio-row:last-child { border-bottom: 0; }
.artist-studio-row > span { display: flex; min-width: 0; flex-direction: column; }
.artist-studio-row small { margin-top: 4px; color: var(--as-muted); }
.artist-studio-row em,
.artist-studio-row time { color: var(--as-muted); font-size: 12px; font-style: normal; white-space: nowrap; }
.artist-studio-inline-actions { display: flex !important; align-items: center; flex-direction: row !important; gap: 7px; }
.artist-studio-two-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.artist-studio-two-column .artist-studio-section > h2 { margin-bottom: 14px; }

.artist-studio-features-page { display: grid; gap: 18px; }
.artist-studio-features-page > .artist-studio-page-head { margin-bottom: -2px; }
.artist-studio-feature-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; }
.artist-studio-feature-panel { padding: 24px; }
.artist-studio-feature-section-head { align-items: center; }
.artist-studio-feature-section-head h2 { display: flex; align-items: center; gap: 10px; }
.artist-studio-feature-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--as-accent);
    background: color-mix(in srgb, var(--as-accent) 11%, var(--as-panel));
    font-size: 14px;
}
.artist-studio-feature-heading-icon.is-accepted { color: #15915b; background: color-mix(in srgb, #22a96d 12%, var(--as-panel)); }
.artist-studio-feature-count {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid var(--as-border);
    border-radius: 999px;
    color: var(--as-muted);
    background: var(--as-panel-subtle);
    font-size: 11px;
    font-weight: 750;
}
.artist-studio-feature-request-list { display: grid; gap: 10px; }
.artist-studio-feature-request {
    display: grid;
    grid-template-columns: 68px minmax(0,1fr) auto;
    align-items: center;
    min-height: 94px;
    padding: 12px;
    gap: 15px;
    border: 1px solid var(--as-border);
    border-radius: 11px;
    background: var(--as-panel-subtle);
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.artist-studio-feature-request:hover { border-color: color-mix(in srgb, var(--as-accent) 32%, var(--as-border)); background: var(--as-hover); transform: translateY(-1px); }
.artist-studio-feature-cover { width: 68px; height: 68px; border-radius: 8px; object-fit: cover; background: var(--as-hover); box-shadow: 0 3px 10px rgba(8,12,20,.12); }
.artist-studio-feature-copy { min-width: 0; }
.artist-studio-feature-eyebrow { display: block; margin-bottom: 4px; color: var(--as-accent); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.artist-studio-feature-copy h3,
.artist-studio-feature-credit h3 { margin: 0; overflow: hidden; font-size: 16px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio-feature-copy p { display: flex; align-items: center; margin: 7px 0 0; gap: 7px; color: var(--as-muted); font-size: 12px; }
.artist-studio-feature-copy p > img,
.artist-studio-feature-avatar-fallback { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; object-fit: cover; }
.artist-studio-feature-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--as-hover); font-size: 9px; }
.artist-studio-feature-copy p strong { color: var(--as-text); }
.artist-studio-feature-copy p small { color: var(--as-muted); }
.artist-studio-feature-actions { display: flex; align-items: center; gap: 7px; }
.artist-studio-feature-actions .artist-studio-button { min-width: 92px; }
.artist-studio-feature-credit-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 12px; }
.artist-studio-feature-credit {
    display: grid;
    grid-template-columns: 68px minmax(0,1fr);
    align-items: center;
    min-width: 0;
    padding: 12px;
    gap: 14px;
    border: 1px solid var(--as-border);
    border-radius: 11px;
    background: var(--as-panel-subtle);
}
.artist-studio-feature-credit > div { min-width: 0; }
.artist-studio-feature-status { display: block; margin-bottom: 5px; color: #15915b; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.artist-studio-feature-credit p,
.artist-studio-feature-credit small { display: block; margin: 5px 0 0; overflow: hidden; color: var(--as-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio-feature-empty { display: flex; min-height: 170px; align-items: center; justify-content: center; padding: 26px; flex-direction: column; border: 1px dashed var(--as-border); border-radius: 11px; color: var(--as-muted); text-align: center; background: var(--as-panel-subtle); }
.artist-studio-feature-empty.is-wide { grid-column: 1 / -1; }
.artist-studio-feature-empty > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 11px; border-radius: 50%; color: var(--as-accent); background: color-mix(in srgb, var(--as-accent) 10%, var(--as-panel)); }
.artist-studio-feature-empty strong { color: var(--as-text); font-size: 14px; }
.artist-studio-feature-empty p { margin: 5px 0 0; font-size: 12px; }

.artist-studio-chart { display: flex; align-items: flex-end; height: 240px; padding: 18px 8px 0; gap: clamp(3px,.65vw,10px); border-bottom: 1px solid var(--as-border); }
.artist-studio-chart > span { display: flex; height: 100%; min-width: 3px; flex: 1; align-items: flex-end; }
.artist-studio-chart i { display: block; width: 100%; height: var(--bar-height); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--as-accent); }

.artist-studio-dialog { width: min(600px,calc(100vw - 30px)); max-height: min(820px,calc(100vh - 30px)); margin: auto; padding: 0; overflow: visible; border: 0; border-radius: 12px; color: var(--as-text); background: transparent; }
.artist-studio-dialog::backdrop { background: rgba(13,16,22,.58); backdrop-filter: blur(2px); }
.artist-studio-dialog-card { display: flex; max-height: min(820px,calc(100vh - 30px)); padding: 22px; overflow-y: auto; flex-direction: column; gap: 15px; border: 1px solid var(--as-border); border-radius: 12px; background: var(--as-panel); }
.artist-studio-dialog-card header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.artist-studio-dialog-card header h2 { margin: 0; font-size: 23px; }
.artist-studio-dialog-card header button { width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--as-muted); background: transparent; cursor: pointer; }
.artist-studio-dialog-card header button:hover { background: var(--as-hover); }
.artist-studio-dialog-card label,
.artist-studio-profile-fields label { display: flex; flex-direction: column; gap: 7px; color: var(--as-muted); font-size: 12px; font-weight: 700; }
.artist-studio-dialog-card input:not([type="checkbox"]),
.artist-studio-dialog-card textarea,
.artist-studio-dialog-card select,
.artist-studio-profile-fields input:not([type="checkbox"]),
.artist-studio-profile-fields textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--as-border);
    border-radius: 7px;
    outline: 0;
    color: var(--as-text);
    background: var(--as-panel);
    font-weight: 500;
}
.artist-studio-dialog-card textarea,
.artist-studio-profile-fields textarea { resize: vertical; }
.artist-studio-dialog-card input:focus,
.artist-studio-dialog-card textarea:focus,
.artist-studio-dialog-card select:focus,
.artist-studio-profile-fields input:focus,
.artist-studio-profile-fields textarea:focus { border-color: var(--as-accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--as-accent) 12%,transparent); }
.artist-studio-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.artist-studio-muted { margin: 10px 0 0; color: var(--as-muted); font-size: 13px; line-height: 1.45; }
.artist-studio-verification { display: grid; gap: 18px; }
.artist-studio-verification-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,380px); align-items: start; gap: 20px; }
.artist-studio-verification form { display: flex; flex-direction: column; gap: 14px; }
.artist-studio-verification label:not(.artist-studio-check) { display: flex; flex-direction: column; gap: 7px; color: var(--as-muted); font-size: 12px; font-weight: 700; }
.artist-studio-verification input:not([type="checkbox"]),
.artist-studio-verification textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--as-border);
    border-radius: 7px;
    outline: 0;
    color: var(--as-text);
    background: var(--as-panel);
    font-weight: 500;
}
.artist-studio-verification textarea { resize: vertical; }
.artist-studio-verification input:focus,
.artist-studio-verification textarea:focus { border-color: var(--as-accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--as-accent) 12%,transparent); }
.artist-studio-verification .verification-requirements-list small { display: block; margin-top: 2px; color: var(--as-muted); }
.artist-studio-verification .verification-preview-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.artist-studio-linked-preview { margin-top: 14px; }
.artist-studio-linked-preview h3 { margin: 0 0 8px; font-size: 15px; }
.artist-studio-dialog-card footer { display: flex; align-items: center; justify-content: flex-end; margin-top: 5px; gap: 8px; }
.artist-studio-dialog-card footer > span { flex: 1; }
.artist-studio-check { display: flex !important; align-items: flex-start; min-height: 40px; padding: 8px 0; flex-direction: row !important; gap: 9px !important; color: var(--as-text) !important; font-size: 13px !important; font-weight: 500 !important; }
.artist-studio-check input { margin-top: 2px; }
.artist-studio-distribution-profile-form .artist-studio-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 1px 0 0;
    padding: 0;
    flex: 0 0 18px;
    accent-color: var(--as-accent);
}
.artist-studio-selection-list { display: grid; max-height: 380px; overflow-y: auto; gap: 4px; }
.artist-studio-selection-list label { display: grid; grid-template-columns: 22px 42px 1fr; align-items: center; min-height: 54px; padding: 5px; gap: 9px; border-radius: 7px; color: var(--as-text); cursor: pointer; }
.artist-studio-selection-list label:hover { background: var(--as-hover); }
.artist-studio-selection-list img { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; }

.artist-studio-content > .artist-studio-section + .artist-studio-section { margin-top: 18px; }
.artist-studio-tiktok-page > .artist-studio-section + .artist-studio-section { margin-top: 18px; }
.artist-studio-tiktok-page {
    width: min(1180px,100%);
    margin: 0 auto;
}
.artist-studio-tiktok-header { margin-bottom: 18px; }
.artist-studio-tiktok-warning {
    display: flex;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 14px 16px;
    gap: 11px;
    border: 1px solid color-mix(in srgb,#f59e0b 45%,var(--as-border));
    border-radius: 12px;
    color: var(--as-text);
    background: color-mix(in srgb,#f59e0b 9%,var(--as-panel));
    font-size: 13px;
    line-height: 1.5;
}
.artist-studio-tiktok-warning i { margin-top: 3px; color: #d97706; }
.artist-studio-tiktok-warning p { margin: 0; }
.artist-studio-tiktok-skeleton { display: grid; gap: 18px; }
.artist-studio-tiktok-skeleton > .artist-studio-section { padding: 24px; border-radius: 16px; }
#artistTikTokContent > .artist-studio-section + .artist-studio-section { margin-top: 18px; }
.artist-studio-tiktok-status {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0 0 14px;
    padding: 11px 14px;
    gap: 10px;
    border: 1px solid var(--as-border);
    border-radius: 10px;
    color: var(--as-text);
    background: var(--as-panel-subtle);
    font-size: 13px;
    line-height: 1.45;
}
.artist-studio-tiktok-status i { width: 18px; flex: 0 0 18px; color: var(--as-accent); text-align: center; }
.artist-studio-tiktok-status.is-error {
    border-color: color-mix(in srgb,#ef4444 34%,var(--as-border));
    color: #d84953;
    background: color-mix(in srgb,#ef4444 7%,var(--as-panel));
}
.artist-studio-tiktok-status.is-error i { color: #ef4444; }
.artist-studio-tiktok-page > .artist-studio-section,
#artistTikTokContent > .artist-studio-section {
    padding: 24px;
    border-radius: 16px;
}
.artist-studio-tiktok-connection > h2 { font-size: 22px; }
.artist-studio-tiktok-form { display: grid; gap: 20px; }
.artist-studio-tiktok-creative-grid {
    display: grid;
    grid-template-columns: minmax(240px,340px) minmax(0,1fr);
    align-items: stretch;
    gap: 16px;
}
.artist-studio-tiktok-preview-card,
.artist-studio-tiktok-copy-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-panel-subtle);
}
.artist-studio-tiktok-preview-card { display: flex; align-items: center; flex-direction: column; gap: 12px; }
.artist-studio-tiktok-card-label {
    width: 100%;
    color: var(--as-muted);
    font-size: 12px;
    font-weight: 750;
}
.artist-studio-tiktok-preview-card video {
    display: block;
    width: auto;
    max-width: 100%;
    height: min(520px,56vh);
    max-height: 520px;
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    background: #050608;
    box-shadow: 0 12px 30px rgba(4,8,18,.18);
    object-fit: contain;
}
.artist-studio-tiktok-copy-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
}
.artist-studio-tiktok-field,
.artist-studio-tiktok-datetime {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    color: var(--as-muted);
    font-size: 12px;
    font-weight: 700;
}
.artist-studio-tiktok-field textarea,
.artist-studio-tiktok-field select,
.artist-studio-tiktok-datetime input[type="datetime-local"] {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    outline: 0;
    color: var(--as-text);
    background: var(--as-panel);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}
.artist-studio-tiktok-field textarea {
    min-height: 210px;
    flex: 1;
    resize: vertical;
    line-height: 1.55;
}
.artist-studio-tiktok-field textarea:focus,
.artist-studio-tiktok-field select:focus,
.artist-studio-tiktok-datetime input[type="datetime-local"]:focus {
    border-color: var(--as-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--as-accent) 14%,transparent);
}
.artist-studio-tiktok-regenerate { width: max-content; align-self: flex-start; background: var(--as-panel); }
.artist-studio-tiktok-regenerate i { color: var(--as-accent); }
.artist-studio-tiktok-schedule-grid,
.artist-studio-tiktok-options-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: stretch;
    gap: 16px;
}
.artist-studio-tiktok-schedule-grid {
    padding: 16px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-panel-subtle);
}
.artist-studio-tiktok-schedule-grid.is-inbox > :first-child { grid-column: 1 / -1; }
.artist-studio-tiktok-interactions {
    min-width: 0;
    margin: 0;
    padding: 10px 15px 13px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-panel-subtle);
}
.artist-studio-tiktok-interactions legend {
    padding: 0 7px;
    color: var(--as-muted);
    font-size: 12px;
    font-weight: 750;
}
.artist-studio-tiktok-interactions > label {
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: 10px;
    color: var(--as-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.artist-studio-tiktok-interactions > label + label {
    border-top: 1px solid var(--as-border);
}
.artist-studio-tiktok-interactions input[type="checkbox"] { flex: 0 0 auto; }
.artist-studio-tiktok-interactions > label:has(input:disabled) {
    color: var(--as-muted);
    cursor: not-allowed;
}
.artist-studio-tiktok-disclosures {
    min-width: 0;
    padding: 10px 15px 13px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-panel-subtle);
}
.artist-studio-tiktok-disclosures h3 {
    margin: 0;
    padding: 0 7px 5px;
    color: var(--as-muted);
    font-size: 12px;
    font-weight: 750;
}
.artist-studio-tiktok-toggle,
.artist-studio-tiktok-commercial-choices > label {
    display: flex;
    min-height: 52px;
    align-items: center;
    padding: 8px 0;
    gap: 10px;
    color: var(--as-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.artist-studio-tiktok-toggle + .artist-studio-tiktok-toggle,
.artist-studio-tiktok-commercial-choices + .artist-studio-tiktok-toggle { border-top: 1px solid var(--as-border); }
.artist-studio-tiktok-toggle input,
.artist-studio-tiktok-commercial-choices input { flex: 0 0 auto; }
.artist-studio-tiktok-commercial-choices {
    display: grid;
    margin: 2px 0 8px 28px;
    padding: 4px 12px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    background: var(--as-panel);
}
.artist-studio-tiktok-commercial-choices > label + label { border-top: 1px solid var(--as-border); }
.artist-studio-tiktok-commercial-choices label > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.artist-studio-tiktok-commercial-choices small { color: var(--as-muted); font-size: 11px; font-weight: 500; line-height: 1.35; }
.artist-studio-tiktok-commercial-choices > label:has(input:disabled) {
    color: var(--as-muted);
    cursor: not-allowed;
    opacity: .72;
}
.artist-studio-tiktok-disclosure-hint {
    margin: 6px 0 7px;
    color: var(--as-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.artist-studio-tiktok-disclosure-hint:empty { display: none; }
.artist-studio-tiktok-disclosure-hint.is-error { color: #d84953; }
.artist-studio-tiktok-consent {
    display: flex;
    min-height: 64px;
    align-items: flex-start;
    padding: 15px 16px;
    gap: 11px;
    border: 1px solid color-mix(in srgb,var(--as-accent) 28%,var(--as-border));
    border-radius: 12px;
    color: var(--as-text);
    background: color-mix(in srgb,var(--as-accent) 5%,var(--as-panel));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}
.artist-studio-tiktok-consent input { margin-top: 1px; flex: 0 0 auto; }
.artist-studio-tiktok-processing-note {
    display: flex;
    align-items: flex-start;
    margin: -4px 0 0;
    padding: 0 3px;
    gap: 8px;
    color: var(--as-muted);
    font-size: 12px;
    font-weight: 550;
    line-height: 1.45;
}
.artist-studio-tiktok-processing-note i { margin-top: 2px; color: var(--as-accent); }
.artist-studio-tiktok-submit { width: 100%; min-height: 50px; }
.artist-studio-tiktok-submit:disabled { cursor: not-allowed; opacity: .55; }
.artist-studio-tiktok-datetime input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: .72;
    cursor: pointer;
}
.artist-studio-tiktok-account-row {
    min-height: 76px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-panel-subtle);
}
.artist-studio-tiktok-account-identity {
    display: flex !important;
    align-items: center;
    flex-direction: row !important;
    gap: 12px;
}
.artist-studio-tiktok-account-identity > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.artist-studio-tiktok-account-icon,
.artist-studio-tiktok-post-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    color: #fff;
    background: #111;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.artist-studio-tiktok-account-icon { overflow: hidden; }
.artist-studio-tiktok-account-icon img { width: 100%; height: 100%; object-fit: cover; }
.artist-studio-tiktok-connected-pill,
.artist-studio-tiktok-post-status {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 28px;
    padding: 0 10px;
    gap: 5px;
    border-radius: 999px;
    color: #18794e;
    background: color-mix(in srgb,#22c55e 12%,var(--as-panel));
    font-size: 11px;
    font-weight: 750;
    text-transform: capitalize;
}
.artist-studio-tiktok-connected-pill {
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
}
.artist-studio-tiktok-duration {
    margin: 10px 0 0 58px;
    color: var(--as-muted);
    font-size: 13px;
    font-style: italic;
}
.artist-studio-tiktok-inline-error { margin: 10px 0 0; color: #d84953; font-size: 12px; }
.artist-studio-tiktok-queue #artistTikTokPosts { display: grid; gap: 9px; }
.artist-studio-tiktok-post {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto auto;
    align-items: center;
    min-height: 76px;
    padding: 11px 12px;
    gap: 12px;
    border: 1px solid var(--as-border);
    border-radius: 11px;
    background: var(--as-panel-subtle);
}
.artist-studio-tiktok-post-copy { display: flex; min-width: 0; flex-direction: column; }
.artist-studio-tiktok-post-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio-tiktok-post-copy small { margin-top: 4px; color: var(--as-muted); font-size: 12px; line-height: 1.4; }
.artist-studio-tiktok-post-status.is-draft { color: var(--as-muted); background: var(--as-panel); }
.artist-studio-tiktok-post-status.is-scheduled,
.artist-studio-tiktok-post-status.is-processing,
.artist-studio-tiktok-post-status.is-publishing { color: var(--as-accent); background: color-mix(in srgb,var(--as-accent) 10%,var(--as-panel)); }
.artist-studio-tiktok-post-status.is-inboxdelivered,
.artist-studio-tiktok-post-status.is-published { color: #178a56; background: color-mix(in srgb,#22c55e 12%,var(--as-panel)); }
.artist-studio-tiktok-post-status.is-failed { color: #d84953; background: color-mix(in srgb,#ef4444 10%,var(--as-panel)); }
.artist-studio-tiktok-post-status.is-cancelled { color: var(--as-muted); background: var(--as-panel); }
.artist-studio-tiktok-post-actions { justify-content: flex-end; flex-wrap: wrap; }
.artist-studio-tiktok-calendar-head { align-items: center; }
.artist-studio-tiktok-calendar-head .artist-studio-inline-actions { flex-wrap: nowrap; }
.artist-studio-tiktok-calendar-title {
    margin: 4px 0 14px;
    color: var(--as-text);
    font-size: 18px;
    font-weight: 780;
}
.artist-studio-tiktok-calendar-scroll { width: 100%; overflow-x: auto; scrollbar-width: thin; }
.artist-studio-tiktok-calendar-grid {
    display: grid;
    min-width: 700px;
    grid-template-columns: repeat(7,minmax(0,1fr));
    border-top: 1px solid var(--as-border);
    border-left: 1px solid var(--as-border);
    border-radius: 11px;
    overflow: hidden;
}
.artist-studio-tiktok-calendar-weekday {
    padding: 9px 8px;
    border-right: 1px solid var(--as-border);
    border-bottom: 1px solid var(--as-border);
    color: var(--as-muted);
    background: var(--as-panel-subtle);
    font-size: 11px;
    font-weight: 780;
    text-align: center;
    text-transform: uppercase;
}
.artist-studio-tiktok-calendar-day {
    min-width: 0;
    min-height: 112px;
    padding: 8px;
    border-right: 1px solid var(--as-border);
    border-bottom: 1px solid var(--as-border);
    background: var(--as-panel);
}
.artist-studio-tiktok-calendar-day.is-outside { background: var(--as-panel-subtle); opacity: .56; }
.artist-studio-tiktok-calendar-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-bottom: 5px;
    border-radius: 50%;
    color: var(--as-muted);
    font-size: 11px;
    font-weight: 760;
}
.artist-studio-tiktok-calendar-day.is-today .artist-studio-tiktok-calendar-date { color: #fff; background: var(--as-accent); }
.artist-studio-tiktok-calendar-day > div { display: grid; gap: 4px; }
.artist-studio-tiktok-calendar-post {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    padding: 5px 6px;
    gap: 5px;
    border: 1px solid color-mix(in srgb,var(--as-accent) 22%,var(--as-border));
    border-radius: 6px;
    color: var(--as-text);
    background: color-mix(in srgb,var(--as-accent) 8%,var(--as-panel));
    font: inherit;
    font-size: 9px;
    font-weight: 680;
    text-align: left;
    cursor: default;
}
.artist-studio-tiktok-calendar-post.is-scheduled { cursor: pointer; }
.artist-studio-tiktok-calendar-post.is-scheduled:hover { border-color: var(--as-accent); }
.artist-studio-tiktok-calendar-post time { flex: 0 0 auto; color: var(--as-accent); font-weight: 800; }
.artist-studio-tiktok-calendar-post span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio-tiktok-calendar-more { padding-left: 5px; color: var(--as-muted); font-size: 9px; font-weight: 700; }

@media (max-width: 900px) {
    .artist-studio-tiktok-creative-grid { grid-template-columns: 1fr; }
    .artist-studio-tiktok-preview-card video {
        width: min(100%,300px);
        height: auto;
        max-height: 58vh;
    }
}

@media (max-width: 760px) {
    .artist-studio-tiktok-header .artist-studio-inline-actions { width: 100%; }
    .artist-studio-tiktok-header .artist-studio-inline-actions > * { min-width: 0; flex: 1; }
    .artist-studio-tiktok-status {
        align-items: flex-start;
        min-height: 0;
        padding: 11px 12px;
        border-radius: 9px;
    }
    .artist-studio-tiktok-status i { margin-top: 2px; }
    .artist-studio-tiktok-page > .artist-studio-section,
    #artistTikTokContent > .artist-studio-section {
        padding: 16px;
        border-radius: 14px;
    }
    .artist-studio-tiktok-form { gap: 14px; }
    .artist-studio-tiktok-creative-grid,
    .artist-studio-tiktok-schedule-grid,
    .artist-studio-tiktok-options-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
    .artist-studio-tiktok-preview-card,
    .artist-studio-tiktok-copy-card,
    .artist-studio-tiktok-schedule-grid { padding: 12px; border-radius: 10px; }
    .artist-studio-tiktok-preview-card video { width: min(100%,270px); max-height: 56vh; border-radius: 8px; }
    .artist-studio-tiktok-field textarea { min-height: 180px; }
    .artist-studio-tiktok-regenerate { width: 100%; }
    .artist-studio-tiktok-interactions,
    .artist-studio-tiktok-disclosures { padding: 9px 12px 11px; border-radius: 10px; }
    .artist-studio-tiktok-interactions > label,
    .artist-studio-tiktok-toggle,
    .artist-studio-tiktok-commercial-choices > label { min-height: 50px; font-size: 13px; }
    .artist-studio-tiktok-commercial-choices { margin-left: 0; }
    .artist-studio-tiktok-consent { min-height: 0; padding: 13px; border-radius: 10px; font-size: 12px; }
    .artist-studio-tiktok-submit { min-height: 48px; }
    .artist-studio-tiktok-calendar-head { align-items: flex-start; gap: 12px; }
    .artist-studio-tiktok-calendar-head .artist-studio-inline-actions { width: 100%; }
    .artist-studio-tiktok-calendar-head .artist-studio-button { min-width: 0; flex: 1; }
    .artist-studio-tiktok-calendar-title { margin-top: 8px; font-size: 16px; }
    .artist-studio-tiktok-calendar-grid { min-width: 650px; }
    .artist-studio-tiktok-calendar-day { min-height: 96px; padding: 6px; }
    .artist-studio-tiktok-account-row {
        display: grid;
        grid-template-columns: minmax(0,1fr);
        align-items: flex-start;
        padding: 12px;
        gap: 10px;
    }
    .artist-studio-tiktok-account-identity { width: auto; }
    .artist-studio-tiktok-account-row > .artist-studio-inline-actions {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .artist-studio-tiktok-account-row > .artist-studio-inline-actions .artist-studio-button {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 120px;
        white-space: normal;
    }
    .artist-studio-tiktok-connected-pill { align-self: center; margin-left: 0; }
    .artist-studio-tiktok-duration { margin: 9px 0 0; font-size: 12px; }
    .artist-studio-tiktok-post {
        grid-template-columns: 38px minmax(0,1fr) auto;
        min-height: 0;
        padding: 11px;
        gap: 10px;
    }
    .artist-studio-tiktok-post-icon { width: 38px; height: 38px; flex-basis: 38px; }
    .artist-studio-tiktok-post-status { grid-column: 3; grid-row: 1; }
    .artist-studio-tiktok-post-actions { grid-column: 1 / -1; width: 100%; padding-top: 2px; }
    .artist-studio-tiktok-post-actions .artist-studio-button { min-width: 0; flex: 1; }
}
.artist-studio-event-sync {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    margin-bottom: 14px;
    padding: 0 15px;
    gap: 14px;
    border: 1px solid var(--as-border);
    border-radius: 8px;
    background: var(--as-panel);
}
.artist-studio-event-sync > span { display: inline-flex; align-items: center; gap: 9px; }
.artist-studio-event-sync i,
.artist-studio-event-sync small { color: var(--as-muted); }
.artist-studio-event-sync small { font-size: 12px; }
.artist-studio-event-list { display: grid; }
.artist-studio-event-row { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; min-height: 88px; padding: 15px 3px; gap: 15px; border-bottom: 1px solid var(--as-border); }
.artist-studio-event-row:last-child { border-bottom: 0; }
.artist-studio-event-row.is-hidden { opacity: .62; }
.artist-studio-event-row h3 { margin: 0; font-size: 15px; }
.artist-studio-event-row p { margin: 5px 0; color: var(--as-muted); font-size: 13px; }
.artist-studio-event-row small { color: var(--as-muted); font-size: 11px; }

.artist-studio-profile { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(420px,1.25fr); align-items: start; gap: 20px; }
.artist-studio-profile > .artist-studio-section:last-child { grid-column: 1 / -1; }

.artist-studio-distribution-page,
.artist-studio-royalties-page {
    width: min(1240px, 100%);
    margin: 0 auto;
}
.artist-studio-distribution-status {
    display: flex;
    min-height: 42px;
    margin: 16px 0;
    padding: 10px 14px;
    align-items: center;
    gap: 9px;
    border: 1px solid color-mix(in srgb,var(--as-accent) 20%,var(--as-border));
    border-radius: 9px;
    color: var(--as-text);
    background: color-mix(in srgb,var(--as-accent) 7%,var(--as-panel));
    font-size: 13px;
}
.artist-studio-distribution-status[hidden] { display: none; }
.artist-studio-distribution-status.is-error {
    color: #d84953;
    border-color: color-mix(in srgb,#ef4444 30%,var(--as-border));
    background: color-mix(in srgb,#ef4444 7%,var(--as-panel));
}
.artist-studio-distribution-skeleton,
.artist-studio-royalties-skeleton {
    display: grid;
    padding: 6px 0;
    gap: 12px;
}
.artist-studio-distribution-skeleton[hidden],
.artist-studio-royalties-skeleton[hidden] { display: none; }
.artist-studio-distribution-skeleton > span,
.artist-studio-distribution-skeleton i,
.artist-studio-distribution-skeleton article,
.artist-studio-royalties-skeleton > * {
    display: block;
    border-radius: 8px;
    background: var(--as-panel-subtle);
    animation: artistDistributionSkeleton 1.25s ease-in-out infinite alternate;
}
.artist-studio-distribution-skeleton > span:first-child { width: 260px; height: 28px; }
.artist-studio-distribution-skeleton > span:nth-child(2) { width: min(520px,80%); height: 15px; }
.artist-studio-distribution-skeleton > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.artist-studio-distribution-skeleton i { height: 88px; }
.artist-studio-distribution-skeleton article { height: 180px; margin-top: 10px; }
.artist-studio-royalties-skeleton { min-height: 210px; padding: 22px; border: 1px solid var(--as-border); border-radius: 11px; }
.artist-studio-royalties-skeleton > span { width: 120px; height: 14px; }
.artist-studio-royalties-skeleton > strong { width: min(340px,70%); height: 48px; }
.artist-studio-royalties-skeleton > small { width: 190px; height: 13px; }
.artist-studio-royalties-skeleton > i { width: 180px; height: 42px; margin-top: 10px; }
@keyframes artistDistributionSkeleton {
    from { opacity: .48; }
    to { opacity: .9; }
}
.artist-studio-distribution-onboarding {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.artist-studio-distribution-step {
    width: 100%;
    margin: 0;
}
.artist-studio-distribution-step[data-distribution-step="history"] {
    width: 100%;
    text-align: left;
}
.artist-studio-distribution-step > h2 {
    margin: 0 0 5px;
    font-size: 24px;
    letter-spacing: -.025em;
}
.artist-studio-distribution-step > p {
    margin: 0 0 18px;
    color: var(--as-muted);
    line-height: 1.5;
}
.artist-studio-distribution-choice-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}
.artist-studio-distribution-choice-grid button {
    display: flex;
    min-height: 88px;
    padding: 17px 18px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 12px;
    border: 1px solid var(--as-border);
    border-radius: 11px;
    color: var(--as-text);
    text-align: left;
    background: var(--as-panel);
    transition: border-color .18s ease,background .18s ease;
}
.artist-studio-distribution-choice-grid button:hover {
    border-color: var(--as-accent);
    background: var(--as-hover);
}
.artist-studio-distribution-choice-grid button i {
    display: grid;
    width: 36px;
    height: 36px;
    grid-row: span 2;
    place-items: center;
    border-radius: 9px;
    color: var(--as-accent);
    background: color-mix(in srgb,var(--as-accent) 10%,var(--as-panel));
    font-size: 17px;
}
.artist-studio-distribution-choice-grid button strong { font-size: 17px; }
.artist-studio-distribution-choice-grid button strong,
.artist-studio-distribution-choice-grid button span { min-width: calc(100% - 48px); }
.artist-studio-distribution-choice-grid button span { margin-left: 48px; color: var(--as-muted); font-size: 12px; }
.artist-studio-distribution-profile-form {
    display: grid;
    gap: 15px;
    text-align: left;
}
.artist-studio-distribution-profile-form[hidden] { display: none; }
.artist-studio-distribution-profile-form label,
.artist-studio-distribution-release-editor label {
    display: grid;
    gap: 7px;
    color: var(--as-muted);
    font-size: 12px;
    font-weight: 700;
}
.artist-studio-distribution-profile-form label > span {
    display: flex;
    align-items: center;
    gap: 7px;
}
.artist-studio-distribution-profile-form label small { margin-left: auto; font-weight: 500; }
.artist-studio-distribution-profile-form :is(input,select),
.artist-studio-distribution-release-editor :is(input,select) {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    outline: none;
    color: var(--as-text);
    background: var(--as-panel);
    font: inherit;
    font-weight: 550;
    transition: border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.artist-studio-distribution-profile-form :is(input,select):focus,
.artist-studio-distribution-release-editor :is(input,select):focus {
    border-color: var(--as-accent);
    background: var(--as-panel);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--as-accent) 12%,transparent);
}
.artist-studio-distribution-profile-links {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}
.artist-studio-distribution-profile-links[hidden] { display: none; }
.artist-studio-distribution-guardian {
    display: grid;
    padding: 18px;
    gap: 14px;
    border: 1px solid var(--as-border);
    border-radius: 10px;
    background: var(--as-panel);
}
.artist-studio-distribution-guardian[hidden] { display: none; }
.artist-studio-distribution-guardian h3 { margin: 0; font-size: 16px; }
.artist-studio-distribution-guardian > div:first-child p { margin: 5px 0 0; color: var(--as-muted); font-size: 12px; line-height: 1.5; }
.artist-studio-distribution-guardian-verification {
    display: grid;
    grid-template-columns: auto minmax(130px,1fr) auto;
    align-items: center;
    gap: 8px;
}
.artist-studio-distribution-guardian-verification input { min-height: 42px !important; }
.artist-studio-distribution-guardian [data-guardian-verification-status] { min-height: 18px; margin: 0; color: var(--as-muted); font-size: 11px; }
.artist-studio-distribution-guardian [data-guardian-verification-status].is-verified { color: #16845b; }
.artist-studio-distribution-signer-notice { margin: 0; padding: 11px 12px; border: 1px solid var(--as-border); border-radius: 8px; color: var(--as-muted); background: var(--as-bg); font-size: 12px; line-height: 1.5; }
.artist-studio-distribution-application {
    display: grid;
    min-height: 360px;
    padding: 38px;
    place-items: center;
    align-content: center;
    gap: 12px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-panel);
    text-align: center;
}
.artist-studio-distribution-application[hidden] { display: none; }
.artist-studio-distribution-application > span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    color: #16845b;
    background: color-mix(in srgb,#16a36a 12%,var(--as-panel));
    font-size: 22px;
}
.artist-studio-distribution-application h2 { margin: 5px 0 0; font-size: 25px; letter-spacing: -.025em; }
.artist-studio-distribution-application p { max-width: 550px; margin: 0 0 8px; color: var(--as-muted); line-height: 1.55; }
.artist-studio-form-grid.is-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.artist-studio-distribution-step-actions {
    display: flex;
    margin-top: 12px;
    justify-content: flex-end;
    gap: 10px;
}
.artist-studio-distribution-summary {
    display: grid;
    margin: 18px 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}
.artist-studio-distribution-summary article {
    display: flex;
    min-height: 106px;
    padding: 18px;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--as-border);
    border-radius: 11px;
    background: var(--as-panel);
    box-shadow: none;
}
.artist-studio-distribution-summary article > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}
.artist-studio-distribution-summary article small { color: var(--as-muted); font-size: 11px; }
.artist-studio-distribution-summary article strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; }
.artist-studio-distribution-summary article button {
    padding: 6px 0;
    border: 0;
    color: var(--as-accent);
    background: transparent;
    font-weight: 750;
    text-decoration: none;
}
.artist-studio-distribution-summary-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 9px;
    color: var(--as-accent);
    background: color-mix(in srgb,var(--as-accent) 10%,var(--as-panel));
}
.artist-studio-distribution-summary article.artist-studio-distribution-contract-card { padding: 0; }
.artist-studio-distribution-contract-card > a {
    display: flex;
    width: 100%;
    min-height: 104px;
    padding: 18px;
    align-items: center;
    gap: 13px;
    color: var(--as-text);
    font-weight: inherit;
    text-decoration: none;
}
.artist-studio-distribution-contract-card > a > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}
.artist-studio-distribution-contract-card > a > i:last-child { color: var(--as-muted); font-size: 12px; }
.artist-studio-distribution-contract-card:hover { border-color: color-mix(in srgb,var(--as-accent) 28%,var(--as-border)); background: var(--as-hover); }
.artist-studio-distribution-releases { padding: 20px; border-radius: 11px; }
#distributionSubmissions { display: grid; gap: 10px; }
.artist-studio-distribution-release-row {
    display: grid;
    min-height: 86px;
    padding: 10px 12px;
    align-items: center;
    grid-template-columns: 58px minmax(180px,1fr) auto auto;
    gap: 14px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    background: var(--as-panel);
    transition: border-color .18s ease,background .18s ease;
}
.artist-studio-distribution-release-row:hover { border-color: color-mix(in srgb,var(--as-accent) 28%,var(--as-border)); background: var(--as-hover); }
.artist-studio-distribution-release-row > img {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    object-fit: cover;
}
.artist-studio-distribution-release-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.artist-studio-distribution-release-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio-distribution-release-copy small { color: var(--as-muted); font-size: 11px; }
.artist-studio-distribution-release-copy em { color: #d97706; font-size: 11px; font-style: normal; line-height: 1.4; }
.artist-studio-distribution-status-pill {
    display: inline-flex;
    min-height: 30px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--as-muted);
    background: var(--as-bg);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
.artist-studio-distribution-status-pill:is(.is-submitted,.is-under-review,.is-approved,.is-sending,.is-pending,.is-delivering) {
    color: var(--as-accent);
    background: color-mix(in srgb,var(--as-accent) 11%,var(--as-panel));
}
.artist-studio-distribution-status-pill:is(.is-published,.is-live) {
    color: #16845b;
    background: color-mix(in srgb,#10b981 11%,var(--as-panel));
}
.artist-studio-distribution-status-pill:is(.is-rejected,.is-integration-failed,.is-changes-requested,.is-takedown-requested) {
    color: #d84953;
    background: color-mix(in srgb,#ef4444 10%,var(--as-panel));
}
.artist-studio-distribution-dialog {
    width: min(1000px,calc(100vw - 30px));
    max-width: 1000px;
}
.artist-studio-distribution-dialog[open] {
    position: fixed;
    inset: 50% auto auto 50%;
    margin: 0;
    transform: translate(-50%,-50%);
}
.artist-studio-distribution-dialog .artist-studio-dialog-card {
    width: 100%;
    max-width: none;
    max-height: min(900px,calc(100vh - 36px));
    border-radius: 12px;
}
.artist-studio-distribution-contract {
    min-height: 260px;
    max-height: 430px;
    padding: 22px;
    overflow: auto;
    border: 1px solid var(--as-border);
    border-radius: 10px;
    background: var(--as-bg);
}
.artist-studio-distribution-contract h2 { margin: 0 0 22px; font-size: 25px; }
.artist-studio-distribution-contract h3 { margin: 24px 0 8px; font-size: 15px; }
.artist-studio-distribution-contract p { margin: 0; color: var(--as-muted); font-size: 12px; line-height: 1.65; }
.artist-studio-distribution-contract-space { display: block; height: 5px; }
.artist-studio-distribution-signed-banner {
    display: flex;
    margin-bottom: 18px;
    padding: 13px;
    align-items: center;
    gap: 11px;
    border: 1px solid color-mix(in srgb,#10b981 26%,var(--as-border));
    border-radius: 9px;
    color: #16845b;
    background: color-mix(in srgb,#10b981 8%,var(--as-panel));
}
.artist-studio-distribution-signed-banner > span { display: flex; flex: 1; flex-direction: column; }
.artist-studio-distribution-signed-banner small { font-size: 10px; }
.artist-studio-distribution-signature {
    display: grid;
    margin-top: 14px;
    gap: 12px;
}
.artist-studio-distribution-signature > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--as-muted);
    font-size: 11px;
    font-weight: 750;
}
.artist-studio-distribution-signature > div button { border: 0; color: var(--as-accent); background: transparent; font: inherit; }
.artist-studio-distribution-signature canvas {
    width: 100%;
    height: 150px;
    border: 1px dashed color-mix(in srgb,var(--as-accent) 44%,var(--as-border));
    border-radius: 9px;
    background: var(--as-bg);
    touch-action: none;
}
.artist-studio-distribution-release-picker > p { margin: 0 0 16px; color: var(--as-muted); font-size: 12px; line-height: 1.55; }
.artist-studio-distribution-candidate-grid { display: grid; max-height: 560px; overflow: auto; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.artist-studio-distribution-candidate-grid > button {
    display: grid;
    min-height: 82px;
    padding: 10px;
    align-items: center;
    grid-template-columns: 60px 1fr auto;
    gap: 12px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    color: var(--as-text);
    text-align: left;
    background: var(--as-panel);
}
.artist-studio-distribution-candidate-grid > button:not(:disabled):hover { border-color: var(--as-accent); background: var(--as-hover); }
.artist-studio-distribution-candidate-grid > button:disabled { opacity: .55; cursor: not-allowed; }
.artist-studio-distribution-candidate-grid > button.is-preparing { opacity: .75; cursor: wait; }
.artist-studio-distribution-candidate-spinner {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    justify-self: center;
    border: 2px solid color-mix(in srgb,var(--as-accent) 22%,var(--as-border));
    border-top-color: var(--as-accent);
    border-radius: 50%;
    animation: artistStudioDistributionCandidateSpin .75s linear infinite;
}
@keyframes artistStudioDistributionCandidateSpin { to { transform: rotate(360deg); } }
.artist-studio-distribution-candidate-grid img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; }
.artist-studio-distribution-candidate-grid span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.artist-studio-distribution-candidate-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio-distribution-candidate-grid small,.artist-studio-distribution-candidate-grid em { color: var(--as-muted); font-size: 10px; font-style: normal; }
#distributionReleaseEditor { display: grid; max-height: 660px; padding-right: 4px; overflow: auto; gap: 16px; }
.artist-studio-distribution-selected-release {
    display: flex;
    padding: 13px;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    background: var(--as-panel);
}
.artist-studio-distribution-selected-release img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
.artist-studio-distribution-selected-release span { display: flex; flex-direction: column; gap: 3px; }
.artist-studio-distribution-selected-release small,.artist-studio-distribution-selected-release em { color: var(--as-muted); font-size: 10px; font-style: normal; }
.artist-studio-distribution-selected-release strong { font-size: 18px; }
.artist-studio-distribution-editor-section {
    display: grid;
    padding: 18px;
    gap: 14px;
    border: 1px solid var(--as-border);
    border-radius: 10px;
    background: var(--as-panel);
}
.artist-studio-distribution-editor-section h3 { margin: 0; font-size: 16px; }
.artist-studio-distribution-editor-section > div:first-child > p { margin: 4px 0 0; color: var(--as-muted); font-size: 11px; }
.artist-studio-distribution-choice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--as-text);
    font-size: 12px;
}
.artist-studio-distribution-choice-head span { display: flex; gap: 12px; }
.artist-studio-distribution-choice-head button {
    padding: 0;
    border: 0;
    color: var(--as-accent);
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}
.artist-studio-distribution-option-grid {
    display: grid;
    max-height: 250px;
    padding: 8px;
    overflow: auto;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    background: var(--as-bg);
}
.artist-studio-distribution-option-grid label {
    display: flex;
    min-height: 40px;
    padding: 8px 10px;
    align-items: center;
    grid-template-columns: none;
    flex-direction: row;
    gap: 8px;
    border-radius: 7px;
    color: var(--as-text);
    background: var(--as-panel);
    font-size: 11px;
    cursor: pointer;
}
.artist-studio-distribution-option-grid label:hover { background: var(--as-hover); }
.artist-studio-distribution-option-grid label[hidden] { display: none; }
.artist-studio-distribution-option-grid input { width: 17px; min-height: 17px; flex: 0 0 17px; }
.artist-studio-distribution-option-grid small { color: var(--as-muted); font-size: 9px; }
.artist-studio-distribution-territory-search { min-height: 42px !important; }
.artist-studio-distribution-delivery-count { margin: 0; color: var(--as-muted); font-size: 11px; }
.artist-studio-distribution-release-timing [hidden] { display: none; }
.artist-studio-distribution-timing-note {
    display: flex;
    min-height: 38px;
    margin: -7px 0 0;
    padding: 9px 12px;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb,var(--as-accent) 18%,var(--as-border));
    border-radius: 8px;
    color: var(--as-muted);
    background: color-mix(in srgb,var(--as-accent) 5%,var(--as-panel));
    font-size: 11px;
    line-height: 1.45;
}
.artist-studio-distribution-timing-note i { color: var(--as-accent); }
.artist-studio-distribution-artists { display: grid; gap: 9px; }
.artist-studio-distribution-artist-row {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 120px 1fr 1fr 34px;
    gap: 8px;
}
.artist-studio-distribution-artist-row input,.artist-studio-distribution-artist-row select { min-height: 42px; font-size: 11px; }
.artist-studio-distribution-artist-row > button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #d84953;
    background: color-mix(in srgb,#ef4444 8%,var(--as-panel));
}
.artist-studio-distribution-artist-matches {
    display: grid;
    grid-column: 1 / -1;
    padding: 6px;
    gap: 4px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-bg);
    box-shadow: 0 12px 30px rgba(8,12,20,.1);
}
.artist-studio-distribution-artist-matches[hidden] { display: none; }
.artist-studio-distribution-artist-matches button,
.artist-studio-distribution-artist-matches .is-matched {
    display: grid;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    align-items: center;
    grid-template-columns: 28px minmax(0,1fr) 18px;
    gap: 9px;
    border: 0;
    border-radius: 9px;
    color: var(--as-text);
    background: transparent;
    text-align: left;
}
.artist-studio-distribution-artist-matches button { cursor: pointer; }
.artist-studio-distribution-artist-matches button:hover { background: var(--as-hover); }
.artist-studio-distribution-artist-matches button > i:first-child,
.artist-studio-distribution-artist-matches .is-matched > i {
    color: var(--as-accent);
    text-align: center;
}
.artist-studio-distribution-artist-matches button > i:last-child {
    color: var(--as-muted);
    font-size: 10px;
    text-align: right;
}
.artist-studio-distribution-artist-matches button > span,
.artist-studio-distribution-artist-matches .is-matched > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.artist-studio-distribution-artist-matches strong { font-size: 12px; }
.artist-studio-distribution-artist-matches small {
    color: var(--as-muted);
    font-size: 10px;
    font-weight: 600;
}
.artist-studio-distribution-artist-matches .is-matched {
    grid-template-columns: 28px minmax(0,1fr);
    color: #16845b;
    background: color-mix(in srgb,#10b981 9%,var(--as-panel));
}
.artist-studio-distribution-track-list { display: grid; gap: 12px; }
.artist-studio-distribution-track-editor {
    display: grid;
    padding: 16px;
    gap: 13px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    background: var(--as-panel);
}
.artist-studio-distribution-track-editor > header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.artist-studio-distribution-track-editor > header > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: var(--as-accent);
    background: color-mix(in srgb,var(--as-accent) 10%,var(--as-panel));
    font-size: 11px;
    font-weight: 800;
}
.artist-studio-distribution-track-editor > header > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.artist-studio-distribution-track-editor > header small { color: var(--as-muted); font-size: 10px; }
.artist-studio-distribution-track-editor > header > i { color: var(--as-accent); }
.artist-studio-distribution-checks { display: flex; gap: 20px; }
.artist-studio-distribution-checks label { display: flex; align-items: center; flex-direction: row; gap: 8px; }
.artist-studio-distribution-checks input { width: 18px; min-height: 18px; }
.artist-studio-distribution-tiktok-preview {
    display: grid;
    grid-template-columns: minmax(180px,1fr) auto;
    align-items: end;
    gap: 12px;
}
.artist-studio-distribution-tiktok-preview .artist-studio-button {
    min-width: 180px;
    min-height: 46px;
}
.artist-studio-distribution-tiktok-preview .artist-studio-button.is-playing {
    color: #fff;
    border-color: var(--as-accent);
    background: var(--as-accent);
}
.artist-studio-distribution-master-drop {
    display: flex !important;
    min-height: 74px;
    padding: 13px;
    align-items: center;
    flex-direction: row;
    gap: 12px !important;
    border: 1px dashed color-mix(in srgb,var(--as-accent) 42%,var(--as-border));
    border-radius: 9px;
    color: var(--as-text) !important;
    background: var(--as-bg);
    cursor: pointer;
}
.artist-studio-distribution-master-drop input { position: absolute; width: 1px !important; height: 1px; min-height: 1px !important; opacity: 0; }
.artist-studio-distribution-master-drop > i { color: var(--as-accent); font-size: 22px; }
.artist-studio-distribution-master-drop > span { display: flex; flex-direction: column; }
.artist-studio-distribution-master-drop small { color: var(--as-muted); font-weight: 500; }
.artist-studio-distribution-master-drop.is-selected {
    border-color: #e6a443;
    background: color-mix(in srgb,#e6a443 8%,var(--as-bg));
}
.artist-studio-distribution-master-drop.is-selected > i { color: #e6a443; }
.artist-studio-distribution-master-drop.is-uploaded {
    border-style: solid;
    border-color: color-mix(in srgb,#35b979 48%,var(--as-border));
    background: color-mix(in srgb,#35b979 7%,var(--as-bg));
}
.artist-studio-distribution-master-drop.is-uploaded > i { color: #35b979; }
.artist-studio-distribution-master-drop.is-disabled {
    opacity: .68;
    cursor: not-allowed;
}
.artist-studio-distribution-edit-note {
    margin-top: 4px;
    padding: 14px;
    border: 1px solid var(--as-border);
    border-radius: 10px;
    background: var(--as-panel);
}
.artist-studio-distribution-track-artists { padding-top: 4px; border-top: 1px solid var(--as-border); }
.artist-studio-distribution-track-artists h4 { margin: 12px 0; font-size: 12px; }
.artist-studio-distribution-credits {
    display: grid;
    padding-top: 14px;
    gap: 10px;
    border-top: 1px solid var(--as-border);
}
.artist-studio-distribution-credits h4 { margin: 0; font-size: 13px; }
.artist-studio-distribution-credits p { margin: 4px 0 0; color: var(--as-muted); font-size: 11px; }
.artist-studio-distribution-credits [data-credit-rows] { display: grid; gap: 8px; }
.artist-studio-distribution-credit-row {
    display: grid;
    grid-template-columns: minmax(140px,1fr) minmax(140px,1fr) minmax(210px,1.25fr) 34px;
    align-items: center;
    gap: 8px;
}
.artist-studio-distribution-credit-row input,
.artist-studio-distribution-credit-row select { min-width: 0; }
.artist-studio-distribution-credit-row > button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #d84953;
    background: color-mix(in srgb,#ef4444 8%,var(--as-panel));
}

.artist-studio-royalties-page { width: min(1120px,100%); }
.artist-studio-royalties-hero {
    display: flex;
    min-height: 0;
    padding: 22px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--as-border);
    border-radius: 11px;
    background: var(--as-panel);
    box-shadow: none;
}
.artist-studio-royalties-hero > span { color: var(--as-muted); font-size: 12px; font-weight: 750; }
.artist-studio-royalties-hero > strong { margin: 6px 0; font-size: clamp(34px,5vw,48px); letter-spacing: -.045em; }
.artist-studio-royalties-hero > small { color: var(--as-muted); }
.artist-studio-royalties-hero .artist-studio-button { margin-top: 24px; }
.artist-studio-royalties-metrics { margin: 16px 0; }
.artist-studio-royalties-updated { color: var(--as-muted); text-align: right; font-size: 11px; }
.artist-studio-payout-dialog .artist-studio-dialog-card,
.artist-studio-documentation-dialog .artist-studio-dialog-card { width: min(620px,calc(100vw - 28px)); }
.artist-studio-payout-fields,
.artist-studio-documentation-fields { display: grid; gap: 13px; }
.artist-studio-payout-fields > label,
.artist-studio-documentation-fields > label,
.artist-studio-payout-method > label { display: grid; gap: 6px; }
.artist-studio-payout-method { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.artist-studio-payout-method[hidden] { display: none; }
.artist-studio-payout-fields > p,
.artist-studio-documentation-fields > p { margin: 0; color: var(--as-muted); font-size: 12px; line-height: 1.55; }
.artist-studio-payout-row { margin-bottom: 8px; }
.artist-studio-distribution-status-pill:is(.is-documentation-requested,.is-pending,.is-processing) { color: #2563eb; background: rgba(59,130,246,.12); }
.artist-studio-distribution-status-pill.is-paid { color: #059669; background: rgba(16,185,129,.12); }
.artist-studio-contracts-page { width: min(1120px,100%); }
.artist-studio-contracts-skeleton { display: grid; gap: 16px; }
.artist-studio-contracts-skeleton[hidden] { display: none; }
.artist-studio-contracts-skeleton-current {
    display: flex;
    min-height: 150px;
    padding: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--as-border);
    border-radius: 11px;
    background: var(--as-panel);
}
.artist-studio-contracts-skeleton-current > span { display: grid; min-width: min(460px,65%); gap: 8px; }
.artist-studio-contracts-skeleton-current i,
.artist-studio-contracts-skeleton-current strong,
.artist-studio-contracts-skeleton-current small,
.artist-studio-contracts-skeleton-current em,
.artist-studio-contracts-skeleton-grid header > *,
.artist-studio-contracts-skeleton-grid section > i {
    display: block;
    border-radius: 8px;
    background: var(--as-panel-subtle);
    animation: artistDistributionSkeleton 1.25s ease-in-out infinite alternate;
}
.artist-studio-contracts-skeleton-current i { width: 108px; height: 12px; }
.artist-studio-contracts-skeleton-current strong { width: min(330px,90%); height: 38px; }
.artist-studio-contracts-skeleton-current small { width: min(430px,100%); height: 12px; }
.artist-studio-contracts-skeleton-current em { width: 154px; height: 40px; }
.artist-studio-contracts-skeleton-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.artist-studio-contracts-skeleton-grid > section {
    display: grid;
    padding: 20px;
    gap: 9px;
    border: 1px solid var(--as-border);
    border-radius: 11px;
    background: var(--as-panel);
}
.artist-studio-contracts-skeleton-grid header { display: grid; margin-bottom: 8px; gap: 7px; }
.artist-studio-contracts-skeleton-grid header strong { width: 145px; height: 20px; }
.artist-studio-contracts-skeleton-grid header small { width: min(270px,75%); height: 11px; }
.artist-studio-contracts-skeleton-grid section > i { width: 100%; height: 76px; }
.artist-studio-contract-current {
    display: flex;
    min-height: 150px;
    padding: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--as-border);
    border-radius: 11px;
    background: var(--as-panel);
}
.artist-studio-contract-current > span { display: flex; flex-direction: column; gap: 6px; }
.artist-studio-contract-current small,
.artist-studio-contract-current em,
.artist-studio-contract-row small { color: var(--as-muted); font-size: 11px; font-style: normal; }
.artist-studio-contract-current strong { font-size: clamp(27px,4vw,42px); letter-spacing: -.04em; }
.artist-studio-contracts-grid { display: grid; margin-top: 16px; grid-template-columns: 1fr 1fr; gap: 16px; }
.artist-studio-contracts-grid > .artist-studio-section { padding: 20px; }
.artist-studio-contract-list { display: grid; gap: 9px; }
.artist-studio-contract-row {
    display: flex;
    min-height: 76px;
    padding: 13px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    color: var(--as-text);
    background: var(--as-bg);
    text-decoration: none;
}
.artist-studio-contract-row > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.artist-studio-contract-row.is-offer { border-color: color-mix(in srgb,var(--as-accent) 30%,var(--as-border)); }

@media (max-width: 980px) {
    .artist-studio-distribution-summary { grid-template-columns: 1fr; }
    .artist-studio-distribution-summary article { min-height: 84px; }
    .artist-studio-distribution-profile-links { grid-template-columns: 1fr; }
    .artist-studio-distribution-release-row { grid-template-columns: 52px minmax(0,1fr) auto; }
    .artist-studio-distribution-release-row > img { width: 52px; height: 52px; }
    .artist-studio-distribution-release-row > .artist-studio-inline-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .artist-studio-distribution-artist-row { grid-template-columns: 1fr 110px 34px; }
    .artist-studio-distribution-artist-row [name="artist_spotify"],
    .artist-studio-distribution-artist-row [name="artist_apple"] { grid-column: span 1; }
    .artist-studio-distribution-artist-row > button { grid-column: 3; grid-row: 1; }
    .artist-studio-contracts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .artist-studio-distribution-onboarding { min-height: 0; padding: 0; border-radius: 0; }
    .artist-studio-distribution-choice-grid { grid-template-columns: 1fr; }
    .artist-studio-distribution-skeleton > div { grid-template-columns: 1fr; }
    .artist-studio-distribution-skeleton i { height: 76px; }
    .artist-studio-distribution-choice-grid button { min-height: 84px; padding: 15px; }
    .artist-studio-distribution-application { min-height: 320px; padding: 26px 18px; }
    .artist-studio-distribution-step > h2 { font-size: 23px; }
    .artist-studio-form-grid.is-three { grid-template-columns: 1fr; }
    .artist-studio-distribution-step-actions { flex-direction: column-reverse; }
    .artist-studio-distribution-step-actions .artist-studio-button { width: 100%; }
    .artist-studio-distribution-guardian { padding: 14px; }
    .artist-studio-distribution-guardian-verification { grid-template-columns: 1fr; }
    .artist-studio-distribution-guardian-verification .artist-studio-button { width: 100%; }
    .artist-studio-distribution-summary { gap: 9px; }
    .artist-studio-distribution-summary article { padding: 14px; border-radius: 9px; }
    .artist-studio-distribution-releases { padding: 14px; border-radius: 9px; }
    .artist-studio-distribution-release-row {
        grid-template-columns: 48px minmax(0,1fr);
        gap: 10px;
    }
    .artist-studio-distribution-release-row > img { width: 48px; height: 48px; }
    .artist-studio-distribution-status-pill { grid-column: 1 / -1; width: max-content; }
    .artist-studio-distribution-release-row > .artist-studio-inline-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .artist-studio-distribution-release-row > .artist-studio-inline-actions .artist-studio-button { width: 100%; min-width: 0; }
    .artist-studio-distribution-dialog { width: calc(100vw - 16px); }
    .artist-studio-distribution-dialog .artist-studio-dialog-card { max-height: calc(100dvh - 16px); border-radius: 11px; }
    .artist-studio-distribution-contract { max-height: 45vh; padding: 15px; }
    .artist-studio-distribution-signature canvas { height: 125px; }
    .artist-studio-distribution-candidate-grid { grid-template-columns: 1fr; }
    #distributionReleaseEditor { max-height: calc(100dvh - 190px); }
    .artist-studio-distribution-editor-section { padding: 13px; }
    .artist-studio-distribution-option-grid { grid-template-columns: 1fr; max-height: 220px; }
    .artist-studio-distribution-artist-row { grid-template-columns: 1fr 94px 34px; }
    .artist-studio-distribution-artist-row [name="artist_spotify"],
    .artist-studio-distribution-artist-row [name="artist_apple"] { grid-column: 1 / -1; }
    .artist-studio-distribution-track-editor { padding: 13px; }
    .artist-studio-distribution-credit-row {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) 34px;
    }
    .artist-studio-distribution-credit-row [name="credit_role"] { grid-column: 1 / -1; }
    .artist-studio-distribution-credit-row > button { grid-column: 3; grid-row: 1; }
    .artist-studio-distribution-tiktok-preview { grid-template-columns: 1fr; }
    .artist-studio-distribution-tiktok-preview .artist-studio-button { width: 100%; }
    .artist-studio-distribution-checks { align-items: flex-start; flex-direction: column; gap: 10px; }
    .artist-studio-royalties-hero { min-height: 0; padding: 18px; border-radius: 9px; }
    .artist-studio-royalties-hero > strong { font-size: 38px; }
    .artist-studio-royalties-hero .artist-studio-button { width: 100%; }
    .artist-studio-payout-method { grid-template-columns: 1fr; }
    .artist-studio-contract-current { padding: 18px; align-items: stretch; flex-direction: column; }
    .artist-studio-contracts-skeleton-current { padding: 18px; align-items: stretch; flex-direction: column; }
    .artist-studio-contracts-skeleton-current > span { min-width: 0; }
    .artist-studio-contracts-skeleton-current em { width: 100%; }
    .artist-studio-contracts-skeleton-grid { grid-template-columns: 1fr; }
    .artist-studio-contracts-skeleton-grid > section { padding: 14px; }
    .artist-studio-contract-current .artist-studio-button { width: 100%; }
    .artist-studio-contracts-grid > .artist-studio-section { padding: 14px; }
    .artist-studio-contract-row { align-items: stretch; flex-direction: column; }
    .artist-studio-contract-row .artist-studio-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .artist-studio-distribution-step,
    .artist-studio-distribution-choice-grid button,
    .artist-studio-distribution-release-row { animation: none !important; transition: none !important; }
}
.artist-studio-profile-preview { position: relative; padding-top: 156px; text-align: center; }
.artist-studio-profile-banner { position: absolute; inset: 0 0 auto; height: 142px; border-radius: 9px 9px 0 0; background: var(--as-panel-subtle) var(--artist-banner) center/cover no-repeat; }
.artist-studio-profile-avatar { position: relative; display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; margin: -55px auto 10px; overflow: hidden; border: 4px solid var(--as-panel); border-radius: 50%; background: var(--as-panel-subtle); font-size: 31px; }
.artist-studio-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.artist-studio-profile-preview h2 { margin: 0; }
.artist-studio-profile-preview p { margin: 5px 0; color: var(--as-muted); }
.artist-studio-profile-fields { display: flex; flex-direction: column; gap: 14px; }
.artist-studio-profile-fields > h2:not(:first-child) { margin-top: 12px; }
.artist-studio-field-hint { margin: -6px 0 2px; color: var(--as-muted); font-size: 12px; line-height: 1.5; }
.artist-studio-vanity-field {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    overflow: hidden;
    gap: 0 !important;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    background: var(--as-panel-subtle);
}
.artist-studio-vanity-field > span { padding-left: 13px; color: var(--as-muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.artist-studio-vanity-field input { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.artist-studio-vanity-field input:disabled { cursor: not-allowed; opacity: .62; }
.artist-studio .profile-link-editor-row { border-color: var(--as-border); background: var(--as-panel-subtle); }
.artist-studio .profile-link-editor-icon { color: var(--as-accent); background: color-mix(in srgb,var(--as-accent) 10%,transparent); }
.artist-studio .profile-link-editor-fields input { border-color: var(--as-border); color: var(--as-text); background: var(--as-panel); }
.artist-studio .profile-link-editor-empty { color: var(--as-muted); }
.artist-studio .profile-link-editor-empty strong { color: var(--as-text); }
.artist-studio-profile-media-settings { display: grid; padding-top: 10px; padding-bottom: 10px; }
.artist-studio-profile-media-settings > h2 { padding: 10px 2px; }
.artist-studio-profile-media-row { display: flex; align-items: center; justify-content: space-between; min-height: 74px; padding: 13px 2px; gap: 18px; border-top: 1px solid var(--as-border); }
.artist-studio-profile-media-row > span { display: flex; align-items: center; gap: 12px; }
.artist-studio-profile-media-row > span > i { width: 22px; color: var(--as-muted); font-size: 18px; text-align: center; }
.artist-studio-profile-media-row > span > span { display: grid; gap: 3px; }
.artist-studio-profile-media-row small { color: var(--as-muted); font-size: 12px; }
.artist-studio-profile-media-row > div { display: flex; gap: 8px; }
.artist-studio-button.is-danger { color: #d8344e; }
.artist-studio-media-actions { display: flex; flex-wrap: wrap; margin-top: 14px; gap: 9px; }

.artist-studio-team-list { display: grid; margin-top: 12px; }
.artist-studio-team-row { display: grid; grid-template-columns: 44px minmax(180px,1fr) 80px 120px 42px; align-items: center; min-height: 68px; padding: 9px 3px; gap: 12px; border-bottom: 1px solid var(--as-border); }
.artist-studio-team-row:last-child { border-bottom: 0; }
.artist-studio-team-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.artist-studio-team-row small { margin-top: 4px; color: var(--as-muted); }
.artist-studio-role { color: var(--as-muted); font-size: 12px; }
.artist-studio-team-row select { min-height: 38px; padding: 0 8px; border: 1px solid var(--as-border); border-radius: 7px; color: var(--as-text); background: var(--as-panel); }
.artist-studio-role-help { padding: 11px 13px; border: 1px solid var(--as-border); border-radius: 8px; background: var(--as-panel-subtle); }
.artist-studio-role-help p { margin: 5px 0; color: var(--as-muted); font-size: 12px; }
.artist-studio-form-help { margin: 7px 0 0; color: var(--as-muted); font-size: 12px; line-height: 1.45; }
.artist-studio-invite-account {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    min-height: 66px;
    padding: 10px;
    gap: 11px;
    border: 1px solid var(--as-border);
    border-radius: 8px;
    background: var(--as-panel-subtle);
}
.artist-studio-invite-account[hidden] { display: none !important; }
.artist-studio-invite-account > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.artist-studio-invite-account small { margin-top: 3px; color: var(--as-muted); }
.artist-studio-fan-row { display: flex; align-items: center; min-height: 64px; padding: 8px 0; gap: 11px; border-bottom: 1px solid var(--as-border); }
.artist-studio-fan-row > span:last-child { display: flex; flex-direction: column; }
.artist-studio-fan-row small { margin-top: 4px; color: var(--as-muted); }
.artist-studio-faq details { border-bottom: 1px solid var(--as-border); }
.artist-studio-faq summary { padding: 18px 3px; font-weight: 750; cursor: pointer; }
.artist-studio-faq details p { max-width: 800px; margin: -4px 0 20px; color: var(--as-muted); line-height: 1.65; }
.artist-studio-faq a { color: var(--as-accent); text-decoration: underline; }

.artist-studio-toast { position: fixed; right: 22px; bottom: 22px; z-index: 300; max-width: min(390px,calc(100vw - 30px)); padding: 13px 16px; border-radius: 8px; color: #fff; background: #16704a; box-shadow: 0 12px 30px rgba(0,0,0,.2); font-size: 13px; font-weight: 700; }
.artist-studio-toast.is-error { background: #b82b36; }
.artist-studio-inline-error {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    gap: 8px;
    border: 1px solid color-mix(in srgb,var(--danger) 30%,var(--as-border));
    border-radius: 9px;
    color: var(--danger);
    background: color-mix(in srgb,var(--danger) 8%,var(--as-panel));
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}
.artist-studio-inline-error i { margin-top: 2px; flex: 0 0 auto; }
.artist-studio-inline-error span { min-width: 0; overflow-wrap: anywhere; }
.artist-studio :is(input,textarea,select).artist-studio-error-control {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--danger) 10%,transparent) !important;
}
.artist-studio :is(.artist-studio-table-row,.artist-studio-row,.artist-studio-event-row,.artist-studio-contract-row,.track-row) > .artist-studio-inline-error {
    flex-basis: 100%;
    grid-column: 1 / -1;
}
.artist-studio :is(.artist-studio-row,.artist-studio-contract-row):has(> .artist-studio-inline-error),
.artist-studio label:has(> .artist-studio-inline-error) {
    flex-wrap: wrap;
}
.artist-studio :is(.artist-studio-row,.artist-studio-contract-row) > .artist-studio-inline-error,
.artist-studio label > .artist-studio-inline-error {
    flex: 0 0 100%;
}
.artist-studio label > .artist-studio-inline-error,
.artist-studio .form-group > .artist-studio-inline-error {
    margin-top: 6px;
}
.artist-studio-invitations-page { display: block; padding: 30px; }
.artist-studio-invitations { width: min(820px,100%); margin: 0 auto; }
.artist-studio-invitations-brand { display: flex; align-items: center; width: max-content; margin-bottom: 54px; gap: 9px; font-weight: 750; }
.artist-studio-invitations-brand img { width: 120px; }
.artist-studio-invitations header h1 { margin: 0; font-size: 42px; letter-spacing: -.04em; }
.artist-studio-invitations header p { margin: 8px 0 24px; color: var(--as-muted); }
.artist-studio-invite-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; min-height: 78px; gap: 13px; border-bottom: 1px solid var(--as-border); }
.artist-studio-invite-card > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.artist-studio-invite-card small { margin-top: 4px; color: var(--as-muted); }
.artist-studio-invite-card > div { display: flex; gap: 7px; }

@media (max-width: 1100px) {
    .artist-studio-shell,
    .artist-studio-shell.is-sidebar-collapsed { display: block; }
    .artist-studio-sidebar,
    .artist-studio-shell.is-sidebar-collapsed .artist-studio-sidebar {
        position: fixed;
        left: 0;
        width: min(320px,88vw);
        transform: translateX(-105%);
        box-shadow: 12px 0 35px rgba(0,0,0,.18);
    }
    .artist-studio-shell.is-mobile-open .artist-studio-sidebar { transform: translateX(0); }
    .artist-studio-shell.is-sidebar-collapsed .artist-studio-brand > span,
    .artist-studio-shell.is-sidebar-collapsed .artist-studio-switcher-copy,
    .artist-studio-shell.is-sidebar-collapsed .artist-studio-switcher-chevron,
    .artist-studio-shell.is-sidebar-collapsed .artist-studio-nav span { display: initial; }
    .artist-studio-shell.is-sidebar-collapsed .artist-studio-brand-link img { width: 104px; height: auto; object-fit: contain; }
    .artist-studio-shell.is-sidebar-collapsed .artist-studio-artist-switcher > button { display: grid; grid-template-columns: 42px minmax(0,1fr) 16px; justify-content: initial; padding: 8px; border-color: var(--as-border); }
    .artist-studio-shell.is-sidebar-collapsed .artist-studio-nav a { justify-content: flex-start; padding: 0 13px; }
    .artist-studio-collapse { display: none; }
    .artist-studio-mobile-close { display: inline-flex; margin-left: auto; }
    .artist-studio-mobile-menu { display: inline-flex; flex: 0 0 44px; }
    .artist-studio-overlay { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(12,15,20,.5); }
    .artist-studio-content { padding: 24px 22px 50px; }
    .artist-studio-home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .artist-studio-topbar { min-height: 64px; padding: 0 12px; gap: 8px; }
    .artist-studio-search { width: auto; min-width: 0; flex: 1; margin: 0; }
    .artist-studio-search input { height: 42px; }
    .artist-studio-icon-button { display: none; }
    .artist-studio-content { padding: 18px 14px 42px; }
    .artist-studio-page-head { align-items: stretch; flex-direction: column; margin-bottom: 18px; }
    .artist-studio-page-head h1 { font-size: 34px; }
    .artist-studio-page-head > .artist-studio-button { width: 100%; }
    .artist-studio-hero { min-height: 370px; border-radius: 14px; }
    .artist-studio-hero-content { inset: auto 18px 18px; align-items: flex-start; flex-wrap: wrap; }
    .artist-studio-hero-avatar { width: 76px; height: 76px; flex-basis: 76px; }
    .artist-studio-hero-content h1 { font-size: 44px; }
    .artist-studio-hero-actions { width: 100%; margin: 4px 0 0; }
    .artist-studio-hero-actions .artist-studio-button { flex: 1; padding: 0 9px; }
    .artist-studio-hero-actions .artist-studio-profile-action { flex: 1; padding: 0 9px; }
    .artist-studio-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .artist-studio-metrics article { padding: 16px; border-bottom: 1px solid var(--as-border); }
    .artist-studio-metrics article:nth-child(2n) { border-right: 0; }
    .artist-studio-metrics article:nth-last-child(-n+2) { border-bottom: 0; }
    .artist-studio-metrics strong { font-size: 26px; }
    .artist-studio-feature-metrics { grid-template-columns: 1fr; }
    .artist-studio-feature-metrics article { border-right: 0; border-bottom: 1px solid var(--as-border); }
    .artist-studio-feature-metrics article:last-child { border-bottom: 0; }
    .artist-studio-feature-panel { padding: 17px; }
    .artist-studio-feature-section-head { align-items: flex-start; }
    .artist-studio-feature-section-head h2 { font-size: 18px; }
    .artist-studio-feature-request { grid-template-columns: 56px minmax(0,1fr); padding: 11px; gap: 12px; }
    .artist-studio-feature-request .artist-studio-feature-cover { width: 56px; height: 56px; }
    .artist-studio-feature-actions { grid-column: 1 / -1; }
    .artist-studio-feature-actions .artist-studio-button { flex: 1; }
    .artist-studio-feature-credit-grid { grid-template-columns: 1fr; }
    .artist-studio-campaign-metrics { grid-template-columns: 1fr; }
    .artist-studio-campaign-metrics article { border-right: 0; }
    .artist-studio-campaign-metrics article:last-child { border-bottom: 0; }
    .artist-studio-section { padding: 17px; }
    .artist-studio .artist-studio-release-streams.artist-analytics-chart-card { padding: 16px; }
    .artist-studio .artist-studio-release-streams-head,
    .artist-studio .artist-studio-release-chart-controls { align-items: stretch; flex-direction: column; }
    .artist-studio .artist-studio-release-chart-controls .artist-studio-range-select { width: 100%; }
    .artist-studio .artist-studio-release-streams .artist-smoothed-chart svg { height: 210px; }
    .artist-studio-campaign-row { grid-template-columns: 52px minmax(0,1fr); gap: 12px; }
    .artist-studio-campaign-row > img { width: 52px; height: 52px; }
    .artist-studio-campaign-actions { grid-column: 1 / -1; justify-content: stretch; }
    .artist-studio-campaign-actions .artist-studio-button { width: 100%; }
    .artist-studio .artist-studio-promotion-selection { padding-inline: 12px; }
    .artist-studio .artist-studio-promotion-toolbar { align-items: stretch; flex-direction: column; }
    .artist-studio .artist-studio-promotion-selection .promotion-select-row { grid-template-columns: 48px minmax(0,1fr) auto; min-height: 74px; gap: 10px; }
    .artist-studio .artist-studio-promotion-selection .track-item-cover,
    .artist-studio .artist-studio-promotion-selection .track-item-cover img { width: 48px; height: 48px; }
    .artist-studio .artist-studio-campaign-select .upload-actions .artist-studio-button { width: 100%; }
    .artist-studio .artist-studio-campaign-back {
        margin-bottom: 15px;
    }
    .artist-studio .artist-studio-campaign-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .artist-studio .artist-studio-campaign-track-list article {
        grid-template-columns: 44px minmax(0,1fr) auto;
        min-height: 78px;
        gap: 6px 12px;
    }
    .artist-studio .artist-studio-campaign-track-list img {
        grid-row: 1 / 3;
        width: 44px;
        height: 44px;
    }
    .artist-studio .artist-studio-campaign-track-title {
        grid-column: 2 / 4;
    }
    .artist-studio .artist-studio-campaign-track-list article > span:nth-of-type(2) {
        grid-column: 2;
    }
    .artist-studio .artist-studio-campaign-track-list article > span:nth-of-type(3) {
        grid-column: 3;
        text-align: right;
    }
    .artist-studio-release-strip { display: flex; margin-right: -17px; padding-right: 17px; overflow-x: auto; }
    .artist-studio-release-strip a { min-width: 132px; }
    .artist-studio-two-column,
    .artist-studio-profile { grid-template-columns: 1fr; }
    .artist-studio-profile > .artist-studio-section:last-child { grid-column: auto; }
    .artist-studio-profile-media-row { align-items: flex-start; flex-direction: column; }
    .artist-studio-verification-grid { grid-template-columns: 1fr; }
    .artist-studio-form-grid { grid-template-columns: 1fr; }
    .artist-studio-event-sync { align-items: flex-start; padding-block: 12px; flex-direction: column; }
    .artist-studio-event-row { grid-template-columns: 52px minmax(0,1fr); }
    .artist-studio-event-row .artist-studio-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .artist-studio-team-row { grid-template-columns: 44px minmax(0,1fr) auto; }
    .artist-studio-team-row select { grid-column: 2 / 3; }
    .artist-studio-team-row > button { grid-column: 3; grid-row: 2; }
    .artist-studio-dialog { width: 100vw; max-width: none; max-height: calc(100vh - 12px); margin: auto 0 0; border-radius: 14px 14px 0 0; }
    .artist-studio-dialog-card { max-height: calc(100vh - 12px); padding: 18px; border-radius: 14px 14px 0 0; }
    .artist-studio-invitations-page { padding: 20px 14px; }
    .artist-studio-invitations-brand { margin-bottom: 34px; }
    .artist-studio-invitations header h1 { font-size: 34px; }
    .artist-studio-invite-card { grid-template-columns: 46px 1fr; padding: 14px 0; }
    .artist-studio-invite-card > div,
    .artist-studio-invite-card > a { grid-column: 1 / -1; }
    .artist-studio-invite-card > div .artist-studio-button { flex: 1; }
}

/* Artist workspace shell and shared interaction primitives */
.artist-studio {
    font-family: "Syne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.artist-studio [hidden] {
    display: none !important;
}

.artist-studio .artist-studio-shell {
    transition: grid-template-columns .42s cubic-bezier(.22,1,.36,1);
}

.artist-studio .artist-studio-sidebar {
    overflow: visible;
    transition: width .46s cubic-bezier(.32,.72,0,1), transform .42s cubic-bezier(.32,.72,0,1);
}

.artist-studio .artist-studio-nav {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
}

/* Native title text covers nav hints without letting off-canvas pseudo-tooltips widen it. */
.artist-studio .artist-studio-nav [data-tooltip]::after {
    display: none;
}

.artist-studio .artist-studio-brand {
    padding: 0 9px;
}

.artist-studio .artist-studio-brand-link {
    position: relative;
    min-width: 0;
    color: var(--as-text);
}

.artist-studio .artist-studio-brand-wordmark {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.artist-studio .artist-studio-brand-wordmark strong {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.055em;
}

.artist-studio .artist-studio-brand-wordmark > span {
    display: inline-block;
    max-width: 78px;
    overflow: hidden;
    color: var(--as-muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -.015em;
    opacity: 1;
    transition: max-width .4s cubic-bezier(.32,.72,0,1), opacity .18s ease, transform .4s cubic-bezier(.32,.72,0,1);
}

.artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-brand {
    justify-content: center;
    padding-inline: 0;
}

.artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-brand-wordmark > span {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
}

.artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-brand-wordmark strong {
    width: 40px;
    overflow: hidden;
    font-size: 0;
    text-align: center;
}

.artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-brand-wordmark strong::before {
    content: "s";
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.08em;
}

.artist-studio .artist-studio-artist-switcher > button {
    border-color: transparent;
    border-radius: 9px;
    background: var(--as-panel-subtle);
}

.artist-studio .artist-studio-nav a,
.artist-studio .artist-studio-collapse {
    min-height: 46px;
    border-radius: 8px;
}

.artist-studio .artist-studio-collapse {
    min-height: 52px;
    border-radius: 0;
}

.artist-studio .artist-studio-switcher-copy,
.artist-studio .artist-studio-switcher-chevron,
.artist-studio .artist-studio-nav span,
.artist-studio .artist-studio-collapse span {
    max-width: 190px;
    overflow: hidden;
    opacity: 1;
    white-space: nowrap;
    transition: max-width .4s cubic-bezier(.32,.72,0,1), opacity .18s ease, transform .4s cubic-bezier(.32,.72,0,1);
}

.artist-studio .artist-studio-shell.is-sidebar-collapsed :is(
    .artist-studio-switcher-copy,
    .artist-studio-switcher-chevron,
    .artist-studio-nav span,
    .artist-studio-collapse span
) {
    display: flex;
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
}

.artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-switcher-chevron {
    display: inline-block;
}

.artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-collapse i {
    transform: none;
}

.artist-studio .artist-studio-topbar {
    min-height: 72px;
    background: var(--as-panel);
    backdrop-filter: none;
}

.artist-studio .artist-studio-search input {
    border-radius: 10px;
    background: var(--as-bg);
}

.artist-studio .artist-studio-user-button {
    border: 2px solid var(--as-panel);
    box-shadow: 0 0 0 1px var(--as-border);
}

.artist-studio .artist-studio-overlay {
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    transition: opacity .32s ease;
}

.artist-studio .artist-studio-overlay[hidden] {
    display: none !important;
    pointer-events: none !important;
}

.artist-studio .artist-studio-mobile-menu,
.artist-studio .artist-studio-mobile-close {
    display: none;
}

.artist-studio .artist-studio-shell.is-mobile-open .artist-studio-overlay {
    opacity: 1;
}

.artist-studio :is(
    .artist-studio-nav a,
    .artist-studio-collapse,
    .artist-studio-brand-link,
    .artist-studio-artist-switcher > button
)[data-tooltip]::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 13px);
    z-index: 1000;
    width: max-content;
    max-width: 190px;
    padding: 7px 9px;
    border: 1px solid var(--as-border);
    border-radius: 6px;
    color: var(--as-panel);
    background: var(--as-text);
    box-shadow: 0 8px 22px rgba(11,15,22,.16);
    content: attr(data-tooltip);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translate(4px,-50%);
    transition: opacity .14s ease, transform .18s ease;
    white-space: nowrap;
}

.artist-studio .artist-studio-shell:not(.is-sidebar-collapsed) [data-tooltip]::after,
.artist-studio .artist-studio-shell.is-sidebar-collapsed [data-tooltip]:not(:hover):not(:focus-visible)::after {
    visibility: hidden;
}

.artist-studio .artist-studio-shell.is-sidebar-collapsed [data-tooltip]:is(:hover,:focus-visible)::after {
    visibility: visible;
    opacity: 1;
    transform: translate(0,-50%);
}

.artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-artist-menu {
    top: 0;
    left: calc(100% + 11px);
}

.artist-studio :is(
    button,
    a,
    input,
    textarea,
    select,
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 3px solid color-mix(in srgb,var(--as-accent) 42%,transparent);
    outline-offset: 2px;
}

.artist-studio [tabindex="-1"]:focus {
    outline: 0;
}

.artist-studio .custom-context-menu.artist-studio-account-menu:not(.playlist-sheet-modal) {
    top: var(--account-menu-top, 72px);
    right: var(--account-menu-right, 20px);
    left: auto;
    width: min(240px, calc(100vw - 24px));
    min-width: 220px;
    max-width: 240px;
    padding: 8px;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(250,250,250,.98);
    backdrop-filter: blur(16px);
    box-shadow: 0 14px 28px rgba(12,12,14,.14);
    transform-origin: top right;
    transform: translateY(-6px) scale(.985);
    transition: transform .32s cubic-bezier(.32,.72,0,1), opacity .2s ease, visibility 0s linear .32s;
}

.artist-studio .custom-context-menu.artist-studio-account-menu:not(.playlist-sheet-modal).open {
    transform: translateY(0) scale(1);
    transition: transform .32s cubic-bezier(.32,.72,0,1), opacity .2s ease;
}

.artist-studio .artist-studio-account-menu:not(.playlist-sheet-modal) .custom-context-menu-list {
    gap: 4px;
}

.artist-studio .artist-studio-account-menu:not(.playlist-sheet-modal) :is(
    .custom-context-menu-account-head,
    .custom-context-menu-separator
) {
    display: none;
}

.artist-studio .artist-studio-account-menu:not(.playlist-sheet-modal) .custom-context-menu-item {
    min-height: 0;
    padding: 10px;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--black);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.artist-studio .artist-studio-account-menu:not(.playlist-sheet-modal) .custom-context-menu-item:hover {
    color: var(--blue);
    border-color: rgba(26,92,255,.22);
    background: rgba(26,92,255,.08);
}

.artist-studio .artist-studio-account-menu:not(.playlist-sheet-modal) .custom-context-menu-item > i:first-child {
    width: 16px;
    color: inherit;
    text-align: center;
}

.artist-studio .artist-studio-account-menu:not(.playlist-sheet-modal) .custom-context-menu-item.context-action-danger {
    color: var(--danger) !important;
}

.artist-studio .artist-studio-account-menu:not(.playlist-sheet-modal) .custom-context-menu-item.context-action-danger:hover {
    color: var(--danger) !important;
    border-color: rgba(239,68,68,.2);
    background: rgba(239,68,68,.08);
}

.artist-studio .artist-studio-account-menu .custom-context-menu-account-copy small,
.artist-studio .artist-studio-account-menu .custom-context-menu-item > small {
    color: var(--text-secondary);
}

.artist-studio .artist-studio-account-menu .custom-context-menu-item > small,
.artist-studio .artist-studio-account-menu .custom-context-menu-trailing {
    margin-left: auto;
    font-size: 11px;
}

.artist-studio .custom-context-menu.artist-studio-page-context-menu {
    z-index: 7100;
}

.artist-studio .custom-context-menu:not(.playlist-sheet-modal) .custom-context-menu-item {
    border-radius: 14px;
}

.artist-studio .custom-context-menu.playlist-sheet-modal.is-open .modal-content {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .artist-studio .artist-studio-listening-bars i {
        animation: none;
        transform: scaleY(.62);
    }

    .artist-studio .artist-studio-listening-bars i:nth-child(2) {
        transform: scaleY(1);
    }
}

.artist-studio #artistHubReleasesPage {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.artist-studio #artistHubReleasesPage > :is(
    .artist-hub-hero,
    #artistHubMobileIndex,
    .artist-hub-discord-banner,
    .hub-tabs
) {
    display: none !important;
}

.artist-studio .site-popup-modal.artist-studio-site-popup {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(8,10,14,.58);
    transition: opacity .24s ease, visibility 0s linear .32s;
}

.artist-studio .artist-studio-site-popup.open,
.artist-studio .artist-studio-site-popup.closing {
    visibility: visible;
}

.artist-studio .artist-studio-site-popup.open {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.artist-studio .artist-studio-site-popup .site-popup-card {
    width: min(440px,100%);
    padding: 20px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    color: var(--as-text);
    background: var(--as-panel);
    box-shadow: 0 20px 56px rgba(8,10,14,.25);
    opacity: .92;
    transform: translateY(16px) scale(.985);
    transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}

.artist-studio .artist-studio-site-popup.open .site-popup-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.artist-studio .artist-studio-site-popup.closing .site-popup-card {
    opacity: 0;
    transform: translateY(10px) scale(.985);
}

.artist-studio .artist-studio-site-popup .site-popup-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
}

.artist-studio .artist-studio-site-popup .site-popup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--as-accent);
    background: color-mix(in srgb,var(--as-accent) 10%,transparent);
}

.artist-studio .artist-studio-site-popup .site-popup-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: var(--as-muted);
    background: transparent;
    cursor: pointer;
}

.artist-studio .artist-studio-site-popup .site-popup-close:hover {
    color: var(--as-text);
    background: var(--as-hover);
}

.artist-studio .artist-studio-site-popup .site-popup-title {
    margin: 15px 0 7px;
    color: var(--as-text);
    font-size: 21px;
}

.artist-studio .artist-studio-site-popup .site-popup-message {
    margin: 0;
    color: var(--as-muted);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.artist-studio .artist-studio-site-popup .site-popup-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
    gap: 8px;
}

.artist-studio .artist-studio-site-popup.is-alert [data-site-popup-cancel]:not(.site-popup-close) {
    display: none;
}

.artist-studio .artist-studio-dialog {
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transition: opacity .22s ease, transform .42s cubic-bezier(.22,1,.36,1);
}

.artist-studio .artist-studio-dialog::backdrop {
    background: rgba(8,10,14,0);
    backdrop-filter: none;
    transition: background .28s ease;
}

.artist-studio .artist-studio-dialog.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.artist-studio .artist-studio-dialog.is-open::backdrop {
    background: rgba(8,10,14,.58);
}

.artist-studio .artist-studio-dialog.is-closing {
    opacity: 0;
    transform: translateY(12px) scale(.985);
}

.artist-studio .artist-studio-dialog-card {
    overscroll-behavior: contain;
}

.artist-studio .artist-studio-content {
    position: relative;
}

.artist-studio .artist-studio-content.is-route-refreshing {
    pointer-events: none;
}

.artist-studio .artist-studio-content.is-route-refreshing::after {
    position: fixed;
    top: 84px;
    right: 24px;
    z-index: 80;
    width: 20px;
    height: 20px;
    border: 3px solid var(--as-border);
    border-top-color: var(--as-accent);
    border-radius: 50%;
    content: "";
    animation: artistStudioRouteSpin .72s linear infinite;
}

.artist-studio .artist-studio-route-skeleton {
    display: grid;
    min-height: calc(100dvh - 120px);
    align-content: start;
    gap: 18px;
}

.artist-studio .artist-studio-route-skeleton header {
    display: flex;
    align-items: center;
    min-height: 54px;
    gap: 14px;
}

.artist-studio .artist-studio-route-skeleton header strong {
    color: var(--as-muted);
    font-size: 14px;
}

.artist-studio :is(
    .artist-studio-skeleton-title,
    .artist-studio-skeleton-line,
    .artist-studio-skeleton-hero,
    .artist-studio-skeleton-metrics > span,
    .artist-studio-skeleton-grid > section,
    .artist-studio-skeleton-chart,
    .artist-studio-skeleton-toolbar,
    .artist-studio-skeleton-table > div,
    .artist-studio-skeleton-table > div > span:first-child,
    .artist-studio-skeleton-avatar
) {
    display: block;
    background: var(--as-panel-subtle);
    animation: artistStudioSkeletonPulse 1.05s ease-in-out infinite alternate;
}

.artist-studio .artist-studio-skeleton-title {
    width: min(240px,42vw);
    height: 34px;
    border-radius: 7px;
}

.artist-studio .artist-studio-skeleton-line {
    width: var(--skeleton-width,82%);
    height: 12px;
    border-radius: 5px;
}

.artist-studio .artist-studio-skeleton-hero {
    min-height: 290px;
    border-radius: 10px;
}

.artist-studio .artist-studio-skeleton-metrics {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    overflow: hidden;
    border: 1px solid var(--as-border);
    border-radius: 9px;
}

.artist-studio .artist-studio-skeleton-metrics > span {
    height: 102px;
    border-right: 1px solid var(--as-border);
}

.artist-studio .artist-studio-skeleton-metrics > span:last-child {
    border-right: 0;
}

.artist-studio .artist-studio-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
}

.artist-studio .artist-studio-skeleton-grid > section {
    min-height: 190px;
    border-radius: 9px;
}

.artist-studio .artist-studio-skeleton-chart {
    display: flex;
    min-height: 310px;
    align-items: end;
    padding: 28px;
    gap: 11px;
    border-radius: 9px;
}

.artist-studio .artist-studio-skeleton-chart i {
    min-height: 18%;
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: color-mix(in srgb,var(--as-accent) 18%,var(--as-panel-subtle));
}

.artist-studio .artist-studio-skeleton-chart i:nth-child(3n + 1) { height: 44%; }
.artist-studio .artist-studio-skeleton-chart i:nth-child(3n + 2) { height: 72%; }
.artist-studio .artist-studio-skeleton-chart i:nth-child(3n) { height: 58%; }

.artist-studio .artist-studio-skeleton-panel,
.artist-studio .artist-studio-skeleton-profile > section {
    display: grid;
    align-content: start;
    min-height: 210px;
    padding: 24px;
    gap: 15px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    background: var(--as-panel);
}

.artist-studio .artist-studio-skeleton-profile {
    display: grid;
    grid-template-columns: minmax(240px,.7fr) minmax(360px,1.3fr);
    gap: 16px;
}

.artist-studio .artist-studio-skeleton-avatar {
    width: 84px;
    height: 84px;
    margin-bottom: 12px;
    border-radius: 50%;
}

.artist-studio .artist-studio-skeleton-toolbar {
    width: min(430px,72%);
    height: 44px;
    border-radius: 8px;
}

.artist-studio .artist-studio-skeleton-table {
    display: grid;
    border-top: 1px solid var(--as-border);
}

.artist-studio .artist-studio-skeleton-table > div {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr);
    min-height: 76px;
    align-items: center;
    padding: 10px 4px;
    gap: 14px;
    border-bottom: 1px solid var(--as-border);
    background: transparent;
}

.artist-studio .artist-studio-skeleton-table > div > span:first-child {
    width: 54px;
    height: 54px;
    border-radius: 7px;
}

.artist-studio .artist-studio-skeleton-table > div > .artist-studio-skeleton-line {
    grid-column: 2;
}

.artist-studio .artist-studio-route-skeleton {
    gap: 0;
}

.artist-studio .artist-studio-skeleton-shape {
    display: block;
    width: var(--skeleton-width,100%);
    border-radius: 6px;
    background: var(--as-panel-subtle);
    animation: artistStudioSkeletonPulse 1.05s ease-in-out infinite alternate;
}

.artist-studio .artist-studio-skeleton-page-head > div {
    width: min(720px,70%);
}

.artist-studio .artist-studio-skeleton-heading {
    width: min(260px,54vw);
    height: 46px;
}

.artist-studio .artist-studio-skeleton-copy {
    width: min(520px,78%);
    height: 13px;
    margin-top: 10px;
}

.artist-studio .artist-studio-skeleton-copy.is-short {
    width: min(280px,62%);
}

.artist-studio .artist-studio-skeleton-copy.is-light {
    width: 150px;
    background: rgba(255,255,255,.28);
}

.artist-studio .artist-studio-skeleton-action {
    width: 148px;
    height: 44px;
    flex: 0 0 148px;
    border-radius: 999px;
}

.artist-studio .artist-studio-skeleton-hero {
    min-height: 330px;
    background: color-mix(in srgb,var(--as-panel-subtle) 82%,#17191d);
}

.artist-studio .artist-studio-skeleton-hero-avatar {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    border: 3px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.16);
}

.artist-studio .artist-studio-skeleton-hero-copy {
    width: min(420px,35vw);
}

.artist-studio .artist-studio-skeleton-hero-name {
    width: min(360px,32vw);
    height: 58px;
    background: rgba(255,255,255,.22);
}

.artist-studio .artist-studio-skeleton-hero-action {
    width: 112px;
    height: 38px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
}

.artist-studio .artist-studio-skeleton-metrics article > .artist-studio-skeleton-shape {
    margin: 0;
}

.artist-studio .artist-studio-skeleton-label {
    width: 76px;
    height: 10px;
}

.artist-studio .artist-studio-skeleton-label.is-short {
    width: 92px;
}

.artist-studio .artist-studio-skeleton-metric {
    width: 88px;
    height: 30px;
    margin: 7px 0 6px !important;
}

.artist-studio .artist-studio-skeleton-home-grid {
    align-items: start;
}

.artist-studio .artist-studio-skeleton-section {
    min-height: 0;
}

.artist-studio .artist-studio-route-skeleton > .artist-studio-skeleton-section + .artist-studio-skeleton-section,
.artist-studio .artist-studio-route-skeleton > .artist-studio-skeleton-section + .artist-studio-two-column,
.artist-studio .artist-studio-route-skeleton > .artist-studio-two-column + .artist-studio-skeleton-section {
    margin-top: 18px;
}

.artist-studio .artist-studio-skeleton-subheading {
    width: min(190px,48%);
    height: 21px;
}

.artist-studio .artist-studio-skeleton-release-strip {
    display: grid;
    grid-template-columns: repeat(4,minmax(90px,1fr));
    gap: 14px;
}

.artist-studio .artist-studio-skeleton-release-strip > span {
    min-width: 0;
}

.artist-studio .artist-studio-skeleton-release-cover {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 9px;
    border-radius: 5px;
}

.artist-studio .artist-studio-skeleton-line {
    height: 11px;
    margin-top: 7px;
}

.artist-studio .artist-studio-skeleton-data-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 86px;
    min-height: 55px;
    align-items: center;
    padding: 9px 2px;
    gap: 14px;
    border-bottom: 1px solid var(--as-border);
}

.artist-studio .artist-studio-skeleton-data-row:last-child {
    border-bottom: 0;
}

.artist-studio .artist-studio-skeleton-data-row.fan {
    grid-template-columns: 44px minmax(0,1fr) 64px;
    min-height: 64px;
}

.artist-studio .artist-studio-skeleton-data-row.event {
    grid-template-columns: 56px minmax(0,1fr) 96px;
    min-height: 88px;
    padding: 15px 3px;
}

.artist-studio .artist-studio-skeleton-row-copy {
    min-width: 0;
}

.artist-studio .artist-studio-skeleton-row-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.artist-studio .artist-studio-skeleton-date {
    width: 56px;
    height: 56px;
    border-radius: 7px;
}

.artist-studio .artist-studio-skeleton-row-tail {
    width: 64px;
    height: 12px;
    justify-self: end;
}

.artist-studio .artist-studio-skeleton-chart {
    height: 240px;
    min-height: 240px;
    margin-top: 4px;
    padding: 18px 8px 0;
    border-bottom: 1px solid var(--as-border);
    border-radius: 0;
}

.artist-studio .artist-studio-skeleton-search {
    width: min(420px,75%);
    height: 42px;
    border: 1px solid var(--as-border);
    border-radius: 8px;
}

.artist-studio .artist-studio-skeleton-real-table {
    border-top: 0;
}

.artist-studio .artist-studio-skeleton-table-row {
    background: transparent;
    animation: none;
}

.artist-studio .artist-studio-skeleton-table-label {
    width: 62%;
    height: 9px;
}

.artist-studio .artist-studio-skeleton-table-value {
    width: min(76%,86px);
    height: 12px;
}

.artist-studio .artist-studio-skeleton-cover {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 4px;
}

.artist-studio .artist-studio-skeleton-notice {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0 15px;
    gap: 20px;
    border: 1px solid var(--as-border);
    border-radius: 8px;
    background: var(--as-panel);
}

.artist-studio .artist-studio-skeleton-profile {
    grid-template-columns: minmax(280px,.75fr) minmax(420px,1.25fr);
}

.artist-studio .artist-studio-skeleton-profile > section {
    padding: 22px;
}

.artist-studio .artist-studio-skeleton-profile-preview {
    position: relative;
    display: grid;
    min-height: 330px;
    justify-items: center;
    padding-top: 156px !important;
    overflow: hidden;
}

.artist-studio .artist-studio-skeleton-profile-banner {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 142px;
    border-radius: 9px 9px 0 0;
}

.artist-studio .artist-studio-skeleton-profile-avatar {
    width: 104px;
    height: 104px;
    margin: -55px auto 10px;
    border: 4px solid var(--as-panel);
    border-radius: 50%;
}

.artist-studio .artist-studio-skeleton-fields {
    display: flex !important;
    min-height: 720px !important;
    flex-direction: column;
    gap: 14px !important;
}

.artist-studio .artist-studio-skeleton-fields label,
.artist-studio .artist-studio-verification-grid label {
    display: grid;
    gap: 7px;
}

.artist-studio .artist-studio-skeleton-field {
    width: 100%;
    height: 42px;
    border: 1px solid var(--as-border);
    border-radius: 7px;
}

.artist-studio .artist-studio-skeleton-field.is-textarea {
    height: 116px;
}

.artist-studio .artist-studio-skeleton-faq {
    display: grid;
}

.artist-studio .artist-studio-skeleton-faq > span {
    height: 18px;
    margin: 0;
    padding: 27px 3px;
    border-bottom: 1px solid var(--as-border);
    background-clip: content-box;
}

.artist-studio .artist-studio-route-error {
    display: grid;
    min-height: calc(100dvh - 150px);
    place-content: center;
    justify-items: center;
    text-align: center;
}

.artist-studio .artist-studio-route-error > i {
    margin-bottom: 18px;
    color: var(--as-muted);
    font-size: 28px;
}

.artist-studio .artist-studio-route-error h1 {
    margin: 0;
}

.artist-studio .artist-studio-route-error p {
    max-width: 520px;
    margin: 9px 0 20px;
    color: var(--as-muted);
}

.artist-studio .artist-studio-content.is-route-entering > * {
    animation: artistStudioRouteEnter .24s ease both;
}

.artist-studio .artist-studio-invite-note {
    margin: -4px 0 2px;
    color: var(--as-muted);
    font-size: 12px;
    line-height: 1.5;
}

.artist-studio :is(.artist-studio-invite-confirm-account,.artist-studio-invite-account) {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center;
    margin-bottom: 18px;
    padding: 12px 0;
    gap: 12px;
    border-bottom: 1px solid var(--as-border);
}

.artist-studio :is(.artist-studio-invite-confirm-account,.artist-studio-invite-account) > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.artist-studio :is(.artist-studio-invite-confirm-account,.artist-studio-invite-account) small {
    margin-top: 4px;
    color: var(--as-muted);
}

.artist-studio .artist-studio-dialog-status {
    min-height: 20px;
    margin: 2px 0 0;
    color: var(--danger);
    font-size: 12px;
    line-height: 1.45;
}

.artist-studio .artist-smoothed-chart {
    position: relative;
}

.artist-studio .artist-chart-hover-tooltip {
    position: absolute;
    z-index: 3;
    min-width: 148px;
    max-width: 220px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px;
    color: #fff;
    background: rgba(9,13,22,.94);
    box-shadow: 0 16px 38px rgba(8,12,22,.26);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,-8px);
    transition: opacity .14s ease, transform .14s ease;
}

.artist-studio .artist-chart-hover-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%,0);
}

.artist-studio .artist-chart-hover-dot {
    position: absolute;
    z-index: 2;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--as-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--as-accent) 18%,transparent);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,-50%);
}

.artist-studio .artist-chart-hover-dot.is-visible {
    opacity: 1;
}

.artist-studio .artist-chart-hover-tooltip span {
    display: block;
}

.artist-studio .artist-chart-hover-date,
.artist-studio .artist-chart-hover-label {
    color: rgba(255,255,255,.72);
    font-size: 12px;
}

.artist-studio .artist-chart-hover-value {
    margin: 3px 0;
    font-size: 18px;
    font-weight: 750;
}

.artist-studio button.sa-dropdown-item {
    width: 100%;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
}

@keyframes artistStudioSkeletonPulse {
    from { opacity: .55; }
    to { opacity: 1; }
}

@keyframes artistStudioRouteSpin {
    to { transform: rotate(360deg); }
}

@keyframes artistStudioRouteEnter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
    .artist-studio .artist-studio-skeleton-profile {
        grid-template-columns: 1fr;
    }

    .artist-studio .artist-studio-content.is-route-refreshing::after {
        top: 76px;
        right: 18px;
    }

    .artist-studio .artist-studio-sidebar,
    .artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-sidebar {
        top: 0;
        z-index: 50;
        width: min(320px,88vw);
        max-width: 320px;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        overscroll-behavior: contain;
        transform: translate3d(-105%,0,0);
    }

    .artist-studio .artist-studio-nav {
        min-height: 0;
        padding-bottom: max(12px,env(safe-area-inset-bottom));
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .artist-studio .artist-studio-collapse {
        display: none;
    }

    .artist-studio .artist-studio-shell.is-mobile-open .artist-studio-sidebar {
        transform: translate3d(0,0,0);
    }

    .artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-brand {
        justify-content: flex-start;
        padding-inline: 9px;
    }

    .artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-brand-wordmark > span {
        display: inline;
        max-width: 78px;
        opacity: 1;
        transform: none;
    }

    .artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-brand-wordmark strong {
        width: auto;
        overflow: visible;
        font-size: 19px;
        text-align: left;
    }

    .artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-brand-wordmark strong::before {
        content: none;
    }

    .artist-studio .artist-studio-shell.is-sidebar-collapsed :is(.artist-studio-switcher-copy,.artist-studio-switcher-chevron,.artist-studio-nav span) {
        display: flex;
        max-width: 190px;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-switcher-chevron {
        display: inline-block;
    }

    .artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-artist-switcher > button {
        display: grid;
        grid-template-columns: 42px minmax(0,1fr) 16px;
        justify-content: initial;
        padding: 8px;
        border-color: transparent;
    }

    .artist-studio .artist-studio-shell.is-sidebar-collapsed .artist-studio-nav a {
        justify-content: flex-start;
        padding: 0 13px;
    }

    .artist-studio .artist-studio-overlay {
        position: fixed;
        inset: 0;
        z-index: 45;
        display: block;
        background: rgba(8,10,14,.56);
    }

    .artist-studio .artist-studio-mobile-menu,
    .artist-studio .artist-studio-mobile-close {
        display: inline-flex;
    }

    .artist-studio .artist-studio-shell [data-tooltip]::after {
        display: none;
    }

    .artist-studio #artistHubReleasesPage .hub-tab-panel.is-active {
        display: block !important;
    }

    .artist-studio #artistHubReleasesPage .hub-tab-panel:not(.is-active) {
        display: none !important;
    }
}

@media (max-width: 760px) {
    .artist-studio .artist-studio-route-skeleton {
        min-height: calc(100dvh - 94px);
        gap: 0;
    }

    .artist-studio .artist-studio-route-skeleton header {
        min-height: 46px;
    }

    .artist-studio .artist-studio-skeleton-title {
        width: 56vw;
        height: 30px;
    }

    .artist-studio .artist-studio-skeleton-hero {
        min-height: 320px;
    }

    .artist-studio .artist-studio-skeleton-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .artist-studio .artist-studio-skeleton-metrics > span {
        height: 82px;
        border-bottom: 1px solid var(--as-border);
    }

    .artist-studio .artist-studio-skeleton-metrics > span:nth-child(2n) {
        border-right: 0;
    }

    .artist-studio .artist-studio-skeleton-metrics > span:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .artist-studio .artist-studio-skeleton-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .artist-studio .artist-studio-skeleton-grid > section {
        min-height: 150px;
    }

    .artist-studio .artist-studio-skeleton-chart {
        min-height: 230px;
        padding: 18px 12px;
        gap: 6px;
    }

    .artist-studio .artist-studio-skeleton-panel,
    .artist-studio .artist-studio-skeleton-profile > section {
        min-height: 180px;
        padding: 17px;
    }

    .artist-studio .artist-studio-skeleton-table > div {
        min-height: 68px;
    }

    .artist-studio .artist-studio-skeleton-page-head > div {
        width: 100%;
    }

    .artist-studio .artist-studio-skeleton-heading {
        width: 56vw;
        height: 36px;
    }

    .artist-studio .artist-studio-skeleton-action {
        width: 100%;
        flex-basis: 44px;
    }

    .artist-studio .artist-studio-skeleton-hero {
        min-height: 370px;
    }

    .artist-studio .artist-studio-skeleton-hero-avatar {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }

    .artist-studio .artist-studio-skeleton-hero-copy {
        width: calc(100% - 94px);
    }

    .artist-studio .artist-studio-skeleton-hero-name {
        width: min(220px,100%);
        height: 43px;
    }

    .artist-studio .artist-studio-skeleton-hero .artist-studio-hero-actions {
        width: 100%;
        margin-left: 0;
    }

    .artist-studio .artist-studio-skeleton-hero-action {
        flex: 1;
    }

    .artist-studio .artist-studio-skeleton-release-strip {
        display: flex;
        margin-right: -17px;
        padding-right: 17px;
        overflow: hidden;
    }

    .artist-studio .artist-studio-skeleton-release-strip > span {
        min-width: 132px;
    }

    .artist-studio .artist-studio-skeleton-profile {
        grid-template-columns: 1fr;
    }

    .artist-studio .artist-studio-skeleton-data-row.event {
        grid-template-columns: 52px minmax(0,1fr);
    }

    .artist-studio .artist-studio-skeleton-data-row.event .artist-studio-skeleton-row-tail {
        grid-column: 1 / -1;
        width: 96px;
    }

    .artist-studio :is(.artist-studio-invite-confirm-account,.artist-studio-invite-account) {
        grid-template-columns: 46px minmax(0,1fr);
    }

    .artist-studio :is(.artist-studio-invite-confirm-account,.artist-studio-invite-account) > button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .artist-studio .artist-studio-topbar {
        min-height: 64px;
    }

    .artist-studio #artistHubReleasesPage .hub-tab-panel.is-active {
        display: block !important;
    }

    .artist-studio #artistHubReleasesPage .hub-tab-panel:not(.is-active) {
        display: none !important;
    }

    .artist-studio .artist-studio-dialog {
        transform: translateY(calc(100% + 18px));
    }

    .artist-studio .artist-studio-dialog.is-open {
        transform: translateY(0);
    }

    .artist-studio .artist-studio-dialog.is-closing {
        transform: translateY(calc(100% + 18px));
    }

    .artist-studio .artist-studio-site-popup {
        align-items: flex-end;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }

    .artist-studio .artist-studio-site-popup .site-popup-card {
        width: 100%;
        max-height: 88dvh;
        padding: 9px 16px 16px;
        overflow-y: auto;
        border-radius: 20px;
        opacity: 1;
        transform: translateY(calc(100% + 28px));
    }

    .artist-studio .artist-studio-site-popup .site-popup-card::before {
        display: block;
        width: 40px;
        height: 5px;
        margin: 0 auto 8px;
        border-radius: 999px;
        background: color-mix(in srgb,var(--as-muted) 54%,transparent);
        content: "";
    }

    .artist-studio .artist-studio-site-popup.open .site-popup-card {
        transform: translateY(0);
    }

    .artist-studio .artist-studio-site-popup.closing .site-popup-card {
        transform: translateY(calc(100% + 28px));
    }

    .artist-studio .artist-studio-site-popup .site-popup-actions {
        align-items: stretch;
    }

    .artist-studio .artist-studio-site-popup .site-popup-actions .artist-studio-button {
        min-height: 46px;
        flex: 1;
    }
}

/* Artist Studio entrance: the launch lockup resolves into the workspace brand. */
.artist-studio.artist-studio-intro-pending {
    overflow: hidden;
}

.artist-studio .artist-studio-intro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    overflow: hidden;
    place-items: center;
    color: var(--as-text);
    background:
        radial-gradient(circle at 50% 48%, color-mix(in srgb,var(--as-accent) 9%,transparent), transparent 32%),
        var(--as-bg);
    animation: none;
    isolation: isolate;
}

.artist-studio.artist-studio-intro-pending .artist-studio-intro {
    display: grid;
    animation: artistStudioIntroDismiss 2.25s cubic-bezier(.22,1,.36,1) both;
}

.artist-studio .artist-studio-intro-orb {
    position: absolute;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--as-accent) 24%,transparent);
    filter: blur(22px);
    animation: artistStudioIntroOrb 1.75s cubic-bezier(.22,1,.36,1) both;
}

.artist-studio .artist-studio-intro-lockup {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 12px;
    transform-origin: center;
    animation: artistStudioIntroLockupDesktop 2.25s cubic-bezier(.22,1,.36,1) both;
    will-change: transform, filter, opacity;
}

.artist-studio .artist-studio-intro-lockup strong {
    display: inline-flex;
    font-size: clamp(48px,6.2vw,82px);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.075em;
}

.artist-studio .artist-studio-intro-lockup strong > span {
    display: inline-block;
    opacity: 0;
    animation: artistStudioIntroLetter .95s cubic-bezier(.16,1,.3,1) 70ms both;
    will-change: transform, filter, opacity;
}

.artist-studio .artist-studio-intro-lockup strong > span:nth-child(2) { animation-delay: 104ms; }
.artist-studio .artist-studio-intro-lockup strong > span:nth-child(3) { animation-delay: 138ms; }
.artist-studio .artist-studio-intro-lockup strong > span:nth-child(4) { animation-delay: 172ms; }
.artist-studio .artist-studio-intro-lockup strong > span:nth-child(5) { animation-delay: 206ms; }
.artist-studio .artist-studio-intro-lockup strong > span:nth-child(6) { animation-delay: 240ms; }
.artist-studio .artist-studio-intro-lockup strong > span:nth-child(7) { animation-delay: 274ms; }
.artist-studio .artist-studio-intro-lockup strong > span:nth-child(8) { animation-delay: 308ms; }

.artist-studio .artist-studio-intro-for {
    display: inline-block;
    color: var(--as-muted);
    font-size: clamp(18px,2vw,27px);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.035em;
    white-space: nowrap;
    animation: artistStudioIntroFor 1.35s cubic-bezier(.16,1,.3,1) .34s both;
    transform-origin: left center;
}

.artist-studio.artist-studio-intro-pending .artist-studio-shell {
    animation: artistStudioShellLaunch 2.25s cubic-bezier(.22,1,.36,1) both;
    transform-origin: 50% 48%;
}

@keyframes artistStudioIntroLetter {
    0% {
        opacity: 0;
        filter: blur(12px);
        transform: translate3d(0,18px,0) scale(.82);
    }
    58% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0,-2px,0) scale(1.035);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

@keyframes artistStudioIntroFor {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0 round 12px);
        filter: blur(9px);
        transform: translateX(-18px) scaleX(.72);
    }
    58% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 12px);
        filter: blur(0);
        transform: translateX(2px) scaleX(1.025);
    }
    100% {
        opacity: 1;
        clip-path: inset(0);
        filter: blur(0);
        transform: none;
    }
}

@keyframes artistStudioIntroOrb {
    0% { opacity: 0; transform: scale(.25); }
    34% { opacity: .8; transform: scale(1); }
    72% { width: 290px; opacity: .38; border-radius: 48%; transform: scale(1.18,.72); }
    100% { width: 360px; opacity: 0; border-radius: 42%; transform: scale(1.5,.48); }
}

@keyframes artistStudioIntroLockupDesktop {
    0% {
        opacity: 0;
        filter: blur(14px);
        transform: scale(.8);
    }
    21% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1.035);
    }
    66% {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
    100% {
        opacity: 0;
        filter: blur(2px);
        transform: translate(calc(-50vw + 98px),calc(-50vh + 36px)) scale(.28);
    }
}

@keyframes artistStudioIntroDismiss {
    0%, 76% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes artistStudioShellLaunch {
    0%, 68% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(1.018);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

@media (max-width: 1100px) {
    .artist-studio .artist-studio-intro-lockup {
        animation-name: artistStudioIntroLockupMobile;
    }

    @keyframes artistStudioIntroLockupMobile {
        0% {
            opacity: 0;
            filter: blur(14px);
            transform: translateY(12px) scale(.78);
        }
        22% {
            opacity: 1;
            filter: blur(0);
            transform: translateY(0) scale(1.035);
        }
        69% {
            opacity: 1;
            filter: blur(0);
            transform: none;
        }
        100% {
            opacity: 0;
            filter: blur(3px);
            transform: translateY(calc(-50dvh + 38px + env(safe-area-inset-top))) scale(.5);
        }
    }
}

@media (max-width: 760px) {
    .artist-studio .artist-studio-intro-lockup {
        max-width: calc(100vw - 38px);
        align-items: center;
        flex-direction: column;
        gap: 7px;
    }

    .artist-studio .artist-studio-intro-lockup strong {
        font-size: clamp(38px,12.5vw,52px);
    }

    .artist-studio .artist-studio-intro-for {
        font-size: 15px;
        letter-spacing: -.02em;
    }

    .artist-studio .artist-studio-intro-orb {
        width: 54px;
        height: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .artist-studio .artist-studio-intro {
        display: none !important;
    }

    .artist-studio.artist-studio-intro-pending .artist-studio-shell {
        opacity: 1;
        filter: none;
        animation: none !important;
        transform: none;
    }

    .artist-studio .artist-studio-shell,
    .artist-studio .artist-studio-sidebar,
    .artist-studio .artist-studio-overlay,
    .artist-studio .custom-context-menu,
    .artist-studio .custom-context-menu-list,
    .artist-studio .artist-studio-dialog,
    .artist-studio .artist-studio-site-popup,
    .artist-studio .artist-studio-site-popup .site-popup-card,
    .artist-studio .artist-studio-content.is-route-entering > *,
    .artist-studio .artist-studio-skeleton-shape,
    .artist-studio :is(
        .artist-studio-skeleton-title,
        .artist-studio-skeleton-line,
        .artist-studio-skeleton-hero,
        .artist-studio-skeleton-metrics > span,
        .artist-studio-skeleton-grid > section,
        .artist-studio-skeleton-chart,
        .artist-studio-skeleton-toolbar,
        .artist-studio-skeleton-table > div,
        .artist-studio-skeleton-table > div > span:first-child,
        .artist-studio-skeleton-avatar
    ) {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

.artist-studio .artist-studio-distribution-dialog[open] {
    position: fixed;
    inset: 50% auto auto 50%;
    width: min(1000px,calc(100vw - 16px));
    max-width: 1000px;
    margin: 0;
    transform: translate(-50%,calc(-50% + 18px)) scale(.985);
}

.artist-studio .artist-studio-distribution-dialog[open].is-open {
    transform: translate(-50%,-50%) scale(1);
}

.artist-studio .artist-studio-distribution-dialog[open].is-closing {
    transform: translate(-50%,calc(-50% + 12px)) scale(.985);
}

@media (max-width: 760px) {
    .artist-studio #distributionReleaseDialog[open] {
        inset: auto 0 0;
        width: 100vw;
        max-width: none;
        max-height: calc(100dvh - 8px);
        transform: translateY(18px) scale(.99);
    }

    .artist-studio #distributionReleaseDialog[open].is-open {
        transform: translateY(0) scale(1);
    }

    .artist-studio #distributionReleaseDialog[open].is-closing {
        transform: translateY(16px) scale(.99);
    }

    .artist-studio #distributionReleaseDialog .artist-studio-dialog-card {
        max-height: calc(100dvh - 8px);
        padding-top: 10px;
        border-radius: 18px 18px 0 0;
        overscroll-behavior: contain;
    }

    .artist-studio #distributionReleaseDialog .artist-studio-dialog-card::before {
        content: "";
        display: block;
        width: 42px;
        height: 5px;
        margin: 0 auto 3px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: color-mix(in srgb,var(--as-muted) 52%,transparent);
    }

    .artist-studio #distributionReleaseDialog header button[value="cancel"],
    .artist-studio #distributionReleaseDialog footer button[value="cancel"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0,0,0,0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Flat Artist Hub upload surface */
.artist-studio #releaseUploadPage {
    color: var(--as-text);
}

.artist-studio #releaseUploadPage .sv-label-with-tooltip {
    align-items: center;
    gap: 7px;
}

.artist-studio #releaseUploadPage .sv-tooltip-trigger {
    margin: -2px 0 0;
    flex: 0 0 19px;
}

.artist-studio #releaseUploadPage .upload-section-sub,
.artist-studio #releaseUploadPage .upload-cover-placeholder,
.artist-studio #releaseUploadPage .upload-audio-dz-inner p,
.artist-studio #releaseUploadPage .upload-audio-dz-inner small {
    color: var(--as-muted);
}

@media (max-width: 1023px) {
    .artist-studio #releaseUploadPage {
        --upload-native-action-bg: color-mix(in srgb,var(--as-panel) 70%,transparent);
    }

    .artist-studio #releaseUploadPage .upload-cover-zone,
    .artist-studio #releaseUploadPage .upload-track-form-card,
    .artist-studio #releaseUploadPage .upload-audio-dropzone {
        border-color: var(--as-border);
        background: color-mix(in srgb,var(--as-panel) 42%,transparent);
        box-shadow: none;
    }
}

@media (min-width: 1024px) {
    .artist-studio #releaseUploadPage {
        max-width: 1040px;
        padding: 0 0 64px;
    }

    .artist-studio #releaseUploadPage .upload-stepper {
        height: 54px;
        margin-bottom: 16px;
        padding: 0 18px;
        border: 1px solid var(--as-border);
        border-radius: 12px;
        background: var(--as-panel);
        box-shadow: 0 3px 12px rgba(12,12,14,.04);
    }

    .artist-studio #releaseUploadPage .upload-section {
        margin-bottom: 18px;
        padding: 22px;
        border: 1px solid var(--as-border);
        border-radius: 12px;
        background: var(--as-panel);
        box-shadow: 0 3px 12px rgba(12,12,14,.04);
    }

    .artist-studio #releaseUploadPage .upload-section:last-child {
        border-bottom: 1px solid var(--as-border);
    }

    .artist-studio #releaseUploadPage .upload-section-hd {
        margin-bottom: 18px;
    }

    .artist-studio #releaseUploadPage .upload-section-title {
        font-size: 21px;
    }

    .artist-studio #releaseUploadPage .upload-draft-layout {
        grid-template-columns: 176px minmax(0,1fr);
        gap: 22px;
    }

    .artist-studio #releaseUploadPage .upload-cover-col {
        position: static;
    }

    .artist-studio #releaseUploadPage .upload-form-grid {
        gap: 13px;
    }

    .artist-studio #releaseUploadPage .form-group {
        gap: 7px;
    }

    .artist-studio #releaseUploadPage .form-group > label,
    .artist-studio #releaseUploadPage .form-group > .sv-label-with-tooltip label {
        color: var(--as-muted);
        font-size: 12px;
        font-weight: 700;
    }

    .artist-studio #releaseUploadPage .upload-cover-zone,
    .artist-studio #releaseUploadPage .upload-track-form-card,
    .artist-studio #releaseUploadPage .upload-audio-dropzone,
    .artist-studio #releaseUploadPage .upload-policy-row {
        border-color: var(--as-border);
        background: color-mix(in srgb,var(--as-panel) 52%,transparent);
        box-shadow: none;
    }

    .artist-studio #releaseUploadPage .form-group input:not([type="checkbox"]):not([type="radio"]),
    .artist-studio #releaseUploadPage .form-group textarea,
    .artist-studio #releaseUploadPage .form-group select {
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        border-color: var(--as-border);
        border-radius: 7px;
        color: var(--as-text);
        background: var(--as-panel-subtle);
        box-shadow: none;
    }

    .artist-studio #releaseUploadPage .form-group textarea {
        min-height: 84px;
    }

    .artist-studio #releaseUploadPage .form-group input:focus,
    .artist-studio #releaseUploadPage .form-group textarea:focus,
    .artist-studio #releaseUploadPage .form-group select:focus {
        border-color: var(--as-accent);
        background: var(--as-panel);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--as-accent) 10%,transparent);
    }

    .artist-studio #releaseUploadPage .upload-vis-opt span {
        border-color: var(--as-border);
        color: var(--as-muted);
        background: color-mix(in srgb,var(--as-panel) 42%,transparent);
    }

    .artist-studio #releaseUploadPage .upload-vis-opt input[type="radio"]:checked + span {
        border-color: var(--as-accent);
        color: var(--as-accent);
        background: color-mix(in srgb,var(--as-accent) 10%,transparent);
    }
}

/* Distributed release detail */
.artist-studio .artist-studio-release-detail {
    width: min(1240px,100%);
    margin: 0 auto;
}

.artist-studio .artist-studio-release-detail-back {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0 0 18px;
    padding: 0 13px;
    gap: 8px;
    border-radius: 999px;
    color: var(--as-muted);
    background: var(--as-panel-subtle);
    font-size: 13px;
    font-weight: 700;
}

.artist-studio .artist-studio-release-detail-back:hover {
    color: var(--as-text);
    background: var(--as-hover);
}

.artist-studio .artist-studio-release-detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px,230px) minmax(0,1fr);
    min-height: 280px;
    padding: 26px;
    overflow: hidden;
    align-items: end;
    gap: clamp(22px,4vw,48px);
    border: 1px solid var(--as-border);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 12%,color-mix(in srgb,var(--as-accent) 16%,transparent),transparent 36%),
        linear-gradient(135deg,var(--as-panel),var(--as-panel-subtle));
}

.artist-studio .artist-studio-release-detail-hero::after {
    position: absolute;
    inset: auto -8% -48% 42%;
    height: 230px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--as-accent) 7%,transparent);
    filter: blur(40px);
    content: "";
    pointer-events: none;
}

.artist-studio .artist-studio-release-detail-hero > img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 9px;
    object-fit: cover;
    background: var(--as-panel-subtle);
    box-shadow: 0 20px 42px rgba(10,20,44,.18);
}

.artist-studio .artist-studio-release-detail-title {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-bottom: 4px;
}

.artist-studio .artist-studio-release-detail-eyebrow {
    display: block;
    color: var(--as-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.artist-studio .artist-studio-release-detail-title h1 {
    max-width: 900px;
    margin: 9px 0 0;
    font-size: clamp(38px,6vw,76px);
    line-height: .96;
    letter-spacing: -.055em;
    overflow-wrap: anywhere;
}

.artist-studio .artist-studio-release-detail-title p {
    margin: 13px 0 17px;
    color: var(--as-muted);
    font-size: 15px;
    font-weight: 650;
}

.artist-studio .artist-studio-release-detail-title .artist-studio-distribution-status-pill {
    display: inline-flex;
}

.artist-studio .artist-studio-release-detail-metrics {
    margin-bottom: 20px;
}

.artist-studio .artist-studio-release-streams {
    margin-bottom: 20px;
}

.artist-studio .artist-studio-release-streams.artist-analytics-chart-card {
    padding: 22px;
    gap: 16px;
    color: var(--as-text);
    border-color: var(--as-border);
    background: var(--as-panel);
}
.artist-studio .artist-studio-release-streams .artist-chart-meta h3 {
    color: var(--as-text);
    font-size: 21px;
}
.artist-studio .artist-studio-release-streams .artist-chart-meta p { color: var(--as-muted); }
.artist-studio .artist-studio-release-chart-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.artist-studio .artist-studio-release-streams .artist-chart-switcher {
    padding: 3px;
    border-radius: 999px;
    background: var(--as-panel-subtle);
}
.artist-studio .artist-studio-release-streams .artist-chart-switch {
    border: 0;
    color: #fff;
    background: var(--as-accent);
}
.artist-studio .artist-studio-release-streams .artist-smoothed-chart {
    border-color: var(--as-border);
    background: var(--as-bg);
}
.artist-studio .artist-studio-release-streams .artist-chart-grid line {
    stroke: color-mix(in srgb, var(--as-text) 10%, transparent);
}
.artist-studio #artistReleaseSpotifyLinePath {
    stroke: var(--as-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.artist-studio .artist-studio-release-streams .artist-chart-axis-labels { color: var(--as-muted); }

.artist-studio .artist-studio-release-service-links {
    display: flex;
    margin: 0 0 20px;
    padding: 14px 16px;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    color: var(--as-text);
    background: var(--as-panel);
}
.artist-studio .artist-studio-release-service-links > span { font-size: 12px; font-weight: 800; }
.artist-studio .artist-studio-release-service-links > div { display: flex; flex-wrap: wrap; gap: 7px; }
.artist-studio .artist-studio-release-service-links a,
.artist-studio .artist-studio-release-track-links a {
    display: inline-flex;
    padding: 6px 9px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--as-border);
    border-radius: 999px;
    color: var(--as-text);
    background: var(--as-panel-subtle);
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}
.artist-studio .artist-studio-release-service-links a:hover,
.artist-studio .artist-studio-release-track-links a:hover { border-color: var(--as-accent); color: var(--as-accent); }
.artist-studio .artist-studio-release-service-links small { margin-left: auto; color: var(--as-muted); font-size: 10px; }

.artist-studio .artist-studio-release-detail-metrics strong.is-date {
    font-size: clamp(19px,2vw,25px);
    letter-spacing: -.025em;
}

.artist-studio .artist-studio-release-detail-metrics strong.is-code {
    overflow: hidden;
    font-size: clamp(17px,1.8vw,23px);
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-studio .artist-studio-release-detail-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    margin-bottom: 20px;
    gap: 20px;
}

.artist-studio .artist-studio-release-detail-layout.is-with-pitch {
    grid-template-columns: minmax(0,1fr) minmax(260px,340px);
    align-items: start;
}

/* Full-page distribution preparation and release royalty splits. */
.artist-studio .artist-studio-distribution-page.is-editor-page {
    width: min(900px,100%);
    margin: 0 auto;
}
.artist-studio .artist-studio-distribution-page.is-editor-page > :is(
    #distributionSkeleton,#distributionOnboarding,#distributionApplicationPending,#distributionDashboard
) { display: none !important; }
.artist-studio .artist-studio-distribution-editor-back { margin-bottom: 18px; }
.artist-studio .artist-studio-distribution-progress {
    display: flex;
    height: 64px;
    margin: 0 0 20px;
    padding: 0 24px;
    align-items: center;
    border-radius: 14px;
    background: var(--as-panel);
}
.artist-studio .artist-studio-distribution-progress .upload-step-item {
    display: flex;
    padding: 0;
    align-items: center;
    gap: 10px;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}
.artist-studio .artist-studio-distribution-progress .upload-step-item:disabled { cursor: default; }
.artist-studio .artist-studio-distribution-editor-page { margin: 0; }
.artist-studio .artist-studio-distribution-editor-page .artist-studio-dialog-card {
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.artist-studio .artist-studio-distribution-editor-page .artist-studio-dialog-card > header { display: none; }
.artist-studio .artist-studio-distribution-editor-page #distributionReleaseEditor { max-height: none; padding: 0; overflow: visible; gap: 18px; }
.artist-studio .artist-studio-distribution-editor-step {
    padding: 22px;
    border: 1px solid var(--as-border);
    border-radius: 14px;
    background: var(--as-panel);
    box-shadow: 0 3px 12px rgba(12,12,14,.04);
}
.artist-studio .artist-studio-distribution-step-heading { margin-bottom: 20px; }
.artist-studio .artist-studio-distribution-step-heading > span { color: var(--as-accent); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.artist-studio .artist-studio-distribution-step-heading h2 { margin: 5px 0 4px; font-size: 24px; letter-spacing: -.025em; }
.artist-studio .artist-studio-distribution-step-heading p { margin: 0; color: var(--as-muted); font-size: 12px; line-height: 1.45; }
.artist-studio .artist-studio-distribution-editor-step > * + * { margin-top: 14px; }
.artist-studio .artist-studio-distribution-editor-step > .artist-studio-distribution-step-heading + * { margin-top: 0; }
.artist-studio .artist-studio-distribution-editor-page .artist-studio-distribution-release-picker {
    padding: 22px;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-panel);
}
.artist-studio .artist-studio-distribution-editor-page .artist-studio-dialog-card > footer {
    position: sticky;
    bottom: 12px;
    z-index: 10;
    margin-top: 18px;
    padding: 13px;
    border: 1px solid var(--as-border);
    border-radius: 11px;
    background: color-mix(in srgb,var(--as-panel) 94%,transparent);
    box-shadow: 0 12px 30px rgba(10,20,44,.12);
    backdrop-filter: blur(14px);
}
.artist-studio .artist-studio-distribution-editor-page .artist-studio-dialog-card > footer > a:first-child { margin-right: auto; }
.artist-studio .artist-studio-distribution-split-note {
    display: flex;
    padding: 11px 13px;
    align-items: center;
    gap: 9px;
    border-radius: 8px;
    color: var(--as-muted);
    background: var(--as-panel-subtle);
    font-size: 11px;
    line-height: 1.45;
}
.artist-studio .artist-studio-distribution-split-note i { color: var(--as-accent); }
.artist-studio .artist-studio-distribution-splits { display: grid; gap: 9px; }
.artist-studio .artist-studio-distribution-split-row {
    display: grid;
    padding: 12px;
    align-items: end;
    grid-template-columns: minmax(150px,1fr) minmax(190px,1.35fr) 120px 38px;
    gap: 10px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    background: var(--as-bg);
}
.artist-studio .artist-studio-distribution-split-row label { display: grid; gap: 6px; color: var(--as-muted); font-size: 10px; font-weight: 750; }
.artist-studio .artist-studio-distribution-percent-input { position: relative; display: block; }
.artist-studio .artist-studio-distribution-percent-input input { width: 100%; padding-right: 30px; }
.artist-studio .artist-studio-distribution-percent-input b { position: absolute; top: 50%; right: 11px; color: var(--as-muted); transform: translateY(-50%); }
.artist-studio .artist-studio-distribution-split-row > button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    color: var(--as-muted);
    background: transparent;
    cursor: pointer;
}
.artist-studio .artist-studio-distribution-split-row > button:hover { color: #d84953; background: color-mix(in srgb,#ef4444 8%,transparent); }
.artist-studio .artist-studio-distribution-split-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.artist-studio .artist-studio-distribution-split-footer > span { display: flex; align-items: baseline; gap: 8px; }
.artist-studio .artist-studio-distribution-split-footer small { color: var(--as-muted); font-size: 10px; text-transform: uppercase; }
.artist-studio .artist-studio-distribution-split-footer strong { font-size: 18px; }
.artist-studio .artist-studio-distribution-split-footer .is-valid strong { color: #16845b; }
.artist-studio .artist-studio-distribution-split-footer .is-invalid strong { color: #d84953; }
.artist-studio .artist-studio-distribution-review { display: grid; gap: 14px; }
.artist-studio .artist-studio-distribution-review-release { display: flex; padding: 13px; align-items: center; gap: 13px; border: 1px solid var(--as-border); border-radius: 10px; background: var(--as-panel-subtle); }
.artist-studio .artist-studio-distribution-review-release img { width: 68px; height: 68px; border-radius: 8px; object-fit: cover; }
.artist-studio .artist-studio-distribution-review-release > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.artist-studio .artist-studio-distribution-review-release small { color: var(--as-muted); font-size: 10px; }
.artist-studio .artist-studio-distribution-review-release strong { font-size: 18px; }
.artist-studio .artist-studio-distribution-review-release em { color: var(--as-muted); font-size: 11px; font-style: normal; }
.artist-studio .artist-studio-distribution-review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.artist-studio .artist-studio-distribution-review-grid article { display: grid; min-height: 100px; padding: 14px; align-content: center; justify-items: start; border: 1px solid var(--as-border); border-radius: 10px; }
.artist-studio .artist-studio-distribution-review-grid article > span { color: var(--as-accent); font-size: 14px; }
.artist-studio .artist-studio-distribution-review-grid strong { margin-top: 7px; font-size: 22px; }
.artist-studio .artist-studio-distribution-review-grid small { color: var(--as-muted); font-size: 10px; }
.artist-studio .artist-studio-distribution-review-splits { overflow: hidden; border: 1px solid var(--as-border); border-radius: 10px; }
.artist-studio .artist-studio-distribution-review-splits h3 { margin: 0; padding: 13px; border-bottom: 1px solid var(--as-border); font-size: 13px; }
.artist-studio .artist-studio-distribution-review-splits > div { display: flex; padding: 11px 13px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--as-border); }
.artist-studio .artist-studio-distribution-review-splits > div:last-child { border-bottom: 0; }
.artist-studio .artist-studio-distribution-review-splits > div > span { display: flex; min-width: 0; flex-direction: column; }
.artist-studio .artist-studio-distribution-review-splits small { color: var(--as-muted); font-size: 10px; }
.artist-studio .artist-studio-distribution-review-note { display: flex; margin: 0; padding: 12px; gap: 8px; border-radius: 9px; color: var(--as-muted); background: var(--as-panel-subtle); font-size: 11px; line-height: 1.5; }
.artist-studio .artist-studio-distribution-splits-overview { margin-top: 20px; }
.artist-studio .artist-studio-distribution-split-overview-row { display: grid; min-height: 68px; padding: 10px 0; align-items: center; grid-template-columns: 48px minmax(0,1fr) auto; gap: 12px; border-top: 1px solid var(--as-border); }
.artist-studio .artist-studio-distribution-split-overview-row > img { width: 48px; height: 48px; border-radius: 7px; object-fit: cover; }
.artist-studio .artist-studio-distribution-split-overview-row > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.artist-studio .artist-studio-distribution-split-overview-row small { overflow: hidden; color: var(--as-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.artist-studio .artist-studio-release-splits { margin-bottom: 20px; }
.artist-studio .artist-studio-release-split-total { padding: 7px 10px; border-radius: 999px; color: #16845b; background: color-mix(in srgb,#10b981 10%,var(--as-panel)); font-size: 11px; font-weight: 800; }
.artist-studio .artist-studio-release-split-contract { display: flex; margin-bottom: 14px; padding: 15px; align-items: center; gap: 18px; border: 1px solid var(--as-border); border-radius: 10px; background: var(--as-panel-subtle); }
.artist-studio .artist-studio-release-split-contract > span { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.artist-studio .artist-studio-release-split-contract small { color: var(--as-muted); font-size: 10px; text-transform: uppercase; }
.artist-studio .artist-studio-release-split-contract strong { font-size: 18px; }
.artist-studio .artist-studio-release-split-contract > i { color: var(--as-muted); font-size: 11px; }
.artist-studio .artist-studio-release-split-list { overflow: hidden; border: 1px solid var(--as-border); border-radius: 10px; }
.artist-studio .artist-studio-release-split-list article { display: grid; min-height: 72px; padding: 12px 15px; align-items: center; grid-template-columns: 38px minmax(160px,1.5fr) minmax(110px,.7fr) minmax(130px,.8fr) minmax(130px,.8fr); gap: 12px; border-bottom: 1px solid var(--as-border); }
.artist-studio .artist-studio-release-split-list article:last-child { border-bottom: 0; }
.artist-studio .artist-studio-release-split-avatar { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; color: var(--as-accent); background: color-mix(in srgb,var(--as-accent) 10%,var(--as-panel)); font-weight: 850; }
.artist-studio :is(.artist-studio-release-split-person,.artist-studio-release-split-share,.artist-studio-release-split-earned) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.artist-studio .artist-studio-release-split-person small { overflow: hidden; color: var(--as-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.artist-studio :is(.artist-studio-release-split-share,.artist-studio-release-split-earned) { text-align: right; }
.artist-studio :is(.artist-studio-release-split-share,.artist-studio-release-split-earned) small { color: var(--as-muted); font-size: 10px; }
.artist-studio .artist-studio-release-split-status { display: inline-flex; align-items: center; gap: 6px; color: var(--as-muted); font-size: 10px; font-weight: 750; }
.artist-studio .artist-studio-release-split-status.is-active { color: #16845b; }
.artist-studio .artist-studio-release-split-footnote { display: flex; margin: 12px 0 0; gap: 8px; color: var(--as-muted); font-size: 11px; line-height: 1.45; }

@media (max-width: 900px) {
    .artist-studio .artist-studio-distribution-split-row { grid-template-columns: 1fr 1fr 100px 38px; }
    .artist-studio .artist-studio-release-split-list article { grid-template-columns: 38px minmax(0,1fr) auto; }
    .artist-studio .artist-studio-release-split-status { justify-self: end; }
    .artist-studio :is(.artist-studio-release-split-share,.artist-studio-release-split-earned) { grid-column: 2 / -1; text-align: left; }
}

@media (max-width: 620px) {
    .artist-studio .artist-studio-distribution-progress { height: 56px; padding: 0 12px; }
    .artist-studio .artist-studio-distribution-progress .upload-step-label { display: none; }
    .artist-studio .artist-studio-distribution-progress .upload-step-connector { min-width: 10px; margin: 0 7px; }
    .artist-studio .artist-studio-distribution-editor-step { padding: 16px; }
    .artist-studio .artist-studio-distribution-review-grid { grid-template-columns: 1fr; }
    .artist-studio .artist-studio-distribution-split-row { grid-template-columns: 1fr 70px 38px; }
    .artist-studio .artist-studio-distribution-split-row label:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .artist-studio .artist-studio-distribution-split-row label:nth-child(3) { grid-column: 2; grid-row: 1; }
    .artist-studio .artist-studio-distribution-split-row > button { grid-column: 3; grid-row: 1; }
    .artist-studio .artist-studio-release-split-contract { align-items: stretch; flex-direction: column; gap: 10px; }
    .artist-studio .artist-studio-release-split-contract > i { transform: rotate(90deg); }
    .artist-studio .artist-studio-release-split-list article { grid-template-columns: 36px minmax(0,1fr); }
    .artist-studio .artist-studio-release-split-status { grid-column: 2; justify-self: start; }
    .artist-studio :is(.artist-studio-release-split-share,.artist-studio-release-split-earned) { grid-column: 2; }
}

.artist-studio .artist-studio-release-metadata dl,
.artist-studio .artist-studio-release-track dl {
    display: grid;
    margin: 0;
}

.artist-studio .artist-studio-release-metadata dl {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 28px;
}

.artist-studio .artist-studio-release-metadata dl > div {
    min-width: 0;
    padding: 14px 0;
    border-top: 1px solid var(--as-border);
}

.artist-studio .artist-studio-release-metadata dl > div.is-wide {
    grid-column: 1 / -1;
}

.artist-studio .artist-studio-release-metadata dt,
.artist-studio .artist-studio-release-track dt {
    margin: 0 0 5px;
    color: var(--as-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.artist-studio .artist-studio-release-metadata dd,
.artist-studio .artist-studio-release-track dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.5;
}

.artist-studio .artist-studio-release-platforms dd {
    overflow: hidden;
}

.artist-studio .artist-studio-release-platforms details {
    overflow: hidden;
    border: 1px solid var(--as-border);
    border-radius: 12px;
    background: var(--as-panel-subtle);
}

.artist-studio .artist-studio-release-platforms summary {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) 20px;
    min-height: 72px;
    padding: 12px 15px;
    align-items: center;
    gap: 13px;
    list-style: none;
    cursor: pointer;
}

.artist-studio .artist-studio-release-platforms summary::-webkit-details-marker {
    display: none;
}

.artist-studio .artist-studio-release-platforms summary:hover {
    background: var(--as-hover);
}

.artist-studio .artist-studio-platform-preview {
    display: flex;
    min-width: 96px;
    padding-left: 7px;
}

.artist-studio .artist-studio-platform-preview .artist-studio-platform-dot + .artist-studio-platform-dot {
    margin-left: -9px;
}

.artist-studio .artist-studio-platform-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    overflow: hidden;
    border: 2px solid var(--as-panel);
    border-radius: 50%;
    color: var(--as-accent);
    background: #fff;
    box-shadow: 0 2px 7px rgba(15,25,48,.12);
    font-size: 11px;
    font-weight: 850;
}

.artist-studio .artist-studio-platform-dot img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.artist-studio .artist-studio-platform-summary-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.artist-studio .artist-studio-platform-summary-copy strong {
    font-size: 14px;
}

.artist-studio .artist-studio-platform-summary-copy small {
    margin-top: 2px;
    color: var(--as-muted);
    font-size: 11px;
}

.artist-studio .artist-studio-release-platforms summary > i {
    color: var(--as-muted);
    font-size: 12px;
    transition: transform .24s ease;
}

.artist-studio .artist-studio-release-platforms details[open] summary > i {
    transform: rotate(180deg);
}

.artist-studio .artist-studio-platform-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    padding: 14px;
    gap: 8px;
    border-top: 1px solid var(--as-border);
    background: var(--as-panel);
}

.artist-studio .artist-studio-platform-item {
    display: flex;
    min-width: 0;
    min-height: 47px;
    padding: 7px 9px;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--as-border);
    border-radius: 9px;
    background: var(--as-panel-subtle);
}

.artist-studio .artist-studio-platform-item > span:last-child {
    overflow: hidden;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-studio .artist-studio-platform-item .artist-studio-platform-dot {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-width: 1px;
    box-shadow: none;
}

.artist-studio .artist-studio-platform-item .artist-studio-platform-dot img {
    width: 16px;
    height: 16px;
}

.artist-studio .artist-studio-distribution-delivery-picker details {
    background: var(--as-panel-subtle);
}

.artist-studio .artist-studio-distribution-delivery-picker summary {
    min-height: 82px;
}

.artist-studio .artist-studio-distribution-delivery-tools {
    display: flex;
    min-height: 54px;
    padding: 8px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--as-border);
    background: var(--as-panel);
}

.artist-studio .artist-studio-distribution-delivery-tools > span {
    display: flex;
    margin-left: auto;
    gap: 12px;
}

.artist-studio .artist-studio-distribution-delivery-tools button {
    padding: 5px 0;
    border: 0;
    color: var(--as-accent);
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.artist-studio .artist-studio-distribution-delivery-tools input {
    width: min(320px,100%);
    min-height: 38px;
}

.artist-studio .artist-studio-distribution-delivery-picker .artist-studio-platform-grid {
    max-height: 310px;
    overflow: auto;
}

.artist-studio .artist-studio-distribution-delivery-picker .artist-studio-platform-item {
    cursor: pointer;
    transition: border-color .16s ease,background .16s ease;
}

.artist-studio .artist-studio-distribution-delivery-picker .artist-studio-platform-item:has(input:checked) {
    border-color: color-mix(in srgb,var(--as-accent) 42%,var(--as-border));
    background: color-mix(in srgb,var(--as-accent) 7%,var(--as-panel));
}

.artist-studio .artist-studio-distribution-delivery-picker .artist-studio-platform-item input[type="checkbox"] {
    width: 16px;
    min-height: 16px;
    margin-left: auto;
    flex: 0 0 16px;
    accent-color: var(--as-accent);
}

.artist-studio .artist-studio-distribution-delivery-picker .artist-studio-platform-dot b {
    font-size: 14px;
}

.artist-studio .artist-studio-distribution-delivery-count {
    margin: 7px 2px 0;
}

.artist-studio .artist-studio-release-pitch {
    position: sticky;
    top: 92px;
    background:
        linear-gradient(145deg,color-mix(in srgb,var(--as-accent) 8%,var(--as-panel)),var(--as-panel));
}

.artist-studio .artist-studio-release-pitch > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--as-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.artist-studio .artist-studio-release-pitch p {
    margin: 15px 0 0;
    font-size: 14px;
    line-height: 1.7;
}

.artist-studio .artist-studio-release-tracks {
    padding-bottom: 8px;
}

.artist-studio .artist-studio-release-track-list {
    display: grid;
}

.artist-studio .artist-studio-release-track {
    padding: 20px 2px 22px;
    border-top: 1px solid var(--as-border);
}

.artist-studio .artist-studio-release-track:first-child {
    border-top: 0;
}

.artist-studio .artist-studio-release-track > header {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
}

.artist-studio .artist-studio-release-track-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--as-accent);
    background: color-mix(in srgb,var(--as-accent) 10%,var(--as-panel-subtle));
    font-size: 13px;
    font-weight: 800;
}

.artist-studio .artist-studio-release-track header > div {
    min-width: 0;
}

.artist-studio .artist-studio-release-track h3 {
    margin: 0;
    overflow: hidden;
    font-size: 18px;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-studio .artist-studio-release-track header p,
.artist-studio .artist-studio-release-track header small {
    display: block;
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--as-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-studio .artist-studio-release-track header time {
    color: var(--as-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.artist-studio .artist-studio-release-track dl {
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin: 17px 0 0 56px;
    gap: 14px 24px;
}

.artist-studio .artist-studio-release-track dl > div {
    min-width: 0;
}
.artist-studio .artist-studio-release-track dl > div.is-wide { grid-column: 1 / -1; }
.artist-studio .artist-studio-release-track-links { display: flex; flex-wrap: wrap; gap: 6px; }

.artist-studio .artist-studio-release-track-credits {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    margin: 18px 0 0 56px;
    padding-top: 16px;
    gap: 16px;
    border-top: 1px solid var(--as-border);
}

.artist-studio .artist-studio-release-track-credits > span {
    color: var(--as-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.artist-studio .artist-studio-release-track-credits > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.artist-studio .artist-studio-release-track-credits > div > span {
    display: inline-flex;
    align-items: baseline;
    padding: 7px 10px;
    gap: 6px;
    border-radius: 999px;
    background: var(--as-panel-subtle);
    font-size: 12px;
}

.artist-studio .artist-studio-release-track-credits small {
    color: var(--as-muted);
    font-size: 10px;
}

@media (max-width: 900px) {
    .artist-studio .artist-studio-release-detail-layout.is-with-pitch {
        grid-template-columns: 1fr;
    }

    .artist-studio .artist-studio-release-pitch {
        position: static;
    }

    .artist-studio .artist-studio-release-track dl {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .artist-studio .artist-studio-platform-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media (max-width: 700px) {
    .artist-studio .artist-studio-release-detail-back {
        margin-bottom: 14px;
    }

    .artist-studio .artist-studio-release-detail-hero {
        grid-template-columns: minmax(0,1fr);
        min-height: 0;
        padding: 18px;
        align-items: start;
        gap: 20px;
        border-radius: 14px;
    }

    .artist-studio .artist-studio-release-detail-hero > img {
        width: min(62vw,240px);
    }

    .artist-studio .artist-studio-release-detail-title h1 {
        font-size: clamp(36px,12vw,58px);
    }

    .artist-studio .artist-studio-release-detail-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .artist-studio .artist-studio-release-detail-metrics article:nth-child(2) {
        border-right: 0;
    }

    .artist-studio .artist-studio-release-detail-metrics article:nth-child(-n + 2) {
        border-bottom: 1px solid var(--as-border);
    }

    .artist-studio .artist-studio-release-metadata dl {
        grid-template-columns: 1fr;
    }

    .artist-studio .artist-studio-release-metadata dl > div.is-wide {
        grid-column: auto;
    }

    .artist-studio .artist-studio-release-track dl,
    .artist-studio .artist-studio-release-track-credits {
        margin-left: 0;
    }

    .artist-studio .artist-studio-platform-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 440px) {
    .artist-studio .artist-studio-release-detail-hero > img {
        width: 100%;
    }

    .artist-studio .artist-studio-release-detail-metrics {
        grid-template-columns: 1fr;
    }

    .artist-studio .artist-studio-release-detail-metrics article {
        border-right: 0;
        border-bottom: 1px solid var(--as-border);
    }

    .artist-studio .artist-studio-release-detail-metrics article:last-child {
        border-bottom: 0;
    }

    .artist-studio .artist-studio-release-track > header {
        grid-template-columns: 38px minmax(0,1fr) auto;
        gap: 10px;
    }

    .artist-studio .artist-studio-release-track-number {
        width: 38px;
        height: 38px;
    }

    .artist-studio .artist-studio-release-track dl {
        grid-template-columns: 1fr;
    }

    .artist-studio .artist-studio-release-track-credits {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .artist-studio .artist-studio-release-platforms summary {
        grid-template-columns: minmax(0,1fr) 18px;
        padding: 11px 12px;
    }

    .artist-studio .artist-studio-platform-preview {
        grid-column: 1 / -1;
        min-width: 0;
        padding-left: 7px;
    }

    .artist-studio .artist-studio-platform-summary-copy {
        grid-column: 1;
    }

    .artist-studio .artist-studio-platform-summary-copy small {
        white-space: normal;
    }

    .artist-studio .artist-studio-platform-grid {
        grid-template-columns: 1fr;
        padding: 10px;
    }
}

/* Artist merch management and listener product cards. */
.artist-studio .artist-studio-merch-section { padding: 18px; }
.artist-studio .artist-studio-merch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.artist-studio .artist-studio-merch-grid > .artist-studio-empty { grid-column:1/-1; }
.artist-studio .artist-studio-merch-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--as-border); border-radius:16px; color:var(--as-text); background:var(--as-panel); }
.artist-studio .artist-studio-merch-cover { position:relative; display:block; aspect-ratio:1; overflow:hidden; color:#fff; background:var(--as-panel-subtle); text-decoration:none; }
.artist-studio .artist-studio-merch-cover img { width:100%; height:100%; object-fit:cover; transition:transform .22s ease; }
.artist-studio .artist-studio-merch-cover:hover img { transform:scale(1.025); }
.artist-studio .artist-studio-merch-cover > span { position:absolute; left:10px; bottom:10px; max-width:calc(100% - 20px); padding:5px 9px; overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(8,12,20,.76); font-size:10px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; backdrop-filter:blur(8px); }
.artist-studio .artist-studio-merch-card-body { display:grid; gap:10px; padding:14px; }
.artist-studio .artist-studio-merch-card-body h2 { min-height:2.7em; margin:0; overflow:hidden; color:var(--as-text); font-size:15px; line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.artist-studio .artist-studio-merch-card-body > strong { color:var(--as-accent); font-size:17px; }
.artist-studio .artist-studio-merch-card-body label { display:grid; gap:6px; color:var(--as-muted); font-size:11px; font-weight:700; }
.artist-studio .artist-studio-merch-card-body select { width:100%; min-width:0; height:38px; padding:0 10px; border:1px solid var(--as-border); border-radius:9px; color:var(--as-text); background:var(--as-panel-subtle); }
.artist-studio .artist-studio-merch-error { margin:0; color:#b8424c; font-size:11px; line-height:1.4; }
.artist-studio .artist-studio-merch-actions { display:flex; flex-wrap:wrap; gap:6px; padding-top:2px; }
.artist-studio .artist-studio-merch-actions :is(a,button) { display:inline-flex; min-height:32px; padding:0 9px; align-items:center; gap:6px; border:1px solid var(--as-border); border-radius:8px; color:var(--as-text); background:var(--as-panel-subtle); font:inherit; font-size:10px; font-weight:750; text-decoration:none; cursor:pointer; }
.artist-studio .artist-studio-merch-actions :is(a,button):hover { border-color:var(--as-accent); color:var(--as-accent); }
.artist-studio .artist-studio-merch-actions .is-danger { color:#b8424c; }
.artist-studio .artist-studio-skeleton-merch-cover { display:block; width:100%; aspect-ratio:1; border-radius:0; }
.artist-studio .artist-studio-skeleton-merch-price { display:block; width:38%; height:19px; border-radius:6px; }
.artist-studio .artist-studio-merch-card.is-skeleton { pointer-events:none; }
.artist-studio .artist-studio-merch-card.is-refreshing::after { position:absolute; inset:0; content:""; background:color-mix(in srgb,var(--as-panel) 72%,transparent); animation:artistStudioSkeletonPulse 1.05s ease-in-out infinite alternate; pointer-events:none; }

.sv-merch-section { margin-top:34px; }
.sv-merch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:16px; margin-top:16px; }
.sv-merch-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:15px; color:var(--black); background:var(--surface-1); text-decoration:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.sv-merch-card:hover { border-color:color-mix(in srgb,var(--blue) 44%,var(--border)); color:var(--black); transform:translateY(-2px); box-shadow:0 12px 26px rgba(12,20,38,.1); }
.sv-merch-card-cover { position:relative; display:block; aspect-ratio:1; overflow:hidden; background:var(--surface-2); }
.sv-merch-card-cover img { width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.sv-merch-card:hover .sv-merch-card-cover img { transform:scale(1.025); }
.sv-merch-card-cover > span { position:absolute; right:10px; bottom:10px; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; color:#fff; background:rgba(8,12,20,.78); backdrop-filter:blur(8px); }
.sv-merch-card-body { display:grid; gap:5px; padding:12px; }
.sv-merch-card-body small { overflow:hidden; color:var(--text-secondary); font-size:9px; font-weight:800; letter-spacing:.06em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.sv-merch-card-body strong { overflow:hidden; font-size:13px; line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.sv-merch-card-body em { color:var(--blue); font-size:13px; font-style:normal; font-weight:800; }

@media (max-width:700px) {
  .artist-studio .artist-studio-merch-section { padding:12px; }
  .artist-studio .artist-studio-merch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .artist-studio .artist-studio-merch-card-body { padding:11px; }
  .artist-studio .artist-studio-merch-actions { display:grid; grid-template-columns:1fr 1fr; }
  .artist-studio .artist-studio-merch-actions :is(a,button) { justify-content:center; }
  .artist-studio .artist-studio-merch-actions a { grid-column:1/-1; }
  .sv-merch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
}

@media (max-width:380px) {
  .artist-studio .artist-studio-merch-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .artist-studio .artist-studio-merch-card.is-refreshing::after { animation:none; }
  .artist-studio .artist-studio-merch-cover img,
  .sv-merch-card,
  .sv-merch-card-cover img { transition:none; }
}

@media (max-width:768px) {
  .modal.profile-about-modal .modal-content {
    width:min(100%,620px) !important;
    max-width:620px !important;
    border-radius:24px !important;
  }
  .modal.profile-about-modal:not(.playlist-sheet-modal) .modal-content::before {
    display:none !important;
    content:none !important;
  }
}

#settingsPage #billing-tab .settings-form {
  display:grid;
  gap:20px;
}

#settingsPage #billing-tab .ap-card {
  position:relative;
  margin:0!important;
  padding:20px!important;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--blue) 24%,var(--border))!important;
  border-radius:22px!important;
  background:color-mix(in srgb,var(--white) 96%,var(--blue) 4%)!important;
  box-shadow:0 18px 48px rgba(26,92,255,.1)!important;
}

#settingsPage #billing-tab .ap-billing-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  min-height:280px;
  margin:-20px -20px 20px;
  padding:34px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 9% 118%,rgba(239,105,255,.5),transparent 38%),
    radial-gradient(circle at 92% 0,rgba(76,203,255,.46),transparent 36%),
    linear-gradient(135deg,#153fc7 0%,#4f46e5 54%,#7547d8 100%);
}

#settingsPage #billing-tab .ap-billing-hero::after {
  position:absolute;
  right:-90px;
  bottom:-120px;
  width:330px;
  height:330px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  content:"";
}

#settingsPage #billing-tab .ap-billing-hero-copy {
  position:relative;
  z-index:2;
  align-self:center;
}

#settingsPage #billing-tab .ap-billing-brand {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#settingsPage #billing-tab .ap-billing-brand img {
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  box-shadow:0 10px 26px rgba(5,12,35,.22);
}

#settingsPage #billing-tab .ap-billing-hero .ap-card-title {
  max-width:560px;
  margin:0;
  color:#fff;
  font-size:clamp(30px,4.3vw,48px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.045em;
}

#settingsPage #billing-tab .ap-billing-hero .ap-card-sub {
  max-width:610px;
  margin:14px 0 20px;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.62;
}

#settingsPage #billing-tab .ap-billing-hero .ap-status-pill {
  padding:7px 12px;
  border-color:rgba(255,255,255,.26);
  color:#fff;
  background:rgba(7,18,58,.28);
  backdrop-filter:blur(12px);
}

#settingsPage #billing-tab .ap-billing-hero .ap-status-pill.is-active {
  border-color:rgba(128,255,206,.42);
  color:#dffff1;
  background:rgba(20,132,91,.36);
}

#settingsPage #billing-tab .ap-billing-hero-stack {
  position:relative;
  z-index:2;
  display:grid;
  align-content:center;
  gap:10px;
  perspective:700px;
}

#settingsPage #billing-tab .ap-billing-hero-stack span {
  display:flex;
  min-height:58px;
  padding:0 18px;
  align-items:center;
  gap:12px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:15px;
  color:#fff;
  background:rgba(9,17,60,.25);
  box-shadow:0 14px 28px rgba(7,12,44,.16);
  font-size:13px;
  font-weight:800;
  backdrop-filter:blur(14px);
  transform:rotateY(-8deg);
}

#settingsPage #billing-tab .ap-billing-hero-stack span:nth-child(2) { margin-left:20px; }
#settingsPage #billing-tab .ap-billing-hero-stack i { width:24px; color:#fff; font-size:18px; text-align:center; }

#settingsPage #billing-tab .ap-perk-showcase {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:20px;
}

#settingsPage #billing-tab .ap-perk-card {
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  min-height:118px;
  padding:18px;
  align-items:start;
  gap:14px;
  border:1px solid color-mix(in srgb,var(--perk-color) 25%,var(--border));
  border-radius:16px;
  background:color-mix(in srgb,var(--perk-color) 8%,var(--white));
}

#settingsPage #billing-tab .ap-perk-card.is-blue { --perk-color:#1a5cff; }
#settingsPage #billing-tab .ap-perk-card.is-purple { --perk-color:#8b5cf6; }
#settingsPage #billing-tab .ap-perk-card.is-cyan { --perk-color:#06a6c8; }
#settingsPage #billing-tab .ap-perk-card.is-orange { --perk-color:#f0783b; }

#settingsPage #billing-tab .ap-perk-icon {
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:var(--perk-color);
  box-shadow:0 10px 22px color-mix(in srgb,var(--perk-color) 26%,transparent);
  font-size:18px;
}

#settingsPage #billing-tab .ap-perk-card strong {
  display:block;
  margin:2px 0 5px;
  color:var(--black);
  font-size:14px;
}

#settingsPage #billing-tab .ap-perk-card p {
  margin:0;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}

#settingsPage #billing-tab .ap-benefits-disclosure {
  margin-bottom:20px;
  border:1px solid var(--border)!important;
  border-radius:16px!important;
  background:var(--white)!important;
}

#settingsPage #billing-tab .ap-benefits-disclosure > summary { padding:15px 17px; }

#settingsPage #billing-tab .ap-features-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:0 14px 14px;
  margin:0;
}

#settingsPage #billing-tab .ap-feature {
  min-height:48px;
  padding:10px 11px;
  border:1px solid color-mix(in srgb,var(--blue) 12%,var(--border));
  border-radius:11px;
  background:color-mix(in srgb,var(--blue) 4%,var(--surface-2));
}

#settingsPage #billing-tab .ap-feature:hover {
  border-color:color-mix(in srgb,var(--blue) 30%,var(--border));
  background:color-mix(in srgb,var(--blue) 8%,var(--surface-2));
}

#settingsPage #billing-tab .ap-plan-selector { gap:12px; margin-bottom:18px; }

#settingsPage #billing-tab .ap-plan-btn {
  min-height:132px;
  padding:18px!important;
  border:1px solid var(--border)!important;
  border-radius:16px!important;
  background:var(--white)!important;
}

#settingsPage #billing-tab .ap-plan-btn.is-selected {
  border-color:color-mix(in srgb,var(--blue) 54%,var(--border))!important;
  background:color-mix(in srgb,var(--blue) 7%,var(--white))!important;
  box-shadow:inset 0 0 0 2px var(--blue),0 14px 30px rgba(26,92,255,.1)!important;
}

#settingsPage #billing-tab .ap-plan-price { margin:4px 0; font-size:30px; }
#settingsPage #billing-tab .ap-actions { margin:0 0 20px; }
#settingsPage #billing-tab .ap-subscribe-btn { min-height:48px; padding-inline:28px; background:var(--blue); box-shadow:0 12px 26px rgba(26,92,255,.24); }

#settingsPage #billing-tab .ap-gift-card {
  margin:0!important;
  padding:20px!important;
  border:1px solid color-mix(in srgb,#8b5cf6 24%,var(--border))!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,color-mix(in srgb,#8b5cf6 8%,var(--white)),color-mix(in srgb,#ec4899 5%,var(--white)))!important;
  box-shadow:0 16px 38px rgba(105,72,210,.08)!important;
}

#settingsPage #billing-tab .ap-gift-card-header { margin:0; padding:0 0 18px; }
#settingsPage #billing-tab .ap-gift-icon-wrap { color:#fff; background:linear-gradient(135deg,#8b5cf6,#6d5bf6); border:0; }
#settingsPage #billing-tab .ap-my-gifts-card { padding:18px!important; border:1px solid var(--border)!important; border-radius:18px!important; background:var(--white)!important; }

#settingsPage #billing-tab .artist-plus-success-burst {
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  background:rgba(8,14,35,.88);
  backdrop-filter:blur(16px);
  transition:opacity .22s ease,visibility 0s linear .22s;
}

#settingsPage #billing-tab .artist-plus-success-burst.is-active {
  opacity:1;
  visibility:visible;
  transition:opacity .22s ease;
}

#settingsPage #billing-tab .artist-plus-success-burst::before {
  position:absolute;
  inset:-50%;
  content:"";
  background:conic-gradient(from 180deg,transparent,rgba(26,92,255,.38),transparent,rgba(139,92,246,.32),transparent);
  animation:none;
}

#settingsPage #billing-tab .artist-plus-success-burst.is-active::before { animation:apSuccessWash 3.4s ease-out forwards; }

#settingsPage #billing-tab .ap-success-lockup {
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  color:#fff;
  text-align:center;
  transform:translateY(16px) scale(.94);
  opacity:0;
}

#settingsPage #billing-tab .is-active .ap-success-lockup { animation:apSuccessLockup .62s cubic-bezier(.2,.9,.25,1.2) .15s forwards; }

#settingsPage #billing-tab .ap-success-logo {
  position:relative;
  width:104px;
  height:104px;
  margin-bottom:22px;
}

#settingsPage #billing-tab .ap-success-logo img {
  width:100%;
  height:100%;
  border:1px solid rgba(255,255,255,.24);
  border-radius:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.38);
}

#settingsPage #billing-tab .ap-success-logo > i {
  position:absolute;
  right:-8px;
  bottom:-8px;
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:4px solid #0e1731;
  border-radius:50%;
  color:#071811;
  background:#6ff0b9;
  font-size:15px;
}

#settingsPage #billing-tab .ap-success-ring {
  position:absolute;
  inset:-2px;
  border:2px solid rgba(122,164,255,.82);
  border-radius:28px;
  opacity:0;
}

#settingsPage #billing-tab .is-active .ap-success-ring { animation:apSuccessRing 1.2s ease-out .48s forwards; }
#settingsPage #billing-tab .ap-success-lockup > strong { font-size:clamp(28px,4vw,42px); line-height:1; letter-spacing:-.045em; }
#settingsPage #billing-tab .ap-success-lockup > span:last-child { margin-top:10px; color:#c4cee4; font-size:14px; }

#settingsPage #billing-tab .ap-success-particles { position:absolute; inset:0; z-index:1; }
#settingsPage #billing-tab .ap-success-particles span {
  --tx:0px;
  --ty:0px;
  --r:0deg;
  position:absolute;
  top:50%;
  left:50%;
  width:9px;
  height:18px;
  border-radius:3px;
  background:#78a4ff;
  opacity:0;
}

#settingsPage #billing-tab .is-active .ap-success-particles span { animation:apSuccessParticle 1.5s cubic-bezier(.1,.75,.24,1) var(--delay,0s) forwards; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(2n) { background:#c78aff; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(3n) { background:#6ff0b9; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(4n) { background:#ffb45e; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(1) { --tx:-280px;--ty:-150px;--r:140deg;--delay:.2s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(2) { --tx:-205px;--ty:175px;--r:220deg;--delay:.27s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(3) { --tx:-120px;--ty:-215px;--r:95deg;--delay:.34s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(4) { --tx:-330px;--ty:45px;--r:280deg;--delay:.18s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(5) { --tx:-45px;--ty:225px;--r:185deg;--delay:.38s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(6) { --tx:40px;--ty:-235px;--r:240deg;--delay:.25s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(7) { --tx:125px;--ty:210px;--r:115deg;--delay:.31s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(8) { --tx:210px;--ty:-175px;--r:205deg;--delay:.22s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(9) { --tx:305px;--ty:95px;--r:310deg;--delay:.36s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(10) { --tx:300px;--ty:-65px;--r:150deg;--delay:.28s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(11) { --tx:190px;--ty:185px;--r:265deg;--delay:.4s; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(12) { --tx:-265px;--ty:-35px;--r:190deg;--delay:.32s; }

#settingsPage #billing-tab .ap-card.artist-plus-celebrate { animation:apSuccessCard 1.1s ease-out; }

@keyframes apSuccessWash {
  0% { opacity:0;transform:rotate(-35deg) scale(.55); }
  35% { opacity:1; }
  100% { opacity:.45;transform:rotate(85deg) scale(1.1); }
}

@keyframes apSuccessLockup {
  to { opacity:1;transform:translateY(0) scale(1); }
}

@keyframes apSuccessRing {
  0% { opacity:.9;transform:scale(.92); }
  100% { opacity:0;transform:scale(1.75); }
}

@keyframes apSuccessParticle {
  0% { opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0); }
  12% { opacity:1; }
  100% { opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1) rotate(var(--r)); }
}

@keyframes apSuccessCard {
  0%,100% { transform:scale(1); }
  45% { transform:scale(1.008); }
}

@media (max-width:760px) {
  #settingsPage #billing-tab .ap-billing-hero { grid-template-columns:1fr; min-height:0; padding:26px 22px; }
  #settingsPage #billing-tab .ap-billing-hero-stack { display:none; }
  #settingsPage #billing-tab .ap-perk-showcase { grid-template-columns:1fr; }
  #settingsPage #billing-tab .ap-features-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:480px) {
  #settingsPage #billing-tab .ap-card { padding:14px!important; border-radius:18px!important; }
  #settingsPage #billing-tab .ap-billing-hero { margin:-14px -14px 14px; }
  #settingsPage #billing-tab .ap-features-grid { grid-template-columns:1fr; }
  #settingsPage #billing-tab .ap-perk-card { min-height:0; padding:15px; }
}

@media (prefers-reduced-motion:reduce) {
  #settingsPage #billing-tab .artist-plus-success-burst::before,
  #settingsPage #billing-tab .is-active .ap-success-lockup,
  #settingsPage #billing-tab .is-active .ap-success-ring,
  #settingsPage #billing-tab .is-active .ap-success-particles span,
  #settingsPage #billing-tab .ap-card.artist-plus-celebrate { animation:none; }
  #settingsPage #billing-tab .is-active .ap-success-lockup { opacity:1;transform:none; }
}

#settingsPage #billing-tab .settings-form { gap:32px; }

#settingsPage #billing-tab .ap-card {
  border-color:var(--border)!important;
  background:var(--white)!important;
  box-shadow:0 12px 32px rgba(12,12,14,.08)!important;
}

#settingsPage #billing-tab .ap-billing-hero {
  display:block;
  min-height:0;
  padding:32px;
  background:var(--blue);
}

#settingsPage #billing-tab .ap-billing-hero::after { display:none; }
#settingsPage #billing-tab .ap-billing-hero-copy { max-width:720px; }
#settingsPage #billing-tab .ap-billing-brand { margin-bottom:20px; }
#settingsPage #billing-tab .ap-billing-hero .ap-card-title { max-width:620px;font-size:clamp(30px,4vw,44px);line-height:1; }
#settingsPage #billing-tab .ap-billing-hero .ap-card-sub { max-width:650px;margin-bottom:18px; }

#settingsPage #billing-tab .ap-benefits-disclosure {
  margin-bottom:22px;
  overflow:hidden;
  background:var(--surface-2)!important;
}

#settingsPage #billing-tab .ap-benefits-disclosure > summary {
  display:flex!important;
  min-height:54px;
  padding:0 16px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#settingsPage #billing-tab .ap-benefits-disclosure.is-expanded > summary { border-bottom:1px solid var(--border); }
#settingsPage #billing-tab .ap-benefits-disclosure.is-expanded .ap-native-expand-inner { overflow:visible; }

#settingsPage #billing-tab .ap-features-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 24px;
  padding:8px 16px 16px;
}

#settingsPage #billing-tab .ap-feature,
#settingsPage #billing-tab .ap-feature:hover {
  min-width:0;
  min-height:46px;
  padding:10px 2px;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent;
}

#settingsPage #billing-tab .ap-feature span { min-width:0;line-height:1.4;overflow-wrap:anywhere; }

#settingsPage #billing-tab .ap-disclosure-check {
  display:flex!important;
  width:100%;
  margin:12px 0 0!important;
  padding-top:12px;
  align-items:flex-start!important;
  gap:10px;
  border-top:1px solid var(--border);
}

#settingsPage #billing-tab .ap-disclosure-check input { flex:0 0 auto;margin-top:2px; }
#settingsPage #billing-tab .ap-disclosure-check span { display:block;min-width:0;line-height:1.5; }

#settingsPage #billing-tab .ap-plan-selector,
#settingsPage #billing-tab .ap-gift-plans { overflow:visible; }

#settingsPage #billing-tab .ap-plan-btn,
#settingsPage #billing-tab .ap-gift-plan-btn { padding-top:18px!important;overflow:visible; }

#settingsPage #billing-tab .ap-plan-save-badge,
#settingsPage #billing-tab .ap-gift-plan-save {
  top:10px;
  right:10px;
  z-index:2;
  padding:3px 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--blue) 12%,var(--white));
  color:var(--blue);
  border:1px solid color-mix(in srgb,var(--blue) 24%,var(--border));
  font-size:10px;
  line-height:1.2;
}

#settingsPage #billing-tab .ap-gift-card {
  margin-top:4px!important;
  border-color:var(--border)!important;
  background:var(--white)!important;
  box-shadow:0 12px 32px rgba(12,12,14,.07)!important;
}

#settingsPage #billing-tab .ap-gift-icon-wrap {
  color:#fff;
  background:var(--blue);
  border-color:var(--blue);
}

#settingsPage #billing-tab .ap-gift-plan-btn.is-active {
  border-color:var(--blue)!important;
  background:color-mix(in srgb,var(--blue) 7%,var(--white))!important;
  box-shadow:inset 0 0 0 2px var(--blue)!important;
}

#settingsPage #billing-tab .artist-plus-success-burst::before {
  background:conic-gradient(from 180deg,transparent,color-mix(in srgb,var(--blue) 42%,transparent),transparent,rgba(255,255,255,.16),transparent);
}

#settingsPage #billing-tab .artist-plus-success-burst::after { display:none; }

#settingsPage #billing-tab .ap-success-logo > i { color:#fff;background:var(--blue); }
#settingsPage #billing-tab .ap-success-particles span { background:var(--blue); }
#settingsPage #billing-tab .ap-success-particles span:nth-child(2n) { background:#fff; }
#settingsPage #billing-tab .ap-success-particles span:nth-child(3n) { background:color-mix(in srgb,var(--blue) 62%,#fff); }
#settingsPage #billing-tab .ap-success-particles span:nth-child(4n) { background:color-mix(in srgb,var(--blue) 78%,#fff); }

@media (max-width:620px) {
  #settingsPage #billing-tab .settings-form { gap:22px; }
  #settingsPage #billing-tab .ap-billing-hero { padding:26px 20px; }
  #settingsPage #billing-tab .ap-features-grid { grid-template-columns:1fr;gap:0; }
  #settingsPage #billing-tab .ap-plan-save-badge,
  #settingsPage #billing-tab .ap-gift-plan-save { position:static;margin-top:7px;align-self:flex-start; }
}

/* Mobile player polish: scrolling metadata and consistent glass icon controls. */
@keyframes playerMetadataCarousel {
  0%, 14% { transform:translate3d(0,0,0); }
  48%, 64% { transform:translate3d(var(--metadata-carousel-distance),0,0); }
  100% { transform:translate3d(0,0,0); }
}

@media (max-width:768px) {
  .player-expanded-info :is(h2,p) {
    width:min(100%,360px);
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    white-space:nowrap;
  }

  #playerExpandedTitleText,
  #playerExpandedArtistText {
    display:inline-block;
    width:max-content;
    min-width:0;
    white-space:nowrap;
    will-change:transform;
  }

  .player-expanded-info :is(h2,p).is-metadata-carousel {
    text-align:left;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);
  }

  .player-expanded-info h2.is-metadata-carousel #playerExpandedTitleText,
  .player-expanded-info p.is-metadata-carousel #playerExpandedArtistText {
    animation:playerMetadataCarousel var(--metadata-carousel-duration,10s) ease-in-out infinite;
  }

  .player-expanded-header .player-collapse-btn,
  .player-expanded-header-actions .player-collapse-btn {
    display:inline-grid;
    place-items:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(var(--player-expanded-text-rgb),.2);
    border-radius:50%;
    background:rgba(var(--player-expanded-text-rgb),.1);
    color:rgb(var(--player-expanded-text-rgb));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.1);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    backdrop-filter:blur(16px) saturate(140%);
    font-size:16px;
  }

  .player-expanded-controls .player-btn-large,
  .player-expanded-controls .player-btn-large.player-play-btn,
  #playerExpandedPrevBtn,
  #playerExpandedNextBtn {
    width:58px;
    height:58px;
    border:1px solid rgba(var(--player-expanded-text-rgb),.22);
    border-radius:50%;
    background:rgba(var(--player-expanded-text-rgb),.1);
    color:rgb(var(--player-expanded-text-rgb));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 28px rgba(0,0,0,.12);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
  }

  .player-expanded-controls .player-btn-large.player-play-btn {
    width:72px;
    height:72px;
    font-size:25px;
  }

  .player-expanded-header .player-collapse-btn:active,
  .player-expanded-controls .player-btn-large:active {
    transform:scale(.94);
    background:rgba(var(--player-expanded-text-rgb),.17);
  }

  .player-expanded-panel.has-soundvia-loop .player-expanded-header .player-collapse-btn,
  .player-expanded-panel.has-soundvia-loop .player-expanded-controls .player-btn-large {
    border-color:rgba(255,255,255,.24);
    background:rgba(255,255,255,.11);
    color:#fff;
  }
}

@media (max-width:1023px) {
  .lyrics-theater-mobile-share,
  .lyrics-theater-mobile-translate,
  .lyrics-theater-mobile-control,
  .lyrics-theater-mobile-player-play,
  .lyrics-theater-go-current {
    border:1px solid rgba(var(--lyrics-theater-text-rgb),.2);
    background:rgba(var(--lyrics-theater-text-rgb),.1);
    color:rgb(var(--lyrics-theater-text-rgb));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 28px rgba(0,0,0,.11);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
  }

  .lyrics-theater-mobile-player-play {
    background:rgba(var(--lyrics-theater-text-rgb),.14);
    color:rgb(var(--lyrics-theater-text-rgb));
  }

  .lyrics-theater-go-current {
    width:auto;
    min-width:154px;
    height:44px;
    padding:0 16px;
    border-radius:999px;
    justify-self:center;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:800;
  }

  .lyrics-theater-go-current span {
    display:inline;
    white-space:nowrap;
  }

  .lyrics-theater-mobile-share:active,
  .lyrics-theater-mobile-translate:active,
  .lyrics-theater-mobile-control:active,
  .lyrics-theater-mobile-player-play:active,
  .lyrics-theater-go-current:active {
    transform:scale(.94);
    background:rgba(var(--lyrics-theater-text-rgb),.17);
  }
}

@media (prefers-reduced-motion:reduce) {
  .player-expanded-info h2.is-metadata-carousel #playerExpandedTitleText,
  .player-expanded-info p.is-metadata-carousel #playerExpandedArtistText {
    animation:none;
  }
}

@media (max-width:768px) {
  #playerExpandedPrevBtn,
  #playerExpandedNextBtn {
    border:1px solid rgba(var(--player-expanded-text-rgb),.26) !important;
    border-radius:50% !important;
    background:rgba(var(--player-expanded-text-rgb),.14) !important;
    color:rgb(var(--player-expanded-text-rgb)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 28px rgba(0,0,0,.14) !important;
    -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
    backdrop-filter:blur(18px) saturate(140%) !important;
  }

  #playerExpandedPrevBtn:active,
  #playerExpandedNextBtn:active {
    background:rgba(var(--player-expanded-text-rgb),.2) !important;
    transform:scale(.94);
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-info h2 {
    font-size:25px;
    line-height:1.08;
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-controls {
    gap:36px;
    margin-top:2px;
  }

  #playerExpandedPrevBtn,
  #playerExpandedNextBtn {
    width:52px;
    height:52px;
    font-size:18px;
    border-color:rgba(var(--player-expanded-text-rgb),.2) !important;
    background:rgba(var(--player-expanded-text-rgb),.09) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 22px rgba(0,0,0,.11) !important;
  }

  .player-expanded-controls #playerExpandedPlayBtn {
    width:66px;
    height:66px;
    font-size:23px;
    background:rgba(var(--player-expanded-text-rgb),.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 30px rgba(0,0,0,.14);
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-lyrics-card {
    margin-top:44px;
  }

  .player-expanded-panel.has-soundvia-loop:not(.is-queue-view) .player-expanded-lyrics-card {
    margin-top:64px;
  }

  .player-expanded-controls #playerExpandedPlayBtn {
    width:74px;
    height:74px;
    font-size:25px;
  }
}

@keyframes glassIconLiquidTap {
  0% { transform:translateY(0) scale(1); filter:brightness(1) saturate(1); }
  22% { transform:translateY(2px) scaleX(.9) scaleY(1.06); filter:brightness(1.12) saturate(1.3); }
  48% { transform:translateY(-1px) scaleX(1.055) scaleY(.94); filter:brightness(1.08) saturate(1.2); }
  70% { transform:translateY(0) scaleX(.975) scaleY(1.025); filter:brightness(1.04) saturate(1.1); }
  86% { transform:scaleX(1.012) scaleY(.99); }
  100% { transform:translateY(0) scale(1); filter:brightness(1) saturate(1); }
}

@media (max-width:1023px) {
  :is(
    .player-expanded-header .player-collapse-btn,
    .player-expanded-controls .player-btn-large,
    .lyrics-theater-mobile-share,
    .lyrics-theater-mobile-translate,
    .lyrics-theater-mobile-control,
    .lyrics-theater-mobile-player-play,
    .lyrics-theater-go-current
  ).is-liquid-tap {
    animation:glassIconLiquidTap .52s cubic-bezier(.2,.9,.25,1.18);
    transform-origin:center;
    will-change:transform,filter;
  }
}

@media (prefers-reduced-motion:reduce) {
  .is-liquid-tap { animation:none !important; }
}

/* Refined mobile expanded-player cards. */
@media (max-width:768px) {
  .player-expanded-surface-card {
    position:relative;
    flex:0 0 auto;
    isolation:isolate;
    overflow:hidden;
    border:1px solid rgba(var(--player-expanded-text-rgb),.14) !important;
    border-radius:22px !important;
    background:linear-gradient(145deg,rgba(var(--player-expanded-overlay-rgb),.58),rgba(var(--player-expanded-bg-rgb),.48)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 38px rgba(0,0,0,.12);
    -webkit-backdrop-filter:blur(20px) saturate(135%);
    backdrop-filter:blur(20px) saturate(135%);
  }

  .player-expanded-surface-card::before,
  .player-expanded-surface-card::after {
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    height:32px;
    pointer-events:none;
    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);
  }

  .player-expanded-surface-card::before {
    top:0;
    background:linear-gradient(180deg,rgba(var(--player-expanded-overlay-rgb),.2),transparent);
    -webkit-mask-image:linear-gradient(180deg,#000,transparent);
    mask-image:linear-gradient(180deg,#000,transparent);
  }

  .player-expanded-surface-card::after {
    bottom:0;
    background:linear-gradient(0deg,rgba(var(--player-expanded-overlay-rgb),.22),transparent);
    -webkit-mask-image:linear-gradient(0deg,#000,transparent);
    mask-image:linear-gradient(0deg,#000,transparent);
  }

  .player-expanded-card-head {
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
  }

  .player-expanded-card-head :is(.player-expanded-lyrics-label,.player-expanded-comments-preview-label,.player-expanded-cherry-preview-label) {
    margin:0;
    color:rgb(var(--player-expanded-text-rgb));
    font-size:13px;
    font-weight:850;
    letter-spacing:.04em;
  }

  .player-expanded-card-action,
  .player-expanded-mini-card-icon {
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:40px;
    height:40px;
    border:1px solid rgba(var(--player-expanded-text-rgb),.16);
    border-radius:50%;
    background:rgba(var(--player-expanded-text-rgb),.1);
    color:rgb(var(--player-expanded-text-rgb));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-lyrics-card {
    min-height:270px;
    padding:18px 18px 22px;
    background:
      linear-gradient(145deg,rgba(var(--player-expanded-accent-rgb),.82),rgba(var(--player-expanded-tint-rgb),.72) 58%,rgba(var(--player-expanded-progress-rgb),.66)) !important;
    border-color:rgba(var(--player-expanded-text-rgb),.18) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 46px rgba(var(--player-expanded-accent-rgb),.2);
  }

  .player-expanded-lyrics-copy {
    position:relative;
    z-index:1;
    min-height:184px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:13px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 13%,#000 87%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 13%,#000 87%,transparent 100%);
  }

  .player-expanded-lyrics-copy .player-expanded-lyrics-line {
    overflow:hidden;
    white-space:normal;
    text-overflow:clip;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    font-size:21px;
    line-height:1.14;
    font-weight:760;
    letter-spacing:-.02em;
    color:rgb(var(--player-expanded-text-rgb));
  }

  .player-expanded-lyrics-copy .player-expanded-lyrics-line.is-prev {
    opacity:.36;
    filter:blur(.35px);
  }

  .player-expanded-lyrics-copy .player-expanded-lyrics-line.is-current {
    margin:0;
    font-size:25px;
    font-weight:900;
    opacity:1;
  }

  .player-expanded-lyrics-copy .player-expanded-lyrics-line.is-next {
    opacity:.62;
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-comments-preview {
    min-height:190px;
    padding:18px;
  }

  .player-expanded-comments-copy {
    position:relative;
    z-index:1;
    display:grid;
    gap:8px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  }

  .player-expanded-comments-preview-line {
    min-height:48px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:7px 10px;
    border:1px solid rgba(var(--player-expanded-text-rgb),.09);
    border-radius:14px;
    background:rgba(var(--player-expanded-text-rgb),.055);
    overflow:hidden;
    text-align:left;
  }

  .player-expanded-comments-preview-line[hidden] { display:none !important; }

  .player-expanded-comment-preview-avatar {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(var(--player-expanded-text-rgb),.12);
    color:rgb(var(--player-expanded-text-rgb));
    font-size:12px;
    font-weight:900;
  }

  .player-expanded-comment-preview-copy {
    min-width:0;
    display:grid;
    gap:2px;
  }

  .player-expanded-comment-preview-copy strong {
    overflow:hidden;
    color:rgb(var(--player-expanded-text-rgb));
    font-size:11px;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .player-expanded-comment-preview-copy > span {
    overflow:hidden;
    color:rgba(var(--player-expanded-muted-rgb),.94);
    font-size:13px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .player-expanded-comments-preview-line.is-empty .player-expanded-comment-preview-avatar {
    font-size:0;
  }

  .player-expanded-comments-preview-line.is-empty .player-expanded-comment-preview-avatar::before {
    content:"\f075";
    font-family:"Font Awesome 5 Free";
    font-size:13px;
    font-weight:900;
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-cherry-preview {
    min-height:170px;
    padding:18px;
  }

  .player-expanded-cherry-copy {
    position:relative;
    z-index:1;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  }

  .player-expanded-cherry-preview-summary {
    font-size:15px;
    line-height:1.42;
    -webkit-line-clamp:4;
    line-clamp:4;
  }

  .player-expanded-drawer-grid {
    gap:12px;
  }

  .player-expanded-drawer-grid .player-expanded-mini-card {
    min-height:142px;
    align-content:start;
    gap:8px;
    padding:16px;
  }

  .player-expanded-mini-card > * {
    position:relative;
    z-index:3;
  }

  .player-expanded-mini-card-icon {
    width:42px;
    height:42px;
    margin-bottom:3px;
    font-size:15px;
  }

  .player-expanded-mini-card .player-expanded-comments-preview-label {
    margin:0;
    color:rgb(var(--player-expanded-text-rgb));
    font-size:11px;
    font-weight:850;
  }

  .player-expanded-mini-card small {
    color:rgba(var(--player-expanded-muted-rgb),.94);
    font-size:13px;
    line-height:1.25;
  }
}

/* Share-style morph: a soft shape change rather than an elastic squish. */
@keyframes glassIconLiquidTap {
  0% { transform:scale(1); filter:blur(0) brightness(1); }
  38% { transform:scale(.93); filter:blur(.5px) brightness(1.1); }
  68% { transform:scale(1.025); filter:blur(0) brightness(1.05); }
  100% { transform:scale(1); filter:blur(0) brightness(1); }
}

@keyframes glassIconContentMorph {
  0% { opacity:.45; transform:translateY(3px) scale(.9); filter:blur(2px); }
  100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}

@media (max-width:1023px) {
  :is(
    .player-expanded-header .player-collapse-btn,
    .player-expanded-controls .player-btn-large,
    .lyrics-theater-mobile-share,
    .lyrics-theater-mobile-translate,
    .lyrics-theater-mobile-control,
    .lyrics-theater-mobile-player-play,
    .lyrics-theater-go-current
  ).is-liquid-tap {
    animation-duration:.4s;
    animation-timing-function:cubic-bezier(.16,1,.3,1);
  }

  .is-liquid-tap :is(i,svg,span) {
    animation:glassIconContentMorph .38s cubic-bezier(.16,1,.3,1);
  }
}

@media (max-width:768px) {
  .player-expanded-comments-preview .player-expanded-card-head,
  .player-expanded-cherry-preview .player-expanded-card-head {
    margin-bottom:10px;
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-comments-preview {
    min-height:0;
    height:auto;
    padding:18px 18px 10px;
    background:rgba(var(--player-expanded-overlay-rgb),.62) !important;
  }

  .player-expanded-comments-copy {
    display:flex;
    flex-direction:column;
    gap:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
  }

  .player-expanded-comments-preview-line {
    min-height:0;
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:0 !important;
    padding:15px 0;
    border:0;
    border-bottom:1px solid rgba(var(--player-expanded-text-rgb),.11);
    border-radius:0;
    background:transparent;
    overflow:visible;
  }

  .player-expanded-comments-preview-line:last-child {
    border-bottom:0;
  }

  .player-expanded-comments-preview-line .sd-comment-avatar {
    width:38px;
    height:38px;
    border:1px solid rgba(var(--player-expanded-text-rgb),.12);
    background:rgba(var(--player-expanded-text-rgb),.09);
    color:rgba(var(--player-expanded-muted-rgb),.9);
  }

  .player-expanded-comments-preview-line .sd-comment-body {
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
    gap:5px;
  }

  .player-expanded-comments-preview-line .sd-comment-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
  }

  .player-expanded-comments-preview-line .sd-comment-author {
    min-width:0;
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
    color:rgb(var(--player-expanded-text-rgb));
    font-size:13px;
    font-weight:750;
    line-height:1.2;
  }

  .player-expanded-comments-preview-line .sd-comment-time {
    flex:0 0 auto;
    color:rgba(var(--player-expanded-muted-rgb),.72);
    font-size:10px;
    line-height:1.2;
  }

  .player-expanded-comments-preview-line .sd-comment-text {
    display:-webkit-box;
    overflow:hidden;
    margin:0 !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    color:rgba(var(--player-expanded-muted-rgb),.96);
    font-size:13px;
    line-height:1.42;
    text-align:left;
  }

  .player-expanded-comments-preview-line .sv-verification-badge {
    flex:0 0 auto;
    font-size:12px;
  }

  .player-expanded-comments-preview-line .super-fan-comment-badge {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    margin-left:1px;
    color:var(--super-fan-color,#ff4f78) !important;
    font-size:12px;
    opacity:1 !important;
    visibility:visible !important;
  }

  .player-expanded-drawer-grid .player-expanded-mini-card {
    min-height:112px;
    justify-content:center;
    align-content:center;
    padding:18px;
    gap:7px;
  }

  .player-expanded-mini-card .player-expanded-comments-preview-label {
    font-size:10px;
  }

  .lyrics-theater-preview-morph {
    display:block !important;
    overflow:hidden !important;
    transform-origin:center;
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    backdrop-filter:blur(20px) saturate(140%);
  }
}

@media (max-width:768px) {
  html.player-mobile-overlay-open,
  body.player-mobile-overlay-open {
    width:100%;
    height:100%;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  .player-expanded-panel.active,
  .player-expanded-panel.active .player-expanded-content {
    overscroll-behavior:contain;
  }

  .player-expanded-panel.active .player-expanded-content {
    min-height:0;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
  }

  .player-expanded-panel.is-queue-view :is(
    .player-expanded-lyrics-card,
    .player-expanded-cherry-preview,
    .player-expanded-comments-preview,
    .player-expanded-drawer-grid
  ) {
    display:none !important;
  }

  .player-expanded-panel:not(.is-queue-view):not(.has-soundvia-loop) .player-expanded-cover {
    margin-top:18px;
  }
}

/* Full-screen mobile comments sheet. */
@media (max-width:768px) {
  #playerExpandedCommentsPanel.player-comments-panel {
    --comments-sheet-bg:#ffffff;
    --comments-sheet-surface:#f3f5f8;
    --comments-sheet-surface-strong:#ffffff;
    --comments-sheet-text:#14171d;
    --comments-sheet-muted:#6f7887;
    --comments-sheet-line:rgba(20,23,29,.1);
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    border:0 !important;
    border-radius:var(--comments-sheet-drag-radius,0) var(--comments-sheet-drag-radius,0) 0 0 !important;
    background:var(--comments-sheet-bg) !important;
    color:var(--comments-sheet-text) !important;
    box-shadow:none !important;
    color-scheme:light;
    transform:translateY(100%);
    transition:transform .44s cubic-bezier(.32,.72,0,1),opacity .26s ease,visibility 0s linear .44s;
    overflow:hidden;
  }

  #playerExpandedCommentsPanel.player-comments-panel.open {
    transform:translateY(0);
    transition:transform .44s cubic-bezier(.32,.72,0,1),opacity .26s ease;
  }

  html.dark-mode #playerExpandedCommentsPanel.player-comments-panel {
    --comments-sheet-bg:#141a24;
    --comments-sheet-surface:#1a2230;
    --comments-sheet-surface-strong:#1d2634;
    --comments-sheet-text:#f4f6fa;
    --comments-sheet-muted:#9ca6b6;
    --comments-sheet-line:rgba(255,255,255,.1);
    color-scheme:dark;
  }

  #playerExpandedCommentsBackdrop.is-open {
    opacity:0;
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  #playerExpandedCommentsPanel .player-queue-panel-header {
    position:relative;
    z-index:4;
    flex:0 0 auto;
    min-height:82px;
    padding:calc(30px + env(safe-area-inset-top)) 20px 14px;
    border:0;
    border-bottom:1px solid var(--comments-sheet-line);
    border-radius:0;
    background:color-mix(in srgb,var(--comments-sheet-bg) 88%,transparent);
    box-shadow:0 12px 34px color-mix(in srgb,var(--comments-sheet-text) 5%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(145%);
    backdrop-filter:blur(22px) saturate(145%);
  }

  #playerExpandedCommentsPanel .player-queue-panel-header::before {
    top:calc(9px + env(safe-area-inset-top));
    width:48px;
    height:5px;
    background:color-mix(in srgb,var(--comments-sheet-muted) 54%,transparent);
  }

  #playerExpandedCommentsPanel .player-queue-panel-header h3 {
    color:var(--comments-sheet-text);
    font-size:25px;
    font-weight:850;
    letter-spacing:-.03em;
  }

  #playerExpandedCommentsPanel .player-comments-panel-body {
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    padding:0 18px calc(28px + env(safe-area-inset-bottom));
    gap:0;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    background:var(--comments-sheet-bg);
    color:var(--comments-sheet-text);
    -webkit-overflow-scrolling:touch;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-now {
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:center;
    gap:12px;
    margin:0 -18px;
    padding:16px 18px;
    border-bottom:1px solid var(--comments-sheet-line);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-now-cover {
    display:block;
    width:48px;
    height:48px;
    border-radius:12px;
    object-fit:cover;
    background:var(--comments-sheet-surface);
    box-shadow:0 8px 22px rgba(0,0,0,.12);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-now-cover:not([src]),
  #playerExpandedCommentsPanel .player-expanded-comments-now-cover[src=""] {
    visibility:hidden;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-now-copy {
    min-width:0;
    display:grid;
    gap:4px;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-now-copy > span {
    display:block;
    color:var(--comments-sheet-muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-track {
    overflow:hidden;
    padding:0;
    color:var(--comments-sheet-text);
    font-size:14px;
    font-weight:750;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose.sd-comment-compose {
    align-items:flex-start;
    gap:11px;
    margin:0 -18px;
    padding:16px 18px 18px;
    border:0;
    border-bottom:1px solid var(--comments-sheet-line);
    background:var(--comments-sheet-bg);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose > .sd-comment-avatar {
    width:40px;
    height:40px;
    border-color:var(--comments-sheet-line);
    background:var(--comments-sheet-surface);
    color:var(--comments-sheet-muted);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose .sd-comment-input-wrap {
    overflow:hidden;
    gap:0;
    border:1px solid var(--comments-sheet-line);
    border-radius:18px;
    background:var(--comments-sheet-surface);
    box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose textarea,
  #playerExpandedCommentsPanel .player-expanded-comments-compose .sd-comment-input-wrap textarea {
    min-height:62px;
    padding:13px 14px 8px;
    border:0;
    border-radius:0;
    outline:0;
    background:transparent;
    color:var(--comments-sheet-text);
    box-shadow:none;
    resize:none;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose textarea::placeholder {
    color:var(--comments-sheet-muted);
  }

  #playerExpandedCommentsPanel .sd-comment-compose-actions {
    justify-content:flex-end;
    padding:0 10px 10px;
  }

  #playerExpandedCommentsPanel .sd-btn-comment {
    min-height:34px;
    padding:8px 16px;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-size:12px;
    font-weight:800;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-list {
    width:100%;
    background:transparent;
  }

  #playerExpandedCommentsPanel .sd-comment-item {
    gap:12px;
    padding:18px 0;
    border-bottom:1px solid var(--comments-sheet-line);
    background:transparent;
  }

  #playerExpandedCommentsPanel .sd-comment-avatar {
    width:42px;
    height:42px;
    border-color:var(--comments-sheet-line);
    background:var(--comments-sheet-surface);
    color:var(--comments-sheet-muted);
  }

  #playerExpandedCommentsPanel .sd-comment-author,
  #playerExpandedCommentsPanel .sd-comment-text {
    color:var(--comments-sheet-text);
  }

  #playerExpandedCommentsPanel .sd-comment-author {
    font-size:13px;
    font-weight:800;
  }

  #playerExpandedCommentsPanel .sd-comment-time {
    color:var(--comments-sheet-muted);
    font-size:10px;
  }

  #playerExpandedCommentsPanel .sd-comment-text {
    font-size:14px;
    line-height:1.5;
  }

  #playerExpandedCommentsPanel .sd-comment-action,
  #playerExpandedCommentsPanel .sd-comment-load-replies {
    border-color:var(--comments-sheet-line);
    background:var(--comments-sheet-surface);
    color:var(--comments-sheet-muted);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-empty,
  #playerExpandedCommentsPanel .player-expanded-comments-login {
    color:var(--comments-sheet-muted);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-empty.sd-no-comments {
    min-height:180px;
    display:grid;
    place-items:center;
    padding:44px 16px;
    text-align:center;
  }

  #playerExpandedCommentsPanel .sd-comments-load-more {
    min-height:44px;
    margin:16px auto 0;
    border:1px solid var(--comments-sheet-line);
    border-radius:999px;
    background:var(--comments-sheet-surface);
    color:var(--comments-sheet-text);
  }
}

/* Compact Soundvia conversation rows inspired by native music sheets. */
@media (max-width:768px) {
  #playerExpandedCommentsPanel .player-expanded-comments-scroll {
    padding:0 18px 22px;
  }

  #playerExpandedCommentsPanel .sd-comment-item {
    position:relative;
    gap:11px;
    padding:15px 42px 15px 0;
    border-bottom:0;
  }

  #playerExpandedCommentsPanel .sd-comment-item + .sd-comment-item {
    border-top:1px solid color-mix(in srgb,var(--comments-sheet-line) 54%,transparent);
  }

  #playerExpandedCommentsPanel .sd-comment-avatar {
    width:44px;
    height:44px;
    border:0;
    box-shadow:0 0 0 1px var(--comments-sheet-line);
  }

  #playerExpandedCommentsPanel .sd-comment-body {
    gap:4px;
    min-width:0;
  }

  #playerExpandedCommentsPanel .sd-comment-header {
    justify-content:flex-start;
    align-items:center;
    gap:6px;
    min-width:0;
  }

  #playerExpandedCommentsPanel .sd-comment-author {
    flex:0 1 auto;
    overflow:hidden;
    font-size:14px;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #playerExpandedCommentsPanel .sd-comment-time {
    flex:0 0 auto;
    font-size:12px;
  }

  #playerExpandedCommentsPanel .sd-comment-time::before {
    content:'·';
    margin-right:6px;
    color:var(--comments-sheet-muted);
  }

  #playerExpandedCommentsPanel .sd-comment-pinned {
    margin-right:6px;
    font-size:10px;
  }

  #playerExpandedCommentsPanel .sd-comment-text {
    font-size:15px;
    line-height:1.42;
  }

  #playerExpandedCommentsPanel .sd-comment-actions-row {
    gap:16px;
    min-height:24px;
    margin-top:1px;
  }

  #playerExpandedCommentsPanel .sd-comment-action,
  #playerExpandedCommentsPanel .sd-comment-load-replies {
    min-height:24px;
    padding:2px 0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--comments-sheet-muted);
    font-size:12px;
    font-weight:750;
  }

  #playerExpandedCommentsPanel .sd-comment-action:hover,
  #playerExpandedCommentsPanel .sd-comment-action:active {
    background:transparent;
    color:var(--comments-sheet-text);
  }

  #playerExpandedCommentsPanel .sd-comment-action[data-action="seek"] {
    padding:3px 8px;
    border-radius:999px;
    background:color-mix(in srgb,var(--blue) 14%,transparent);
    color:var(--blue);
  }

  #playerExpandedCommentsPanel .sd-comment-action[data-action="like"] {
    position:absolute;
    top:39px;
    right:2px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    min-width:28px;
    color:var(--comments-sheet-muted);
    font-size:11px;
  }

  #playerExpandedCommentsPanel .sd-comment-action[data-action="like"] .fa-heart {
    font-size:17px;
  }

  #playerExpandedCommentsPanel .sd-comment-action[data-action="like"].is-liked {
    color:var(--blue);
  }

  #playerExpandedCommentsPanel .sd-comment-icon-action {
    width:24px;
    height:24px;
  }

  #playerExpandedCommentsPanel .sd-comment-item-reply {
    padding:12px 38px 12px 0;
  }

  #playerExpandedCommentsPanel .sd-comment-replies {
    gap:0;
    margin:8px 0 0 -30px;
    padding-left:20px;
    border-left:2px solid color-mix(in srgb,var(--blue) 18%,var(--comments-sheet-line));
  }

  #playerExpandedCommentsPanel .sd-comment-reply-compose {
    padding:10px;
    border-radius:14px;
    background:var(--comments-sheet-surface);
  }

  #playerExpandedCommentsPanel .sd-comment-reply-text {
    border-color:var(--comments-sheet-line);
    background:var(--comments-sheet-surface-strong);
    color:var(--comments-sheet-text);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose .sd-comment-input-wrap {
    min-height:52px;
    border-radius:26px;
    box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent),0 8px 24px color-mix(in srgb,var(--comments-sheet-text) 5%,transparent);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose textarea,
  #playerExpandedCommentsPanel .player-expanded-comments-compose .sd-comment-input-wrap textarea {
    min-height:50px;
    max-height:50px;
    padding-top:15px;
    padding-bottom:15px;
  }

  #playerExpandedCommentsPanel .sd-btn-comment {
    width:38px;
    height:38px;
    min-height:38px;
  }
}

/* Native mobile comments layout. */
@media (max-width:768px) {
  #playerExpandedCommentsPanel .player-queue-panel-header {
    display:none !important;
  }

  #playerExpandedCommentsPanel .player-comments-panel-body {
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    width:100%;
    height:100%;
    padding:0;
    overflow:hidden;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-now {
    grid-row:1;
    grid-template-columns:54px minmax(0,1fr);
    gap:10px;
    position:relative;
    z-index:4;
    margin:0;
    padding:calc(28px + env(safe-area-inset-top)) 18px 14px;
    border:0;
    background:color-mix(in srgb,var(--comments-sheet-bg) 90%,transparent);
    box-shadow:0 1px 0 var(--comments-sheet-line);
    -webkit-backdrop-filter:blur(22px) saturate(145%);
    backdrop-filter:blur(22px) saturate(145%);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-grabber {
    position:absolute;
    top:calc(9px + env(safe-area-inset-top));
    left:50%;
    width:48px;
    height:5px;
    border-radius:999px;
    background:color-mix(in srgb,var(--comments-sheet-muted) 54%,transparent);
    transform:translateX(-50%);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-now-cover {
    width:54px;
    height:54px;
    border-radius:8px;
    box-shadow:0 14px 30px rgba(0,0,0,.18),0 0 0 1px color-mix(in srgb,#fff 14%,transparent);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-now-copy {
    display:block;
    min-width:0;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-track {
    padding:0;
    color:var(--comments-sheet-text);
    font-size:15px;
    font-weight:800;
    line-height:1.15;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-artist {
    overflow:hidden;
    margin-top:3px;
    color:var(--comments-sheet-muted);
    font-size:13px;
    font-weight:650;
    line-height:1.15;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-scroll {
    grid-row:2;
    min-height:0;
    padding:0 18px 18px;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-scroll::-webkit-scrollbar {
    display:none;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-empty.sd-no-comments {
    min-height:calc(100% - 1px);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose.sd-comment-compose {
    grid-row:3;
    align-items:center;
    gap:0;
    z-index:5;
    margin:0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border:0;
    border-top:1px solid var(--comments-sheet-line);
    background:color-mix(in srgb,var(--comments-sheet-bg) 88%,transparent);
    box-shadow:0 -14px 34px color-mix(in srgb,var(--comments-sheet-text) 6%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(145%);
    backdrop-filter:blur(22px) saturate(145%);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose > .sd-comment-avatar {
    display:none;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose .sd-comment-input-wrap {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
    width:100%;
    min-height:48px;
    padding:0 5px 0 0;
    border:1px solid var(--comments-sheet-line);
    border-radius:24px;
    background:var(--comments-sheet-surface);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose textarea,
  #playerExpandedCommentsPanel .player-expanded-comments-compose .sd-comment-input-wrap textarea {
    min-width:0;
    min-height:46px;
    max-height:46px;
    padding:13px 6px 12px 16px;
    overflow:hidden;
    font-size:14px;
    line-height:20px;
    white-space:nowrap;
  }

  #playerExpandedCommentsPanel .sd-comment-compose-actions {
    flex:0 0 auto;
    padding:0;
  }

  #playerExpandedCommentsPanel .sd-btn-comment {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    min-height:36px;
    padding:0;
    border-radius:50%;
    font-size:14px;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-login {
    grid-row:3;
    z-index:5;
    margin:0;
    padding:15px 18px calc(15px + env(safe-area-inset-bottom));
    border-top:1px solid var(--comments-sheet-line);
    background:color-mix(in srgb,var(--comments-sheet-bg) 90%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(145%);
    backdrop-filter:blur(22px) saturate(145%);
  }
}

/* Comments interaction fixes and shared bottom reply composer. */
@media (max-width:768px) {
  #playerExpandedCommentsPanel .player-expanded-comments-compose.sd-comment-compose {
    gap:10px;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose > .sd-comment-avatar {
    display:flex;
    flex:0 0 42px;
    width:42px;
    height:42px;
    border:0;
    background:var(--comments-sheet-surface);
    box-shadow:0 0 0 1px var(--comments-sheet-line);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose .sd-comment-input-wrap {
    min-width:0;
  }

  #playerExpandedCommentsPanel .player-expanded-comment-reply-cancel {
    display:none;
    place-items:center;
    width:30px;
    height:30px;
    padding:0;
    border:0;
    border-radius:50%;
    background:color-mix(in srgb,var(--comments-sheet-text) 8%,transparent);
    color:var(--comments-sheet-muted);
    font-size:12px;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose.is-replying .player-expanded-comment-reply-cancel {
    display:grid;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose.is-replying .sd-comment-input-wrap {
    border-color:color-mix(in srgb,var(--blue) 42%,var(--comments-sheet-line));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 9%,transparent),0 8px 24px color-mix(in srgb,var(--blue) 9%,transparent);
  }

  #playerExpandedCommentsPanel .sd-comment-header,
  #playerExpandedCommentsPanel .sd-comment-author,
  #playerExpandedCommentsPanel .sd-comment-body,
  #playerExpandedCommentsPanel .super-fan-comment-badge {
    overflow:visible;
  }

  #playerExpandedCommentsPanel .sd-comment-author {
    max-width:calc(100% - 38px);
    text-overflow:clip;
    white-space:normal;
  }

  #playerExpandedCommentsPanel .super-fan-comment-badge {
    position:relative;
    z-index:2;
    isolation:isolate;
  }
}

/* Final comments sheet spacing and neutral shadows. */
@media (max-width:768px) {
  #playerExpandedCommentsPanel .player-expanded-comments-scroll {
    padding-right:26px;
    padding-bottom:32px;
    padding-left:26px;
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose.sd-comment-compose {
    padding:12px 20px calc(20px + env(safe-area-inset-bottom));
    border-top-color:var(--comments-sheet-line);
    box-shadow:0 -12px 30px rgba(0,0,0,.07);
  }

  #playerExpandedCommentsPanel .player-expanded-comments-compose .sd-comment-input-wrap {
    box-shadow:0 6px 18px rgba(0,0,0,.07);
  }

  html.dark-mode #playerExpandedCommentsPanel .player-expanded-comments-compose.sd-comment-compose {
    border-top-color:rgba(255,255,255,.06);
    box-shadow:0 -12px 30px rgba(0,0,0,.24);
  }

  html.dark-mode #playerExpandedCommentsPanel .player-expanded-comments-compose .sd-comment-input-wrap {
    border-color:rgba(255,255,255,.08);
    box-shadow:0 6px 18px rgba(0,0,0,.18);
  }

html.dark-mode #playerExpandedCommentsPanel .sd-comment-item + .sd-comment-item {
    border-top-color:rgba(255,255,255,.045);
  }
}

/* Progressive one-page release upload. */
#releaseUploadPage.is-awaiting-audio {
  box-sizing:border-box;
  display:flex;
  min-height:calc(100dvh - 92px);
  flex-direction:column;
  justify-content:center;
}

#releaseUploadPage.is-awaiting-audio > :is(#releaseDraftSection,#releaseTracksSection,#releasePublishingSection,#releasePublishedSection,#releaseFinalActions) {
  display:none !important;
}

#releaseUploadPage.is-awaiting-audio > #releaseUploadError:empty {
  display:none;
}

#releaseUploadPage.is-awaiting-audio .upload-audio-first-section,
.artist-studio #releaseUploadPage.is-awaiting-audio .upload-audio-first-section {
  width:min(100%,680px);
  margin:0 auto;
  padding:clamp(24px,4vw,38px);
}

#releaseUploadPage.is-awaiting-audio .upload-audio-first-section .upload-section-hd {
  justify-content:center;
  margin-bottom:24px;
  text-align:center;
}

#releaseUploadPage.is-awaiting-audio .upload-audio-first-section .upload-section-title {
  justify-content:center;
  font-size:clamp(26px,4vw,36px);
  flex-wrap:nowrap;
  white-space:nowrap;
}

#releaseUploadPage.is-awaiting-audio .upload-audio-first-section .upload-section-sub {
  max-width:520px;
  margin-inline:auto;
  font-size:14px;
  line-height:1.55;
}

#releaseUploadPage.is-awaiting-audio .upload-audio-dropzone {
  min-height:clamp(190px,30vh,270px);
}

#releaseUploadPage.is-awaiting-audio .upload-audio-dz-inner {
  min-height:inherit;
  box-sizing:border-box;
  justify-content:center;
}

#releaseUploadPage.has-selected-audio > #releaseDraftSection {
  animation:upload-details-reveal .28s ease both;
}

@keyframes upload-details-reveal {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}

#releaseTracksSection.is-single-release:not(.has-uploaded-tracks) {
  display:none;
}

#releaseTracksSection.is-single-release,
.artist-studio #releaseUploadPage #releaseTracksSection.is-single-release {
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

#releaseTracksSection.is-single-release > :is(.upload-tracks-hd,.upload-track-form-card) {
  display:none;
}

#releaseTracksSection.is-single-release .upload-tracks-list {
  margin:0;
}

#releaseTracksSection.is-single-release .track-row .drag-handle,
#releaseTracksSection.is-single-release .track-row .track-order,
#releaseTracksSection.is-single-release .track-row .track-reorder-btn,
#releaseTracksSection.is-single-release .track-edit-panel > .form-group:has(.track-edit-title) {
  display:none;
}

.upload-track-count:not(:empty) {
  display:inline-grid;
  min-width:26px;
  height:26px;
  padding-inline:7px;
  place-items:center;
  border-radius:999px;
  background:color-mix(in srgb,var(--blue) 12%,var(--white));
  color:var(--blue);
  font-size:12px;
}

#releaseFinalActions {
  margin:18px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--border);
}

@media (max-width:1023px) {
  #releaseUploadPage.is-awaiting-audio {
    min-height:calc(100dvh - var(--mobile-top-nav-height,62px) - var(--mobile-bottom-nav-height,76px));
    justify-content:flex-start;
    padding-top:clamp(42px,8vh,72px);
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }

  #releaseUploadPage.is-awaiting-audio .upload-audio-first-section,
  .artist-studio #releaseUploadPage.is-awaiting-audio .upload-audio-first-section {
    width:min(100%,540px);
    margin:0 auto;
    padding:0 14px 24px;
  }

  #releaseUploadPage.is-awaiting-audio .upload-audio-first-section .upload-section-hd {
    margin-bottom:22px;
    padding-inline:4px;
  }

  #releaseUploadPage.is-awaiting-audio .upload-audio-first-section .upload-section-title {
    gap:10px;
    font-size:clamp(25px,7vw,30px);
    letter-spacing:-.025em;
  }

  #releaseUploadPage.is-awaiting-audio .upload-audio-first-section .upload-section-title i {
    flex:0 0 auto;
    font-size:24px;
  }

  #releaseUploadPage.is-awaiting-audio .upload-audio-first-section .upload-section-sub {
    max-width:390px;
    margin-top:8px;
    font-size:13px;
    line-height:1.5;
  }

  #releaseUploadPage.is-awaiting-audio .upload-audio-dropzone {
    min-height:184px;
    border-radius:18px;
  }

  #releaseUploadPage.is-awaiting-audio .upload-audio-dz-inner {
    min-height:184px;
    padding:24px 18px;
    justify-content:center;
    gap:8px;
  }

  #releaseUploadPage.is-awaiting-audio .upload-audio-dz-inner i {
    font-size:34px;
  }

  #releaseUploadPage.is-awaiting-audio .upload-audio-dz-inner p {
    font-size:14px;
  }

  #releaseUploadPage.is-awaiting-audio .upload-audio-dz-inner small {
    font-size:11px;
  }

  #releaseUploadPage #releaseTracksSection.is-single-release {
    margin:0 0 12px;
  }

  #releaseUploadPage #releaseTracksSection.is-single-release .upload-tracks-list {
    margin:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:14px;
  }

  #releaseUploadPage #releaseTracksSection.is-single-release #releaseTracksList .track-row {
    border-bottom:0;
    border-radius:14px;
  }

  #releaseFinalActions {
    margin:18px -14px 0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  }
}

@media (max-width:768px) {
  .player-expanded-panel {
    height:100dvh;
    max-height:100dvh;
  }

  .player-expanded-header {
    flex:0 0 auto;
    touch-action:none;
  }

  .player-expanded-panel.active .player-expanded-content {
    flex:1 1 auto;
    height:auto;
    min-height:0;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:contain;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .player-expanded-panel.active .player-expanded-content::-webkit-scrollbar {
    display:none;
  }

  .player-expanded-panel.active:not(.is-queue-view) .player-expanded-content > * {
    flex-shrink:0;
  }
}

/* Lyric Video Maker · artist workspace visual system */
.settings-container.lyrics-video-page {
  --lvm-panel: var(--as-panel, var(--surface-1));
  --lvm-subtle: var(--as-panel-subtle, var(--surface-2));
  --lvm-border: var(--as-border, var(--border));
  --lvm-text: var(--as-text, var(--black));
  --lvm-muted: var(--as-muted, var(--text-secondary));
  --lvm-accent: var(--as-accent, var(--blue));
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 0 52px;
  color: var(--lvm-text);
}

.settings-container.lyrics-video-page .lyrics-video-header {
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.settings-container.lyrics-video-page .lyrics-video-header h1 {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.settings-container.lyrics-video-page .lyrics-video-subtitle {
  margin: 7px 0 0;
  color: var(--lvm-muted);
  font-size: 14px;
  font-weight: 600;
}

.settings-container.lyrics-video-page #lyricsVideoSelectionHint {
  max-width: 680px;
  margin: 5px 0 0;
  color: var(--lvm-muted);
  font-size: 12px;
}

.settings-container.lyrics-video-page .lyrics-video-editor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 500px);
  align-items: start;
  min-height: 560px;
  gap: 20px;
}

.settings-container.lyrics-video-page .lyrics-video-stage-column {
  position: sticky;
  top: 88px;
  z-index: 7;
  align-self: start;
  width: 100%;
  min-width: 0;
  margin: 0;
  gap: 14px;
}

.settings-container.lyrics-video-page .lyrics-video-preview-panel,
.settings-container.lyrics-video-page .lyrics-video-export-bar {
  margin: 0;
  border: 1px solid var(--lvm-border);
  border-radius: 12px;
  background: var(--lvm-panel);
  box-shadow: 0 3px 12px rgba(12, 12, 14, .045);
}

.settings-container.lyrics-video-page .lyrics-video-preview-panel {
  position: static;
  padding: 14px;
  animation: none;
}

.settings-container.lyrics-video-page .lyrics-video-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 2px 2px 13px;
  gap: 18px;
}

.settings-container.lyrics-video-page .lyrics-video-preview-head h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.025em;
}

.settings-container.lyrics-video-page .lyrics-video-preview-head p {
  margin: 4px 0 0;
  color: var(--lvm-muted);
  font-size: 12px;
}

.settings-container.lyrics-video-page .lyrics-video-preview-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  gap: 6px;
  border: 1px solid var(--lvm-border);
  border-radius: 999px;
  color: var(--lvm-muted);
  background: var(--lvm-subtle);
  font-size: 11px;
  font-weight: 700;
}

.settings-container.lyrics-video-page .lyrics-video-preview-head > span i {
  color: #20b26b;
  font-size: 7px;
}

.settings-container.lyrics-video-page .lyrics-video-canvas-stage {
  display: grid;
  min-height: 260px;
  max-height: calc(100dvh - 420px);
  overflow: hidden;
  place-items: center;
  border: 1px solid #202329;
  border-radius: 9px;
  background: #0c0d10;
  box-shadow: none;
}

.settings-container.lyrics-video-page .lyrics-video-canvas-stage canvas {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 422px);
  object-fit: contain;
}

@media (min-width: 1024px) {
  .settings-container.lyrics-video-page.is-rendering .lyrics-video-editor-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-container.lyrics-video-page.is-rendering .lyrics-video-stage-column {
    position: static;
    width: min(100%, 1220px);
    margin-inline: auto;
  }

  .settings-container.lyrics-video-page.is-rendering .lyrics-video-controls-column {
    display: none;
  }

  .settings-container.lyrics-video-page.is-rendering .lyrics-video-canvas-stage {
    min-height: 420px;
    max-height: calc(100dvh - 245px);
  }

  .settings-container.lyrics-video-page.is-rendering .lyrics-video-canvas-stage canvas {
    max-height: calc(100dvh - 247px);
  }
}

.settings-container.lyrics-video-page .lyrics-video-fake-player {
  margin: 13px 0 0;
  padding: 2px 2px 0;
  gap: 7px;
  border: 0;
  border-radius: 0;
  color: var(--lvm-muted);
  background: transparent;
}

.settings-container.lyrics-video-page .lyrics-video-fake-player-times {
  color: var(--lvm-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.settings-container.lyrics-video-page input[type="range"] {
  accent-color: var(--lvm-accent);
}

.settings-container.lyrics-video-page .lyrics-video-export-bar {
  padding: 13px 14px;
}

.settings-container.lyrics-video-page .lyrics-video-actions {
  align-items: center;
  margin: 0;
  gap: 8px;
}

.settings-container.lyrics-video-page .lyrics-video-actions .btn {
  min-height: 40px;
  padding: 0 15px;
  border-color: var(--lvm-border);
  border-radius: 999px;
  color: var(--lvm-text);
  background: var(--lvm-panel);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.settings-container.lyrics-video-page .lyrics-video-actions .btn:hover {
  border-color: color-mix(in srgb, var(--lvm-accent) 36%, var(--lvm-border));
  background: var(--lvm-subtle);
}

.settings-container.lyrics-video-page .lyrics-video-actions .btn-primary {
  border-color: var(--lvm-accent);
  color: #fff;
  background: var(--lvm-accent);
}

.settings-container.lyrics-video-page .lyrics-video-actions .btn-primary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--lvm-accent) 82%, #fff);
  color: #fff;
  background: color-mix(in srgb, var(--lvm-accent) 84%, #fff);
  transform: translateY(-1px);
}

.settings-container.lyrics-video-page .lyrics-video-status {
  margin: 10px 0 0;
  color: var(--lvm-muted);
  font-size: 12px;
  font-weight: 650;
}
.settings-container.lyrics-video-page .lyrics-video-autosave {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  align-self: flex-start;
  padding: 8px 11px;
  gap: 7px;
  border: 1px solid var(--lvm-border);
  border-radius: 999px;
  color: var(--lvm-muted);
  background: var(--lvm-panel);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.settings-container.lyrics-video-page .lyrics-video-autosave i { color: var(--lvm-accent); }
.settings-container.lyrics-video-page .lyrics-video-autosave.is-saving i { animation: clips-spin 1s linear infinite; }
.settings-container.lyrics-video-page .lyrics-video-autosave.is-saved { color: var(--lvm-text); }
.settings-container.lyrics-video-page .lyrics-video-autosave.is-error { border-color: color-mix(in srgb,#ef4444 42%,var(--lvm-border)); color: #d84953; }

.settings-container.lyrics-video-page .lyrics-video-export-bar > .form-hint {
  margin: 5px 0 0;
  color: var(--lvm-muted);
  font-size: 10px;
}

.settings-container.lyrics-video-page .lyrics-video-controls-column {
  position: sticky;
  top: 88px;
  right: auto;
  z-index: 8;
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  width: 100%;
  height: calc(100dvh - 112px);
  max-height: 820px;
  padding: 0;
  gap: 10px;
  align-items: start;
}

.settings-container.lyrics-video-page .lyrics-video-control-rail {
  order: -1;
  display: flex;
  width: 100%;
  max-height: none;
  min-height: 0;
  padding: 7px;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  border: 1px solid var(--lvm-border);
  border-radius: 12px;
  background: var(--lvm-panel);
  box-shadow: 0 3px 12px rgba(12, 12, 14, .04);
  scrollbar-width: thin;
  align-self: start;
}

.settings-container.lyrics-video-page .lyrics-video-rail-btn {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 41px;
  padding: 0 10px;
  place-items: unset;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--lvm-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 650;
  text-align: left;
  transition: color .16s ease, background .16s ease;
}

.settings-container.lyrics-video-page .lyrics-video-rail-btn i {
  width: 18px;
  flex: 0 0 18px;
  color: inherit;
  font-size: 14px;
  text-align: center;
}

.settings-container.lyrics-video-page .lyrics-video-rail-btn span {
  max-width: none;
  overflow: hidden;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.settings-container.lyrics-video-page .lyrics-video-rail-btn:hover {
  border-color: transparent;
  color: var(--lvm-text);
  background: var(--as-hover, color-mix(in srgb, var(--lvm-accent) 8%, var(--lvm-subtle)));
}

.settings-container.lyrics-video-page .lyrics-video-rail-btn.is-active {
  border-color: transparent;
  color: var(--lvm-text);
  background: var(--lvm-subtle);
}

.settings-container.lyrics-video-page .lyrics-video-rail-btn.is-active::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lvm-accent);
  content: '';
}

.settings-container.lyrics-video-page #lyricsVideoBeatMenuBtn {
  margin-top: 8px;
  box-shadow: 0 -9px 0 -8px var(--lvm-border);
}

.settings-container.lyrics-video-page .lyrics-video-control-flyout {
  display: flex;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border: 1px solid var(--lvm-border);
  border-radius: 12px;
  background: var(--lvm-panel);
  box-shadow: 0 3px 12px rgba(12, 12, 14, .04);
  opacity: 0;
  transform: none;
  transition: opacity .14s ease;
}

.settings-container.lyrics-video-page .lyrics-video-control-flyout.is-open {
  opacity: 1;
  transform: none;
}

.settings-container.lyrics-video-page .lyrics-video-control-surface-header {
  min-height: 57px;
  padding: 0 16px;
  border-bottom: 1px solid var(--lvm-border);
}

.settings-container.lyrics-video-page .lyrics-video-control-surface-header h2 {
  font-size: 17px;
  letter-spacing: -.02em;
}

.settings-container.lyrics-video-page .lyrics-video-control-panels {
  min-height: 0;
  padding: 13px 14px 24px;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--lvm-muted) 35%, transparent) transparent;
}

@media (min-width: 1024px) {
  .settings-container.lyrics-video-page .lyrics-video-controls-column {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
  }

  .settings-container.lyrics-video-page .lyrics-video-control-rail {
    position: sticky;
    top: 88px;
    max-height: calc(100dvh - 112px);
  }

  .settings-container.lyrics-video-page .lyrics-video-control-flyout,
  .settings-container.lyrics-video-page .lyrics-video-control-panels {
    max-height: none;
    overflow: visible;
  }
}

.settings-container.lyrics-video-page .lyrics-video-control-panel {
  display: grid;
  padding: 0;
  gap: 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.settings-container.lyrics-video-page .lyrics-video-control-panel > h3:first-child {
  display: none;
}

.settings-container.lyrics-video-page .lyrics-video-control-panel > .form-hint:first-of-type {
  margin: 0 0 3px;
  color: var(--lvm-muted);
  line-height: 1.45;
}

.settings-container.lyrics-video-page .lyrics-video-variants-panel {
  gap: 12px;
}

.settings-container.lyrics-video-page .lyrics-video-variant-option {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--lvm-subtle);
}

.settings-container.lyrics-video-page .lyrics-video-variant-option > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lvm-text);
  font-size: 13px;
  font-weight: 700;
}

.settings-container.lyrics-video-page .lyrics-video-variant-option select[multiple] {
  min-height: 94px;
}

.settings-container.lyrics-video-page .lyrics-video-variant-media-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding-bottom: 2px;
}

.settings-container.lyrics-video-page .lyrics-video-control-panel .form-group {
  margin: 0;
  padding: 0 0 11px;
  gap: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lvm-border) 72%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.settings-container.lyrics-video-page .lyrics-video-control-panel .form-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.settings-container.lyrics-video-page .lyrics-video-control-panel .form-group > label:first-child,
.settings-container.lyrics-video-page .lyrics-video-control-panel .form-group > label:not(.lyrics-video-inline-check) {
  display: block;
  margin: 0 0 6px;
  color: var(--lvm-text);
  font-size: 11px;
  font-weight: 720;
}

.settings-container.lyrics-video-page .lyrics-video-control-panel :is(select, textarea, input[type="text"], input[type="number"], input[type="search"], input[type="url"]) {
  width: 100%;
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid var(--lvm-border);
  border-radius: 8px;
  color: var(--lvm-text);
  background: var(--lvm-panel);
  box-shadow: none;
}

.settings-container.lyrics-video-page .lyrics-video-control-panel textarea {
  min-height: 112px;
  padding-top: 9px;
  resize: vertical;
}

.settings-container.lyrics-video-page .lyrics-video-control-panel :is(select, textarea, input):focus {
  border-color: var(--lvm-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lvm-accent) 12%, transparent);
}

.settings-container.lyrics-video-page .lyrics-video-inline-check {
  min-height: 32px;
  color: var(--lvm-text);
  font-size: 12px;
  font-weight: 600;
}

.settings-container.lyrics-video-page .lyrics-video-inline-check input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  accent-color: var(--lvm-accent);
}

.settings-container.lyrics-video-page .lyrics-video-control-panel .form-hint {
  margin: 5px 0 0;
  color: var(--lvm-muted);
  font-size: 10px;
  line-height: 1.45;
}

.settings-container.lyrics-video-page .lyrics-video-control-panel > .form-hint {
  margin: 5px 0 0;
}

.settings-container.lyrics-video-page .lyrics-video-control-panel > .form-hint:first-of-type {
  margin-top: 0;
}

.settings-container.lyrics-video-page .lyrics-video-visual-select-grid {
  gap: 7px;
  padding-right: 3px;
  grid-auto-rows: minmax(50px, auto);
}

.settings-container.lyrics-video-page .lyrics-video-visual-select.lyrics-video-visual-select-font .lyrics-video-visual-select-grid {
  max-height: none;
  overflow: visible;
  grid-auto-rows: minmax(86px, auto);
  align-items: stretch;
}

.settings-container.lyrics-video-page .lyrics-video-visual-select.lyrics-video-visual-select-font .lyrics-video-visual-select-card {
  min-height: 86px;
  overflow: hidden;
}

.settings-container.lyrics-video-page .lyrics-video-visual-select.lyrics-video-visual-select-font .lyrics-video-visual-select-font-preview {
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1.08;
}

.settings-container.lyrics-video-page .lyrics-video-visual-select.lyrics-video-visual-select-font .lyrics-video-visual-select-font-name {
  flex: 0 0 auto;
  line-height: 1.25;
}

.settings-container.lyrics-video-page .lyrics-video-caption-settings {
  display: grid;
  gap: 11px;
}

.settings-container.lyrics-video-page .lyrics-video-caption-toggle {
  min-height: 42px;
  width: 100%;
  justify-content: center;
  font-size: 13px;
}

.settings-container.lyrics-video-page .file-input-wrapper {
  margin-top: 1px;
}

.settings-container.lyrics-video-page .file-input-label {
  min-height: 86px;
  padding: 14px 12px;
  gap: 7px;
  border: 1px dashed var(--lvm-border);
  border-radius: 8px;
  color: var(--lvm-muted);
  background: var(--lvm-subtle);
}

.settings-container.lyrics-video-page .file-input-label:hover {
  border-color: color-mix(in srgb, var(--lvm-accent) 48%, var(--lvm-border));
  background: color-mix(in srgb, var(--lvm-accent) 7%, var(--lvm-subtle));
}

.settings-container.lyrics-video-page .file-input-label i {
  font-size: 21px;
}

.settings-container.lyrics-video-page .file-input-label .text {
  gap: 2px;
}

.settings-container.lyrics-video-page .file-input-label .text strong {
  color: var(--lvm-text);
  font-size: 11px;
}

.settings-container.lyrics-video-page .file-input-label .text span,
.settings-container.lyrics-video-page .file-input-name {
  color: var(--lvm-muted);
  font-size: 9px;
}

.settings-container.lyrics-video-page .lyrics-video-visual-select-card,
.settings-container.lyrics-video-page .lyrics-video-choice-card {
  border-color: var(--lvm-border);
  border-radius: 8px;
  color: var(--lvm-text);
  background: var(--lvm-panel);
  box-shadow: none;
}

.settings-container.lyrics-video-page .lyrics-video-visual-select-card {
  min-height: 48px;
  padding: 7px 8px;
}

.settings-container.lyrics-video-page .lyrics-video-choice-card {
  min-height: 64px;
  padding: 8px;
}

.settings-container.lyrics-video-page :is(.lyrics-video-visual-select-card, .lyrics-video-choice-card):hover {
  border-color: color-mix(in srgb, var(--lvm-accent) 38%, var(--lvm-border));
  background: var(--as-hover, var(--lvm-subtle));
}

.settings-container.lyrics-video-page :is(.lyrics-video-visual-select-card, .lyrics-video-choice-card).is-active {
  border-color: color-mix(in srgb, var(--lvm-accent) 58%, var(--lvm-border));
  background: color-mix(in srgb, var(--lvm-accent) 9%, var(--lvm-panel));
}

.settings-container.lyrics-video-page .lyrics-video-visual-select-title {
  color: var(--lvm-muted);
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
}

.settings-container.lyrics-video-page .lyrics-video-lines,
.settings-container.lyrics-video-page .lyrics-video-effect-selector {
  padding: 6px;
  border-color: var(--lvm-border);
  border-radius: 8px;
  background: var(--lvm-subtle);
}

.settings-container.lyrics-video-page .lyrics-video-line-option {
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--lvm-text);
  background: var(--lvm-panel);
}

.settings-container.lyrics-video-page .lyrics-video-line-option.is-in-range {
  border-color: color-mix(in srgb, var(--lvm-accent) 30%, var(--lvm-border));
  background: color-mix(in srgb, var(--lvm-accent) 8%, var(--lvm-panel));
}

.settings-container.lyrics-video-page :is(
  .lyrics-video-override-accordion,
  .lyrics-video-override-subaccordion,
  .lyrics-video-override-section,
  .lyrics-video-effect-line-row,
  .lyrics-video-effect-layer-card,
  .lyrics-video-effect-layer-group,
  .lyrics-video-bg-item,
  .lyrics-video-pinterest-card
) {
  border-color: var(--lvm-border);
  border-radius: 8px;
  color: var(--lvm-text);
  background: var(--lvm-panel);
}

.settings-container.lyrics-video-page :is(
  .lyrics-video-override-body,
  .lyrics-video-effect-layer-body,
  .lyrics-video-effect-layer-group-body
) {
  border-color: var(--lvm-border);
}

.settings-container.lyrics-video-page .lyrics-video-effect-word-chip {
  min-height: 29px;
  border-color: var(--lvm-border);
  border-radius: 7px;
  color: var(--lvm-text);
  background: var(--lvm-panel);
}

.settings-container.lyrics-video-page .lyrics-video-effect-word-chip.is-selected {
  border-color: var(--lvm-accent);
  color: var(--lvm-accent);
  background: color-mix(in srgb, var(--lvm-accent) 10%, var(--lvm-panel));
}

.settings-container.lyrics-video-page .lyrics-video-bg-empty,
.settings-container.lyrics-video-page .lyrics-video-pinterest-empty {
  border-color: var(--lvm-border);
  border-radius: 8px;
  color: var(--lvm-muted);
  background: var(--lvm-subtle);
}

:is(
  #lyricsVideoRenderChoiceModal,
  #lyricsVideoRenderModal,
  #lyricsVideoDonateModal,
  #lyricsVideoPresetModal,
  #lyricsVideoBeatModal
) .modal-content {
  overflow: hidden;
  border: 1px solid var(--as-border, var(--border));
  border-radius: 14px;
  color: var(--as-text, var(--black));
  background: var(--as-panel, var(--surface-1));
  box-shadow: 0 24px 70px rgba(8, 10, 14, .2);
}

:is(
  #lyricsVideoRenderChoiceModal,
  #lyricsVideoRenderModal,
  #lyricsVideoDonateModal,
  #lyricsVideoPresetModal,
  #lyricsVideoBeatModal
) .modal-header {
  min-height: 62px;
  padding: 0 18px;
  border-bottom: 1px solid var(--as-border, var(--border));
}

:is(
  #lyricsVideoRenderChoiceModal,
  #lyricsVideoRenderModal,
  #lyricsVideoDonateModal,
  #lyricsVideoPresetModal,
  #lyricsVideoBeatModal
) .modal-body {
  padding: 17px 18px 20px;
}

:is(
  #lyricsVideoRenderChoiceModal,
  #lyricsVideoRenderModal,
  #lyricsVideoDonateModal,
  #lyricsVideoPresetModal,
  #lyricsVideoBeatModal
) .modal-close {
  border-radius: 50%;
}

#lyricsVideoBeatModal .modal-content {
  width: min(620px, calc(100vw - 26px));
}

@media (min-width: 1024px) and (max-width: 1380px) {
  .settings-container.lyrics-video-page .lyrics-video-editor-shell {
    grid-template-columns: minmax(0, 1fr) minmax(405px, 440px);
    gap: 14px;
  }

  .settings-container.lyrics-video-page .lyrics-video-controls-column {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .settings-container.lyrics-video-page .lyrics-video-rail-btn {
    padding: 0 8px;
    gap: 7px;
    font-size: 10px;
  }
}

@media (max-width: 1023px) {
  .settings-container.lyrics-video-page {
    width: 100%;
    padding: 0 0 36px;
  }

  .settings-container.lyrics-video-page .lyrics-video-header {
    margin-bottom: 15px;
  }

  .settings-container.lyrics-video-page .lyrics-video-header h1 {
    font-size: clamp(27px, 7vw, 34px);
  }

  .settings-container.lyrics-video-page .lyrics-video-editor-shell {
    display: block;
    min-height: 0;
  }

  .settings-container.lyrics-video-page .lyrics-video-stage-column {
    position: static;
  }

  .settings-container.lyrics-video-page .lyrics-video-preview-panel {
    position: static;
    padding: 9px;
    border-radius: 10px;
  }

  .settings-container.lyrics-video-page .lyrics-video-preview-head {
    padding: 3px 3px 10px;
  }

  .settings-container.lyrics-video-page .lyrics-video-canvas-stage {
    min-height: 220px;
    max-height: 58dvh;
  }

  .settings-container.lyrics-video-page .lyrics-video-canvas-stage canvas {
    max-height: 58dvh;
  }

  .settings-container.lyrics-video-page .lyrics-video-mobile-category-bar {
    display: flex;
    margin: 0 -1px;
    padding: 3px 1px 7px;
    gap: 5px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .settings-container.lyrics-video-page .lyrics-video-mobile-category-bar::-webkit-scrollbar {
    display: none;
  }

  .settings-container.lyrics-video-page .lyrics-video-mobile-panel-btn {
    display: inline-flex;
    min-width: max-content;
    min-height: 39px;
    padding: 0 11px;
    flex: 0 0 auto;
    gap: 7px;
    scroll-snap-align: start;
    border: 1px solid var(--lvm-border);
    border-radius: 8px;
    color: var(--lvm-muted);
    background: var(--lvm-panel);
    font-size: 10px;
  }

  .settings-container.lyrics-video-page .lyrics-video-mobile-panel-btn.is-active {
    border-color: color-mix(in srgb, var(--lvm-accent) 40%, var(--lvm-border));
    color: var(--lvm-text);
    background: var(--lvm-subtle);
  }

  .settings-container.lyrics-video-page .lyrics-video-export-bar {
    padding: 11px;
    border-radius: 10px;
  }

  .settings-container.lyrics-video-page .lyrics-video-controls-column {
    position: static;
    display: block;
    width: auto;
    height: auto;
    max-height: none;
  }

  .settings-container.lyrics-video-page .lyrics-video-control-rail {
    display: none;
  }

  .settings-container.lyrics-video-page .lyrics-video-control-flyout {
    position: fixed;
    top: auto;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    z-index: 1505;
    width: auto;
    height: min(84dvh, 760px);
    max-height: min(84dvh, 760px);
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
    opacity: 0;
    transform: translateY(calc(100% + 22px));
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .2s ease;
  }

  .settings-container.lyrics-video-page .lyrics-video-control-flyout.is-open.is-mobile-open {
    opacity: 1;
    transform: translateY(0);
  }

  .settings-container.lyrics-video-page .lyrics-video-control-surface-header {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 58px;
    background: var(--lvm-panel);
  }

  .settings-container.lyrics-video-page .lyrics-video-control-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .settings-container.lyrics-video-page .lyrics-video-mobile-sheet-close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    border: 1px solid var(--lvm-border);
    border-radius: 50%;
    color: var(--lvm-text);
    background: var(--lvm-subtle);
  }

  .settings-container.lyrics-video-page .lyrics-video-mobile-sheet-backdrop {
    background: rgba(8, 10, 14, .58);
    backdrop-filter: blur(3px);
  }
}

@media (max-width: 640px) {
  .settings-container.lyrics-video-page .lyrics-video-preview-head p {
    display: none;
  }

  .settings-container.lyrics-video-page .lyrics-video-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .settings-container.lyrics-video-page .lyrics-video-actions .btn {
    width: 100%;
    padding: 0 10px;
  }

  .settings-container.lyrics-video-page #lyricsVideoExportBtn,
  .settings-container.lyrics-video-page #lyricsVideoDownloadBtn {
    grid-column: 1 / -1;
  }
}

/* Mobile transport controls and expanded-player spacing. */
@media (max-width: 768px) {
  #playerExpandedPrevBtn,
  #playerExpandedNextBtn {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #playerExpandedPrevBtn:hover,
  #playerExpandedNextBtn:hover,
  #playerExpandedPrevBtn:active,
  #playerExpandedNextBtn:active {
    background: transparent !important;
    box-shadow: none !important;
  }

  .player-expanded-panel:not(.is-queue-view) .player-expanded-lyrics-card {
    margin-top: 80px;
  }

  .player-expanded-panel.has-soundvia-loop:not(.is-queue-view) .player-expanded-lyrics-card {
    margin-top: 88px;
  }

}

@media (max-width: 1023px) {
  .lyrics-theater-mobile-control,
  .lyrics-theater-mobile-control:hover,
  .lyrics-theater-mobile-control:active {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Universal desktop menus and dialogs. Mobile keeps the native sheet system. */
:root {
  --sv-overlay-surface: #ffffff;
  --sv-overlay-subtle: #f5f7fb;
  --sv-overlay-hover: #edf2ff;
  --sv-overlay-border: #d9e0ec;
  --sv-overlay-text: #151a24;
  --sv-overlay-muted: #707b8f;
  --sv-overlay-shadow: 0 24px 72px rgba(13, 18, 28, .18);
  --sv-overlay-menu-shadow: 0 18px 48px rgba(13, 18, 28, .16);
  --sv-overlay-dialog-radius: 22px;
  --sv-overlay-menu-radius: 18px;
}

html.dark-mode {
  --sv-overlay-surface: #10151e;
  --sv-overlay-subtle: #151c27;
  --sv-overlay-hover: #192235;
  --sv-overlay-border: #293348;
  --sv-overlay-text: #f1f4fb;
  --sv-overlay-muted: #9ba6ba;
  --sv-overlay-shadow: 0 28px 78px rgba(0, 0, 0, .42);
  --sv-overlay-menu-shadow: 0 20px 54px rgba(0, 0, 0, .38);
}

@media (min-width: 1024px) {
  :is(
    .modal,
    .site-popup-modal,
    .cherry-video-popup,
    .cherry-support-popup,
    .gift-welcome-overlay,
    .ig-modal-overlay
  ) {
    background: rgba(6, 9, 14, .58) !important;
    -webkit-backdrop-filter: blur(10px) saturate(108%) !important;
    backdrop-filter: blur(10px) saturate(108%) !important;
  }

  .artist-studio-dialog::backdrop {
    background: rgba(6, 9, 14, .58) !important;
    -webkit-backdrop-filter: blur(10px) saturate(108%) !important;
    backdrop-filter: blur(10px) saturate(108%) !important;
  }

  :is(
    .sv-desktop-dialog-surface,
    .modal > .modal-content,
    .site-popup-modal > .site-popup-card,
    .player-queue-panel,
    .cherry-video-popup-inner,
    .cherry-support-window,
    .gift-welcome-modal,
    .invite-modal-dialog,
    .ig-modal,
    .artist-studio-dialog-card,
    .super-fan-sheet-panel
  ) {
    border: 1px solid var(--sv-overlay-border) !important;
    border-radius: var(--sv-overlay-dialog-radius) !important;
    color: var(--sv-overlay-text) !important;
    background: var(--sv-overlay-surface) !important;
    box-shadow: var(--sv-overlay-shadow) !important;
  }

  :is(
    .sv-desktop-menu-surface,
    .custom-context-menu,
    .nav-user-dropdown,
    .desktop-profile-dropdown,
    .sidebar-notification-dropdown,
    .dropdown-menu,
    .sa-dropdown,
    .tag-widget-dropdown,
    .cherry-video-mention-dropdown,
    .cherry-video-mode-dropdown
  ) {
    border: 1px solid var(--sv-overlay-border) !important;
    border-radius: var(--sv-overlay-menu-radius) !important;
    color: var(--sv-overlay-text) !important;
    background: var(--sv-overlay-surface) !important;
    box-shadow: var(--sv-overlay-menu-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  :is(.custom-context-menu,.desktop-profile-dropdown,.nav-user-dropdown,.dropdown-menu,.sa-dropdown,.tag-widget-dropdown) {
    padding: 8px !important;
  }

  :is(
    .modal-header,
    .player-queue-panel-header,
    .cherry-video-popup-header,
    .invite-modal-header,
    .ig-modal-header,
    .sidebar-notification-header,
    .sv-desktop-dialog-surface > header
  ) {
    min-height: 68px;
    padding: 18px 22px !important;
    border-color: var(--sv-overlay-border) !important;
    color: var(--sv-overlay-text) !important;
    background: transparent !important;
  }

  :is(
    .modal-header h2,
    .player-queue-panel-header h3,
    .cherry-video-popup-header h2,
    .invite-modal-header h2,
    .ig-modal-title,
    .site-popup-title,
    .sv-desktop-dialog-surface > header h2
  ) {
    color: var(--sv-overlay-text) !important;
    font-size: 22px !important;
    font-weight: 750 !important;
    letter-spacing: -.025em !important;
  }

  :is(
    .modal-close,
    .site-popup-close,
    .profile-about-modal-close,
    .invite-modal-close,
    .ig-modal-close,
    .sv-desktop-dialog-surface > header > button,
    .player-queue-panel-controls .player-btn-small
  ) {
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--sv-overlay-border) !important;
    border-radius: 50% !important;
    color: var(--sv-overlay-muted) !important;
    background: var(--sv-overlay-subtle) !important;
    box-shadow: none !important;
  }

  :is(
    .modal-close,
    .site-popup-close,
    .profile-about-modal-close,
    .invite-modal-close,
    .ig-modal-close,
    .sv-desktop-dialog-surface > header > button,
    .player-queue-panel-controls .player-btn-small
  ):hover {
    color: var(--sv-overlay-text) !important;
    background: var(--sv-overlay-hover) !important;
  }

  :is(.modal-body,.cherry-video-popup-body,.invite-modal-body,.ig-modal-body) {
    padding: 22px !important;
    color: var(--sv-overlay-text) !important;
    background: transparent !important;
  }

  :is(.modal-footer,.site-popup-actions,.cherry-video-popup-actions,.invite-modal-actions,.sv-desktop-dialog-surface > footer) {
    gap: 10px !important;
    margin: 0 !important;
    padding: 18px 22px !important;
    border-color: var(--sv-overlay-border) !important;
    background: transparent !important;
  }

  .site-popup-card {
    padding: 22px !important;
  }

  .site-popup-actions {
    margin: 20px -22px -22px !important;
    border-top: 1px solid var(--sv-overlay-border) !important;
  }

  :is(.site-popup-message,.cherry-video-popup-subtitle,.invite-modal-note) {
    color: var(--sv-overlay-muted) !important;
  }

  :is(
    .custom-context-menu-item,
    .custom-context-share-friend,
    .desktop-profile-link,
    .nav-user-dropdown .dropdown-item,
    .dropdown-menu .dropdown-item,
    .sa-dropdown-item,
    .tag-widget-dropdown-item
  ) {
    min-height: 44px;
    padding: 10px 12px !important;
    gap: 11px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: var(--sv-overlay-text) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }

  :is(
    .custom-context-menu-item,
    .custom-context-share-friend,
    .desktop-profile-link,
    .nav-user-dropdown .dropdown-item,
    .dropdown-menu .dropdown-item,
    .sa-dropdown-item,
    .tag-widget-dropdown-item
  ):hover {
    border-color: color-mix(in srgb, var(--blue) 22%, transparent) !important;
    color: var(--sv-overlay-text) !important;
    background: var(--sv-overlay-hover) !important;
  }

  :is(.custom-context-menu-item,.desktop-profile-link,.dropdown-item,.sa-dropdown-item,.tag-widget-dropdown-item) > i:first-child {
    width: 20px !important;
    color: inherit !important;
    text-align: center !important;
  }

  :is(.custom-context-menu-account-head,.custom-context-share-head,.dropdown-divider,.sidebar-notification-header) {
    border-color: var(--sv-overlay-border) !important;
  }

  :is(.custom-context-menu-account-copy small,.custom-context-share-title-wrap small,.custom-context-share-friend-meta small) {
    color: var(--sv-overlay-muted) !important;
  }

  :is(.custom-context-menu-item.context-action-danger,.desktop-profile-link.logout-link,.dropdown-item.logout-item),
  :is(.custom-context-menu-item.context-action-danger,.desktop-profile-link.logout-link,.dropdown-item.logout-item) i {
    color: #ff7f8b !important;
  }

  :is(
    .sv-desktop-dialog-surface,
    .modal > .modal-content,
    .site-popup-card,
    .player-queue-panel,
    .cherry-video-popup-inner,
    .invite-modal-dialog,
    .ig-modal,
    .artist-studio-dialog-card
  ) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
    border: 1px solid var(--sv-overlay-border) !important;
    border-radius: 14px !important;
    color: var(--sv-overlay-text) !important;
    background: var(--sv-overlay-subtle) !important;
    box-shadow: none !important;
  }

  :is(.modal-footer,.site-popup-actions,.cherry-video-popup-actions,.invite-modal-actions,.sv-desktop-dialog-surface > footer) :is(.btn,.artist-studio-button) {
    min-height: 44px !important;
    padding-inline: 18px !important;
    border-radius: 999px !important;
  }

  .player-queue-panel-body {
    padding: 18px 22px 22px !important;
  }

  .player-queue-list .player-queue-item,
  .player-party-code-row,
  .cherry-video-popup-status {
    border: 1px solid var(--sv-overlay-border) !important;
    border-radius: 16px !important;
    color: var(--sv-overlay-text) !important;
    background: var(--sv-overlay-subtle) !important;
  }
}

/* Gift redemption: same calm cards and hierarchy as the Billing page. */
.gift-pro-page { display:grid; min-height:calc(100vh - 150px); padding:40px 20px; place-items:center; }
.gift-pro-card { width:min(100%,720px); max-width:720px; padding:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--blue) 20%,var(--border)); border-radius:22px; background:var(--white); box-shadow:0 18px 48px rgba(26,92,255,.09); text-align:left; }
.gift-pro-header { display:flex; padding:20px 24px; align-items:center; gap:13px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--blue) 5%,var(--white)); }
.gift-pro-header img { width:44px; height:44px; border:1px solid color-mix(in srgb,var(--blue) 16%,var(--border)); border-radius:12px; }
.gift-pro-header > div { display:flex; min-width:0; flex-direction:column; gap:3px; }
.gift-pro-eyebrow { color:var(--text-secondary); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.gift-pro-header strong { color:var(--black); font-size:15px; }
.gift-pro-header > strong { width:100%; text-align:center; font-size:12px; letter-spacing:.08em; }
.gift-pro-state { padding:30px; }
.gift-pro-state-icon { display:grid; width:44px; height:44px; margin-bottom:16px; place-items:center; border-radius:50%; color:var(--blue); background:color-mix(in srgb,var(--blue) 10%,var(--white)); }
.gift-pro-state-icon.is-complete { color:#16845b; background:color-mix(in srgb,#34d399 13%,var(--white)); }
.gift-pro-from { display:inline-flex; margin:0 0 14px; padding:6px 10px; align-items:center; gap:7px; border:1px solid color-mix(in srgb,var(--blue) 22%,var(--border)); border-radius:999px; color:var(--blue); background:color-mix(in srgb,var(--blue) 6%,var(--white)); font-size:12px; font-weight:750; }
.gift-pro-title { margin:0 0 9px; color:var(--black); background:none; font-size:clamp(28px,5vw,38px); font-weight:800; line-height:1.05; letter-spacing:-.04em; -webkit-text-fill-color:currentColor; }
.gift-pro-sub { max-width:590px; margin:0 0 22px; color:var(--text-secondary); font-size:14px; line-height:1.58; }
.gift-pro-plan-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:24px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); }
.gift-pro-plan-summary > span { display:flex; min-width:0; padding:14px 16px; flex-direction:column; gap:4px; }
.gift-pro-plan-summary > span + span { border-left:1px solid var(--border); }
.gift-pro-plan-summary small { color:var(--text-secondary); font-size:10px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }
.gift-pro-plan-summary strong { color:var(--black); font-size:14px; }
.gift-pro-perks-title { margin:0 0 10px; color:var(--black); font-size:14px; }
.gift-pro-perks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 0 24px; gap:8px; }
.gift-pro-perks li { min-height:46px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--blue) 12%,var(--border)); border-radius:11px; color:var(--black); background:color-mix(in srgb,var(--blue) 4%,var(--surface-2)); font-size:13px; }
.gift-pro-perks li i { color:var(--blue); }
.gift-accept-btn { width:100%; min-height:48px; padding:12px 20px; border-radius:12px; font-size:14px; }
.gift-pro-status { margin-top:9px; text-align:center; }
.gift-pro-notice { margin:0; padding:13px 14px; border-radius:11px; }
.gift-share-box { margin:0; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); }
.gift-share-label { margin:0 0 9px; color:var(--text-secondary); font-size:12px; }
.gift-share-input { min-width:0; min-height:44px; border:1px solid var(--border); border-radius:10px; color:var(--black); background:var(--white); }
.gift-copy-btn { min-height:44px; border-radius:10px; }
.gift-pro-glow,.gift-pro-icon-wrap,.gift-pro-particles { display:none; }
.gift-welcome-overlay { padding:20px; background:rgba(8,14,35,.64); backdrop-filter:blur(10px); }
.gift-welcome-modal { width:min(100%,430px); padding:30px; border:1px solid var(--border); border-radius:20px; color:var(--black); background:var(--white); box-shadow:0 24px 70px rgba(5,12,35,.3); text-align:left; }
.gift-welcome-check { display:grid; width:48px; height:48px; margin-bottom:18px; place-items:center; border-radius:50%; color:#16845b; background:color-mix(in srgb,#34d399 14%,var(--white)); }
.gift-welcome-title { margin:0 0 8px; color:var(--black); background:none; font-size:28px; letter-spacing:-.035em; -webkit-text-fill-color:currentColor; animation:none; }
.gift-welcome-sub { margin:0 0 22px; color:var(--text-secondary); line-height:1.55; animation:none; }
.gift-welcome-btn { min-height:44px; margin:0; animation:none; }
@media (max-width:620px) { .gift-pro-page { min-height:auto; padding:18px 12px 30px; } .gift-pro-header { padding:16px; } .gift-pro-state { padding:22px 16px; } .gift-pro-plan-summary { grid-template-columns:1fr; } .gift-pro-plan-summary > span + span { border-top:1px solid var(--border); border-left:0; } .gift-pro-perks { grid-template-columns:1fr; } .gift-share-row { align-items:stretch; flex-direction:column; } .gift-copy-btn { width:100%; } }

/* Visible horizontal rails on profiles and Discovery. */
.profile-container .profile-horizontal-scroll {
  display: flex !important;
  min-width: 0;
  margin-bottom: 0;
  padding: 5px 2px 16px;
  gap: 16px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-gutter: stable;
}

.profile-container .profile-horizontal-scroll > .playlist-card {
  width: clamp(160px, 20vw, 210px) !important;
  min-width: clamp(160px, 20vw, 210px) !important;
  max-width: 210px !important;
  flex: 0 0 clamp(160px, 20vw, 210px) !important;
  scroll-snap-align: start;
}

.profile-container .profile-horizontal-scroll,
.discovery-redesign .discovery-media-rail,
.discovery-redesign .discovery-artist-grid,
.discovery-redesign .following-mobile-stories {
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--blue) 58%, transparent) color-mix(in srgb, var(--border) 46%, transparent) !important;
}

.discovery-redesign .discovery-media-rail,
.discovery-redesign .discovery-artist-grid,
.discovery-redesign .following-mobile-stories {
  padding-bottom: 16px !important;
}

.profile-container .profile-horizontal-scroll::-webkit-scrollbar,
.discovery-redesign .discovery-media-rail::-webkit-scrollbar,
.discovery-redesign .discovery-artist-grid::-webkit-scrollbar,
.discovery-redesign .following-mobile-stories::-webkit-scrollbar {
  display: block !important;
  width: 10px;
  height: 10px;
}

.profile-container .profile-horizontal-scroll::-webkit-scrollbar-track,
.discovery-redesign .discovery-media-rail::-webkit-scrollbar-track,
.discovery-redesign .discovery-artist-grid::-webkit-scrollbar-track,
.discovery-redesign .following-mobile-stories::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 46%, transparent);
}

.profile-container .profile-horizontal-scroll::-webkit-scrollbar-thumb,
.discovery-redesign .discovery-media-rail::-webkit-scrollbar-thumb,
.discovery-redesign .discovery-artist-grid::-webkit-scrollbar-thumb,
.discovery-redesign .following-mobile-stories::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 58%, transparent);
  background-clip: padding-box;
}

.profile-container .profile-horizontal-scroll::-webkit-scrollbar-thumb:hover,
.discovery-redesign .discovery-media-rail::-webkit-scrollbar-thumb:hover,
.discovery-redesign .discovery-artist-grid::-webkit-scrollbar-thumb:hover,
.discovery-redesign .following-mobile-stories::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--blue) 82%, transparent);
  background-clip: padding-box;
}

@media (max-width: 768px) {
  .profile-container .profile-horizontal-scroll > .playlist-card {
    width: clamp(150px, 44vw, 190px) !important;
    min-width: clamp(150px, 44vw, 190px) !important;
    flex-basis: clamp(150px, 44vw, 190px) !important;
  }
}

@media(max-width:980px){.lyrics-marketplace-grid.lyrics-marketplace-public-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.lyrics-marketplace-detail-layout{grid-template-columns:1fr}.lyrics-marketplace-detail-preview{grid-row:1;max-width:620px;width:100%;margin:auto}}@media(max-width:720px){.lyrics-marketplace-page{width:min(100% - 20px,1240px);padding-top:22px}.lyrics-marketplace-hero{align-items:flex-start;flex-direction:column}.lyrics-marketplace-filters{grid-template-columns:1fr}.lyrics-marketplace-results-head{align-items:flex-start;flex-direction:column}.lyrics-marketplace-grid.lyrics-marketplace-public-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lyrics-marketplace-detail-layout{gap:24px}.lyrics-marketplace-detail-copy h1{font-size:2.3rem}.lyrics-video-marketplace-field-grid,.lyrics-video-marketplace-warning-grid{grid-template-columns:1fr}}@media(max-width:440px){.lyrics-marketplace-grid.lyrics-marketplace-public-grid{grid-template-columns:1fr}.lyrics-marketplace-pagination{justify-content:space-between;gap:8px}.lyrics-marketplace-pagination .btn{padding-inline:12px}}

.artist-studio .lyrics-marketplace-page{width:min(1120px,100%);padding:0}.artist-studio .lyrics-marketplace-hero{align-items:flex-start;margin:0 0 24px;gap:20px}.artist-studio .lyrics-marketplace-hero h1,.artist-studio .lyrics-marketplace-detail-copy h1{margin:0;font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.035em}.artist-studio .lyrics-marketplace-hero p{max-width:720px;margin:8px 0 0;color:var(--as-muted);line-height:1.55}.artist-studio .lyrics-marketplace-filters{margin:0 0 20px;padding:16px;border-color:var(--as-border);border-radius:12px;background:var(--as-panel);box-shadow:0 3px 12px rgba(12,12,14,.04)}.artist-studio .lyrics-marketplace-filters input,.artist-studio .lyrics-marketplace-filters select{border-color:var(--as-border);border-radius:8px;color:var(--as-text);background:var(--as-bg)}.artist-studio .lyrics-marketplace-results-head{margin-bottom:14px;color:var(--as-muted)}.artist-studio .lyrics-marketplace-card{border-color:var(--as-border);border-radius:12px;background:var(--as-panel);box-shadow:0 3px 12px rgba(12,12,14,.04)}.artist-studio .lyrics-marketplace-card-body p,.artist-studio .lyrics-marketplace-card-meta,.artist-studio .lyrics-marketplace-detail-description,.artist-studio .lyrics-marketplace-report-btn{color:var(--as-muted)}.artist-studio .lyrics-marketplace-detail-layout{align-items:start;gap:48px}.artist-studio .lyrics-marketplace-detail-copy{padding-top:12px;gap:12px}.artist-studio .lyrics-marketplace-detail-preview{border:1px solid var(--as-border);border-radius:18px;box-shadow:0 8px 28px rgba(12,12,14,.1)}.artist-studio .lyrics-marketplace-empty{border-color:var(--as-border);background:var(--as-panel)}.artist-studio .lyrics-marketplace-badges>span,.artist-studio .lyrics-marketplace-tags>span{border-color:var(--as-border);background:var(--as-panel-subtle)}
@media(max-width:700px){.artist-studio .lyrics-marketplace-page{width:100%;padding:0}.artist-studio .lyrics-marketplace-hero{margin-bottom:18px}.artist-studio .lyrics-marketplace-hero h1,.artist-studio .lyrics-marketplace-detail-copy h1{font-size:34px}.artist-studio .lyrics-marketplace-filters{padding:12px}.artist-studio .lyrics-marketplace-detail-layout{gap:20px}.artist-studio .lyrics-marketplace-detail-copy{padding-top:0}.artist-studio .lyrics-marketplace-detail-preview{border-radius:14px}}

/* Profile connections use the current profile/library visual system. */
.main-content .connections-page {
  width: min(1120px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 42px 24px 100px;
}

.main-content .connections-page .connections-header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  margin: 0;
  padding: 0 0 28px;
  gap: 18px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 0;
  color: var(--black);
  background: transparent;
  box-shadow: none;
}

.connections-profile-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--blue);
  background: var(--surface-2);
  font-size: 24px;
}

.connections-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.connections-header-copy { min-width: 0; }
.connections-eyebrow { display: block; margin-bottom: 5px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.main-content .connections-page .connections-header h1 { margin: 0; color: var(--black); font-size: clamp(32px, 4vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.main-content .connections-page .connections-header p { margin: 7px 0 0; color: var(--text-secondary); font-size: 14px; }
.connections-profile-link { min-height: 42px; padding-inline: 17px; gap: 8px; border-radius: 999px; white-space: nowrap; }

.connections-tabs {
  display: flex;
  margin: 22px 0 18px;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}

.connections-tabs a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  padding: 0 14px;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.connections-tabs a:hover,
.connections-tabs a.is-active { color: var(--black); }
.connections-tabs a.is-active::after { position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; border-radius: 2px 2px 0 0; background: var(--blue); content: ""; }
.connections-tabs a span { min-width: 24px; padding: 3px 7px; border-radius: 999px; color: var(--text-secondary); background: var(--surface-2); font-size: 10px; text-align: center; }

.main-content .connections-page .connections-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.main-content .connections-page .connection-item,
html.dark-mode .main-content .connections-page .connection-item {
  min-width: 0;
  min-height: 90px;
  padding: 14px;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--black);
  background: var(--surface-1);
  box-shadow: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.main-content .connections-page .connection-item:last-child { border-bottom-color: var(--border); }
.main-content .connections-page .connection-item:hover { border-color: color-mix(in srgb, var(--blue) 34%, var(--border)); background: color-mix(in srgb, var(--blue) 4%, var(--surface-1)); transform: translateY(-1px); box-shadow: none; }
.main-content .connections-page .connection-main { flex: 1; min-width: 0; }
.main-content .connections-page .connection-avatar { width: 54px; height: 54px; flex: 0 0 54px; border: 0; background: var(--surface-2); box-shadow: none; font-size: 28px; }
.connection-name { overflow: hidden; color: var(--black); font-size: 15px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.connection-handle { margin-top: 2px; color: var(--text-secondary); }
.connection-meta { margin-top: 5px; }
.connection-proof { margin-top: 4px; color: var(--blue); }
.main-content .connections-page .connection-follow-btn { min-height: 38px; padding: 0 14px; border-radius: 999px; }
.connections-empty-state { min-height: 320px; border: 1px dashed var(--border); border-radius: 16px; background: var(--surface-1); }
.connections-empty-state > span { display: grid; width: 54px; height: 54px; margin: 0 auto 14px; place-items: center; border-radius: 50%; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface-2)); }
.connections-empty-state h2 { margin: 0; font-size: 22px; }
.connections-empty-state p { margin: 7px 0 0; color: var(--text-secondary); }

/* Legacy audience detail content inside Artist Studio now matches its parent page. */
.artist-studio .audience-detail-page { width: min(1280px, 100%); margin: 0 auto; gap: 0; color: var(--as-text); }
.artist-studio .audience-detail-page .audience-detail-header {
  display: flex !important;
  align-items: flex-start;
  margin: 0 0 24px;
  padding: 0 0 24px;
  gap: 20px;
  border: 0;
  border-bottom: 1px solid var(--as-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.audience-detail-eyebrow { display: block; margin-bottom: 6px; color: var(--as-accent, var(--blue)); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.artist-studio .audience-detail-page .audience-detail-header h1 { margin: 0; color: var(--as-text); font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.artist-studio .audience-detail-page .audience-detail-header p { margin: 8px 0 0; color: var(--as-muted); }
.artist-studio .audience-detail-page .audience-detail-back { margin-left: auto; }

.artist-studio .audience-detail-page .audience-entity-hero,
html.dark-mode .artist-studio .audience-detail-page .audience-entity-hero {
  grid-template-columns: 104px minmax(0, 1fr);
  margin: 0 0 20px;
  padding: 18px;
  gap: 18px;
  border: 1px solid var(--as-border);
  border-radius: 12px;
  color: var(--as-text);
  background: var(--as-panel);
  box-shadow: 0 3px 12px rgba(12, 12, 14, .04);
}
.artist-studio .audience-detail-page .audience-entity-cover { width: 104px; height: 104px; border: 0; border-radius: 10px; background: var(--as-panel-subtle); }
.artist-studio .audience-detail-page .audience-entity-meta h2 { color: var(--as-text); font-size: clamp(25px, 3vw, 34px); font-weight: 800; letter-spacing: -.035em; }
.artist-studio .audience-detail-page .audience-entity-meta p { color: var(--as-muted); }
.artist-studio .audience-detail-page .artist-analytics-overview { gap: 20px; }
.artist-studio .audience-detail-page .audience-detail-section-head { margin: 0; padding: 2px 2px 0; }
.artist-studio .audience-detail-page .audience-detail-section-head h2 { color: var(--as-text); font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.artist-studio .audience-detail-page .audience-detail-section-head p { color: var(--as-muted); }

.artist-studio .audience-detail-page .audience-detail-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  gap: 0;
  border-color: var(--as-border);
  background: var(--as-panel);
}
.artist-studio .audience-detail-page .audience-detail-metrics .artist-stat-card,
.artist-studio .audience-detail-page .audience-detail-metrics .artist-stat-card:is(:hover, .is-highlight) {
  min-height: 112px;
  padding: 19px 22px;
  border: 0;
  border-right: 1px solid var(--as-border);
  border-radius: 0;
  color: var(--as-text);
  background: transparent;
  box-shadow: none;
  transform: none;
}
.artist-studio .audience-detail-page .audience-detail-metrics .artist-stat-card:last-child { border-right: 0; }
.artist-studio .audience-detail-page .artist-stat-label { color: var(--as-muted); font-size: 12px; }
.artist-studio .audience-detail-page .artist-stat-value { color: var(--as-text); font-size: 30px; }

.artist-studio .audience-detail-page .artist-analytics-chart-card,
.artist-studio .audience-detail-page .artist-audience-block,
.artist-studio .audience-detail-page .promo-card-section,
html.dark-mode .artist-studio .audience-detail-page .artist-analytics-chart-card,
html.dark-mode .artist-studio .audience-detail-page .artist-audience-block,
html.dark-mode .artist-studio .audience-detail-page .promo-card-section {
  border: 1px solid var(--as-border);
  border-radius: 12px;
  color: var(--as-text);
  background: var(--as-panel);
  box-shadow: 0 3px 12px rgba(12, 12, 14, .04);
}
.artist-studio .audience-detail-page .artist-analytics-chart-card { padding: 22px; }
.artist-studio .audience-detail-page .artist-chart-meta h3,
.artist-studio .audience-detail-page .artist-audience-block h3,
.artist-studio .audience-detail-page .promo-card-section-header h2 { color: var(--as-text); }
.artist-studio .audience-detail-page .artist-chart-meta p,
.artist-studio .audience-detail-page .artist-audience-value,
.artist-studio .audience-detail-page .artist-audience-empty,
.artist-studio .audience-detail-page .promo-card-section-header p { color: var(--as-muted); }
.artist-studio .audience-detail-page .artist-smoothed-chart { border-color: var(--as-border); background: var(--as-bg); }
.artist-studio .audience-detail-page .artist-chart-switcher { padding: 3px; border: 0; background: var(--as-panel-subtle); }
.artist-studio .audience-detail-page .artist-chart-switch { border: 0; color: var(--as-muted); background: transparent; }
.artist-studio .audience-detail-page .artist-chart-switch.is-active { color: #fff; background: var(--as-accent); }
.artist-studio .audience-detail-page .artist-audience-demographics { gap: 18px; }
.artist-studio .audience-detail-page .artist-audience-block { padding: 22px; }
.artist-studio .audience-detail-page .artist-audience-list li,
html.dark-mode .artist-studio .audience-detail-page .artist-audience-list li { padding: 11px 2px; border: 0; border-bottom: 1px solid var(--as-border); border-radius: 0; background: transparent; }
.artist-studio .audience-detail-page .artist-audience-list li:last-child { border-bottom: 0; }
.artist-studio .audience-detail-page .promo-card-section { margin-top: 20px; padding: 22px; }
.artist-studio .audience-detail-page .promo-card-controls { border-color: var(--as-border); background: var(--as-panel-subtle); }
.artist-studio .audience-detail-page :is(.promo-layout-btn, .promo-theme-btn, .promo-accent-btn) { border-color: var(--as-border); color: var(--as-text); background: var(--as-panel); }
.artist-studio .audience-detail-page :is(.promo-layout-btn, .promo-theme-btn, .promo-accent-btn).is-active { border-color: var(--as-accent); color: var(--as-accent); background: color-mix(in srgb, var(--as-accent) 10%, var(--as-panel)); }
.artist-studio .audience-detail-page .promo-card-preview-wrap { border-color: var(--as-border); background: var(--as-bg); }

@media (max-width: 760px) {
  .main-content .connections-page { padding: 8px 14px 120px; }
  .main-content .connections-page .connections-header { grid-template-columns: 56px minmax(0, 1fr); padding: 12px 2px 20px; gap: 13px; }
  .connections-profile-avatar { width: 56px; height: 56px; }
  .main-content .connections-page .connections-header h1 { font-size: 28px; }
  .main-content .connections-page .connections-header p { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .connections-profile-link { display: none; }
  .connections-tabs { margin-top: 14px; overflow-x: auto; }
  .main-content .connections-page .connections-list { grid-template-columns: 1fr; gap: 9px; }
  .main-content .connections-page .connection-item { min-height: 82px; padding: 12px; border-radius: 12px; }
  .main-content .connections-page .connection-avatar { width: 50px; height: 50px; flex-basis: 50px; }
  .connection-meta { margin-top: 3px; }

  .artist-studio .audience-detail-page .audience-detail-header { align-items: stretch; flex-direction: column; margin-bottom: 18px; padding-bottom: 18px; }
  .artist-studio .audience-detail-page .audience-detail-header h1 { font-size: 34px; }
  .artist-studio .audience-detail-page .audience-detail-back { width: 100%; margin: 0; }
  .artist-studio .audience-detail-page .audience-entity-hero { grid-template-columns: 78px minmax(0, 1fr); margin-inline: 0; padding: 14px; gap: 13px; border: 1px solid var(--as-border); border-radius: 12px; }
  .artist-studio .audience-detail-page .audience-entity-cover { width: 78px; height: 78px; }
  .artist-studio .audience-detail-page .audience-entity-meta h2 { font-size: 23px; }
  .artist-studio .audience-detail-page .audience-detail-section-head h2 { font-size: 22px; }
  .artist-studio .audience-detail-page .audience-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0 !important; }
  .artist-studio .audience-detail-page .audience-detail-metrics .artist-stat-card { min-height: 102px; padding: 16px 14px; border-right: 1px solid var(--as-border); border-bottom: 1px solid var(--as-border); }
  .artist-studio .audience-detail-page .audience-detail-metrics .artist-stat-card:nth-child(2n) { border-right: 0; }
  .artist-studio .audience-detail-page .audience-detail-metrics .artist-stat-card:nth-last-child(-n + 2) { border-bottom: 0; }
  .artist-studio .audience-detail-page .artist-analytics-chart-card,
  .artist-studio .audience-detail-page .promo-card-section { margin-inline: 0; padding: 16px; border: 1px solid var(--as-border); border-radius: 12px; }
  .artist-studio .audience-detail-page .artist-audience-demographics { display: grid; grid-template-columns: 1fr; margin-inline: 0; gap: 12px; }
  .artist-studio .audience-detail-page .artist-audience-block { padding: 16px; border: 1px solid var(--as-border); border-radius: 12px; background: var(--as-panel); }
  .artist-studio .audience-detail-page .artist-chart-topbar { align-items: stretch; flex-direction: column; }
  .artist-studio .audience-detail-page .artist-chart-switcher { width: 100%; overflow-x: auto; }
}