@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Noto+Sans:wght@400;500;700;800;900&display=swap");

* {
  box-sizing: border-box;
}

:root {
  --bg: #080914;
  --panel: #121426;
  --panel-2: #191c32;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f5f7ff;
  --muted: #a7aec8;
  --muted-2: #747c9b;
  --accent: #7c5cff;
  --accent-2: #00d4ff;
  --hot: #ff4fd8;
  --success: #39e6a3;
  --warning: #ffc857;
  --danger: #ff7373;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 92, 255, 0.28), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(0, 212, 255, 0.18), transparent 35%),
    linear-gradient(180deg, #080914 0%, #0b0d1a 60%, #070812 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 28px;
  background: rgba(8, 9, 20, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 260px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font-weight: 900;
  letter-spacing: -1px;
  box-shadow: 0 12px 34px rgba(124, 92, 255, 0.32);
}

.brand h1 {
  margin: 0;
  font-size: 19px;
  line-height: 1.1;
}

.brand p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.top-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.nav-button,
.filter-chip,
.control-button,
.inline-action,
.load-more-button {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.nav-button:hover,
.filter-chip:hover,
.control-button:hover,
.inline-action:hover,
.load-more-button:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 92, 255, 0.65);
  background: rgba(124, 92, 255, 0.16);
}

.nav-button.active,
.filter-chip.active {
  border-color: rgba(0, 212, 255, 0.6);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.28), rgba(0, 212, 255, 0.16));
}

.main-content {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 120px;
}

.page {
  display: none;
}

.active-page {
  display: block;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(25, 28, 50, 0.92), rgba(18, 20, 38, 0.84));
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-panel h2 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.hero-copy {
  max-width: 660px;
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.stats-card {
  align-self: stretch;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 22px;
  border: 1px solid rgba(0, 212, 255, 0.25);
  background: rgba(0, 212, 255, 0.08);
}

.stats-card strong {
  display: block;
  font-size: 42px;
  line-height: 1;
}

.stats-card span {
  display: block;
  max-width: 140px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.archive-tools {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(18, 20, 38, 0.76);
}

.search-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.search-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  outline: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 15px 16px;
  font-size: 16px;
}

.search-input:focus {
  border-color: rgba(0, 212, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.result-count {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

.status-message {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 200, 87, 0.12);
  border: 1px solid rgba(255, 200, 87, 0.25);
  color: #ffe7ad;
  line-height: 1.45;
}

.remix-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.remix-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18, 20, 38, 0.82);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.remix-summary {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  border: 0;
  color: inherit;
  background: transparent;
  padding: 16px;
  text-align: left;
  cursor: pointer;
}

.remix-summary:hover {
  background: rgba(255, 255, 255, 0.035);
}

.remix-date {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.remix-title-block h3 {
  margin: 0;
  font-size: 18px;
}

.remix-title-block p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  color: white;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.11);
}

.badge.youtube {
  background: rgba(255, 79, 216, 0.18);
  color: #ffd8f5;
}

.badge.patreon {
  background: rgba(255, 200, 87, 0.18);
  color: #ffe7ad;
}

.badge.evolution {
  background: rgba(124, 92, 255, 0.25);
  color: #ddd5ff;
}

.badge.legacy {
  background: rgba(57, 230, 163, 0.18);
  color: #c5ffe9;
}

.badge.signature {
  background: rgba(0, 212, 255, 0.18);
  color: #c9f7ff;
}

.badge.b-side {
  background: rgba(255, 79, 216, 0.16);
  color: #ffd8f5;
}

.badge.underground {
  background: rgba(255, 255, 255, 0.1);
  color: #e6e9ff;
}

.badge.remaster {
  background: rgba(255, 115, 115, 0.18);
  color: #ffd6d6;
}

.remix-details {
  display: none;
  padding: 0 16px 18px;
}

.remix-card.open .remix-details {
  display: block;
}

.details-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 16px;
  padding-top: 4px;
}

.video-frame {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(124, 92, 255, 0.28), rgba(0, 212, 255, 0.14)),
    #05060f;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder {
  padding: 20px;
  text-align: center;
  color: var(--muted);
}

.video-placeholder strong {
  color: var(--text);
}

.detail-panel {
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
}

.detail-panel h4 {
  margin: 0 0 10px;
  font-size: 15px;
}

.detail-panel p {
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.45;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.inline-action.primary {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.55), rgba(0, 212, 255, 0.28));
}

.inline-action.support {
  background: rgba(255, 200, 87, 0.13);
  border-color: rgba(255, 200, 87, 0.3);
}

.static-page {
  max-width: 860px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(18, 20, 38, 0.8);
  box-shadow: var(--shadow);
}

.static-page h2 {
  margin-top: 0;
  font-size: 34px;
}

.static-page p {
  color: var(--muted);
  line-height: 1.7;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 18px 0 0;
}

.load-more-button {
  padding: 12px 18px;
}

.hidden {
  display: none !important;
}

.player-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 24px;
  background: rgba(7, 8, 18, 0.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.mini-video {
  width: 180px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #05060f;
}

.mini-video-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted-2);
  font-size: 13px;
}

.player-info {
  min-width: 0;
}

