:root {
  color-scheme: dark;
  --bg: #050505;
  --bg-soft: #0d0d0d;
  --surface: rgba(10, 10, 10, 0.78);
  --surface-strong: rgba(18, 18, 18, 0.9);
  --surface-soft: rgba(255, 255, 255, 0.04);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #ffffff;
  --muted: #a7a7ad;
  --muted-strong: #dddddf;
  --accent: #ffffff;
  --accent-soft: rgba(255, 255, 255, 0.12);
  --danger: #f46f6f;
  --lastfm: #ff5541;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "SF Pro Display", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.site-backdrop,
.site-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.site-backdrop {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 38%),
    url("/archive-wallpaper.png?v=20260717-1") center/cover no-repeat;
  opacity: 0.58;
}
.site-overlay {
  background:
    linear-gradient(to top, #050505 0%, rgba(5, 5, 5, 0.94) 18%, rgba(5, 5, 5, 0.58) 58%, rgba(5, 5, 5, 0.18) 100%);
}

.site-header,
.tabs,
main,
.site-footer,
.floating-player,
.full-player,
.media-modal,
.toast { position: relative; z-index: 1; }

.site-header {
  padding: 24px 20px 10px;
  display: flex;
  justify-content: center;
}

.static-catalog-notice {
  position: relative;
  z-index: 3;
  width: min(760px, calc(100% - 32px));
  margin: 16px auto 0;
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  border: 1px solid rgba(255, 194, 79, .42);
  border-radius: 14px;
  opacity: 1 !important;
  background: #2e1d08;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.static-catalog-notice strong { color: #ffd17a; white-space: nowrap; }
.static-catalog-notice time { color: #fff; font-weight: 700; }
@media (max-width: 600px) {
  .static-catalog-notice { align-items: center; flex-direction: column; gap: 2px; }
  .static-catalog-notice strong { white-space: normal; }
}
.brand {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 26px rgba(255, 255, 255, 0.22))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
}

.tabs {
  position: sticky;
  top: 12px;
  z-index: 20;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0 auto;
  padding: 6px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(12, 12, 12, 0.8);
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.24);
}
.tabs::-webkit-scrollbar,
.file-buttons::-webkit-scrollbar,
.filter-row::-webkit-scrollbar,
.date-row::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.tab:hover { color: var(--text); transform: translateY(-1px); }
.tab.active { background: var(--accent); color: #090909; }
.admin-tab {
  margin-left: 8px;
  opacity: 0.34;
  padding-inline: 10px;
}
.admin-tab:hover,
.admin-tab.active { opacity: 1; }

main {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0 54px;
}
.panel { display: none; }
.panel.active { display: block; }

@keyframes tab-panel-enter-forward {
  from { opacity: 0; transform: translateX(42px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tab-panel-enter-backward {
  from { opacity: 0; transform: translateX(-42px); }
  to { opacity: 1; transform: translateX(0); }
}

.panel.active.tab-transition-forward {
  animation: tab-panel-enter-forward 260ms cubic-bezier(.22, .8, .22, 1);
}

.panel.active.tab-transition-backward {
  animation: tab-panel-enter-backward 260ms cubic-bezier(.22, .8, .22, 1);
}

@media (prefers-reduced-motion: reduce) {
  .panel.active.tab-transition-forward,
  .panel.active.tab-transition-backward { animation: none; }
}

.hero {
  max-width: 920px;
  margin: 0 auto 34px;
  text-align: center;
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
}
.hero h1 {
  margin: 0;
  font-family: Inter, "SF Pro Display", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(42px, 7.4vw, 82px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.058em;
  text-align: center;
}
.section-title h1 {
  margin: 0;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(40px, 7vw, 70px);
  line-height: 1.02;
  letter-spacing: 0;
}
.hero > p:last-child {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.search-form {
  width: min(860px, 100%);
  min-height: 68px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background: rgba(8, 8, 8, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}
.search-form:focus-within { border-color: rgba(255, 255, 255, 0.5); }
.search-form svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  flex: none;
}
.search-form input,
.compact-search,
.builder-input,
.builder-textarea,
.admin-inline-input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}
.search-form input {
  min-width: 0;
  flex: 1;
  font-size: 16px;
}
.search-form input::placeholder,
.compact-search::placeholder,
.builder-input::placeholder,
.builder-textarea::placeholder,
.admin-inline-input::placeholder,
.advanced-filter-grid input::placeholder { color: rgba(255, 255, 255, 0.42); }

.filter-row,
.date-row,
.advanced-filter-toggle-row,
.archive-date-row {
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.text-filter {
  border: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.text-filter:hover { color: var(--text); }
.text-filter.active { background: var(--accent-soft); color: var(--accent); }
.advanced-toggle {
  border: 0;
  background: transparent;
}
.advanced-toggle:hover,
.advanced-toggle.active {
  background: var(--accent-soft);
  color: var(--text);
}
.date-row > span {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
}
select {
  min-width: 98px;
  height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  appearance: none;
  background-color: rgba(12, 12, 12, 0.82);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--text);
  cursor: pointer;
}
select option { background: #101010; color: var(--text); }

.advanced-filters {
  width: min(860px, 100%);
  margin: 14px auto 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(5, 5, 5, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}
.genius-phrase-search {
  width: min(860px, 100%);
  margin: 14px auto 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(5, 5, 5, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}
.genius-phrase-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.genius-phrase-search-head strong { display: block; font-size: 15px; }
.genius-phrase-search-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.genius-phrase-form {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.genius-phrase-form input {
  min-width: 0;
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: 0;
  background: rgba(0, 0, 0, 0.42);
  color: var(--text);
  font: inherit;
}
.genius-phrase-form input:focus { border-color: var(--line-strong); }
.genius-phrase-status {
  min-height: 18px;
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.genius-phrase-external { width: fit-content; margin: 0 0 13px; }
.genius-phrase-results { display: grid; gap: 9px; }
.genius-phrase-group-title {
  margin: 16px 0 0;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.genius-phrase-group-title:first-child { margin-top: 0; }
.genius-phrase-result {
  display: block;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  text-decoration: none;
}
.genius-phrase-result:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.065); }
.genius-phrase-result strong { display: block; font-size: 14px; }
.genius-phrase-result span { display: block; margin-top: 2px; color: var(--muted-strong); font-size: 12px; }
.genius-phrase-result p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.song-lyrics-offer {
  width: min(100%, 620px);
  margin: 26px auto 2px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.song-lyrics-offer > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.song-lyrics-offer h2 { margin: 8px 0 0; font-size: clamp(21px, 3vw, 27px); }
.song-lyrics-offer p { margin: 8px auto 19px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.song-lyrics-offer p strong { color: var(--text); font-weight: 650; }
.song-lyrics-offer .primary-button { min-height: 50px; padding-inline: 24px; font-size: 14px; }
section[data-extras-view][hidden] { display: none !important; }
.card-collapse-handle,
.song-card:not(.is-collapsed) .song-head { cursor: pointer; }
.card-collapse-handle:hover,
.song-card:not(.is-collapsed) .song-head:hover { opacity: 0.82; }
@media (max-width: 560px) {
  .genius-phrase-search-head,
  .genius-phrase-form { align-items: stretch; flex-direction: column; }
  .genius-phrase-search-head .soft-button { align-self: flex-end; }
}
.advanced-filters-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.advanced-filters-top strong {
  display: block;
  font-size: 15px;
  text-align: center;
}
.advanced-filters-top span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.advanced-filter-actions {
  position: absolute;
  right: 0;
  display: flex;
  gap: 8px;
}
.advanced-filter-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.advanced-filter-grid input {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: 0;
  background: rgba(0, 0, 0, 0.42);
  color: var(--text);
  text-align: center;
  font-weight: 500;
}
.suggestion-field {
  position: relative;
  min-width: 0;
}
.suggestion-field > input { width: 100%; }
.suggestion-menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 250px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(8, 8, 8, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(20px);
}
.suggestion-menu button {
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted-strong);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.suggestion-menu button:hover,
.suggestion-menu button:focus-visible {
  color: white;
  background: rgba(255, 255, 255, 0.08);
  outline: 0;
}
.advanced-date-grid {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.advanced-date-row,
.archive-date-row {
  display: grid;
  grid-template-columns: 116px repeat(3, minmax(92px, 1fr));
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}
.archive-date-row {
  width: fit-content;
  max-width: 100%;
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(18px);
}
.advanced-date-row > span,
.archive-date-row > span {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.advanced-date-row select,
.archive-date-row select {
  width: auto;
  min-width: 0;
  border-radius: 999px;
  border-color: transparent;
  background-color: transparent;
}
.archive-date-row select:hover,
.archive-date-row select:focus {
  border-color: var(--line-strong);
  background-color: rgba(255, 255, 255, 0.08);
}

.result-head,
.section-status {
  min-height: 24px;
  margin: 26px 2px 12px;
}
.result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.result-head p,
.section-status {
  color: var(--muted);
  font-size: 12px;
}
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--accent);
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.song-grid,
.media-grid,
.playlist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.song-grid { grid-template-columns: 1fr; }
.song-grid.single-result,
.media-grid.single-result,
.playlist-grid.single-result,
.session-grid.single-result {
  grid-template-columns: minmax(0, min(100%, 980px));
  justify-content: center;
}
.media-grid.single-result {
  grid-template-columns: minmax(0, min(100%, 860px));
}
.session-grid.single-result {
  grid-template-columns: minmax(0, min(100%, 560px));
}
.song-grid.single-result .song-card {
  grid-template-columns: minmax(0, 1fr);
}
.song-card,
.media-card,
.session-card,
.playlist-card,
.playlist-builder,
.admin-card,
.playlist-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.song-card {
  --era-a: rgba(255, 255, 255, 0.12);
  --era-b: rgba(255, 255, 255, 0.03);
  --song-art: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 3.2vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-height: 420px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--era-a) 52%, transparent), color-mix(in srgb, var(--era-b) 48%, transparent)),
    var(--surface);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.song-card:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-strong); }
.song-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(90deg, rgba(3, 3, 3, 0.97) 0%, rgba(3, 3, 3, 0.82) 48%, rgba(3, 3, 3, 0.3) 100%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--era-a) 58%, transparent) 0%, color-mix(in srgb, var(--era-b) 30%, transparent) 28%, transparent 58%),
    var(--song-art);
  background-size: 58% 100%;
  background-repeat: no-repeat;
  background-position: center, center, right center;
  opacity: 0.95;
}
.song-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.36));
  pointer-events: none;
}
.song-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.song-head h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -0.045em;
}
.song-head p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.song-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.song-tag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.status-flair.released {
  border-color: var(--line-strong);
  color: var(--muted-strong);
}
.status-flair.unreleased {
  border-color: var(--line-strong);
  color: var(--muted-strong);
}
.status-flair.unsurfaced {
  border-color: var(--line-strong);
  color: var(--muted-strong);
}
.era-flair {
  border-color: color-mix(in srgb, var(--tag-a, #fff) 70%, white);
  background: var(--tag-a, #555);
  color: var(--tag-text, #fff);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tag-a, #fff) 28%, transparent);
}
.song-meta-grid,
.song-file-list,
.media-field-grid,
.session-field-grid,
.stat-grid {
  display: grid;
  gap: 10px;
}
.song-meta-grid,
.media-field-grid,
.session-field-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.song-meta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.meta-block,
.file-row,
.media-field,
.session-field,
.playlist-queue-item,
.stat-item,
.admin-row {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}
.meta-block,
.media-field,
.session-field {
  padding: 11px 12px;
  backdrop-filter: blur(10px);
}
.meta-block > span,
.media-field > span,
.session-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}
.meta-block > strong,
.media-field > strong,
.session-field > strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.media-field-values {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.metadata-value {
  display: grid;
  gap: 6px;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}
.metadata-value.text-value {
  display: block;
}
.metadata-search-text,
.inline-file-link {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.metadata-search-text:hover,
.metadata-search-text:focus-visible,
.inline-file-link:hover,
.inline-file-link:focus-visible {
  color: var(--text);
  color: var(--muted-strong);
  text-decoration: none;
  outline: 0;
}
.metadata-separator {
  width: auto !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.linked-extra {
  margin-top: 4px;
  display: grid;
  gap: 6px;
}
.song-file-list {
  grid-template-columns: 1fr;
}
.file-row {
  padding: 14px;
  display: grid;
  gap: 10px;
}
.file-inline-player {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.file-inline-play {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0 0 0 2px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #050505;
  font-size: 13px;
  cursor: pointer;
}
.file-progress-rail {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.file-progress-rail span {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
}
.file-inline-player small { color: var(--muted); font-size: 10px; }
.song-card-footer {
  margin-top: auto;
  padding-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.song-card-footer .soft-button {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 9px;
}
.file-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.file-name {
  min-width: 0;
}
.file-name strong,
.file-name span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-name strong { font-size: 13px; }
.file-name span { color: var(--muted); font-size: 11px; margin-top: 3px; }
.file-buttons {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.file-button,
.soft-button,
.lastfm-button {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.soft-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.file-button:hover,
.soft-button:hover,
.lastfm-button:hover { transform: translateY(-1px); border-color: var(--accent); }
.file-button.primary,
.primary-button {
  background: var(--accent);
  color: #090909;
}
.file-button.secondary {
  background: var(--accent-soft);
  color: var(--accent);
}
.lastfm-button {
  border-color: rgba(255, 85, 65, 0.36);
  color: #ff8879;
}

.section-title {
  margin-bottom: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
.section-title h1 { font-size: clamp(34px, 6vw, 58px); }
.compact-search,
.builder-input,
.builder-textarea,
.admin-inline-input {
  width: min(360px, 100%);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(8, 8, 8, 0.7);
  color: var(--text);
}
.builder-textarea {
  resize: vertical;
  min-height: 88px;
}

.media-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  display: grid;
  align-items: start;
  align-content: start;
  gap: 14px;
}
.media-card-head h2,
.session-card-head h2,
.playlist-card h2,
.playlist-detail h2,
.admin-card h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0;
}
.media-card-copy,
.session-card-copy { color: var(--muted); font-size: 12px; line-height: 1.7; white-space: pre-line; }
.media-flairs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-self: flex-start;
  gap: 7px;
}
.media-flair {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.media-flair.unsurfaced {
  color: var(--muted-strong);
  border-color: var(--line-strong);
}
.media-flair.unreleased {
  color: var(--muted-strong);
  border-color: var(--line-strong);
}
.media-flair.year-flair.unreleased {
  color: #fff;
  border-color: rgba(255, 61, 209, 0.55);
  background: #a60096;
}
.media-flair.year-flair.unsurfaced {
  color: #fff;
  border-color: rgba(83, 151, 255, 0.55);
  background: #285f9e;
}
.media-gallery,
.session-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 280px));
  justify-content: start;
  gap: 10px;
}
.media-tile,
.session-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0c0c0c;
  cursor: pointer;
}
.media-tile img,
.session-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.session-tile img { object-fit: contain; }
.media-tile.file-tile,
.session-tile.file-tile {
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  color: var(--muted-strong);
  cursor: default;
}
.media-meta-line,
.session-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(12px);
  transform: translate(-50%, -50%);
}
.play-badge::before {
  content: "";
  margin-left: 3px;
  border-width: 8px 0 8px 12px;
  border-style: solid;
  border-color: transparent transparent transparent white;
}

.session-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.session-card {
  min-width: 0;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 14px;
}
.session-card-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}
.session-card-copy { margin: 0; }
.song-actions,
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.media-field-values {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
}
.media-field-values.comma-separated {
  gap: 0;
}
.metadata-list-separator {
  flex: none;
  color: var(--muted);
}

.playlist-builder,
.playlist-card,
.playlist-detail,
.admin-card {
  padding: 18px;
}
.playlist-builder {
  margin-bottom: 18px;
  display: grid;
  gap: 16px;
}
.playlist-builder-head,
.playlist-card-head,
.admin-card-head,
.admin-auth {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.playlist-builder-head strong,
.playlist-card strong { display: block; }
.playlist-builder-head span,
.playlist-card p,
.playlist-meta,
.admin-card-head span,
.admin-row small,
.playlist-detail p {
  color: var(--muted);
  font-size: 11px;
}
.playlist-builder-form,
.admin-grid {
  display: grid;
  gap: 12px;
}
.playlist-queue,
.admin-list {
  display: grid;
  gap: 10px;
}
.playlist-queue-item,
.admin-row {
  padding: 12px;
}
.playlist-queue-item strong,
.admin-row strong { display: block; font-size: 13px; }
.playlist-queue-item span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.playlist-card {
  display: grid;
  gap: 10px;
  cursor: pointer;
}
.playlist-card:hover { border-color: var(--line-strong); }
.playlist-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.playlist-detail { margin-top: 18px; display: none; }
.playlist-detail.active { display: block; }

.rank-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
}
.rank-layout h2 {
  margin: 0 0 12px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.16em;
}
.rank-list { display: grid; gap: 10px; }
.rank-item {
  min-height: 70px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 30px 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.rank-item.user { grid-template-columns: 30px minmax(0, 1fr) auto; }
.rank-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 12px;
  background: #111;
}
.rank-number,
.rank-count { font-variant-numeric: tabular-nums; }
.rank-number { color: var(--muted); font-size: 11px; }
.rank-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.rank-item small { color: var(--muted); font-size: 10px; }
.rank-count { color: var(--muted-strong); font-size: 11px; }

.archive-rushmore {
  --stone-1: #a6a49e;
  --stone-2: #6e6d68;
  --stone-3: #343433;
  width: 100%;
}
.archive-rushmore__intro {
  width: min(1120px, 100%);
  margin: 0 auto 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.archive-rushmore__eyebrow {
  margin: 0 0 13px;
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
}
.archive-rushmore h1 {
  margin: 0;
  font-size: clamp(48px, 7.8vw, 88px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
}
.archive-rushmore__subtitle {
  max-width: 520px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.archive-rushmore__stage {
  position: relative;
  width: 100%;
  min-height: 690px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(24, 24, 25, 0.88) 0%, rgba(10, 10, 10, 0.95) 56%, #050505 100%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}
.archive-rushmore__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.025)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.42));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), inset 0 -90px 110px rgba(0, 0, 0, 0.55);
}
.archive-rushmore__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("/rushmore/stone-noise.png?v=20260716-1");
  background-size: 300px 300px;
  mix-blend-mode: soft-light;
}
.archive-rushmore__sky {
  position: absolute;
  inset: 0 0 35%;
  z-index: -3;
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 255, 255, 0.07), transparent 22%),
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.05), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent);
}
.archive-rushmore__mountain {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -1px;
  z-index: -2;
  transform-origin: bottom;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.18), transparent 20%),
    linear-gradient(235deg, rgba(255, 255, 255, 0.09), transparent 29%),
    linear-gradient(155deg, #75746f 0%, #4d4c49 32%, #232323 72%, #0d0d0e 100%);
  filter: drop-shadow(0 -22px 38px rgba(0, 0, 0, 0.28));
}
.archive-rushmore__mountain--back {
  height: 67%;
  opacity: 0.5;
  clip-path: polygon(0 100%, 0 71%, 8% 60%, 15% 65%, 26% 36%, 35% 48%, 48% 8%, 57% 31%, 68% 20%, 77% 52%, 88% 37%, 100% 66%, 100% 100%);
}
.archive-rushmore__mountain--front {
  height: 49%;
  z-index: 9;
  clip-path: polygon(0 100%, 0 75%, 9% 56%, 18% 62%, 28% 28%, 38% 51%, 50% 22%, 61% 54%, 73% 31%, 83% 59%, 91% 48%, 100% 72%, 100% 100%);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.15), transparent 18%),
    linear-gradient(250deg, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(155deg, #64635f 0%, #3a3a38 37%, #1c1c1c 76%, #090909 100%);
}
.archive-rushmore__monuments {
  position: absolute;
  inset: 52px 34px 116px;
  z-index: 12;
}
.rushmore-person {
  --person-glow: 255 255 255;
  --portrait-x: 50%;
  --portrait-y: 50%;
  position: absolute;
  width: min(23.5%, 282px);
  text-align: center;
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.22, 1), filter 0.3s ease;
}
.rushmore-person--zdb { left: 1%; top: 25%; transform: rotate(-3deg); }
.rushmore-person--bully { left: 25.2%; top: 13%; transform: rotate(-1.2deg); z-index: 3; }
.rushmore-person--flex { left: 50.4%; top: 7%; transform: rotate(1.1deg); z-index: 4; }
.rushmore-person--overlord { right: 1%; top: 25%; transform: rotate(2.6deg); }
.rushmore-person:hover { z-index: 8; }
.rushmore-person--zdb:hover { transform: rotate(-3deg) translateY(-8px) scale(1.025); }
.rushmore-person--bully:hover { transform: rotate(-1.2deg) translateY(-8px) scale(1.025); }
.rushmore-person--flex:hover { transform: rotate(1.1deg) translateY(-8px) scale(1.025); }
.rushmore-person--overlord:hover { transform: rotate(2.6deg) translateY(-8px) scale(1.025); }
.rushmore-person__stone {
  position: relative;
  padding: 14px 14px 44px;
  clip-path: polygon(12% 0, 82% 2%, 100% 18%, 94% 88%, 76% 100%, 20% 96%, 0 80%, 3% 21%);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 21%),
    linear-gradient(320deg, rgba(0, 0, 0, 0.42), transparent 38%),
    linear-gradient(145deg, var(--stone-1), var(--stone-2) 47%, var(--stone-3));
  box-shadow: inset 10px 10px 24px rgba(255, 255, 255, 0.08), inset -18px -22px 40px rgba(0, 0, 0, 0.38);
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.48));
}
.rushmore-person__stone::before,
.rushmore-person__stone::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.rushmore-person__stone::before {
  inset: 0;
  opacity: 0.48;
  background-image: url("/rushmore/stone-noise.png?v=20260716-1");
  background-size: 230px 230px;
  mix-blend-mode: multiply;
}
.rushmore-person__stone::after {
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.23), transparent 22%),
    radial-gradient(circle at 70% 75%, rgba(0, 0, 0, 0.33), transparent 36%);
  mix-blend-mode: soft-light;
}
.rushmore-person__portrait {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  clip-path: polygon(13% 2%, 87% 0, 98% 14%, 93% 87%, 78% 100%, 19% 96%, 2% 81%, 0 19%);
  background: #5d5d59;
  box-shadow:
    inset 12px 12px 22px rgba(255, 255, 255, 0.12),
    inset -18px -22px 34px rgba(0, 0, 0, 0.58),
    0 1px rgba(255, 255, 255, 0.16);
}
.rushmore-person__portrait::before,
.rushmore-person__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.rushmore-person__portrait::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 23%),
    linear-gradient(320deg, rgba(0, 0, 0, 0.42), transparent 45%),
    rgba(116, 114, 106, 0.34);
  mix-blend-mode: color;
}
.rushmore-person__portrait::after {
  opacity: 0.68;
  background-image: url("/rushmore/stone-noise.png?v=20260716-1");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}
.rushmore-person__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--portrait-x) var(--portrait-y);
  filter: grayscale(1) contrast(1.2) brightness(0.78) sepia(0.08);
  transform: scale(1.035);
  transition: filter 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.8, 0.22, 1);
  user-select: none;
}
.rushmore-person:hover .rushmore-person__portrait img {
  filter: grayscale(0.05) contrast(1.05) brightness(0.92) saturate(1.12);
  transform: scale(1.085);
}
.rushmore-person:hover .rushmore-person__portrait::before { opacity: 0.08; }
.rushmore-person:hover .rushmore-person__portrait::after { opacity: 0.15; }
.rushmore-person:hover .rushmore-person__stone {
  filter:
    drop-shadow(0 24px 30px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 22px rgb(var(--person-glow) / 0.23));
}
.rushmore-person__index {
  position: absolute;
  z-index: 4;
  right: 19px;
  bottom: 16px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.rushmore-person__plaque {
  position: relative;
  z-index: 10;
  width: calc(100% - 30px);
  margin: -28px auto 0;
  padding: 14px 16px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(8, 8, 8, 0.78);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
}
.rushmore-person__plaque strong,
.rushmore-person__plaque a,
.rushmore-person__plaque p { display: block; }
.rushmore-person__plaque strong {
  overflow: hidden;
  color: #fff;
  font-size: clamp(15px, 1.4vw, 21px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rushmore-person__plaque a {
  width: fit-content;
  margin: 6px auto 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.rushmore-person__plaque a:hover {
  color: rgb(var(--person-glow));
  text-shadow: 0 0 16px rgb(var(--person-glow) / 0.65);
}
.rushmore-person__plaque p {
  margin: 9px auto 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 560 !important;
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}
.archive-rushmore__base {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 42px;
  z-index: 10;
  height: 80px;
  display: flex;
  align-items: end;
  justify-content: space-around;
  opacity: 0.72;
}
.archive-rushmore__base span {
  width: 24%;
  height: 100%;
  clip-path: polygon(0 44%, 12% 20%, 32% 30%, 48% 0, 64% 31%, 83% 17%, 100% 47%, 93% 100%, 7% 100%);
  background: linear-gradient(160deg, #4d4d4a, #181819 72%);
}
.archive-rushmore__base span:nth-child(2) { height: 66%; transform: translateX(-18%); }
.archive-rushmore__base span:nth-child(3) { height: 72%; transform: translateX(18%); }
.archive-rushmore__base span:nth-child(4) { height: 88%; }
.archive-rushmore__inscription {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 24;
  margin: 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: none;
  transform: translateX(-50%);
  white-space: nowrap;
}
.archive-rushmore__hint {
  margin: 13px 2px 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  text-align: center;
}

.admin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-card-head h2 { font-size: 19px; }
.admin-key { width: 220px; }
.stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat-item {
  padding: 12px;
  text-align: center;
}
.stat-item strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
}
.stat-item span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}
.moderation-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.danger-button {
  border-color: rgba(244, 111, 111, 0.32);
  color: #ffb0b0;
}

.site-footer {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  text-align: center;
}
.credits,
.legalDisclaimer {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.credits a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
.credits a:hover { color: white; text-decoration: none; }

.floating-player {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 80;
  width: min(560px, calc(100% - 24px));
  padding: 10px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 42px 30px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: rgba(8, 8, 8, 0.9);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  backdrop-filter: blur(24px);
}
.mini-cover {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
}
.mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.mini-info { min-width: 0; }
.mini-info strong,
.mini-info span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-info strong { font-size: 13px; }
.mini-info span { margin-top: 4px; color: var(--muted); font-size: 10px; }

.icon-button,
.player-close,
.modal-close {
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.icon-button:hover { background: rgba(255, 255, 255, 0.06); }
.icon-button.subtle { color: var(--muted); font-size: 22px; }
.icon-button svg { width: 20px; height: 20px; fill: currentColor; }

.full-player {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 28px max(120px, env(safe-area-inset-bottom));
  display: grid;
  place-items: start center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.1), transparent 30%),
    var(--player-color, #050507);
  backdrop-filter: blur(22px);
}
.player-backdrop {
  position: fixed;
  inset: -6%;
  opacity: 0.42;
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.2) brightness(0.35);
  transform: scale(1.1);
}
.full-player::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.88) 78%, rgba(0, 0, 0, 0.96));
  pointer-events: none;
}
.player-close,
.modal-close {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  top: max(20px, env(safe-area-inset-top));
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 24px;
}
.player-layout {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(14px, 2.5vh, 26px);
  text-align: center;
}
.player-primary {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: clamp(14px, 2.5vh, 26px);
  text-align: center;
}
.player-art {
  position: relative;
  width: min(440px, 78vw, 48vh);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 28px;
  overflow: hidden;
  background: #050505;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}
.player-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: inherit;
}
.player-info h2 {
  margin: 0;
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.player-info > p:not(.eyebrow) {
  margin: 8px 0 0;
  color: #c8c8d4;
  font-size: 17px;
  font-weight: 500;
}
.timeline {
  width: 100%;
  margin-top: 0;
  display: grid;
  gap: 8px;
}
.timeline input { width: 100%; accent-color: white; cursor: pointer; }
.timeline div {
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  color: #aaaabd;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.player-controls {
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
}
.player-controls .icon-button {
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 24px;
}
.player-secondary-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.player-secondary-controls .icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
}
.player-secondary-controls .icon-button.active {
  color: #050505;
  background: white;
}
.player-extra-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.main-play {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: white;
  color: #090909;
  cursor: pointer;
}
.main-play svg { width: 25px; height: 25px; fill: currentColor; }
.player-volume-control,
.player-color-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 500;
}
.player-volume-control input { width: 92px; accent-color: white; }
.player-color-control input {
  width: 34px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
}
.lyrics-panel {
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)), rgba(0, 0, 0, 0.38);
  text-align: left;
}
.lyrics-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.lyrics-head h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: none;
}
.lyrics-head span { color: var(--muted); font-size: 10px; }
.lyrics-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tiny-button {
  padding: 7px 10px;
  font-size: 10px;
}
.lyrics-submitter {
  width: 100%;
  margin-top: 0;
  padding: 14px;
  display: grid;
  gap: 10px;
  max-height: none;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.38);
  text-align: left;
}
.lyrics-submitter .builder-textarea {
  min-height: 120px;
  resize: vertical;
}
.lyrics-lines {
  max-height: min(300px, 32vh);
  margin-top: 12px;
  padding-right: 0;
  display: grid;
  gap: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.lyrics-lines::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.lyrics-line {
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: clamp(20px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.lyrics-line.near { color: rgba(255, 255, 255, 0.68); }
.lyrics-line.active { color: white; transform: translateX(6px); }
.lyrics-empty { color: var(--muted); font-size: 13px; line-height: 1.7; }
.lyrics-generator-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.lyrics-generator-head strong,
.lyrics-generator-head span { display: block; }
.lyrics-generator-head span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.lyrics-generator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lyrics-generator-current {
  min-height: 104px;
  padding: 14px;
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
}
.lyrics-generator-current span,
.lyrics-generator-current small { color: var(--muted); font-size: 10px; }
.lyrics-generator-current strong { font-size: 20px; line-height: 1.2; }
.generated-lrc { font-family: Consolas, "Courier New", monospace; font-size: 11px; }

@media (max-height: 820px) {
  .player-art { width: min(360px, 76vw, 42vh); }
  .player-info h2 { font-size: clamp(24px, 5vw, 38px); }
  .lyrics-lines { max-height: min(240px, 28vh); }
}

.media-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  padding: 5vh 4vw;
  display: grid;
  place-items: center;
  background: rgba(4, 4, 4, 0.94);
  backdrop-filter: blur(14px);
}
#mediaModalContent { width: min(1120px, 100%); max-height: 88vh; }
#mediaModalContent img,
#mediaModalContent video {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  margin: auto;
  border-radius: 20px;
}
.media-modal.card-detail-mode {
  place-items: start center;
  overflow-y: auto;
}
.media-modal.card-detail-mode #mediaModalContent {
  max-height: none;
  padding: 34px 0;
}
.media-modal.card-detail-mode #mediaModalContent > .song-card,
.media-modal.card-detail-mode #mediaModalContent > .media-card {
  width: 100%;
  margin: 0;
}
.media-modal.card-detail-mode #mediaModalContent .media-gallery img,
.media-modal.card-detail-mode #mediaModalContent .media-gallery video {
  width: 100%;
  max-height: none;
  margin: 0;
  border-radius: inherit;
}
.card-detail-status {
  min-height: 240px;
  display: grid;
  place-items: center;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  text-align: center;
}
.card-detail-status.error {
  color: #ff9b9b;
}
.discord-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(4, 4, 4, 0.78);
  backdrop-filter: blur(14px);
}
.discord-choice-card {
  position: relative;
  width: min(420px, 100%);
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: rgba(10, 10, 10, 0.96);
  box-shadow: var(--shadow);
  text-align: center;
}
.discord-choice-card h2 { margin: 0; font-size: 22px; }
.discord-choice-card p { margin: 8px 0 20px; color: var(--muted); font-size: 12px; }
.discord-choice-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.discord-choice-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

.download-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 145;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 4, 4, 0.76);
  backdrop-filter: blur(14px);
}

.download-choice-modal[hidden] {
  display: none;
}

.download-choice-card {
  position: relative;
  width: min(390px, 100%);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(12, 12, 14, 0.9);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.62);
}

.download-choice-card h2 {
  margin: 0;
  padding-right: 30px;
  color: #fff;
  font-size: 22px;
  line-height: 1.1;
}

.download-choice-card p {
  min-height: 18px;
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.download-choice-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  cursor: pointer;
}

.download-choice-actions {
  display: grid;
  gap: 10px;
}

.download-choice-option,
.download-choice-cancel {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.download-choice-option {
  display: grid;
  gap: 3px;
}

.download-choice-option.primary {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.14);
}

.download-choice-option strong {
  font-size: 13px;
}

.download-choice-option span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.download-choice-option:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.download-choice-cancel {
  min-height: 42px;
  text-align: center;
  color: var(--muted);
}