.now-playing-label {
  display: block;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.player-info strong,
.player-info span:last-child {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-info strong {
  margin-top: 3px;
}

.player-info span:last-child {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.player-controls {
  display: flex;
  gap: 8px;
}

.control-button.danger {
  color: #ffd6d6;
  border-color: rgba(255, 90, 90, 0.3);
}

@media (max-width: 780px) {
  .site-header {
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  .top-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .main-content {
    width: min(100% - 24px, 1180px);
    padding-top: 16px;
    padding-bottom: 110px;
  }

  .hero-panel {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .stats-card {
    min-height: 120px;
  }

  .remix-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .badges {
    justify-content: flex-start;
  }

  .details-inner {
    grid-template-columns: 1fr;
  }

  .player-dock {
    grid-template-columns: 1fr auto;
    padding: 10px 12px;
  }

  .mini-video {
    display: none;
  }

  .player-controls {
    grid-column: 2;
    grid-row: 1;
  }
}


/* v005 additions */
.badge.mashup-megamix {
  background: rgba(255, 200, 87, 0.15);
  color: #ffe7ad;
}

.badge.parallel {
  background: rgba(186, 124, 255, 0.18);
  color: #ead8ff;
}

.badge.global-wave {
  background: rgba(0, 212, 255, 0.14);
  color: #c9f7ff;
}

.patreon-frame {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  background: #05060f;
}

.video-frame.patreon-embed-frame {
  aspect-ratio: auto;
  min-height: 360px;
}

.video-fallback-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.remix-card {
  transition: border-color 160ms ease, background 160ms ease;
}

.remix-card.open {
  border-color: rgba(0, 212, 255, 0.28);
  background: rgba(20, 23, 43, 0.92);
}

.remix-details {
  animation: detailsFade 180ms ease;
}

@keyframes detailsFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* v006 Patreon locked card */
.patreon-locked-card {
  width: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 200, 87, 0.22), transparent 42%),
    radial-gradient(circle at 80% 80%, rgba(124, 92, 255, 0.24), transparent 48%),
    linear-gradient(135deg, rgba(22, 24, 44, 0.98), rgba(11, 12, 25, 0.98));
}

.patreon-locked-inner {
  max-width: 520px;
}

.locked-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffe7ad;
  background: rgba(255, 200, 87, 0.12);
  border: 1px solid rgba(255, 200, 87, 0.28);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.patreon-locked-card h3 {
  margin: 0;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.patreon-locked-card p {
  margin: 14px auto 0;
  color: var(--muted);
  line-height: 1.55;
}

.locked-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.video-frame.patreon-embed-frame {
  aspect-ratio: 16 / 9;
  min-height: 320px;
}


/* v007 archive visual polish */
.main-content {
  width: min(1280px, calc(100% - 32px));
  padding-top: 22px;
}

.hero-panel {
  grid-template-columns: minmax(0, 1fr) 180px;
  padding: 20px 22px;
  border-radius: 22px;
}

.hero-panel h2 {
  font-size: clamp(30px, 4vw, 46px);
  max-width: 760px;
}

.hero-copy {
  margin-top: 12px;
}

.stats-card {
  min-height: 140px;
}

.stats-card strong {
  font-size: 38px;
}

.archive-tools {
  margin-top: 16px;
  padding: 16px;
}

.filter-row {
  gap: 7px;
}

.filter-chip {
  padding: 8px 12px;
  font-size: 14px;
}

.remix-list {
  gap: 8px;
}

.remix-card {
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 48%),
    rgba(18, 20, 38, 0.82);
}

.remix-summary {
  grid-template-columns: 122px minmax(0, 1fr) auto;
  min-height: 72px;
  padding: 13px 16px;
}

.remix-date {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
}

.remix-date::first-line {
  color: #d4dcff;
}

.remix-title-block {
  min-width: 0;
}

.remix-title-block h3 {
  font-size: 18px;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remix-title-block p {
  margin-top: 4px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badges {
  max-width: 360px;
}

.badge {
  padding: 5px 9px;
  font-size: 11px;
  letter-spacing: 0.015em;
}

.remix-details {
  padding: 0 14px 14px;
}

.details-inner {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 14px;
}

.video-frame {
  border-radius: 15px;
}

.detail-panel {
  padding: 15px;
  border-radius: 15px;
}

.detail-panel h4 {
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.detail-panel p {
  font-size: 13px;
  margin: 7px 0;
}

.meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 12px;
}

.meta-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-size: 13px;
}

.meta-row strong {
  color: #d7ddff;
  font-weight: 800;
}

.comment-box {
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.12);
  font-size: 13px;
  line-height: 1.45;
}

.action-row {
  margin-top: 14px;
}

.inline-action {
  padding: 8px 12px;
  font-size: 13px;
}

.patreon-locked-card {
  min-height: 300px;
}

.patreon-locked-card h3 {
  font-size: clamp(24px, 3vw, 34px);
}

.locked-kicker {
  margin-bottom: 12px;
}

.load-more-button {
  min-width: 220px;
}

@media (max-width: 900px) {
  .hero-panel {
    grid-template-columns: 1fr;
  }

  .stats-card {
    min-height: 100px;
  }

  .remix-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .remix-date {
    display: flex;
    gap: 10px;
  }

  .badges {
    justify-content: flex-start;
    max-width: none;
  }

  .details-inner {
    grid-template-columns: 1fr;
  }

  .meta-row {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .main-content {
    width: min(100% - 20px, 1280px);
  }

  .hero-panel h2 {
    font-size: 32px;
  }

  .archive-tools {
    padding: 14px;
  }

  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .filter-chip {
    flex: 0 0 auto;
  }

  .remix-summary {
    padding: 13px;
  }

  .remix-title-block h3 {
    white-space: normal;
  }

  .remix-title-block p {
    white-space: normal;
  }

  .meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}


/* v008 Areia Remix Universe visual system */
:root {
  --tier-trainee: #59d9cf;
  --tier-boo: #d8ca45;
  --tier-maknae: #d64667;
  --tier-sunbae: #4389f5;
  --tier-legend: #b235d8;

  --tier-trainee-soft: rgba(89, 217, 207, 0.17);
  --tier-boo-soft: rgba(216, 202, 69, 0.17);
  --tier-maknae-soft: rgba(214, 70, 103, 0.18);
  --tier-sunbae-soft: rgba(67, 137, 245, 0.18);
  --tier-legend-soft: rgba(178, 53, 216, 0.2);
}

body {
  background:
    radial-gradient(circle at 15% 0%, rgba(178, 53, 216, 0.24), transparent 34%),
    radial-gradient(circle at 92% 5%, rgba(0, 212, 255, 0.19), transparent 34%),
    radial-gradient(circle at 50% 105%, rgba(67, 137, 245, 0.18), transparent 34%),
    linear-gradient(180deg, #090814 0%, #0b0d1a 62%, #070812 100%);
}

.brand-mark {
  background: linear-gradient(135deg, var(--tier-trainee), var(--accent), var(--tier-legend));
}

.hero-panel {
  background:
    linear-gradient(135deg, rgba(89, 217, 207, 0.08), transparent 28%),
    linear-gradient(140deg, rgba(178, 53, 216, 0.19), rgba(18, 20, 38, 0.9) 46%, rgba(67, 137, 245, 0.11));
}

.eyebrow {
  color: var(--tier-trainee);
}

.stats-card {
  border-color: rgba(89, 217, 207, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(89, 217, 207, 0.18), transparent 58%),
    rgba(0, 212, 255, 0.06);
}

.remix-card {
  position: relative;
}

.remix-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.12);
}

.remix-card.access-trainee::before { background: var(--tier-trainee); }
.remix-card.access-boo::before { background: var(--tier-boo); }
.remix-card.access-maknae::before { background: var(--tier-maknae); }
.remix-card.access-sunbae::before { background: var(--tier-sunbae); }
.remix-card.access-legend::before { background: var(--tier-legend); }

.remix-card.open.access-trainee {
  border-color: rgba(89, 217, 207, 0.32);
  box-shadow: 0 0 0 1px rgba(89, 217, 207, 0.08), 0 14px 34px rgba(0, 0, 0, 0.24);
}

.remix-card.open.access-boo {
  border-color: rgba(216, 202, 69, 0.34);
  box-shadow: 0 0 0 1px rgba(216, 202, 69, 0.08), 0 14px 34px rgba(0, 0, 0, 0.24);
}

.remix-card.open.access-maknae {
  border-color: rgba(214, 70, 103, 0.34);
  box-shadow: 0 0 0 1px rgba(214, 70, 103, 0.08), 0 14px 34px rgba(0, 0, 0, 0.24);
}

.remix-card.open.access-sunbae {
  border-color: rgba(67, 137, 245, 0.34);
  box-shadow: 0 0 0 1px rgba(67, 137, 245, 0.08), 0 14px 34px rgba(0, 0, 0, 0.24);
}

.remix-card.open.access-legend {
  border-color: rgba(178, 53, 216, 0.38);
  box-shadow: 0 0 0 1px rgba(178, 53, 216, 0.1), 0 14px 34px rgba(0, 0, 0, 0.24);
}

.badge {
  gap: 5px;
  text-transform: uppercase;
}

.badge::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
}

.badge.access {
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.badge.access-trainee {
  color: #c9fffb;
  background: var(--tier-trainee-soft);
  border-color: rgba(89, 217, 207, 0.28);
}

.badge.access-boo {
  color: #fff7a9;
  background: var(--tier-boo-soft);
  border-color: rgba(216, 202, 69, 0.3);
}

.badge.access-maknae {
  color: #ffd4dd;
  background: var(--tier-maknae-soft);
  border-color: rgba(214, 70, 103, 0.3);
}

.badge.access-sunbae {
  color: #d7e7ff;
  background: var(--tier-sunbae-soft);
  border-color: rgba(67, 137, 245, 0.3);
}

.badge.access-legend {
  color: #f4d5ff;
  background: var(--tier-legend-soft);
  border-color: rgba(178, 53, 216, 0.34);
}

.badge.type {
  background: rgba(255, 255, 255, 0.075);
  color: #e7ebff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge.type.evolution {
  color: #c9fffb;
  background: rgba(89, 217, 207, 0.13);
}

.badge.type.signature {
  color: #fff7a9;
  background: rgba(216, 202, 69, 0.12);
}

.badge.type.legacy,
.badge.type.underground {
  color: #ffd4dd;
  background: rgba(214, 70, 103, 0.12);
}

.badge.type.b-side,
.badge.type.mashup-megamix {
  color: #d7e7ff;
  background: rgba(67, 137, 245, 0.13);
}

.badge.type.remaster,
.badge.type.parallel,
.badge.type.global-wave {
  color: #f4d5ff;
  background: rgba(178, 53, 216, 0.14);
}

.access-line {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.access-line strong {
  color: #f7f8ff;
}

.patreon-locked-card.access-trainee {
  background:
    radial-gradient(circle at 24% 0%, rgba(89, 217, 207, 0.26), transparent 45%),
    linear-gradient(135deg, rgba(22, 24, 44, 0.98), rgba(11, 12, 25, 0.98));
}

.patreon-locked-card.access-boo {
  background:
    radial-gradient(circle at 26% 0%, rgba(216, 202, 69, 0.28), transparent 45%),
    linear-gradient(135deg, rgba(42, 39, 18, 0.6), rgba(11, 12, 25, 0.98));
}

.patreon-locked-card.access-maknae {
  background:
    radial-gradient(circle at 26% 0%, rgba(214, 70, 103, 0.3), transparent 45%),
    linear-gradient(135deg, rgba(45, 20, 32, 0.62), rgba(11, 12, 25, 0.98));
}

.patreon-locked-card.access-sunbae {
  background:
    radial-gradient(circle at 26% 0%, rgba(67, 137, 245, 0.32), transparent 45%),
    linear-gradient(135deg, rgba(20, 31, 58, 0.68), rgba(11, 12, 25, 0.98));
}

.patreon-locked-card.access-legend {
  background:
    radial-gradient(circle at 26% 0%, rgba(178, 53, 216, 0.35), transparent 45%),
    linear-gradient(135deg, rgba(49, 20, 58, 0.7), rgba(11, 12, 25, 0.98));
}

.locked-kicker.access-trainee {
  color: #c9fffb;
  background: var(--tier-trainee-soft);
  border-color: rgba(89, 217, 207, 0.28);
}

.locked-kicker.access-boo {
  color: #fff7a9;
  background: var(--tier-boo-soft);
  border-color: rgba(216, 202, 69, 0.3);
}

.locked-kicker.access-maknae {
  color: #ffd4dd;
  background: var(--tier-maknae-soft);
  border-color: rgba(214, 70, 103, 0.3);
}

.locked-kicker.access-sunbae {
  color: #d7e7ff;
  background: var(--tier-sunbae-soft);
  border-color: rgba(67, 137, 245, 0.3);
}

.locked-kicker.access-legend {
  color: #f4d5ff;
  background: var(--tier-legend-soft);
  border-color: rgba(178, 53, 216, 0.34);
}

.universe-mini-guide {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.tier-pill {
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: var(--muted);
}

.tier-pill strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
}

.tier-pill.trainee { border-color: rgba(89, 217, 207, 0.24); background: var(--tier-trainee-soft); }
.tier-pill.boo { border-color: rgba(216, 202, 69, 0.24); background: var(--tier-boo-soft); }
.tier-pill.maknae { border-color: rgba(214, 70, 103, 0.24); background: var(--tier-maknae-soft); }
.tier-pill.sunbae { border-color: rgba(67, 137, 245, 0.24); background: var(--tier-sunbae-soft); }
.tier-pill.legend { border-color: rgba(178, 53, 216, 0.28); background: var(--tier-legend-soft); }

@media (max-width: 900px) {
  .universe-mini-guide {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 520px) {
  .universe-mini-guide {
    grid-template-columns: 1fr;
  }
}


/* v009 full-card tier tint test */
.remix-card.access-trainee {
  background:
    linear-gradient(135deg, rgba(89, 217, 207, 0.13), rgba(89, 217, 207, 0.035) 42%, rgba(18, 20, 38, 0.86)),
    rgba(18, 20, 38, 0.82);
}

.remix-card.access-boo {
  background:
    linear-gradient(135deg, rgba(216, 202, 69, 0.15), rgba(216, 202, 69, 0.04) 42%, rgba(18, 20, 38, 0.86)),
    rgba(18, 20, 38, 0.82);
}

.remix-card.access-maknae {
  background:
    linear-gradient(135deg, rgba(214, 70, 103, 0.16), rgba(214, 70, 103, 0.045) 42%, rgba(18, 20, 38, 0.86)),
    rgba(18, 20, 38, 0.82);
}

.remix-card.access-sunbae {
  background:
    linear-gradient(135deg, rgba(67, 137, 245, 0.16), rgba(67, 137, 245, 0.045) 42%, rgba(18, 20, 38, 0.86)),
    rgba(18, 20, 38, 0.82);
}

.remix-card.access-legend {
  background:
    linear-gradient(135deg, rgba(178, 53, 216, 0.18), rgba(178, 53, 216, 0.055) 42%, rgba(18, 20, 38, 0.86)),
    rgba(18, 20, 38, 0.82);
}

.remix-card.open.access-trainee {
  background:
    linear-gradient(135deg, rgba(89, 217, 207, 0.20), rgba(89, 217, 207, 0.06) 44%, rgba(20, 23, 43, 0.96)),
    rgba(20, 23, 43, 0.92);
}

.remix-card.open.access-boo {
  background:
    linear-gradient(135deg, rgba(216, 202, 69, 0.21), rgba(216, 202, 69, 0.065) 44%, rgba(20, 23, 43, 0.96)),
    rgba(20, 23, 43, 0.92);
}

.remix-card.open.access-maknae {
  background:
    linear-gradient(135deg, rgba(214, 70, 103, 0.22), rgba(214, 70, 103, 0.07) 44%, rgba(20, 23, 43, 0.96)),
    rgba(20, 23, 43, 0.92);
}

.remix-card.open.access-sunbae {
  background:
    linear-gradient(135deg, rgba(67, 137, 245, 0.22), rgba(67, 137, 245, 0.07) 44%, rgba(20, 23, 43, 0.96)),
    rgba(20, 23, 43, 0.92);
}

.remix-card.open.access-legend {
  background:
    linear-gradient(135deg, rgba(178, 53, 216, 0.24), rgba(178, 53, 216, 0.08) 44%, rgba(20, 23, 43, 0.96)),
    rgba(20, 23, 43, 0.92);
}

.remix-summary:hover {
  background: rgba(255, 255, 255, 0.045);
}


/* v010 typography pass */
:root {
  --font-body: "Noto Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Barlow Condensed", "Noto Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}

.brand h1,
.hero-panel h2,
.static-page h2,
.detail-panel h4,
.patreon-locked-card h3,
.stats-card strong {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.hero-panel h2 {
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.94;
}

.brand h1 {
  font-size: 23px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.brand p,
.hero-copy,
.result-count,
.search-label,
.remix-date,
.remix-title-block p,
.detail-panel p,
.meta-row,
.comment-box,
.player-info span:last-child {
  letter-spacing: -0.005em;
}

.eyebrow,
.nav-button,
.filter-chip,
.badge,
.inline-action,
.control-button,
.load-more-button,
.locked-kicker,
.now-playing-label,
.tier-pill strong {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.nav-button,
.filter-chip,
.inline-action,
.control-button,
.load-more-button {
  font-size: 15px;
}

.search-input {
  font-family: var(--font-body);
  font-weight: 500;
}

.remix-title-block h3 {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.badge {
  font-size: 12px;
}

.tier-pill {
  font-size: 13px;
}

.tier-pill strong {
  font-size: 15px;
}

.meta-row strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

@media (max-width: 520px) {
  .brand h1 {
    font-size: 21px;
  }

  .hero-panel h2 {
    font-size: 34px;
  }

  .nav-button,
  .filter-chip,
  .inline-action,
  .control-button,
  .load-more-button {
    font-size: 14px;
  }
}


/* v011 icon system foundation */
.badge {
  gap: 7px;
}

.badge::before {
  display: none;
}

.badge-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.badge-icon.access-trainee { background-color: rgba(89, 217, 207, 0.26); color: #c9fffb; }
.badge-icon.access-boo { background-color: rgba(216, 202, 69, 0.26); color: #fff7a9; }
.badge-icon.access-maknae { background-color: rgba(214, 70, 103, 0.28); color: #ffd4dd; }
.badge-icon.access-sunbae { background-color: rgba(67, 137, 245, 0.28); color: #d7e7ff; }
.badge-icon.access-legend { background-color: rgba(178, 53, 216, 0.3); color: #f4d5ff; }

.badge-icon.type-evolution { background-color: rgba(89, 217, 207, 0.22); color: #c9fffb; }
.badge-icon.type-signature { background-color: rgba(216, 202, 69, 0.22); color: #fff7a9; }
.badge-icon.type-legacy,
.badge-icon.type-underground { background-color: rgba(214, 70, 103, 0.24); color: #ffd4dd; }
.badge-icon.type-b-side,
.badge-icon.type-mashup-megamix { background-color: rgba(67, 137, 245, 0.24); color: #d7e7ff; }
.badge-icon.type-remaster,
.badge-icon.type-parallel,
.badge-icon.type-global-wave { background-color: rgba(178, 53, 216, 0.26); color: #f4d5ff; }

/* Future real icon file paths.
   When the PNGs exist in /assets/icons/, we can uncomment/activate these as background images.

.badge-icon.access-trainee { background-image: url("assets/icons/trainee.png"); }
.badge-icon.access-boo { background-image: url("assets/icons/remix-boo.png"); }
.badge-icon.access-maknae { background-image: url("assets/icons/maknae.png"); }
.badge-icon.access-sunbae { background-image: url("assets/icons/sunbae.png"); }
.badge-icon.access-legend { background-image: url("assets/icons/kpop-legend.png"); }

.badge-icon.type-evolution { background-image: url("assets/icons/evolution.png"); }
.badge-icon.type-signature { background-image: url("assets/icons/signature.png"); }
.badge-icon.type-legacy { background-image: url("assets/icons/legacy.png"); }
.badge-icon.type-underground { background-image: url("assets/icons/underground.png"); }
.badge-icon.type-b-side { background-image: url("assets/icons/b-side.png"); }
.badge-icon.type-mashup-megamix { background-image: url("assets/icons/mashup-megamix.png"); }
.badge-icon.type-remaster { background-image: url("assets/icons/remaster.png"); }
.badge-icon.type-parallel { background-image: url("assets/icons/parallel.png"); }
.badge-icon.type-global-wave { background-image: url("assets/icons/global-wave.png"); }
*/

.badge-label {
  display: inline-block;
}

.badges.icon-badges {
  gap: 7px;
}

.universe-mini-guide .tier-pill {
  position: relative;
  padding-left: 42px;
  min-height: 54px;
}

.tier-pill::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.tier-pill.trainee::before { background: rgba(89, 217, 207, 0.28); }
.tier-pill.boo::before { background: rgba(216, 202, 69, 0.28); }
.tier-pill.maknae::before { background: rgba(214, 70, 103, 0.3); }
.tier-pill.sunbae::before { background: rgba(67, 137, 245, 0.3); }
.tier-pill.legend::before { background: rgba(178, 53, 216, 0.32); }

.icon-note {
  margin-top: 8px;
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.35;
}


/* v012 real WebP icon activation */
.badge-icon {
  overflow: hidden;
  color: transparent;
  text-indent: -999px;
  background-size: 92% 92%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.badge-icon.access-trainee { background-image: url("assets/icons/trainee.webp"); }
.badge-icon.access-boo { background-image: url("assets/icons/remix-boo.webp"); }
.badge-icon.access-maknae { background-image: url("assets/icons/maknae.webp"); }
.badge-icon.access-sunbae { background-image: url("assets/icons/sunbae.webp"); }
.badge-icon.access-legend { background-image: url("assets/icons/kpop-legend.webp"); }

.badge-icon.type-evolution { background-image: url("assets/icons/evolution.webp"); }
.badge-icon.type-signature { background-image: url("assets/icons/signature.webp"); }
.badge-icon.type-legacy { background-image: url("assets/icons/legacy.webp"); }
.badge-icon.type-underground { background-image: url("assets/icons/underground.webp"); }
.badge-icon.type-b-side { background-image: url("assets/icons/b-side.webp"); }
.badge-icon.type-mashup-megamix { background-image: url("assets/icons/mashup-megamix.webp"); }
.badge-icon.type-remaster { background-image: url("assets/icons/remaster.webp"); }
.badge-icon.type-parallel { background-image: url("assets/icons/parallel.webp"); }
.badge-icon.type-global-wave { background-image: url("assets/icons/global-wave.webp"); }

.tier-pill::before {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  box-shadow: none;
}

.tier-pill.trainee::before { background-image: url("assets/icons/trainee.webp"); }
.tier-pill.boo::before { background-image: url("assets/icons/remix-boo.webp"); }
.tier-pill.maknae::before { background-image: url("assets/icons/maknae.webp"); }
.tier-pill.sunbae::before { background-image: url("assets/icons/sunbae.webp"); }
.tier-pill.legend::before { background-image: url("assets/icons/kpop-legend.webp"); }

.badge-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

.badge {
  padding: 5px 10px 5px 6px;
}

.universe-mini-guide .tier-pill {
  padding-left: 52px;
}

.tier-pill::before {
  width: 34px;
  height: 34px;
  left: 10px;
  top: 10px;
}

@media (max-width: 520px) {
  .badge-icon {
    width: 22px;
    height: 22px;
  }

  .badge {
    padding: 5px 9px 5px 6px;
  }
}


/* v013 filter icon refinements */
.filter-chip.icon-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
}

.filter-icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background-size: 92% 92%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255,255,255,0.08);
}

.filter-access-trainee { background-image: url("assets/icons/trainee.webp"); }

.filter-supporters {
  position: relative;
  background:
    radial-gradient(circle at 35% 35%, rgba(216, 202, 69, 0.95), transparent 32%),
    radial-gradient(circle at 65% 35%, rgba(214, 70, 103, 0.95), transparent 32%),
    radial-gradient(circle at 35% 65%, rgba(67, 137, 245, 0.95), transparent 32%),
    radial-gradient(circle at 65% 65%, rgba(178, 53, 216, 0.95), transparent 32%),
    rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
}

.filter-type-evolution { background-image: url("assets/icons/evolution.webp"); }
.filter-type-signature { background-image: url("assets/icons/signature.webp"); }
.filter-type-legacy { background-image: url("assets/icons/legacy.webp"); }
.filter-type-underground { background-image: url("assets/icons/underground.webp"); }
.filter-type-b-side { background-image: url("assets/icons/b-side.webp"); }
.filter-type-mashup-megamix { background-image: url("assets/icons/mashup-megamix.webp"); }
.filter-type-remaster { background-image: url("assets/icons/remaster.webp"); }
.filter-type-parallel { background-image: url("assets/icons/parallel.webp"); }
.filter-type-global-wave { background-image: url("assets/icons/global-wave.webp"); }

.filter-chip[data-filter="youtube"] {
  border-color: rgba(89, 217, 207, 0.22);
}

.filter-chip[data-filter="patreon"] {
  border-color: rgba(255, 255, 255, 0.12);
}

.filter-chip[data-filter="youtube"].active {
  border-color: rgba(89, 217, 207, 0.62);
  background: linear-gradient(135deg, rgba(89, 217, 207, 0.22), rgba(0, 212, 255, 0.10));
}

.filter-chip[data-filter="patreon"].active {
  border-color: rgba(178, 53, 216, 0.52);
  background: linear-gradient(135deg, rgba(216, 202, 69, 0.14), rgba(178, 53, 216, 0.18));
}

@media (max-width: 520px) {
  .filter-icon {
    width: 22px;
    height: 22px;
  }

  .filter-chip.icon-filter {
    gap: 7px;
  }
}


/* v014 Patreon filter icon + real top guide icons */
.filter-supporters {
  background-image: url("assets/icons/patreon.webp");
  background-size: 88% 88%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255,255,255,0.08);
  border: 0;
}

.tier-pill::before {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent !important;
  box-shadow: none;
}

.tier-pill.trainee::before { background-image: url("assets/icons/trainee.webp"); }
.tier-pill.boo::before { background-image: url("assets/icons/remix-boo.webp"); }
.tier-pill.maknae::before { background-image: url("assets/icons/maknae.webp"); }
.tier-pill.sunbae::before { background-image: url("assets/icons/sunbae.webp"); }
.tier-pill.legend::before { background-image: url("assets/icons/kpop-legend.webp"); }

.universe-mini-guide .tier-pill {
  padding-left: 58px;
  min-height: 64px;
}

.tier-pill::before {
  width: 42px;
  height: 42px;
  left: 10px;
  top: 10px;
}

@media (max-width: 520px) {
  .universe-mini-guide .tier-pill {
    padding-left: 54px;
    min-height: 60px;
  }

  .tier-pill::before {
    width: 38px;
    height: 38px;
  }
}


/* v015 top guide real img icons */
.universe-mini-guide .tier-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px !important;
  min-height: 68px;
}

.tier-pill::before {
  display: none !important;
}

.tier-guide-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}

.tier-pill span {
  min-width: 0;
}

@media (max-width: 520px) {
  .universe-mini-guide .tier-pill {
    min-height: 62px;
    padding-left: 10px !important;
  }

  .tier-guide-icon {
    width: 40px;
    height: 40px;
  }
}


/* v016 unavailable access cleanup */
.badge.access-unavailable {
  color: #c7ccdc;
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.11);
  padding-left: 10px;
}

.remix-card.access-unknown::before {
  background: rgba(255, 255, 255, 0.18);
}

.remix-card.access-unknown {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025) 42%, rgba(18, 20, 38, 0.86)),
    rgba(18, 20, 38, 0.82);
}


/* v017 remix thumbnail column */
.remix-summary {
  grid-template-columns: 112px 92px minmax(0, 1fr) auto;
}

.remix-thumb {
  position: relative;
  width: 92px;
  aspect-ratio: 16 / 9;
  border-radius: 11px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,0.18), transparent 45%),
    rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
}

.remix-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
}

.remix-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}

.remix-thumb-placeholder .thumb-icon {
  width: 36px;
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.28));
}

.remix-thumb-placeholder .thumb-label {
  position: absolute;
  left: 6px;
  bottom: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: white;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(6px);
}

.remix-thumb-placeholder.access-trainee {
  background:
    radial-gradient(circle at 25% 0%, rgba(89, 217, 207, 0.38), transparent 55%),
    rgba(89, 217, 207, 0.08);
}

.remix-thumb-placeholder.access-boo {
  background:
    radial-gradient(circle at 25% 0%, rgba(216, 202, 69, 0.4), transparent 55%),
    rgba(216, 202, 69, 0.08);
}

.remix-thumb-placeholder.access-maknae {
  background:
    radial-gradient(circle at 25% 0%, rgba(214, 70, 103, 0.42), transparent 55%),
    rgba(214, 70, 103, 0.09);
}

.remix-thumb-placeholder.access-sunbae {
  background:
    radial-gradient(circle at 25% 0%, rgba(67, 137, 245, 0.42), transparent 55%),
    rgba(67, 137, 245, 0.09);
}

.remix-thumb-placeholder.access-legend {
  background:
    radial-gradient(circle at 25% 0%, rgba(178, 53, 216, 0.44), transparent 55%),
    rgba(178, 53, 216, 0.1);
}

.remix-thumb-placeholder.access-unknown {
  background:
    radial-gradient(circle at 25% 0%, rgba(255,255,255,0.18), transparent 55%),
    rgba(255,255,255,0.05);
}

.remix-thumb-placeholder.type-evolution .thumb-icon { background-image: url("assets/icons/evolution.webp"); }
.remix-thumb-placeholder.type-signature .thumb-icon { background-image: url("assets/icons/signature.webp"); }
.remix-thumb-placeholder.type-legacy .thumb-icon { background-image: url("assets/icons/legacy.webp"); }
.remix-thumb-placeholder.type-underground .thumb-icon { background-image: url("assets/icons/underground.webp"); }
.remix-thumb-placeholder.type-b-side .thumb-icon { background-image: url("assets/icons/b-side.webp"); }
.remix-thumb-placeholder.type-mashup-megamix .thumb-icon { background-image: url("assets/icons/mashup-megamix.webp"); }
.remix-thumb-placeholder.type-remaster .thumb-icon { background-image: url("assets/icons/remaster.webp"); }
.remix-thumb-placeholder.type-parallel .thumb-icon { background-image: url("assets/icons/parallel.webp"); }
.remix-thumb-placeholder.type-global-wave .thumb-icon { background-image: url("assets/icons/global-wave.webp"); }

@media (max-width: 900px) {
  .remix-summary {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      "thumb title"
      "date badges";
    align-items: center;
  }

  .remix-date { grid-area: date; }
  .remix-thumb { grid-area: thumb; width: 84px; }
  .remix-title-block { grid-area: title; }
  .badges { grid-area: badges; }
}

@media (max-width: 520px) {
  .remix-summary {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px 12px;
  }

  .remix-thumb {
    width: 76px;
    border-radius: 10px;
  }

  .remix-thumb-placeholder .thumb-icon {
    width: 30px;
    height: 30px;
  }

  .remix-thumb-placeholder .thumb-label {
    font-size: 9px;
    left: 5px;
    bottom: 4px;
  }
}


/* v018 polished mini-player foundation */
.main-content {
  padding-bottom: 150px;
}

.player-dock {
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 14px 28px;
  min-height: 124px;
  background:
    radial-gradient(circle at 12% 0%, rgba(89, 217, 207, 0.12), transparent 34%),
    radial-gradient(circle at 85% 100%, rgba(178, 53, 216, 0.16), transparent 36%),
    rgba(7, 8, 18, 0.96);
}

.mini-video,
.mini-player-media {
  width: 220px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,0.14), transparent 44%),
    rgba(255,255,255,0.055);
  box-shadow: 0 14px 38px rgba(0,0,0,0.28);
}

.mini-player-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mini-player-media .remix-thumb-placeholder {
  border-radius: 0;
}

.mini-player-media .remix-thumb-placeholder .thumb-icon {
  width: 50px;
  height: 50px;
}

.mini-player-media .remix-thumb-placeholder .thumb-label {
  font-size: 11px;
  left: 8px;
  bottom: 7px;
}

.player-info {
  align-self: center;
}

.player-info strong {
  max-width: 780px;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.player-info span:last-child {
  max-width: 780px;
}

.player-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.player-badges .badge {
  font-size: 11px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.player-badges .badge-icon {
  width: 21px;
  height: 21px;
}

.player-controls {
  align-self: center;
}

.player-controls .control-button {
  min-width: 82px;
  justify-content: center;
}

.player-dock.access-trainee {
  border-top-color: rgba(89, 217, 207, 0.32);
}

.player-dock.access-boo {
  border-top-color: rgba(216, 202, 69, 0.32);
}

.player-dock.access-maknae {
  border-top-color: rgba(214, 70, 103, 0.34);
}

.player-dock.access-sunbae {
  border-top-color: rgba(67, 137, 245, 0.34);
}

.player-dock.access-legend {
  border-top-color: rgba(178, 53, 216, 0.38);
}

.player-dock.access-unknown {
  border-top-color: rgba(255,255,255,0.16);
}

@media (max-width: 780px) {
  .main-content {
    padding-bottom: 130px;
  }

  .player-dock {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 92px;
    padding: 10px 12px;
  }

  .mini-player-media {
    display: block;
    width: 72px;
    border-radius: 11px;
  }

  .mini-player-media .remix-thumb-placeholder .thumb-icon {
    width: 30px;
    height: 30px;
  }

  .mini-player-media .remix-thumb-placeholder .thumb-label {
    display: none;
  }

  .player-info strong {
    font-size: 16px;
  }

  .player-info span:last-child {
    font-size: 12px;
  }

  .player-badges {
    display: none;
  }

  .player-controls {
    grid-column: auto;
    grid-row: auto;
    flex-direction: column;
    gap: 6px;
  }

  .player-controls .control-button {
    min-width: 60px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .player-dock {
    grid-template-columns: 64px minmax(0, 1fr) auto;
  }

  .mini-player-media {
    width: 64px;
  }

  .now-playing-label {
    font-size: 10px;
  }

  .player-info strong {
    font-size: 15px;
  }
}


/* v019 mini-player badge + list spacing fixes */

/* Move thumbnails closer to date/ID by narrowing the date column and column gap */
.remix-summary {
  grid-template-columns: 92px 92px minmax(0, 1fr) auto;
  gap: 12px;
}

.remix-date {
  padding-left: 2px;
}

/* Keep normal archive badges unchanged, but make player badges compact */
.player-badges {
  gap: 6px;
  align-items: center;
}

.player-badges .badge {
  height: 34px;
  min-height: 34px;
  padding: 4px 10px 4px 6px;
  gap: 6px;
  white-space: nowrap;
  flex-wrap: nowrap;
  align-items: center;
  line-height: 1;
}

.player-badges .badge-label {
  white-space: nowrap;
  line-height: 1;
}

.player-badges .badge-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 7px;
}

.player-info strong {
  margin-top: 2px;
}

.playerMeta,
#playerMeta {
  line-height: 1.25;
}

/* Slightly smaller dock media so badges and title feel more balanced */
.mini-player-media {
  width: 210px;
}

/* Prevent access badges from becoming too tall in all compact UI areas */
.badge.access,
.badge.type {
  align-items: center;
}

/* Mobile keeps thumbnail/title compact */
@media (max-width: 900px) {
  .remix-summary {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 9px 12px;
  }

  .remix-thumb {
    width: 78px;
  }
}

@media (max-width: 520px) {
  .remix-summary {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px 10px;
  }

  .remix-thumb {
    width: 72px;
  }
}


/* v020 wider mini-player access/type badges */
.player-badges {
  flex-wrap: wrap;
}

.player-badges .badge {
  min-width: 136px;
  width: auto;
  justify-content: flex-start;
  overflow: visible;
}

.player-badges .badge.access {
  min-width: 178px;
}

.player-badges .badge.type {
  min-width: 136px;
}

.player-badges .badge-label {
  display: inline-block;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Keep very long labels controlled */
.player-badges .badge.access-legend {
  min-width: 190px;
}

@media (max-width: 780px) {
  .player-badges {
    display: none;
  }
}


/* v021 mini-player badge correction */
.player-badges .badge {
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 5px 12px 5px 7px;
  align-items: center;
}

.player-badges .badge.type {
  min-width: 0;
  width: auto;
  max-width: none;
  padding-right: 13px;
}

.player-badges .badge.access {
  min-width: 230px;
  width: auto;
  max-width: none;
}

.player-badges .badge.access-legend {
  min-width: 250px;
}

.player-badges .badge-icon {
  width: 25px;
  height: 25px;
  min-width: 25px;
}

.player-badges .badge-label {
  display: inline-block;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  line-height: 1;
  font-size: 12px;
}

.player-badges .badge.access .badge-label {
  font-size: 11px;
  letter-spacing: 0.03em;
}


/* v022 compact horizontal mini-player badges */
.player-badges .badge {
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 4px 12px 4px 7px;
  overflow: visible;
  white-space: nowrap;
}

.player-badges .badge.type {
  min-width: 0 !important;
  width: auto !important;
}

.player-badges .badge.access {
  min-width: 230px !important;
  width: auto !important;
}

.player-badges .badge.access-legend {
  min-width: 250px !important;
}

.player-badges .badge-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  flex: 0 0 22px;
  display: block;
}

.player-badges .badge-label {
  display: block;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  line-height: 1;
  font-size: 12px;
  transform: translateY(0);
}

.player-badges .badge.access .badge-label {
  font-size: 12px;
  letter-spacing: 0.025em;
}


/* v023 dedicated mini-player badges: no reuse of archive badge component */
.player-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 34px;
  padding: 5px 12px 5px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f5f7ff;
  overflow: visible;
}

.mini-badge-icon {
  flex: 0 0 auto;
  display: block;
  width: 23px;
  height: 23px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mini-badge-text {
  display: block;
  white-space: nowrap;
  line-height: 1;
  transform: none;
  overflow: visible;
}

.mini-badge.type {
  min-width: 0;
  width: auto;
  background: rgba(255,255,255,0.075);
}

.mini-badge.access {
  min-width: 0;
  width: auto;
}

.mini-badge.access-trainee {
  color: #c9fffb;
  background: rgba(89, 217, 207, 0.17);
  border-color: rgba(89, 217, 207, 0.28);
}

.mini-badge.access-boo {
  color: #fff7a9;
  background: rgba(216, 202, 69, 0.17);
  border-color: rgba(216, 202, 69, 0.3);
}

.mini-badge.access-maknae {
  color: #ffd4dd;
  background: rgba(214, 70, 103, 0.18);
  border-color: rgba(214, 70, 103, 0.3);
}

.mini-badge.access-sunbae {
  color: #d7e7ff;
  background: rgba(67, 137, 245, 0.18);
  border-color: rgba(67, 137, 245, 0.3);
}

.mini-badge.access-legend {
  color: #f4d5ff;
  background: rgba(178, 53, 216, 0.2);
  border-color: rgba(178, 53, 216, 0.34);
}

.mini-badge.access-unknown {
  color: #c7ccdc;
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.11);
}

.mini-badge.type-evolution {
  color: #c9fffb;
  background: rgba(89, 217, 207, 0.13);
  border-color: rgba(89, 217, 207, 0.22);
}

.mini-badge.type-signature {
  color: #fff7a9;
  background: rgba(216, 202, 69, 0.12);
  border-color: rgba(216, 202, 69, 0.22);
}

.mini-badge.type-legacy,
.mini-badge.type-underground {
  color: #ffd4dd;
  background: rgba(214, 70, 103, 0.12);
  border-color: rgba(214, 70, 103, 0.22);
}

.mini-badge.type-b-side,
.mini-badge.type-mashup-megamix {
  color: #d7e7ff;
  background: rgba(67, 137, 245, 0.13);
  border-color: rgba(67, 137, 245, 0.22);
}

.mini-badge.type-remaster,
.mini-badge.type-parallel,
.mini-badge.type-global-wave {
  color: #f4d5ff;
  background: rgba(178, 53, 216, 0.14);
  border-color: rgba(178, 53, 216, 0.24);
}

.mini-badge-icon.access-trainee { background-image: url("assets/icons/trainee.webp"); }
.mini-badge-icon.access-boo { background-image: url("assets/icons/remix-boo.webp"); }
.mini-badge-icon.access-maknae { background-image: url("assets/icons/maknae.webp"); }
.mini-badge-icon.access-sunbae { background-image: url("assets/icons/sunbae.webp"); }
.mini-badge-icon.access-legend { background-image: url("assets/icons/kpop-legend.webp"); }

.mini-badge-icon.type-evolution { background-image: url("assets/icons/evolution.webp"); }
.mini-badge-icon.type-signature { background-image: url("assets/icons/signature.webp"); }
.mini-badge-icon.type-legacy { background-image: url("assets/icons/legacy.webp"); }
.mini-badge-icon.type-underground { background-image: url("assets/icons/underground.webp"); }
.mini-badge-icon.type-b-side { background-image: url("assets/icons/b-side.webp"); }
.mini-badge-icon.type-mashup-megamix { background-image: url("assets/icons/mashup-megamix.webp"); }
.mini-badge-icon.type-remaster { background-image: url("assets/icons/remaster.webp"); }
.mini-badge-icon.type-parallel { background-image: url("assets/icons/parallel.webp"); }
.mini-badge-icon.type-global-wave { background-image: url("assets/icons/global-wave.webp"); }

@media (max-width: 780px) {
  .player-badges {
    display: none;
  }
}


/* v024 force mini-player tier text visibility */
.player-badges .mini-badge {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}

.player-badges .mini-badge.access {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-right: 14px !important;
}

.player-badges .mini-badge-text {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: currentColor !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 12px !important;
  line-height: 1 !important;
  transform: none !important;
}

.player-badges .mini-badge-icon {
  text-indent: 0 !important;
  color: transparent !important;
}


/* v025 fully independent mini-player chips */
.player-badges {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.player-badges .sp-chip {
  all: unset;
  box-sizing: border-box;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  height: 34px !important;
  min-height: 34px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 5px 12px 5px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: visible !important;
  cursor: default !important;
}

.player-badges .sp-icon {
  all: unset;
  box-sizing: border-box;
  display: block !important;
  flex: 0 0 23px !important;
  width: 23px !important;
  height: 23px !important;
  object-fit: contain !important;
}

.player-badges .sp-text {
  all: unset;
  box-sizing: border-box;
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1 !important;
  transform: none !important;
  color: currentColor !important;
}

.player-badges .sp-type-evolution,
.player-badges .sp-tier-trainee {
  color: #c9fffb !important;
  background: rgba(89, 217, 207, 0.17) !important;
  border-color: rgba(89, 217, 207, 0.30) !important;
}

.player-badges .sp-type-signature,
.player-badges .sp-tier-boo {
  color: #fff7a9 !important;
  background: rgba(216, 202, 69, 0.17) !important;
  border-color: rgba(216, 202, 69, 0.30) !important;
}

.player-badges .sp-type-legacy,
.player-badges .sp-type-underground,
.player-badges .sp-tier-maknae {
  color: #ffd4dd !important;
  background: rgba(214, 70, 103, 0.18) !important;
  border-color: rgba(214, 70, 103, 0.30) !important;
}

.player-badges .sp-type-b-side,
.player-badges .sp-type-mashup-megamix,
.player-badges .sp-tier-sunbae {
  color: #d7e7ff !important;
  background: rgba(67, 137, 245, 0.18) !important;
  border-color: rgba(67, 137, 245, 0.30) !important;
}

.player-badges .sp-type-remaster,
.player-badges .sp-type-parallel,
.player-badges .sp-type-global-wave,
.player-badges .sp-tier-legend {
  color: #f4d5ff !important;
  background: rgba(178, 53, 216, 0.20) !important;
  border-color: rgba(178, 53, 216, 0.34) !important;
}

.player-badges .sp-tier-unknown {
  color: #c7ccdc !important;
  background: rgba(255,255,255,0.075) !important;
  border-color: rgba(255,255,255,0.11) !important;
}

@media (max-width: 780px) {
  .player-badges {
    display: none !important;
  }
}


/* v026 mini-player chip sizing/centering fix */
.player-info,
.player-badges {
  overflow: visible !important;
}

.player-badges .sp-chip {
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 6px 14px 6px 8px !important;
  gap: 8px !important;
}

.player-badges .sp-chip.sp-type {
  min-width: 126px !important;
}

.player-badges .sp-chip.sp-tier {
  min-width: 112px !important;
}

.player-badges .sp-chip.sp-tier-legend {
  min-width: 158px !important;
}

.player-badges .sp-icon {
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px !important;
  align-self: center !important;
}

.player-badges .sp-text {
  max-width: none !important;
  width: auto !important;
  min-width: max-content !important;
  overflow: visible !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  transform: translateY(-1px) !important;
}


/* v027 actual mini-player YouTube embed */
.mini-player-media iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.mini-player-media.is-playing {
  background: #05060f;
}

.action-row .inline-action.disabled-note {
  cursor: default;
  opacity: 0.72;
  pointer-events: none;
  background: rgba(255,255,255,0.055);
}


/* v028 mini-player reliability/fit */
.mini-player-media iframe {
  background: #000;
}

.action-row:empty {
  display: none;
}


/* v030 safe rollback + hide mini-player action on non-playable entries */
.remix-card.no-mini-player .mini-player-action {
  display: none !important;
}


/* v031: inline YouTube iframe is removed when a remix is sent to mini-player */


/* v032: keep expanded tab open while moving video to mini-player */
.video-frame.inline-video-moved {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 20% 0%, rgba(89, 217, 207, 0.18), transparent 44%),
    radial-gradient(circle at 90% 100%, rgba(178, 53, 216, 0.18), transparent 42%),
    rgba(5, 6, 15, 0.96);
}

.inline-mini-notice {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px;
  color: var(--text);
}

.inline-mini-notice img {
  width: 150px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

.inline-mini-notice strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.inline-mini-notice span {
  display: block;
  max-width: 520px;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .inline-mini-notice {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 18px;
  }

  .inline-mini-notice img {
    width: min(220px, 80%);
  }
}


/* v033 custom YouTube controls */
.player-dock {
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
}

.player-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(340px, 1.15fr);
  gap: 18px;
  align-items: center;
}

.custom-player-controls {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-self: center;
}

.transport-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.transport-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.13);
  color: var(--text);
  background: rgba(255,255,255,0.055);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.transport-button:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 212, 255, 0.48);
  background: rgba(0, 212, 255, 0.12);
}

.transport-button.primary {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, rgba(89, 217, 207, 0.24), rgba(124, 92, 255, 0.20));
  border-color: rgba(89, 217, 207, 0.36);
  font-size: 17px;
}