.download-choice-card.is-loading .download-choice-option,
.download-choice-card.is-loading .download-choice-cancel,
.download-choice-card.is-loading .download-choice-close {
  pointer-events: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 94px;
  z-index: 150;
  max-width: calc(100% - 24px);
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(10, 10, 10, 0.92);
  color: var(--text);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .download-choice-modal {
    align-items: end;
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .download-choice-card {
    width: 100%;
    border-radius: 22px 22px 18px 18px;
  }
}

.empty {
  grid-column: 1 / -1;
  padding: 52px 18px;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}
.empty.compact {
  padding: 18px;
  border-radius: 16px;
}
.sentinel { height: 32px; }

@media (max-width: 1100px) {
  .song-grid,
  .media-grid,
  .playlist-grid,
  .admin-grid,
  .site-footer,
  .rank-layout {
    grid-template-columns: 1fr;
  }
  .player-layout { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .site-header { padding-top: 18px; }
  .brand { width: 74px; height: 74px; }
  .brand img { width: 58px; height: 58px; }
  .tabs {
    top: 8px;
    width: calc(100% - 16px);
    max-width: none;
  }
  main,
  .site-footer { width: calc(100% - 20px); }
  .hero h1 { font-size: 42px; }
  .search-form { min-height: 60px; border-radius: 18px; }
  .search-form kbd { display: none; }
  .filter-row,
  .date-row { justify-content: flex-start; }
  .advanced-filter-grid,
  .advanced-date-row,
  .archive-date-row {
    grid-template-columns: 1fr;
  }
  .advanced-filters-top {
    align-items: stretch;
    flex-direction: column;
  }
  .advanced-filter-actions {
    position: static;
    justify-content: center;
  }
  .song-grid,
  .media-grid,
  .playlist-grid { grid-template-columns: 1fr; }
  .song-card {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 14px;
    min-height: 360px;
  }
  .cover-wrap { width: 92px; height: 92px; border-radius: 16px; }
  .song-head h2 { font-size: 20px; }
  .song-meta-grid,
  .media-field-grid,
  .session-field-grid,
  .stat-grid { grid-template-columns: 1fr; }
  .section-title,
  .playlist-builder-head,
  .playlist-card-head,
  .admin-card-head,
  .admin-auth,
  .session-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .compact-search,
  .admin-key,
  .builder-input,
  .builder-textarea,
  .admin-inline-input { width: 100%; }
  .playlist-builder-form { grid-template-columns: 1fr; }
  .media-gallery,
  .session-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .session-grid { grid-template-columns: 1fr; }
  .floating-player {
    bottom: 10px;
    grid-template-columns: 48px minmax(0, 1fr) 38px 24px;
  }
  .mini-cover { width: 48px; height: 48px; }
  .full-player {
    padding: 58px 16px 24px;
    place-items: start center;
    overflow-y: auto;
  }
  .player-close,
  .modal-close { right: 12px; top: 12px; }
  .player-layout {
    width: 100%;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .lyrics-submitter { max-height: none; }
  .player-art { width: min(76vw, 320px); margin: 0 auto; }
  .player-info { text-align: center; }
  .lyrics-lines {
    height: auto;
    max-height: min(300px, 32vh);
    overflow: auto;
    display: grid;
  }
  .lyrics-line { display: block; margin: 0; font-size: clamp(22px, 8vw, 34px); text-align: left; }
  .lyrics-line.mobile-near { color: rgba(255, 255, 255, 0.34); font-size: 15px; }
  .lyrics-line.active { color: white; font-size: 24px; }
}

/* Final song artwork and lyric-state corrections. */
.song-card.is-collapsed .song-card-art {
  border-radius: 18px !important;
}

.full-player.lyrics-loading .lyrics-panel {
  display: block !important;
}

.full-player.lyrics-loading .lyrics-empty {
  display: block !important;
}

.full-player .player-extra-controls.fullExtraControls #toggleLyricsSubmit {
  font-weight: 500 !important;
}

@media (min-width: 900px) {
  .full-player .lyrics-scroll-hint:not([hidden]) {
    right: auto;
    left: 50%;
    bottom: 28px;
    padding: 11px 18px;
    font-size: 14px;
    transform: translateX(-50%);
  }
}

@media (max-width: 899px) {
  .full-player[data-mobile-player-v2] .lyrics-scroll-hint:not([hidden]) {
    right: auto !important;
    left: 50% !important;
    bottom: 18px !important;
    display: inline-flex !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.94) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transform: translateX(-50%) !important;
  }

  .full-player[data-mobile-player-v2] .player-primary {
    grid-template-rows: minmax(340px, 53dvh) auto auto 66px 34px !important;
    gap: 14px 0 !important;
  }

  .full-player[data-mobile-player-v2] .player-controls,
  .full-player[data-mobile-player-v2] .fullControls {
    margin-top: 16px !important;
    transform: translateY(0) !important;
  }

  .full-player[data-mobile-player-v2] .player-extra-controls.fullExtraControls {
    transform: translateY(0) !important;
  }

  .full-player[data-mobile-player-v2].mobile-lyrics-view .player-controls,
  .full-player[data-mobile-player-v2].mobile-lyrics-view .fullControls {
    transform: translateY(0) !important;
  }
}

/* Final archive-card pass: the list is deliberately compact. Details live in
   the expanded modal, never underneath the attachment preview. */
.era-browser-more {
  flex: 0 0 auto !important;
  min-width: 104px !important;
  min-height: 38px !important;
  padding: 8px 13px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

.media-card.is-compact,
.session-card.is-compact,
.performance-card.performance-compact-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(148px, 30%) !important;
  min-height: 164px !important;
  padding: 0 !important;
  gap: 0 !important;
  cursor: pointer;
  background: #121217 !important;
}
.media-card.is-compact::before,
.media-card.is-compact::after,
.session-card.is-compact::before,
.session-card.is-compact::after,
.performance-card.performance-compact-card::before,
.performance-card.performance-compact-card::after { display: none !important; }
.media-card.is-compact .archive-card-copy,
.session-card.is-compact .archive-card-copy,
.performance-card.performance-compact-card .archive-card-copy {
  min-width: 0;
  padding: 18px 22px !important;
  display: grid;
  align-content: center;
  gap: 7px;
}
.media-card.is-compact .media-card-head h2,
.session-card.is-compact .session-card-head h2,
.performance-card.performance-compact-card .performance-card-head h2 {
  font-size: clamp(24px, 2.5vw, 34px) !important;
  line-height: 1.02 !important;
}
.media-card.is-compact .media-flairs,
.performance-card.performance-compact-card .media-flairs { margin: 0 !important; }
.archive-card-meta { display: grid; gap: 4px; color: var(--muted-strong); font-size: 12px; }
.archive-card-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-card-meta small { margin-right: 7px; color: var(--muted); font-size: 10px; }
.media-card.is-compact .media-gallery,
.session-card.is-compact .session-gallery {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  min-height: 164px !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}
.media-card.is-compact .media-gallery .media-tile,
.session-card.is-compact .session-gallery .session-tile {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 164px !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.media-card.is-compact .media-gallery img,
.session-card.is-compact .session-gallery img { width: 100%; height: 100%; object-fit: cover; }
.media-card.is-compact .media-more-count,
.session-card.is-compact .media-more-count {
  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  background: #fff !important;
  color: #0b0b0e !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.34) !important;
}
.performance-card.performance-compact-card .performance-compact-art {
  min-height: 164px;
  background:
    linear-gradient(90deg, rgba(18,18,23,0), rgba(18,18,23,.12)),
    var(--era-cover),
    linear-gradient(135deg, var(--era-a), #17171d);
  background-size: cover;
  background-position: center;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.performance-card.performance-compact-card .performance-card-head p { font-size: 13px !important; }
.media-card.is-expanded,
.session-card.is-expanded,
.performance-card.is-expanded { cursor: default; }

#instrumentalLibraryResults { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; }
.instrumental-play-button {
  border-color: rgba(255,255,255,.3) !important;
  background: transparent !important;
  color: #fff !important;
}
.library-year-filter { justify-content: flex-end; margin-top: -10px; }
.library-year-filter select { min-width: 132px; }

@media (max-width: 700px) {
  .media-card.is-compact,
  .session-card.is-compact,
  .performance-card.performance-compact-card { grid-template-columns: minmax(0, 1fr) 37% !important; }
  .media-card.is-compact .archive-card-copy,
  .session-card.is-compact .archive-card-copy,
  .performance-card.performance-compact-card .archive-card-copy { padding: 15px 16px !important; }
  .media-card.is-compact .media-card-head h2,
  .session-card.is-compact .session-card-head h2,
  .performance-card.performance-compact-card .performance-card-head h2 { font-size: 23px !important; }
  #instrumentalLibraryResults { grid-template-columns: 1fr !important; }
}

.media-flair.year-flair {
  border-color: color-mix(in srgb, var(--year-flair, #777) 76%, white) !important;
  background: color-mix(in srgb, var(--year-flair, #777) 34%, #0c0c10) !important;
  color: #fff !important;
}
.instrumental-play-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--instrumental-year, #777) 70%, white);
  border-radius: 50%;
  background: color-mix(in srgb, var(--instrumental-year, #777) 28%, #0b0b0e);
  color: #fff;
  cursor: pointer;
}
.instrumental-play-button .sf-symbol-wrap,
.instrumental-play-button .sf-symbol-img { width: 15px; height: 15px; }
.instrumental-file-row { margin-top: 3px; }

.calendar-export-options {
  width: fit-content;
  max-width: 100%;
  margin: -10px 0 18px;
  color: var(--muted);
  font-size: 12px;
}
.calendar-export-options summary { cursor: pointer; color: #fff; font-weight: 700; }
.calendar-export-options > div { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.calendar-export-options label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.calendar-export-options input { accent-color: #fff; }

/* Keep the default era browser focused on the core eras. */
.era-browser-grid.era-browser-grid--compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.era-browser-grid.era-browser-grid--compact .era-browser-card {
  flex: 0 1 250px;
  width: 250px;
}

.era-browser-more {
  align-self: stretch;
  min-height: 126px;
  min-width: 150px;
  padding: 18px 26px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 18px;
  background: rgba(8, 8, 10, .84);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.era-browser-more:hover,
.era-browser-more:focus-visible {
  transform: translateY(-2px);
  background: #fff;
  border-color: #fff;
  color: #0a0a0b;
}

@media (max-width: 760px) {
  .era-browser-grid.era-browser-grid--compact .era-browser-card {
    flex-basis: calc(50% - 5px);
    width: calc(50% - 5px);
  }

  .era-browser-grid.era-browser-grid--compact .era-browser-more {
    flex-basis: calc(50% - 5px);
    min-width: 0;
    min-height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Apple Music player and era-driven song cards */
.hero h1,
.section-title h1,
.song-head h2 {
  font-weight: 950;
}
.tab,
.filter-button,
.advanced-toggle {
  font-weight: 900;
}
.song-head p {
  font-weight: 750;
}
.song-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.song-grid.single-result {
  grid-template-columns: minmax(0, min(100%, 1120px));
}
.song-card {
  --era-color: #505050;
  min-height: 0;
  padding: clamp(22px, 2.4vw, 32px);
  background: color-mix(in srgb, var(--era-color) 58%, #111);
}
.song-card:hover {
  border-color: color-mix(in srgb, var(--era-color) 72%, white);
  background: color-mix(in srgb, var(--era-color) 62%, #111);
}
.song-card::before {
  inset: 0;
  background-image:
    linear-gradient(
      110deg,
      color-mix(in srgb, var(--era-color) 76%, #111) 0%,
      color-mix(in srgb, var(--era-color) 64%, transparent) 58%,
      color-mix(in srgb, var(--era-color) 30%, transparent) 100%
    ),
    var(--song-art);
  background-size: cover;
  background-position: center, center;
  opacity: 1;
}
.song-card::after {
  display: none;
}
.song-grid:not(.single-result) .song-head h2 {
  font-size: clamp(30px, 3.1vw, 44px);
}
.song-grid:not(.single-result) .song-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.song-head h2,
.player-info h2 {
  font-weight: 950;
}
.meta-block > span,
.file-name span {
  font-weight: 750;
}
.meta-block > strong,
.media-field > strong,
.session-field > strong,
.metadata-value,
.metadata-search-text,
.inline-file-link {
  font-weight: 750;
}
.file-name strong {
  font-weight: 950;
}
.file-name,
.file-name *,
.inline-file-link,
.inline-file-link:hover,
.inline-file-link:focus-visible {
  text-decoration: none !important;
}
.file-button,
.soft-button,
.lastfm-button {
  font-weight: 850;
}

.full-player {
  --player-era-color: #66727a;
  padding: clamp(30px, 4vh, 52px) clamp(26px, 5vw, 84px);
  place-items: center;
  overflow: hidden;
  background: var(--player-era-color);
  backdrop-filter: none;
  isolation: isolate;
}
.player-backdrop {
  inset: -12%;
  z-index: 0;
  opacity: 0.84;
  background-color: var(--player-era-color);
  background-size: cover;
  background-position: center;
  filter: blur(64px) saturate(1.5) brightness(0.82);
  transform: scale(1.14);
}
.full-player::after {
  display: none;
  content: none;
}
.player-close {
  top: max(18px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 6;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}
.player-close svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player-layout {
  z-index: 2;
  width: min(1320px, 100%);
  height: min(820px, calc(100dvh - 72px));
  min-height: 0;
  padding: 0;
  grid-template-columns: minmax(330px, 470px) minmax(420px, 1fr);
  grid-template-areas: "primary lyrics";
  align-items: center;
  column-gap: clamp(68px, 8vw, 142px);
  text-align: left;
}
.player-primary {
  grid-area: primary;
  width: 100%;
  gap: 14px;
  align-content: center;
  text-align: left;
}
.player-art {
  width: min(470px, 32vw, 54vh);
  max-width: 100%;
  margin: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.32);
}
.player-info {
  padding: 8px 2px 0;
  text-align: left;
}
.player-info h2 {
  font-family: Inter, "SF Pro Display", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(20px, 1.7vw, 27px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.player-info > p:not(.eyebrow) {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  font-weight: 750;
}
.timeline {
  gap: 6px;
}
.timeline input,
.player-volume-control input {
  height: 4px;
  margin: 0;
  accent-color: white;
}
.timeline div {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 750;
}
.player-controls {
  width: 100%;
  margin: 2px 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 10px;
}
.player-controls .icon-button,
.player-controls .main-play {
  width: 100%;
  height: 56px;
  min-width: 0;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: white;
}
.player-controls .icon-button:hover,
.player-controls .main-play:hover {
  background: transparent;
  transform: scale(1.05);
}
.player-controls .icon-button svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player-controls .skip-button svg {
  width: 35px;
  height: 35px;
  fill: currentColor;
  stroke: none;
}
.player-controls .main-play svg {
  width: 43px;
  height: 43px;
  filter: drop-shadow(0 5px 16px rgba(0, 0, 0, 0.2));
}
.player-controls .player-mode-button {
  color: rgba(255, 255, 255, 0.78);
}
.player-controls .player-mode-button.active {
  color: white;
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.7));
}
.player-extra-controls {
  width: 100%;
  gap: 14px;
}
.player-volume-control {
  flex: 1 1 220px;
  max-width: 310px;
  color: rgba(255, 255, 255, 0.74);
}
.player-volume-control svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player-volume-control input {
  width: 100%;
}
.player-extra-controls .tiny-button {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
}
.lyrics-panel {
  grid-area: lyrics;
  width: 100%;
  height: min(72vh, 690px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.lyrics-head {
  min-height: 24px;
  justify-content: flex-start;
}
.lyrics-head h3 {
  display: none;
}
.lyrics-head span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 750;
}
.lyrics-lines {
  height: calc(100% - 24px);
  max-height: none;
  margin-top: 0;
  padding: 10vh 0;
  gap: 28px;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 87%, transparent);
}
.lyrics-line {
  color: rgba(255, 255, 255, 0.28);
  font-size: clamp(30px, 3vw, 50px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -0.052em;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.lyrics-line.near {
  color: rgba(255, 255, 255, 0.48);
}
.lyrics-line.active {
  color: white;
  transform: none;
}
.lyrics-empty {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 750;
}
.lyrics-submitter:not([hidden]) {
  position: fixed;
  inset: max(64px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  z-index: 10;
  width: min(760px, calc(100% - 40px));
  max-height: calc(100dvh - 88px);
  margin: auto;
  overflow-y: auto;
  padding: 20px;
  background: rgba(8, 8, 10, 0.9);
  backdrop-filter: blur(28px);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.42);
}
.full-player.player-opening {
  animation: player-fade-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.full-player.player-opening .player-layout {
  animation: player-content-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes player-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes player-content-in {
  from { opacity: 0; transform: translateY(28px) scale(0.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .song-grid:not(.single-result) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .full-player {
    padding: max(62px, env(safe-area-inset-top)) 16px max(90px, env(safe-area-inset-bottom));
    place-items: start center;
    overflow-y: auto;
  }
  .player-backdrop {
    position: fixed;
    opacity: 0.78;
    filter: blur(52px) saturate(1.4) brightness(0.78);
  }
  .player-layout {
    width: min(500px, 100%);
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "primary"
      "lyrics";
    gap: 34px;
    overflow: visible;
  }
  .player-primary {
    width: 100%;
    gap: 14px;
  }
  .player-art {
    width: min(82vw, 410px);
    margin: 0 auto;
    border-radius: 18px;
  }
  .player-info {
    text-align: left;
  }
  .player-info h2 {
    font-size: clamp(22px, 7vw, 30px);
  }
  .player-controls {
    grid-template-columns: repeat(5, minmax(40px, 1fr));
    gap: 2px;
  }
  .player-controls .icon-button,
  .player-controls .main-play {
    height: 52px;
    padding: 7px;
  }
  .player-controls .skip-button svg {
    width: 31px;
    height: 31px;
  }
  .player-controls .main-play svg {
    width: 38px;
    height: 38px;
  }
  .player-extra-controls {
    align-items: center;
  }
  .player-volume-control {
    flex-basis: 100%;
    max-width: none;
  }
  .lyrics-panel {
    width: 100%;
    height: auto;
    min-height: 260px;
  }
  .lyrics-lines {
    height: auto;
    max-height: min(52vh, 460px);
    padding: 7vh 0 12vh;
    gap: 16px;
  }
  .lyrics-line {
    font-size: clamp(25px, 8vw, 38px);
    text-align: left;
  }
}

/* Explicit artwork cards: the cover is an actual tile, never a faded backdrop. */
.song-card {
  display: grid !important;
  grid-template-columns: 142px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  background: #101014 !important;
}
.song-card.is-collapsed { padding: 8px !important; }
.song-card::before,
.song-card::after { display: none !important; }
.song-card-art {
  min-height: 142px;
  background-image: var(--song-art, none), linear-gradient(145deg, var(--era-color), #15151a 72%);
  background-size: cover;
  background-position: center;
  border-right: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
}
.song-card .song-copy { min-width: 0; padding: 18px 20px !important; }
.song-card.is-collapsed .song-copy { padding: 17px 19px !important; }
@media (max-width: 640px) {
  .song-card { grid-template-columns: 104px minmax(0, 1fr) !important; }
  .song-card-art { min-height: 118px; }
  .song-card .song-copy, .song-card.is-collapsed .song-copy { padding: 14px !important; }
}

/* Static lyrics are a complete readable transcript, not timed fragments. */
.full-player.has-static-lyrics .lyrics-panel { height: auto !important; min-height: 0 !important; overflow: visible !important; }
.full-player.has-static-lyrics .lyrics-lines {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 22px 0 44px !important;
  gap: 16px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.full-player.has-static-lyrics .lyrics-line-static {
  color: rgba(255,255,255,.96) !important;
  font-size: clamp(28px, 3vw, 46px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  filter: none !important;
}

/* Volume stays on its own row; lyric actions remain together as outlined pills. */
.player-extra-controls {
  display: grid !important;
  grid-template-columns: auto auto !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 12px !important;
}
.player-extra-controls .player-volume-menu { grid-column: 1 / -1 !important; width: 100% !important; }
.player-extra-controls #createLyricsImage { grid-column: 1 !important; }
.player-extra-controls #toggleLyricsSubmit {
  grid-column: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 999px !important;
  background: transparent !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Center the year collection rather than stretching its final row. */
.archive-browser-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.archive-year-card { flex: 0 1 196px !important; }

/* An opened song becomes the old full-cover detail surface. */
.song-card:not(.is-collapsed) { grid-template-columns: 1fr !important; grid-column: 1 / -1 !important; animation: song-card-open .26s ease both; }
.song-card:not(.is-collapsed) .song-card-art {
  position: absolute; inset: 0; z-index: 0; min-height: 100%;
  margin: -8px; border: 0; border-radius: inherit; opacity: .48; background-size: cover;
}
.song-card:not(.is-collapsed) .song-copy {
  position: relative; z-index: 1;
  background: linear-gradient(90deg, rgba(8,8,12,.94), rgba(8,8,12,.7) 60%, rgba(8,8,12,.3));
}
@keyframes song-card-open { from { opacity: .65; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
.song-card.is-collapsed { animation: song-card-close .2s ease both; }
@keyframes song-card-close { from { opacity: .78; transform: scale(.99); } to { opacity: 1; transform: scale(1); } }
.full-player.has-static-lyrics .lyrics-line-static { font-size: clamp(19px, 2vw, 30px) !important; }

@media (max-width: 760px) {
  .song-grid,
  .song-grid:not(.single-result) {
    grid-template-columns: 1fr;
  }
  .song-card {
    min-height: 0;
    padding: 18px;
  }
  .song-grid:not(.single-result) .song-head h2 {
    font-size: clamp(28px, 9vw, 40px);
  }
  .song-grid:not(.single-result) .song-meta-grid,
  .song-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .file-inline-player {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }
}

/* === v22 player-only cleanup: preserve the original background gradient === */
.full-player .player-art,
.full-player .fullCover {
  box-shadow: none !important;
}

.full-player .mobile-player-close {
  display: none !important;
}

@media (min-width: 900px) {
  .full-player .player-close {
    top: max(18px, env(safe-area-inset-top)) !important;
    right: max(22px, env(safe-area-inset-right)) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: rgba(255, 255, 255, .9) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
    font-size: 34px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }

  .full-player .player-close:hover {
    color: #fff !important;
    transform: scale(1.06) !important;
  }

  .full-player .desktop-player-close {
    display: block !important;
  }

  .full-player .lyrics-head {
    top: 16px !important;
    right: 4px !important;
  }

  .full-player .lyrics-lines {
    padding-top: max(104px, 12vh) !important;
  }

  .full-player #playerVolumeToggle .sf-symbol-wrap,
  .full-player #playerVolumeToggle .sf-symbol-img {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
  }

  .full-player .player-volume-high .sf-symbol-wrap,
  .full-player .player-volume-high .sf-symbol-img {
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }
}

/* === v24 lyrics image button placement === */
@media (min-width: 900px) {
  .full-player #createLyricsImage.lyrics-image-trigger {
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 auto !important;
    grid-column: 1 !important;
  }

  .full-player #createLyricsImage.lyrics-image-trigger[hidden] {
    display: none !important;
  }
}

.song-tag.era-flair.soundcloud-flair {
  border-color: #ffb15c !important;
  background: #f68209 !important;
  color: #080808 !important;
  box-shadow: 0 0 18px rgba(246, 130, 9, .3) !important;
}

@media (max-width: 440px) {
  .site-header {
    padding-inline: 12px;
  }
  .tabs {
    width: calc(100% - 12px);
  }
  main,
  .site-footer {
    width: calc(100% - 16px);
  }
  .hero {
    padding-inline: 4px;
  }
  .hero h1 {
    font-size: clamp(36px, 12vw, 48px);
  }
  .song-meta-grid,
  .song-grid:not(.single-result) .song-meta-grid {
    grid-template-columns: 1fr;
  }
  .file-row-head {
    align-items: flex-start;
  }
  .file-name strong,
  .file-name span {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .floating-player {
    width: calc(100% - 12px);
    bottom: max(6px, env(safe-area-inset-bottom));
  }
  .player-close {
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .full-player.player-opening,
  .full-player.player-opening .player-layout {
    animation: none;
  }
}

/* Final typography, song-card, and Apple-style player behavior. */
:root {
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
* {
  font-family: var(--apple-font) !important;
}

*,
*::before,
*::after,
strong,
b,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400 !important;
}

.song-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.song-grid.single-result {
  grid-template-columns: minmax(0, min(100%, 1120px));
}

.song-card {
  min-height: 0;
  padding: clamp(28px, 3vw, 38px);
  border-radius: 28px;
  border-color: color-mix(in srgb, var(--era-color) 72%, rgba(255, 255, 255, 0.28));
  background: color-mix(in srgb, var(--era-color) 68%, transparent);
}

.song-card:hover {
  border-color: color-mix(in srgb, var(--era-color) 82%, white);
  background: color-mix(in srgb, var(--era-color) 72%, transparent);
}

.song-card::before {
  inset: 0;
  background-image:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--era-color) 94%, transparent) 0%,
      color-mix(in srgb, var(--era-color) 72%, transparent) 48%,
      color-mix(in srgb, var(--era-color) 22%, transparent) 100%
    ),
    var(--song-art);
  background-size: cover;
  background-position: center;
  opacity: 1;
}

.song-card::after {
  display: none;
}

.song-copy {
  gap: 13px;
}

.song-head h2 {
  font-size: clamp(34px, 4vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.song-grid:not(.single-result) .song-head h2 {
  font-size: clamp(29px, 3vw, 43px);
}

.song-head p {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
}

.song-tags {
  align-items: center;
  min-height: 0;
}

.song-tag {
  min-height: 0;
  padding: 6px 10px;
  font-size: 10px;
  line-height: 1;
}

.song-meta-grid,
.song-grid:not(.single-result) .song-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meta-block,
.file-row {
  background: rgba(6, 6, 8, 0.58);
  border-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(18px);
}

.meta-block {
  min-width: 0;
  padding: 13px 14px;
}

.meta-block > span {
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
}

.meta-block > strong,
.metadata-value,
.metadata-search-text,
.inline-file-link {
  color: rgba(255, 255, 255, 0.96);
  font-size: 13px;
  line-height: 1.45;
}

.metadata-search-text,
.inline-file-link,
.metadata-search-text:hover,
.metadata-search-text:focus-visible,
.inline-file-link:hover,
.inline-file-link:focus-visible,
.file-name,
.file-name * {
  text-decoration: none !important;
}

.full-player {
  --player-era-color: #48535b;
  background: var(--player-era-color) !important;
}

.player-backdrop {
  inset: 0 !important;
  opacity: 1 !important;
  background: var(--player-era-color) !important;
  background-image: none !important;
  filter: none !important;
  transform: none !important;
}

.player-info h2 {
  font-family: var(--apple-font) !important;
}

.timeline input,
#playerVolume {
  --seek-progress: 0%;
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.98) 0 var(--seek-progress),
    rgba(255, 255, 255, 0.26) var(--seek-progress) 100%
  );
}

.timeline input::-webkit-slider-thumb,
#playerVolume::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.timeline input:hover::-webkit-slider-thumb,
.timeline input:focus-visible::-webkit-slider-thumb,
#playerVolume::-webkit-slider-thumb {
  opacity: 1;
}

.timeline input::-moz-range-thumb,
#playerVolume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: white;
}

.player-extra-controls {
  justify-content: flex-start;
}

.player-volume-menu {
  position: relative;
  display: inline-flex;
}

.player-volume-toggle {
  width: 40px;
  height: 40px;
}

.player-volume-popup:not([hidden]) {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 160px;
  padding: 15px;
  display: grid;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(26, 26, 28, 0.82);
  backdrop-filter: blur(28px);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28);
}

#playerVolume {
  --seek-progress: 100%;
}

.lyrics-line {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.28);
  font-size: clamp(30px, 3vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-align: left;
  cursor: pointer;
}

.lyrics-line:hover,
.lyrics-line:focus-visible {
  color: rgba(255, 255, 255, 0.68);
  outline: 0;
}

.lyrics-line.near,
.lyrics-line.mobile-near {
  color: rgba(255, 255, 255, 0.48);
  font-size: clamp(30px, 3vw, 50px);
}

.lyrics-line.active {
  color: white;
  font-size: clamp(30px, 3vw, 50px);
}

.full-player.player-closing {
  animation: player-fade-out 0.28s ease both;
}

.full-player.player-closing .player-layout {
  animation: player-content-out 0.28s ease both;
}

@keyframes player-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes player-content-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(22px) scale(0.98); }
}

.instrumental-preview {
  width: min(820px, calc(100vw - 32px));
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  background: rgba(12, 12, 14, 0.94);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}

.instrumental-preview > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
}

.instrumental-preview-copy {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.instrumental-preview-copy h2,
.instrumental-preview-copy p {
  margin: 0;
  overflow-wrap: anywhere;
}

.instrumental-preview-copy audio {
  width: 100%;
}

@media (max-width: 760px) {
  .song-grid,
  .song-grid:not(.single-result) {
    grid-template-columns: 1fr;
  }

  .song-card {
    padding: 20px;
    border-radius: 22px;
  }

  .song-meta-grid,
  .song-grid:not(.single-result) .song-meta-grid {
    grid-template-columns: 1fr;
  }

  .lyrics-line,
  .lyrics-line.near,
  .lyrics-line.mobile-near,
  .lyrics-line.active {
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 1.08;
  }

  .instrumental-preview {
    grid-template-columns: 1fr;
  }

  .instrumental-preview > img {
    width: min(72vw, 300px);
    margin: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .full-player.player-closing,
  .full-player.player-closing .player-layout {
    animation: none;
  }
}

/* Reference-accurate card and lyrics-player layout. */
:root {
  --reference-font: Inter, "SF Pro Display", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
* {
  font-family: var(--reference-font) !important;
  font-weight: 400 !important;
}

.hero h1 {
  font-weight: 900 !important;
}

.song-grid.single-result {
  grid-template-columns: minmax(0, 100%);
}

.song-card {
  min-height: 0;
  padding: clamp(24px, 2.7vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 28px;
  background: rgba(4, 4, 7, 0.84);
  box-shadow:
    0 22px 72px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.song-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(4, 4, 7, 0.84);
}

.song-card::before {
  inset: 0;
  z-index: -2;
  display: block;
  background-image: var(--song-art);
  background-size: cover;
  background-position: right center;
  opacity: 1;
}

.song-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  background:
    linear-gradient(90deg, rgba(3, 3, 6, 0.96) 0%, rgba(3, 3, 6, 0.84) 39%, rgba(3, 3, 6, 0.18) 65%, rgba(3, 3, 6, 0.04) 100%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--era-color), transparent 52%), transparent 48%);
  pointer-events: none;
}

.song-copy {
  gap: 12px;
}

.song-tags {
  gap: 8px;
  margin-bottom: 0;
}

.song-tag {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
}

.status-flair {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.era-flair {
  border-color: color-mix(in srgb, var(--tag-a), white 20%);
  background: color-mix(in srgb, var(--tag-a), transparent 74%);
  box-shadow: none;
}

.song-head h2,
.song-grid:not(.single-result) .song-head h2 {
  margin: 0;
  font-size: clamp(30px, 4.8vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.song-head p {
  margin: 8px 0 0;
  color: #d7d7e3;
  font-size: 15px;
}

.song-grid.single-result .song-meta-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.song-grid:not(.single-result) .song-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.song-meta-grid {
  margin-top: 2px;
  gap: 10px;
}

.meta-block {
  min-height: 60px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(10px);
}

.meta-block > span {
  margin-bottom: 5px;
  color: #9999ad;
  font-size: 12px;
}

.meta-block > strong,
.metadata-value,
.metadata-search-text,
.inline-file-link {
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}

.song-files-section {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.song-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.song-files-section h3 {
  margin: 0;
  color: #d7d7e3;
  font-size: 13px;
}

.lyrics-image-modal {
  position: fixed;
  inset: 0;
  z-index: 100500 !important;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(18px);
}

.lyrics-image-modal,
.lyrics-image-modal * {
  font-family: var(--am-font) !important;
}

.full-player .lyrics-image-trigger {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 8px !important;
  justify-self: center !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.full-player .lyrics-image-trigger[hidden] {
  display: none !important;
}

.full-player .lyrics-image-trigger svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.lyrics-image-modal[hidden] {
  display: none !important;
}

/* Lyrics-image action is a real pill: its label never escapes the button. */
.full-player .lyrics-image-trigger {
  width: auto !important;
  min-width: 136px !important;
  height: 38px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  background: transparent !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.full-player .lyrics-image-trigger[hidden] { display: none !important; }
.full-player .lyrics-image-trigger svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}

/* Genius/static lyrics are scrollable rather than being cut off by the fullscreen player. */
.full-player.has-static-lyrics .lyrics-panel {
  position: relative !important;
  overflow: hidden !important;
}
.full-player.has-static-lyrics .lyrics-lines {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 34px 16px 74px 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 94%, transparent) !important;
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 94%, transparent) !important;
}
.lyrics-scroll-hint:not([hidden]) {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(11, 10, 16, 0.74);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.lyrics-scroll-hint svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 900px) {
  .full-player.has-static-lyrics .lyrics-panel {
    height: min(820px, calc(100dvh - 72px)) !important;
  }
}
@media (max-width: 899px) {
  .full-player.has-static-lyrics .lyrics-panel {
    height: min(60dvh, 560px) !important;
    min-height: 320px !important;
  }
  .full-player.has-static-lyrics .lyrics-lines {
    padding: 28px 8px 72px 0 !important;
  }
  .lyrics-scroll-hint:not([hidden]) {
    right: 10px;
    bottom: 12px;
    font-size: 11px;
  }
}

.lyrics-image-card {
  width: min(1180px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 28px;
  background: rgba(13, 13, 18, 0.96);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65);
}

.lyrics-image-head,
.lyrics-image-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.lyrics-image-head span,
.lyrics-image-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.lyrics-image-format {
  display: inline-flex;
  gap: 6px;
}

.lyrics-image-format [aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.lyrics-image-head h2 {
  margin: 3px 0 2px;
  font-size: 26px;
}

.lyrics-image-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.lyrics-image-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}

.lyrics-image-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
  gap: 22px;
  margin: 22px 0;
}

.lyrics-image-selector {
  max-height: 650px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 5px;
}

.lyrics-image-line-choice {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.lyrics-image-line-choice > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.lyrics-image-line-choice strong {
  font-size: 13px;
  line-height: 1.35;
}

.lyrics-image-line-choice.selected {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.14);
}

.lyrics-image-preview {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 16px;
  border-radius: 20px;
  background: #08080b;
}

#lyricsImageCanvas {
  display: block;
  width: min(100%, 700px);
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.5);
}

@media (max-width: 760px) {
  .lyrics-image-modal {
    padding: 8px;
  }

  .lyrics-image-card {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    border-radius: 21px;
  }

  .lyrics-image-workspace {
    grid-template-columns: 1fr;
  }

  .lyrics-image-selector {
    max-height: min(46dvh, 360px);
    min-height: 180px;
  }

  .lyrics-image-preview {
    padding: 8px;
  }

  #lyricsImageCanvas {
    width: min(100%, 520px);
  }

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

.file-row {
  padding: 12px;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.46);
}

.file-name strong {
  color: #fff;
  font-size: 14px;
}

.file-name span {
  color: #aaaabb;
  font-size: 11px;
}

.file-kind-tag {
  padding: 5px 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.15);
}

.file-inline-play {
  width: 36px;
  height: 36px;
}

.file-progress-rail {
  height: 7px;
  background: rgba(255, 255, 255, 0.18);
}

.file-buttons {
  gap: 9px;
}

.file-button {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.full-player {
  --player-era-color-2: #603a2c;
  padding: 54px 46px;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(110deg, var(--player-era-color) 0%, var(--player-era-color-2) 100%) !important;
}

.player-backdrop {
  inset: 0 !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 20% 48%, color-mix(in srgb, var(--player-era-color), #d7b34a 15%) 0%, transparent 48%),
    linear-gradient(110deg, var(--player-era-color) 0%, var(--player-era-color-2) 100%) !important;
  filter: none !important;
  transform: none !important;
}

.player-layout {
  width: min(1060px, 100%);
  height: min(690px, calc(100dvh - 80px));
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-areas: "primary lyrics";
  gap: 74px;
  align-items: center;
}

.player-primary {
  width: 340px;
  gap: 14px;
  justify-self: center;
  text-align: center;
}

.player-art {
  width: 340px;
  max-width: 100%;
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.25);
}

.player-info {
  padding: 8px 0 0;
  text-align: center;
}

.player-info h2 {
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.player-info > p:not(.eyebrow) {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
}

.timeline {
  gap: 8px;
}

.timeline div {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.player-controls {
  width: 240px;
  margin: 4px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: 74px 42px;
  grid-template-areas:
    "prev play next"
    "shuffle . repeat";
  justify-content: center;
  align-items: center;
  gap: 14px 16px;
}

#playerShuffle { grid-area: shuffle; }
#prevTrack { grid-area: prev; }
#fullPlay { grid-area: play; }
#nextTrack { grid-area: next; }
#playerRepeat { grid-area: repeat; }

.player-controls .skip-button {
  width: 50px;
  height: 50px;
  justify-self: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.player-controls .main-play {
  width: 72px;
  height: 72px;
  justify-self: center;
  border: 2px solid rgba(20, 20, 20, 0.9);
  border-radius: 50%;
  background: white;
  color: #111;
}

.player-controls .player-mode-button {
  width: 36px;
  height: 36px;
  justify-self: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
}

.player-extra-controls {
  width: 100%;
  justify-content: center;
  gap: 10px;
}

.player-volume-toggle {
  width: auto;
  min-width: 98px;
  height: 36px;
  padding: 0 14px;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.player-volume-toggle::after {
  content: "Volume";
  font-size: 12px;
}

.player-volume-toggle svg {
  width: 16px;
  height: 16px;
}

.player-extra-controls .tiny-button {
  min-height: 36px;
  border-radius: 999px;
}

.lyrics-panel {
  width: 100%;
  height: min(620px, 76vh);
  align-self: center;
}

.lyrics-head {
  min-height: 28px;
  justify-content: flex-end;
}

.lyrics-head span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.lyrics-lines {
  height: calc(100% - 28px);
  padding: 55px 0 95px;
  gap: 24px;
}

.lyrics-line,
.lyrics-line.near,
.lyrics-line.mobile-near,
.lyrics-line.active {
  font-size: clamp(34px, 3.25vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.lyrics-line {
  color: rgba(255, 255, 255, 0.2);
}

.lyrics-line.near,
.lyrics-line.mobile-near {
  color: rgba(255, 255, 255, 0.38);
}

.lyrics-line.active {
  color: #fff;
}

@media (max-width: 980px) {
  .song-grid.single-result .song-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .full-player {
    padding: max(56px, env(safe-area-inset-top)) 18px max(70px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .player-layout {
    width: min(520px, 100%);
    height: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "primary"
      "lyrics";
    gap: 30px;
  }

  .player-primary {
    width: min(100%, 400px);
  }

  .player-art {
    width: min(82vw, 400px);
    margin: auto;
  }

  .lyrics-panel {
    height: min(520px, 58vh);
  }

  .lyrics-line,
  .lyrics-line.near,
  .lyrics-line.mobile-near,
  .lyrics-line.active {
    font-size: clamp(28px, 8vw, 42px) !important;
  }
}

@media (max-width: 560px) {
  .song-card {
    padding: 18px;
    border-radius: 22px;
  }

  .song-grid.single-result .song-meta-grid,
  .song-grid:not(.single-result) .song-meta-grid {
    grid-template-columns: 1fr;
  }

  .song-head h2,
  .song-grid:not(.single-result) .song-head h2 {
    font-size: clamp(30px, 10vw, 42px);
  }

  .player-info h2 {
    font-size: 30px;
  }
}

/* === Apple Music player v4: clean, safe override === */
:root {
  --am-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --sf-play-fill: url("https://raw.githubusercontent.com/andrewtavis/sf-symbols-online/master/glyphs_white/play.fill.png");
  --sf-pause-fill: url("https://raw.githubusercontent.com/andrewtavis/sf-symbols-online/master/glyphs_white/pause.fill.png");
  --sf-backward-fill: url("https://raw.githubusercontent.com/andrewtavis/sf-symbols-online/master/glyphs_white/backward.fill.png");
  --sf-forward-fill: url("https://raw.githubusercontent.com/andrewtavis/sf-symbols-online/master/glyphs_white/forward.fill.png");
  --sf-shuffle: url("https://raw.githubusercontent.com/andrewtavis/sf-symbols-online/master/glyphs_white/shuffle.png");
  --sf-repeat: url("https://raw.githubusercontent.com/andrewtavis/sf-symbols-online/master/glyphs_white/repeat.png");
  --sf-speaker-fill: url("https://raw.githubusercontent.com/andrewtavis/sf-symbols-online/master/glyphs_white/speaker.fill.png");
  --sf-speaker-3-fill: url("https://raw.githubusercontent.com/andrewtavis/sf-symbols-online/master/glyphs_white/speaker.3.fill.png");
}

.full-player[hidden],
.floating-player[hidden],
.lyrics-submitter[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.full-player,
.full-player * {
  font-family: var(--am-font) !important;
}

.full-player {
  --am-cover: min(430px, 28vw, 52vh);
  --am-left: min(430px, 28vw, 52vh);
  --player-era-color: #5b646c;
  --player-era-color-2: #34231f;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  padding: 42px clamp(48px, 6vw, 86px) !important;
  background:
    radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--player-era-color) 76%, transparent) 0%, transparent 34%),
    radial-gradient(circle at 86% 76%, color-mix(in srgb, var(--player-era-color-2) 72%, transparent) 0%, transparent 44%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--player-era-color) 70%, #0d1117) 0%,
      color-mix(in srgb, var(--player-era-color-2) 54%, #111) 100%) !important;
  color: white !important;
  isolation: isolate !important;
}

.full-player::before {
  content: "" !important;
  position: absolute !important;
  inset: -18% !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 28% 26%, color-mix(in srgb, var(--player-era-color) 86%, transparent), transparent 38%),
    radial-gradient(circle at 72% 70%, color-mix(in srgb, var(--player-era-color-2) 80%, transparent), transparent 45%) !important;
  filter: blur(70px) saturate(1.45) brightness(.98) !important;
  transform: scale(1.05) !important;
  opacity: .82 !important;
  pointer-events: none !important;
}

.full-player::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18) 100%) !important;
  pointer-events: none !important;
}

.player-backdrop {
  display: none !important;
  background-image: none !important;
}

.player-close {
  position: fixed !important;
  top: max(20px, env(safe-area-inset-top)) !important;
  right: max(22px, env(safe-area-inset-right)) !important;
  z-index: 6 !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.13) !important;
  color: white !important;
  backdrop-filter: blur(20px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
.player-close svg { width: 24px !important; height: 24px !important; fill: currentColor !important; opacity: .94 !important; }
.player-close svg path { fill: currentColor !important; stroke: none !important; }

.player-layout {
  position: relative !important;
  z-index: 2 !important;
  width: min(1260px, calc(100vw - 120px)) !important;
  height: min(760px, calc(100dvh - 90px)) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: var(--am-left) minmax(420px, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: clamp(90px, 10vw, 165px) !important;
  padding: 0 !important;
  margin: 0 auto !important;
  text-align: left !important;
}

.full-player.no-lyrics:not(.lrc-open) .player-layout {
  width: var(--am-left) !important;
  grid-template-columns: var(--am-left) !important;
  column-gap: 0 !important;
}
.full-player.no-lyrics:not(.lrc-open) .lyrics-panel { display: none !important; }
.full-player.lrc-open .lyrics-panel { display: none !important; }
.full-player.lrc-open .player-layout {
  grid-template-columns: var(--am-left) minmax(420px, 560px) !important;
  column-gap: clamp(82px, 8vw, 140px) !important;
}

.player-primary {
  width: var(--am-left) !important;
  max-width: var(--am-left) !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: center !important;
  justify-items: stretch !important;
  gap: 0 !important;
  text-align: left !important;
}

.player-art {
  width: var(--am-cover) !important;
  height: var(--am-cover) !important;
  max-width: 100% !important;
  margin: 0 0 26px 0 !important;
  border: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.28) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.28) !important;
}
.player-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  transform: none !important;
}

.player-info {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  text-align: left !important;
}
.player-info h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(20px, 1.55vw, 27px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.032em !important;
  overflow-wrap: anywhere !important;
}
.player-info p {
  margin: 4px 0 0 !important;
  color: rgba(255,255,255,.72) !important;
  font-size: clamp(14px, 1.05vw, 18px) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
}

.timeline {
  width: 100% !important;
  display: grid !important;
  gap: 7px !important;
  margin: 0 0 22px !important;
}
.timeline input,
#playerVolume {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 5px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: none !important;
  background: linear-gradient(to right, rgba(255,255,255,.96) var(--seek-progress, 0%), rgba(255,255,255,.28) var(--seek-progress, 0%)) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.timeline input::-webkit-slider-thumb,
#playerVolume::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.timeline input::-moz-range-thumb,
#playerVolume::-moz-range-thumb {
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.timeline div,
.fullTimeRow {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  color: rgba(255,255,255,.68) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

.player-controls {
  width: 100% !important;
  margin: 0 0 18px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;
}
.player-controls button,
.player-controls .icon-button,
.player-controls .main-play {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: white !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.player-controls button:hover,
.player-controls button:focus-visible {
  background: transparent !important;
  transform: scale(1.035) !important;
}
.player-controls svg { display: none !important; }
.player-controls button::before,
#playerVolumeToggle::before,
#miniPlay::before {
  content: "" !important;
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.18)) !important;
  opacity: .98 !important;
}
#playerShuffle::before { background-image: var(--sf-shuffle) !important; width: 22px !important; height: 22px !important; opacity: .82 !important; }
#prevTrack::before { background-image: var(--sf-backward-fill) !important; width: 37px !important; height: 37px !important; }
#fullPlay::before { background-image: var(--sf-play-fill) !important; width: 37px !important; height: 37px !important; }
#fullPlay.is-playing::before { background-image: var(--sf-pause-fill) !important; width: 37px !important; height: 37px !important; }
#nextTrack::before { background-image: var(--sf-forward-fill) !important; width: 37px !important; height: 37px !important; }
#playerRepeat::before { background-image: var(--sf-repeat) !important; width: 22px !important; height: 22px !important; opacity: .82 !important; }
#playerShuffle.active::before,
#playerRepeat.active::before { opacity: 1 !important; filter: drop-shadow(0 0 10px rgba(255,255,255,.68)) !important; }

.player-extra-controls {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  justify-items: stretch !important;
  align-items: center !important;
}
.player-volume-menu {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 20px 1fr 22px !important;
  align-items: center !important;
  gap: 12px !important;
}
.player-volume-toggle {
  pointer-events: none !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: grid !important;
  place-items: center !important;
}
.player-volume-toggle svg { display: none !important; }
#playerVolumeToggle::before { background-image: var(--sf-speaker-fill) !important; width: 17px !important; height: 17px !important; opacity: .78 !important; }
.player-volume-menu::after {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--sf-speaker-3-fill) center/contain no-repeat !important;
  opacity: .78 !important;
}
.player-volume-popup {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}
#playerVolume { --seek-progress: 100%; height: 5px !important; }
#toggleLyricsSubmit {
  justify-self: center !important;
  margin-top: 4px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.lyrics-panel {
  width: 100% !important;
  height: min(62vh, 610px) !important;
  min-height: 360px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  overflow: hidden !important;
}
.lyrics-head { display: none !important; }
.lyrics-lines {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 9vh 0 12vh !important;
  display: grid !important;
  align-content: start !important;
  gap: 26px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 13%, black 82%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, black 13%, black 82%, transparent 100%) !important;
}
.lyrics-lines::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.lyrics-line {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.23) !important;
  font-size: clamp(34px, 3.1vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.052em !important;
  text-align: left !important;
  white-space: normal !important;
  transition: color .22s ease, filter .22s ease, opacity .22s ease !important;
}
.lyrics-line.near { color: rgba(255,255,255,.36) !important; filter: blur(1.6px) !important; }
.lyrics-line.active { color: rgba(255,255,255,.96) !important; filter: none !important; transform: none !important; }
.lyrics-empty {
  align-self: center !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
}

.lyrics-submitter:not([hidden]) {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-height: min(700px, calc(100dvh - 105px)) !important;
  overflow-y: auto !important;
  display: grid !important;
  gap: 13px !important;
  padding: 22px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 24px !important;
  background: rgba(8,9,11,.48) !important;
  box-shadow: 0 24px 90px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(30px) saturate(1.25) !important;
  text-align: left !important;
}
.lyrics-generator-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; }
.lyrics-generator-head strong { display: block !important; color: #fff !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
.lyrics-generator-head span { display: block !important; margin-top: 4px !important; color: rgba(255,255,255,.66) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.35 !important; }
#closeLyricsSubmit { flex: 0 0 auto !important; padding: 8px 12px !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.14) !important; color: #fff !important; font-size: 12px !important; font-weight: 600 !important; }
.lyrics-submitter input,
.lyrics-submitter textarea {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.23) !important;
  color: #fff !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  outline: none !important;
}
.lyrics-submitter textarea { min-height: 120px !important; resize: vertical !important; }
.lyrics-generator-actions { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; }
.lyrics-generator-actions .soft-button,
#submitLyricsButton {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 13px !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.lyrics-generator-actions .primary-button,
#submitLyricsButton.primary-button { background: rgba(255,255,255,.9) !important; color: #111 !important; }
.lyrics-generator-current {
  min-height: 100px !important;
  padding: 14px !important;
  display: grid !important;
  gap: 7px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.20) !important;
}
.lyrics-generator-current span,
.lyrics-generator-current small { color: rgba(255,255,255,.58) !important; font-size: 11px !important; font-weight: 500 !important; }
.lyrics-generator-current strong { color: #fff !important; font-size: 20px !important; line-height: 1.18 !important; font-weight: 650 !important; }
.generated-lrc { font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; font-size: 12px !important; }

/* Floating player stays normal and never blocks page after closing full player */
.floating-player { z-index: 80 !important; }
body:not(.player-is-open) .full-player[hidden] { display: none !important; }

@media (max-width: 899px) {
  .full-player {
    --am-cover: min(100vw, 47dvh) !important;
    --am-left: min(100vw, 47dvh) !important;
    place-items: start center !important;
    overflow-y: auto !important;
    padding: max(42px, env(safe-area-inset-top)) 0 max(22px, env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 50% 4%, color-mix(in srgb, var(--player-era-color) 84%, transparent) 0%, transparent 34%),
      radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--player-era-color-2) 78%, transparent) 0%, transparent 52%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--player-era-color) 68%, #101010) 0%,
        color-mix(in srgb, var(--player-era-color-2) 56%, #070707) 100%) !important;
  }
  .full-player::before {
    inset: -12% !important;
    filter: blur(58px) saturate(1.5) brightness(1.0) !important;
    opacity: .78 !important;
  }
  .player-close {
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(255,255,255,.14) !important;
  }
  .player-close svg { width: 20px !important; height: 20px !important; }
  .player-layout,
  .full-player.no-lyrics:not(.lrc-open) .player-layout,
  .full-player.lrc-open .player-layout {
    width: 100% !important;
    min-height: calc(100dvh - max(42px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom))) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
  }
  .player-primary {
    width: min(100%, 430px) !important;
    max-width: none !important;
    padding: 0 19px !important;
    justify-items: center !important;
    align-content: start !important;
    display: grid !important;
  }
  .player-art {
    width: calc(100vw - 38px) !important;
    height: min(calc(100vw - 38px), 46dvh) !important;
    max-width: 392px !important;
    max-height: 392px !important;
    min-height: 300px !important;
    margin: 16px auto 18px !important;
    border-radius: 23px !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.24) !important;
  }
  .player-info {
    width: min(calc(100vw - 38px), 392px) !important;
    margin: 0 auto 10px !important;
    text-align: left !important;
  }
  .player-info h2 { font-size: 21px !important; font-weight: 700 !important; line-height: 1.05 !important; }
  .player-info p { font-size: 17px !important; font-weight: 500 !important; margin-top: 3px !important; }
  .timeline {
    width: min(calc(100vw - 38px), 392px) !important;
    margin: 0 auto 27px !important;
    gap: 10px !important;
  }
  .timeline input { height: 5px !important; }
  .timeline div { font-size: 12px !important; }
  .player-controls {
    width: min(calc(100vw - 82px), 316px) !important;
    margin: 0 auto 28px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.15fr 1fr !important;
    gap: 38px !important;
  }
  #playerShuffle,
  #playerRepeat { display: none !important; }
  .player-controls button,
  .player-controls .main-play,
  .player-controls .icon-button {
    width: 54px !important;
    height: 54px !important;
  }
  #prevTrack::before,
  #nextTrack::before { width: 36px !important; height: 36px !important; }
  #fullPlay::before,
  #fullPlay.is-playing::before { width: 40px !important; height: 40px !important; }
  .player-extra-controls {
    width: min(calc(100vw - 38px), 392px) !important;
    margin: 0 auto !important;
    gap: 20px !important;
  }
  .player-volume-menu {
    width: 100% !important;
    grid-template-columns: 18px 1fr 20px !important;
    gap: 12px !important;
  }
  #playerVolume { height: 5px !important; }
  #toggleLyricsSubmit {
    justify-self: center !important;
    margin-top: 0 !important;
    padding: 9px 14px !important;
    background: rgba(255,255,255,.13) !important;
  }
  .lyrics-panel {
    width: min(calc(100vw - 38px), 392px) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 26px auto 0 !important;
    display: block !important;
  }
  .full-player.no-lyrics:not(.lrc-open) .lyrics-panel { display: none !important; }
  .lyrics-lines {
    height: auto !important;
    max-height: 34dvh !important;
    padding: 5vh 0 7vh !important;
    gap: 15px !important;
  }
  .lyrics-line { font-size: clamp(24px, 7.4vw, 34px) !important; letter-spacing: -.042em !important; }
  .lyrics-empty { font-size: 16px !important; }
  .lyrics-submitter:not([hidden]) {
    position: fixed !important;
    z-index: 12 !important;
    inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px !important;
    width: auto !important;
    max-height: min(78dvh, 680px) !important;
    border-radius: 28px 28px 22px 22px !important;
    padding: 18px !important;
    background: rgba(11,12,15,.82) !important;
    backdrop-filter: blur(34px) saturate(1.35) !important;
    box-shadow: 0 -22px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  .full-player.lrc-open::after {
    background: rgba(0,0,0,.26) !important;
    backdrop-filter: blur(4px) !important;
  }
}

@media (max-width: 390px) {
  .player-art {
    width: calc(100vw - 30px) !important;
    height: calc(100vw - 30px) !important;
    min-height: 0 !important;
    margin-top: 12px !important;
  }
  .player-info,
  .timeline,
  .player-extra-controls { width: calc(100vw - 30px) !important; }
  .player-controls { gap: 30px !important; }
}

@media (max-height: 740px) and (max-width: 899px) {
  .player-art {
    width: min(calc(100vw - 52px), 330px) !important;
    height: min(calc(100vw - 52px), 330px) !important;
    min-height: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }
  .timeline { margin-bottom: 16px !important; }
  .player-controls { margin-bottom: 16px !important; }
}

/* === Apple Music player v5: visual alignment fixes from latest screenshots === */
.full-player,
.full-player * {
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

.full-player button:focus,
.full-player button:focus-visible,
.full-player input:focus,
.full-player input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 900px) {
  .full-player {
    --am-cover: clamp(390px, 24.5vw, 500px) !important;
    --am-left: clamp(390px, 24.5vw, 500px) !important;
    padding: 34px clamp(56px, 5vw, 96px) !important;
  }

  .player-layout {
    width: min(1500px, calc(100vw - 90px)) !important;
    height: min(820px, calc(100dvh - 72px)) !important;
    grid-template-columns: var(--am-left) minmax(480px, 680px) !important;
    column-gap: clamp(130px, 11.5vw, 245px) !important;
    align-items: center !important;
    transform: translateY(-2.6vh) !important;
  }

  .full-player.no-lyrics:not(.lrc-open) .player-layout {
    width: var(--am-left) !important;
    grid-template-columns: var(--am-left) !important;
    column-gap: 0 !important;
    transform: translateY(-1vh) !important;
  }

  .full-player.lrc-open .player-layout {
    grid-template-columns: var(--am-left) minmax(480px, 620px) !important;
    column-gap: clamp(105px, 9vw, 185px) !important;
  }

  .player-primary {
    width: var(--am-left) !important;
    max-width: var(--am-left) !important;
  }

  .player-art {
    width: var(--am-cover) !important;
    height: var(--am-cover) !important;
    border-radius: 28px !important;
    margin-bottom: 24px !important;
  }

  .player-info {
    margin-bottom: 11px !important;
  }

  .player-info h2 {
    font-size: clamp(23px, 1.55vw, 30px) !important;
    font-weight: 650 !important;
    letter-spacing: -.035em !important;
  }

  .player-info p {
    font-size: clamp(16px, 1.02vw, 19px) !important;
    color: rgba(255,255,255,.72) !important;
  }

  .timeline {
    margin-bottom: 24px !important;
    gap: 9px !important;
  }

  .timeline input,
  #playerVolume {
    height: 4px !important;
  }

  .timeline div,
  .fullTimeRow {
    font-size: 12px !important;
    color: rgba(255,255,255,.66) !important;
  }

  .player-controls {
    width: 100% !important;
    margin: 0 0 23px !important;
    grid-template-columns: repeat(5, 1fr) !important;
    justify-items: center !important;
  }

  .player-controls button,
  .player-controls .icon-button,
  .player-controls .main-play {
    width: 52px !important;
    height: 52px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  #playerShuffle::before,
  #playerRepeat::before {
    width: 21px !important;
    height: 21px !important;
    opacity: .80 !important;
  }

  #prevTrack::before,
  #nextTrack::before {
    width: 35px !important;
    height: 35px !important;
  }

  #fullPlay::before,
  #fullPlay.is-playing::before {
    width: 38px !important;
    height: 38px !important;
  }

  .player-extra-controls {
    width: 100% !important;
    gap: 12px !important;
  }

  .lyrics-panel {
    height: min(78vh, 760px) !important;
    min-height: 520px !important;
    overflow: hidden !important;
    transform: translateY(1vh) !important;
  }

  .lyrics-lines {
    height: 100% !important;
    padding: 3vh 0 18vh !important;
    gap: clamp(23px, 3vh, 34px) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 78%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 78%, transparent 100%) !important;
  }

  .lyrics-line {
    font-size: clamp(35px, 3vw, 52px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    color: rgba(255,255,255,.22) !important;
  }

  .lyrics-line.near {
    color: rgba(255,255,255,.34) !important;
    filter: blur(1.4px) !important;
  }

  .lyrics-line.active {
    color: #fff !important;
    filter: none !important;
  }
}

/* Kill the old volume chip styles that were leaking through and making the visual bug. */
.full-player .player-volume-toggle::after,
.full-player .player-volume-toggle::before {
  content: "" !important;
}
.full-player .player-volume-toggle::after {
  display: none !important;
}
.full-player #playerVolumeToggle::before {
  display: block !important;
  background-image: var(--sf-speaker-fill) !important;
}
.full-player .player-volume-popup,
.full-player .player-volume-popup:not([hidden]) {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.full-player .player-volume-menu {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) 20px !important;
  align-items: center !important;
  gap: 12px !important;
}
.full-player .player-volume-menu::after {
  content: "" !important;
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  background: var(--sf-speaker-3-fill) center/contain no-repeat !important;
  opacity: .78 !important;
}
.full-player #playerVolume {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  background: linear-gradient(to right, rgba(255,255,255,.96) var(--seek-progress, 100%), rgba(255,255,255,.30) var(--seek-progress, 100%)) !important;
}

@media (max-width: 899px) {
  .full-player {
    --am-cover: min(calc(100vw - 28px), 47dvh) !important;
    --am-left: min(calc(100vw - 28px), 47dvh) !important;
    padding-top: max(34px, env(safe-area-inset-top)) !important;
  }

  .player-layout,
  .full-player.no-lyrics:not(.lrc-open) .player-layout,
  .full-player.lrc-open .player-layout {
    min-height: calc(100dvh - max(34px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
    padding-bottom: 18px !important;
  }

  .player-primary {
    width: 100% !important;
    padding: 0 14px !important;
  }

  .player-art {
    width: var(--am-cover) !important;
    height: var(--am-cover) !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 10px auto 19px !important;
    border-radius: 30px !important;
  }

  .player-info,
  .timeline,
  .player-extra-controls {
    width: var(--am-cover) !important;
    max-width: var(--am-cover) !important;
  }

  .player-info {
    margin-bottom: 12px !important;
  }

  .player-info h2 {
    font-size: 22px !important;
    font-weight: 650 !important;
  }

  .player-info p {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  .timeline {
    gap: 9px !important;
    margin-bottom: 28px !important;
  }

  .timeline input {
    height: 5px !important;
  }

  .player-controls {
    width: min(320px, calc(100vw - 86px)) !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    margin-bottom: 30px !important;
  }

  .player-controls button,
  .player-controls .main-play,
  .player-controls .icon-button {
    width: 56px !important;
    height: 56px !important;
    outline: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  #prevTrack::before,
  #nextTrack::before {
    width: 39px !important;
    height: 39px !important;
  }
  #fullPlay::before,
  #fullPlay.is-playing::before {
    width: 42px !important;
    height: 42px !important;
  }

  .player-extra-controls {
    gap: 16px !important;
  }

  .lyrics-panel {
    width: var(--am-cover) !important;
    margin-top: 24px !important;
  }

  .lyrics-lines {
    max-height: 47dvh !important;
    padding: 10dvh 0 13dvh !important;
    gap: 18px !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 78%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 78%, transparent 100%) !important;
  }

  .lyrics-line {
    font-size: clamp(28px, 8.5vw, 41px) !important;
    line-height: 1.08 !important;
  }

  .lyrics-submitter:not([hidden]) {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    right: 8px !important;
    max-height: min(82dvh, 720px) !important;
  }
}


/* === Apple Music player v6: exact visual fixes from latest screenshots === */
.full-player,
.full-player * {
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

.full-player {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--player-era-color-2, #4b5962) 64%, transparent), transparent 34%),
    radial-gradient(circle at 82% 74%, color-mix(in srgb, var(--player-era-color, #303942) 50%, transparent), transparent 44%),
    linear-gradient(140deg,
      color-mix(in srgb, var(--player-era-color, #303942) 78%, #222) 0%,
      color-mix(in srgb, var(--player-era-color-2, #51606a) 62%, #181a1d) 100%) !important;
}

.full-player .player-backdrop {
  position: fixed !important;
  inset: -28vh -28vw !important;
  z-index: 0 !important;
  opacity: .66 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--player-era-color-2, #65727b) 72%, transparent), transparent 38%),
    radial-gradient(circle at 75% 78%, color-mix(in srgb, var(--player-era-color, #2d343b) 70%, transparent), transparent 46%),
    var(--player-era-color, #39434b) !important;
  filter: blur(78px) saturate(1.15) brightness(.9) !important;
  transform: scale(1.05) !important;
}

.full-player::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.12) 72%, rgba(0,0,0,.22)) !important;
}

.full-player button,
.full-player input {
  -webkit-tap-highlight-color: transparent !important;
}

.full-player button:focus,
.full-player button:focus-visible,
.full-player input:focus,
.full-player input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.full-player .player-art {
  border-radius: 34px !important;
  overflow: hidden !important;
}

/* Real range styling: thicker timeline, no stray speaker/knob inside the rail. */
.full-player input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(to right,
    rgba(255,255,255,.96) 0 var(--seek-progress, 0%),
    rgba(255,255,255,.34) var(--seek-progress, 0%) 100%) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.full-player input[type="range"]::-webkit-slider-runnable-track {
  height: 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
}
.full-player input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}
.full-player input[type="range"]::-moz-range-track {
  height: 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
}
.full-player input[type="range"]::-moz-range-thumb {
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Player buttons: absolute-centered glyphs so play/pause/skip can never drift. */
.full-player .player-controls {
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
}
.full-player .player-controls button,
.full-player .player-controls .icon-button,
.full-player .player-controls .main-play {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: white !important;
  overflow: visible !important;
  line-height: 1 !important;
  font-size: 0 !important;
  transform: none !important;
}
.full-player .player-controls button svg,
.full-player #playerVolumeToggle svg {
  display: none !important;
}
.full-player .player-controls button::before,
.full-player #playerVolumeToggle::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: translate(-50%, -50%) !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)) !important;
}
.full-player #playerShuffle::before { background-image: var(--sf-shuffle) !important; width: 22px !important; height: 22px !important; opacity: .84 !important; }
.full-player #prevTrack::before { background-image: var(--sf-backward-fill) !important; width: 42px !important; height: 42px !important; }
.full-player #fullPlay::before { background-image: var(--sf-play-fill) !important; width: 46px !important; height: 46px !important; }
.full-player #fullPlay.is-playing::before { background-image: var(--sf-pause-fill) !important; width: 46px !important; height: 46px !important; }
.full-player #nextTrack::before { background-image: var(--sf-forward-fill) !important; width: 42px !important; height: 42px !important; }
.full-player #playerRepeat::before { background-image: var(--sf-repeat) !important; width: 22px !important; height: 22px !important; opacity: .84 !important; }
.full-player .player-controls .active::before { opacity: 1 !important; filter: drop-shadow(0 0 8px rgba(255,255,255,.65)) !important; }

/* Volume row: icon, rail, icon. No icon over the slider. */
.full-player .player-extra-controls {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  justify-items: center !important;
}
.full-player .player-volume-menu {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) 26px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.full-player .player-volume-toggle {
  position: relative !important;
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}
.full-player .player-volume-toggle::after { display: none !important; content: none !important; }
.full-player #playerVolumeToggle::before {
  background-image: var(--sf-speaker-fill) !important;
  width: 19px !important;
  height: 19px !important;
  opacity: .76 !important;
}
.full-player .player-volume-popup,
.full-player .player-volume-popup:not([hidden]) {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.full-player .player-volume-menu::after {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background: var(--sf-speaker-3-fill) center/contain no-repeat !important;
  opacity: .78 !important;
}
.full-player #playerVolume {
  --seek-progress: 100%;
  height: 7px !important;
}

/* Lyrics: no blur on the next/previous lines. Only the container edges fade. */
.full-player .lyrics-panel {
  position: relative !important;
  overflow: hidden !important;
}
.full-player .lyrics-lines {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.28) 4%, black 13%, black 86%, rgba(0,0,0,.28) 96%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.28) 4%, black 13%, black 86%, rgba(0,0,0,.28) 96%, transparent 100%) !important;
}
.full-player .lyrics-lines::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  color: rgba(255,255,255,.31) !important;
}
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near { color: rgba(255,255,255,.43) !important; }
.full-player .lyrics-line.active { color: #fff !important; filter: none !important; -webkit-filter: none !important; }
.full-player .lyrics-prelude { letter-spacing: .04em !important; }

@media (min-width: 900px) {
  .full-player {
    --am-cover: clamp(360px, 23vw, 460px) !important;
    --am-left: var(--am-cover) !important;
    padding: 34px clamp(54px, 6vw, 110px) !important;
  }
  .full-player .player-layout {
    width: min(1360px, calc(100vw - 96px)) !important;
    height: min(790px, calc(100dvh - 70px)) !important;
    grid-template-columns: var(--am-left) minmax(520px, 760px) !important;
    column-gap: clamp(110px, 10vw, 190px) !important;
    align-items: center !important;
    transform: translateY(-1vh) !important;
  }
  .full-player.no-lyrics:not(.lrc-open) .player-layout {
    width: var(--am-left) !important;
    grid-template-columns: var(--am-left) !important;
    column-gap: 0 !important;
  }
  .full-player.lrc-open .player-layout {
    grid-template-columns: var(--am-left) minmax(520px, 720px) !important;
    column-gap: clamp(86px, 8vw, 160px) !important;
  }
  .full-player .player-primary,
  .full-player .player-info,
  .full-player .timeline,
  .full-player .player-extra-controls {
    width: var(--am-left) !important;
    max-width: var(--am-left) !important;
  }
  .full-player .player-art {
    width: var(--am-cover) !important;
    height: var(--am-cover) !important;
    margin: 0 0 23px !important;
  }
  .full-player .player-info { margin-bottom: 10px !important; }
  .full-player .player-info h2 { font-size: clamp(22px, 1.45vw, 28px) !important; line-height: 1.05 !important; font-weight: 700 !important; }
  .full-player .player-info p { margin-top: 3px !important; font-size: clamp(15px, .95vw, 18px) !important; color: rgba(255,255,255,.72) !important; }
  .full-player .timeline { gap: 8px !important; margin-bottom: 24px !important; }
  .full-player .fullTimeRow { font-size: 12px !important; color: rgba(255,255,255,.68) !important; }
  .full-player .player-controls {
    width: var(--am-left) !important;
    grid-template-columns: repeat(5, 1fr) !important;
    column-gap: 0 !important;
    margin: 0 0 24px !important;
  }
  .full-player .player-controls button { width: 56px !important; height: 56px !important; }
  .full-player .player-volume-menu { width: var(--am-left) !important; }
  .full-player .lyrics-panel {
    align-self: stretch !important;
    height: min(79vh, 760px) !important;
    min-height: 560px !important;
    transform: translateY(0) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }
  .full-player .lyrics-lines {
    height: 100% !important;
    max-height: none !important;
    padding: 0 0 20vh !important;
    gap: clamp(25px, 3vh, 36px) !important;
  }
  .full-player .lyrics-line {
    font-size: clamp(34px, 2.85vw, 50px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -.055em !important;
  }
}

@media (max-width: 899px) {
  .full-player {
    --am-cover: min(calc(100vw - 48px), 390px, 48dvh) !important;
    --am-left: var(--am-cover) !important;
    padding: max(22px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom)) !important;
    place-items: start center !important;
  }
  .full-player .player-layout,
  .full-player.no-lyrics:not(.lrc-open) .player-layout,
  .full-player.lrc-open .player-layout {
    width: 100% !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "primary" "lyrics" !important;
    gap: 0 !important;
    padding: 0 0 28px !important;
    transform: none !important;
  }
  .full-player .player-primary {
    width: 100% !important;
    display: grid !important;
    justify-items: center !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .full-player .player-art {
    width: var(--am-cover) !important;
    height: var(--am-cover) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 42px auto 28px !important;
    border-radius: 34px !important;
  }
  .full-player .player-info,
  .full-player .timeline,
  .full-player .player-extra-controls {
    width: var(--am-cover) !important;
    max-width: var(--am-cover) !important;
  }
  .full-player .player-info { margin-bottom: 22px !important; }
  .full-player .player-info h2 {
    font-size: clamp(28px, 7vw, 34px) !important;
    line-height: 1.03 !important;
    font-weight: 720 !important;
    letter-spacing: -.035em !important;
  }
  .full-player .player-info p {
    margin-top: 4px !important;
    font-size: clamp(22px, 5.6vw, 26px) !important;
    line-height: 1.05 !important;
    color: rgba(255,255,255,.60) !important;
  }
  .full-player .timeline {
    gap: 11px !important;
    margin-bottom: 46px !important;
  }
  .full-player .fullTimeRow {
    font-size: clamp(18px, 4.4vw, 22px) !important;
    color: rgba(255,255,255,.58) !important;
  }
  .full-player .player-controls {
    width: var(--am-cover) !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 0 !important;
    margin: 0 auto 54px !important;
  }
  .full-player #playerShuffle,
  .full-player #playerRepeat {
    display: none !important;
  }
  .full-player .player-controls button,
  .full-player .player-controls .main-play,
  .full-player .player-controls .icon-button {
    width: 78px !important;
    height: 78px !important;
  }
  .full-player #prevTrack::before,
  .full-player #nextTrack::before {
    width: 58px !important;
    height: 58px !important;
  }
  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before {
    width: 66px !important;
    height: 66px !important;
  }
  .full-player .player-extra-controls { margin-bottom: 32px !important; }
  .full-player .player-volume-menu {
    width: var(--am-cover) !important;
    grid-template-columns: 28px minmax(0, 1fr) 30px !important;
    gap: 14px !important;
  }
  .full-player #playerVolume,
  .full-player #playerSeek { height: 8px !important; }
  .full-player #playerVolume::-webkit-slider-runnable-track,
  .full-player #playerSeek::-webkit-slider-runnable-track { height: 8px !important; }

  /* Lyrics are a contained Spotify-like card on mobile, not loose over the whole page. */
  .full-player .lyrics-panel {
    width: var(--am-cover) !important;
    height: min(44dvh, 430px) !important;
    min-height: 230px !important;
    margin: 0 auto 22px !important;
    padding: 22px 18px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.075) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 70px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(24px) saturate(1.1) !important;
  }
  .full-player.no-lyrics:not(.lrc-open) .lyrics-panel {
    display: none !important;
  }
  .full-player .lyrics-head { display: none !important; }
  .full-player .lyrics-lines {
    height: 100% !important;
    max-height: none !important;
    padding: 0 0 34px !important;
    gap: 18px !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 88%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 88%, transparent 100%) !important;
  }
  .full-player .lyrics-line {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.08 !important;
    font-weight: 760 !important;
    letter-spacing: -.045em !important;
  }
  .full-player .lyrics-line.active { color: #fff !important; }
  .full-player .lyrics-submitter:not([hidden]) {
    position: fixed !important;
    inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px !important;
    z-index: 20 !important;
    width: auto !important;
    max-height: min(82dvh, 720px) !important;
    overflow-y: auto !important;
    border-radius: 28px !important;
    background: rgba(10,11,14,.88) !important;
    backdrop-filter: blur(34px) saturate(1.25) !important;
  }
}

@media (max-width: 420px) {
  .full-player { --am-cover: calc(100vw - 48px) !important; }
  .full-player .player-art { margin-top: 38px !important; }
  .full-player .player-controls { margin-bottom: 48px !important; }
}


/* === Apple Music player v7: strict control alignment with cover === */
.full-player .player-primary {
  justify-items: center !important;
}
.full-player .player-info,
.full-player .timeline,
.full-player .player-controls,
.full-player .player-extra-controls,
.full-player .player-volume-menu {
  width: var(--am-left) !important;
  max-width: var(--am-left) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.full-player .player-art {
  margin-left: auto !important;
  margin-right: auto !important;
}
.full-player .player-controls {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: 64px !important;
  align-items: center !important;
  justify-items: center !important;
  place-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.full-player #playerShuffle,
.full-player #prevTrack,
.full-player #fullPlay,
.full-player #nextTrack,
.full-player #playerRepeat {
  display: grid !important;
  position: static !important;
  grid-row: 1 !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.full-player #playerShuffle { grid-column: 1 !important; }
.full-player #prevTrack { grid-column: 2 !important; }
.full-player #fullPlay { grid-column: 3 !important; }
.full-player #nextTrack { grid-column: 4 !important; }
.full-player #playerRepeat { grid-column: 5 !important; }
.full-player .player-controls button::before {
  content: "" !important;
  display: block !important;
  margin: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: none !important;
  position: static !important;
  flex: none !important;
}
.full-player #playerShuffle::before,
.full-player #playerRepeat::before {
  width: 22px !important;
  height: 22px !important;
}
.full-player #prevTrack::before,
.full-player #nextTrack::before {
  width: 38px !important;
  height: 38px !important;
}
.full-player #fullPlay::before,
.full-player #fullPlay.is-playing::before {
  width: 42px !important;
  height: 42px !important;
}
.full-player .player-extra-controls {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: stretch !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 !important;
  transform: none !important;
}
.full-player .player-volume-menu {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) 24px !important;
  grid-template-rows: 24px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  transform: none !important;
}
.full-player .player-volume-toggle,
.full-player .player-volume-menu::after {
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
}
.full-player .player-volume-popup,
.full-player .player-volume-popup:not([hidden]) {
  position: static !important;
  display: block !important;
  align-self: center !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.full-player #playerVolume,
.full-player #playerSeek {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near {
  filter: none !important;
  -webkit-filter: none !important;
}

@media (min-width: 900px) {
  .full-player .player-controls {
    width: var(--am-left) !important;
    max-width: var(--am-left) !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: 58px !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }
  .full-player #playerShuffle,
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack,
  .full-player #playerRepeat {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
  }
  .full-player .player-volume-menu {
    width: var(--am-left) !important;
    max-width: var(--am-left) !important;
    grid-template-columns: 20px minmax(0, 1fr) 22px !important;
  }
}

@media (max-width: 899px) {
  .full-player .player-info,
  .full-player .timeline,
  .full-player .player-controls,
  .full-player .player-extra-controls,
  .full-player .player-volume-menu {
    width: var(--am-cover) !important;
    max-width: var(--am-cover) !important;
  }
  .full-player .player-controls {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: 88px !important;
    margin: 0 auto 48px !important;
  }
  .full-player #playerShuffle,
  .full-player #playerRepeat {
    display: none !important;
  }
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack {
    display: grid !important;
    grid-row: 1 !important;
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
  }
  .full-player #prevTrack { grid-column: 1 !important; }
  .full-player #fullPlay { grid-column: 2 !important; }
  .full-player #nextTrack { grid-column: 3 !important; }
  .full-player #prevTrack::before,
  .full-player #nextTrack::before {
    width: 58px !important;
    height: 58px !important;
  }
  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before {
    width: 68px !important;
    height: 68px !important;
  }
  .full-player .player-volume-menu {
    grid-template-columns: 28px minmax(0, 1fr) 30px !important;
    grid-template-rows: 30px !important;
    gap: 14px !important;
  }
}


/* === Apple Music player v8: mobile layout rebuild + lyrics generator fixes === */
.full-player {
  --am-cover-radius: 30px;
  background:
    radial-gradient(1200px 820px at 22% 18%, color-mix(in srgb, var(--player-era-color) 70%, transparent), transparent 58%),
    radial-gradient(1100px 760px at 88% 72%, color-mix(in srgb, var(--player-era-color-2) 62%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--player-era-color) 72%, #2d3138), color-mix(in srgb, var(--player-era-color-2) 44%, #15161a)) !important;
}
.full-player::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  backdrop-filter: blur(70px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(70px) saturate(1.35) !important;
  background: rgba(20, 22, 26, .28) !important;
}
.full-player .player-backdrop { display: none !important; }
.full-player .player-layout { position: relative !important; z-index: 1 !important; }
.full-player .player-art { border-radius: var(--am-cover-radius) !important; }
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near { filter: none !important; -webkit-filter: none !important; opacity: 1 !important; }
.full-player .lyrics-lines {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%) !important;
}
.full-player .lrc-output-hidden,
.full-player #lyricsLrcInput[hidden] { display: none !important; }
.full-player .lyrics-submitter:not([hidden]) {
  z-index: 30 !important;
}
.full-player .lyrics-generator-head strong::after { content: "" !important; }

@media (min-width: 900px) {
  .full-player {
    --am-left: clamp(310px, 27vw, 390px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    place-items: center !important;
  }
  .full-player .player-layout {
    width: min(1180px, calc(100vw - 96px)) !important;
    height: min(720px, calc(100dvh - 90px)) !important;
    display: grid !important;
    grid-template-columns: var(--am-left) minmax(360px, 1fr) !important;
    column-gap: clamp(86px, 10vw, 150px) !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .full-player.no-lyrics:not(.lrc-open) .player-layout {
    grid-template-columns: var(--am-left) !important;
    justify-content: center !important;
  }
  .full-player .player-primary { width: var(--am-left) !important; justify-self: center !important; }
  .full-player .player-art,
  .full-player .player-info,
  .full-player .timeline,
  .full-player .player-controls,
  .full-player .player-extra-controls,
  .full-player .player-volume-menu {
    width: var(--am-left) !important;
    max-width: var(--am-left) !important;
  }
  .full-player .player-art { height: var(--am-left) !important; margin: 0 auto 20px !important; box-shadow: 0 28px 80px rgba(0,0,0,.28) !important; }
  .full-player .player-info { margin-bottom: 10px !important; }
  .full-player .player-info h2 { font-size: clamp(19px, 1.55vw, 25px) !important; font-weight: 720 !important; line-height: 1.06 !important; letter-spacing: -.03em !important; }
  .full-player .player-info p { font-size: clamp(14px, 1vw, 17px) !important; margin-top: 3px !important; font-weight: 520 !important; color: rgba(255,255,255,.68) !important; }
  .full-player .timeline { gap: 5px !important; margin: 0 auto 28px !important; }
  .full-player .fullTimeRow { font-size: 11px !important; font-weight: 520 !important; color: rgba(255,255,255,.62) !important; }
  .full-player #playerSeek { height: 6px !important; }
  .full-player #playerSeek::-webkit-slider-runnable-track { height: 6px !important; }
  .full-player .player-controls {
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: 54px !important;
    margin: 0 auto 24px !important;
  }
  .full-player #playerShuffle,
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack,
  .full-player #playerRepeat { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; }
  .full-player #prevTrack::before,
  .full-player #nextTrack::before { width: 30px !important; height: 30px !important; }
  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before { width: 34px !important; height: 34px !important; }
  .full-player #playerShuffle::before,
  .full-player #playerRepeat::before { width: 18px !important; height: 18px !important; opacity: .74 !important; }
  .full-player .player-extra-controls { gap: 14px !important; margin: 0 !important; }
  .full-player .player-volume-menu { grid-template-columns: 18px minmax(0,1fr) 20px !important; grid-template-rows: 22px !important; gap: 11px !important; }
  .full-player #playerVolume { height: 5px !important; }
  .full-player #playerVolume::-webkit-slider-runnable-track { height: 5px !important; }
  .full-player #playerVolumeToggle::before { width: 14px !important; height: 14px !important; }
  .full-player .player-volume-menu::after { width: 15px !important; height: 15px !important; }
  .full-player .lyrics-panel {
    width: 100% !important;
    height: min(620px, 78dvh) !important;
    min-height: 0 !important;
    align-self: center !important;
    justify-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .full-player .lyrics-lines { height: 100% !important; max-height: none !important; padding: 12vh 0 18vh !important; gap: clamp(20px, 3.6vh, 34px) !important; overflow-y: auto !important; }
  .full-player .lyrics-line { font-size: clamp(30px, 4vw, 56px) !important; line-height: 1.07 !important; letter-spacing: -.055em !important; font-weight: 780 !important; color: rgba(255,255,255,.34) !important; text-align: left !important; }
  .full-player .lyrics-line.active { color: #fff !important; }
  .full-player.no-lyrics:not(.lrc-open) .lyrics-panel { display: none !important; }
  .full-player.lrc-open .lyrics-panel { display: none !important; }
  .full-player.lrc-open .lyrics-submitter:not([hidden]) {
    position: relative !important;
    inset: auto !important;
    grid-column: 2 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-height: min(700px, 82dvh) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 22px !important;
    border-radius: 26px !important;
    background: rgba(10, 12, 16, .54) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 90px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(26px) saturate(1.2) !important;
  }
}

@media (max-width: 899px) {
  .full-player {
    --am-cover: min(calc(100vw - 54px), 520px) !important;
    position: fixed !important;
    inset: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    padding: max(26px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom)) !important;
    place-items: start center !important;
  }
  .full-player .player-close {
    top: max(14px, env(safe-area-inset-top)) !important;
    right: 14px !important;
    width: 46px !important;
    height: 46px !important;
    background: rgba(255,255,255,.12) !important;
    z-index: 35 !important;
  }
  .full-player .player-layout,
  .full-player.no-lyrics:not(.lrc-open) .player-layout,
  .full-player.lrc-open .player-layout {
    width: 100% !important;
    height: calc(100svh - max(26px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))) !important;
    max-height: none !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: center !important;
    gap: 16px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .full-player .player-primary {
    width: var(--am-cover) !important;
    max-width: var(--am-cover) !important;
    justify-self: center !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  .full-player .player-art {
    width: var(--am-cover) !important;
    height: var(--am-cover) !important;
    max-height: min(50svh, var(--am-cover)) !important;
    aspect-ratio: 1 / 1 !important;
    margin: clamp(22px, 5svh, 52px) auto 22px !important;
    border-radius: 30px !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.26) !important;
  }
  .full-player .player-art img { object-fit: cover !important; }
  .full-player .player-info,
  .full-player .timeline,
  .full-player .player-controls,
  .full-player .player-extra-controls,
  .full-player .player-volume-menu {
    width: var(--am-cover) !important;
    max-width: var(--am-cover) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .full-player .player-info { margin: 0 auto 18px !important; text-align: left !important; }
  .full-player .player-info h2 { font-size: clamp(28px, 8.2vw, 42px) !important; line-height: 1.02 !important; font-weight: 760 !important; letter-spacing: -.04em !important; }
  .full-player .player-info p { font-size: clamp(22px, 5.9vw, 28px) !important; line-height: 1.08 !important; font-weight: 500 !important; margin-top: 5px !important; color: rgba(255,255,255,.58) !important; }
  .full-player .timeline { gap: 13px !important; margin: 0 auto 34px !important; }
  .full-player #playerSeek { height: 9px !important; }
  .full-player #playerSeek::-webkit-slider-runnable-track { height: 9px !important; }
  .full-player .fullTimeRow { font-size: clamp(18px, 5.4vw, 23px) !important; font-weight: 500 !important; color: rgba(255,255,255,.55) !important; }
  .full-player .player-controls {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: clamp(62px, 13vw, 88px) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
    margin: 0 auto 36px !important;
  }
  .full-player #playerShuffle,
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack,
  .full-player #playerRepeat {
    display: grid !important;
    position: static !important;
    grid-row: 1 !important;
    width: clamp(50px, 14vw, 72px) !important;
    height: clamp(50px, 14vw, 72px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .full-player #playerShuffle { grid-column: 1 !important; }
  .full-player #prevTrack { grid-column: 2 !important; }
  .full-player #fullPlay { grid-column: 3 !important; }
  .full-player #nextTrack { grid-column: 4 !important; }
  .full-player #playerRepeat { grid-column: 5 !important; }
  .full-player #playerShuffle::before,
  .full-player #playerRepeat::before { width: clamp(17px, 5vw, 24px) !important; height: clamp(17px, 5vw, 24px) !important; opacity: .78 !important; }
  .full-player #prevTrack::before,
  .full-player #nextTrack::before { width: clamp(34px, 9.8vw, 56px) !important; height: clamp(34px, 9.8vw, 56px) !important; }
  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before { width: clamp(44px, 12vw, 66px) !important; height: clamp(44px, 12vw, 66px) !important; }
  .full-player .player-extra-controls { margin: 0 auto 18px !important; display: grid !important; gap: 14px !important; }
  .full-player .player-volume-menu {
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr) 32px !important;
    grid-template-rows: 34px !important;
    align-items: center !important;
    gap: 13px !important;
  }
  .full-player #playerVolume { height: 7px !important; }
  .full-player #playerVolume::-webkit-slider-runnable-track { height: 7px !important; }
  .full-player .player-volume-toggle,
  .full-player .player-volume-menu::after { width: 28px !important; height: 28px !important; }
  .full-player #playerVolumeToggle::before { width: 19px !important; height: 19px !important; }
  .full-player .player-volume-menu::after { width: 22px !important; height: 22px !important; }
  .full-player .lyrics-panel {
    width: var(--am-cover) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    padding: 22px 18px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.075) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 70px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(26px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.1) !important;
  }
  .full-player.no-lyrics:not(.lrc-open) .lyrics-panel { display: none !important; }
  .full-player .lyrics-head { display: none !important; }
  .full-player .lyrics-lines {
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 0 0 28px !important;
    gap: 20px !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 88%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 88%, transparent 100%) !important;
  }
  .full-player .lyrics-line {
    font-size: clamp(28px, 8.3vw, 42px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.05em !important;
    font-weight: 760 !important;
    color: rgba(255,255,255,.44) !important;
    text-align: left !important;
  }
  .full-player .lyrics-line.active { color: #fff !important; }
  .full-player .lyrics-empty { font-size: 18px !important; color: rgba(255,255,255,.62) !important; }
  .full-player.lrc-open { overflow: hidden !important; }
  .full-player.lrc-open .player-layout { display: block !important; height: 100svh !important; overflow: hidden !important; }
  .full-player.lrc-open .player-primary,
  .full-player.lrc-open .lyrics-panel { display: none !important; }
  .full-player.lrc-open .lyrics-submitter:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 40 !important;
    width: 100vw !important;
    height: 100svh !important;
    max-height: none !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: max(68px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(17, 19, 24, .96) !important;
    box-shadow: none !important;
    backdrop-filter: blur(36px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.18) !important;
  }
  .full-player.lrc-open .lyrics-submitter .builder-input,
  .full-player.lrc-open .lyrics-submitter .builder-textarea { width: 100% !important; }
}

@media (max-width: 420px) {
  .full-player { --am-cover: calc(100vw - 50px) !important; }
  .full-player .player-art { margin-top: clamp(18px, 4svh, 34px) !important; }
  .full-player .player-info h2 { font-size: clamp(28px, 8.8vw, 38px) !important; }
  .full-player .player-info p { font-size: clamp(21px, 6.2vw, 26px) !important; }
  .full-player .timeline { margin-bottom: 30px !important; }
  .full-player .player-controls { margin-bottom: 30px !important; }
}

@media (max-height: 760px) and (max-width: 899px) {
  .full-player { --am-cover: min(calc(100vw - 70px), 43svh) !important; }
  .full-player .player-art { margin-top: 14px !important; margin-bottom: 14px !important; }
  .full-player .player-info { margin-bottom: 10px !important; }
  .full-player .timeline { margin-bottom: 20px !important; }
  .full-player .player-controls { grid-template-rows: 60px !important; margin-bottom: 20px !important; }
  .full-player .player-extra-controls { margin-bottom: 10px !important; }
}

/* Final archive controls and performance tracker */
.song-card-footer {
  align-items: flex-end !important;
  overflow: visible !important;
}

.song-footer-primary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-menu-wrap {
  position: relative;
}

.report-icon-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(8, 8, 8, .55);
  color: #fff;
  cursor: pointer;
}

.report-icon-button:hover,
.report-icon-button[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .12);
}

.report-icon-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.report-menu {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 8px);
  left: 0;
  width: max-content;
  min-width: 174px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 13px;
  background: rgba(18, 18, 18, .96);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .48);
  backdrop-filter: blur(18px);
}

.report-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.report-menu button:hover {
  background: rgba(255, 255, 255, .1);
}

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

.performance-grid.single-result {
  grid-template-columns: 1fr;
}

.performance-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 25px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .07), transparent 34%),
    rgba(8, 8, 8, .82);
}

.performance-card-head h2 {
  margin: 12px 0 3px;
  color: #fff;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -.04em;
}

.performance-card-head p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .68);
}

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

.performance-field {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(0, 0, 0, .28);
  overflow-wrap: anywhere;
}

.performance-field > span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .56);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: none;
}

.performance-songs-field {
  grid-column: 1 / -1;
}

.performance-setlist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.performance-setlist span {
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 12px;
}

.performance-video-link {
  display: inline-flex;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: #fff;
  text-decoration: none !important;
}

@media (max-width: 760px) {
  .performance-grid,
  .performance-field-grid {
    grid-template-columns: 1fr;
  }

  .performance-card {
    padding: 17px;
    border-radius: 20px;
  }

  .song-card-footer {
    align-items: stretch !important;
  }
}

/* Final player/card overrides: readable flairs, calmer lyrics, usable mobile layout. */
.song-tags,
.media-flairs {
  flex-wrap: wrap;
  gap: 8px !important;
}

.song-tag,
.media-flair {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
}

.status-flair,
.media-flair {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(12, 14, 20, 0.78) !important;
}

.era-flair {
  border-color: color-mix(in srgb, var(--tag-a), white 22%) !important;
  background: color-mix(in srgb, var(--tag-a), rgba(8, 10, 14, 0.36) 52%) !important;
}

.meta-block,
.file-row {
  background: rgba(8, 10, 14, 0.62) !important;
}

.file-inline-player.is-static {
  grid-template-columns: 38px auto !important;
}