.transport-button.active {
  border-color: rgba(255, 200, 87, 0.55);
  background: rgba(255, 200, 87, 0.14);
  color: #ffe7ad;
}

.transport-button.disabled {
  opacity: 0.42;
  cursor: default;
}

.transport-button.disabled:hover {
  transform: none;
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.13);
}

.seek-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  gap: 10px;
  align-items: center;
}

.time-label {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
}

.seek-slider {
  width: 100%;
  accent-color: var(--tier-trainee);
  cursor: pointer;
}

.seek-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(89, 217, 207, 0.65), rgba(124, 92, 255, 0.45));
}

.seek-slider::-webkit-slider-thumb {
  margin-top: -5px;
}

.seek-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(89, 217, 207, 0.65), rgba(124, 92, 255, 0.45));
}

.player-controls {
  display: none;
}

@media (max-width: 980px) {
  .player-main {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .transport-row {
    justify-content: flex-start;
  }
}

@media (max-width: 780px) {
  .player-dock {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .custom-player-controls {
    margin-top: 8px;
  }

  .transport-row {
    gap: 6px;
  }

  .transport-button {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .transport-button.primary {
    width: 38px;
    height: 38px;
  }

  .seek-row {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 6px;
  }

  .time-label {
    font-size: 11px;
  }

  .control-button {
    padding: 7px 10px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .transport-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  #randomButton,
  #prevButton,
  #nextButton {
    display: none;
  }
}


/* v034 volume control + hidden YouTube controls */
.volume-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.volume-button {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.volume-slider {
  width: 92px;
  accent-color: var(--tier-trainee);
  cursor: pointer;
}

.volume-slider::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(89, 217, 207, 0.65), rgba(124, 92, 255, 0.45));
}

.volume-slider::-webkit-slider-thumb {
  margin-top: -5px;
}

.volume-slider::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(89, 217, 207, 0.65), rgba(124, 92, 255, 0.45));
}

@media (max-width: 780px) {
  .volume-control {
    gap: 5px;
    padding-right: 7px;
  }

  .volume-slider {
    width: 70px;
  }

  .volume-button {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 520px) {
  .volume-control {
    display: none;
  }
}


/* v036 fullscreen-style middle area expansion without moving/reloading iframe */
body.video-expanded-mode {
  overflow: hidden;
}

body.video-expanded-mode::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: var(--expanded-video-top, 88px);
  bottom: var(--expanded-video-bottom, 150px);
  z-index: 65;
  background:
    radial-gradient(circle at 20% 0%, rgba(89, 217, 207, 0.12), transparent 36%),
    radial-gradient(circle at 85% 100%, rgba(178, 53, 216, 0.16), transparent 42%),
    rgba(5, 6, 15, 0.94);
  backdrop-filter: blur(10px);
}

body.video-expanded-mode .mini-player-media {
  position: fixed !important;
  left: 24px !important;
  right: 24px !important;
  top: calc(var(--expanded-video-top, 88px) + 18px) !important;
  bottom: calc(var(--expanded-video-bottom, 150px) + 18px) !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  z-index: 75 !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
  background: #000 !important;
}

body.video-expanded-mode .mini-player-media iframe {
  width: 100% !important;
  height: 100% !important;
}

body.video-expanded-mode .player-dock {
  z-index: 85;
}

body.video-expanded-mode .main-content {
  pointer-events: none;
  opacity: 0.2;
  filter: blur(1px);
}

body.video-expanded-mode .site-header {
  z-index: 90;
}