.file-inline-player.is-static .file-progress-rail,
.file-inline-player.is-static small {
  display: none !important;
}

.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near {
  filter: none !important;
  -webkit-filter: none !important;
}

@media (min-width: 900px) {
  .full-player .lyrics-panel {
    height: min(68vh, 620px) !important;
    min-height: 0 !important;
  }

  .full-player .lyrics-lines {
    padding: 7vh 0 10vh !important;
    gap: clamp(16px, 2.6vh, 26px) !important;
  }

  .full-player .lyrics-line,
  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near {
    font-size: clamp(28px, 2.75vw, 44px) !important;
    font-weight: 620 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.045em !important;
  }

  .full-player .lyrics-line {
    color: rgba(255, 255, 255, 0.22) !important;
  }

  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near {
    color: rgba(255, 255, 255, 0.4) !important;
  }

  .full-player .lyrics-line.active {
    color: #fff !important;
    font-weight: 650 !important;
  }
}

@media (max-width: 899px) {
  .full-player {
    --am-cover: min(calc(100vw - 56px), 320px, 33svh) !important;
    --am-left: var(--am-cover) !important;
  }

  .full-player .player-layout,
  .full-player.no-lyrics:not(.lrc-open) .player-layout,
  .full-player.lrc-open .player-layout {
    gap: 10px !important;
  }

  .full-player .player-art {
    max-height: min(33svh, var(--am-cover)) !important;
    margin: 16px auto 14px !important;
    border-radius: 26px !important;
  }

  .full-player .player-info {
    margin: 0 auto 12px !important;
  }

  .full-player .player-info h2 {
    font-size: clamp(20px, 6.8vw, 30px) !important;
    line-height: 1.04 !important;
    font-weight: 720 !important;
  }

  .full-player .player-info p {
    font-size: clamp(14px, 4.7vw, 20px) !important;
    line-height: 1.1 !important;
    margin-top: 4px !important;
    color: rgba(255, 255, 255, 0.66) !important;
  }

  .full-player .timeline {
    gap: 8px !important;
    margin: 0 auto 18px !important;
  }

  .full-player .fullTimeRow {
    font-size: clamp(13px, 4vw, 16px) !important;
    color: rgba(255, 255, 255, 0.62) !important;
  }

  .full-player #playerSeek,
  .full-player #playerVolume {
    height: 5px !important;
  }

  .full-player .player-controls {
    grid-template-rows: 64px !important;
    margin: 0 auto 18px !important;
  }

  .full-player #playerShuffle,
  .full-player #playerRepeat {
    display: none !important;
  }

  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack {
    width: clamp(46px, 13vw, 60px) !important;
    height: clamp(46px, 13vw, 60px) !important;
  }

  .full-player #prevTrack::before,
  .full-player #nextTrack::before {
    width: clamp(28px, 8vw, 36px) !important;
    height: clamp(28px, 8vw, 36px) !important;
  }

  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before {
    width: clamp(34px, 10vw, 44px) !important;
    height: clamp(34px, 10vw, 44px) !important;
  }

  .full-player .player-extra-controls {
    gap: 10px !important;
    margin: 0 auto 12px !important;
  }

  .full-player .player-volume-menu {
    grid-template-columns: 20px minmax(0, 1fr) 22px !important;
    grid-template-rows: 22px !important;
    gap: 10px !important;
  }

  .full-player .lyrics-panel {
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px 14px !important;
    border-radius: 24px !important;
    background: rgba(10, 12, 16, 0.48) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.16) !important;
  }

  .full-player .lyrics-lines {
    padding: 2px 0 20px !important;
    gap: 12px !important;
  }

  .full-player .lyrics-line,
  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near {
    font-size: clamp(18px, 5.6vw, 26px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.035em !important;
    font-weight: 600 !important;
  }

  .full-player .lyrics-line {
    color: rgba(255, 255, 255, 0.3) !important;
  }

  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near {
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .full-player .lyrics-line.active {
    color: #fff !important;
    font-weight: 640 !important;
  }
}

@media (max-width: 560px) {
  .song-tag,
  .media-flair {
    padding: 8px 11px !important;
    font-size: 10px !important;
  }
}

/* Player and archive completion pass. */
.full-player,
.full-player * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif !important;
}

.full-player .player-info h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important;
  font-weight: 520 !important;
  letter-spacing: -0.025em !important;
}

.file-inline-play svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.report-icon-button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.floating-player {
  width: min(680px, calc(100% - 24px));
  grid-template-columns: 52px minmax(0, 1fr) minmax(110px, 150px) 42px 30px;
}

.mini-volume {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-volume-button {
  flex: 0 0 26px;
  width: 26px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
}

.mini-volume-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.mini-volume-button.muted svg {
  opacity: .45;
}

#miniVolume {
  --seek-progress: 100%;
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right, #fff var(--seek-progress), rgba(255, 255, 255, .25) var(--seek-progress));
}

#miniVolume::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

#miniVolume::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

#miniPlay {
  display: grid;
  place-items: center;
  padding: 0 !important;
  line-height: 0;
}

#miniPlay::before {
  display: none !important;
}

#miniPlay svg {
  display: block !important;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.full-player .player-controls button::before,
.full-player #playerVolumeToggle::before,
.full-player .player-volume-menu::after {
  display: none !important;
}

.full-player .player-controls svg,
.full-player #playerVolumeToggle svg,
.full-player .player-volume-high {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  color: #fff;
}

.full-player #prevTrack svg,
.full-player #nextTrack svg,
.full-player #fullPlay svg {
  fill: currentColor;
}

.full-player #playerShuffle svg,
.full-player #playerRepeat svg,
.full-player #playerVolumeToggle svg,
.full-player .player-volume-high {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.full-player #prevTrack svg,
.full-player #nextTrack svg {
  width: 42px !important;
  height: 42px !important;
}

.full-player #fullPlay svg {
  width: 50px !important;
  height: 50px !important;
}

.full-player #playerShuffle svg,
.full-player #playerRepeat svg {
  width: 22px !important;
  height: 22px !important;
}

.full-player #playerVolumeToggle svg,
.full-player .player-volume-high {
  width: 19px !important;
  height: 19px !important;
  opacity: .78;
}

body.player-is-open .floating-player {
  display: none !important;
}

@media (max-width: 899px) {
  .full-player {
    --am-cover: min(calc(100vw - 52px), 440px) !important;
    --am-left: var(--am-cover) !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: max(42px, env(safe-area-inset-top)) 26px max(28px, env(safe-area-inset-bottom)) !important;
  }

  .full-player .player-layout,
  .full-player.no-lyrics:not(.lrc-open) .player-layout,
  .full-player.lyrics-loading .player-layout,
  .full-player.lrc-open .player-layout {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 34px !important;
    overflow: visible !important;
  }

  .full-player .player-primary {
    width: var(--am-cover) !important;
    max-width: var(--am-cover) !important;
    min-height: calc(100svh - max(58px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .full-player .player-art {
    width: var(--am-cover) !important;
    height: var(--am-cover) !important;
    max-height: none !important;
    margin: 26px auto clamp(36px, 6svh, 58px) !important;
    border-radius: 18px !important;
  }

  .full-player .player-info,
  .full-player .timeline,
  .full-player .player-controls,
  .full-player .player-extra-controls,
  .full-player .player-volume-menu {
    width: var(--am-cover) !important;
    max-width: var(--am-cover) !important;
  }

  .full-player .player-info {
    margin: 0 auto 34px !important;
  }

  .full-player .player-info h2 {
    font-size: clamp(25px, 7vw, 34px) !important;
    font-weight: 520 !important;
    letter-spacing: -0.022em !important;
  }

  .full-player .player-info p {
    font-size: clamp(18px, 5.2vw, 24px) !important;
  }

  .full-player .timeline {
    margin: 0 auto 30px !important;
  }

  .full-player .player-controls {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: 76px !important;
    margin: 0 auto 34px !important;
  }

  .full-player #playerShuffle,
  .full-player #playerRepeat {
    display: none !important;
  }

  .full-player #prevTrack {
    grid-column: 1 !important;
  }

  .full-player #fullPlay {
    grid-column: 2 !important;
  }

  .full-player #nextTrack {
    grid-column: 3 !important;
  }

  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack {
    width: 68px !important;
    height: 68px !important;
  }

  .full-player #prevTrack::before,
  .full-player #nextTrack::before {
    width: 42px !important;
    height: 42px !important;
  }

  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before {
    width: 50px !important;
    height: 50px !important;
  }

  .full-player .player-extra-controls {
    margin: 0 auto !important;
  }

  .full-player .lyrics-panel {
    width: var(--am-cover) !important;
    height: min(68svh, 680px) !important;
    min-height: 420px !important;
    margin: 0 auto 24px !important;
    padding: 22px 18px !important;
    border-radius: 24px !important;
  }

  .full-player .lyrics-lines {
    height: 100% !important;
    padding: 8px 0 48px !important;
    gap: 18px !important;
  }

  .full-player .lyrics-line,
  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near {
    font-size: clamp(23px, 6.8vw, 32px) !important;
    font-weight: 520 !important;
    line-height: 1.12 !important;
  }

  .full-player .lyrics-line.active {
    font-weight: 620 !important;
  }

  .full-player.lyrics-loading .lyrics-panel {
    display: block !important;
  }

  .floating-player {
    grid-template-columns: 48px minmax(0, 1fr) minmax(86px, 112px) 38px 24px;
    gap: 7px;
  }

  .mini-volume {
    gap: 4px;
  }
}

@media (max-width: 520px) {
  .full-player {
    --am-cover: calc(100vw - 52px) !important;
  }

  .floating-player {
    width: calc(100% - 12px);
    grid-template-columns: 46px minmax(72px, 1fr) 92px 34px 22px;
    padding: 8px;
  }

  .mini-cover {
    width: 46px;
    height: 46px;
  }

  .mini-volume-button {
    display: none;
  }
}

.player-controls svg {
  display: block !important;
}


/* v11 emergency fixes: Apple-like typography, stable inline icons, clean cards, volume popups */
:root {
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
body,
button,
input,
select,
textarea,
.song-card,
.song-card *,
.floating-player,
.floating-player *,
.full-player,
.full-player * {
  font-family: var(--apple-font) !important;
}
.hero h1,
.section-title h1,
.song-head h2,
.media-card-head h2,
.session-card-head h2,
.playlist-card h2,
.playlist-detail h2,
.admin-card h2,
.full-player .player-info h2,
.mini-info strong {
  font-family: var(--apple-font) !important;
  font-weight: 650 !important;
  letter-spacing: -0.045em !important;
}
.meta-block > span,
.media-field > span,
.session-field > span {
  font-family: var(--apple-font) !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}
.meta-block,
.metadata-value,
.metadata-search-text,
.inline-file-link,
.file-name strong {
  font-family: var(--apple-font) !important;
  font-weight: 600 !important;
}

/* Stop the broken mask/pseudo icon layer. Use real inline SVGs only. */
.full-player .player-controls button::before,
.full-player #playerVolumeToggle::before,
.full-player .player-volume-toggle::after,
.floating-player .icon-button::before,
.file-inline-play::before {
  display: none !important;
  content: none !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.full-player .player-controls button svg,
.full-player #playerVolumeToggle svg,
.floating-player .icon-button svg,
.file-inline-play svg,
.player-glyph {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: currentColor !important;
  stroke: none !important;
  color: currentColor !important;
  filter: none !important;
}
.full-player .player-controls button,
.full-player .player-controls .icon-button,
.full-player .player-controls .main-play,
.floating-player .icon-button,
.file-inline-play {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
.full-player #prevTrack svg,
.full-player #nextTrack svg { width: 42px !important; height: 42px !important; }
.full-player #fullPlay svg { width: 48px !important; height: 48px !important; }
.full-player #playerShuffle svg,
.full-player #playerRepeat svg { width: 22px !important; height: 22px !important; opacity: .86 !important; }
.file-inline-play svg { width: 17px !important; height: 17px !important; }
.file-inline-play.is-playing svg { width: 16px !important; height: 16px !important; }
#miniPlay svg { width: 21px !important; height: 21px !important; }

/* Floating player: only show the volume icon until clicked. */
.floating-player {
  grid-template-columns: 52px minmax(0, 1fr) 40px 42px 30px !important;
  overflow: visible !important;
}
.mini-volume {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
}
.mini-volume-button {
  width: 40px !important;
  height: 40px !important;
}
#miniVolume {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 12px) !important;
  width: 150px !important;
  height: 6px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
  transition: opacity .16s ease, transform .16s ease !important;
  background: transparent !important;
  z-index: 20 !important;
}
.mini-volume.open #miniVolume {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.mini-volume.open::before {
  content: "" !important;
  position: absolute !important;
  right: -10px !important;
  bottom: calc(100% + 2px) !important;
  width: 176px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: rgba(8,8,10,.92) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(18px) !important;
}

/* Full-player volume: hidden until volume icon click. */
.full-player .player-volume-popup[hidden] { display: none !important; }
.full-player .player-volume-popup {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Keep instrumentals out of the visible related-file list if older markup slips through. */
.file-row:has(.file-kind-tag):has(.file-kind-tag) .file-kind-tag { text-decoration: none !important; }
.file-row:has(.file-kind-tag) { text-decoration: none !important; }

@media (max-width: 760px) {
  .floating-player {
    grid-template-columns: 48px minmax(0, 1fr) 38px 38px 24px !important;
  }
}

/* v12 hard reset: stable Apple-like player, readable volume sliders, cleaner typography */
:root {
  --site-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --title-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --am-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
}
html, body,
button, input, select, textarea,
.song-card, .song-card *,
.media-card, .media-card *,
.session-card, .session-card *,
.playlist-card, .playlist-card *,
.admin-card, .admin-card *,
.floating-player, .floating-player *,
.full-player, .full-player * {
  font-family: var(--site-font) !important;
}
.hero h1,
.section-title h1,
.song-head h2,
.media-card-head h2,
.session-card-head h2,
.playlist-card h2,
.playlist-detail h2,
.admin-card h2,
.fullTitle,
.full-player .player-info h2,
.mini-info strong,
.song-card .song-head h2 {
  font-family: var(--title-font) !important;
  font-weight: 720 !important;
  letter-spacing: -0.055em !important;
}
.song-head p,
.fullSub,
.mini-info span { font-weight: 520 !important; }
.meta-block > span,
.media-field > span,
.session-field > span {
  font-family: var(--site-font) !important;
  font-weight: 520 !important;
  letter-spacing: .01em !important;
}
.meta-block,
.metadata-value,
.metadata-search-text,
.inline-file-link,
.file-name strong,
.media-field-values,
.session-field strong {
  font-family: var(--site-font) !important;
  font-weight: 620 !important;
}

/* Kill every older mask/pseudo icon rule so inline SVG is the only visible icon. */
.full-player .player-controls button::before,
.full-player .player-controls button::after,
.full-player #playerVolumeToggle::before,
.full-player #playerVolumeToggle::after,
.full-player .player-volume-menu::before,
.full-player .player-volume-menu::after,
.full-player .player-volume-toggle::before,
.full-player .player-volume-toggle::after,
.floating-player .icon-button::before,
.floating-player .icon-button::after,
.file-inline-play::before,
.file-inline-play::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.full-player .player-controls svg,
.full-player #playerVolumeToggle svg,
.full-player .player-volume-high,
.floating-player .icon-button svg,
.file-inline-play svg,
.player-glyph {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: currentColor !important;
  fill: currentColor !important;
  stroke: none;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}
.player-glyph path[stroke],
.full-player .player-controls svg path[stroke] {
  fill: none !important;
  stroke: currentColor !important;
}
.full-player .player-controls {
  width: min(var(--am-left, 420px), 100%) !important;
  margin: 22px auto 18px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  align-items: center !important;
  justify-items: center !important;
}
.full-player .player-controls button,
.full-player .player-controls .icon-button,
.full-player .player-controls .main-play {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.94) !important;
  overflow: visible !important;
}
.full-player .player-controls #fullPlay {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
}
.full-player #prevTrack svg,
.full-player #nextTrack svg { width: 44px !important; height: 44px !important; }
.full-player #fullPlay svg { width: 54px !important; height: 54px !important; }
.full-player #playerShuffle svg,
.full-player #playerRepeat svg { width: 24px !important; height: 24px !important; opacity: .9 !important; }
.full-player .player-mode-button.active svg { opacity: 1 !important; filter: drop-shadow(0 0 8px rgba(255,255,255,.6)) !important; }

/* Full player volume is always a proper horizontal control. */
.full-player .player-extra-controls,
.full-player .fullExtraControls {
  width: min(var(--am-left, 420px), 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  align-items: center !important;
  justify-items: stretch !important;
}
.full-player .player-volume-menu {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 11px !important;
}
.full-player #playerVolumeToggle,
.full-player .player-volume-toggle {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.78) !important;
}
.full-player #playerVolumeToggle svg { width: 18px !important; height: 18px !important; }
.full-player .player-volume-high { width: 20px !important; height: 20px !important; color: rgba(255,255,255,.78) !important; }
.full-player .player-volume-popup,
.full-player .player-volume-popup[hidden],
.full-player .player-volume-popup:not([hidden]) {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.full-player #playerVolume,
.full-player #playerVolume:not([hidden]) {
  display: block !important;
  width: 100% !important;
  height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  accent-color: #fff !important;
  background: transparent !important;
}
.full-player #playerVolume::-webkit-slider-runnable-track {
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, rgba(255,255,255,.94) 0%, rgba(255,255,255,.94) var(--seek-progress, 100%), rgba(255,255,255,.28) var(--seek-progress, 100%), rgba(255,255,255,.28) 100%) !important;
}
.full-player #playerVolume::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.full-player #playerVolume::-moz-range-track { height: 7px !important; background: rgba(255,255,255,.28) !important; border-radius: 999px !important; }
.full-player #playerVolume::-moz-range-progress { height: 7px !important; background: #fff !important; border-radius: 999px !important; }
.full-player #playerVolume::-moz-range-thumb { width: 0 !important; height: 0 !important; border: 0 !important; background: transparent !important; }

/* Floating player: keep the button visible, show slider only after clicking. */
.floating-player {
  grid-template-columns: 52px minmax(0, 1fr) 42px 42px 30px !important;
  overflow: visible !important;
}
.mini-volume,
#miniVolumeControl {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
.mini-volume-button,
#miniVolumeToggle {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  place-items: center !important;
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#miniVolumeToggle svg { width: 20px !important; height: 20px !important; }
#miniVolume {
  position: absolute !important;
  right: -6px !important;
  bottom: calc(100% + 14px) !important;
  width: 156px !important;
  height: 7px !important;
  display: block !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
  transition: opacity .16s ease, transform .16s ease !important;
  z-index: 30 !important;
  background: transparent !important;
  accent-color: #fff !important;
}
.mini-volume.open #miniVolume { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }
.mini-volume.open::before {
  content: "" !important;
  position: absolute !important;
  right: -16px !important;
  bottom: calc(100% + 4px) !important;
  width: 184px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: rgba(18,18,20,.96) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(18px) !important;
}
#miniVolume::-webkit-slider-runnable-track {
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, #fff 0%, #fff var(--seek-progress, 100%), rgba(255,255,255,.28) var(--seek-progress, 100%), rgba(255,255,255,.28) 100%) !important;
}
#miniVolume::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#miniVolume::-moz-range-track { height: 7px !important; background: rgba(255,255,255,.28) !important; border-radius: 999px !important; }
#miniVolume::-moz-range-progress { height: 7px !important; background: #fff !important; border-radius: 999px !important; }
#miniVolume::-moz-range-thumb { width: 0 !important; height: 0 !important; border: 0 !important; background: transparent !important; }

.file-inline-play svg { width: 18px !important; height: 18px !important; }
.file-inline-play.is-playing svg { width: 17px !important; height: 17px !important; }
#miniPlay svg { width: 22px !important; height: 22px !important; }

@media (max-width: 760px) {
  .floating-player { grid-template-columns: 48px minmax(0, 1fr) 40px 40px 24px !important; }
  #miniVolumeControl, .mini-volume { width: 40px !important; height: 40px !important; }
  #miniVolumeToggle, .mini-volume-button { width: 40px !important; height: 40px !important; display: grid !important; }
}


/* ===== v13 final override: Apple-like system font, stable SF-style icons, visible main volume ===== */
:root {
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Avenir Next", Arial, sans-serif;
}
html, body, button, input, select, textarea,
.hero h1, .section-title h1, .song-head h2, .song-card, .meta-block,
.floating-player, .full-player, .full-player *, .playlist-card, .media-card, .session-card {
  font-family: var(--apple-font) !important;
}
.hero h1, .section-title h1, .song-head h2, .fullTitle, .mini-info strong, .song-card h2,
.meta-block strong, .metadata-value, .file-name strong {
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
}
.meta-block strong, .metadata-value, .file-name strong { letter-spacing: -0.015em !important; }
.fullSub, .mini-info span, .song-head p { font-weight: 500 !important; }

/* Reset all previous icon hacks/masks so the inline glyphs render whole */
.full-player .player-controls button::before,
.full-player .player-controls button::after,
.full-player #playerVolumeToggle::before,
.full-player #playerVolumeToggle::after,
.floating-player .icon-button::before,
.floating-player .icon-button::after,
.file-inline-play::before,
.file-inline-play::after {
  content: none !important;
  display: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  background: none !important;
}
.full-player .player-controls svg,
.full-player #playerVolumeToggle svg,
.floating-player .icon-button svg,
.file-inline-play svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  color: currentColor !important;
  fill: currentColor !important;
  stroke: none !important;
  filter: none !important;
}
.full-player .player-controls svg path,
.full-player #playerVolumeToggle svg path,
.floating-player .icon-button svg path,
.file-inline-play svg path {
  fill: currentColor;
}
.full-player #playerShuffle svg path,
.full-player #playerRepeat svg path {
  fill: none !important;
  stroke: currentColor !important;
}
.full-player #prevTrack svg,
.full-player #nextTrack svg { width: 36px !important; height: 36px !important; }
.full-player #fullPlay svg { width: 44px !important; height: 44px !important; }
.full-player #playerShuffle svg,
.full-player #playerRepeat svg { width: 22px !important; height: 22px !important; }
.full-player #playerVolumeToggle svg,
.player-volume-high { width: 18px !important; height: 18px !important; }

.full-player .player-controls {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  width: var(--player-cover-width, min(390px, 31vw, 48vh)) !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}
.full-player .player-controls .icon-button,
.full-player .player-controls .main-play {
  width: 64px !important;
  height: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255,255,255,.93) !important;
}
.full-player .player-controls .main-play { color: #fff !important; }

/* Full player volume is visible. Floating player volume opens only when clicked. */
.full-player .player-volume-menu {
  width: var(--player-cover-width, min(390px, 31vw, 48vh)) !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0,1fr) 22px !important;
  align-items: center !important;
  gap: 12px !important;
}
.full-player #playerVolumePopup {
  display: block !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.full-player #playerVolumePopup[hidden] { display: block !important; }
.full-player #playerVolume {
  display: block !important;
  width: 100% !important;
  height: 6px !important;
  opacity: 1 !important;
  background: linear-gradient(to right, #fff var(--seek-progress, 100%), rgba(255,255,255,.32) 0) !important;
}
.full-player .player-volume-high { display: block !important; color: rgba(255,255,255,.76) !important; }
.floating-player .mini-volume {
  position: relative !important;
  width: 36px !important;
  display: grid !important;
  place-items: center !important;
}
.floating-player #miniVolume {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 12px) !important;
  width: 150px !important;
  height: 6px !important;
  padding: 0 !important;
  display: none !important;
  opacity: 1 !important;
  background: linear-gradient(to right, #fff var(--seek-progress, 100%), rgba(255,255,255,.32) 0) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.45) !important;
}
.floating-player .mini-volume.open #miniVolume { display: block !important; }
.floating-player #miniVolumeToggle { display: grid !important; opacity: 1 !important; }
.floating-player #miniVolumeToggle svg { width: 20px !important; height: 20px !important; }

@media (max-width: 899px) {
  .full-player .player-controls,
  .full-player .player-volume-menu {
    width: min(100%, calc(100vw - 52px)) !important;
    margin-inline: auto !important;
  }
  .full-player #prevTrack svg,
  .full-player #nextTrack svg { width: 48px !important; height: 48px !important; }
  .full-player #fullPlay svg { width: 58px !important; height: 58px !important; }
  .full-player .player-controls .icon-button,
  .full-player .player-controls .main-play { height: 82px !important; }
}


/* ===== v14: rounded site font + real SF Symbols from the supplied GitHub repo ===== */
:root {
  --rounded-site-font: "Nunito Sans", "Arial Rounded MT Bold", "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}
html, body, button, input, select, textarea,
.hero h1, .section-title h1, .song-head h2, .song-card, .meta-block, .metadata-value,
.floating-player, .floating-player *, .full-player, .full-player *, .playlist-card, .media-card, .session-card,
.file-button, .soft-button, .lastfm-button, .tab, .text-filter {
  font-family: var(--rounded-site-font) !important;
}
.hero h1, .section-title h1, .song-head h2, .fullTitle, #fullTitle, .mini-info strong,
.song-card h2, .media-card h2, .session-card h2, .playlist-card h2 {
  font-weight: 760 !important;
  letter-spacing: -0.035em !important;
}
.meta-block strong, .metadata-value, .file-name strong, .song-head p, .fullSub, .mini-info span {
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
}
.meta-block > span, .media-field > span, .session-field > span, .song-tag, .tab, .text-filter {
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

.full-player .player-controls button::before,
.full-player .player-controls button::after,
.full-player #playerVolumeToggle::before,
.full-player #playerVolumeToggle::after,
.full-player .player-volume-menu::before,
.full-player .player-volume-menu::after,
.floating-player .icon-button::before,
.floating-player .icon-button::after,
.file-inline-play::before,
.file-inline-play::after {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.sf-symbol-wrap {
  display: inline-grid !important;
  place-items: center !important;
  width: 1em !important;
  height: 1em !important;
  line-height: 1 !important;
  color: currentColor !important;
  pointer-events: none !important;
}
.sf-symbol-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
}
.sf-symbol-fallback {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  color: currentColor !important;
  fill: currentColor !important;
  overflow: visible !important;
}
.sf-symbol-fallback path[stroke] {
  fill: none !important;
  stroke: currentColor !important;
}
.full-player .player-controls svg:not(.sf-symbol-fallback),
.full-player #playerVolumeToggle svg:not(.sf-symbol-fallback),
.floating-player .icon-button svg:not(.sf-symbol-fallback),
.file-inline-play svg:not(.sf-symbol-fallback) {
  display: none !important;
}
.full-player #prevTrack .sf-symbol-wrap,
.full-player #nextTrack .sf-symbol-wrap { width: 42px !important; height: 42px !important; font-size: 42px !important; }
.full-player #fullPlay .sf-symbol-wrap { width: 54px !important; height: 54px !important; font-size: 54px !important; }
.full-player #playerShuffle .sf-symbol-wrap,
.full-player #playerRepeat .sf-symbol-wrap { width: 24px !important; height: 24px !important; font-size: 24px !important; opacity: .9 !important; }
.full-player #playerVolumeToggle .sf-symbol-wrap,
.full-player .player-volume-high .sf-symbol-wrap { width: 18px !important; height: 18px !important; font-size: 18px !important; }
#miniPlay .sf-symbol-wrap { width: 22px !important; height: 22px !important; font-size: 22px !important; }
#miniVolumeToggle .sf-symbol-wrap { width: 19px !important; height: 19px !important; font-size: 19px !important; }
.file-inline-play .sf-symbol-wrap { width: 18px !important; height: 18px !important; font-size: 18px !important; }

.full-player .player-controls {
  width: var(--player-cover-width, min(390px, 31vw, 48vh)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;
}
.full-player .player-controls button,
.full-player .player-controls .icon-button,
.full-player .player-controls .main-play {
  display: grid !important;
  place-items: center !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.94) !important;
  overflow: visible !important;
}
.full-player #fullPlay { width: 76px !important; height: 76px !important; min-width: 76px !important; min-height: 76px !important; color: #fff !important; }

.full-player .player-volume-menu {
  width: var(--player-cover-width, min(390px, 31vw, 48vh)) !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}
.full-player #playerVolumePopup,
.full-player #playerVolumePopup[hidden],
.full-player #playerVolumePopup:not([hidden]) {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.full-player #playerVolume {
  display: block !important;
  width: 100% !important;
  height: 7px !important;
  min-height: 7px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
  accent-color: #fff !important;
}
.full-player #playerVolume::-webkit-slider-runnable-track {
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, rgba(255,255,255,.96) 0%, rgba(255,255,255,.96) var(--seek-progress, 100%), rgba(255,255,255,.34) var(--seek-progress, 100%), rgba(255,255,255,.34) 100%) !important;
}
.full-player #playerVolume::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: transparent !important; }
.full-player #playerVolume::-moz-range-track { height: 7px !important; border-radius: 999px !important; background: rgba(255,255,255,.34) !important; }
.full-player #playerVolume::-moz-range-progress { height: 7px !important; border-radius: 999px !important; background: #fff !important; }
.full-player #playerVolume::-moz-range-thumb { width: 0 !important; height: 0 !important; border: 0 !important; background: transparent !important; }
.full-player .player-volume-high { display: grid !important; place-items: center !important; color: rgba(255,255,255,.78) !important; }

.floating-player .mini-volume,
.floating-player #miniVolumeControl {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
.floating-player #miniVolumeToggle,
.floating-player .mini-volume-button {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.94) !important;
}
.floating-player #miniVolume {
  position: absolute !important;
  right: 16px !important;
  bottom: calc(100% + 14px) !important;
  width: 7px !important;
  height: 158px !important;
  padding: 0 !important;
  display: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 30 !important;
  background: transparent !important;
  accent-color: #fff !important;
  writing-mode: vertical-lr !important;
  direction: rtl !important;
  -webkit-appearance: slider-vertical !important;
}
.floating-player .mini-volume.open #miniVolume { display: block !important; }
.floating-player .mini-volume.open::before {
  content: "" !important;
  position: absolute !important;
  right: 2px !important;
  bottom: calc(100% + 2px) !important;
  width: 36px !important;
  height: 192px !important;
  border-radius: 999px !important;
  background: rgba(17,17,19,.96) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(18px) !important;
}
#miniVolume::-webkit-slider-runnable-track {
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(to top, #fff 0%, #fff var(--seek-progress, 100%), rgba(255,255,255,.34) var(--seek-progress, 100%), rgba(255,255,255,.34) 100%) !important;
}
#miniVolume::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: transparent !important; }
#miniVolume::-moz-range-track { height: 7px !important; border-radius: 999px !important; background: rgba(255,255,255,.34) !important; }
#miniVolume::-moz-range-progress { height: 7px !important; border-radius: 999px !important; background: #fff !important; }
#miniVolume::-moz-range-thumb { width: 0 !important; height: 0 !important; border: 0 !important; background: transparent !important; }


/* ===== v15 emergency fix: no broken inline onerror icons + old-site font + Apple-bold synced lyrics ===== */
:root {
  --old-site-font: Inter, "SF Pro Display", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --apple-lyrics-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
html, body, button, input, select, textarea,
.hero h1, .section-title h1, .song-head h2,
.song-card, .song-card *, .media-card, .media-card *, .session-card, .session-card *, .playlist-card, .playlist-card *,
.tabs, .tabs *, .filter-row, .filter-row *, .advanced-filter-toggle-row, .advanced-filter-toggle-row *,
.advanced-filters, .advanced-filters *,
.floating-player, .floating-player *, .full-player .player-primary, .full-player .player-primary * {
  font-family: var(--old-site-font) !important;
}
.hero h1, .section-title h1, .song-head h2, .song-card h2, .media-card h2, .session-card h2, .playlist-card h2,
.fullTitle, #fullTitle, .mini-info strong {
  font-weight: 760 !important;
  letter-spacing: -0.052em !important;
}
.meta-block strong, .metadata-value, .file-name strong, .song-head p, .fullSub, .mini-info span {
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
}
.full-player .lyrics-panel,
.full-player .lyrics-panel *,
.full-player .lyrics-lines,
.full-player #lyricsLines,
.full-player #lyricsLines *,
.full-player .lyrics-line,
.full-player .lyrics-empty {
  font-family: var(--apple-lyrics-font) !important;
}
.full-player .lyrics-line {
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
}
.full-player .lyrics-line.active {
  font-weight: 820 !important;
}

/* SF Symbols from the linked repo: render only the PNG image, never the broken inline fallback text. */
.sf-symbol-wrap {
  display: inline-grid !important;
  place-items: center !important;
  width: 1em !important;
  height: 1em !important;
  line-height: 1 !important;
  overflow: hidden !important;
  color: currentColor !important;
  pointer-events: none !important;
}
.sf-symbol-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
}
.sf-symbol-fallback { display: none !important; }
.full-player .player-controls svg:not(.sf-symbol-fallback),
.full-player #playerVolumeToggle svg:not(.sf-symbol-fallback),
.floating-player .icon-button svg:not(.sf-symbol-fallback),
.file-inline-play svg:not(.sf-symbol-fallback) {
  display: none !important;
}
.full-player #prevTrack .sf-symbol-wrap,
.full-player #nextTrack .sf-symbol-wrap { width: 42px !important; height: 42px !important; font-size: 42px !important; }
.full-player #fullPlay .sf-symbol-wrap { width: 56px !important; height: 56px !important; font-size: 56px !important; }
.full-player #playerShuffle .sf-symbol-wrap,
.full-player #playerRepeat .sf-symbol-wrap { width: 25px !important; height: 25px !important; font-size: 25px !important; opacity: .92 !important; }
.full-player #playerVolumeToggle .sf-symbol-wrap,
.full-player .player-volume-high .sf-symbol-wrap { width: 18px !important; height: 18px !important; font-size: 18px !important; }
#miniPlay .sf-symbol-wrap { width: 22px !important; height: 22px !important; font-size: 22px !important; }
#miniVolumeToggle .sf-symbol-wrap { width: 19px !important; height: 19px !important; font-size: 19px !important; }
.file-inline-play .sf-symbol-wrap { width: 18px !important; height: 18px !important; font-size: 18px !important; }

.full-player .player-controls button,
.full-player .player-controls .icon-button,
.full-player .player-controls .main-play {
  overflow: visible !important;
  color: rgba(255,255,255,.94) !important;
}
.full-player #fullPlay { color: #fff !important; }
.full-player .player-volume-menu {
  display: grid !important;
  grid-template-columns: 22px minmax(0,1fr) 22px !important;
  gap: 12px !important;
  align-items: center !important;
}
.full-player .player-volume-high {
  display: inline-grid !important;
  place-items: center !important;
  color: rgba(255,255,255,.76) !important;
}

/* ===== v16 mobile fullscreen player fix: true overlay, Apple Music mobile proportions, transparent lyrics ===== */
:root {
  --am-mobile-width: min(86vw, 392px);
  --am-mobile-title: clamp(23px, 6.1vw, 27px);
  --am-mobile-artist: clamp(19px, 5.2vw, 22px);
  --am-mobile-time: clamp(13px, 3.5vw, 15px);
}

html.player-is-open,
body.player-is-open {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.player-is-open {
  touch-action: none !important;
}

.full-player:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  max-height: 100dvh !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--player-era-color-2, #334052) 52%, transparent) 0%, transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--player-era-color, #29303b) 82%, #15171c), #121217 92%) !important;
}

.full-player:not([hidden]) .player-backdrop {
  position: fixed !important;
  inset: -8% !important;
  width: auto !important;
  height: auto !important;
  opacity: .74 !important;
  filter: blur(56px) saturate(1.45) brightness(.72) !important;
  transform: scale(1.12) !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .full-player:not([hidden]) {
    display: block !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: auto !important;
  }

  .full-player .player-close {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    z-index: 30 !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(255,255,255,.12) !important;
    border: 0 !important;
    backdrop-filter: blur(18px) !important;
  }

  .full-player .player-layout {
    position: relative !important;
    z-index: 2 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    max-height: 100dvh !important;
    padding:
      max(38px, calc(env(safe-area-inset-top) + 26px))
      0
      max(18px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "primary"
      "lyrics" !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: center !important;
    gap: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  .full-player .player-primary {
    grid-area: primary !important;
    width: var(--am-mobile-width) !important;
    max-width: var(--am-mobile-width) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    justify-items: stretch !important;
    gap: 0 !important;
    text-align: left !important;
    overflow: visible !important;
  }

  .full-player .player-art,
  .full-player .fullCover {
    width: var(--am-mobile-width) !important;
    height: var(--am-mobile-width) !important;
    max-width: var(--am-mobile-width) !important;
    max-height: var(--am-mobile-width) !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.31) !important;
    overflow: hidden !important;
  }

  .full-player .player-info,
  .full-player .fullTrackInfo {
    width: 100% !important;
    padding: 0 !important;
    margin: clamp(28px, 6.2vh, 38px) 0 0 !important;
    display: block !important;
    text-align: left !important;
  }

  .full-player #fullTitle,
  .full-player .fullTitle {
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important;
    font-size: var(--am-mobile-title) !important;
    line-height: 1.07 !important;
    font-weight: 730 !important;
    letter-spacing: -0.04em !important;
    color: rgba(255,255,255,.94) !important;
  }

  .full-player #fullArtist,
  .full-player .fullSub {
    margin: 4px 0 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important;
    font-size: var(--am-mobile-artist) !important;
    line-height: 1.08 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
    color: rgba(255,255,255,.56) !important;
  }

  .full-player .timeline,
  .full-player .fullSeek {
    width: 100% !important;
    margin: clamp(25px, 5.4vh, 34px) 0 0 !important;
    display: grid !important;
    gap: 11px !important;
  }

  .full-player #playerSeek {
    width: 100% !important;
    height: 6px !important;
    min-height: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #fff !important;
  }

  .full-player #playerSeek::-webkit-slider-runnable-track {
    height: 6px !important;
    border-radius: 999px !important;
  }
  .full-player #playerSeek::-moz-range-track,
  .full-player #playerSeek::-moz-range-progress {
    height: 6px !important;
    border-radius: 999px !important;
  }

  .full-player .fullTimeRow {
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important;
    font-size: var(--am-mobile-time) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    color: rgba(255,255,255,.46) !important;
  }

  .full-player .player-controls,
  .full-player .fullControls {
    width: 100% !important;
    max-width: 100% !important;
    margin: clamp(35px, 7.6vh, 50px) 0 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
  }

  .full-player #playerShuffle,
  .full-player #playerRepeat {
    display: none !important;
  }

  .full-player .player-controls button,
  .full-player .player-controls .icon-button,
  .full-player .player-controls .main-play {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .full-player #fullPlay {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }

  .full-player #prevTrack .sf-symbol-wrap,
  .full-player #nextTrack .sf-symbol-wrap,
  .full-player #prevTrack svg,
  .full-player #nextTrack svg {
    width: 43px !important;
    height: 43px !important;
    font-size: 43px !important;
  }

  .full-player #fullPlay .sf-symbol-wrap,
  .full-player #fullPlay svg {
    width: 57px !important;
    height: 57px !important;
    font-size: 57px !important;
  }

  .full-player .player-extra-controls,
  .full-player .fullExtraControls {
    width: 100% !important;
    max-width: 100% !important;
    margin: clamp(31px, 6.8vh, 42px) 0 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    justify-items: stretch !important;
    align-items: center !important;
  }

  .full-player .player-volume-menu {
    width: 100% !important;
    max-width: 100% !important;
    height: 24px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) 24px !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .full-player #playerVolumeToggle,
  .full-player .player-volume-high {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    color: rgba(255,255,255,.72) !important;
  }

  .full-player #playerVolumeToggle .sf-symbol-wrap,
  .full-player .player-volume-high .sf-symbol-wrap,
  .full-player #playerVolumeToggle svg,
  .full-player .player-volume-high svg {
    width: 17px !important;
    height: 17px !important;
    font-size: 17px !important;
  }

  .full-player #playerVolume,
  .full-player #playerVolume:not([hidden]) {
    height: 5px !important;
    min-height: 5px !important;
  }
  .full-player #playerVolume::-webkit-slider-runnable-track { height: 5px !important; }
  .full-player #playerVolume::-moz-range-track,
  .full-player #playerVolume::-moz-range-progress { height: 5px !important; }

  .full-player #toggleLyricsSubmit {
    justify-self: start !important;
    margin-top: 0 !important;
  }

  .full-player.no-lyrics .lyrics-panel,
  .full-player.lyrics-loading .lyrics-panel:has(.lyrics-empty) {
    display: none !important;
  }

  .full-player.has-lyrics .lyrics-panel,
  .full-player .lyrics-panel {
    grid-area: lyrics !important;
    width: var(--am-mobile-width) !important;
    max-width: var(--am-mobile-width) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: clamp(22px, 4.6vh, 34px) auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
  }

  .full-player .lyrics-head,
  .full-player .lyricsBoxTop {
    display: none !important;
  }

  .full-player .lyrics-lines,
  .full-player #lyricsLines {
    width: 100% !important;
    height: min(31dvh, 260px) !important;
    max-height: min(31dvh, 260px) !important;
    margin: 0 !important;
    padding: 18px 0 38px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 82%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 82%, transparent 100%) !important;
  }

  .full-player .lyrics-lines::-webkit-scrollbar,
  .full-player #lyricsLines::-webkit-scrollbar {
    display: none !important;
  }

  .full-player .lyrics-line {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important;
    font-size: clamp(25px, 7vw, 34px) !important;
    line-height: 1.08 !important;
    font-weight: 820 !important;
    letter-spacing: -0.055em !important;
    color: rgba(255,255,255,.34) !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .full-player .lyrics-line.active {
    color: rgba(255,255,255,.95) !important;
    filter: none !important;
    transform: none !important;
  }

  .full-player .lyrics-empty {
    color: rgba(255,255,255,.54) !important;
    background: transparent !important;
  }

  .full-player .lyrics-submitter:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: max(46px, calc(env(safe-area-inset-top) + 24px)) 18px max(22px, env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 390px) {
  :root { --am-mobile-width: min(84vw, 342px); }
  .full-player .player-info, .full-player .fullTrackInfo { margin-top: 22px !important; }
  .full-player .timeline, .full-player .fullSeek { margin-top: 22px !important; gap: 9px !important; }
  .full-player .player-controls, .full-player .fullControls { margin-top: 30px !important; }
  .full-player .player-extra-controls, .full-player .fullExtraControls { margin-top: 24px !important; }
  .full-player.has-lyrics .lyrics-panel, .full-player .lyrics-panel { margin-top: 18px !important; }
}

/* === v17: player sizing, lyrics scroll, card typography, and Media Session UI fixes === */

/* Cards: only the song title should feel bold. Metadata stays readable but lighter. */
.song-card,
.song-card *:not(.song-head h2):not(.song-tag):not(.era-flair):not(.status-flair) {
  font-weight: 500 !important;
}
.song-head h2 {
  font-weight: 760 !important;
  letter-spacing: -0.045em !important;
}
.meta-block > strong,
.media-field > strong,
.session-field > strong,
.metadata-value,
.metadata-search-text,
.inline-file-link,
.media-field-values {
  font-weight: 500 !important;
}

/* Lyrics: one Apple-style font everywhere; inactive/smaller lines are still bold. */
.full-player .lyrics-panel,
.full-player .lyrics-lines,
.full-player .lyrics-line,
.full-player .lyrics-empty {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif !important;
}
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near {
  font-weight: 720 !important;
  filter: none !important;
  -webkit-filter: none !important;
}
.full-player .lyrics-line.active {
  font-weight: 800 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Desktop player: buttons smaller and less heavy. */
@media (min-width: 900px) {
  .full-player .player-controls {
    grid-template-rows: 44px !important;
    margin-bottom: 18px !important;
  }
  .full-player #playerShuffle,
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack,
  .full-player #playerRepeat {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .full-player #playerShuffle::before,
  .full-player #playerRepeat::before {
    width: 15px !important;
    height: 15px !important;
    opacity: .78 !important;
  }
  .full-player #prevTrack::before,
  .full-player #nextTrack::before {
    width: 24px !important;
    height: 24px !important;
  }
  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before {
    width: 30px !important;
    height: 30px !important;
  }
  .full-player .player-volume-menu {
    grid-template-columns: 18px minmax(0, 1fr) 18px !important;
    grid-template-rows: 20px !important;
    gap: 10px !important;
  }
  .full-player #playerVolumeToggle::before,
  .full-player .player-volume-menu::after {
    width: 14px !important;
    height: 14px !important;
    opacity: .78 !important;
  }
  .full-player #playerVolume {
    height: 4px !important;
  }
  .full-player .lyrics-line {
    font-size: clamp(30px, 3.15vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.052em !important;
  }
}