@media (max-width: 780px) {
  body.video-expanded-mode .mini-player-media {
    left: 12px !important;
    right: 12px !important;
    top: calc(var(--expanded-video-top, 120px) + 12px) !important;
    bottom: calc(var(--expanded-video-bottom, 120px) + 12px) !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 520px) {
  body.video-expanded-mode .mini-player-media {
    left: 8px !important;
    right: 8px !important;
    border-radius: 14px !important;
  }
}


/* v037 exact-size expanded video fix */
body.video-expanded-mode .mini-player-media {
  position: fixed !important;
  left: var(--expanded-video-left, 24px) !important;
  top: var(--expanded-video-top-px, 120px) !important;
  width: var(--expanded-video-width, 960px) !important;
  height: var(--expanded-video-height, 540px) !important;
  right: auto !important;
  bottom: auto !important;
  aspect-ratio: auto !important;
  z-index: 95 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #000 !important;
}

body.video-expanded-mode .mini-player-media iframe,
body.video-expanded-mode .mini-player-media > div {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.video-expanded-mode::before {
  z-index: 70;
}

body.video-expanded-mode .player-dock {
  z-index: 90;
}

body.video-expanded-mode .site-header {
  z-index: 100;
}


/* v038 simpler expanded video positioning */
body.video-expanded-mode::before {
  top: 0 !important;
  bottom: var(--expanded-video-bottom, 150px) !important;
}

body.video-expanded-mode .mini-player-media {
  left: var(--expanded-video-left, 24px) !important;
  top: var(--expanded-video-top-px, 24px) !important;
  width: var(--expanded-video-width, 960px) !important;
  height: var(--expanded-video-height, 540px) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
}


/* v039 expanded mode: expand the whole player dock, not the iframe alone */
body.video-expanded-mode {
  overflow: hidden !important;
}

body.video-expanded-mode::before {
  display: none !important;
}

body.video-expanded-mode .main-content {
  opacity: 0.12 !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}

body.video-expanded-mode .site-header {
  opacity: 0.16 !important;
  pointer-events: none !important;
}

body.video-expanded-mode .player-dock {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999 !important;
  min-height: 100vh !important;
  height: 100vh !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: 24px 28px !important;
  border-top: 0 !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(89, 217, 207, 0.12), transparent 38%),
    radial-gradient(circle at 82% 100%, rgba(178, 53, 216, 0.18), transparent 42%),
    rgba(5, 6, 15, 0.98) !important;
  backdrop-filter: blur(16px) !important;
}

body.video-expanded-mode .mini-player-media {
  position: static !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(calc(100vw - 56px), calc((100vh - 190px) * 16 / 9)) !important;
  height: auto !important;
  max-height: calc(100vh - 190px) !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 24px 90px rgba(0,0,0,0.58) !important;
  background: #000 !important;
  z-index: 1 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
}

body.video-expanded-mode .mini-player-media iframe,
body.video-expanded-mode .mini-player-media > div {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.video-expanded-mode .player-main {
  align-self: end !important;
  width: min(1280px, 100%) !important;
  justify-self: center !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 0.85fr) minmax(340px, 1.15fr) !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(10, 12, 24, 0.76) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,0.28) !important;
}

body.video-expanded-mode .player-info strong {
  max-width: 100% !important;
}

@media (max-width: 980px) {
  body.video-expanded-mode .player-main {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 780px) {
  body.video-expanded-mode .player-dock {
    padding: 12px !important;
    gap: 12px !important;
  }

  body.video-expanded-mode .mini-player-media {
    width: min(calc(100vw - 24px), calc((100vh - 175px) * 16 / 9)) !important;
    max-height: calc(100vh - 175px) !important;
    border-radius: 18px !important;
  }

  body.video-expanded-mode .player-main {
    padding: 12px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 520px) {
  body.video-expanded-mode .mini-player-media {
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 165px) !important;
    border-radius: 14px !important;
  }
}


/* v040 playlist system */
.player-dock {
  grid-template-columns: 220px minmax(0, 1fr) 340px 44px;
  align-items: stretch;
  gap: 14px;
  min-height: 142px;
  padding: 12px 18px;
}

.player-main {
  align-self: center;
}

.player-badges {
  display: none !important;
}

.transport-row {
  justify-content: center !important;
}

.custom-player-controls {
  justify-content: center;
}

.seek-row {
  max-width: 760px;
  width: 100%;
  justify-self: center;
}

.player-side-actions {
  align-self: stretch;
  display: grid;
  grid-template-rows: 38px 38px 1fr;
  gap: 8px;
  justify-items: center;
  align-items: start;
}

.player-x-button,
.playlist-toggle-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.13);
  color: var(--text);
  background: rgba(255,255,255,0.055);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.player-x-button {
  color: #ffd6d6;
  border-color: rgba(255,90,90,0.28);
}

.playlist-toggle-button {
  color: #c9fffb;
  border-color: rgba(89,217,207,0.28);
}

.player-x-button:hover,
.playlist-toggle-button:hover {
  transform: translateY(-1px);
  background: rgba(0,212,255,0.12);
  border-color: rgba(0,212,255,0.48);
}

.playlist-panel {
  align-self: stretch;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(circle at 20% 0%, rgba(89,217,207,0.10), transparent 42%),
    rgba(255,255,255,0.045);
}

.playlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.playlist-header strong {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.playlist-header span {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: #c9fffb;
  background: rgba(89,217,207,0.14);
  border: 1px solid rgba(89,217,207,0.24);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
}

.playlist-list {
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
}

.playlist-item {
  width: 100%;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.playlist-item:hover {
  background: rgba(255,255,255,0.06);
}

.playlist-item.active {
  background: rgba(89,217,207,0.13);
  box-shadow: inset 0 0 0 1px rgba(89,217,207,0.20);
}

.playlist-item-id {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-item-title {
  min-width: 0;
  color: #f5f7ff;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-empty {
  padding: 16px 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.player-dock.playlist-collapsed {
  grid-template-columns: 220px minmax(0, 1fr) 44px;
}

.player-dock.playlist-collapsed .playlist-panel {
  display: none;
}

.player-dock.playlist-collapsed .playlist-toggle-button {
  transform: none;
}

.inline-action.mini-player-action::before {
  content: "+ ";
}

/* Expanded mode with playlist right side */
body.video-expanded-mode .player-dock {
  grid-template-columns: minmax(0, 1fr) 340px 44px !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 16px !important;
}

body.video-expanded-mode .mini-player-media {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.video-expanded-mode .player-main {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

body.video-expanded-mode .playlist-panel {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  height: 100% !important;
  align-self: stretch !important;
}

body.video-expanded-mode .player-side-actions {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
}

body.video-expanded-mode .player-dock.playlist-collapsed {
  grid-template-columns: minmax(0, 1fr) 44px !important;
}

body.video-expanded-mode .player-dock.playlist-collapsed .playlist-panel {
  display: none !important;
}

body.video-expanded-mode .transport-row {
  justify-content: center !important;
}

@media (max-width: 1100px) {
  .player-dock {
    grid-template-columns: 190px minmax(0, 1fr) 300px 42px;
  }

  .player-dock.playlist-collapsed {
    grid-template-columns: 190px minmax(0, 1fr) 42px;
  }
}

@media (max-width: 900px) {
  .player-dock {
    grid-template-columns: 72px minmax(0, 1fr) 42px;
    grid-template-rows: auto auto;
  }

  .playlist-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 160px;
  }

  .player-side-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .player-dock.playlist-collapsed {
    grid-template-columns: 72px minmax(0, 1fr) 42px;
    grid-template-rows: auto;
  }

  body.video-expanded-mode .player-dock {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    grid-template-rows: minmax(0, 1fr) auto 150px !important;
  }

  body.video-expanded-mode .mini-player-media {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.video-expanded-mode .player-main {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body.video-expanded-mode .player-side-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body.video-expanded-mode .playlist-panel {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    height: 150px !important;
  }

  body.video-expanded-mode .player-dock.playlist-collapsed {
    grid-template-rows: minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 520px) {
  .playlist-item {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .playlist-panel {
    height: 140px;
  }
}


/* v041 playlist compact scroll + reorder controls */
.player-dock {
  min-height: 142px !important;
  max-height: 142px !important;
  height: 142px !important;
  overflow: hidden !important;
}

.playlist-panel {
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.playlist-header {
  display: none !important;
}

.playlist-list {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px !important;
  scrollbar-width: thin;
}

.playlist-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 6px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.playlist-item:hover {
  background: rgba(255,255,255,0.045);
}

.playlist-item.active {
  background: rgba(89,217,207,0.13);
  box-shadow: inset 0 0 0 1px rgba(89,217,207,0.20);
}

.playlist-play-area {
  min-width: 0;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 0 8px 9px;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.playlist-move-buttons {
  display: grid;
  gap: 2px;
  padding-right: 5px;
}

.playlist-move-button {
  display: grid;
  place-items: center;
  width: 19px;
  height: 17px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: var(--muted);
  background: rgba(255,255,255,0.045);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}

.playlist-move-button:hover {
  color: #c9fffb;
  border-color: rgba(89,217,207,0.32);
  background: rgba(89,217,207,0.12);
}

.playlist-empty {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

/* Expanded mode keeps the playlist full height next to the large player */
body.video-expanded-mode .player-dock {
  max-height: none !important;
  height: 100vh !important;
}

body.video-expanded-mode .playlist-panel {
  max-height: none !important;
}

@media (max-width: 900px) {
  .player-dock {
    max-height: none !important;
    height: auto !important;
  }

  .playlist-panel {
    height: 160px !important;
    max-height: 160px !important;
  }
}

@media (max-width: 520px) {
  .playlist-play-area {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .playlist-panel {
    height: 140px !important;
    max-height: 140px !important;
  }
}


/* v042 custom playlist scrollbar + drag/reorder UI */
.playlist-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(89, 217, 207, 0.45) rgba(255,255,255,0.045);
}

.playlist-list::-webkit-scrollbar {
  width: 8px;
}

.playlist-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.035);
  border-radius: 999px;
}

.playlist-list::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(89, 217, 207, 0.72), rgba(124, 92, 255, 0.62));
  border-radius: 999px;
  border: 2px solid rgba(8, 9, 20, 0.85);
}

.playlist-list::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(89, 217, 207, 0.9), rgba(124, 92, 255, 0.82));
}

.playlist-item {
  grid-template-columns: minmax(0, 1fr) 28px !important;
  cursor: grab;
  user-select: none;
}

.playlist-item:active {
  cursor: grabbing;
}

.playlist-play-area {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  padding-right: 2px;
}

.playlist-remove-button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 90, 90, 0.22);
  border-radius: 999px;
  color: #ffd6d6;
  background: rgba(255, 90, 90, 0.08);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: scale(0.86);
  cursor: pointer;
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.playlist-item:hover .playlist-remove-button,
.playlist-remove-button:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.playlist-remove-button:hover {
  background: rgba(255, 90, 90, 0.18);
  border-color: rgba(255, 90, 90, 0.42);
}

.playlist-move-buttons,
.playlist-move-button {
  display: none !important;
}

.playlist-item.dragging {
  opacity: 0.45;
}

.playlist-item.drag-over {
  background: rgba(89, 217, 207, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(89, 217, 207, 0.34),
    0 0 0 1px rgba(89, 217, 207, 0.10);
}

.playlist-item.drag-over::before {
  content: "";
  position: absolute;
}

@media (max-width: 520px) {
  .playlist-play-area {
    grid-template-columns: 60px minmax(0, 1fr) !important;
  }

  .playlist-remove-button {
    opacity: 1;
    transform: scale(1);
  }
}


/* v043 player control layout polish */
.player-dock {
  grid-template-columns: 220px minmax(0, 1fr) 340px 44px;
}

.player-main {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(520px, 1.28fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
}

.custom-player-controls {
  width: 100%;
  max-width: 920px;
  justify-self: center;
}

.transport-row {
  justify-content: center !important;
  width: 100%;
}

.seek-row {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  grid-template-columns: 48px minmax(320px, 1fr) 48px;
}

.seek-slider {
  width: 100%;
}

.icon-control-button {
  width: 42px;
  min-width: 42px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.playlist-toggle-button {
  font-size: 18px;
  line-height: 1;
}

.player-x-button {
  font-size: 18px;
}

/* When playlist is collapsed, give the controls more room */
.player-dock.playlist-collapsed {
  grid-template-columns: 220px minmax(0, 1fr) 44px;
}

.player-dock.playlist-collapsed .player-main {
  grid-template-columns: minmax(260px, 0.62fr) minmax(680px, 1.38fr);
}

.player-dock.playlist-collapsed .custom-player-controls {
  max-width: 1120px;
}

/* Expanded player mode: controls should still feel wide and centered */
body.video-expanded-mode .player-main {
  width: min(1400px, 100%) !important;
  grid-template-columns: minmax(260px, 0.58fr) minmax(700px, 1.42fr) !important;
}

body.video-expanded-mode .custom-player-controls {
  max-width: 1120px !important;
  justify-self: center !important;
}

body.video-expanded-mode .seek-row {
  grid-template-columns: 50px minmax(460px, 1fr) 50px !important;
}

/* If expanded + playlist collapsed, controls can breathe even more */
body.video-expanded-mode .player-dock.playlist-collapsed .player-main {
  grid-template-columns: minmax(260px, 0.5fr) minmax(820px, 1.5fr) !important;
}

body.video-expanded-mode .player-dock.playlist-collapsed .custom-player-controls {
  max-width: 1280px !important;
}

/* Slightly reduce visual weight of disabled playlist controls until playlist functions are active/available */
.transport-button.disabled {
  opacity: 0.48;
}

@media (max-width: 1200px) {
  .player-main {
    grid-template-columns: minmax(240px, 0.75fr) minmax(420px, 1.25fr);
    gap: 20px;
  }

  .player-dock.playlist-collapsed .player-main {
    grid-template-columns: minmax(240px, 0.68fr) minmax(520px, 1.32fr);
  }

  .seek-row {
    grid-template-columns: 46px minmax(260px, 1fr) 46px;
  }
}

@media (max-width: 980px) {
  .player-main,
  .player-dock.playlist-collapsed .player-main,
  body.video-expanded-mode .player-main,
  body.video-expanded-mode .player-dock.playlist-collapsed .player-main {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .custom-player-controls,
  .player-dock.playlist-collapsed .custom-player-controls,
  body.video-expanded-mode .custom-player-controls {
    max-width: 100% !important;
  }

  .seek-row,
  body.video-expanded-mode .seek-row {
    grid-template-columns: 42px minmax(160px, 1fr) 42px !important;
  }
}

@media (max-width: 780px) {
  .icon-control-button {
    width: 34px;
    min-width: 34px;
    height: 32px;
    font-size: 15px;
  }

  .playlist-toggle-button,
  .player-x-button {
    font-size: 16px;
  }
}


/* v044 wider player controls and seek bar */
.player-main {
  grid-template-columns: minmax(220px, 0.48fr) minmax(760px, 1.52fr) !important;
  gap: clamp(22px, 4vw, 70px) !important;
}

.player-info {
  min-width: 0;
}

.player-info strong {
  max-width: 100% !important;
}

.custom-player-controls {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

.transport-row {
  width: 100% !important;
  justify-content: center !important;
}

.seek-row {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  grid-template-columns: 54px minmax(520px, 1fr) 54px !important;
}

.player-dock.playlist-collapsed .player-main {
  grid-template-columns: minmax(220px, 0.40fr) minmax(900px, 1.60fr) !important;
}

.player-dock.playlist-collapsed .custom-player-controls {
  max-width: none !important;
}

body.video-expanded-mode .player-main {
  grid-template-columns: minmax(220px, 0.38fr) minmax(920px, 1.62fr) !important;
  width: min(1500px, 100%) !important;
}

body.video-expanded-mode .seek-row {
  grid-template-columns: 54px minmax(720px, 1fr) 54px !important;
}

body.video-expanded-mode .player-dock.playlist-collapsed .player-main {
  grid-template-columns: minmax(220px, 0.32fr) minmax(1080px, 1.68fr) !important;
}

body.video-expanded-mode .player-dock.playlist-collapsed .seek-row {
  grid-template-columns: 54px minmax(860px, 1fr) 54px !important;
}

/* make the slider itself visually feel longer and clearer */
.seek-slider::-webkit-slider-runnable-track {
  height: 7px;
}

.seek-slider::-moz-range-track {
  height: 7px;
}

.seek-slider::-webkit-slider-thumb {
  transform: scale(1.08);
}

.time-label {
  text-align: center;
}

@media (max-width: 1400px) {
  .player-main {
    grid-template-columns: minmax(220px, 0.55fr) minmax(620px, 1.45fr) !important;
    gap: 28px !important;
  }

  .player-dock.playlist-collapsed .player-main {
    grid-template-columns: minmax(220px, 0.48fr) minmax(720px, 1.52fr) !important;
  }

  .seek-row {
    grid-template-columns: 50px minmax(420px, 1fr) 50px !important;
  }
}

@media (max-width: 1100px) {
  .player-main,
  .player-dock.playlist-collapsed .player-main,
  body.video-expanded-mode .player-main,
  body.video-expanded-mode .player-dock.playlist-collapsed .player-main {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .seek-row,
  body.video-expanded-mode .seek-row,
  body.video-expanded-mode .player-dock.playlist-collapsed .seek-row {
    grid-template-columns: 46px minmax(240px, 1fr) 46px !important;
  }
}


/* v045 playlist title hover-scroll */
.playlist-item-title {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.playlist-title-marquee {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  transition: transform 420ms ease;
  padding-right: 20px;
}

.playlist-item:hover .playlist-title-marquee {
  animation: playlistTitleScroll 7s linear 0.45s infinite alternate;
}

@keyframes playlistTitleScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% + 100px));
  }
}

/* Avoid awkward scrolling on very short visible spaces */
@media (max-width: 520px) {
  .playlist-item:hover .playlist-title-marquee {
    animation-duration: 6s;
  }
}


/* v046 smarter playlist title scrolling + tighter item spacing */
.playlist-play-area {
  grid-template-columns: 62px minmax(0, 1fr) !important;
  gap: 4px !important;
  padding-left: 8px !important;
}

.playlist-item-id {
  padding-right: 0;
}

.playlist-item-title {
  padding-left: 0;
}

.playlist-title-marquee {
  transform: translateX(0);
}

/* Override v045: do not scroll every hovered item */
.playlist-item:hover .playlist-title-marquee {
  animation: none;
}

/* Only scroll items that JS has detected as overflowing */
.playlist-item:hover .playlist-item-title.is-overflowing .playlist-title-marquee {
  animation: playlistTitleScrollSmart 7s linear 0.45s infinite alternate;
}

@keyframes playlistTitleScrollSmart {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% + var(--playlist-title-window, 120px)));
  }
}

@media (max-width: 520px) {
  .playlist-play-area {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  .playlist-item:hover .playlist-item-title.is-overflowing .playlist-title-marquee {
    animation-duration: 6s;
  }
}


/* v047 volume memory + now-playing marquee + playlist save/load */
.player-main {
  grid-template-columns: minmax(280px, 0.62fr) minmax(760px, 1.38fr) !important;
}

.player-dock.playlist-collapsed .player-main {
  grid-template-columns: minmax(320px, 0.50fr) minmax(900px, 1.50fr) !important;
}

.player-info {
  min-width: 0 !important;
}

.player-info strong#playerTitle {
  display: block;
  position: relative;
  max-width: 100% !important;
  overflow: hidden;
  white-space: nowrap;
}

.now-playing-title-marquee {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  padding-right: 24px;
}

#playerTitle.is-overflowing .now-playing-title-marquee {
  animation: nowPlayingTitleScroll 8.5s linear 0.7s infinite alternate;
}

@keyframes nowPlayingTitleScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% + var(--now-playing-title-window, 220px)));
  }
}

.playlist-panel {
  position: relative;
}

.playlist-file-actions {
  position: absolute;
  left: -42px;
  top: 8px;
  display: grid;
  gap: 7px;
  z-index: 3;
}

.playlist-file-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.13);
  color: var(--text);
  background: rgba(255,255,255,0.055);
  cursor: pointer;
  font-size: 15px;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.playlist-file-button:hover {
  transform: translateY(-1px);
  border-color: rgba(89,217,207,0.42);
  background: rgba(89,217,207,0.12);
}

.playlist-item.flash-added {
  box-shadow:
    inset 0 0 0 1px rgba(89, 217, 207, 0.45),
    0 0 0 2px rgba(89, 217, 207, 0.25),
    0 0 20px rgba(89, 217, 207, 0.18);
}

.playlist-item.flash-duplicate {
  box-shadow:
    inset 0 0 0 1px rgba(255, 90, 90, 0.52),
    0 0 0 2px rgba(255, 90, 90, 0.26),
    0 0 20px rgba(255, 90, 90, 0.16);
}

body.video-expanded-mode .player-main {
  grid-template-columns: minmax(320px, 0.55fr) minmax(920px, 1.45fr) !important;
}

@media (max-width: 1250px) {
  .playlist-file-actions {
    left: auto;
    right: 8px;
    top: 8px;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, 34px);
  }

  .playlist-list {
    padding-top: 48px !important;
  }
}

@media (max-width: 1100px) {
  .player-main,
  .player-dock.playlist-collapsed .player-main,
  body.video-expanded-mode .player-main {
    grid-template-columns: 1fr !important;
  }
}


/* v048 corrections: visible playlist file buttons + title size + safe volume UI */
.player-info strong#playerTitle {
  font-size: clamp(24px, 2.6vw, 34px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
}

.player-main {
  grid-template-columns: minmax(330px, 0.62fr) minmax(720px, 1.38fr) !important;
}

.player-dock.playlist-collapsed .player-main {
  grid-template-columns: minmax(360px, 0.50fr) minmax(860px, 1.50fr) !important;
}

.player-side-actions {
  grid-template-rows: 36px 36px 36px 36px 1fr !important;
  gap: 7px !important;
}

.playlist-file-actions {
  display: none !important;
}

.playlist-file-button {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  color: var(--text) !important;
  background: rgba(255,255,255,0.055) !important;
  cursor: pointer !important;
  font-size: 15px !important;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease !important;
}

.playlist-file-button:hover {
  transform: translateY(-1px);
  border-color: rgba(89,217,207,0.42) !important;
  background: rgba(89,217,207,0.12) !important;
}

@media (max-width: 1250px) {
  .playlist-list {
    padding-top: 6px !important;
  }
}

@media (max-width: 1100px) {
  .player-info strong#playerTitle {
    font-size: clamp(22px, 4vw, 30px) !important;
  }

  .player-main,
  .player-dock.playlist-collapsed .player-main,
  body.video-expanded-mode .player-main {
    grid-template-columns: 1fr !important;
  }
}


/* v049 playlist height + side button fit + volume UI stability */
.player-dock {
  min-height: 142px !important;
  height: 142px !important;
  max-height: 142px !important;
  overflow: hidden !important;
}

.playlist-panel {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

.playlist-list {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

/* Four side buttons must fit inside the 142px dock */
.player-side-actions {
  grid-template-rows: 28px 28px 28px 28px 1fr !important;
  gap: 4px !important;
  align-content: start !important;
}

.player-x-button,
.playlist-toggle-button,
.playlist-file-button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 13px !important;
}

.player-x-button {
  font-size: 16px !important;
}

/* Give the playlist a stable inner scrolling area */
.playlist-panel .playlist-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* In expanded mode the side buttons can remain compact but the player is full height */
body.video-expanded-mode .player-dock {
  height: 100vh !important;
  max-height: none !important;
}

body.video-expanded-mode .playlist-panel {
  height: 100% !important;
  max-height: none !important;
}

/* When no video is loaded and expanded mode opens, make the placeholder look intentional */
body.video-expanded-mode .mini-video-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  background:
    radial-gradient(circle at 25% 0%, rgba(89,217,207,0.16), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(178,53,216,0.16), transparent 42%),
    #05060f;
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 42px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Keep mobile playlist height overrides intact */
@media (max-width: 900px) {
  .player-dock {
    height: auto !important;
    max-height: none !important;
  }

  .player-side-actions {
    grid-template-rows: 28px 28px 28px 28px !important;
  }
}


/* v050 corrections: playlist file buttons placement, height, volume UI, title sizing */

/* Keep the dock a little taller so nothing clips, but still compact */
.player-dock {
  min-height: 152px !important;
  height: 152px !important;
  max-height: 152px !important;
  overflow: visible !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Playlist stays the height of the dock and scrolls internally */
.playlist-panel {
  position: relative !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.playlist-list {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Save/load sit on the LEFT side of the playlist in mini-player mode */
.playlist-file-actions {
  position: absolute !important;
  left: -40px !important;
  right: auto !important;
  top: 4px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  gap: 6px !important;
  z-index: 5 !important;
}

/* Hide save/load when playlist is collapsed */
.player-dock.playlist-collapsed .playlist-file-actions {
  display: none !important;
}

/* File buttons compact enough not to change dock height */
.playlist-file-button {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  color: var(--text) !important;
  background: rgba(255,255,255,0.055) !important;
  cursor: pointer !important;
  font-size: 14px !important;
}

/* Right side actions only close + playlist toggle in mini-player mode */
.player-side-actions {
  grid-template-rows: 30px 30px 1fr !important;
  gap: 6px !important;
  align-content: start !important;
}

.player-x-button,
.playlist-toggle-button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

/* In expanded/full mode, move save/load to the RIGHT side with the other vertical controls */
body.video-expanded-mode .playlist-file-actions {
  position: static !important;
  display: grid !important;
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
}

body.video-expanded-mode .player-side-actions {
  grid-template-rows: 36px 36px 36px 36px 1fr !important;
  gap: 7px !important;
}

body.video-expanded-mode .player-side-actions .playlist-file-button {
  width: 36px !important;
  height: 36px !important;
}

/* In expanded mode, position save/load on the far-right action rail */
body.video-expanded-mode .playlist-panel .playlist-file-actions {
  position: fixed !important;
  right: 28px !important;
  left: auto !important;
  top: 98px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  gap: 7px !important;
  z-index: 1001 !important;
}

/* Force Now Playing title size even after JS injects marquee span */
.player-info strong#playerTitle,
.player-info #playerTitle,
#playerTitle {
  font-size: clamp(24px, 2.6vw, 34px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

#playerTitle .now-playing-title-marquee {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

/* Avoid the older 1250px rule hiding or moving file actions */
@media (max-width: 1250px) {
  .playlist-file-actions {
    left: -38px !important;
    right: auto !important;
    top: 4px !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
  }

  .playlist-list {
    padding-top: 6px !important;
  }
}

@media (max-width: 900px) {
  .player-dock {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .playlist-file-actions {
    left: auto !important;
    right: 8px !important;
    top: 8px !important;
    grid-auto-flow: column !important;
    grid-template-columns: repeat(2, 30px) !important;
  }

  .playlist-list {
    padding-top: 44px !important;
  }
}

@media (max-width: 520px) {
  #playerTitle {
    font-size: clamp(21px, 5vw, 28px) !important;
  }
}

body.video-expanded-mode .player-dock.playlist-collapsed .playlist-panel .playlist-file-actions {
  display: none !important;
}


/* v051 mini-player height + Now Playing title color/scroll fix */

/* Return mini-player closer to the previous compact height */
.player-dock {
  min-height: 142px !important;
  height: 142px !important;
  max-height: 142px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Keep side buttons compact enough for the shorter dock */
.player-side-actions {
  grid-template-rows: 28px 28px 1fr !important;
  gap: 5px !important;
}

.player-x-button,
.playlist-toggle-button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
}

.playlist-file-actions {
  top: 2px !important;
  gap: 5px !important;
}

.playlist-file-button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 13px !important;
}

/* Playlist should again comfortably show around three items */
.playlist-panel {
  height: 100% !important;
  max-height: 100% !important;
}

.playlist-list {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.playlist-play-area {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.playlist-remove-button {
  width: 21px !important;
  height: 21px !important;
}

/* Now Playing title should be bright white and never show ellipsis while scrolling */
.player-info strong#playerTitle,
.player-info #playerTitle,
#playerTitle {
  color: #ffffff !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#playerTitle .now-playing-title-marquee {
  color: #ffffff !important;
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: nowrap !important;
  padding-right: 32px !important;
}

/* Kill any inherited ellipsis behavior on the injected span */
#playerTitle.is-overflowing {
  text-overflow: clip !important;
}

#playerTitle.is-overflowing .now-playing-title-marquee {
  animation: nowPlayingTitleScroll 8.5s linear 0.7s infinite alternate !important;
}

/* Expanded mode keeps full height */
body.video-expanded-mode .player-dock {
  height: 100vh !important;
  max-height: none !important;
  min-height: 100vh !important;
}

body.video-expanded-mode .player-side-actions {
  grid-template-rows: 36px 36px 36px 36px 1fr !important;
  gap: 7px !important;
}

body.video-expanded-mode .player-x-button,
body.video-expanded-mode .playlist-toggle-button,
body.video-expanded-mode .playlist-file-button {
  width: 36px !important;
  height: 36px !important;
}

/* Mobile keeps existing flexible height */
@media (max-width: 900px) {
  .player-dock {
    height: auto !important;
    max-height: none !important;
  }

  .playlist-file-actions {
    top: 8px !important;
  }

  .playlist-list {
    padding-top: 44px !important;
  }
}


/* v052 compact mini-player + title motion + volume icon correction */

/* Shorter dock: matches 16:9 video thumbnail better and avoids black top/bottom gaps */
.player-dock {
  min-height: 126px !important;
  height: 126px !important;
  max-height: 126px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  gap: 12px !important;
}

/* The mini video should be 16:9 inside the shorter dock */
.mini-player-media {
  width: 196px !important;
  max-width: 196px !important;
  aspect-ratio: 16 / 9 !important;
  align-self: center !important;
}

/* Tighten player info/control vertical footprint */
.player-main {
  align-self: center !important;
  gap: 18px !important;
}

.player-info strong#playerTitle,
.player-info #playerTitle,
#playerTitle {
  letter-spacing: 0.006em !important;
}

#playerTitle .now-playing-title-marquee {
  letter-spacing: 0.006em !important;
}

/* Faster Now Playing title scroll */
#playerTitle.is-overflowing .now-playing-title-marquee {
  animation-duration: 5.8s !important;
  animation-delay: 0.35s !important;
}

/* Compact controls slightly to fit the shorter dock */
.transport-row {
  gap: 6px !important;
}

.transport-button {
  width: 34px !important;
  height: 34px !important;
}

.transport-button.primary {
  width: 40px !important;
  height: 40px !important;
}

.volume-button {
  width: 30px !important;
  height: 30px !important;
}

.volume-control {
  padding: 3px 8px 3px 4px !important;
}

.seek-row {
  gap: 8px !important;
}

.time-label {
  font-size: 12px !important;
}

/* Playlist: smaller visible area, closer to 3 items */
.playlist-panel {
  height: 100% !important;
  max-height: 100% !important;
}

.playlist-list {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.playlist-play-area {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.playlist-item {
  min-height: 34px !important;
}

.playlist-item-id {
  font-size: 11px !important;
}

.playlist-item-title {
  font-size: 12px !important;
}

.playlist-remove-button {
  width: 20px !important;
  height: 20px !important;
}

/* Side buttons fit shorter dock */
.player-side-actions {
  grid-template-rows: 26px 26px 1fr !important;
  gap: 5px !important;
}

.player-x-button,
.playlist-toggle-button {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
}

.playlist-file-actions {
  left: -36px !important;
  top: 2px !important;
  gap: 5px !important;
}

.playlist-file-button {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  font-size: 12px !important;
}

/* Expanded mode remains full screen and not affected by compact dock sizing */
body.video-expanded-mode .player-dock {
  height: 100vh !important;
  max-height: none !important;
  min-height: 100vh !important;
  padding: 24px 28px !important;
}

body.video-expanded-mode .mini-player-media {
  width: min(calc(100vw - 56px), calc((100vh - 190px) * 16 / 9)) !important;
  max-width: none !important;
}

body.video-expanded-mode .transport-button {
  width: 38px !important;
  height: 38px !important;
}

body.video-expanded-mode .transport-button.primary {
  width: 46px !important;
  height: 46px !important;
}

body.video-expanded-mode .player-side-actions {
  grid-template-rows: 36px 36px 36px 36px 1fr !important;
  gap: 7px !important;
}

body.video-expanded-mode .player-x-button,
body.video-expanded-mode .playlist-toggle-button,
body.video-expanded-mode .playlist-file-button {
  width: 36px !important;
  height: 36px !important;
}

/* Responsive overrides */
@media (max-width: 1100px) {
  .mini-player-media {
    width: 160px !important;
    max-width: 160px !important;
  }
}

@media (max-width: 900px) {
  .player-dock {
    height: auto !important;
    max-height: none !important;
  }

  .mini-player-media {
    width: 72px !important;
    max-width: 72px !important;
  }

  .playlist-file-actions {
    left: auto !important;
    right: 8px !important;
    top: 8px !important;
  }

  .playlist-list {
    padding-top: 44px !important;
  }
}


/* v053 exact JS-calculated Now Playing marquee */
#playerTitle {
  direction: ltr !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#playerTitle .now-playing-title-marquee {
  display: inline-block !important;
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  transform: translateX(0);
  will-change: transform;
  padding-right: 42px !important;
}

/* Disable all previous marquee rules and use only this exact-distance animation */
#playerTitle.is-overflowing .now-playing-title-marquee {
  animation-name: nowPlayingExactScroll !important;
  animation-duration: var(--now-playing-scroll-duration, 5s) !important;
  animation-timing-function: linear !important;
  animation-delay: 0.35s !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  animation-fill-mode: both !important;
}

@keyframes nowPlayingExactScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--now-playing-scroll-distance, -120px));
  }
}

/* Expanded mode has a different title area, so recalc via JS but keep identical animation direction */
body.video-expanded-mode #playerTitle {
  overflow: hidden !important;
  text-overflow: clip !important;
}

body.video-expanded-mode #playerTitle .now-playing-title-marquee {
  transform: translateX(0);
}


/* v054 constant speed now-playing title scroll */
#playerTitle.is-overflowing .now-playing-title-marquee {
  animation-timing-function: linear !important;
  animation-direction: alternate !important;
}


/* v055 JS-driven constant-speed Now Playing marquee */
#playerTitle.is-overflowing .now-playing-title-marquee {
  animation: none !important;
  transition: none !important;
  will-change: transform;
}

@keyframes nowPlayingExactScroll {
  from { transform: translateX(0); }
  to { transform: translateX(0); }
}

@keyframes nowPlayingTitleScroll {
  from { transform: translateX(0); }
  to { transform: translateX(0); }
}


/* v057: keep the expanded tab video intact when adding to playlist */


/* v058 restore mini-player floating button */
.restore-player-button {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(89, 217, 207, 0.34);
  color: #c9fffb;
  background:
    radial-gradient(circle at 30% 20%, rgba(89, 217, 207, 0.28), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(178, 53, 216, 0.28), transparent 48%),
    rgba(8, 10, 22, 0.92);
  box-shadow:
    0 14px 38px rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,255,255,0.06);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.restore-player-button:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(89, 217, 207, 0.58);
  background:
    radial-gradient(circle at 30% 20%, rgba(89, 217, 207, 0.36), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(178, 53, 216, 0.34), transparent 48%),
    rgba(8, 10, 22, 0.96);
}

.restore-player-button.hidden {
  display: none !important;
}

@media (max-width: 520px) {
  .restore-player-button {
    right: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
    font-size: 24px;
  }
}


/* v059 center the floating restore-player note icon */
.restore-player-button {
  font-size: 0 !important;
}

.restore-player-icon {
  display: inline-block;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 28px;
  line-height: 1;
  transform: translate(1px, -1px);
}

@media (max-width: 520px) {
  .restore-player-icon {
    font-size: 24px;
    transform: translate(1px, -1px);
  }
}


/* v060 raise the floating restore-player note higher */
.restore-player-icon {
  transform: translate(1px, -4px) !important;
}

@media (max-width: 520px) {
  .restore-player-icon {
    transform: translate(1px, -4px) !important;
  }
}


/* v061 exact clickable tags and genre filters */
.genre-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.genre-chip {
  font-size: 13px;
  padding: 8px 12px;
}

.active-tag-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 999px;
  color: #c9fffb;
  background: rgba(89, 217, 207, 0.12);
  border: 1px solid rgba(89, 217, 207, 0.24);
}

.active-tag-filter.hidden {
  display: none !important;
}

.active-tag-filter button {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: #ffd6d6;
  background: rgba(255,255,255,0.06);
  padding: 5px 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.active-tag-filter button:hover {
  background: rgba(255,90,90,0.15);
  border-color: rgba(255,90,90,0.32);
}

.tag-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  vertical-align: middle;
}

.text-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #f5f7ff;
  background: rgba(255,255,255,0.055);
  padding: 3px 8px;
  font: inherit;
  line-height: 1.1;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.text-tag:hover {
  color: #c9fffb;
  background: rgba(89,217,207,0.13);
  border-color: rgba(89,217,207,0.30);
}

.tag-separator {
  color: var(--muted);
  margin: 0 1px;
}

.detail-panel p .text-tag {
  font-size: 0.92em;
}

.player-meta-separator {
  color: var(--muted);
  margin: 0 5px;
}