/* Mobile: the overlay covers the site, but the player itself can scroll to lyrics. */
@media (max-width: 899px) {
  html.player-is-open,
  body.player-is-open {
    overflow: hidden !important;
    height: 100svh !important;
  }
  .full-player {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: max(22px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom)) !important;
  }
  .full-player::before,
  .full-player .player-backdrop {
    position: fixed !important;
  }
  .full-player .player-layout,
  .full-player.no-lyrics:not(.lrc-open) .player-layout,
  .full-player.lrc-open .player-layout {
    width: 100% !important;
    height: auto !important;
    min-height: calc(100svh - max(22px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
    max-height: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0 !important;
    padding: 0 0 36px !important;
  }
  .full-player .player-primary {
    width: var(--am-cover) !important;
    max-width: var(--am-cover) !important;
  }
  .full-player .player-art {
    width: var(--am-cover) !important;
    height: var(--am-cover) !important;
    margin: clamp(20px, 4.5svh, 44px) auto 22px !important;
    border-radius: 28px !important;
  }
  .full-player .player-info {
    margin: 0 auto 14px !important;
  }
  .full-player .player-info h2 {
    font-size: clamp(22px, 6.4vw, 30px) !important;
    line-height: 1.04 !important;
    font-weight: 720 !important;
    letter-spacing: -.035em !important;
  }
  .full-player .player-info p {
    font-size: clamp(17px, 4.8vw, 22px) !important;
    line-height: 1.08 !important;
    font-weight: 500 !important;
    margin-top: 3px !important;
    color: rgba(255,255,255,.60) !important;
  }
  .full-player .timeline {
    gap: 9px !important;
    margin: 0 auto 28px !important;
  }
  .full-player #playerSeek,
  .full-player #playerSeek::-webkit-slider-runnable-track {
    height: 6px !important;
  }
  .full-player .fullTimeRow {
    font-size: clamp(14px, 3.7vw, 17px) !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.58) !important;
  }
  .full-player .player-controls {
    width: var(--am-cover) !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: 60px !important;
    margin: 0 auto 28px !important;
  }
  .full-player #playerShuffle,
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack,
  .full-player #playerRepeat {
    width: 54px !important;
    height: 54px !important;
  }
  .full-player #playerShuffle::before,
  .full-player #playerRepeat::before {
    width: 18px !important;
    height: 18px !important;
  }
  .full-player #prevTrack::before,
  .full-player #nextTrack::before {
    width: 38px !important;
    height: 38px !important;
  }
  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before {
    width: 48px !important;
    height: 48px !important;
  }
  .full-player .player-extra-controls {
    margin: 0 auto 24px !important;
  }
  .full-player .player-volume-menu {
    grid-template-columns: 22px minmax(0,1fr) 22px !important;
    grid-template-rows: 24px !important;
    gap: 12px !important;
  }
  .full-player #playerVolume,
  .full-player #playerVolume::-webkit-slider-runnable-track {
    height: 5px !important;
  }
  .full-player #playerVolumeToggle::before,
  .full-player .player-volume-menu::after {
    width: 16px !important;
    height: 16px !important;
    opacity: .78 !important;
  }

  /* Mobile lyrics: no visible card, only transparent scrollable lyrics over the player background. */
  .full-player .lyrics-panel {
    width: var(--am-cover) !important;
    height: 48svh !important;
    min-height: 260px !important;
    max-height: 520px !important;
    overflow: hidden !important;
    margin: 6px auto 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .full-player.no-lyrics:not(.lrc-open) .lyrics-panel {
    display: none !important;
  }
  .full-player .lyrics-lines {
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 8svh 0 11svh !important;
    gap: 18px !important;
    touch-action: pan-y !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 13%, black 88%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 13%, black 88%, transparent 100%) !important;
  }
  .full-player .lyrics-line,
  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.08 !important;
    font-weight: 720 !important;
    letter-spacing: -.045em !important;
    color: rgba(255,255,255,.42) !important;
  }
  .full-player .lyrics-line.active {
    font-weight: 800 !important;
    color: #fff !important;
  }
}

@media (max-height: 760px) and (max-width: 899px) {
  .full-player .player-info h2 { font-size: clamp(20px, 5.8vw, 26px) !important; }
  .full-player .player-info p { font-size: clamp(16px, 4.5vw, 20px) !important; }
  .full-player .timeline { margin-bottom: 20px !important; }
  .full-player .player-controls { grid-template-rows: 54px !important; margin-bottom: 20px !important; }
  .full-player #prevTrack::before,
  .full-player #nextTrack::before { width: 34px !important; height: 34px !important; }
  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before { width: 44px !important; height: 44px !important; }
}

/* === v18 final override: fix lyrics font consistency + smaller player controls === */
:root {
  --site-font-final: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --lyrics-font-final: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

html, body, button, input, select, textarea,
.site-header, .tabs, main, .song-card, .media-card, .session-card,
.playlist-card, .floating-player, .full-player {
  font-family: var(--site-font-final) !important;
}

/* Card content should not look bold; keep only song titles strong. */
.song-card .song-head h2,
.media-card-head h2,
.session-card-head h2,
.playlist-card h2,
.playlist-detail h2 {
  font-family: var(--site-font-final) !important;
  font-weight: 760 !important;
  letter-spacing: -0.035em !important;
}
.song-card .song-head p,
.song-card .meta-block,
.song-card .meta-block > strong,
.song-card .metadata-value,
.song-card .metadata-value *,
.song-card .metadata-search-text,
.song-card .inline-file-link,
.song-card .media-field-values,
.song-card .file-name strong,
.song-card .file-name span,
.media-card .media-field,
.media-card .media-field > strong,
.media-card .media-field-values,
.session-card .session-field,
.session-card .session-field > strong,
.session-card .session-field-grid,
.playlist-card p {
  font-family: var(--site-font-final) !important;
  font-weight: 430 !important;
  letter-spacing: -0.01em !important;
}
.song-card .meta-block > span,
.media-field > span,
.session-field > span {
  font-weight: 460 !important;
}

/* One lyrics font only. No condensed/Impact-looking weight. */
.full-player .lyrics-panel,
.full-player .lyrics-lines,
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near,
.full-player .lyrics-line.active,
.full-player .lyrics-empty {
  font-family: var(--lyrics-font-final) !important;
  font-style: normal !important;
  font-stretch: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
}
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near {
  font-weight: 680 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.13 !important;
}
.full-player .lyrics-line.active {
  font-weight: 760 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.13 !important;
}

/* Desktop: reduce full-player button size and icon size. */
@media (min-width: 900px) {
  .full-player .player-controls,
  .full-player .fullControls {
    grid-template-rows: 38px !important;
    gap: 18px !important;
    margin-top: 24px !important;
    margin-bottom: 14px !important;
    align-items: center !important;
  }
  .full-player .player-controls button,
  .full-player .player-controls .icon-button,
  .full-player .player-controls .main-play,
  .full-player #playerShuffle,
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack,
  .full-player #playerRepeat {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
  }
  .full-player #playerShuffle .sf-symbol-wrap,
  .full-player #playerRepeat .sf-symbol-wrap,
  .full-player #playerShuffle .sf-symbol-img,
  .full-player #playerRepeat .sf-symbol-img {
    width: 15px !important;
    height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
  }
  .full-player #prevTrack .sf-symbol-wrap,
  .full-player #nextTrack .sf-symbol-wrap,
  .full-player #prevTrack .sf-symbol-img,
  .full-player #nextTrack .sf-symbol-img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }
  .full-player #fullPlay .sf-symbol-wrap,
  .full-player #fullPlay .sf-symbol-img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
  .full-player .player-controls svg,
  .full-player .player-controls svg path,
  .full-player .player-controls button::before,
  .full-player .player-controls button::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .full-player .lyrics-line,
  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near {
    font-size: clamp(28px, 3.05vw, 44px) !important;
  }
  .full-player .lyrics-line.active {
    font-size: clamp(30px, 3.25vw, 46px) !important;
  }
}

/* Mobile: allow reading lyrics while the site behind stays locked; smaller text/buttons. */
@media (max-width: 899px) {
  html.player-is-open,
  body.player-is-open {
    overflow: hidden !important;
    height: 100svh !important;
  }
  .full-player:not([hidden]) {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }
  .full-player .player-info h2 {
    font-size: clamp(19px, 5.5vw, 25px) !important;
    font-weight: 720 !important;
    line-height: 1.05 !important;
  }
  .full-player .player-info p {
    font-size: clamp(15px, 4.1vw, 19px) !important;
    font-weight: 470 !important;
  }
  .full-player #playerSeek,
  .full-player #playerSeek::-webkit-slider-runnable-track {
    height: 5px !important;
  }
  .full-player .fullTimeRow {
    font-size: clamp(12px, 3.25vw, 15px) !important;
  }
  .full-player .player-controls,
  .full-player .fullControls {
    grid-template-rows: 46px !important;
    margin-bottom: 18px !important;
    gap: 18px !important;
  }
  .full-player .player-controls button,
  .full-player .player-controls .icon-button,
  .full-player .player-controls .main-play,
  .full-player #playerShuffle,
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack,
  .full-player #playerRepeat {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
  .full-player #playerShuffle .sf-symbol-wrap,
  .full-player #playerRepeat .sf-symbol-wrap,
  .full-player #playerShuffle .sf-symbol-img,
  .full-player #playerRepeat .sf-symbol-img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }
  .full-player #prevTrack .sf-symbol-wrap,
  .full-player #nextTrack .sf-symbol-wrap,
  .full-player #prevTrack .sf-symbol-img,
  .full-player #nextTrack .sf-symbol-img {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }
  .full-player #fullPlay .sf-symbol-wrap,
  .full-player #fullPlay .sf-symbol-img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }
  .full-player .player-controls svg,
  .full-player .player-controls svg path,
  .full-player .player-controls button::before,
  .full-player .player-controls button::after {
    display: none !important;
    content: none !important;
  }
  .full-player .lyrics-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .full-player .lyrics-lines {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
    padding-top: 7svh !important;
    padding-bottom: 12svh !important;
  }
  .full-player .lyrics-line,
  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near {
    font-size: clamp(21px, 6.4vw, 30px) !important;
    font-weight: 680 !important;
    letter-spacing: -0.018em !important;
  }
  .full-player .lyrics-line.active {
    font-size: clamp(22px, 6.8vw, 32px) !important;
    font-weight: 760 !important;
  }
  .full-player #playerVolumeToggle .sf-symbol-wrap,
  .full-player .player-volume-high .sf-symbol-wrap,
  .full-player #playerVolumeToggle .sf-symbol-img,
  .full-player .player-volume-high .sf-symbol-img {
    width: 15px !important;
    height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
  }
}

/* === v19 final alignment / Apple Music typography fixes === */
:root {
  --apple-lyrics-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
}