.mini-tag-list {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.mini-tag-list .text-tag {
  padding: 2px 7px;
  font-size: 12px;
  line-height: 1.1;
}

.player-info #playerMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

body.video-expanded-mode .mini-tag-list .text-tag {
  font-size: 13px;
}

@media (max-width: 700px) {
  .genre-filter-row {
    gap: 6px;
  }

  .genre-chip {
    font-size: 12px;
    padding: 7px 10px;
  }

  .player-info #playerMeta {
    display: none;
  }
}


/* v062 inline clickable artist names in Now Playing title */
.now-playing-title-marquee .tag-list {
  display: inline;
}

.now-playing-title-marquee .text-tag,
.now-playing-artist-inline .text-tag {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  vertical-align: baseline;
}

.now-playing-title-marquee .text-tag:hover,
.now-playing-artist-inline .text-tag:hover {
  color: #c9fffb;
  text-shadow: 0 0 12px rgba(89, 217, 207, 0.35);
  background: transparent;
}

.now-playing-title-marquee .tag-separator {
  color: inherit;
  margin: 0;
}

.artist-title-dash,
.now-playing-song-title {
  color: #ffffff;
}


/* v063 player title refinements */
.now-playing-label {
  display: none !important;
}

.player-title-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.player-type-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.28));
}

.player-type-icon.hidden {
  display: none !important;
}

.player-title-row:has(.player-type-icon.hidden) {
  grid-template-columns: minmax(0, 1fr);
}

.player-title-row #playerTitle {
  min-width: 0;
}

.artist-title-dash {
  display: none !important;
}

.artist-title-gap {
  display: inline;
  white-space: pre;
}

.now-playing-song-title {
  margin-left: 0.12em;
}

/* The title lost the Now Playing label above it, so give it a tiny more breathing room */
.player-info {
  align-self: center;
}

/* In expanded mode, make the type icon a little larger */
body.video-expanded-mode .player-type-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

body.video-expanded-mode .player-title-row {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
}

@media (max-width: 780px) {
  .player-title-row {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }

  .player-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
}


/* v064 prettier player title area */
.player-title-row {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

.player-type-icon {
  width: 54px !important;
  height: 54px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.32));
  transition: transform 150ms ease, filter 150ms ease;
}

.player-type-icon:hover {
  transform: translateY(-1px) scale(1.04);
  filter:
    drop-shadow(0 10px 14px rgba(0,0,0,0.32))
    drop-shadow(0 0 10px rgba(89,217,207,0.25));
}

.player-type-icon.hidden {
  display: none !important;
}

.player-title-row:has(.player-type-icon.hidden) {
  grid-template-columns: minmax(0, 1fr) !important;
}

#playerTitle {
  display: block !important;
}

#playerTitle .now-playing-title-marquee {
  display: inline-grid !important;
  grid-template-rows: auto auto;
  gap: 0;
  align-items: start;
  width: max-content !important;
}

.now-playing-artist-line {
  display: block;
  color: #ffffff;
  font-size: 0.82em;
  line-height: 0.9;
  letter-spacing: 0.01em;
  opacity: 0.96;
}

.now-playing-artist-line .tag-list {
  display: inline;
}

.now-playing-artist-line .text-tag {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.now-playing-artist-line .text-tag:hover {
  color: #c9fffb;
  text-shadow: 0 0 12px rgba(89,217,207,0.35);
}

.now-playing-song-title {
  display: block;
  margin-left: 0 !important;
  color: #ffffff;
  font-size: 1.12em;
  line-height: 0.95;
  letter-spacing: 0.005em;
}

.player-info #playerMeta {
  margin-top: 3px;
  color: var(--muted);
}

.player-remix-id {
  font-size: 0.82em;
  opacity: 0.82;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

.player-meta-separator {
  font-size: 0.82em;
  opacity: 0.65;
}

/* Type tag removed from meta, genre remains clickable but compact */
.mini-tag-list .text-tag {
  padding: 2px 8px;
  font-size: 12px;
}

/* Keep marquee measurements stable with two-line content */
#playerTitle.is-overflowing .now-playing-title-marquee {
  will-change: transform;
}

/* Expanded player: larger combined icon and text */
body.video-expanded-mode .player-title-row {
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 16px !important;
}

body.video-expanded-mode .player-type-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
}

body.video-expanded-mode .now-playing-artist-line {
  font-size: 0.80em;
}

body.video-expanded-mode .now-playing-song-title {
  font-size: 1.18em;
}

/* Mobile */
@media (max-width: 780px) {
  .player-title-row {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .player-type-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .now-playing-artist-line {
    font-size: 0.78em;
  }

  .now-playing-song-title {
    font-size: 1.05em;
  }
}


/* v065 player title consistency + plain genre text tags */

/* Keep artist large and song title smaller in BOTH mini and expanded modes */
.now-playing-artist-line {
  font-size: 1em !important;
  line-height: 0.92 !important;
  letter-spacing: 0.006em !important;
}

.now-playing-song-title {
  font-size: 0.62em !important;
  line-height: 1.05 !important;
  letter-spacing: 0.006em !important;
  opacity: 0.86;
  margin-top: 2px;
}

/* Remove expanded-mode overrides that made song title too large */
body.video-expanded-mode .now-playing-artist-line {
  font-size: 1em !important;
  line-height: 0.92 !important;
}

body.video-expanded-mode .now-playing-song-title {
  font-size: 0.62em !important;
  line-height: 1.05 !important;
}

/* Slightly larger song title than previous mini version, but still clearly secondary */
.player-info strong#playerTitle,
.player-info #playerTitle,
#playerTitle {
  font-size: clamp(25px, 2.8vw, 36px) !important;
}

/* Genre tags in the player meta should look like text, not bubbles */
.player-info #playerMeta .mini-tag-list .text-tag {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.player-info #playerMeta .mini-tag-list .text-tag:hover {
  color: #c9fffb !important;
  text-shadow: 0 0 10px rgba(89, 217, 207, 0.30);
  background: transparent !important;
}

.player-info #playerMeta .tag-separator {
  margin: 0 4px;
  color: var(--muted);
  opacity: 0.8;
}

/* The whole meta line should feel like compact technical info */
.player-info #playerMeta {
  font-family: var(--font-display);
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-top: 5px;
}

.player-remix-id,
.player-meta-separator {
  font-size: inherit !important;
}

/* Keep mini tag list inline and text-like */
.mini-tag-list {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
}

/* Mobile: do not let the title become too huge */
@media (max-width: 780px) {
  #playerTitle {
    font-size: clamp(22px, 5vw, 30px) !important;
  }

  .now-playing-song-title {
    font-size: 0.64em !important;
  }
}


/* v066 lower player icon + uppercase/plain meta/detail tags */

/* Move the type icon slightly lower so it visually anchors artist + title */
.player-type-icon {
  transform: translateY(5px) !important;
}

.player-type-icon:hover {
  transform: translateY(4px) scale(1.04) !important;
}

/* Align the ID with genre text more cleanly */
.player-info #playerMeta {
  align-items: baseline !important;
  margin-top: 7px !important;
}

.player-remix-id {
  display: inline-block;
  transform: translateY(1px);
}

/* Player genre tags: plain uppercase text */
.player-info #playerMeta .tag-genre {
  text-transform: uppercase !important;
}

/* Keep the slash separator visually aligned */
.player-info #playerMeta .tag-separator {
  text-transform: none !important;
  margin: 0 5px !important;
}

/* Opened remix details: Genre, Type, Arranged By, Mixed By as plain uppercase text tags */
.detail-panel .tag-genre,
.detail-panel .tag-type,
.detail-panel .tag-arrangedBy,
.detail-panel .tag-mixedBy {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.detail-panel .tag-genre:hover,
.detail-panel .tag-type:hover,
.detail-panel .tag-arrangedBy:hover,
.detail-panel .tag-mixedBy:hover {
  color: #c9fffb !important;
  background: transparent !important;
  text-shadow: 0 0 10px rgba(89, 217, 207, 0.30);
}

/* Detail separators should not become uppercase or bubble-like */
.detail-panel .tag-separator {
  color: var(--muted);
  margin: 0 5px;
  text-transform: none !important;
}

/* Credit tags can wrap naturally but remain text-like */
.detail-panel p .tag-list {
  gap: 0;
}

/* Expanded mode: same lowered icon feel */
body.video-expanded-mode .player-type-icon {
  transform: translateY(6px) !important;
}

body.video-expanded-mode .player-type-icon:hover {
  transform: translateY(5px) scale(1.04) !important;
}


/* v067 player ID under icon + genre aligned with title text */
.player-title-row {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "icon title"
    "id title" !important;
  gap: 0 14px !important;
  align-items: center !important;
}

.player-type-icon {
  grid-area: icon !important;
  justify-self: center !important;
  align-self: end !important;
  transform: translateY(3px) !important;
}

.player-type-icon:hover {
  transform: translateY(2px) scale(1.04) !important;
}

.player-icon-id {
  grid-area: id;
  justify-self: center;
  align-self: start;
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0.86;
  white-space: nowrap;
}

.player-title-row #playerTitle {
  grid-area: title !important;
  align-self: center !important;
}

/* Genre line starts exactly under artist/title column, not under icon */
.player-info #playerMeta {
  margin-left: 72px !important;
  margin-top: 5px !important;
  align-items: center !important;
}

/* No dot after ID anymore; separators only between genres */
.player-info #playerMeta .player-meta-separator {
  display: none !important;
}

/* Remove old ID styling from player meta */
.player-remix-id {
  display: none !important;
}

/* Genre text remains compact and all-caps */
.player-info #playerMeta .tag-genre {
  text-transform: uppercase !important;
}

/* If there is no icon, align everything normally */
.player-title-row:has(.player-type-icon.hidden) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "title"
    "title" !important;
}

.player-title-row:has(.player-type-icon.hidden) .player-icon-id {
  display: none !important;
}

.player-title-row:has(.player-type-icon.hidden) + #playerMeta,
.player-title-row:has(.player-type-icon.hidden) ~ #playerMeta {
  margin-left: 0 !important;
}

/* Expanded player version */
body.video-expanded-mode .player-title-row {
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 0 16px !important;
}

body.video-expanded-mode .player-type-icon {
  transform: translateY(4px) !important;
}

body.video-expanded-mode .player-type-icon:hover {
  transform: translateY(3px) scale(1.04) !important;
}

body.video-expanded-mode .player-icon-id {
  font-size: 13px;
  margin-top: 5px;
}

body.video-expanded-mode .player-info #playerMeta {
  margin-left: 84px !important;
}

/* Mobile */
@media (max-width: 780px) {
  .player-title-row {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 0 10px !important;
  }

  .player-icon-id {
    font-size: 10px;
    margin-top: 3px;
  }

  .player-info #playerMeta {
    margin-left: 54px !important;
  }
}


/* v068 fine-tune player icon/ID vertical alignment */
.player-title-row {
  align-items: center !important;
}

/* Move the icon/ID group slightly lower and open the gap */
.player-type-icon {
  transform: translateY(8px) !important;
}

.player-type-icon:hover {
  transform: translateY(7px) scale(1.04) !important;
}

.player-icon-id {
  margin-top: 8px !important;
  transform: translateY(7px) !important;
}

/* Expanded player keeps the same visual relationship, just scaled */
body.video-expanded-mode .player-type-icon {
  transform: translateY(9px) !important;
}

body.video-expanded-mode .player-type-icon:hover {
  transform: translateY(8px) scale(1.04) !important;
}

body.video-expanded-mode .player-icon-id {
  margin-top: 9px !important;
  transform: translateY(8px) !important;
}

/* Mobile version slightly softer */
@media (max-width: 780px) {
  .player-type-icon {
    transform: translateY(6px) !important;
  }

  .player-type-icon:hover {
    transform: translateY(5px) scale(1.04) !important;
  }

  .player-icon-id {
    margin-top: 6px !important;
    transform: translateY(5px) !important;
  }
}


/* v069 move icon + ID group lower for better vertical centering */
.player-type-icon {
  transform: translateY(14px) !important;
}

.player-type-icon:hover {
  transform: translateY(13px) scale(1.04) !important;
}

.player-icon-id {
  margin-top: 10px !important;
  transform: translateY(13px) !important;
}

/* expanded player */
body.video-expanded-mode .player-type-icon {
  transform: translateY(15px) !important;
}

body.video-expanded-mode .player-type-icon:hover {
  transform: translateY(14px) scale(1.04) !important;
}

body.video-expanded-mode .player-icon-id {
  margin-top: 11px !important;
  transform: translateY(14px) !important;
}

/* mobile */
@media (max-width: 780px) {
  .player-type-icon {
    transform: translateY(11px) !important;
  }

  .player-type-icon:hover {
    transform: translateY(10px) scale(1.04) !important;
  }

  .player-icon-id {
    margin-top: 8px !important;
    transform: translateY(10px) !important;
  }
}


/* v070 final small lowering of icon + ID group */
.player-type-icon {
  transform: translateY(18px) !important;
}

.player-type-icon:hover {
  transform: translateY(17px) scale(1.04) !important;
}

.player-icon-id {
  transform: translateY(17px) !important;
}

/* expanded player */
body.video-expanded-mode .player-type-icon {
  transform: translateY(19px) !important;
}

body.video-expanded-mode .player-type-icon:hover {
  transform: translateY(18px) scale(1.04) !important;
}

body.video-expanded-mode .player-icon-id {
  transform: translateY(18px) !important;
}

/* mobile */
@media (max-width: 780px) {
  .player-type-icon {
    transform: translateY(14px) !important;
  }

  .player-type-icon:hover {
    transform: translateY(13px) scale(1.04) !important;
  }

  .player-icon-id {
    transform: translateY(13px) !important;
  }
}


/* v071 align genre line with ID text */
.player-info #playerMeta {
  margin-top: 0 !important;
  transform: translateY(17px) !important;
}

body.video-expanded-mode .player-info #playerMeta {
  transform: translateY(18px) !important;
}

@media (max-width: 780px) {
  .player-info #playerMeta {
    transform: translateY(13px) !important;
  }
}


/* v072 fix genre line: align visually with ID text, not below it */
.player-info #playerMeta {
  margin-top: 0 !important;
  transform: translateY(-18px) !important;
}

body.video-expanded-mode .player-info #playerMeta {
  transform: translateY(-20px) !important;
}

@media (max-width: 780px) {
  .player-info #playerMeta {
    transform: translateY(-14px) !important;
  }
}


/* v073 bring genre line back down to align with ID without overlapping title */
.player-info #playerMeta {
  margin-top: 0 !important;
  transform: translateY(-6px) !important;
}

body.video-expanded-mode .player-info #playerMeta {
  transform: translateY(-7px) !important;
}

@media (max-width: 780px) {
  .player-info #playerMeta {
    transform: translateY(-5px) !important;
  }
}


/* v074 move genre line exactly 6px lower than v073 */
.player-info #playerMeta {
  transform: translateY(0px) !important;
}

body.video-expanded-mode .player-info #playerMeta {
  transform: translateY(-1px) !important;
}

@media (max-width: 780px) {
  .player-info #playerMeta {
    transform: translateY(1px) !important;
  }
}


/* v075 batch playlist + compact/collapsible genre filters */
.archive-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.archive-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  color: #f5f7ff;
  background: rgba(255,255,255,0.055);
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.archive-tool-button:hover,
.archive-tool-button.active {
  transform: translateY(-1px);
  color: #c9fffb;
  border-color: rgba(89,217,207,0.34);
  background: rgba(89,217,207,0.12);
}

.add-all-results-button {
  color: #fff7c7;
  border-color: rgba(216,202,69,0.24);
}

.add-all-results-button:hover {
  color: #fff7a9;
  border-color: rgba(216,202,69,0.40);
  background: rgba(216,202,69,0.12);
}

.playlist-plus-icon {
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.12em;
  transform: translateY(-1px);
}

.genre-drawer {
  margin-top: 10px;
  padding: 11px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  max-height: 190px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(89,217,207,0.45) rgba(255,255,255,0.04);
}

.genre-drawer.hidden {
  display: none !important;
}

.genre-drawer::-webkit-scrollbar {
  width: 8px;
}

.genre-drawer::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.035);
  border-radius: 999px;
}

.genre-drawer::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(89,217,207,0.72), rgba(124,92,255,0.62));
  border-radius: 999px;
  border: 2px solid rgba(8,9,20,0.85);
}

.genre-filter-row {
  margin-top: 0 !important;
}

.genre-chip {
  font-size: 12px;
  padding: 7px 10px;
}

.remix-card {
  position: relative;
}

.row-add-playlist-button {
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff7a9;
  background:
    radial-gradient(circle at 30% 20%, rgba(216,202,69,0.18), transparent 42%),
    rgba(255,255,255,0.055);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.10em;
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.remix-card:hover .row-add-playlist-button,
.row-add-playlist-button:focus-visible {
  opacity: 1;
}

.row-add-playlist-button:hover {
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(216,202,69,0.46);
  background:
    radial-gradient(circle at 30% 20%, rgba(216,202,69,0.28), transparent 42%),
    rgba(216,202,69,0.10);
}

.row-add-playlist-button span {
  transform: translateX(-1px);
}

.archive-tool-button.flash-added {
  box-shadow:
    inset 0 0 0 1px rgba(89,217,207,0.42),
    0 0 0 2px rgba(89,217,207,0.20),
    0 0 20px rgba(89,217,207,0.15);
}

.archive-tool-button.flash-duplicate {
  box-shadow:
    inset 0 0 0 1px rgba(255,90,90,0.48),
    0 0 0 2px rgba(255,90,90,0.22),
    0 0 20px rgba(255,90,90,0.13);
}

@media (max-width: 900px) {
  .row-add-playlist-button {
    opacity: 1;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  .remix-summary {
    padding-right: 58px;
  }

  .archive-tool-button {
    font-size: 13px;
    padding: 8px 12px;
  }
}


/* v080 rollback base: restored from v075 */


/* v081 Add to Playlist as first badge in the existing badge group */
.row-add-playlist-button {
  display: none !important;
}

.row-add-playlist-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff7a9;
  background:
    radial-gradient(circle at 30% 20%, rgba(216,202,69,0.18), transparent 42%),
    rgba(255,255,255,0.055);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.row-add-playlist-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(216,202,69,0.46);
  background:
    radial-gradient(circle at 30% 20%, rgba(216,202,69,0.28), transparent 42%),
    rgba(216,202,69,0.10);
}

.row-add-playlist-badge .row-playlist-icon {
  display: inline-block;
  font-size: 12px;
  letter-spacing: -0.10em;
  transform: translate(-1px, -1px);
}

/* Since the button is now part of the badge group, remove the extra absolute-space hacks from v075 */
.remix-card .badges.icon-badges {
  gap: 8px;
}

.remix-summary {
  padding-right: 18px !important;
}

/* Smaller screens: keep the badge but hide text to avoid crowding */
@media (max-width: 1150px) {
  .row-add-playlist-badge {
    width: 38px;
    padding: 0;
  }

  .row-add-playlist-badge span:not(.row-playlist-icon) {
    display: none;
  }
}


/* v082 keep the full badge cluster locked to the right side */
.remix-card {
  position: relative !important;
}

.remix-summary {
  position: relative !important;
  padding-right: 430px !important;
}

/* Undo v081 static-flow behavior and restore right-side badge placement */
.remix-summary .badges.icon-badges,
.remix-card .badges.icon-badges {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  z-index: 5 !important;
  width: auto !important;
  max-width: calc(100% - 520px) !important;
}

/* Add to Playlist remains a normal badge inside that right-side cluster */
.row-add-playlist-badge {
  position: static !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 13px !important;
  white-space: nowrap !important;
}

/* Existing type/tier badges also stay fixed-size in the same cluster */
.remix-summary .badges.icon-badges > * {
  flex: 0 0 auto !important;
}

/* Opened rows do not need the row-level add button because details have one */
.remix-card.open .row-add-playlist-badge {
  display: none !important;
}

/* Medium screens: icon-only add button, still on the right */
@media (max-width: 1250px) {
  .remix-summary {
    padding-right: 300px !important;
  }

  .remix-summary .badges.icon-badges,
  .remix-card .badges.icon-badges {
    max-width: calc(100% - 430px) !important;
  }

  .row-add-playlist-badge {
    width: 38px !important;
    padding: 0 !important;
  }

  .row-add-playlist-badge span:not(.row-playlist-icon) {
    display: none !important;
  }
}

/* Small/mobile layouts can stack naturally */
@media (max-width: 900px) {
  .remix-summary {
    padding-right: 18px !important;
  }

  .remix-summary .badges.icon-badges,
  .remix-card .badges.icon-badges {
    position: static !important;
    transform: none !important;
    max-width: none !important;
    justify-content: flex-start !important;
    margin-top: 10px !important;
  }
}


/* v083 hard layout fix: left content column + right badge column */
.remix-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  width: 100% !important;
  padding-right: 20px !important;
}

.summary-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 118px 118px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.summary-badge-column {
  justify-self: end;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.summary-badge-column .badges.icon-badges,
.remix-summary .summary-badge-column .badges.icon-badges,
.remix-card .summary-badge-column .badges.icon-badges {
  position: static !important;
  inset: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: auto !important;
}

.summary-badge-column .badges.icon-badges > * {
  flex: 0 0 auto !important;
}

.row-add-playlist-badge {
  flex: 0 0 auto !important;
  position: static !important;
  transform: none !important;
}

.remix-card.open .row-add-playlist-badge {
  display: none !important;
}

.row-add-playlist-button {
  display: none !important;
}

@media (max-width: 1250px) {
  .summary-main {
    grid-template-columns: 105px 112px minmax(0, 1fr);
    gap: 16px;
  }

  .row-add-playlist-badge {
    width: 38px !important;
    padding: 0 !important;
  }

  .row-add-playlist-badge span:not(.row-playlist-icon) {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .remix-summary {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .summary-main {
    grid-template-columns: 86px 96px minmax(0, 1fr);
    gap: 12px;
  }

  .summary-badge-column {
    justify-self: start;
  }
}

@media (max-width: 600px) {
  .summary-main {
    grid-template-columns: 76px 82px minmax(0, 1fr);
    gap: 10px;
  }
}


/* v084 direct named grid: date | thumbnail | title | badges */
.remix-summary {
  display: grid !important;
  grid-template-columns: 118px 118px minmax(260px, 1fr) max-content !important;
  grid-template-areas: "date thumb title badges" !important;
  gap: 18px !important;
  align-items: center !important;
  width: 100% !important;
  padding-right: 20px !important;
  position: relative !important;
}

.remix-summary .remix-date {
  grid-area: date !important;
}

.remix-summary .thumbnail-wrap,
.remix-summary .thumbnail,
.remix-summary .remix-thumb,
.remix-summary picture {
  grid-area: thumb !important;
}

.remix-summary .remix-title-block {
  grid-area: title !important;
  min-width: 0 !important;
}

.remix-summary .badges.icon-badges {
  grid-area: badges !important;
  justify-self: end !important;
  align-self: center !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: auto !important;
}

.remix-summary .badges.icon-badges > * {
  flex: 0 0 auto !important;
}

.row-add-playlist-badge {
  position: static !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 34px !important;
  padding: 0 13px !important;
  white-space: nowrap !important;
  transform: none !important;
}

.row-add-playlist-button,
.summary-main,
.summary-badge-column {
  display: none !important;
}

.remix-card.open .row-add-playlist-badge {
  display: none !important;
}

@media (max-width: 1250px) {
  .remix-summary {
    grid-template-columns: 105px 112px minmax(220px, 1fr) max-content !important;
    gap: 16px !important;
  }

  .row-add-playlist-badge {
    width: 38px !important;
    padding: 0 !important;
  }

  .row-add-playlist-badge span:not(.row-playlist-icon) {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .remix-summary {
    grid-template-columns: 86px 96px minmax(0, 1fr) !important;
    grid-template-areas:
      "date thumb title"
      "badges badges badges" !important;
    gap: 12px !important;
    padding-right: 18px !important;
  }

  .remix-summary .badges.icon-badges {
    justify-self: start !important;
  }
}


/* v085 structural fix: Add-to-playlist is a span badge, not a nested button */
.row-add-playlist-badge {
  cursor: pointer !important;
  user-select: none;
}

.row-add-playlist-badge:focus-visible {
  outline: 2px solid rgba(89, 217, 207, 0.65);
  outline-offset: 3px;
}


/* v086 stable playlist badge + cleaner opened details */

/* Keep Add to Playlist always visible, including when the row is expanded */
.row-add-playlist-badge {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.remix-card.open .row-add-playlist-badge {
  display: inline-flex !important;
}

/* The old opened-tab playlist / external buttons are removed; reserve space only if needed later */
.support-action-row {
  display: none !important;
}

/* Opened detail artist tags should be plain clickable text, not bubbles */
.detail-panel .tag-artist {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0.02em !important;
}

.detail-panel .tag-artist:hover {
  color: #c9fffb !important;
  background: transparent !important;
  text-shadow: 0 0 10px rgba(89, 217, 207, 0.30);
}

/* If any previous opened-card rule hides the row badge, override it firmly */
.remix-card.open .summary-badge-column .row-add-playlist-badge,
.remix-card.open .badges.icon-badges .row-add-playlist-badge {
  display: inline-flex !important;
}


/* v087 Add All Matching near result count */
.count-action-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.count-action-line .result-count {
  margin: 0 !important;
}

.add-all-results-button.compact {
  padding: 8px 13px;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .count-action-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .add-all-results-button.compact {
    width: 100%;
  }
}


/* v088 artist parsing rule update:
   comma = different artists; slash = group/member display with space */


/* v089 artist tag presentation:
   comma separates artist items, slash/group-member displays as a space */
.artist-group-space {
  display: inline;
  white-space: pre;
}

.artist-comma-separator {
  margin: 0;
  white-space: pre;
}

/* Keep artist inline title spacing clean in mini/full player */
.now-playing-artist-line .artist-group-space,
.now-playing-artist-inline .artist-group-space {
  white-space: pre;
}

.now-playing-artist-line .artist-comma-separator,
.now-playing-artist-inline .artist-comma-separator {
  margin: 0;
  color: inherit;
}


/* v090 tighten slash/group-member artist spacing */
.artist-group-space {
  display: inline-block !important;
  width: 0.22em !important;
  white-space: normal !important;
}

.now-playing-artist-line .artist-group-space,
.now-playing-artist-inline .artist-group-space {
  display: inline-block !important;
  width: 0.22em !important;
  white-space: normal !important;
}

.detail-panel .artist-group-space {
  display: inline-block !important;
  width: 0.22em !important;
  white-space: normal !important;
}


/* v091 remove extra visual gap between slash-related artist tags in player titles */
.now-playing-artist-line .tag-list,
.now-playing-artist-inline .tag-list,
.now-playing-title-marquee .tag-list {
  display: inline !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

.now-playing-artist-line .text-tag,
.now-playing-artist-inline .text-tag,
.now-playing-title-marquee .text-tag {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  width: auto !important;
  min-width: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  vertical-align: baseline !important;
}

.now-playing-artist-line .artist-group-space,
.now-playing-artist-inline .artist-group-space,
.now-playing-title-marquee .artist-group-space {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 0.12em !important;
  white-space: normal !important;
}

.now-playing-artist-line .artist-comma-separator,
.now-playing-artist-inline .artist-comma-separator,
.now-playing-title-marquee .artist-comma-separator {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: pre !important;
  color: inherit !important;
}


/* v092 remove extra trailing space after artist tags in player titles */
.now-playing-artist-line .text-tag,
.now-playing-artist-inline .text-tag,
.now-playing-title-marquee .text-tag {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* The only space between group/member artist tags should come from this separator */
.now-playing-artist-line .artist-group-space,
.now-playing-artist-inline .artist-group-space,
.now-playing-title-marquee .artist-group-space {
  padding-left: 0.10em !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Comma-separated artists keep comma + one normal space */
.now-playing-artist-line .artist-comma-separator,
.now-playing-artist-inline .artist-comma-separator,
.now-playing-title-marquee .artist-comma-separator {
  padding: 0 !important;
  margin: 0 !important;
}


/* v093 clean artist separators + scroll only artist line */

/* In artist text, clickable tags must behave exactly like normal text */
.detail-panel .tag-artist,
.now-playing-artist-line .tag-artist,
.now-playing-title-marquee .tag-artist,
.now-playing-title-stack .tag-artist {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  vertical-align: baseline !important;
}

/* Kill legacy separator spacing rules from previous versions */
.artist-group-space,
.artist-comma-separator {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
}

/* The player title is a fixed two-line stack. Only the artist line can move. */
#playerTitle .now-playing-title-stack {
  display: grid !important;
  grid-template-rows: auto auto;
  min-width: 0;
  overflow: hidden;
}

#playerTitle .now-playing-artist-line {
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  transform: translateX(0);
  will-change: transform;
}

#playerTitle .now-playing-song-title {
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Disable old whole-title marquee behavior */
#playerTitle .now-playing-title-marquee:not(.now-playing-artist-line) {
  animation: none !important;
  transform: none !important;
}

/* Hover/click behavior for artist tags remains clear */
.detail-panel .tag-artist:hover,
.now-playing-artist-line .tag-artist:hover,
.now-playing-title-stack .tag-artist:hover {
  color: #c9fffb !important;
  text-shadow: 0 0 10px rgba(89, 217, 207, 0.30);
  background: transparent !important;
}

/* Normal comma text now comes from generated text, so no added gaps are needed */
.now-playing-artist-line .tag-list,
.now-playing-title-stack .tag-list,
.detail-panel .tag-list {
  gap: 0 !important;
}


/* v094 restore player title sizing and clean artist separators */

/* Restore the player title block size from before v093 made the artist/title tiny */
.player-info strong#playerTitle,
.player-info #playerTitle,
#playerTitle {
  font-size: clamp(25px, 2.8vw, 36px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.006em !important;
  color: #ffffff !important;
}

/* The outer stack inherits the original player title size */
#playerTitle .now-playing-title-stack {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* Artist large, title smaller, exactly like the intended mini/full player styling */
#playerTitle .now-playing-artist-line {
  font-size: 1em !important;
  line-height: 0.92 !important;
  letter-spacing: 0.006em !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

#playerTitle .now-playing-song-title {
  font-size: 0.62em !important;
  line-height: 1.05 !important;
  letter-spacing: 0.006em !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  opacity: 0.86;
  margin-top: 2px;
}

/* Clean separators. These are real visible spaces, but only one space. */
.artist-group-space {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: pre !important;
}

.artist-comma-separator {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: pre !important;
  color: inherit !important;
}

/* In opened middle-section details, artist separators should show normally */
.detail-panel .artist-group-space,
.detail-panel .artist-comma-separator {
  white-space: pre !important;
  color: inherit !important;
}

/* In mini/full player, same clean spacing without added padding */
.now-playing-artist-line .artist-group-space,
.now-playing-artist-line .artist-comma-separator,
.now-playing-title-stack .artist-group-space,
.now-playing-title-stack .artist-comma-separator {
  white-space: pre !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Artist tag buttons must not add hidden padding/margins */
.detail-panel .tag-artist,
.now-playing-artist-line .tag-artist,
.now-playing-title-stack .tag-artist {
  padding: 0 !important;
  margin: 0 !important;
}

/* Expanded mode uses the same proportions, only naturally larger through #playerTitle */
body.video-expanded-mode #playerTitle .now-playing-artist-line {
  font-size: 1em !important;
}

body.video-expanded-mode #playerTitle .now-playing-song-title {
  font-size: 0.62em !important;
}

/* Mobile safety */
@media (max-width: 780px) {
  #playerTitle {
    font-size: clamp(22px, 5vw, 30px) !important;
  }
}


/* v095 tighten only GROUP / ARTIST separator in mini/full player artist title */
.now-playing-artist-line .artist-group-space,
.now-playing-title-stack .artist-group-space {
  display: inline-block !important;
  width: 0.08em !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
}

/* Keep comma-separated artists normal in mini/full player */
.now-playing-artist-line .artist-comma-separator,
.now-playing-title-stack .artist-comma-separator {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: pre !important;
}


/* v096 compact player-only artist rendering: remove hidden whitespace between GROUP / ARTIST tags */
.now-playing-artist-line .compact-artist-tag {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  vertical-align: baseline !important;
}

.now-playing-artist-line .compact-artist-tag + .artist-group-space,
.now-playing-title-stack .compact-artist-tag + .artist-group-space {
  margin: 0 !important;
  padding: 0 !important;
}

/* Make the group/member separator exactly one tight visual space in the player only */
.now-playing-artist-line .artist-group-space,
.now-playing-title-stack .artist-group-space {
  display: inline !important;
  width: auto !important;
  font-size: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.now-playing-artist-line .artist-group-space::after,
.now-playing-title-stack .artist-group-space::after {
  content: " ";
  font-size: 1rem;
}

/* Keep comma separators normal in the player */
.now-playing-artist-line .artist-comma-separator,
.now-playing-title-stack .artist-comma-separator {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: pre !important;
}


/* v097 final player-only group/member spacing: exactly one real space */
.now-playing-artist-line .artist-group-space,
.now-playing-title-stack .artist-group-space {
  display: none !important;
}

.now-playing-artist-line .artist-group-space::after,
.now-playing-title-stack .artist-group-space::after {
  content: "" !important;
}


/* v102 rollback base: restored from stable v097 */


/* v103 redesigned opened remix detail tab */
.redesigned-details {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 22px;
  align-items: stretch;
  padding: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 12% 0%, rgba(89,217,207,0.08), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(178,53,216,0.08), transparent 38%),
    rgba(2, 4, 12, 0.28);
}

.details-video-section {
  min-width: 0;
  display: grid;
  align-items: start;
}

.redesigned-details .video-frame {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: #05060f;
  box-shadow:
    0 20px 46px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.035);
}

.redesigned-detail-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)),
    rgba(5, 7, 18, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

.detail-hero {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.detail-type-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.32));
}

.detail-title-stack {
  min-width: 0;
}

.detail-id {
  display: inline-block;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.redesigned-detail-panel h4 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.detail-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.detail-tag-grid {
  display: grid;
  gap: 9px;
  padding-top: 4px;
}

.detail-tag-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  min-width: 0;
}

.detail-label {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-tag-list {
  min-width: 0;
  color: #f5f7ff;
  font-size: 14px;
  line-height: 1.45;
}

.detail-tag-list .text-tag {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0.02em !important;
}

.detail-tag-list .text-tag:hover {
  color: #c9fffb !important;
  text-shadow: 0 0 10px rgba(89,217,207,0.30);
}

.detail-tag-list .tag-genre,
.detail-tag-list .tag-type,
.detail-tag-list .tag-arrangedBy,
.detail-tag-list .tag-mixedBy {
  text-transform: uppercase !important;
  letter-spacing: 0.035em !important;
}

.detail-comment {
  padding: 12px 14px;
  border-radius: 16px;
  color: #e8ebff;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.45;
}

.detail-support-card {
  margin-top: auto;
  padding: 15px;
  border-radius: 18px;
  border: 1px solid rgba(89,217,207,0.14);
  background:
    radial-gradient(circle at 16% 0%, rgba(89,217,207,0.12), transparent 40%),
    rgba(255,255,255,0.045);
}

.detail-support-card.is-supporter-remix {
  border-color: rgba(216,202,69,0.20);
  background:
    radial-gradient(circle at 16% 0%, rgba(216,202,69,0.13), transparent 42%),
    rgba(255,255,255,0.045);
}

.support-eyebrow {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-support-card strong {
  display: block;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.01em;
}

.detail-support-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .redesigned-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .redesigned-details {
    padding: 12px;
    gap: 14px;
  }

  .redesigned-detail-panel {
    padding: 14px;
    border-radius: 18px;
  }

  .detail-hero {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
  }

  .detail-type-icon {
    width: 42px;
    height: 42px;
  }

  .detail-tag-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}


/* v104 row type icon between thumbnail and title, remove right-side type badge */
.remix-summary {
  grid-template-columns: 118px 118px 54px minmax(260px, 1fr) max-content !important;
  grid-template-areas: "date thumb typeicon title badges" !important;
}

.row-type-icon-wrap {
  grid-area: typeicon;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  justify-self: center;
  align-self: center;
}

.row-type-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.28));
  transition: transform 150ms ease, filter 150ms ease;
}

.remix-card:hover .row-type-icon {
  transform: translateY(-1px) scale(1.035);
  filter:
    drop-shadow(0 8px 12px rgba(0,0,0,0.28))
    drop-shadow(0 0 8px rgba(89,217,207,0.16));
}

/* With the type badge removed, the right group is cleaner */
.remix-summary .badges.icon-badges {
  gap: 8px !important;
}

/* Keep Add to Playlist + Tier aligned on the right */
.row-add-playlist-badge {
  flex: 0 0 auto !important;
}