/* Lyrics: one Apple/system font only, not Inter/Impact-like. */
.full-player .lyrics-panel,
.full-player .lyrics-lines,
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near,
.full-player .lyrics-line.active,
.full-player .lyrics-empty {
  font-family: var(--apple-lyrics-font) !important;
  font-synthesis-weight: none !important;
  font-stretch: 100% !important;
  letter-spacing: -0.032em !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near {
  font-weight: 700 !important;
  line-height: 1.11 !important;
}
.full-player .lyrics-line.active {
  font-weight: 730 !important;
  line-height: 1.11 !important;
}

/* Title/artist centered under the cover on every viewport. */
.full-player .player-primary {
  justify-items: center !important;
  align-items: center !important;
}
.full-player .player-info,
.full-player .player-info h2,
.full-player .player-info p {
  text-align: center !important;
}
.full-player .player-info {
  width: var(--am-left, var(--am-cover)) !important;
  max-width: var(--am-left, var(--am-cover)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile background must be one fixed layer, no visible horizontal cut/repeat while scrolling. */
@media (max-width: 899px) {
  .full-player:not([hidden]) {
    min-height: 100dvh !important;
    background-repeat: no-repeat !important;
    background-size: 100vw 100dvh !important;
    background-attachment: fixed !important;
    background-position: center !important;
  }
  .full-player::before,
  .full-player::after,
  .full-player .player-backdrop {
    position: fixed !important;
    min-height: 100dvh !important;
  }

  .full-player .player-primary {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .full-player .player-art,
  .full-player .player-info,
  .full-player .timeline,
  .full-player .player-extra-controls {
    width: min(calc(100vw - 44px), 392px) !important;
    max-width: min(calc(100vw - 44px), 392px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .full-player .player-info {
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
  .full-player .player-info h2 {
    font-size: clamp(18px, 5.1vw, 22px) !important;
    line-height: 1.06 !important;
    font-weight: 680 !important;
    text-align: center !important;
  }
  .full-player .player-info p {
    font-size: clamp(14px, 3.9vw, 17px) !important;
    line-height: 1.08 !important;
    font-weight: 430 !important;
    text-align: center !important;
  }

  .full-player .timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    align-items: center !important;
    margin-bottom: 22px !important;
  }
  .full-player .timeline input,
  .full-player #playerSeek {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .full-player .player-controls,
  .full-player .fullControls {
    width: min(calc(100vw - 96px), 292px) !important;
    max-width: 292px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(3, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 22px !important;
    transform: none !important;
  }
  .full-player .player-controls button,
  .full-player .player-controls .icon-button,
  .full-player .player-controls .main-play,
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }

  .full-player .player-extra-controls {
    display: grid !important;
    justify-items: center !important;
  }

  .full-player .lyrics-panel {
    width: min(calc(100vw - 44px), 392px) !important;
    max-width: min(calc(100vw - 44px), 392px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
  }
}

/* Desktop alignment and slightly more Apple Music-like lyric sizing. */
@media (min-width: 900px) {
  .full-player .player-info {
    margin-bottom: 11px !important;
  }
  .full-player .lyrics-line,
  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near {
    font-size: clamp(30px, 2.75vw, 43px) !important;
    font-weight: 700 !important;
  }
  .full-player .lyrics-line.active {
    font-size: clamp(31px, 2.9vw, 44px) !important;
    font-weight: 730 !important;
  }
}

/* Mobile top tabs: show every tab without horizontal scrolling. */
@media (max-width: 760px) {
  .tabs {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: visible !important;
    padding: 5px !important;
    border-radius: 18px !important;
  }
  .tab {
    flex: 0 1 auto !important;
    padding: 7px 9px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .filter-row,
  .snippet-filter-row,
  .date-row,
  .advanced-filter-toggle-row,
  .archive-date-row {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .text-filter {
    flex: 0 0 auto !important;
    text-align: center !important;
  }
}

/* === v20: final requested fixes: Apple Music font, smaller buttons, mobile tabs, credits === */
:root {
  --am-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

@font-face {
  font-family: "Lyricfont";
  src: url("https://ehmorris.com/static/light-5c57211af2c40d77b1dd9a27b5c88b7f.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Player and lyrics use the Apple Music/iOS stack, not the site/body fallback. */
.full-player,
.full-player *,
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near,
.full-player .lyrics-line.active,
.full-player .lyrics-empty,
.full-player .player-info h2,
.full-player .player-info p,
.full-player .fullTimeRow {
  font-family: var(--am-font) !important;
  font-synthesis-weight: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* Synced by credit like Apple Music: small, top-right, no panel title. */
.full-player .lyrics-panel {
  position: relative !important;
}
.full-player .lyrics-head {
  display: block !important;
  position: absolute !important;
  top: 4px !important;
  right: 0 !important;
  left: auto !important;
  z-index: 4 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  pointer-events: none !important;
}
.full-player .lyrics-head h3 { display: none !important; }
.full-player .lyrics-head #lyricsCredit,
.full-player #lyricsCredit {
  display: block !important;
  color: rgba(255,255,255,.62) !important;
  font-family: var(--am-font) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Lyrics: one font only, less Impact-looking, active bold and inactive still bold. */
.full-player .lyrics-lines {
  font-family: var(--am-font) !important;
}
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near,
.full-player .lyrics-line.active {
  font-family: var(--am-font) !important;
  font-style: normal !important;
  font-variant: normal !important;
  font-stretch: normal !important;
  letter-spacing: -.028em !important;
  text-transform: none !important;
  text-shadow: none !important;
}
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near {
  font-weight: 700 !important;
  color: rgba(255,255,255,.36) !important;
}
.full-player .lyrics-line.active {
  font-weight: 760 !important;
  color: rgba(255,255,255,.96) !important;
}
.full-player .lyrics-prelude {
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* Desktop: smaller player controls for the Apple Music scale. */
@media (min-width: 900px) {
  .full-player .player-info { text-align: center !important; }
  .full-player .player-info h2 {
    font-size: clamp(18px, 1.28vw, 22px) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
  }
  .full-player .player-info p {
    font-size: clamp(13px, .86vw, 15px) !important;
    font-weight: 500 !important;
  }
  .full-player .timeline {
    margin-bottom: 18px !important;
  }
  .full-player .player-controls {
    grid-template-rows: 44px !important;
    margin-bottom: 18px !important;
  }
  .full-player #playerShuffle,
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack,
  .full-player #playerRepeat {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .full-player #playerShuffle::before,
  .full-player #playerRepeat::before {
    width: 15px !important;
    height: 15px !important;
  }
  .full-player #prevTrack::before,
  .full-player #nextTrack::before {
    width: 24px !important;
    height: 24px !important;
  }
  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before {
    width: 29px !important;
    height: 29px !important;
  }
  .full-player .lyrics-lines {
    padding-top: 7vh !important;
    gap: clamp(18px, 3vh, 30px) !important;
  }
  .full-player .lyrics-line,
  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near,
  .full-player .lyrics-line.active {
    font-size: clamp(31px, 3.05vw, 48px) !important;
    line-height: 1.12 !important;
  }
}

/* Mobile: tabs all visible but not microscopic, filters centered. */
@media (max-width: 899px) {
  .tabs {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    margin: 8px auto 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 7px !important;
    overflow: visible !important;
    border-radius: 20px !important;
  }
  .tab {
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 74px !important;
    max-width: 132px !important;
    padding: 9px 8px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .filter-row,
  .date-row,
  .advanced-filter-toggle-row,
  .archive-date-row {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .filter-row .text-filter {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    padding: 8px 11px !important;
  }

  /* True fixed full-player background: no horizontal cut/repeated section while lyrics scroll. */
  .full-player {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }
  .full-player::before {
    position: fixed !important;
    inset: -2px !important;
  }
  .full-player .player-layout,
  .full-player.no-lyrics:not(.lrc-open) .player-layout,
  .full-player.lrc-open .player-layout {
    min-height: 100svh !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  /* Mobile player proportions: smaller text and controls, centered by cover width. */
  .full-player .player-info,
  .full-player .timeline,
  .full-player .player-controls,
  .full-player .player-extra-controls,
  .full-player .player-volume-menu {
    width: var(--am-cover) !important;
    max-width: var(--am-cover) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .full-player .player-info {
    text-align: center !important;
    margin-bottom: 12px !important;
  }
  .full-player .player-info h2 {
    font-size: clamp(21px, 5.7vw, 28px) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
  }
  .full-player .player-info p {
    margin-top: 2px !important;
    font-size: clamp(15px, 4.2vw, 20px) !important;
    line-height: 1.08 !important;
    font-weight: 500 !important;
  }
  .full-player .timeline {
    margin-bottom: 22px !important;
    gap: 7px !important;
  }
  .full-player #playerSeek,
  .full-player #playerSeek::-webkit-slider-runnable-track {
    height: 6px !important;
  }
  .full-player .fullTimeRow {
    font-size: clamp(12px, 3.2vw, 15px) !important;
  }
  .full-player .player-controls {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: 50px !important;
    gap: 0 !important;
    align-items: center !important;
    justify-items: center !important;
    margin: 0 auto 18px !important;
  }
  .full-player #playerShuffle,
  .full-player #prevTrack,
  .full-player #fullPlay,
  .full-player #nextTrack,
  .full-player #playerRepeat {
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
  .full-player #playerShuffle { grid-column: 1 !important; }
  .full-player #prevTrack { grid-column: 2 !important; }
  .full-player #fullPlay { grid-column: 3 !important; }
  .full-player #nextTrack { grid-column: 4 !important; }
  .full-player #playerRepeat { grid-column: 5 !important; }
  .full-player #playerShuffle::before,
  .full-player #playerRepeat::before {
    width: 17px !important;
    height: 17px !important;
  }
  .full-player #prevTrack::before,
  .full-player #nextTrack::before {
    width: 30px !important;
    height: 30px !important;
  }
  .full-player #fullPlay::before,
  .full-player #fullPlay.is-playing::before {
    width: 36px !important;
    height: 36px !important;
  }
  .full-player .player-extra-controls {
    margin-bottom: 14px !important;
  }
  .full-player .player-volume-menu {
    grid-template-columns: 21px minmax(0,1fr) 22px !important;
    grid-template-rows: 24px !important;
    gap: 10px !important;
  }
  .full-player #playerVolume,
  .full-player #playerVolume::-webkit-slider-runnable-track {
    height: 5px !important;
  }
  .full-player #playerVolumeToggle::before,
  .full-player .player-volume-menu::after {
    width: 17px !important;
    height: 17px !important;
  }

  /* Mobile lyrics: transparent, taller, shows more lines. */
  .full-player .lyrics-panel {
    width: var(--am-cover) !important;
    height: min(52svh, 470px) !important;
    min-height: 300px !important;
    margin: 0 auto max(16px, env(safe-area-inset-bottom)) !important;
    padding: 20px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .full-player .lyrics-head {
    top: 0 !important;
    right: 0 !important;
  }
  .full-player .lyrics-lines {
    height: 100% !important;
    padding: 24px 0 54px !important;
    gap: 11px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .full-player .lyrics-line,
  .full-player .lyrics-line.near,
  .full-player .lyrics-line.mobile-near,
  .full-player .lyrics-line.active {
    font-size: clamp(20px, 5.6vw, 29px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.024em !important;
  }
}

@media (max-width: 420px) {
  .tab {
    min-width: 70px !important;
    padding: 8px 6px !important;
    font-size: 10px !important;
  }
  .full-player .lyrics-panel {
    height: min(54svh, 450px) !important;
    min-height: 280px !important;
  }
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("/fonts/NeueHaasDisplayMediu.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

/* Synced lyrics typography. */
.full-player .lyrics-lines,
.full-player #lyricsLines,
.full-player #lyricsLines *,
.full-player .lyrics-line,
.full-player .lyrics-line.near,
.full-player .lyrics-line.mobile-near,
.full-player .lyrics-line.active,
.full-player .lyrics-empty {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: normal !important;
  font-synthesis: none !important;
  letter-spacing: normal !important;
}

/* Archive calendar */
.calendar-title {
  margin-bottom: 16px;
}
.panel.calendar-month-open .calendar-title {
  margin-bottom: 0;
  align-items: center;
}
.panel.calendar-month-open .calendar-title .eyebrow {
  display: none;
}
.panel.calendar-month-open .calendar-title h1 {
  font-size: 32px;
}
.panel.calendar-month-open #calendarStatus {
  min-height: 18px;
  margin: 3px 2px 4px;
  font-size: 10px;
}
.panel.calendar-month-open .calendar-toolbar {
  margin-bottom: 4px;
}
.panel.calendar-month-open .calendar-filter-row {
  margin-top: 4px;
  margin-bottom: 6px;
}
.calendar-title-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.calendar-year-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.calendar-year-card {
  min-width: 0;
  min-height: 210px;
  padding: 18px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.015)),
    rgba(8, 8, 8, 0.78);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.calendar-year-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025)),
    rgba(8, 8, 8, 0.84);
}
.calendar-year-card-head,
.calendar-year-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.calendar-year-card-head > strong {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 0.9;
  letter-spacing: -0.055em;
}
.calendar-year-card-head > span,
.calendar-year-card-foot {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.calendar-year-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.calendar-year-stat {
  --calendar-kind: #777;
  min-width: 0;
  padding: 8px 9px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  border-left: 3px solid var(--calendar-kind);
  border-radius: 8px;
  background: color-mix(in srgb, var(--calendar-kind) 13%, rgba(255, 255, 255, 0.025));
}
.calendar-year-stat strong {
  color: var(--calendar-kind);
  font-size: 15px;
}
.calendar-year-stat small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.calendar-toolbar select,
.calendar-nav-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 750;
}
.calendar-toolbar select {
  padding: 0 38px 0 14px;
}
.calendar-nav-button {
  width: 42px;
  padding: 0;
  font-size: 25px;
  cursor: pointer;
}
.calendar-nav-button:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.08);
}
.calendar-filter-row {
  justify-content: center;
  margin-bottom: 8px;
}
.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.calendar-board,
.calendar-incomplete {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(10, 10, 10, 0.7);
  overflow: hidden;
}
.calendar-board {
  height: clamp(440px, calc(100vh - 255px), 720px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.panel.calendar-show-all .calendar-board {
  height: auto;
  min-height: 0;
  max-height: none;
}
.panel.calendar-show-all .calendar-grid {
  grid-template-rows: repeat(var(--calendar-weeks, 6), minmax(168px, auto));
}
.panel.calendar-show-all .calendar-day {
  min-height: 168px;
  padding: 10px;
  overflow: visible;
}
.panel.calendar-show-all .calendar-day-number {
  min-height: 24px;
  margin-bottom: 7px;
}
.panel.calendar-show-all .calendar-day-number > span {
  width: 24px;
  height: 24px;
  font-size: 11px;
}
.panel.calendar-show-all .calendar-day-number small {
  font-size: 9px;
}
.panel.calendar-show-all .calendar-day-events {
  gap: 7px;
}
.panel.calendar-show-all .calendar-event {
  min-height: 52px;
  padding: 8px 9px;
  gap: 2px;
}
.panel.calendar-show-all .calendar-event > span {
  font-size: 8px;
}
.panel.calendar-show-all .calendar-event strong {
  font-size: 10px;
}
.panel.calendar-show-all .calendar-event small {
  display: block;
  font-size: 8px;
}
.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-grid {
  min-height: 0;
  grid-template-rows: repeat(var(--calendar-weeks, 6), minmax(0, 1fr));
}
.calendar-weekdays {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}
.calendar-weekdays span {
  padding: 11px 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.calendar-day {
  min-width: 0;
  min-height: 0;
  padding: 7px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
}
.calendar-day.is-week-end {
  border-right: 0;
}
.calendar-day-empty {
  background: rgba(255, 255, 255, 0.006);
}
.calendar-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}
.calendar-day-number {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.calendar-day-number > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 800;
}
.calendar-day.is-today .calendar-day-number > span {
  background: #fff;
  color: #080808;
}
.calendar-day-number small {
  color: var(--muted);
  font-size: 9px;
}
.calendar-day-events,
.calendar-incomplete-list {
  display: grid;
  gap: 6px;
}
.calendar-day-content {
  min-width: 0;
}
.calendar-day-toggle {
  --calendar-kind: #777;
  width: 100%;
  margin-top: 5px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 3px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.calendar-day-more-kind {
  --calendar-kind: #777;
  min-width: 0;
  padding: 4px 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--calendar-kind) 40%, var(--line));
  border-left: 3px solid var(--calendar-kind);
  border-radius: 7px;
  background: color-mix(in srgb, var(--calendar-kind) 13%, rgba(255, 255, 255, 0.025));
  color: var(--calendar-kind);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.calendar-day-more-kind > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-day-toggle:hover .calendar-day-more-kind {
  background: color-mix(in srgb, var(--calendar-kind) 22%, rgba(255, 255, 255, 0.04));
  border-color: color-mix(in srgb, var(--calendar-kind) 62%, var(--line));
}
.calendar-event {
  --calendar-kind: #777;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 7px 8px;
  display: grid;
  gap: 2px;
  border: 0;
  border-left: 3px solid var(--calendar-kind);
  border-radius: 8px;
  background: color-mix(in srgb, var(--calendar-kind) 15%, rgba(255, 255, 255, 0.035));
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.calendar-event:hover {
  background: color-mix(in srgb, var(--calendar-kind) 23%, rgba(255, 255, 255, 0.05));
}
.calendar-event > span {
  color: var(--calendar-kind);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.calendar-event strong {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-event small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel.calendar-month-open .calendar-day {
  padding: 4px;
}
.panel.calendar-month-open .calendar-day-number {
  min-height: 16px;
  margin-bottom: 2px;
}
.panel.calendar-month-open .calendar-day-number > span {
  width: 16px;
  height: 16px;
  font-size: 9px;
}
.panel.calendar-month-open .calendar-day-number small {
  font-size: 8px;
}
.panel.calendar-month-open .calendar-event {
  min-height: 42px;
  padding: 5px 6px;
  gap: 2px;
}
.panel.calendar-month-open .calendar-event > span {
  font-size: 8px;
}
.panel.calendar-month-open .calendar-event strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.panel.calendar-month-open .calendar-event small {
  display: block;
  font-size: 8px;
}
.panel.calendar-month-open .calendar-day-toggle {
  margin-top: 2px;
}
.panel.calendar-month-open .calendar-day-more-kind {
  padding: 2px 4px;
  gap: 2px;
  font-size: 7px;
}
.calendar-event[data-kind="released"],
.calendar-legend [data-kind="released"],
.calendar-year-stat[data-kind="released"],
.calendar-day-more-kind[data-kind="released"] { --calendar-kind: #72d68b; }
.calendar-event[data-kind="recorded"],
.calendar-legend [data-kind="recorded"],
.calendar-year-stat[data-kind="recorded"],
.calendar-day-more-kind[data-kind="recorded"] { --calendar-kind: #63aef2; }
.calendar-event[data-kind="previewed"],
.calendar-legend [data-kind="previewed"],
.calendar-year-stat[data-kind="previewed"],
.calendar-day-more-kind[data-kind="previewed"] { --calendar-kind: #bc8cff; }
.calendar-event[data-kind="leaked"],
.calendar-legend [data-kind="leaked"],
.calendar-year-stat[data-kind="leaked"],
.calendar-day-more-kind[data-kind="leaked"] { --calendar-kind: #ff7777; }
.calendar-event[data-kind="performance"],
.calendar-legend [data-kind="performance"],
.calendar-year-stat[data-kind="performance"],
.calendar-day-more-kind[data-kind="performance"] { --calendar-kind: #f0b65d; }
.calendar-event[data-kind="live"],
.calendar-legend [data-kind="live"],
.calendar-year-stat[data-kind="live"],
.calendar-day-more-kind[data-kind="live"] { --calendar-kind: #ff75bf; }
.calendar-event[data-kind="session"],
.calendar-legend [data-kind="session"],
.calendar-year-stat[data-kind="session"],
.calendar-day-more-kind[data-kind="session"] { --calendar-kind: #54d8c7; }
.calendar-incomplete {
  padding: 20px;
  position: static;
}
.calendar-incomplete-head {
  margin-bottom: 14px;
}
.calendar-incomplete-head h2 {
  margin: 3px 0 6px;
  font-size: 19px;
}
.calendar-incomplete-head > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.calendar-incomplete-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.calendar-incomplete .calendar-event {
  padding: 10px;
}
.calendar-incomplete .calendar-event strong {
  font-size: 11px;
}
.calendar-incomplete .calendar-event small {
  white-space: normal;
  font-size: 9px;
}
.calendar-dialog-open {
  overflow: hidden;
}
.calendar-day-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
}
.calendar-day-dialog[hidden] {
  display: none;
}
.calendar-day-dialog-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.calendar-day-dialog-panel {
  position: relative;
  width: min(1040px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  padding: 22px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: rgba(10, 10, 10, 0.97);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}
.calendar-day-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.calendar-day-dialog-head .eyebrow {
  margin-bottom: 5px;
}
.calendar-day-dialog-head h2 {
  margin: 0;
  font-size: 28px;
}
.calendar-day-dialog-close {
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
}
.calendar-day-dialog-count {
  margin: 7px 0 18px;
  color: var(--muted);
  font-size: 11px;
}
.calendar-day-dialog-events {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.calendar-day-dialog-events .calendar-event {
  min-height: 66px;
  padding: 11px 12px;
}
.calendar-day-dialog-events .calendar-event strong {
  font-size: 12px;
}
.calendar-legend {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.calendar-legend span {
  --calendar-kind: #777;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.calendar-legend span::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--calendar-kind);
  content: "";
}

@media (max-width: 760px) {
  .calendar-title {
    align-items: flex-start;
  }
  .panel.calendar-month-open .calendar-title h1 {
    font-size: 30px;
  }
  .calendar-title-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .calendar-year-grid {
    grid-template-columns: 1fr;
  }
  .calendar-year-card {
    min-height: 190px;
  }
  .calendar-toolbar {
    flex-wrap: wrap;
  }
  .calendar-toolbar select {
    min-width: 112px;
  }
  .calendar-layout {
    grid-template-columns: 1fr;
  }
  .calendar-board {
    height: auto;
    min-height: 0;
    max-height: none;
    display: block;
  }
  .calendar-weekdays {
    display: none;
  }
  .calendar-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .calendar-day-empty,
  .calendar-day:not(.has-events):not(.is-today) {
    display: none;
  }
  .calendar-day {
    min-height: 0;
    padding: 14px 12px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    border-right: 0;
  }
  .panel.calendar-month-open .calendar-day {
    padding: 14px 12px;
  }
  .panel.calendar-month-open .calendar-day-number {
    min-height: 24px;
    margin-bottom: 5px;
  }
  .panel.calendar-month-open .calendar-day-number > span {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .panel.calendar-month-open .calendar-event {
    min-height: 0;
    padding: 11px 12px;
  }
  .panel.calendar-month-open .calendar-event > span {
    font-size: 8px;
  }
  .panel.calendar-month-open .calendar-event strong {
    font-size: 12px;
  }
  .panel.calendar-month-open .calendar-event small {
    display: block;
  }
  .panel.calendar-month-open .calendar-day-toggle {
    margin-top: 5px;
  }
  .panel.calendar-show-all .calendar-grid {
    grid-template-rows: none;
  }
  .panel.calendar-show-all .calendar-day {
    min-height: 0;
    padding: 14px 12px;
  }
  .panel.calendar-month-open .calendar-day-more-kind {
    padding: 6px 7px;
    font-size: 9px;
  }
  .calendar-day-content {
    min-width: 0;
  }
  .calendar-day-number {
    align-content: start;
    justify-content: center;
  }
  .calendar-day-number small {
    display: none;
  }
  .calendar-event {
    min-height: 0;
    padding: 11px 12px;
  }
  .calendar-event strong {
    font-size: 12px;
  }
  .calendar-event small {
    font-size: 9px;
  }
  .calendar-day-toggle {
    padding: 7px 9px;
    font-size: 10px;
  }
  .calendar-incomplete {
    position: static;
  }
  .calendar-incomplete-list {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .calendar-day-dialog {
    padding: 12px;
  }
  .calendar-day-dialog-panel {
    max-height: calc(100vh - 24px);
    padding: 18px 14px;
    border-radius: 20px;
  }
  .calendar-day-dialog-head h2 {
    font-size: 22px;
  }
  .calendar-day-dialog-events {
    grid-template-columns: 1fr;
  }
}


/* Metadata cleanup: keep producer commas attached to the names and keep release dates as plain text. */
.metadata-value.comma-separated-list,
.media-field-values.comma-separated {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 !important;
}
.metadata-value.comma-separated-list .metadata-search-text,
.media-field-values.comma-separated .metadata-search-text {
  display: inline;
  width: auto;
  white-space: normal;
}
.song-release-line {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 430;
  line-height: 1.45;
}
.song-meta-grid:empty { display: none; }

/* v20260704: metadata commas + compact mobile calendar + larger header icon. */
.brand {
  width: 96px;
  height: 96px;
}
.brand img {
  width: 82px;
  height: 82px;
}
.metadata-value.comma-separated-list,
.media-field-values.comma-separated {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 !important;
}
.metadata-value.comma-separated-list .metadata-search-text,
.media-field-values.comma-separated .metadata-search-text,
.metadata-list-separator {
  display: inline-flex !important;
  width: auto !important;
  white-space: nowrap !important;
}
.song-meta-grid:empty { display: none; }

@media (max-width: 760px) {
  .brand {
    width: 86px;
    height: 86px;
  }
  .brand img {
    width: 74px;
    height: 74px;
  }

  .panel.calendar-month-open .calendar-title {
    align-items: flex-start;
    gap: 10px;
  }
  .panel.calendar-month-open .calendar-title h1 {
    font-size: 28px;
  }
  .calendar-title-actions {
    justify-content: flex-start;
  }
  .calendar-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(86px, .72fr) 42px;
    gap: 6px;
  }
  .calendar-toolbar select,
  .calendar-nav-button {
    min-width: 0;
    min-height: 38px;
    border-radius: 12px;
  }
  .calendar-filter-row {
    justify-content: flex-start;
    padding: 0 2px 4px;
  }
  .calendar-board {
    height: auto;
    min-height: 0;
    max-height: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 18px;
  }
  .calendar-weekdays,
  .calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  .calendar-weekdays span {
    padding: 8px 0;
    font-size: 8px;
    letter-spacing: 0;
  }
  .calendar-grid {
    grid-template-rows: repeat(var(--calendar-weeks, 6), minmax(96px, auto)) !important;
  }
  .calendar-day-empty,
  .calendar-day:not(.has-events):not(.is-today) {
    display: block !important;
  }
  .calendar-day,
  .panel.calendar-month-open .calendar-day,
  .panel.calendar-show-all .calendar-day {
    min-height: 96px;
    padding: 4px;
    display: block;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }
  .calendar-day.is-week-end {
    border-right: 0;
  }
  .calendar-day-number,
  .panel.calendar-month-open .calendar-day-number {
    min-height: 18px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  .calendar-day-number > span,
  .panel.calendar-month-open .calendar-day-number > span {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }
  .calendar-day-number small {
    display: inline-grid;
    min-width: 13px;
    height: 13px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.82);
    font-size: 7px;
    font-weight: 800;
  }
  .calendar-day-events,
  .panel.calendar-month-open .calendar-day-events {
    gap: 2px;
  }
  .calendar-event,
  .panel.calendar-month-open .calendar-event,
  .panel.calendar-show-all .calendar-event {
    min-height: 40px;
    padding: 4px 5px;
    display: flex;
    border: 1px solid color-mix(in srgb, var(--calendar-kind) 42%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--calendar-kind) 16%, rgba(255, 255, 255, 0.08));
    overflow: hidden;
  }
  .calendar-event > span,
  .panel.calendar-month-open .calendar-event > span,
  .panel.calendar-show-all .calendar-event > span {
    display: block !important;
    font-size: 7px;
    line-height: 1;
  }
  .calendar-event strong,
  .panel.calendar-month-open .calendar-event strong,
  .panel.calendar-show-all .calendar-event strong,
  .calendar-event small,
  .panel.calendar-month-open .calendar-event small,
  .panel.calendar-show-all .calendar-event small {
    display: -webkit-box !important;
    overflow: hidden;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  .calendar-event strong,
  .panel.calendar-month-open .calendar-event strong,
  .panel.calendar-show-all .calendar-event strong {
    font-size: 9px;
    -webkit-line-clamp: 2;
  }
  .calendar-event small,
  .panel.calendar-month-open .calendar-event small,
  .panel.calendar-show-all .calendar-event small {
    font-size: 7px;
    -webkit-line-clamp: 1;
  }
  .calendar-day-toggle,
  .panel.calendar-month-open .calendar-day-toggle {
    margin-top: 3px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
  }
  .calendar-day-more-kind,
  .panel.calendar-month-open .calendar-day-more-kind {
    width: 8px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--calendar-kind);
    color: transparent;
    overflow: hidden;
  }
  .calendar-day-more-kind > span {
    display: none !important;
  }
  .calendar-incomplete {
    padding: 14px;
  }
  .calendar-incomplete-list {
    grid-template-columns: 1fr;
  }
  .calendar-legend {
    justify-content: flex-start;
    gap: 8px 12px;
  }
  .calendar-legend span {
    font-size: 9px;
  }
}


/* v20260704-2: on mobile, tapping anywhere inside a calendar date opens all items for that date. */
@media (max-width: 760px) {
  .calendar-day.has-events {
    cursor: pointer;
    touch-action: manipulation;
  }
  .calendar-day.has-events .calendar-event,
  .calendar-day.has-events .calendar-day-toggle {
    pointer-events: none;
  }
}


/* v20260704-3: song card titles use Neue Haas Grotesk Display 65 Medium when available. */
.song-card .song-head h2 {
  font-family: "Neue Haas Grotesk Display 65 Medium", "Neue Haas Grotesk Display", "Neue Haas Grotesk Text", Inter, "SF Pro Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
}

/* v20260704-5: era flairs keep album + Mainstream without unrelated merged album names. */


/* v20260704-9: release date must live inside the metadata container, not as a loose line. */
.song-release-line { display: none !important; }
.song-meta-grid .meta-block .metadata-value.text-value { min-width: 0; }


/* v20260704-9: requested layout/design updates. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
main {
  flex: 1 0 auto;
}
.site-footer {
  margin-top: auto;
  padding-top: 34px;
}
.credits strong,
.legalDisclaimer strong {
  color: var(--text);
  font-weight: 600;
}

/* Keep attribution below the first screen instead of competing with the archive entry point. */
.site-footer {
  margin-top: max(280px, 38svh);
}

/* Keep both the prompt and the entered query centered in the search field. */
.search-form {
  position: relative;
}
.search-form svg {
  position: absolute;
  left: 20px;
}
.search-form input {
  width: 100%;
  text-align: center;
}

/* Keep Admin out of the tab pill and pin it to the real corner. */
.admin-tab {
  position: fixed !important;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 120;
  margin-left: 0 !important;
  padding: 9px 12px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 999px !important;
  background: rgba(8, 8, 8, 0.76) !important;
  color: var(--muted-strong) !important;
  opacity: 0.58;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}
.admin-tab:hover,
.admin-tab.active {
  opacity: 1;
  color: #050505 !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Snippets, lives, performances, and sessions now share the music-card language. */
.media-grid,
.session-grid,
.performance-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
.media-card,
.session-card,
.performance-card {
  --era-a: rgba(255, 255, 255, 0.12);
  --era-b: rgba(255, 255, 255, 0.03);
  --archive-art: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 420px;
  padding: clamp(24px, 3.2vw, 34px) !important;
  display: grid;
  align-content: start;
  gap: 18px;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--era-a) 52%, transparent), color-mix(in srgb, var(--era-b) 48%, transparent)),
    var(--surface) !important;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.media-card:hover,
.session-card:hover,
.performance-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong) !important;
}
.media-card::before,
.session-card::before,
.performance-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(90deg, rgba(3, 3, 3, 0.97) 0%, rgba(3, 3, 3, 0.82) 48%, rgba(3, 3, 3, 0.3) 100%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--era-a) 58%, transparent) 0%, color-mix(in srgb, var(--era-b) 30%, transparent) 28%, transparent 58%),
    var(--archive-art);
  background-size: cover;
  background-position: center, center, right center;
  opacity: .95;
}
.media-card::after,
.session-card::after,
.performance-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.36));
  pointer-events: none;
}
.media-card > *,
.session-card > *,
.performance-card > * {
  position: relative;
  z-index: 1;
}
.media-card-head,
.session-card-head,
.performance-card-head {
  display: grid !important;
  gap: 8px;
  align-items: start;
  justify-content: stretch;
}
.media-card-head h2,
.session-card-head h2,
.performance-card-head h2 {
  margin: 0 !important;
  overflow-wrap: anywhere;
  color: #fff;
  font-family: "Neue Haas Grotesk Display 65 Medium", "Neue Haas Grotesk Display", "Neue Haas Grotesk Text", Inter, "SF Pro Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(38px, 5vw, 58px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
}
.performance-card-head p {
  margin: 0 !important;
  color: var(--muted-strong) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.media-field-grid,
.session-field-grid,
.performance-field-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.media-field,
.session-field,
.performance-field,
.media-card-copy {
  min-width: 0;
  padding: 11px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(10px);
}
.media-card-copy {
  margin: 0 !important;
  color: var(--muted-strong) !important;
}
.media-field > span,
.session-field > span,
.performance-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}
.media-field-values,
.session-field strong,
.performance-field > div,
.performance-video-link {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.performance-video-link {
  width: fit-content;
  text-decoration: none;
}
.performance-video-link:hover {
  color: var(--muted-strong);
}
.performance-songs-field {
  grid-column: 1 / -1;
}
.performance-setlist {
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px;
}
.performance-setlist span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
}
.media-gallery,
.session-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}
.media-tile,
.session-tile {
  border-radius: 18px !important;
  background: rgba(0, 0, 0, .36) !important;
}
.card-actions {
  margin-top: 2px;
}
.card-actions .soft-button {
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

@media (max-width: 760px) {
  .tabs {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    padding: 0 2px 4px !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    justify-content: flex-start !important;
  }
  .tab {
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: rgba(12, 12, 12, 0.78) !important;
    color: var(--muted-strong) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
    backdrop-filter: blur(18px);
  }
  .tab.active {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    color: #090909 !important;
  }
  .admin-tab {
    top: max(6px, env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    padding: 8px 10px !important;
    font-size: 10px !important;
  }
  .media-card,
  .session-card,
  .performance-card {
    min-height: 0;
    padding: 24px !important;
    gap: 14px;
  }
  .media-card-head h2,
  .session-card-head h2,
  .performance-card-head h2 {
    font-size: clamp(32px, 10.8vw, 46px) !important;
  }
  .media-field-grid,
  .session-field-grid,
  .performance-field-grid {
    grid-template-columns: 1fr !important;
  }
  .media-gallery,
  .session-gallery {
    grid-template-columns: 1fr !important;
  }
  .credits,
  .legalDisclaimer {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
  .site-footer {
    width: calc(100% - 24px) !important;
    padding-top: 28px;
    padding-bottom: 46px;
    gap: 5px;
  }
}

@media (max-width: 420px) {
  .credits,
  .legalDisclaimer {
    font-size: 9px !important;
    line-height: 1.32 !important;
  }
}


/* Prevent the header logo link/image from being dragged or selected. */
.brand,
.brand img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}


/* v20260704-11: keep archive cards compact and allow two cards per desktop row. */
.media-grid,
.session-grid,
.performance-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
}

.media-grid.single-result,
.session-grid.single-result,
.performance-grid.single-result {
  grid-template-columns: minmax(0, min(100%, 760px)) !important;
  justify-content: center !important;
}

.media-card,
.session-card,
.performance-card {
  min-height: 0 !important;
  padding: clamp(18px, 2vw, 24px) !important;
  gap: 13px !important;
}

.media-card-head h2,
.session-card-head h2,
.performance-card-head h2 {
  font-size: clamp(27px, 3vw, 42px) !important;
  line-height: .98 !important;
}

.media-card-head,
.session-card-head,
.performance-card-head {
  gap: 6px !important;
}

.media-field-grid,
.session-field-grid,
.performance-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.media-field,
.session-field,
.performance-field,
.media-card-copy {
  padding: 9px 10px !important;
  border-radius: 14px !important;
}

.media-gallery,
.session-gallery {
  grid-template-columns: repeat(auto-fill, minmax(118px, 158px)) !important;
  justify-content: start !important;
  align-items: start !important;
  gap: 8px !important;
}

.media-tile,
.session-tile {
  width: 100% !important;
  max-width: 158px !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 13px !important;
}

.media-tile.file-tile,
.session-tile.file-tile {
  min-height: 96px !important;
  padding: 12px !important;
  font-size: 11px !important;
}

.play-badge {
  width: 36px !important;
  height: 36px !important;
}

.play-badge::before {
  border-width: 6px 0 6px 9px !important;
}

.performance-songs-field {
  grid-column: 1 / -1 !important;
}

.performance-setlist span {
  padding: 5px 8px !important;
  font-size: 10px !important;
}

@media (max-width: 900px) {
  .media-grid,
  .session-grid,
  .performance-grid {
    grid-template-columns: 1fr !important;
  }

  .media-grid.single-result,
  .session-grid.single-result,
  .performance-grid.single-result {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .media-card,
  .session-card,
  .performance-card {
    padding: 18px !important;
    gap: 12px !important;
  }

  .media-card-head h2,
  .session-card-head h2,
  .performance-card-head h2 {
    font-size: clamp(29px, 9vw, 40px) !important;
  }

  .media-field-grid,
  .session-field-grid,
  .performance-field-grid {
    grid-template-columns: 1fr !important;
  }

  .media-gallery,
  .session-gallery {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
    gap: 7px !important;
  }

  .media-tile,
  .session-tile {
    max-width: none !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 12px !important;
  }
}

/* === v23 final player overrides; intentionally does not alter the background === */
.full-player .player-art,
.full-player .fullCover {
  box-shadow: none !important;
}

.full-player .mobile-player-close {
  display: none !important;
}

@media (min-width: 900px) {
  .full-player .player-close {
    top: max(18px, env(safe-area-inset-top)) !important;
    right: max(22px, env(safe-area-inset-right)) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: rgba(255, 255, 255, .9) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
    font-size: 34px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }

  .full-player .desktop-player-close {
    display: block !important;
  }

  .full-player .lyrics-head {
    top: 16px !important;
    right: 4px !important;
  }

  .full-player .lyrics-lines {
    padding-top: max(104px, 12vh) !important;
  }

  .full-player #playerVolumeToggle .sf-symbol-wrap,
  .full-player #playerVolumeToggle .sf-symbol-img {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
  }

  .full-player .player-volume-high .sf-symbol-wrap,
  .full-player .player-volume-high .sf-symbol-img {
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }
}
/* Reliability and keyboard affordances shared by every archive surface. */
:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.is-offline .site-header::after {
  content: "Offline — cached content only";
  position: fixed;
  z-index: 10001;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 11px;
  border-radius: 999px;
  background: #3d3220;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 899px) {
  .archive-rushmore__intro {
    align-items: start;
    flex-direction: column;
    margin-bottom: 18px;
  }

  .archive-rushmore h1 {
    font-size: clamp(46px, 15vw, 72px);
  }

  .archive-rushmore__stage {
    min-height: 0;
    padding: 20px 14px 78px;
    border-radius: 25px;
  }

  .archive-rushmore__monuments {
    position: relative;
    inset: auto;
    z-index: 12;
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .rushmore-person,
  .rushmore-person--zdb,
  .rushmore-person--bully,
  .rushmore-person--flex,
  .rushmore-person--overlord {
    position: relative;
    inset: auto;
    width: min(100%, 390px);
    margin: 0 auto;
    transform: none;
  }

  .rushmore-person:hover,
  .rushmore-person--zdb:hover,
  .rushmore-person--bully:hover,
  .rushmore-person--flex:hover,
  .rushmore-person--overlord:hover {
    transform: translateY(-5px) scale(1.012);
  }

  .rushmore-person__stone { padding-bottom: 40px; }
  .rushmore-person__plaque { margin-top: -26px; }
  .rushmore-person__plaque strong { font-size: 20px; }

  .rushmore-person__portrait img,
  .rushmore-person:hover .rushmore-person__portrait img {
    filter: grayscale(0.05) contrast(1.05) brightness(0.92) saturate(1.12);
    transform: scale(1.06);
  }

  .rushmore-person__portrait::before,
  .rushmore-person:hover .rushmore-person__portrait::before { opacity: 0.08; }

  .rushmore-person__portrait::after,
  .rushmore-person:hover .rushmore-person__portrait::after { opacity: 0.15; }

  .rushmore-person__stone,
  .rushmore-person:hover .rushmore-person__stone {
    filter:
      drop-shadow(0 24px 30px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 22px rgb(var(--person-glow) / 0.23));
  }

  .archive-rushmore__mountain--back {
    height: 36%;
    opacity: 0.42;
  }

  .archive-rushmore__mountain--front { height: 18%; }
  .archive-rushmore__base { display: none; }
  .archive-rushmore__inscription { bottom: 27px; }
}

@media (max-width: 420px) {
  .archive-rushmore__stage { padding-inline: 10px; }
  .rushmore-person__stone { padding: 11px 11px 37px; }
  .rushmore-person__plaque { width: calc(100% - 22px); }
  .archive-rushmore__hint { line-height: 1.5; }
}

/* Era browsing and compact song results. */
.era-browser {
  margin: 28px 0 22px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(12, 12, 12, 0.78);
  box-shadow: var(--shadow);
}
.era-browser h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-align: center;
}
.era-browser.era-browser--selected {
  margin: 28px 0 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.era-browser.era-browser--selected > h2 { display: none; }
.era-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.era-browser-card {
  position: relative;
  isolation: isolate;
  min-height: 126px;
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--era-card) 42%, var(--line));
  border-radius: 20px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--era-card) 72%, #080808), #090909 78%);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.era-browser-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .78;
  background-image: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .82) 100%), var(--era-cover, none), radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--era-card) 94%, white), transparent 36%);
  background-position: center;
  background-size: cover;
}
.era-browser-card:hover,
.era-browser-card.active {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--era-card) 82%, white);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--era-card) 26%, transparent);
}
.era-browser-card.is-opening-era { view-transition-name: era-selection-card; }
.era-browser-card.is-returning-era { view-transition-name: era-selection-card; }
.era-browser-card strong { font-size: clamp(20px, 2.4vw, 28px); line-height: 1; letter-spacing: -0.045em; }
.era-browser-card span { margin-top: 9px; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.era-browser-status { grid-column: 1 / -1; padding: 18px; color: var(--muted); text-align: center; }
.era-selected-page {
  position: relative;
  isolation: isolate;
  min-height: 190px;
  overflow: hidden;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  border: 1px solid color-mix(in srgb, var(--era-card) 52%, var(--line));
  border-radius: 22px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--era-card) 86%, #080808), #090909 78%);
}
.era-selected-page { view-transition-name: era-selection-card; }
::view-transition-group(era-selection-card) { animation-duration: 460ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(era-selection-card) { animation: era-selection-out 460ms cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-new(era-selection-card) { animation: era-selection-in 460ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes era-selection-out { to { opacity: 0; transform: scale(.94); } }
@keyframes era-selection-in { from { opacity: .35; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(era-selection-card),
  ::view-transition-old(era-selection-card),
  ::view-transition-new(era-selection-card) { animation-duration: 1ms; }
}
.era-selected-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--era-card) 84%, #060606) 0%, rgba(0, 0, 0, .22) 52%, rgba(0, 0, 0, .7) 100%), var(--era-cover, none);
  background-position: center;
  background-size: cover;
}

/* Keep image-format choices next to their preview, not in the footer. */
.lyrics-image-preview {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.lyrics-image-preview .lyrics-image-format { justify-content: center; }
.lyrics-image-actions { justify-content: flex-end; }

/* Both lyric actions intentionally use the same regular-weight label. */
.full-player .player-extra-controls.fullExtraControls #createLyricsImage,
.full-player .player-extra-controls.fullExtraControls #toggleLyricsSubmit {
  font-weight: 500 !important;
}
.era-selected-page p {
  margin: 0 0 5px;
  color: rgba(255, 255, 255, .76);
  font-size: 11px;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.era-selected-page h3 {
  max-width: min(760px, 88%);
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 760 !important;
  line-height: .96;
  letter-spacing: -.055em;
}
.era-browser-back {
  position: absolute;
  top: 16px;
  left: 16px;
  width: fit-content;
  margin: 0;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 12px;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.era-browser-back:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.era-playback-controls { position: absolute; right: 16px; bottom: 16px; z-index: 1; }
.era-vinyl-play { position: relative; width: 56px; height: 56px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 9px 22px rgba(0,0,0,.42); color: #080808; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.era-vinyl-play span { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; }
.era-vinyl-play svg { width: 24px; height: 24px; fill: #080808; stroke: none; }
.era-vinyl-play:hover { transform: scale(1.07); box-shadow: 0 11px 28px rgba(0,0,0,.52); }
.era-vinyl-play:disabled { cursor: progress; opacity: .65; }
@media (max-width: 760px) {
  .era-browser.era-browser--selected .era-selected-page { min-height: 236px; }
  .era-browser.era-browser--selected .era-selected-source-filters { bottom: 96px; max-width: calc(100% - 28px); }
  .era-playback-controls { right: auto; left: 14px; bottom: 14px; }
  .era-vinyl-play { width: 52px; height: 52px; }
}
.archive-browser {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(10, 10, 10, .72);
}
.archive-browser h2 { margin: 0 0 14px; font-size: 23px; font-weight: 760 !important; letter-spacing: -.04em; }
.archive-browser-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.archive-year-card,
.archive-year-back {
  min-width: 84px;
  padding: 11px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
  font-weight: 700 !important;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.archive-year-card:hover,
.archive-year-back:hover { transform: translateY(-2px); border-color: #fff; background: rgba(255, 255, 255, .13); }
.archive-year-card {
  border-color: color-mix(in srgb, var(--year-era, var(--line-strong)) 62%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--year-era, #505050) 52%, #101010), #0a0a0a 76%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--year-era, #505050) 24%, transparent);
}
.archive-year-card:hover {
  border-color: color-mix(in srgb, var(--year-era, #fff) 84%, white);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--year-era, #505050) 22%, transparent);
}

/* Year browsing uses the same visual weight as era browsing. */
.archive-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}
.archive-year-card {
  min-height: 122px;
  padding: 18px;
  display: flex;
  align-items: end;
  justify-content: flex-start;
  border-radius: 20px;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -.055em;
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--year-era) 88%, white), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--year-era) 70%, #080808), #080808 78%);
}
.archive-year-card:hover { transform: translateY(-3px); }

/* Static Genius lyrics remain readable in the same full-player scale. */
.lyrics-lines.is-static-lyrics { align-content: center !important; }
.lyrics-lines.is-static-lyrics .lyrics-line-static {
  color: rgba(255,255,255,.96) !important;
  font-size: clamp(34px, 3.25vw, 52px) !important;
  font-weight: 700 !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Keep lyric-image and lyric-submission controls together. */
.player-extra-controls {
  grid-template-columns: auto auto auto !important;
  justify-content: center !important;
  align-items: center !important;
}
.player-extra-controls #createLyricsImage { grid-column: 2 !important; }
.player-extra-controls #toggleLyricsSubmit { grid-column: 3 !important; justify-self: start !important; }

/* Rushmore must never create a sideways mobile canvas. Keep all four monuments
   inside the stage so its carved background remains continuous. */
@media (max-width: 899px) {
  .archive-rushmore__stage {
    overflow: hidden !important;
    overscroll-behavior: auto !important;
    padding: 18px 12px 70px !important;
    min-height: 0 !important;
    background:
      radial-gradient(circle at 50% 12%, rgba(255,255,255,.13), transparent 32%),
      linear-gradient(180deg, rgba(31,31,32,.96), rgba(10,10,10,.98) 58%, #050505) !important;
  }
  .archive-rushmore__monuments {
    position: relative !important;
    inset: auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
  }
  .rushmore-person,
  .rushmore-person--zdb,
  .rushmore-person--bully,
  .rushmore-person--flex,
  .rushmore-person--overlord {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  .rushmore-person__stone { padding: 10px 10px 34px !important; }
  .rushmore-person__plaque { width: calc(100% - 16px) !important; margin-top: -22px !important; padding: 10px 6px !important; }
  .rushmore-person__plaque strong { font-size: clamp(14px, 4vw, 18px) !important; }
  .rushmore-person__plaque a,
  .rushmore-person__plaque p { font-size: 10px !important; }
  .archive-rushmore__mountain--back { height: 48% !important; }
  .archive-rushmore__mountain--front { height: 26% !important; }
}
.archive-selected-year {
  position: relative;
  width: 100%;
  min-height: 118px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: radial-gradient(circle at 82% 16%, rgba(255, 255, 255, .16), transparent 34%), linear-gradient(135deg, #252525, #070707 76%);
}
.archive-selected-year p { margin: 0 0 4px; color: var(--muted); font-size: 10px; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; }
.archive-selected-year h3 { margin: 0; font-size: 36px; font-weight: 760 !important; letter-spacing: -.055em; }
.archive-year-back { position: absolute; top: 14px; right: 14px; min-width: 0; padding: 8px 11px; font-size: 10px; }
.era-record-sort { margin-left: 4px; border-color: color-mix(in srgb, var(--accent) 72%, white) !important; background: color-mix(in srgb, var(--accent) 18%, transparent) !important; color: color-mix(in srgb, var(--accent) 70%, white) !important; }
.era-record-sort.active { background: var(--accent) !important; color: #080808 !important; }

.song-card.is-collapsed {
  min-height: 0 !important;
  padding: 17px 19px !important;
  cursor: pointer;
}
.song-card.is-collapsed .song-copy { gap: 10px; }
.song-card.is-collapsed .song-tags,
.song-card.is-collapsed .song-meta-grid,
.song-card.is-collapsed .song-files-section,
.song-card.is-collapsed .song-card-footer { display: none; }
.song-card.is-collapsed .song-head h2 { font-size: clamp(21px, 3vw, 30px) !important; line-height: 1.06; }
.song-card.is-collapsed .song-head p { margin-top: 4px; font-size: 13px; }
.song-card-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.song-card-summary span { min-width: 0; color: var(--muted-strong); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-card-summary b { margin-right: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.song-card:not(.is-collapsed) .song-card-summary { display: none; }
.song-grid { align-items: start; }

/* Mt. Rushmore matches the archive section-heading system and stays in color. */
.archive-rushmore__intro.section-title {
  width: 100%;
  margin: 0 0 16px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
.archive-rushmore__intro.section-title h1 {
  margin: 0;
  font-family: var(--reference-font) !important;
  font-size: clamp(34px, 6vw, 58px) !important;
  font-weight: 760 !important;
  line-height: 1.02;
  letter-spacing: -0.052em !important;
}
.archive-rushmore__intro.section-title .archive-rushmore__eyebrow {
  margin: 0 0 14px;
  font-family: var(--reference-font) !important;
  font-weight: 400 !important;
}
.archive-rushmore h1 {
  font-family: inherit;
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0;
}
.rushmore-person__portrait img,
.rushmore-person:hover .rushmore-person__portrait img {
  filter: grayscale(0.05) contrast(1.05) brightness(0.92) saturate(1.12);
}
.rushmore-person__portrait::before,
.rushmore-person:hover .rushmore-person__portrait::before { opacity: 0.08; }
.rushmore-person__portrait::after,
.rushmore-person:hover .rushmore-person__portrait::after { opacity: 0.15; }

@media (max-width: 899px) {
  .archive-rushmore__intro.section-title {
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
  }
  .archive-rushmore__intro.section-title > div { width: auto; }
  .archive-rushmore__stage { overflow-x: auto; overscroll-behavior-x: contain; }
  .archive-rushmore__monuments {
    display: grid;
    grid-template-columns: repeat(4, minmax(132px, 1fr));
    align-items: start;
    min-width: 608px;
    gap: 10px;
  }
  .rushmore-person,
  .rushmore-person--zdb,
  .rushmore-person--bully,
  .rushmore-person--flex,
  .rushmore-person--overlord {
    width: 100%;
    margin: 0;
    transform: none;
  }
  .rushmore-person:hover,
  .rushmore-person--zdb:hover,
  .rushmore-person--bully:hover,
  .rushmore-person--flex:hover,
  .rushmore-person--overlord:hover { transform: translateY(-5px) scale(1.025); }
  .rushmore-person__plaque { padding: 11px 8px; }
  .rushmore-person__plaque strong { font-size: 14px; }
  .rushmore-person__plaque a,
  .rushmore-person__plaque p { font-size: 9px; }
}

@media (max-width: 760px) {
  .tabs { justify-content: center !important; }
  .era-browser { margin-top: 22px; border-radius: 22px; }
  .era-browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .era-browser-card { min-height: 112px; padding: 13px; border-radius: 16px; }
  .era-browser-card strong { font-size: 18px; }
  .era-selected-page { min-height: 154px; padding: 17px; }
  .era-selected-page h3 { max-width: 100%; font-size: clamp(33px, 10vw, 48px); }
  .era-browser-back { top: 12px; left: 12px; padding: 8px 12px; font-size: 10px; }
  .song-card-summary { grid-template-columns: 1fr; gap: 5px; }
}

/* Final card and static-lyrics layout overrides. */
.song-card {
  display: grid !important;
  grid-template-columns: 142px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #101014 !important;
}
.song-card.is-collapsed { padding: 0 !important; }
.song-card::before, .song-card::after { display: none !important; }
.song-card-art {
  min-height: 142px;
  background-image: var(--song-art, none), linear-gradient(145deg, var(--era-color), #15151a 72%);
  background-size: cover;
  background-position: center;
  border-right: 1px solid rgba(255,255,255,.1);
}
.song-card .song-copy, .song-card.is-collapsed .song-copy { min-width: 0; padding: 18px 20px !important; }
@media (max-width: 640px) {
  .song-card { grid-template-columns: 104px minmax(0, 1fr) !important; }
  .song-card-art { min-height: 118px; }
  .song-card .song-copy, .song-card.is-collapsed .song-copy { padding: 14px !important; }
}
.full-player.has-static-lyrics .lyrics-panel { height: auto !important; min-height: 0 !important; overflow: visible !important; }
.full-player.has-static-lyrics .lyrics-lines {
  height: auto !important; max-height: none !important; overflow: visible !important;
  padding: 22px 0 44px !important; gap: 16px !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
.full-player.has-static-lyrics .lyrics-line-static {
  color: rgba(255,255,255,.96) !important; font-size: clamp(28px, 3vw, 46px) !important;
  font-weight: 700 !important; line-height: 1.1 !important; filter: none !important;
}
.player-extra-controls {
  display: grid !important; grid-template-columns: auto auto !important;
  justify-content: center !important; justify-items: center !important; gap: 12px !important;
}
.player-extra-controls .player-volume-menu { grid-column: 1 / -1 !important; width: 100% !important; }
.player-extra-controls #createLyricsImage { grid-column: 1 !important; }
.player-extra-controls #toggleLyricsSubmit {
  grid-column: 2 !important; width: auto !important; min-width: 0 !important; margin: 0 !important;
  padding: 8px 14px !important; border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 999px !important; background: transparent !important; white-space: nowrap !important; line-height: 1 !important;
}

/* Static Genius lyrics are ordinary readable text: no timed animation, no
   oversized active-line treatment, and a scrollable panel for the full song. */
.full-player.has-static-lyrics .lyrics-panel {
  height: min(66vh, 640px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.full-player.has-static-lyrics .lyrics-lines,
.full-player.has-static-lyrics #lyricsLines {
  display: block !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 8px 3px 32px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.full-player.has-static-lyrics .lyrics-line-static {
  display: block !important;
  margin: 0 0 12px !important;
  color: rgba(255,255,255,.96) !important;
  font-size: clamp(18px, 1.7vw, 27px) !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  letter-spacing: -.018em !important;
  text-align: left !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  animation: none !important;
}

/* The volume row stays directly above both lyric actions at every breakpoint. */
.full-player .player-extra-controls.fullExtraControls {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  grid-template-areas: "volume volume" "image submit" !important;
  width: var(--am-cover, min(calc(100vw - 44px), 392px)) !important;
  max-width: var(--am-cover, min(calc(100vw - 44px), 392px)) !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 14px 16px !important;
}
.full-player .player-extra-controls.fullExtraControls .player-volume-menu {
  grid-area: volume !important;
  grid-column: auto !important;
  width: 100% !important;
  max-width: none !important;
}
.full-player .player-extra-controls.fullExtraControls #createLyricsImage { grid-area: image !important; grid-column: auto !important; }
.full-player .player-extra-controls.fullExtraControls #toggleLyricsSubmit {
  grid-area: submit !important;
  grid-column: auto !important;
  justify-self: center !important;
}

/* The artwork is a real rounded panel, including its right-hand corners. */
.song-card { border-radius: 18px !important; }
.song-card .song-card-art { border-radius: 18px !important; }

/* Year filters are buttons, not empty tiles: center the year and give every
   era-derived color a restrained glass highlight. */
.archive-browser-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
  justify-content: center !important;
}
.archive-year-card {
  position: relative !important;
  min-height: 112px !important;
  display: grid !important;
  place-items: center !important;
  padding: 16px !important;
  overflow: hidden !important;
  text-align: center !important;
  font-size: clamp(25px, 3vw, 34px) !important;
  border-color: color-mix(in srgb, var(--year-era) 78%, white) !important;
  background: color-mix(in srgb, var(--year-era) 18%, #0a0a0c) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--year-era) 22%, transparent), 0 10px 24px rgba(0,0,0,.18) !important;
  align-items: center !important;
  justify-content: center !important;
}
.archive-year-card .archive-year-label {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  line-height: 1 !important;
}
.archive-year-card::after {
  content: none !important;
}
.song-card.is-collapsed .song-card-summary {
  grid-template-columns: 1fr !important;
  gap: 5px !important;
}
.song-card.is-collapsed .song-card-summary span { display: block !important; }
.media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.instrumental-library-card {
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--instrumental-year) 72%, var(--line-strong)) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--instrumental-year) 34%, #18181d), #101014 72%) !important;
}
.instrumental-card-art, .instrumental-card-art * { display: none !important; }
.instrumental-card-copy { min-width: 0; padding: 18px 20px !important; display: grid; align-content: center; gap: 7px; }
.instrumental-card-copy .song-head h2 { margin: 0; }
.instrumental-card-copy .song-head p { margin: 3px 0 0; }
.instrumental-card-copy .song-card-summary { margin: 2px 0 0; }
.instrumental-library-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.instrumental-library-label { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.instrumental-year-flair { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--instrumental-year) 74%, white); border-radius: 999px; color: #fff; font-size: 10px; font-weight: 800; }
.instrumental-library-card h2 { margin: 12px 0 5px; font-size: 23px; letter-spacing: -.04em; }
.instrumental-library-card p { margin: 0; color: var(--muted); font-size: 12px; }
.instrumental-file-list { width: 100%; display: grid; gap: 7px; margin-top: 18px; }
.instrumental-card-copy .instrumental-file-list { margin-top: 3px; }
.instrumental-file-button { width: 100%; padding: 9px 11px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(0,0,0,.25); color: #fff; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.instrumental-file-button:hover { border-color: color-mix(in srgb, var(--instrumental-year) 85%, white); }
.video-library-card { cursor: pointer; min-height: 120px !important; }
.video-library-card .song-card-art { border-radius: 17px 0 0 17px !important; }
@media (max-width: 700px) {
  .instrumental-card-copy { padding: 15px !important; }
}
@media (max-width: 760px) {
  .full-player.has-static-lyrics .lyrics-panel { height: min(48svh, 430px) !important; }
  .full-player.has-static-lyrics .lyrics-line-static { font-size: clamp(17px, 4.8vw, 22px) !important; line-height: 1.38 !important; }
  .archive-browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .archive-year-card { min-height: 94px !important; font-size: 26px !important; }
}

/* Final desktop player rail: the seek and volume rails share the exact cover
   column width, while the two action buttons stay on their own row. */
@media (min-width: 900px) {
  .full-player .player-primary > .player-art,
  .full-player .player-primary > .player-info,
  .full-player .player-primary > .timeline,
  .full-player .player-primary > .player-controls,
  .full-player .player-primary > .player-extra-controls.fullExtraControls {
    width: var(--am-left) !important;
    max-width: var(--am-left) !important;
    min-width: 0 !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .full-player .player-primary .player-extra-controls.fullExtraControls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "volume volume" "image submit" !important;
    width: var(--am-left) !important;
    max-width: var(--am-left) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 14px 16px !important;
  }
  .full-player .player-primary .player-extra-controls.fullExtraControls .player-volume-menu {
    grid-area: volume !important;
    width: var(--am-left) !important;
    max-width: var(--am-left) !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
  .full-player .player-primary .player-extra-controls.fullExtraControls #createLyricsImage { grid-area: image !important; }
  .full-player .player-primary .player-extra-controls.fullExtraControls #toggleLyricsSubmit { grid-area: submit !important; }
}

/* Center each visual row; grid auto-placement was pinning the last row left. */
.archive-browser-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}
.archive-year-card {
  flex: 0 0 184px !important;
  min-height: 78px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  padding: 0 !important;
  background: #151519 !important;
  border-color: color-mix(in srgb, var(--year-era) 80%, #d9d9dd) !important;
  box-shadow: inset 0 -4px 0 var(--year-era), inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.2) !important;
}
.archive-year-card .archive-year-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: color-mix(in srgb, var(--year-era) 28%, white) !important;
  text-align: center !important;
}
@media (max-width: 760px) {
  .archive-browser-grid { display: flex !important; }
  .archive-year-card { flex: 0 1 calc((100% - 12px) / 2) !important; width: auto !important; min-height: 72px !important; }
}

/* Library cards stay compact: instrumentals are simple year-tinted cards and
   videos use narrow song-card-sized tiles rather than full-width rows. */
#instrumentalLibraryResults { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
#videoLibraryResults { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 330px)) !important; align-items: start !important; gap: 14px !important; }
#videoLibraryResults .video-library-card { width: 100% !important; min-height: 118px !important; }
#videoLibraryResults .video-library-card .song-copy { padding: 15px 16px !important; }
#videoLibraryResults .video-library-card .song-head h2 { font-size: 22px !important; }

/* Instrumentals and videos deliberately reuse the Performance-card language. */
.library-performance-card {
  min-height: 0 !important;
  padding: 20px !important;
  gap: 14px !important;
  border-color: color-mix(in srgb, var(--era-a) 62%, var(--line)) !important;
}
.library-performance-card .performance-card-head { gap: 9px !important; }
.library-performance-card .performance-card-head h2 { font-size: clamp(26px, 2.4vw, 36px) !important; }
.library-performance-card .media-flair { width: fit-content; border-color: color-mix(in srgb, var(--era-a) 80%, white) !important; }
.library-performance-card .performance-field { padding: 0 !important; border: 0 !important; background: transparent !important; }
.library-performance-card::before { background-image: linear-gradient(110deg, rgba(3,3,3,.86), color-mix(in srgb, var(--era-a) 38%, rgba(3,3,3,.7))) !important; }
.instrumental-library-card { display: grid !important; grid-template-columns: 1fr !important; background: transparent !important; }
.instrumental-library-card .instrumental-file-list { margin: 0 !important; }
.instrumental-library-card .instrumental-file-button { background: rgba(0,0,0,.28) !important; }
.video-library-card { min-height: 180px !important; }
#videoLibraryResults .video-library-card .song-copy, #videoLibraryResults .video-library-card .song-head { display: contents !important; }

/* Static lyrics are a reading view: use the entire vertical player column,
   with only a small fade where text enters and leaves the viewport. */
@media (min-width: 900px) {
  .full-player.has-static-lyrics .player-layout {
    height: calc(100dvh - 84px) !important;
    max-height: none !important;
    align-items: stretch !important;
  }
  .full-player.has-static-lyrics .lyrics-panel {
    height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .full-player.has-static-lyrics .lyrics-lines,
  .full-player.has-static-lyrics #lyricsLines {
    height: 100% !important;
    padding: clamp(28px, 4vh, 58px) 8px !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%) !important;
  }
}

/* Expanded cards always have a visible, fixed close affordance. */
.media-modal.card-detail-mode .modal-close {
  position: fixed !important;
  top: 20px !important;
  right: 24px !important;
  z-index: 130 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 999px !important;
  background: rgba(8,8,10,.76) !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

/* Search cards keep one consistent row height. Reserve two title lines so a
   long title never stretches its card or the adjacent grid item. */
.song-card.is-collapsed {
  height: 166px !important;
  min-height: 166px !important;
  max-height: 166px !important;
  align-items: stretch !important;
}
.song-card.is-collapsed .song-card-art { height: 166px !important; min-height: 166px !important; }
.song-card.is-collapsed .song-head h2 {
  min-height: 2.18em !important;
  max-height: 2.18em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}
@media (max-width: 640px) {
  .song-card.is-collapsed { height: 142px !important; min-height: 142px !important; max-height: 142px !important; }
  .song-card.is-collapsed .song-card-art { height: 142px !important; min-height: 142px !important; }
}

/* Search-result artwork is an actual square, rendered in the initial card
   paint rather than as a narrow background strip. */
.song-card.is-collapsed {
  grid-template-columns: 166px minmax(0, 1fr) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.song-card.is-collapsed .song-card-art {
  width: 166px !important;
  min-width: 166px !important;
  height: 166px !important;
  min-height: 166px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 18px 0 0 18px !important;
  background-size: cover !important;
  background-position: center !important;
}

/* The two lyric tools are matching compact pills directly below the rail. */
.full-player .player-primary .player-extra-controls.fullExtraControls {
  column-gap: 8px !important;
}
.full-player #createLyricsImage {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
.full-player #createLyricsImage svg { display: none !important; }
.full-player #createLyricsImage span { display: inline !important; }

/* Compact media libraries: centered video cards with a real playable
   thumbnail, and instrumental attachments in a related-file layout. */
#videoLibraryResults {
  grid-template-columns: repeat(auto-fit, minmax(250px, 330px)) !important;
  justify-content: center !important;
}
#videoLibraryResults .video-library-card {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  min-height: 118px !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
.video-library-thumb {
  width: 116px;
  min-height: 118px;
  border: 0;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.5)), var(--video-thumb) center / cover no-repeat;
  color: #fff;
  cursor: pointer;
}
.video-library-thumb span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: auto;
  padding-left: 2px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  font-size: 14px;
}
#videoLibraryResults .video-library-card .performance-card-head {
  min-width: 0;
  padding: 17px 16px !important;
  align-content: center !important;
}
#videoLibraryResults .video-library-card .performance-card-head h2 {
  font-size: 21px !important;
  line-height: 1.03 !important;
}
.instrumental-library-card .instrumental-file-list {
  display: grid !important;
  gap: 8px !important;
}
.instrumental-file-row {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: rgba(5,5,8,.42);
}
.instrumental-file-row-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.instrumental-file-row-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.instrumental-file-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.instrumental-file-row-actions a { text-decoration: none; }

@media (max-width: 640px) {
  .song-card.is-collapsed { grid-template-columns: 142px minmax(0, 1fr) !important; }
  .song-card.is-collapsed .song-card-art { width: 142px !important; min-width: 142px !important; height: 142px !important; min-height: 142px !important; }
  #videoLibraryResults { grid-template-columns: 1fr !important; }
}

/* Music videos use the same full information-card language as Performances.
   The thumbnail becomes a native inline video player after pressing play. */
#videoLibraryResults {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-content: initial !important;
  align-items: start !important;
}
#videoLibraryResults .video-library-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  min-height: 0 !important;
  padding: clamp(22px, 3vw, 30px) !important;
  overflow: hidden !important;
  cursor: default !important;
}
#videoLibraryResults .video-library-card .performance-card-head {
  padding: 0 !important;
  align-content: initial !important;
}
#videoLibraryResults .video-library-card .performance-card-head h2 {
  font-size: clamp(29px, 3.6vw, 44px) !important;
  line-height: 1 !important;
}
.video-library-fields { margin-top: -2px; }
.video-library-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(0,0,0,.34);
}
.video-library-player video,
.video-library-thumb,
.video-library-thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.video-library-player video,
.video-library-thumb img { object-fit: cover; }
.video-library-thumb {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: #101014;
  cursor: pointer;
}
.video-library-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
}
.video-library-play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding-left: 3px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(4,4,6,.58);
  color: #fff;
  font-size: 19px;
  transform: translate(-50%, -50%);
}
@media (max-width: 760px) {
  #videoLibraryResults { grid-template-columns: 1fr !important; }
}

/* The archive library pages share one deliberately roomy rhythm.  Keep the
   media cards compact; clicking one is what reveals its complete metadata. */
.era-browser-more {
  align-self: center !important;
  min-width: 96px !important;
  min-height: 36px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
}

#instrumentalLibraryResults {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 20px !important;
}
.instrumental-play-button {
  border-color: rgba(255,255,255,.34) !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* The right-hand attachment is the only visual in an unexpanded Discord
   card.  Metadata boxes intentionally exist only inside the detail modal. */
.media-card.is-compact,
.session-card.is-compact,
.performance-card.performance-compact-card {
  grid-template-columns: minmax(0, 1fr) minmax(164px, 31%) !important;
  min-height: 166px !important;
  padding: 0 !important;
}
.media-card.is-compact .media-gallery,
.session-card.is-compact .session-gallery {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  min-height: 166px !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}
.media-card.is-compact .media-gallery .media-tile,
.session-card.is-compact .session-gallery .session-tile {
  min-height: 166px !important;
}
.media-card.is-compact .media-more-count,
.session-card.is-compact .media-more-count {
  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #08080a !important;
  font-weight: 800 !important;
}
.performance-card.performance-compact-card .performance-compact-art {
  min-height: 166px !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}
.archive-media-viewer > img,
.archive-media-viewer > video {
  width: min(100%, 1240px) !important;
  max-height: calc(100dvh - 126px) !important;
}

@media (max-width: 700px) {
  #instrumentalLibraryResults { grid-template-columns: 1fr !important; }
  .media-card.is-compact,
  .session-card.is-compact,
  .performance-card.performance-compact-card {
    grid-template-columns: minmax(0, 1fr) 38% !important;
    min-height: 148px !important;
  }
  .media-card.is-compact .media-gallery,
  .session-card.is-compact .session-gallery,
  .media-card.is-compact .media-gallery .media-tile,
  .session-card.is-compact .session-gallery .session-tile,
  .performance-card.performance-compact-card .performance-compact-art { min-height: 148px !important; }
}

/* Library metadata uses the same boxed fields as a performance card. */
.instrumental-library-card .performance-field,
.video-library-card .performance-field {
  padding: 11px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.04) !important;
}
.instrumental-library-card .performance-field > span,
.video-library-card .performance-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* The two lyric actions are intentionally identical pills. Older icon-button
   rules must not reduce the image action to an unframed text label. */
.full-player .player-extra-controls.fullExtraControls #createLyricsImage,
.full-player .player-extra-controls.fullExtraControls #toggleLyricsSubmit {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255,255,255,.9) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: none !important;
}
.full-player .player-extra-controls.fullExtraControls #createLyricsImage svg { display: none !important; }
.full-player .player-extra-controls.fullExtraControls #createLyricsImage span {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Expanded song details always have an explicit way back to the compact card. */
.song-card-close { display: none !important; }
.song-card:not(.is-collapsed) .song-card-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 999px !important;
  background: rgba(8,8,12,.72) !important;
  color: #fff !important;
  font-size: 25px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.song-card:not(.is-collapsed) .song-card-close:hover { background: rgba(255,255,255,.14) !important; }

/* Keep the card height fixed while letting the artist sit directly beneath a
   one-line title instead of reserving a blank second title line. */
.song-card.is-collapsed .song-head h2 {
  min-height: 0 !important;
}

/* Only the source filters move into an opened era header; Advanced search
   deliberately remains in its normal position beneath the song search. */
.era-selected-page .era-selected-source-filters .filter-row {
  width: max-content;
  max-width: calc(100% - 96px);
  margin: 18px 0 0 !important;
  justify-content: flex-start;
}
@media (max-width: 760px) {
  .era-selected-page .era-selected-source-filters .filter-row {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Preserve the era tint while putting a reliable dark reading surface over
   cover art, especially behind the selected era title and source controls. */
.era-selected-page::before {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.58) 54%, rgba(0,0,0,.9) 100%),
    linear-gradient(115deg, color-mix(in srgb, var(--era-card) 58%, transparent), transparent 72%),
    var(--era-cover, none) !important;
}

/* Mobile: lyric tools belong to the lyric view, not below the artwork. */
@media (max-width: 899px) {
  .full-player .timeline,
  .full-player .player-controls {
    width: calc(100vw - 40px) !important;
    max-width: none !important;
  }
  .full-player .timeline { margin-bottom: 28px !important; }
  .full-player .player-controls {
    margin-top: 6px !important;
    margin-bottom: 30px !important;
  }
  .full-player .player-extra-controls.fullExtraControls #createLyricsImage,
  .full-player .player-extra-controls.fullExtraControls #toggleLyricsSubmit {
    display: none !important;
  }
  .full-player.mobile-lyrics-view .player-extra-controls.fullExtraControls {
    display: none !important;
  }
  .full-player .lyrics-head {
    position: relative !important;
    display: none !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 0 10px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }
  .full-player.mobile-lyrics-view .lyrics-head { display: flex !important; }
  .full-player .lyrics-head h3 { display: none !important; }
  .full-player .lyrics-head #lyricsCredit {
    margin-right: auto !important;
    color: rgba(255,255,255,.62) !important;
    font-size: 11px !important;
  }
  .full-player .mobile-lyrics-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 999px !important;
    background: rgba(8,8,12,.25) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .full-player .mobile-lyrics-submit[hidden] { display: none !important; }
}
@media (min-width: 900px) {
  .mobile-lyrics-submit { display: none !important; }
}

/* Final mobile archive and calendar sizing overrides. */
.era-browser.era-browser--selected .era-browser-grid { display: block; }
.era-browser.era-browser--selected .era-selected-page { width: 100%; box-sizing: border-box; }
.era-browser.era-browser--selected .era-selected-page > p { margin-top: 42px; }
.era-browser.era-browser--selected .era-browser-back {
  background: #fff;
  border-color: #fff;
  color: #090909;
}
@media (max-width: 760px) {
  .era-browser.era-browser--selected { width: 100%; }
  .era-browser.era-browser--selected .era-selected-page {
    min-height: 236px;
    padding: 18px;
    border-radius: 20px;
  }
  .era-browser.era-browser--selected .era-selected-page > p { margin-top: 40px; }
  .era-browser.era-browser--selected .era-selected-page h3 {
    max-width: 72%;
    font-size: clamp(34px, 11vw, 46px);
  }
  .era-browser.era-browser--selected .era-selected-source-filters {
    position: absolute;
    right: 14px;
    bottom: 96px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 58%;
  }
  .calendar-event,
  .panel.calendar-month-open .calendar-event,
  .panel.calendar-show-all .calendar-event {
    min-height: 32px;
    padding: 3px;
    gap: 1px;
  }
  .calendar-event > span,
  .panel.calendar-month-open .calendar-event > span,
  .panel.calendar-show-all .calendar-event > span { font-size: 6px; }
  .calendar-event strong,
  .panel.calendar-month-open .calendar-event strong,
  .panel.calendar-show-all .calendar-event strong {
    min-width: 0;
    max-width: 100%;
    font-size: 7px;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
  }
  .calendar-event small,
  .panel.calendar-month-open .calendar-event small,
  .panel.calendar-show-all .calendar-event small { display: none !important; }
}

/* Keep event labels compact inside the seven-column phone calendar. */
@media (max-width: 760px) {
  .calendar-event,
  .panel.calendar-month-open .calendar-event,
  .panel.calendar-show-all .calendar-event {
    min-height: 34px;
    padding: 3px 4px;
  }
  .calendar-event > span,
  .panel.calendar-month-open .calendar-event > span,
  .panel.calendar-show-all .calendar-event > span {
    font-size: 6px;
  }
  .calendar-event strong,
  .panel.calendar-month-open .calendar-event strong,
  .panel.calendar-show-all .calendar-event strong {
    font-size: 7px;
    line-height: 1.08;
    -webkit-line-clamp: 1;
  }
  .calendar-event small,
  .panel.calendar-month-open .calendar-event small,
  .panel.calendar-show-all .calendar-event small {
    display: none !important;
  }
}

/* Must remain last: desktop and mobile player rules above include older
   layout passes. These are the final visible-state rules. */
.song-card.is-collapsed .song-card-art { border-radius: 18px !important; }
.full-player.lyrics-loading .lyrics-panel,
.full-player.lyrics-loading .lyrics-panel:has(.lyrics-empty) { display: block !important; }
.full-player .player-extra-controls.fullExtraControls #toggleLyricsSubmit { font-weight: 500 !important; }

@media (min-width: 900px) {
  .full-player .lyrics-scroll-hint:not([hidden]) {
    right: auto !important;
    left: 50% !important;
    bottom: 28px !important;
    padding: 11px 18px !important;
    font-size: 14px !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 899px) {
  .full-player[data-mobile-player-v2] .lyrics-scroll-hint:not([hidden]) {
    right: auto !important;
    left: 50% !important;
    bottom: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.94) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transform: translateX(-50%) !important;
  }
  .full-player[data-mobile-player-v2] .player-primary {
    grid-template-rows: minmax(340px, 53dvh) auto auto 66px 34px !important;
    gap: 14px 0 !important;
  }
  .full-player[data-mobile-player-v2] .player-controls,
  .full-player[data-mobile-player-v2] .fullControls {
    margin-top: 16px !important;
    transform: translateY(0) !important;
  }
  .full-player[data-mobile-player-v2] .player-extra-controls.fullExtraControls {
    transform: translateY(0) !important;
  }
  .full-player[data-mobile-player-v2].mobile-lyrics-view .player-controls,
  .full-player[data-mobile-player-v2].mobile-lyrics-view .fullControls,
  .full-player[data-mobile-player-v2].mobile-lyrics-view .player-controls button {
    position: relative !important;
    z-index: 56 !important;
    pointer-events: auto !important;
  }
  .full-player[data-mobile-player-v2].mobile-lyrics-view #mobileLyricsSubmit {
    position: relative !important;
    z-index: 57 !important;
    pointer-events: auto !important;
  }
}