@media (max-width: 1250px) {
  .remix-summary {
    grid-template-columns: 105px 112px 48px minmax(220px, 1fr) max-content !important;
    gap: 15px !important;
  }

  .row-type-icon-wrap {
    width: 44px;
    height: 44px;
  }

  .row-type-icon {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 900px) {
  .remix-summary {
    grid-template-columns: 86px 96px 42px minmax(0, 1fr) !important;
    grid-template-areas:
      "date thumb typeicon title"
      "badges badges badges badges" !important;
    gap: 12px !important;
  }

  .row-type-icon-wrap {
    width: 38px;
    height: 38px;
  }

  .row-type-icon {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 600px) {
  .remix-summary {
    grid-template-columns: 76px 82px 34px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .row-type-icon-wrap {
    width: 32px;
    height: 32px;
  }

  .row-type-icon {
    width: 30px;
    height: 30px;
  }
}


/* v105 experimental player-like remix row layout */
.remix-summary.remix-summary-playerish {
  grid-template-columns: 230px 76px minmax(260px, 1fr) max-content !important;
  grid-template-areas: "thumb typestack title badges" !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  min-height: 126px;
}

.remix-summary-playerish .remix-thumb {
  grid-area: thumb;
  width: 100%;
  max-width: 230px;
  height: 100px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 14px 26px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.025);
}

.remix-summary-playerish .remix-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remix-summary-playerish .remix-date,
.remix-summary-playerish .row-type-icon-wrap {
  display: none !important;
}

.row-player-type-stack {
  grid-area: typestack;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 68px;
}

.row-type-icon.large {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.28));
}

.row-id-playerish {
  color: #c9d4f2;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}

.row-date-playerish {
  color: rgba(207,218,246,0.56);
  font-size: 10px;
  line-height: 1;
  text-align: center;
  display: none;
}

.remix-title-playerish {
  grid-area: title;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.remix-title-playerish h3.row-artist-line {
  margin: 0;
  color: #f3f6ff;
  font-family: var(--font-display);
  font-size: clamp(28px, 2vw, 42px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.remix-title-playerish h4.row-song-line {
  margin: 0;
  color: #b7bbd7;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.2vw, 24px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  font-weight: 800;
}

.remix-title-playerish p.row-meta-line {
  margin: 5px 0 0;
  color: #b4bdd9;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.row-actions-playerish {
  grid-area: badges;
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px !important;
  flex-wrap: wrap;
}

.row-actions-playerish .row-add-playlist-badge {
  order: -1;
}

@media (max-width: 1250px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 200px 68px minmax(220px, 1fr) max-content !important;
    gap: 14px !important;
    min-height: 116px;
  }

  .remix-summary-playerish .remix-thumb {
    max-width: 200px;
    height: 88px;
  }

  .row-type-icon.large {
    width: 42px;
    height: 42px;
  }

  .remix-title-playerish h3.row-artist-line {
    font-size: clamp(24px, 1.8vw, 36px);
  }

  .remix-title-playerish h4.row-song-line {
    font-size: clamp(15px, 1.05vw, 20px);
  }
}

@media (max-width: 980px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 150px 56px minmax(0, 1fr);
    grid-template-areas:
      "thumb typestack title"
      "badges badges badges" !important;
    gap: 12px !important;
    min-height: auto;
  }

  .remix-summary-playerish .remix-thumb {
    max-width: 150px;
    height: 84px;
  }

  .row-actions-playerish {
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 120px 48px minmax(0, 1fr);
    gap: 10px !important;
    padding: 10px !important;
  }

  .remix-summary-playerish .remix-thumb {
    max-width: 120px;
    height: 68px;
    border-radius: 16px;
  }

  .row-type-icon.large {
    width: 34px;
    height: 34px;
  }

  .row-id-playerish {
    font-size: 10px;
  }

  .remix-title-playerish h3.row-artist-line {
    font-size: 22px;
  }

  .remix-title-playerish h4.row-song-line {
    font-size: 14px;
  }

  .remix-title-playerish p.row-meta-line {
    font-size: 11px;
  }
}


/* v106 restore row rendering after experimental v105 layout */
.row-add-playlist-badge {
  cursor: pointer;
}


/* v107 compact player-like rows: artist and title in one line */
.remix-summary.remix-summary-playerish {
  min-height: 104px !important;
  padding: 10px 14px !important;
  grid-template-columns: 200px 68px minmax(260px, 1fr) max-content !important;
  gap: 16px !important;
}

.remix-summary-playerish .remix-thumb {
  max-width: 200px !important;
  height: 82px !important;
  border-radius: 18px !important;
}

.row-player-type-stack {
  gap: 5px !important;
  min-width: 62px !important;
}

.row-type-icon.large {
  width: 42px !important;
  height: 42px !important;
}

.row-id-playerish {
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}

.remix-title-playerish {
  gap: 4px !important;
}

.remix-title-playerish h3.row-title-line {
  margin: 0;
  color: #f3f6ff;
  font-family: var(--font-display);
  font-size: clamp(23px, 1.65vw, 34px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 900;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remix-title-playerish p.row-meta-line {
  margin: 3px 0 0 !important;
  font-size: 12px !important;
}

/* Hide old split-line classes if any older CSS still targets them */
.remix-title-playerish h3.row-artist-line,
.remix-title-playerish h4.row-song-line {
  display: none !important;
}

@media (max-width: 1250px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 178px 62px minmax(220px, 1fr) max-content !important;
    min-height: 96px !important;
    gap: 13px !important;
  }

  .remix-summary-playerish .remix-thumb {
    max-width: 178px !important;
    height: 76px !important;
  }

  .row-type-icon.large {
    width: 38px !important;
    height: 38px !important;
  }

  .remix-title-playerish h3.row-title-line {
    font-size: clamp(21px, 1.55vw, 30px);
  }
}

@media (max-width: 980px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 145px 52px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb typestack title"
      "badges badges badges" !important;
    min-height: auto !important;
  }

  .remix-summary-playerish .remix-thumb {
    max-width: 145px !important;
    height: 74px !important;
  }

  .remix-title-playerish h3.row-title-line {
    font-size: 22px;
  }
}

@media (max-width: 680px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 112px 42px minmax(0, 1fr) !important;
    padding: 9px !important;
    gap: 8px !important;
  }

  .remix-summary-playerish .remix-thumb {
    max-width: 112px !important;
    height: 62px !important;
    border-radius: 15px !important;
  }

  .row-type-icon.large {
    width: 30px !important;
    height: 30px !important;
  }

  .row-id-playerish {
    font-size: 9px !important;
  }

  .remix-title-playerish h3.row-title-line {
    font-size: 18px;
  }

  .remix-title-playerish p.row-meta-line {
    font-size: 10px !important;
  }
}


/* v108 true 16:9 row thumbnails, no crop */
.remix-summary-playerish .remix-thumb {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  width: 200px !important;
  max-width: 200px !important;
}

.remix-summary-playerish .remix-thumb img,
.remix-summary-playerish .remix-thumb picture,
.remix-summary-playerish .remix-thumb source {
  object-fit: contain !important;
}

.remix-summary-playerish .remix-thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: #05060f;
}

@media (max-width: 1250px) {
  .remix-summary-playerish .remix-thumb {
    width: 178px !important;
    max-width: 178px !important;
    height: auto !important;
  }
}

@media (max-width: 980px) {
  .remix-summary-playerish .remix-thumb {
    width: 145px !important;
    max-width: 145px !important;
    height: auto !important;
  }
}

@media (max-width: 680px) {
  .remix-summary-playerish .remix-thumb {
    width: 112px !important;
    max-width: 112px !important;
    height: auto !important;
  }
}


/* v109 tighter thumbnails and swapped ID/type labels */

/* Remove the oversized black frame around thumbnails */
.remix-summary-playerish .remix-thumb {
  width: 200px !important;
  max-width: 200px !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.02) !important;
}

.remix-summary-playerish .remix-thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  background: transparent !important;
  border-radius: inherit !important;
}

/* Some branches use thumbnail-wrap/thumb classes: keep them tight too */
.remix-summary-playerish .thumbnail-wrap,
.remix-summary-playerish .thumbnail {
  padding: 0 !important;
  background: transparent !important;
}

/* Reduce row height now that the thumbnail frame is gone */
.remix-summary.remix-summary-playerish {
  min-height: 92px !important;
  padding: 9px 14px !important;
  grid-template-columns: 200px 72px minmax(260px, 1fr) max-content !important;
  gap: 16px !important;
}

/* Type text now sits under the type icon */
.row-player-type-stack {
  gap: 5px !important;
}

.row-type-label-playerish {
  color: #c9d4f2;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-align: center;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ID now sits under the title area */
.row-id-inline {
  color: #c9d4f2;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.045em;
}

.row-id-playerish {
  display: none !important;
}

.row-meta-dot {
  opacity: 0.6;
  margin: 0 5px;
}

/* Meta line now contains ID + Genre only */
.remix-title-playerish p.row-meta-line {
  margin-top: 4px !important;
}

/* Responsive thumbnail widths remain 16:9 and tight */
@media (max-width: 1250px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 178px 66px minmax(220px, 1fr) max-content !important;
    min-height: 86px !important;
    gap: 13px !important;
  }

  .remix-summary-playerish .remix-thumb {
    width: 178px !important;
    max-width: 178px !important;
  }

  .row-type-label-playerish {
    max-width: 66px;
    font-size: 10px;
  }
}

@media (max-width: 980px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 145px 56px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb typestack title"
      "badges badges badges" !important;
    min-height: auto !important;
  }

  .remix-summary-playerish .remix-thumb {
    width: 145px !important;
    max-width: 145px !important;
  }

  .row-type-label-playerish {
    max-width: 56px;
  }
}

@media (max-width: 680px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 112px 44px minmax(0, 1fr) !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  .remix-summary-playerish .remix-thumb {
    width: 112px !important;
    max-width: 112px !important;
    border-radius: 13px !important;
  }

  .row-type-label-playerish {
    max-width: 44px;
    font-size: 8px;
  }
}


/* v110 compact rows: thumbnail height 70px + date in subline */
.remix-summary.remix-summary-playerish {
  min-height: 82px !important;
  padding: 7px 14px !important;
  grid-template-columns: 124px 66px minmax(260px, 1fr) max-content !important;
  gap: 14px !important;
}

.remix-summary-playerish .remix-thumb {
  width: 124px !important;
  max-width: 124px !important;
  height: 70px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 14px !important;
}

.remix-summary-playerish .remix-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.row-type-icon.large {
  width: 36px !important;
  height: 36px !important;
}

.row-type-label-playerish {
  font-size: 10px !important;
  max-width: 66px !important;
}

.remix-title-playerish h3.row-title-line {
  font-size: clamp(21px, 1.45vw, 30px) !important;
  line-height: 0.98 !important;
}

.remix-title-playerish p.row-meta-line {
  margin-top: 3px !important;
  font-size: 11px !important;
}

.row-date-inline {
  color: #aeb8d7;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.045em;
}

.row-id-inline {
  color: #c9d4f2;
}

/* keep right-side badges vertically centered in the smaller row */
.row-actions-playerish {
  align-self: center !important;
}

/* responsive compact row */
@media (max-width: 1250px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 124px 60px minmax(220px, 1fr) max-content !important;
    min-height: 82px !important;
    gap: 12px !important;
  }

  .remix-summary-playerish .remix-thumb {
    width: 124px !important;
    max-width: 124px !important;
    height: 70px !important;
  }

  .row-type-icon.large {
    width: 34px !important;
    height: 34px !important;
  }

  .row-type-label-playerish {
    max-width: 60px !important;
    font-size: 9px !important;
  }

  .remix-title-playerish h3.row-title-line {
    font-size: clamp(20px, 1.35vw, 28px) !important;
  }
}

@media (max-width: 980px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 124px 54px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb typestack title"
      "badges badges badges" !important;
    min-height: auto !important;
  }

  .remix-summary-playerish .remix-thumb {
    width: 124px !important;
    max-width: 124px !important;
    height: 70px !important;
  }
}

@media (max-width: 680px) {
  .remix-summary.remix-summary-playerish {
    grid-template-columns: 106px 42px minmax(0, 1fr) !important;
    padding: 7px !important;
    gap: 7px !important;
  }

  .remix-summary-playerish .remix-thumb {
    width: 106px !important;
    max-width: 106px !important;
    height: 60px !important;
    border-radius: 12px !important;
  }

  .row-type-icon.large {
    width: 28px !important;
    height: 28px !important;
  }

  .row-type-label-playerish {
    max-width: 42px !important;
    font-size: 8px !important;
  }

  .remix-title-playerish h3.row-title-line {
    font-size: 17px !important;
  }

  .remix-title-playerish p.row-meta-line {
    font-size: 9px !important;
  }
}


/* v111 compact title + two-line row metadata */
.remix-title-playerish h3.row-title-line {
  font-size: clamp(19px, 1.28vw, 27px) !important;
  letter-spacing: 0.005em !important;
  line-height: 1.02 !important;
}

.remix-title-playerish {
  gap: 2px !important;
}

.remix-title-playerish p.row-meta-line {
  margin: 0 !important;
  line-height: 1.05 !important;
}

.row-date-id-line {
  color: #aeb8d7 !important;
  font-size: 10px !important;
  letter-spacing: 0.055em !important;
}

.row-genre-line {
  color: #c2cae3 !important;
  font-size: 11px !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase;
}

.row-date-inline,
.row-id-inline {
  color: inherit !important;
}

@media (max-width: 1250px) {
  .remix-title-playerish h3.row-title-line {
    font-size: clamp(18px, 1.2vw, 25px) !important;
  }

  .row-date-id-line {
    font-size: 9.5px !important;
  }

  .row-genre-line {
    font-size: 10.5px !important;
  }
}

@media (max-width: 680px) {
  .remix-title-playerish h3.row-title-line {
    font-size: 16px !important;
  }

  .row-date-id-line {
    font-size: 8.5px !important;
  }

  .row-genre-line {
    font-size: 9px !important;
  }
}


/* v112 second subline shows genre only */


/* v113 switch row sublines: genre first, date + ID second */
.row-genre-line {
  margin-top: 4px !important;
}

.row-date-id-line {
  margin-top: 1px !important;
  opacity: 0.82;
}

.row-date-inline {
  margin-right: 7px;
}


/* v114 top-left logo: white box + black Areia bird icon */
.brand-mark,
.logo-mark,
.site-mark,
.nav-logo {
  background: #ffffff !important;
  color: transparent !important;
  border-color: rgba(255,255,255,0.42) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 0 0 1px rgba(0,0,0,0.045) !important;
  overflow: hidden;
  display: grid !important;
  place-items: center !important;
}

.brand-bird-logo {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
  object-position: center;
}

/* If the original AR text remains as fallback somewhere, visually hide it when image exists */
.brand-mark:has(.brand-bird-logo),
.logo-mark:has(.brand-bird-logo),
.site-mark:has(.brand-bird-logo),
.nav-logo:has(.brand-bird-logo) {
  font-size: 0 !important;
}


/* v115 custom Areia type tooltips */
.custom-type-tooltip-trigger {
  position: relative;
  outline: none;
}

.row-type-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 60;
  width: min(280px, 74vw);
  transform: translate(-50%, 8px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  padding: 13px 15px 14px;
  border-radius: 18px;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 18px 38px rgba(0,0,0,0.36),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.row-type-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -7px) rotate(45deg);
  border-right: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  background: inherit;
}

.custom-type-tooltip-trigger:hover .row-type-tooltip,
.custom-type-tooltip-trigger:focus-visible .row-type-tooltip {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.row-type-tooltip strong {
  display: block;
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.row-type-tooltip span {
  display: block;
  color: rgba(255,255,255,0.88);
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* Type color themes */
.type-tooltip-evolution {
  background:
    radial-gradient(circle at 18% 0%, rgba(89,217,207,0.38), transparent 48%),
    linear-gradient(135deg, rgba(28,107,117,0.95), rgba(28,53,92,0.92));
}

.type-tooltip-signature {
  background:
    radial-gradient(circle at 18% 0%, rgba(216,202,69,0.36), transparent 48%),
    linear-gradient(135deg, rgba(93,82,37,0.96), rgba(48,44,34,0.92));
}

.type-tooltip-legacy {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,74,137,0.36), transparent 48%),
    linear-gradient(135deg, rgba(117,38,72,0.96), rgba(48,24,43,0.94));
}

.type-tooltip-underground {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,74,137,0.30), transparent 48%),
    linear-gradient(135deg, rgba(96,35,63,0.96), rgba(32,23,43,0.94));
}

.type-tooltip-b-side {
  background:
    radial-gradient(circle at 18% 0%, rgba(67,134,255,0.35), transparent 48%),
    linear-gradient(135deg, rgba(35,70,132,0.96), rgba(21,36,72,0.94));
}

.type-tooltip-mashup-megamix {
  background:
    radial-gradient(circle at 18% 0%, rgba(67,134,255,0.32), transparent 48%),
    linear-gradient(135deg, rgba(31,73,126,0.96), rgba(28,45,90,0.94));
}

.type-tooltip-remaster {
  background:
    radial-gradient(circle at 18% 0%, rgba(178,53,216,0.36), transparent 48%),
    linear-gradient(135deg, rgba(93,38,128,0.96), rgba(44,25,75,0.94));
}

.type-tooltip-parallel {
  background:
    radial-gradient(circle at 18% 0%, rgba(178,53,216,0.34), transparent 48%),
    linear-gradient(135deg, rgba(89,37,124,0.96), rgba(39,25,72,0.94));
}

.type-tooltip-global-wave {
  background:
    radial-gradient(circle at 18% 0%, rgba(35,188,255,0.30), transparent 48%),
    linear-gradient(135deg, rgba(44,76,156,0.96), rgba(92,34,130,0.94));
}

/* Avoid clipping the tooltip inside row/list containers */
.remix-card,
.remix-summary,
.remix-list,
#remixList {
  overflow: visible !important;
}

@media (max-width: 700px) {
  .row-type-tooltip {
    left: 0;
    transform: translate(0, 8px) scale(0.96);
  }

  .custom-type-tooltip-trigger:hover .row-type-tooltip,
  .custom-type-tooltip-trigger:focus-visible .row-type-tooltip {
    transform: translate(0, 0) scale(1);
  }

  .row-type-tooltip::after {
    left: 24px;
  }
}


/* v116 sorting controls */
.sort-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  flex-wrap: wrap;
}

.sort-label {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sort-select {
  min-width: 260px;
  max-width: 100%;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.13);
  color: #f5f7ff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.045)),
    rgba(10, 12, 28, 0.88);
  padding: 0 40px 0 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

.sort-select:hover,
.sort-select:focus {
  border-color: rgba(89,217,207,0.38);
  box-shadow:
    0 0 0 3px rgba(89,217,207,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.035);
}

.sort-select option {
  background: #121429;
  color: #f5f7ff;
}

@media (max-width: 640px) {
  .sort-control-row {
    align-items: stretch;
    flex-direction: column;
  }

  .sort-select {
    width: 100%;
    min-width: 0;
  }
}

/* v117 sorting loading fix */