/* Compact Discord archive cards: metadata stays readable while one real
   attachment preview lives on the right, with the remaining count on top. */
.media-card:has(.media-gallery--preview),
.session-card:has(.session-gallery--preview) {
  position: relative;
  min-height: 164px;
  padding-right: min(34%, 230px);
  overflow: hidden;
}
.media-gallery--preview,
.session-gallery--preview {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(31%, 210px);
  min-height: 100%;
  margin: 0 !important;
  display: block !important;
  overflow: hidden;
  border-radius: 0 17px 17px 0;
}
.media-gallery--preview .media-tile,
.session-gallery--preview .session-tile {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 164px;
  border: 0;
  border-radius: 0;
}
.media-gallery--preview img,
.session-gallery--preview img { width: 100%; height: 100%; object-fit: cover; }
.media-more-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  background: rgba(8,8,12,.76);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.archive-media-viewer { display: grid; gap: 14px; justify-items: center; }
.archive-media-viewer > img,
.archive-media-viewer > video { display: block; width: min(100%, 980px); max-height: min(72vh, 720px); border-radius: 16px; background: #070709; }
.archive-media-viewer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.archive-media-viewer-actions a { text-decoration: none; }
.media-flair.year-flair { background: color-mix(in srgb, var(--year-flair, #777) 38%, #09090c) !important; }

@media (max-width: 640px) {
  .media-card:has(.media-gallery--preview),
  .session-card:has(.session-gallery--preview) { padding-right: 40%; min-height: 145px; }
  .media-gallery--preview,
  .session-gallery--preview { width: 37%; }
  .media-gallery--preview .media-tile,
  .session-gallery--preview .session-tile { min-height: 145px; }
}

/* Final compact-card geometry. Attachment previews are a real square on the
   far right; their inner (left) corners are rounded like the music cards. */
.media-card.is-compact,
.session-card.is-compact,
.performance-card.performance-compact-card,
.instrumental-library-card.instrumental-compact-card {
  grid-template-columns: minmax(0, 1fr) 166px !important;
  min-height: 166px !important;
  overflow: hidden !important;
}
.media-card.is-compact .media-gallery,
.session-card.is-compact .session-gallery {
  position: relative !important;
  inset: auto !important;
  width: 166px !important;
  min-width: 166px !important;
  min-height: 166px !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
}
.media-card.is-compact .media-gallery .media-tile,
.session-card.is-compact .session-gallery .session-tile {
  min-height: 166px !important;
  border-radius: inherit !important;
}
.performance-card.performance-compact-card .performance-compact-art,
.instrumental-library-card.instrumental-compact-card .instrumental-compact-art {
  display: grid;
  place-items: center;
  width: 166px;
  min-width: 166px;
  min-height: 166px !important;
  overflow: hidden;
  border-radius: var(--radius) 0 0 var(--radius) !important;
}
.performance-card.performance-compact-card .performance-compact-art {
  background-position: center !important;
  background-size: cover !important;
}
.instrumental-library-card.instrumental-compact-card .instrumental-compact-art {
  color: rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 58% 32%, color-mix(in srgb, var(--instrumental-year) 52%, transparent), transparent 43%),
    linear-gradient(145deg, color-mix(in srgb, var(--instrumental-year) 58%, #101015), #0d0d12 78%);
}
.instrumental-library-card.instrumental-compact-card .instrumental-compact-art svg {
  width: 38px;
  height: 38px;
}
.instrumental-library-card.instrumental-compact-card .archive-card-copy { padding-right: 22px !important; }

/* Live cards use the date as their title; no redundant Live/year pills. */
.live-card.is-compact .media-flairs:empty { display: none !important; }

/* Admin remains available through a quiet link, rather than a persistent tab. */
.admin-access-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}
.admin-access-link:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 700px) {
  .media-card.is-compact,
  .session-card.is-compact,
  .performance-card.performance-compact-card,
  .instrumental-library-card.instrumental-compact-card {
    grid-template-columns: minmax(0, 1fr) 142px !important;
    min-height: 142px !important;
  }
  .media-card.is-compact .media-gallery,
  .session-card.is-compact .session-gallery,
  .performance-card.performance-compact-card .performance-compact-art,
  .instrumental-library-card.instrumental-compact-card .instrumental-compact-art {
    width: 142px !important;
    min-width: 142px !important;
    min-height: 142px !important;
  }
  .media-card.is-compact .media-gallery .media-tile,
  .session-card.is-compact .session-gallery .session-tile { min-height: 142px !important; }
}

/* Inline archive details: expand the card in its own grid position. */
.inline-card-expanded {
  position: relative;
  grid-column: 1 / -1;
  animation: archive-card-expand 190ms ease-out both;
}
.inline-card-close {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  background: rgba(8,8,12,.78);
  color: #fff;
  cursor: pointer;
  font-size: 23px;
  font-weight: 300;
  line-height: 24px;
}
.inline-card-close:hover { background: rgba(255,255,255,.16); }
@keyframes archive-card-expand { from { opacity: .45; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

/* Compact archive cards use one flush square preview on the right. */
.media-card.is-compact,
.session-card.is-compact,
.performance-card.performance-compact-card {
  padding: 0 !important;
  grid-template-columns: minmax(0,1fr) clamp(146px, 25%, 220px) !important;
  align-items: stretch !important;
}
.media-card.is-compact .archive-card-copy,
.session-card.is-compact .archive-card-copy,
.performance-card.performance-compact-card .archive-card-copy {
  padding: 18px 22px !important;
}
.media-card.is-compact .media-gallery,
.session-card.is-compact .session-gallery,
.performance-card.performance-compact-card .performance-compact-art {
  grid-column: 2 !important;
  justify-self: end !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  overflow: hidden !important;
}
.media-card.is-compact .media-gallery .media-tile,
.session-card.is-compact .session-gallery .session-tile,
.media-card.is-compact .media-gallery img,
.session-card.is-compact .session-gallery img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}
.media-card.is-compact .media-more-count,
.session-card.is-compact .media-more-count {
  top: 9px !important;
  right: 9px !important;
  background: #fff !important;
  color: #09090c !important;
}

/* Instrumentals mirror compact song-card typography, but intentionally have no cover slot. */
#instrumentalLibraryResults { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.instrumental-library-card.instrumental-compact-card {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: linear-gradient(110deg, color-mix(in srgb, var(--instrumental-year) 20%, #121217), #121217 68%) !important;
}
.instrumental-library-card.instrumental-compact-card .archive-card-copy { padding: 18px 20px !important; }
.instrumental-library-card.instrumental-compact-card .instrumental-compact-art { display: none !important; }
.instrumental-library-card .instrumental-play-button { background: transparent !important; color: #fff !important; }

/* Video cards keep their media focus without the era gradient behind them. */
.video-library-card { background: #121217 !important; }
.video-library-card::before,
.video-library-card::after { display: none !important; }

/* The secondary-era toggle belongs beneath the whole era grid. */
.era-browser-more { grid-column: 1 / -1 !important; justify-self: center !important; align-self: center !important; }

/* The compact browser uses flex, so the secondary-era control needs its own
   full row after every core era instead of sharing the final card row. */
.era-browser-grid.era-browser-grid--compact .era-browser-more {
  flex: 0 0 100% !important;
  order: 99 !important;
  width: fit-content !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 9px 16px !important;
}

@media (max-width: 760px) {
  .era-browser-grid.era-browser-grid--compact .era-browser-more {
    flex-basis: 100% !important;
    width: fit-content !important;
    min-height: 36px !important;
  }
}

/* A synced track only needs the image action, centered below the artwork. */
.full-player.has-synced-lyrics .player-extra-controls.fullExtraControls {
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-areas: "volume" "image" !important;
}
.full-player.has-synced-lyrics .lyrics-image-trigger {
  justify-self: center !important;
}

@media (min-width: 900px) {
  .full-player::before { filter: blur(56px) saturate(1.28) brightness(.88) !important; }
  .full-player::after { background: linear-gradient(120deg, rgba(5,6,10,.18), rgba(5,6,10,.32)) !important; }
}

@media (max-width: 700px) {
  .media-card.is-compact,
  .session-card.is-compact,
  .performance-card.performance-compact-card {
    grid-template-columns: minmax(0,1fr) 132px !important;
  }
  .media-card.is-compact .archive-card-copy,
  .session-card.is-compact .archive-card-copy,
  .performance-card.performance-compact-card .archive-card-copy { padding: 15px 16px !important; }
}
@media (max-width: 520px) {
  #instrumentalLibraryResults { grid-template-columns: 1fr !important; }
}

/* Final compact archive-card geometry. The preview is a real second grid
   column: no inherited padding or gap may leave a strip at the card edge. */
.media-card.is-compact,
.session-card.is-compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 166px !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--radius) !important;
}
.media-card.is-compact .archive-card-copy,
.session-card.is-compact .archive-card-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  padding: 22px !important;
}
.media-card.is-compact .media-gallery,
.session-card.is-compact .session-gallery {
  position: relative !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}
.media-card.is-compact .media-gallery .media-tile,
.session-card.is-compact .session-gallery .session-tile,
.media-card.is-compact .media-gallery img,
.session-card.is-compact .session-gallery img {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

@media (max-width: 700px) {
  .media-card.is-compact,
  .session-card.is-compact { grid-template-columns: minmax(0, 1fr) 38% !important; }
  .media-card.is-compact .archive-card-copy,
  .session-card.is-compact .archive-card-copy { padding: 16px !important; }
}

/* Button defaults were still padding the actual preview inward. The gallery
   itself owns the rounded right edge; its tile and image must fill it exactly. */
.media-card.is-compact:has(.media-gallery--preview),
.session-card.is-compact:has(.session-gallery--preview),
.performance-card.performance-compact-card:has(.performance-compact-art) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 166px !important;
  grid-template-rows: minmax(166px, auto) !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-height: 166px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--radius) !important;
}
.media-card.is-compact .media-gallery,
.session-card.is-compact .session-gallery,
.performance-card.performance-compact-card .performance-compact-art {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 166px !important;
  aspect-ratio: auto !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 !important;
}
.media-card.is-compact .media-gallery .media-tile,
.session-card.is-compact .session-gallery .session-tile {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 166px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.media-card.is-compact .media-gallery .media-tile > img,
.session-card.is-compact .session-gallery .session-tile > img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

@media (max-width: 700px) {
  .media-card.is-compact:has(.media-gallery--preview),
  .session-card.is-compact:has(.session-gallery--preview),
  .performance-card.performance-compact-card:has(.performance-compact-art) {
    grid-template-columns: minmax(0, 1fr) 38% !important;
    grid-template-rows: minmax(148px, auto) !important;
    min-height: 148px !important;
  }
  .media-card.is-compact .media-gallery,
  .session-card.is-compact .session-gallery,
  .performance-card.performance-compact-card .performance-compact-art {
    width: 100% !important;
    min-height: 148px !important;
  }
}

/* Keep the secondary-era control small while still forcing it onto its own
   line beneath the centred core-era cards. */
.era-browser-grid.era-browser-grid--compact::after {
  content: "";
  flex: 0 0 100%;
  order: 98;
  height: 0;
}
.era-browser-grid.era-browser-grid--compact .era-browser-more {
  flex: 0 0 auto !important;
  order: 99 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  align-self: center !important;
}

/* Archive cards only form two columns when both cards are wide enough for the
   song-card layout. Otherwise a preview would consume the whole first card
   and make it look detached from its text. */
.media-grid,
.session-grid,
.performance-grid {
  grid-template-columns: repeat(2, minmax(560px, 1fr)) !important;
  align-items: start !important;
}
@media (max-width: 1180px) {
  .media-grid,
  .session-grid,
  .performance-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* The last remaining inset came from the old 158px tile cap. Let the preview
   overscan the one-pixel card border and clip it with the card's exact radius. */
.media-card.is-compact:has(.media-gallery--preview),
.session-card.is-compact:has(.session-gallery--preview),
.performance-card.performance-compact-card:has(.performance-compact-art) {
  overflow: hidden !important;
  border-radius: var(--radius) !important;
}
.media-card.is-compact .media-gallery,
.session-card.is-compact .session-gallery,
.performance-card.performance-compact-card .performance-compact-art {
  justify-self: end !important;
  width: calc(100% + 1px) !important;
  max-width: none !important;
  margin-right: -1px !important;
  overflow: hidden !important;
  border-radius: var(--radius) !important;
  clip-path: inset(0 round var(--radius)) !important;
}
.media-card.is-compact .media-gallery .media-tile,
.session-card.is-compact .session-gallery .session-tile,
.media-card.is-compact .media-gallery .media-tile > img,
.session-card.is-compact .session-gallery .session-tile > img {
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Floating-player queue controls and vertical volume popup. */
.floating-player { grid-template-columns: 52px minmax(0, 1fr) 42px 42px 42px 42px 30px !important; }
.floating-player .mini-skip-button { display: grid !important; place-items: center !important; color: #fff !important; }
.floating-player .mini-skip-button svg,
.floating-player .mini-skip-button svg:not(.sf-symbol-fallback) { display: block !important; visibility: visible !important; opacity: 1 !important; width: 21px !important; height: 21px !important; fill: currentColor !important; stroke: none !important; }
.floating-player .mini-skip-button svg path { display: block !important; fill: currentColor !important; stroke: none !important; }
.floating-player #miniVolume {
  right: 16px !important;
  bottom: calc(100% + 14px) !important;
  width: 7px !important;
  height: 158px !important;
  writing-mode: vertical-lr !important;
  direction: rtl !important;
  -webkit-appearance: slider-vertical !important;
  background: transparent !important;
}
.floating-player .mini-volume.open::before {
  right: 2px !important;
  bottom: calc(100% + 2px) !important;
  width: 36px !important;
  height: 192px !important;
  border-radius: 999px !important;
}
.floating-player #miniVolume::-webkit-slider-runnable-track {
  background: linear-gradient(to top, #fff 0%, #fff var(--seek-progress, 100%), rgba(255,255,255,.34) var(--seek-progress, 100%), rgba(255,255,255,.34) 100%) !important;
}
@media (max-width: 760px) {
  .floating-player { grid-template-columns: 48px minmax(0, 1fr) 40px 40px 40px 40px 24px !important; }
}

/* Keep the emergency-catalog notice readable even when legacy theme rules
   are loaded afterwards. */
.static-catalog-notice {
  position: relative !important;
  z-index: 100 !important;
  opacity: 1 !important;
  background: #2e1d08 !important;
  color: #fff !important;
  border-color: #c68826 !important;
}
.static-catalog-notice strong,
.static-catalog-notice span,
.static-catalog-notice time {
  opacity: 1 !important;
}
.static-catalog-notice strong { color: #ffd17a !important; }
.static-catalog-notice span,
.static-catalog-notice time { color: #fff !important; }

/* Era buttons own their cover background so the local art is always visible,
   including inside the temporary static catalog. */
.era-browser-card {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .04) 18%, rgba(0, 0, 0, .86) 100%),
    var(--era-cover, none),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--era-card) 94%, white), transparent 36%) !important;
  background-position: center !important;
  background-size: cover !important;
}