/* menthol100s project — no default browser chrome */
:root {
  --bg: #f0f0f0;
  --paper: #ffffff;
  --ink: #0a0a0a;
  --muted: #5c5c5c;
  --pink-deep: #d4789a;
  --pink-soft: #e8a4bc;
  --accent: var(--ink);
  --line: 5px;
  --thin: 2px;
  --L-size: 32px;
  --L-weight: 5px;
  --L-color: var(--ink);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --display: "Archivo Black", Impact, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --radius: 0;
  --player-h: 300px;
  --track-row-h: 58px;
}

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

html {
  -webkit-font-smoothing: antialiased;
  scroll-padding-bottom: var(--player-offset, 0px);
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 0;
}

body.player-open {
  padding-bottom: var(--player-offset, 22rem);
}

/* Kill default control styling */
button,
input,
audio {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

audio {
  display: none !important;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

ul {
  list-style: none;
  padding: 0;
}

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

/* L-brackets all four corners */
.l-corners {
  --lc: var(--L-color);
  position: relative;
  background: var(--paper);
  background-image:
    linear-gradient(var(--lc), var(--lc)),
    linear-gradient(var(--lc), var(--lc)),
    linear-gradient(var(--lc), var(--lc)),
    linear-gradient(var(--lc), var(--lc)),
    linear-gradient(var(--lc), var(--lc)),
    linear-gradient(var(--lc), var(--lc)),
    linear-gradient(var(--lc), var(--lc)),
    linear-gradient(var(--lc), var(--lc));
  background-size:
    var(--L-size) var(--L-weight),
    var(--L-weight) var(--L-size),
    var(--L-size) var(--L-weight),
    var(--L-weight) var(--L-size),
    var(--L-size) var(--L-weight),
    var(--L-weight) var(--L-size),
    var(--L-size) var(--L-weight),
    var(--L-weight) var(--L-size);
  background-position:
    left top,
    left top,
    right top,
    right top,
    left bottom,
    left bottom,
    right bottom,
    right bottom;
  background-repeat: no-repeat;
}

.l-corners-sm {
  --L-size: 20px;
  --L-weight: 3px;
}

.panel {
  border: var(--thin) solid rgba(0, 0, 0, 0.08);
}

.app {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--line);
  min-height: 100vh;
}

/* ——— Header ——— */
.masthead-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.65rem 1.1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-decoration: none;
  color: inherit;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.brand-word {
  font-family: var(--display);
  font-size: clamp(1.35rem, 4.2vw, 2.15rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: lowercase;
}

.brand-legal-name {
  font-family: var(--serif);
  font-size: clamp(0.68rem, 1.8vw, 0.82rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: none;
}

.brand-primary {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.brand-legal {
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  margin-top: 0.35rem;
}

.brand-meta {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.1rem;
}

.masthead-actions {
  text-align: right;
  max-width: 28rem;
}

.masthead-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

.masthead-theme-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.masthead-actions .btn {
  margin-top: 0;
}

.stat-line {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.3;
}

.masthead {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.masthead-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0 1.1rem 0.55rem;
  border-top: var(--thin) solid rgba(0, 0, 0, 0.08);
  margin-top: 0.15rem;
}

.masthead-nav-btn {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  border: var(--thin) solid transparent;
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.masthead-nav-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: var(--ink);
}

.masthead-nav-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.memorial-line {
  font-size: 0.88rem;
  font-style: italic;
  margin-top: 0.65rem;
  padding-left: 0.65rem;
  border-left: 3px solid var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  margin-top: 0.85rem;
  border: var(--thin) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: background 0.15s, color 0.15s;
}

.btn:hover {
  background: var(--paper);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

/* ——— Layout ——— */
.layout {
  display: grid;
  grid-template-columns: minmax(280px, 320px) 1fr;
  gap: var(--line);
  flex: 1;
  align-items: stretch;
}

.sidebar {
  padding: 0.85rem 0.75rem 1rem;
  position: sticky;
  top: var(--line);
  align-self: stretch;
  min-height: calc(100dvh - 7.5rem);
  max-height: calc(100dvh - 3.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.sidebar-nav-sticky {
  flex-shrink: 0;
  background: var(--paper);
  padding-bottom: 0.5rem;
  margin-bottom: 0.15rem;
  border-bottom: var(--thin) solid rgba(0, 0, 0, 0.1);
}

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

  .sidebar {
    gap: 0.5rem;
  }
}

body.player-open .sidebar {
  max-height: calc(100dvh - var(--player-offset, 14rem) - 3.5rem);
  min-height: calc(100dvh - var(--player-offset, 14rem) - 7.5rem);
}

body.player-open .era-nav {
  padding-bottom: 0.35rem;
}

.library-tools-wrap {
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.04);
  border: var(--thin) solid rgba(0, 0, 0, 0.08);
}

.library-tools-wrap[hidden] {
  display: none;
}

.library-tools-summary {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.55rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.library-tools-summary::-webkit-details-marker {
  display: none;
}

.library-tools-summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
}

.library-tools-wrap[open] .library-tools-summary::before {
  transform: rotate(90deg);
}

.library-tools {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0.55rem 0.55rem;
}

.library-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.library-tools-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.library-search,
.library-select {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.5rem 0.45rem;
  border: var(--thin) solid rgba(0, 0, 0, 0.2);
  background: var(--paper);
  color: var(--ink);
}

.library-search:focus,
.library-select:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.library-filter-check {
  font-family: var(--mono);
  font-size: 0.62rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.search-view .era-header h1 {
  text-transform: uppercase;
}

.sidebar-label {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.sidebar-divider {
  height: var(--thin);
  background: var(--ink);
  opacity: 0.12;
  margin: 0;
  flex-shrink: 0;
}

.sidebar-divider[hidden],
#era-sidebar-label[hidden] {
  display: none;
}

.view-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  margin: 0;
}

.view-tab {
  width: 100%;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.4rem;
  background: var(--paper);
  color: var(--ink);
  transition: background 0.12s, color 0.12s;
}

.view-tab:hover {
  background: rgba(0, 0, 0, 0.06);
}

.view-tab.active {
  background: var(--ink);
  color: var(--paper);
  --L-color: var(--paper);
}

.era-nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.era-nav[hidden] {
  display: none;
}

.library-sort-note {
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: var(--thin) solid rgba(0, 0, 0, 0.12);
}

.library-sort-note strong {
  color: var(--ink);
  font-weight: 600;
}

.library-quick-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.quick-jump {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.5rem;
  border: var(--thin) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  flex: 1 1 calc(50% - 0.2rem);
  min-width: 0;
  text-align: center;
}

.quick-jump:hover,
.quick-jump:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.sort-toggle {
  display: flex;
  gap: 0.25rem;
}

.sort-toggle-btn {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.35rem;
  border: var(--thin) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}

.sort-toggle-btn.active {
  background: var(--ink);
  color: var(--paper);
}

.era-tab {
  width: 100%;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.7rem 0.65rem;
  background: var(--paper);
  color: var(--ink);
  transition: background 0.12s, color 0.12s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.era-tab-when {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.35;
  opacity: 0.85;
  font-weight: 400;
}

.era-tab.active .era-tab-when {
  opacity: 0.75;
}

.era-tab:hover {
  background: rgba(0, 0, 0, 0.06);
}

.era-tab.active {
  background: var(--ink);
  color: var(--paper);
  --L-color: var(--paper);
}

.notes-panel {
  padding: 0.85rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  line-height: 1.55;
}

.notes-panel h3 {
  font-family: var(--display);
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}

.notes-panel p {
  margin-bottom: 0.75rem;
}

.notes-panel .chip {
  display: inline-block;
  border: var(--thin) solid var(--ink);
  padding: 0.12rem 0.4rem;
  margin: 0.2rem 0.25rem 0 0;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chip.ok {
  background: var(--ink);
  color: var(--paper);
}

/* ——— Main content ——— */
.content {
  padding: 1.5rem 1.5rem 2rem;
  min-height: 400px;
}

.loading-msg {
  font-family: var(--mono);
  font-size: 0.8rem;
}

.era-view {
  animation: fade 0.2s ease;
}

.timeline-feed {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.timeline-intro {
  margin-bottom: 0.5rem;
}

.era-section {
  scroll-margin-top: 1rem;
  scroll-margin-bottom: calc(var(--player-offset, 0px) + 1rem);
}

.timeline-sentinel {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  padding: 2rem 1rem 3rem;
}

.timeline-sentinel-done {
  color: var(--ink);
  opacity: 0.45;
}

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

.era-header {
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
}

.era-header h1 {
  font-family: var(--display);
  font-size: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.era-header p {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.section-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.75rem 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: var(--thin) solid var(--ink);
}

.section-label:first-of-type {
  margin-top: 0;
}

.release-card {
  margin-bottom: 1rem;
  padding: 1rem 0.85rem 0.85rem;
}

.release-cover {
  width: 88px;
  height: 88px;
  margin-bottom: 0.65rem;
  overflow: hidden;
  border: 1px solid var(--line);
}

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

.track-row-missing {
  opacity: 0.45;
  pointer-events: none;
}

.release-card h2 {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.release-card .badge {
  font-size: 0.58rem;
  opacity: 0.55;
  margin-left: 0.35rem;
}

.track-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.track-group {
  display: flex;
  flex-direction: column;
}

.track-group .track-row {
  background: transparent;
  border-top: var(--thin) solid rgba(0, 0, 0, 0.06);
}

.track-group .track-row:first-child {
  border-top: none;
}

.track-group:hover,
.track-group.is-playing {
  --L-color: var(--paper);
}

.track-group.is-playing {
  background: var(--ink);
  color: var(--paper);
}

.track-group.is-playing .track-row:not(.is-playing) {
  opacity: 0.72;
}

.track-variant {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  vertical-align: middle;
}

.track-row.is-alt .track-num {
  opacity: 0.3;
}

.track-row.has-edit {
  grid-template-columns: 1.35rem 40px 28px minmax(0, 1fr) 1.75rem;
}

.track-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: var(--thin) solid transparent;
  background: transparent;
  color: inherit;
  opacity: 0.45;
  cursor: pointer;
  flex-shrink: 0;
}

.track-row:hover .track-edit-btn,
.track-row.is-playing .track-edit-btn {
  opacity: 0.9;
  border-color: currentColor;
}

.track-row {
  display: grid;
  grid-template-columns: 1.35rem 40px 28px minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: var(--track-row-h);
  max-height: var(--track-row-h);
  text-align: left;
  padding: 0.35rem 0.5rem;
  background: var(--paper);
  transition: background 0.12s, color 0.12s;
  overflow: hidden;
}

.track-row:hover {
  background: var(--ink);
  color: var(--paper);
  --L-color: var(--paper);
}

.track-row.is-playing {
  background: var(--ink);
  color: var(--paper);
  --L-color: var(--paper);
}

.track-num {
  font-family: var(--mono);
  font-size: 0.58rem;
  opacity: 0.45;
  text-align: right;
  line-height: 1;
}

.track-thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: var(--thin) solid currentColor;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.track-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.track-thumb-fallback {
  font-family: var(--mono);
  font-size: 0.65rem;
  opacity: 0.35;
}

.track-play {
  width: 22px;
  height: 22px;
  border: var(--thin) solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.track-play svg {
  width: 10px;
  height: 10px;
}

.track-play .ico-pause {
  display: none;
}

.track-row.is-playing .track-play .ico-play {
  display: none;
}

.track-row.is-playing .track-play .ico-pause {
  display: block;
}

.track-mid {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  overflow: hidden;
}

.track-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-artist {
  font-family: var(--mono);
  font-size: 0.52rem;
  line-height: 1.2;
  opacity: 0.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-artist[hidden] {
  display: none;
}

.track-meta-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 0.95rem;
  overflow: hidden;
}

.track-status {
  font-size: 0.5rem;
  padding: 0.05rem 0.3rem;
  flex-shrink: 0;
  line-height: 1.2;
}

.track-date-inline,
.track-time-inline {
  font-family: var(--mono);
  font-size: 0.52rem;
  opacity: 0.55;
  white-space: nowrap;
}

.track-date-unknown {
  font-style: italic;
  opacity: 0.42;
}

.singles-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.singles-list .track-group {
  margin: 0;
}

.singles-more {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.5rem;
  padding: 0.5rem;
}

.footer {
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ——— Custom player ——— */
.player-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  padding: 0 var(--line) var(--line);
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.player-dock:not([hidden]) {
  pointer-events: none;
}

.player-dock-inner,
.player-dock:not([hidden]) .versions-drawer-inner,
.player-dock:not([hidden]) .player {
  pointer-events: auto;
}

.player-dock-inner {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

body.player-nano #player-panel {
  display: none !important;
}

body.player-nano:not(.player-full) .player-ipod-assembly {
  display: flex;
}

body.player-full .player-ipod-assembly {
  display: none;
}

/* ——— iPod nano 4G/5G — 90.7 × 38.7 mm (H×W), ~2.34:1 ——— */
.player-ipod-assembly {
  display: none;
  align-items: stretch;
  gap: 0;
  filter: drop-shadow(0 12px 32px rgba(180, 0, 90, 0.35));
}

.ipod-side-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 5px 0 0;
  align-self: center;
}

.ipod-rocker {
  width: 14px;
  height: 28px;
  padding: 0;
  border: 1px solid #8a0048;
  background: linear-gradient(90deg, #c40062 0%, #e91e8c 50%, #ff8fc4 100%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.35),
    inset -1px 0 2px rgba(0, 0, 0, 0.15);
}

.ipod-rocker-up {
  border-radius: 4px 4px 1px 1px;
}

.ipod-rocker-down {
  border-radius: 1px 1px 4px 4px;
}

.ipod-rocker:hover {
  filter: brightness(1.08);
}

.ipod-rocker:active {
  filter: brightness(0.92);
}

.ipod-nano-main {
  --ipod-w: 252px;
  --ipod-ui: calc(var(--ipod-w) / 252);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  align-self: flex-end;
  width: var(--ipod-w);
  max-width: 100%;
  padding: 0.55rem 0.5rem 0.65rem;
  background: linear-gradient(
    145deg,
    #ff8fc4 0%,
    #f06ba8 12%,
    #e91e8c 35%,
    #d41472 58%,
    #c40062 78%,
    #a80052 100%
  );
  border-radius: 14px;
  border: 1px solid #8a0048;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 8px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
}

.ipod-gloss {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.52) 0%,
      rgba(255, 255, 255, 0.12) 22%,
      transparent 45%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18) 0%,
      transparent 35%,
      rgba(0, 0, 0, 0.06) 100%
    );
  z-index: 1;
}

.ipod-nano-main > *:not(.ipod-gloss) {
  position: relative;
  z-index: 2;
}

.ipod-bezel {
  width: 100%;
  background: linear-gradient(180deg, #3a3a3a 0%, #0a0a0a 100%);
  padding: 5px 5px 6px;
  border-radius: 5px;
  margin-bottom: 0.5rem;
  box-shadow:
    inset 0 0 0 1px #555,
    inset 0 1px 2px rgba(255, 255, 255, 0.08);
}

.ipod-screen-glass {
  --ipod-screen-h: 318px;
  position: relative;
  background: linear-gradient(180deg, #fafafa 0%, #f0f0f2 100%);
  height: var(--ipod-screen-h);
  min-height: var(--ipod-screen-h);
  max-height: var(--ipod-screen-h);
  flex: 0 0 var(--ipod-screen-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #111;
  color-scheme: light;
  box-shadow:
    inset 0 0 0 1px #ccc,
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ipod-title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  padding: calc(0.28rem * var(--ipod-ui)) calc(0.5rem * var(--ipod-ui));
  background: linear-gradient(180deg, #7eb8f0 0%, #4a90d9 45%, #2d6db5 100%);
  border-bottom: 1px solid #1a5088;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ipod-title-bar-label {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(0.78rem * var(--ipod-ui));
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.ipod-title-bar .ipod-battery {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
}

.ipod-title-back {
  position: absolute;
  left: calc(0.2rem * var(--ipod-ui));
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(0.72rem * var(--ipod-ui));
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  padding: calc(0.15rem * var(--ipod-ui)) calc(0.3rem * var(--ipod-ui));
  cursor: pointer;
  line-height: 1;
}

.ipod-title-back:hover {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

.ipod-title-back[hidden] {
  display: none;
}

.ipod-hidden-dl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.ipod-vol-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.ipod-vol-overlay.is-visible {
  opacity: 1;
}

.ipod-vol-overlay-track {
  width: 88px;
  height: 8px;
  background: #444;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #666;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ipod-vol-overlay-fill {
  height: 100%;
  width: 50%;
  background: linear-gradient(180deg, #9ee06a 0%, #4caf50 100%);
  border-radius: 3px;
}

.ipod-vol-overlay-pct {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.ipod-screen-body {
  flex: 1;
  min-height: 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.ipod-subhead {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #111;
  margin: 0;
  padding: 0.4rem 0.55rem 0.25rem;
  border-bottom: 1px solid #e8e8e8;
}

.ipod-battery {
  width: calc(22px * var(--ipod-ui));
  height: calc(10px * var(--ipod-ui));
  border: calc(1.5px * var(--ipod-ui)) solid #3d7a2e;
  border-radius: 2px;
  position: relative;
  background: linear-gradient(90deg, #6dd44a 0%, #4caf50 100%);
}

.ipod-battery::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 2px;
  width: 2px;
  height: 4px;
  background: #3d7a2e;
  border-radius: 0 1px 1px 0;
}

.ipod-screen-panel {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
}

.ipod-screen-panel[hidden] {
  display: none !important;
}

.ipod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(0.76rem * var(--ipod-ui));
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ipod-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(0.24rem * var(--ipod-ui)) calc(0.45rem * var(--ipod-ui));
  color: #111 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  background: #fff;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.2;
}

.ipod-menu-item:active:not(.is-active) {
  background: #f0f0f0;
}

.ipod-menu-item.is-active {
  background: linear-gradient(180deg, #4a94e0 0%, #2d6db5 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.ipod-menu-item.is-active::after {
  content: "›";
  font-size: 1.1rem;
  font-weight: 700;
  opacity: 0.95;
}

.ipod-menu-item.has-submenu:not(.is-active)::after {
  content: "›";
  color: #888;
  font-size: 1rem;
}

#nano-panel-media:not([hidden]) {
  display: flex;
  flex-direction: column;
  background: #000;
}

#nano-panel-media.is-photo-mode .ipod-media-video {
  display: none !important;
}

#nano-panel-media.is-video-mode .ipod-media-img {
  display: none !important;
}

.ipod-media-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.ipod-media-img[hidden],
.ipod-media-video[hidden] {
  display: none !important;
}

.ipod-media-img,
.ipod-media-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}

.ipod-media-title {
  margin: 0;
  padding: 0.28rem 0.45rem 0.35rem;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.62rem;
  line-height: 1.25;
  color: #ddd;
  background: #111;
  border-top: 1px solid #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ipod-screen-glass.is-media-view {
  background: #000;
}

.ipod-screen-glass.is-media-view .ipod-screen-body,
.ipod-screen-glass.is-media-view .ipod-title-bar {
  background: #111;
  border-color: #333;
}

.ipod-screen-glass.is-media-view .ipod-title-bar-label,
.ipod-screen-glass.is-media-view .ipod-title-back {
  color: #eee;
}

.ipod-nano-main.ipod-media-expanded {
  transition:
    width 0.42s cubic-bezier(0.34, 1.2, 0.64, 1),
    transform 0.42s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: 5;
}

.ipod-nano-main.ipod-media-enter {
  animation: ipod-media-pop 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes ipod-media-pop {
  0% {
    transform: scale(0.94);
  }
  55% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

.ipod-nano-main.ipod-media-portrait {
  --ipod-screen-h: 268px;
}

.ipod-nano-main.ipod-media-landscape {
  --ipod-w: 268px;
  --ipod-screen-h: 168px;
}

body.ipod-fullscreen .ipod-nano-main.ipod-media-portrait {
  --ipod-screen-h: 268px;
}

body.ipod-fullscreen .ipod-nano-main.ipod-media-landscape {
  --ipod-w: 268px;
  --ipod-screen-h: 168px;
}

.ipod-media-stage.is-portrait .ipod-media-img {
  width: auto;
  height: 100%;
  max-height: 100%;
}

.media-card.is-media-focus {
  outline: 3px solid #2d6db5;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(45, 109, 181, 0.25);
}

.ipod-dock-toggle {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  margin-right: 0.65rem;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: var(--thin) solid #8a0048;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #ff8fc4 0%, #e91e8c 55%, #c40062 100%);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 -4px 16px rgba(180, 0, 90, 0.25);
  pointer-events: auto;
}

body.player-nano:not(.player-full) .ipod-dock-toggle {
  display: inline-flex;
}

body.ipod-collapsed .player-ipod-assembly {
  display: none !important;
}

body.ipod-collapsed .ipod-dock-toggle-icon {
  transform: rotate(0deg);
}

body:not(.ipod-collapsed) .ipod-dock-toggle-icon {
  transform: rotate(180deg);
}

body.ipod-collapsed.player-open {
  padding-bottom: var(--player-offset, 52px);
}

body.ipod-collapsed .player-dock-inner {
  justify-content: flex-end;
  width: auto;
  min-width: 0;
}

body.ipod-collapsed .ipod-dock-toggle {
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -6px 20px rgba(180, 0, 90, 0.3);
}

body:not(.ipod-fullscreen) .player-ipod-assembly {
  transform: none;
  filter: drop-shadow(0 12px 32px rgba(180, 0, 90, 0.35));
}

/* Docked iPod — fixed nano dimensions (never resize between menu / now / settings) */
body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-nano-main {
  --ipod-w: 252px;
  --ipod-ui: 1;
  width: 252px;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-screen-glass {
  --ipod-screen-h: 318px;
  height: 318px;
  min-height: 318px;
  max-height: 318px;
  flex: 0 0 318px;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .is-now-playing .ipod-cover-btn {
  width: 88px;
  height: 88px;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .is-now-playing .ipod-cover-lg,
body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .is-now-playing .ipod-cover-fallback.ipod-cover-lg {
  width: 88px;
  height: 88px;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .is-now-playing .ipod-now-inner {
  gap: 0.1rem;
  padding: 0.18rem 0.38rem 0.3rem;
  justify-content: space-between;
  overflow: hidden;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-title-lg {
  font-size: 0.68rem !important;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.4em;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-artist {
  font-size: 0.5rem;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-tbtn {
  width: 26px;
  height: 22px;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-tbtn-pp {
  width: 30px;
  height: 24px;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-tbtn svg {
  width: 11px;
  height: 11px;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-scrub-wrap {
  height: 18px;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-time {
  font-size: 0.58rem;
  line-height: 1.1;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-soft-row {
  gap: 0.14rem;
  margin-top: 0.08rem;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-soft-btn {
  min-height: 22px;
  padding: 0.2rem 0.12rem;
  border-radius: 4px;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-icon-btn svg {
  width: 11px;
  height: 11px;
}

body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-now-badges {
  min-height: 11px;
  font-size: 0.55rem;
}

/* Classic light Now Playing (default — matches old iPod menu UI) */
.ipod-screen-glass.is-now-playing .ipod-screen-body {
  background: #fff;
}

#nano-panel-now {
  background: #fff;
  overflow-y: hidden;
}

.ipod-now-badges {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: calc(14px * var(--ipod-ui));
  padding: 0 calc(0.15rem * var(--ipod-ui));
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(0.62rem * var(--ipod-ui));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

.ipod-now-badge[hidden] {
  display: none;
}

.ipod-now-shuffle {
  margin-right: auto;
}

.ipod-now-repeat {
  margin-left: auto;
}

.ipod-now-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.22rem * var(--ipod-ui));
  padding: calc(0.3rem * var(--ipod-ui)) calc(0.45rem * var(--ipod-ui)) calc(0.35rem * var(--ipod-ui));
  height: 100%;
  min-height: 0;
  justify-content: flex-start;
  overflow: hidden;
}

.is-now-playing .ipod-now-inner {
  padding-top: calc(0.25rem * var(--ipod-ui));
}

.ipod-cover,
.ipod-cover-fallback {
  object-fit: cover;
  border: 1px solid #888;
  background: #111;
}

.ipod-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.ipod-cover-btn {
  position: relative;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  overflow: hidden;
}

.is-now-playing .ipod-cover-btn {
  width: 108px;
  height: 108px;
}

.ipod-cover-btn .ipod-cover,
.ipod-cover-btn .ipod-cover-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.ipod-cover-btn .ipod-cover[hidden],
.ipod-cover-btn .ipod-cover-fallback[hidden] {
  display: none !important;
}

.ipod-cover-btn .ipod-cover:not([hidden]) {
  display: block;
}

.ipod-cover-btn .ipod-cover[hidden] + .ipod-cover-fallback {
  display: flex;
}

.ipod-cover-lg,
.ipod-cover-fallback.ipod-cover-lg {
  width: calc(72px * var(--ipod-ui));
  height: calc(72px * var(--ipod-ui));
}

.is-now-playing .ipod-cover-lg,
.is-now-playing .ipod-cover-fallback.ipod-cover-lg {
  width: 108px;
  height: 108px;
  border-color: #888;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.ipod-title-lg {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(0.78rem * var(--ipod-ui)) !important;
  font-weight: 600;
  text-align: center;
  color: #111;
  max-height: none;
  -webkit-line-clamp: unset;
  line-height: 1.2;
  padding: 0 0.25rem;
}

.is-now-playing .ipod-now-badges {
  color: rgba(0, 0, 0, 0.4);
}

.ipod-transport-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.45rem * var(--ipod-ui));
  width: 100%;
  padding: calc(0.1rem * var(--ipod-ui)) 0;
}

.ipod-tbtn {
  border: none;
  background: linear-gradient(180deg, #f8f8f8 0%, #e2e2e2 100%);
  color: #666;
  line-height: 0;
  width: calc(28px * var(--ipod-ui));
  height: calc(24px * var(--ipod-ui));
  border-radius: calc(4px * var(--ipod-ui));
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.12);
  border: 1px solid #bbb;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ipod-tbtn svg {
  width: calc(13px * var(--ipod-ui));
  height: calc(13px * var(--ipod-ui));
  display: block;
}

.ipod-tbtn-pp {
  width: calc(32px * var(--ipod-ui));
  height: calc(28px * var(--ipod-ui));
}

.ipod-tbtn-pp svg {
  width: calc(11px * var(--ipod-ui));
  height: calc(11px * var(--ipod-ui));
}

.ipod-tbtn-pp[data-state="play"] .ipod-tbtn-pause,
.ipod-tbtn-pp[data-state="pause"] .ipod-tbtn-play {
  display: none;
}

.ipod-tbtn:active {
  background: linear-gradient(180deg, #d8d8d8 0%, #c8c8c8 100%);
}

.ipod-scrub-wrap {
  position: relative;
  width: 100%;
  height: calc(22px * var(--ipod-ui));
  display: flex;
  align-items: center;
}

.ipod-scrub-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.ipod-scrub-wrap .ipod-scrub {
  width: 100%;
  pointer-events: none;
}

.ipod-scrub {
  width: 100%;
  height: calc(5px * var(--ipod-ui));
  background: #b8c0c8;
  border-radius: calc(3px * var(--ipod-ui));
  overflow: hidden;
  border: none;
  padding: 0;
  display: block;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.ipod-seek-fill {
  height: 100%;
  width: 0%;
  background: #3d4f63;
  transition: width 0.15s linear;
}

.ipod-time {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(0.68rem * var(--ipod-ui));
  color: #555;
  margin: 0;
}

.ipod-artist {
  font-family: var(--mono);
  font-size: calc(0.55rem * var(--ipod-ui));
  color: #555;
  margin: 0;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ipod-scrub-lg {
  height: 5px;
}

.ipod-soft-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(0.22rem * var(--ipod-ui));
  width: 100%;
  margin-top: calc(0.15rem * var(--ipod-ui));
}

.ipod-soft-btn {
  border: 1px solid #a8b8c8;
  background: linear-gradient(180deg, #ffffff 0%, #e8eef4 55%, #d4dde8 100%);
  color: #2a5070;
  padding: calc(0.32rem * var(--ipod-ui)) calc(0.2rem * var(--ipod-ui));
  border-radius: calc(5px * var(--ipod-ui));
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(28px * var(--ipod-ui));
}

.ipod-icon-btn svg {
  width: calc(14px * var(--ipod-ui));
  height: calc(14px * var(--ipod-ui));
  display: block;
  opacity: 0.82;
}

.ipod-icon-btn .ipod-fs-exit {
  display: none;
}

body.ipod-fullscreen .ipod-icon-btn .ipod-fs-enter {
  display: none;
}

body.ipod-fullscreen .ipod-icon-btn .ipod-fs-exit {
  display: block;
}

.ipod-soft-btn:active {
  background: linear-gradient(180deg, #d4dde8 0%, #c8d2de 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

body.ipod-fullscreen .player-dock {
  position: fixed;
  inset: 0;
  z-index: 500;
  padding: 0 !important;
  margin: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  pointer-events: auto;
}

body.ipod-fullscreen .player-dock-inner {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

body.ipod-fullscreen .player-ipod-assembly {
  display: flex !important;
  pointer-events: auto;
  margin: 0 !important;
  filter: drop-shadow(0 28px 72px rgba(180, 0, 90, 0.5));
  --ipod-fs-scale: min(
    calc((100dvh - 2.5rem) / 580),
    calc(94vw / 290)
  );
  transform: scale(var(--ipod-fs-scale));
  transform-origin: center center;
}

body.ipod-fullscreen.ipod-media-expanded .player-ipod-assembly {
  --ipod-fs-scale: min(
    calc((100dvh - 2rem) / 560),
    calc(96vw / 320)
  );
}

body.ipod-fullscreen .ipod-dock-toggle {
  display: none !important;
}

body.ipod-fullscreen .ipod-nano-main {
  --ipod-w: 252px;
  --ipod-ui: 1;
  width: 252px;
  max-height: none;
}

body.ipod-fullscreen .ipod-screen-glass {
  --ipod-screen-h: 318px;
  height: 318px;
  min-height: 318px;
  max-height: 318px;
  flex: 0 0 318px;
}

body.ipod-fullscreen.ipod-media-expanded .ipod-nano-main.ipod-media-portrait .ipod-screen-glass {
  --ipod-screen-h: 268px;
  height: 268px;
  min-height: 268px;
  max-height: 268px;
  flex: 0 0 268px;
}

body.ipod-fullscreen.ipod-media-expanded .ipod-nano-main.ipod-media-landscape {
  --ipod-w: 268px;
  width: 268px;
}

body.ipod-fullscreen.ipod-media-expanded .ipod-nano-main.ipod-media-landscape .ipod-screen-glass {
  --ipod-screen-h: 168px;
  height: 168px;
  min-height: 168px;
  max-height: 168px;
  flex: 0 0 168px;
}

body.ipod-fullscreen.player-open {
  padding-bottom: 0;
}

body.ipod-fullscreen.player-open .app {
  padding-bottom: calc(3.75rem + var(--line));
}

.ipod-info-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.35rem 0.45rem 0.25rem;
  border-bottom: 1px solid #eee;
}

.ipod-info-chips .chip {
  font-size: 0.5rem;
  padding: 0.1rem 0.28rem;
  line-height: 1.3;
}

.ipod-info-chips[hidden] {
  display: none;
}

.ipod-settings-menu .ipod-menu-item {
  background: linear-gradient(180deg, #fff 0%, #f8f8fa 100%);
}

.ipod-settings-menu .ipod-menu-item.is-active {
  background: linear-gradient(180deg, #5aa0e8 0%, #2d6db5 100%) !important;
}

#ipod-nav-cover:not([hidden]) + .ipod-cover-fallback {
  display: none !important;
}

.ipod-wheel,
.ipod-wheel-gen5 {
  position: relative;
  width: calc(var(--ipod-w) * 0.78);
  height: calc(var(--ipod-w) * 0.78);
  margin: 0 auto;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 35%, #e6e6e6 100%);
  border: 2px solid #d0d0d0;
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, 1),
    inset 0 -4px 10px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.12);
}

.ipod-wheel-seg {
  position: absolute;
  border: none;
  background: transparent;
  color: #9a9a9a;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(0.58rem * var(--ipod-ui));
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ipod-wheel-seg svg {
  width: calc(12px * var(--ipod-ui));
  height: calc(12px * var(--ipod-ui));
  fill: #aaa;
}

.ipod-wheel-menu {
  top: calc(8px * var(--ipod-ui));
  left: 50%;
  transform: translateX(-50%);
  width: calc(44px * var(--ipod-ui));
  height: calc(22px * var(--ipod-ui));
  font-size: calc(0.5rem * var(--ipod-ui));
}

.ipod-wheel-prev {
  left: calc(8px * var(--ipod-ui));
  top: 50%;
  transform: translateY(-50%);
  width: calc(30px * var(--ipod-ui));
  height: calc(30px * var(--ipod-ui));
}

.ipod-wheel-next {
  right: calc(8px * var(--ipod-ui));
  top: 50%;
  transform: translateY(-50%);
  width: calc(30px * var(--ipod-ui));
  height: calc(30px * var(--ipod-ui));
}

.ipod-wheel-pp {
  bottom: calc(8px * var(--ipod-ui));
  left: 50%;
  transform: translateX(-50%);
  width: calc(30px * var(--ipod-ui));
  height: calc(22px * var(--ipod-ui));
}

.ipod-wheel-pp[data-state="play"] .ipod-icon-pause,
.ipod-wheel-pp[data-state="pause"] .ipod-icon-play {
  display: none;
}

.ipod-wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--ipod-w) * 0.3);
  height: calc(var(--ipod-w) * 0.3);
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #ff8fc4 0%, #e91e8c 45%, #c40062 100%);
  box-shadow:
    inset 0 3px 8px rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(0, 0, 0, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.ipod-wheel-center:hover,
.ipod-wheel-seg:hover {
  filter: brightness(1.06);
}

.ipod-dl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 168px;
}

body.ipod-fullscreen .ipod-dl-list {
  max-height: calc(var(--ipod-screen-h) - 2.75rem);
}

.ipod-dl-item {
  border-bottom: 1px solid #eee;
}

.ipod-dl-item.is-best {
  background: #f4f9ff;
}

.ipod-dl-item.is-warn {
  background: #fff8f0;
}

.ipod-dl-item a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.35rem;
  padding: 0.42rem 0.55rem;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  color: #1a5fb4 !important;
  text-decoration: none;
}

.ipod-dl-label {
  grid-column: 1;
  grid-row: 1;
  font-weight: 600;
  color: #111 !important;
}

.ipod-dl-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.62rem;
  line-height: 1.35;
  color: #555 !important;
}

.ipod-dl-save {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a5fb4 !important;
  white-space: nowrap;
}

.ipod-dl-item a:hover {
  background: #eef4fc;
}

.ipod-dl-empty {
  padding: 0.55rem;
  font-size: 0.75rem;
  color: #666 !important;
}

.ipod-info-scroll {
  padding: 0.45rem 0.55rem;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.68rem;
  line-height: 1.4;
  color: #222 !important;
  overflow-y: auto;
  max-height: 168px;
  white-space: pre-wrap;
}

/* iPod follows site dark mode */
body.dark-mode .ipod-screen-glass {
  background: linear-gradient(180deg, #1e1e22 0%, #141418 100%);
  color: #e8e8ec;
  color-scheme: dark;
  box-shadow: inset 0 0 0 1px #333;
}

body.dark-mode .ipod-screen-body,
body.dark-mode #nano-panel-now,
body.dark-mode #nano-panel-menu,
body.dark-mode #nano-panel-downloads,
body.dark-mode #nano-panel-info,
body.dark-mode #nano-panel-settings {
  background: #141418;
}

body.dark-mode .ipod-menu-item:not(.is-active) {
  color: #e4e4e8 !important;
  background: #141418 !important;
  border-bottom-color: #2a2a30;
}

body.dark-mode .ipod-menu-item:active:not(.is-active) {
  background: #242428 !important;
}

body.dark-mode .ipod-subhead {
  color: #d8d8dc !important;
  border-bottom-color: #333;
  background: #141418;
}

body.dark-mode .ipod-title-lg {
  color: #f0f0f4 !important;
}

body.dark-mode .ipod-artist,
body.dark-mode .ipod-time {
  color: rgba(255, 255, 255, 0.62) !important;
}

body.dark-mode .ipod-info-scroll {
  color: #c8c8cc !important;
}

body.dark-mode .ipod-info-chips .chip {
  filter: brightness(0.92);
}

body.dark-mode .ipod-dl-item a {
  color: #7eb8f0 !important;
}

body.dark-mode .ipod-dl-label {
  color: #e8e8ec !important;
}

body.dark-mode .ipod-dl-meta {
  color: #9a9aa4 !important;
}

body.dark-mode .ipod-dl-item.is-best {
  background: #1a2430;
}

body.dark-mode .ipod-dl-item.is-warn {
  background: #2a2218;
}

body.dark-mode .ipod-dl-item a:hover {
  background: #242830;
}

body.dark-mode .ipod-tbtn {
  background: linear-gradient(180deg, #3a3a40 0%, #28282e 100%);
  border-color: #444;
  color: #aaa;
}

body.dark-mode .ipod-soft-btn {
  background: linear-gradient(180deg, #3a3a40 0%, #28282e 100%);
  border-color: #48484e;
  color: #b0b0b8;
}

body.dark-mode .ipod-scrub {
  background: #3a3a42;
}

body.dark-mode .ipod-seek-fill {
  background: #7eb8f0;
}

body.dark-mode .ipod-title-bar {
  background: linear-gradient(180deg, #4a7aaa 0%, #355f88 45%, #284868 100%);
  border-bottom-color: #1a3048;
}

body.dark-mode .ipod-now-badges {
  color: rgba(255, 255, 255, 0.45);
}

/* Dark mode: nano-style dark Now Playing (like 5G reference) */
body.dark-mode .ipod-screen-glass.is-now-playing {
  background: #0a0a0a;
  box-shadow: inset 0 0 0 1px #222;
}

body.dark-mode .ipod-screen-glass.is-now-playing .ipod-title-bar {
  display: none;
}

body.dark-mode .ipod-screen-glass.is-now-playing .ipod-screen-body,
body.dark-mode .ipod-screen-glass.is-now-playing #nano-panel-now {
  background: #0a0a0a;
}

body.dark-mode .is-now-playing .ipod-cover-lg,
body.dark-mode .is-now-playing .ipod-cover-fallback.ipod-cover-lg {
  border-color: #333;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .is-now-playing .ipod-scrub {
  background: rgba(255, 255, 255, 0.22);
}

body.dark-mode .is-now-playing .ipod-seek-fill {
  background: #4a94e0;
}

body.dark-mode .is-now-playing .ipod-now-badges {
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 861px) {
  .player-dock {
    --player-col-offset: calc(
      max((100vw - 1320px) * 0.5, 0px) + var(--line) + min(280px, 30vw) + var(--line)
    );
    padding-left: var(--player-col-offset);
    padding-right: max(calc((100vw - 1320px) * 0.5 + var(--line)), var(--line));
    justify-content: flex-end;
  }

  .player-dock-inner {
    width: auto;
    max-width: none;
    margin: 0;
    margin-left: auto;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .player-ipod-assembly {
    margin-left: 0;
    margin-right: 0.65rem;
  }
}

@media (max-width: 860px) {
  .player-dock {
    padding-left: var(--line);
    padding-right: var(--line);
    justify-content: center;
  }

  .player-dock-inner {
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }

  .player-ipod-assembly {
    margin: 0 auto;
  }

  body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-nano-main {
    --ipod-w: min(210px, 54vw);
    --ipod-ui: calc(var(--ipod-w) / 252);
    width: var(--ipod-w);
    padding: 0.5rem 0.45rem 0.55rem;
  }

  body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-screen-glass {
    --ipod-screen-h: 228px;
    height: 228px;
    min-height: 228px;
    max-height: 228px;
    flex: 0 0 228px;
  }

  .ipod-wheel-gen5 {
    width: calc(var(--ipod-w) * 0.76);
    height: calc(var(--ipod-w) * 0.76);
  }

  .ipod-wheel-center {
    width: calc(var(--ipod-w) * 0.3);
    height: calc(var(--ipod-w) * 0.3);
  }

  .ipod-rocker {
    width: calc(12px * var(--ipod-ui));
    height: calc(24px * var(--ipod-ui));
    font-size: calc(0.65rem * var(--ipod-ui));
  }

  .ipod-side-controls {
    padding: 0 3px 0 0;
  }

  .player-ipod-assembly {
    filter: drop-shadow(0 8px 20px rgba(180, 0, 90, 0.28));
    max-width: 100%;
  }

  body.ipod-fullscreen .player-dock {
    bottom: 0;
    max-height: none;
    z-index: 300;
  }

  body.ipod-fullscreen .mobile-nav {
    display: none;
  }
}

@media (max-width: 420px) {
  body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-nano-main {
    --ipod-w: min(178px, 48vw);
  }

  body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-screen-glass {
    --ipod-screen-h: 196px;
    height: 196px;
    min-height: 196px;
    max-height: 196px;
    flex: 0 0 196px;
  }
}

/* Tablet / iPad — between phone and desktop */
@media (min-width: 600px) and (max-width: 1024px) {
  body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-nano-main {
    --ipod-w: min(236px, 32vw);
    --ipod-ui: calc(var(--ipod-w) / 252);
    width: var(--ipod-w);
  }

  body.player-nano:not(.ipod-fullscreen):not(.ipod-collapsed) .ipod-screen-glass {
    --ipod-screen-h: 260px;
    height: 260px;
    min-height: 260px;
    max-height: 260px;
    flex: 0 0 260px;
  }

  .player-dock {
    justify-content: flex-end;
  }

  .player-ipod-assembly {
    transform-origin: bottom center;
  }
}

.versions-drawer {
  position: absolute;
  right: calc(100% + 0.65rem);
  top: 0;
  width: 240px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
  transition:
    opacity 0.24s ease,
    transform 0.32s ease;
}

.versions-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.versions-drawer-inner {
  width: 240px;
  padding: 0.75rem 0.85rem 0.85rem;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
  background: var(--paper);
}

.versions-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.versions-drawer-copy {
  flex: 1;
  min-width: 0;
}

.versions-drawer-kicker {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.15rem;
}

.versions-drawer-title {
  font-family: var(--display);
  font-size: 0.82rem;
  line-height: 1.25;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.versions-drawer-close {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.55;
}

.versions-drawer-close:hover {
  opacity: 1;
}

.version-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.version-tree-node.is-root .version-tree-row {
  font-weight: 700;
}

.version-tree-node.is-child {
  position: relative;
  padding-left: 0.35rem;
}

.version-tree-node.is-child::before {
  content: "";
  position: absolute;
  left: 0.72rem;
  top: -0.08rem;
  bottom: 50%;
  width: 0.55rem;
  border-left: var(--thin) solid rgba(0, 0, 0, 0.18);
  border-bottom: var(--thin) solid rgba(0, 0, 0, 0.18);
}

.version-tree-node.is-child:last-child::after {
  content: "";
  position: absolute;
  left: 0.72rem;
  top: 0;
  bottom: 50%;
  border-left: var(--thin) solid rgba(0, 0, 0, 0.18);
}

.version-tree-row {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.4rem;
  border: var(--thin) solid transparent;
  background: transparent;
  transition: background 0.12s, border-color 0.12s;
}

.version-tree-row:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.version-tree-node.is-active > .version-tree-row {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.version-tree-node.is-active > .version-tree-row .version-tree-note {
  opacity: 0.72;
}

.version-tree-branch {
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.35;
  opacity: 0.55;
  text-align: center;
}

.version-tree-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.version-tree-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1.3;
}

.version-tree-note {
  font-family: var(--mono);
  font-size: 0.52rem;
  opacity: 0.62;
  line-height: 1.25;
}

.version-tree-row:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.player {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.9rem 1.1rem 1rem;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
}

.player-layout {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 1.1rem;
  align-items: start;
}

.player-main-col {
  min-width: 0;
  overflow: hidden;
}

.player-cover-wrap {
  width: 148px;
  height: 148px;
  overflow: hidden;
  background: var(--paper);
  border: var(--thin) solid var(--ink);
}

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

.player-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: repeating-linear-gradient(
    -45deg,
    var(--paper),
    var(--paper) 6px,
    var(--bg) 6px,
    var(--bg) 12px
  );
}

.player-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
  min-height: 4.5rem;
}

.player-head .player-meta {
  flex: 1;
  min-width: 0;
}

.player-head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.1rem;
}

.btn-quick-dl {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: var(--thin) solid var(--ink);
  background: var(--paper);
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
}

.btn-quick-dl:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-nano-min {
  width: 28px;
  height: 28px;
  border: var(--thin) solid var(--ink);
  background: linear-gradient(145deg, var(--pink-soft), var(--pink-deep));
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-nano-min:hover {
  filter: brightness(1.08);
}

.player-credits {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--muted);
  margin-top: 0.25rem;
  line-height: 1.35;
  max-height: 2.7em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-link {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}

.player-link:hover {
  color: var(--ink);
  border-color: var(--ink);
  opacity: 0.75;
}

.player-video-wrap {
  margin-bottom: 0.55rem;
  border: var(--thin) solid var(--ink);
  background: #000;
  max-width: 100%;
}

.player-video {
  display: block;
  width: 100%;
  max-height: 220px;
  background: #000;
}

body.player-has-video {
  --player-h: 420px;
}

.player-downloads {
  margin-bottom: 0.45rem;
  padding: 0.45rem 0.55rem;
  border: var(--thin) solid var(--ink);
  background: var(--paper);
}

.player-downloads-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.player-downloads-head .player-detail-label {
  margin-bottom: 0;
}

.btn-dl-toggle {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: var(--thin) solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 0.15rem 0.4rem;
  cursor: pointer;
}

.btn-dl-toggle:hover,
.btn-dl-toggle[aria-expanded="true"] {
  background: var(--ink);
  color: var(--paper);
}

.player-downloads .download-list {
  max-height: 5.5rem;
  overflow-y: auto;
}

.player-downloads.is-expanded .download-list {
  max-height: 10rem;
}

.player-detail {
  margin-bottom: 0.55rem;
  padding: 0.45rem 0.65rem;
  border: var(--thin) solid var(--ink);
  background: var(--bg);
}

.player-desc-details {
  margin: 0;
}

.player-desc-details > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.player-desc-details > summary::-webkit-details-marker {
  display: none;
}

.player-desc-details > summary::before {
  content: "▸ ";
  font-size: 0.7rem;
}

.player-desc-details[open] > summary::before {
  content: "▾ ";
}

.player-desc-details .player-description {
  margin-top: 0.35rem;
  max-height: 8rem;
  overflow-y: auto;
}

.player-detail-label {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.35rem;
}

.player-description {
  font-family: var(--serif);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.player-media-links {
  margin-top: 0.5rem;
  padding-left: 1rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1.5;
}

.player-media-links a {
  color: var(--ink);
  text-decoration: underline;
  word-break: break-all;
}

.download-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.download-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  padding: 0.35rem 0.45rem;
  border: var(--thin) solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1.35;
}

.download-item.is-warn {
  border-color: #a63;
  background: #fff8f0;
}

.download-item.is-best {
  border-width: 2px;
}

.download-item-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.download-item-quality {
  flex: 1 1 12rem;
  color: var(--muted);
}

.download-item-size {
  color: var(--muted);
  white-space: nowrap;
}

a.download-btn {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border: var(--thin) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

a.download-btn:hover {
  background: var(--paper);
  color: var(--ink);
}

.media-photo-wrap {
  width: 100%;
  border-top: var(--thin) solid var(--ink);
  border-bottom: var(--thin) solid var(--ink);
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  max-height: 320px;
}

.media-photo {
  display: block;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.media-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-top: var(--thin) solid var(--ink);
  border-bottom: var(--thin) solid var(--ink);
  background: #000;
}

.media-video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.media-video-lazy .media-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  border: var(--thin) solid var(--ink);
  border-radius: 50%;
  background: rgba(255, 182, 214, 0.92);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 0.15rem;
}

.media-video-lazy .media-video-play:hover {
  background: var(--pink);
}

.media-video-lazy .media-video-play[hidden] {
  display: none;
}

.media-quality-pill {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  padding: 0.12rem 0.35rem;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #eee;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 2px;
  pointer-events: none;
}

.media-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.42rem 0.55rem 0.3rem;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #666);
}

.media-cat-chip {
  color: var(--ink);
  font-weight: 600;
}

.media-date-chip {
  margin-left: auto;
}

.media-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.55rem 0.55rem;
  flex: 1;
}

.media-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.media-foot-btn {
  font: inherit;
  font-size: 0.72rem;
  padding: 0.22rem 0.45rem;
  border: var(--thin) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.media-foot-btn:hover {
  background: var(--bg);
}

.media-foot-link {
  font-size: 0.68rem;
  color: var(--muted, #666);
  text-decoration: underline;
  margin-left: auto;
}

.media-card.is-archived {
  border-color: #2d6db5;
}

.media-card.is-archived .media-cat-chip {
  color: #2d6db5;
}

.media-pending-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(
    -45deg,
    #1a1a1a,
    #1a1a1a 8px,
    #222 8px,
    #222 16px
  );
  border: var(--thin) solid var(--ink);
  color: #bbb;
  text-align: center;
  padding: 0.75rem;
}

.media-pending-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.media-pending-kind {
  font-size: 0.68rem;
  opacity: 0.75;
}

.media-source-quiet {
  font-size: 0.68rem;
  color: var(--muted, #666);
  text-decoration: underline;
}

.media-source-link {
  font-size: 0.78rem;
}

.media-dl-btn {
  font-weight: 600;
}

.media-local-badge {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #666);
}

.player-lyrics-wrap {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
}

.player-lyrics-wrap summary {
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}

.player-lyrics {
  font-family: var(--serif);
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: pre-wrap;
  color: var(--muted);
}

.btn-transport {
  width: 48px;
  height: 48px;
  border: var(--thin) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

.btn-transport:hover {
  background: var(--paper);
  color: var(--ink);
}

.transport-icon {
  width: 26px;
  height: 26px;
  display: block;
}

.btn-transport[data-state="play"] .icon-pause {
  display: none;
}

.btn-transport[data-state="pause"] .icon-play {
  display: none;
}

.btn-close-plain {
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 0 0.25rem;
  flex-shrink: 0;
}

.btn-close-plain:hover {
  opacity: 0.55;
}

.player-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.player-chips .chip {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.chip-status.chip-official {
  background: var(--ink);
  color: var(--paper);
}

.chip-status.chip-posthumous {
  background: #3a2a4a;
  color: #e8d4ff;
  border: 1px solid #6b4a8a;
}

.chip-status.chip-leaked {
  border-color: #8b2020;
  color: #8b2020;
}

.chip-status.chip-fan_reupload,
.chip-status.chip-fan_mirror,
.chip-status.chip-sourced {
  border-color: var(--muted);
}

.chip-status.chip-snippet {
  border-color: #4a5568;
  color: #4a5568;
}

.chip-status.chip-unofficial_edit {
  border-color: #6a4a20;
  color: #6a4a20;
  border-style: dashed;
}

.chip-source {
  border-style: dotted;
  color: var(--muted);
}

.chip-cover {
  font-size: 0.72rem;
  color: var(--muted);
}

.chip-source-date {
  font-size: 0.72rem;
  color: var(--muted);
  border-style: dotted;
}

.chip-date-unknown {
  color: var(--muted);
  font-style: italic;
}

.era-timeline {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.section-label-muted {
  margin-top: 1.25rem;
  color: var(--muted);
  font-style: italic;
}

.chip-status.chip-local_file {
  border-style: dashed;
}

.chip-status.chip-parody {
  border-color: #6a4a8a;
  color: #6a4a8a;
  border-style: dashed;
}

.chip-status.chip-spliced {
  border-color: #2a5a8a;
  color: #2a5a8a;
  font-style: italic;
}

.chip-status.chip-ok,
.chip.ok {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.chip-status.chip-never,
.chip-status.chip-unreleased {
  border-color: var(--ink);
  color: var(--ink);
}

.chip-status.chip-privated,
.chip-status.chip-lost {
  border-color: #8b5a20;
  color: #8b5a20;
}

.chip-status.chip-deleted {
  border-color: #8b2020;
  color: #8b2020;
  text-decoration: line-through;
}

.chip-status.chip-snippet,
.chip-status.chip-external {
  border-style: dashed;
  color: var(--muted);
}

.chip-status.chip-priority {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.wanted-list,
.snippets-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.wanted-card,
.snippet-card {
  padding: 1rem 1rem 0.85rem;
  background: var(--paper);
}

.wanted-title {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.wanted-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.wanted-era {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wanted-notes {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 0.65rem;
  max-width: 52rem;
}

.wanted-actions .track-row {
  margin-top: 0.35rem;
}

.snippet-link-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0.5rem 0 0.25rem 2.5rem;
}

.notes-link {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.62rem;
  padding: 0.5rem 0.45rem;
  margin: 0.5rem 0 0.75rem;
  background: var(--bg);
  border: var(--thin) solid var(--ink);
}

.notes-link:hover {
  background: var(--ink);
  color: var(--paper);
}

.notes-line {
  margin-top: 0.35rem;
}

.about-view .about-header h1 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

.about-dates {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.about-tagline {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 42rem;
}

.about-aka {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 0.75rem;
  line-height: 1.5;
}

.about-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem;
  margin: 1rem 0;
  background: var(--paper);
}

.about-photo {
  margin: 0;
}

.about-photo img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--thin) solid var(--ink);
  background: var(--bg);
}

.about-photo figcaption {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  margin-top: 0.45rem;
  color: var(--ink);
}

.about-photo-credit {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.about-section {
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
  background: var(--paper);
}

.about-section h2 {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}

.about-section p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 46rem;
}

.about-section p + p {
  margin-top: 0.65rem;
}

.about-links {
  padding: 1rem 1.1rem;
  margin-top: 0.5rem;
  background: var(--paper);
}

.about-links h2 {
  font-family: var(--display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.about-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.about-links a {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about-links a:hover {
  color: var(--muted);
}

#era-sidebar-label[hidden],
.era-nav[hidden] {
  display: none;
}

.track-group.track-group-open {
  border: var(--thin) solid rgba(0, 0, 0, 0.08);
}

.version-tree-group .track-row.is-alt {
  position: relative;
  padding-left: 0.15rem;
}

.version-tree-group .track-row.is-alt::before {
  content: "";
  position: absolute;
  left: 1.45rem;
  top: -0.12rem;
  bottom: 50%;
  width: 0.55rem;
  border-left: var(--thin) solid rgba(0, 0, 0, 0.16);
  border-bottom: var(--thin) solid rgba(0, 0, 0, 0.16);
}

.version-tree-group .track-row.is-alt .track-num.version-tree-branch {
  font-family: var(--mono);
  opacity: 0.55;
}

.version-tree-group .track-row:not(.is-alt) .track-title {
  font-weight: 600;
}

.track-group.track-group-open .track-row.is-alt {
  background: rgba(0, 0, 0, 0.03);
}

.track-group.track-group-open .track-row.is-alt .track-variant {
  opacity: 0.85;
  font-weight: 600;
}

.server-warn {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: #fff3cd;
  border: var(--thin) solid #8b6914;
  color: #5a4208;
}

.alt-user {
  opacity: 0.65;
}

.player-transport {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  overflow: hidden;
  flex-wrap: wrap;
}

.player-transport-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.btn-transport-aux {
  width: 32px;
  height: 32px;
  border: var(--thin) solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.btn-transport-aux svg {
  width: 18px;
  height: 18px;
}

.btn-transport-aux:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-transport-aux[data-on="true"],
.btn-transport-aux[data-mode="all"],
.btn-transport-aux[data-mode="one"] {
  background: var(--ink);
  color: var(--paper);
}

.btn-transport-aux[data-mode="one"] .repeat-off {
  display: none;
}

.btn-transport-aux[data-mode="off"] .repeat-one,
.btn-transport-aux[data-mode="all"] .repeat-one {
  display: none;
}

.btn-transport-aux .repeat-icon {
  width: 18px;
  height: 18px;
}

.player-transport .player-scrub {
  flex: 1;
  min-width: 10rem;
}

.player-volume {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  width: min(180px, 28vw);
  min-width: 120px;
}

.btn-vol {
  width: 32px;
  height: 32px;
  border: var(--thin) solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.btn-vol:hover {
  background: var(--ink);
  color: var(--paper);
}

.vol-icon {
  width: 18px;
  height: 18px;
}

.btn-vol[data-muted="true"] .vol-waves {
  display: none;
}

.btn-vol[data-muted="false"] .vol-x {
  display: none;
}

input.volume {
  flex: 1;
  width: 100%;
  min-width: 64px;
  max-width: none;
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg);
  border: var(--thin) solid var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}

input.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--ink);
  border: none;
  border-radius: 0;
  cursor: pointer;
}

input.volume::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--ink);
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.player-timed {
  margin: 0.5rem 0;
  padding: 0.5rem 0.6rem;
  border: var(--thin) solid var(--ink);
  background: var(--bg);
  max-height: 120px;
  overflow-y: auto;
}

.timed-label {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.timed-lines {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.timed-line {
  font-family: var(--serif);
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 0.2rem 0.35rem;
  color: var(--muted);
  transition: color 0.12s, background 0.12s;
}

.timed-line.is-active {
  color: var(--ink);
  background: var(--paper);
  font-weight: 600;
}

.timed-line time {
  font-family: var(--mono);
  font-size: 0.58rem;
  margin-right: 0.45rem;
  opacity: 0.65;
}

.player-title {
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-sub {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.player-sub.player-error {
  color: #8b2020;
  text-transform: none;
}

.player-scrub {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 0.65rem;
  align-items: center;
}

.player-time {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-align: center;
}

.seek-wrap {
  position: relative;
  height: 8px;
  background: rgba(0, 0, 0, 0.12);
  border: var(--thin) solid var(--ink);
}

.seek-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--ink);
  pointer-events: none;
  transition: width 0.05s linear;
}

.seek {
  position: absolute;
  inset: -8px 0;
  width: 100%;
  height: calc(100% + 16px);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Default (no pink): strict monochrome — semantic chips stay gray/black */
body:not(.pink-mode) .chip-status.chip-posthumous,
body:not(.pink-mode) .chip-status.chip-leaked,
body:not(.pink-mode) .chip-status.chip-unofficial_edit,
body:not(.pink-mode) .chip-status.chip-parody,
body:not(.pink-mode) .chip-status.chip-spliced,
body:not(.pink-mode) .chip-status.chip-privated,
body:not(.pink-mode) .chip-status.chip-lost,
body:not(.pink-mode) .chip-status.chip-deleted,
body:not(.pink-mode) .chip-status.chip-snippet {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--muted);
  border-style: solid;
  text-decoration: none;
  font-style: normal;
}

body:not(.pink-mode) .chip-status.chip-deleted {
  text-decoration: line-through;
  opacity: 0.65;
}

body:not(.pink-mode) .chip-status.chip-unofficial_edit,
body:not(.pink-mode) .chip-status.chip-snippet,
body:not(.pink-mode) .chip-status.chip-parody {
  border-style: dashed;
}

body.pink-mode .chip-status.chip-ok,
body.pink-mode .chip.ok {
  background: var(--pink-deep);
  border-color: var(--pink-deep);
}

/* ——— Pink mode (Wear pink) ——— */
body.pink-mode {
  --bg: #f7eef2;
  --paper: #fff9fb;
  --ink: #1a0a10;
  --accent: var(--pink-deep);
  --L-color: var(--pink-deep);
}

body.pink-mode .btn-transport,
body.pink-mode .btn-vol,
body.pink-mode .view-tab.active,
body.pink-mode .mobile-nav-btn.active,
body.pink-mode .era-tab.active,
body.pink-mode .quick-jump:hover,
body.pink-mode .quick-jump:focus-visible {
  background: var(--pink-deep);
  border-color: var(--pink-deep);
  color: var(--paper);
}

body.pink-mode .btn-ghost:hover,
body.pink-mode .btn-ghost[aria-pressed="true"] {
  border-color: var(--pink-deep);
  color: var(--pink-deep);
}

body.pink-mode .track-row:hover,
body.pink-mode .track-row.is-playing {
  background: var(--pink-deep);
  color: var(--paper);
}

body.pink-mode .seek-fill,
body.pink-mode input.volume::-webkit-slider-thumb,
body.pink-mode input.volume::-moz-range-thumb,
body.pink-mode input.seek-fill {
  background: var(--pink-deep);
}

body.pink-mode .seek-wrap,
body.pink-mode input.volume,
body.pink-mode .chip-status,
body.pink-mode .chip-date,
body.pink-mode .chip-cover,
body.pink-mode .chip-source,
body.pink-mode .library-search,
body.pink-mode .library-select {
  border-color: var(--pink-deep);
}

body.pink-mode .player-link,
body.pink-mode a:hover {
  color: var(--pink-deep);
}

body.pink-mode .memorial-line {
  border-left-color: var(--pink-deep);
}

body.pink-mode .section-label {
  color: var(--pink-deep);
}

body.pink-mode .sort-toggle-btn.active {
  background: var(--pink-deep);
  border-color: var(--pink-deep);
  color: var(--paper);
}

body.pink-mode .chip-status.chip-never,
body.pink-mode .chip-status.chip-unreleased {
  border-color: var(--pink-deep);
  color: var(--pink-deep);
}

body.pink-mode .chip-status.chip-priority {
  background: var(--pink-deep);
  color: var(--paper);
  border-color: var(--pink-deep);
}

body.pink-mode .player-link:hover {
  color: var(--pink-deep);
  border-color: var(--pink-deep);
  opacity: 1;
}

body.pink-mode .btn-quick-dl:hover {
  background: var(--pink-deep);
  border-color: var(--pink-deep);
  color: var(--paper);
}

body.pink-mode .notes-link:hover {
  background: var(--pink-deep);
  color: var(--paper);
}

body.pink-mode .about-links a:hover {
  color: var(--pink-deep);
}

/* ——— Dark mode ——— */
body.dark-mode {
  --bg: #0a0a0a;
  --paper: #111111;
  --ink: #ffffff;
  --muted: #a3a3a3;
  --L-color: var(--ink);
}

body.dark-mode .library-tools {
  background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .track-row.is-playing,
body.dark-mode .track-row:hover {
  background: var(--ink);
  color: var(--paper);
}

body.dark-mode .player-dock,
body.dark-mode .masthead,
body.dark-mode .mobile-nav,
body.dark-mode .sidebar {
  border-color: var(--ink);
}

body.dark-mode .search-input,
body.dark-mode .library-tools input,
body.dark-mode .library-tools select {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

body.dark-mode .chip-status,
body.dark-mode .chip-date,
body.dark-mode .chip-cover,
body.dark-mode .chip-source {
  border-color: var(--muted);
}

body.dark-mode .sidebar-backdrop {
  background: rgba(0, 0, 0, 0.65);
}

body.dark-mode.pink-mode {
  --bg: #12080c;
  --paper: #1a0e12;
  --ink: var(--pink-soft);
  --muted: #b8889a;
  --accent: var(--pink-deep);
  --L-color: var(--pink-deep);
}

body.dark-mode.pink-mode .track-row.is-playing,
body.dark-mode.pink-mode .track-row:hover {
  background: var(--pink-deep);
  color: var(--paper);
}

body.dark-mode.pink-mode .view-tab.active,
body.dark-mode.pink-mode .mobile-nav-btn.active,
body.dark-mode.pink-mode .era-tab.active,
body.dark-mode.pink-mode .btn-transport,
body.dark-mode.pink-mode .btn-vol,
body.dark-mode.pink-mode .sort-toggle-btn.active {
  background: var(--pink-deep);
  border-color: var(--pink-deep);
  color: var(--paper);
}

body.dark-mode.pink-mode .l-corners,
body.dark-mode.pink-mode .panel,
body.dark-mode.pink-mode .player-dock,
body.dark-mode.pink-mode .sidebar,
body.dark-mode.pink-mode .mobile-nav {
  --L-color: var(--pink-deep);
}

body.dark-mode.pink-mode .player-title,
body.dark-mode.pink-mode .brand-word,
body.dark-mode.pink-mode .era-header h1,
body.dark-mode.pink-mode .track-title,
body.dark-mode.pink-mode .player-time,
body.dark-mode.pink-mode .stat-line {
  color: var(--pink-soft);
}

body.dark-mode.pink-mode .chip-status,
body.dark-mode.pink-mode .chip-date,
body.dark-mode.pink-mode .chip-cover,
body.dark-mode.pink-mode .chip-source,
body.dark-mode.pink-mode .library-search,
body.dark-mode.pink-mode .library-select,
body.dark-mode.pink-mode input.volume,
body.dark-mode.pink-mode .seek-wrap {
  border-color: var(--pink-deep);
}

body.dark-mode.pink-mode .seek-fill,
body.dark-mode.pink-mode input.volume::-webkit-slider-thumb,
body.dark-mode.pink-mode input.volume::-moz-range-thumb {
  background: var(--pink-deep);
}

/* ——— Mobile nav (hidden desktop) ——— */
.mobile-nav,
.mobile-menu-btn,
.sidebar-backdrop {
  display: none;
}

.mobile-nav {
  position: fixed;
  left: var(--line);
  right: var(--line);
  bottom: var(--line);
  z-index: 90;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 0.3rem;
  background: var(--paper);
  border: var(--thin) solid var(--ink);
}

.mobile-nav-btn {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 0.2rem;
  min-height: 44px;
  border: var(--thin) solid transparent;
  background: transparent;
  color: var(--ink);
}

.mobile-nav-btn.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(0, 0, 0, 0.45);
}

@media (max-width: 860px) {
  :root {
    --mobile-nav-h: 3.25rem;
    --mobile-dock-gap: 8px;
  }

  .masthead-nav {
    display: none;
  }

  .app {
    padding-bottom: calc(var(--mobile-nav-h) + var(--mobile-dock-gap) + var(--line) * 2);
  }

  body.player-open .app {
    padding-bottom: calc(var(--player-offset, 12rem) + var(--mobile-nav-h) + var(--mobile-dock-gap) + var(--line) * 2);
  }

  .mobile-nav {
    z-index: 240;
    bottom: var(--line);
  }

  .player-dock {
    z-index: 280;
    bottom: calc(var(--mobile-nav-h) + var(--mobile-dock-gap) + var(--line) * 2);
    padding-bottom: 0;
    max-height: calc(100dvh - var(--mobile-nav-h) - var(--mobile-dock-gap) - var(--line) * 4 - 2.5rem);
    overflow: visible;
  }

  body.ipod-collapsed .player-dock {
    bottom: calc(var(--mobile-nav-h) + var(--mobile-dock-gap) + var(--line) * 2);
    background: transparent;
    pointer-events: none;
    max-height: none;
  }

  body.ipod-collapsed .player-dock-inner {
    pointer-events: none;
  }

  body.ipod-collapsed .ipod-dock-toggle {
    position: fixed;
    right: calc(var(--line) + 4px);
    left: auto;
    bottom: calc(var(--mobile-nav-h) + var(--mobile-dock-gap) + var(--line) * 2);
    z-index: 300;
    margin: 0;
    min-height: 48px;
    min-width: 5.5rem;
    padding: 0.55rem 1rem;
    pointer-events: auto;
    box-shadow: 0 -8px 24px rgba(180, 0, 90, 0.45);
  }

  body:not(.ipod-collapsed) .ipod-dock-toggle {
    position: relative;
    z-index: 2;
    margin-bottom: 0.25rem;
  }

  .mobile-nav,
  .mobile-menu-btn {
    display: grid;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 95;
    width: min(320px, 88vw);
    max-height: none;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
  }

  body.player-open .sidebar {
    max-height: none;
  }

  .masthead-layout {
    grid-template-columns: 1fr;
  }

  .masthead-actions {
    text-align: left;
    max-width: none;
  }

  .masthead-toolbar {
    justify-content: flex-start;
  }

  .auth-session {
    justify-content: flex-start;
  }

  .brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .player-dock-inner {
    max-width: 1320px;
  }

  .versions-drawer {
    position: static;
    right: auto;
    width: 100%;
    margin-bottom: 0.65rem;
    transform: translateY(10px);
  }

  .versions-drawer.is-open {
    transform: translateY(0);
  }

  .versions-drawer-inner {
    width: 100%;
  }

  .player-layout {
    grid-template-columns: 1fr;
  }

  .player-cover-wrap {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1;
  }

  .player-transport {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .player-volume {
    width: 100%;
    min-width: 0;
    order: 3;
    padding-top: 0.15rem;
  }

  input.volume {
    min-width: 0;
    height: 10px;
  }

  input.volume::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }

  .player-scrub {
    order: 2;
    width: 100%;
  }

  .btn-transport {
    order: 1;
  }

  .content {
    min-height: 50vh;
  }

  .view-nav {
    display: grid;
  }

  .sidebar-nav-sticky {
    display: block;
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 0 0.35rem;
    padding: 0 0 0.5rem;
    border-bottom: var(--thin) solid rgba(0, 0, 0, 0.12);
  }
}

/* Media archive */
.media-view .era-header p {
  max-width: 52rem;
}

.media-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 1.25rem;
}

.media-filter-btn {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  border: var(--thin) solid var(--ink);
  background: var(--paper);
  cursor: pointer;
}

.media-filter-btn.active {
  background: var(--ink);
  color: var(--paper);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}

.media-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  border: var(--thin) solid var(--ink);
}

.media-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--thin) solid var(--ink);
  background: #111;
}

.media-kind-badge {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #666);
}

.media-title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.25;
}

.media-caption {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted, #666);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.media-meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted, #666);
}

.media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}

.media-empty {
  margin: 1rem 0;
  color: var(--muted, #666);
}

.media-yt-link {
  position: relative;
  display: block;
  border: var(--thin) solid var(--ink);
}

.media-yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1rem;
  pointer-events: none;
}

.media-channel {
  font-size: 0.72rem;
  color: var(--muted, #666);
  align-self: center;
}

.media-thumb-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: #111;
  color: #ccc;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ——— Settings page ——— */
.settings-view .settings-header p {
  color: var(--muted);
}

.settings-block {
  padding: 1rem 1.1rem;
  margin-top: 0.85rem;
  background: var(--paper);
}

.settings-block h2 {
  font-family: var(--display);
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.settings-hint {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.65rem;
}

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.65rem;
  border: var(--thin) solid var(--ink);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}

.theme-card.is-active {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.theme-card-swatch {
  width: 100%;
  height: 2.4rem;
  border: var(--thin) solid rgba(0, 0, 0, 0.15);
}

.theme-card-default .theme-card-swatch {
  background: linear-gradient(135deg, #f0f0f0 50%, #fff 50%);
}

.theme-card-pink .theme-card-swatch {
  background: linear-gradient(135deg, #f7eef2, #e8a4bc);
}

.theme-card-dark .theme-card-swatch {
  background: linear-gradient(135deg, #1a1a1e, #2e2e34);
}

.theme-card-aero .theme-card-swatch {
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.95) 0%, transparent 38%),
    linear-gradient(180deg, #5eb0ff 0%, #b8e2ff 42%, #8fce5a 78%, #4a9e2d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.theme-card-label {
  font-family: var(--display);
  font-size: 0.95rem;
}

.theme-card-note {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

/* ——— Frutiger Aero theme (XP / early-2000s desktop) ——— */
body.aero-mode {
  --bg: #3a8fd9;
  --paper: #f5f9ff;
  --ink: #0b2f55;
  --muted: #3d6286;
  --accent: #0054e3;
  --pink-deep: #d4789a;
  --pink-soft: #e8a4bc;
  --L-color: rgba(0, 84, 227, 0.35);
  --L-size: 0px;
  --line: 1px;
  --thin: 1px;
  --radius: 6px;
  --mono: Tahoma, "MS Sans Serif", Verdana, Arial, sans-serif;
  --serif: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
  --display: Tahoma, Verdana, Arial, sans-serif;
  background-color: #3a8fd9;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.55) 0%, transparent 8%),
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.45) 0%, transparent 10%),
    radial-gradient(circle at 70% 8%, rgba(255, 255, 255, 0.35) 0%, transparent 6%),
    radial-gradient(ellipse 130% 55% at 50% 0%, #8ec8ff 0%, #5aa8ef 38%, transparent 72%),
    linear-gradient(180deg, #4da3e8 0%, #6eb8f2 34%, #9ed0f7 52%, #8fce5a 76%, #5cab3c 88%, #3f8f2d 100%);
  background-attachment: fixed;
  font-family: var(--serif);
  font-size: 11px;
}

body.aero-mode .l-corners {
  background-image: none;
  border-radius: var(--radius);
}

body.aero-mode .panel {
  border: 1px solid #3a7dbd;
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 2px 0 rgba(255, 255, 255, 0.35),
    0 6px 14px rgba(0, 48, 120, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 52%, #dceaf9 100%);
}

body.aero-mode .view-tab,
body.aero-mode .era-tab,
body.aero-mode .btn,
body.aero-mode .library-search,
body.aero-mode .library-select,
body.aero-mode .theme-card,
body.aero-mode .settings-block {
  border-radius: 4px;
  font-family: var(--serif);
}

body.aero-mode .view-tab.active,
body.aero-mode .era-tab.active,
body.aero-mode .mobile-nav-btn.active,
body.aero-mode .sort-toggle-btn.active {
  background: linear-gradient(180deg, #ffffff 0%, #d8ebff 42%, #9ecfff 52%, #3d8fd8 54%, #1f6fc4 100%);
  border-color: #0a4a94;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 32, 96, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

body.aero-mode .view-tab,
body.aero-mode .era-tab,
body.aero-mode .btn-ghost,
body.aero-mode .sort-toggle-btn {
  background: linear-gradient(180deg, #ffffff 0%, #f0f6ff 48%, #d5e7fa 100%);
  border-color: #7aa8d8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.aero-mode .track-row:hover,
body.aero-mode .track-row.is-playing {
  background: linear-gradient(90deg, rgba(0, 84, 227, 0.12), rgba(142, 200, 255, 0.35));
  color: var(--ink);
}

body.aero-mode .btn-ghost:hover,
body.aero-mode .btn-ghost[aria-pressed="true"] {
  border-color: #0054e3;
  color: #003da8;
  background: linear-gradient(180deg, #fff 0%, #e8f3ff 100%);
}

body.aero-mode .brand-word,
body.aero-mode .era-header h1,
body.aero-mode .player-title {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  letter-spacing: 0;
}

body.aero-mode .ipod-nano-main {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 12px 28px rgba(0, 64, 140, 0.35);
}

/* ——— Discord auth & leaderboard ——— */
.auth-bar {
  display: flex;
  align-items: center;
  min-width: 0;
}

.auth-session {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.auth-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.auth-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.auth-actions .btn,
.auth-login-btn {
  margin-top: 0;
}

.auth-avatar {
  border-radius: 50%;
  border: var(--thin) solid var(--ink);
  flex-shrink: 0;
}

.auth-name {
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9rem;
}

.auth-plays {
  font-family: var(--mono);
  font-size: 0.58rem;
  opacity: 0.75;
  white-space: nowrap;
}

.auth-role {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.1rem 0.3rem;
  border: var(--thin) solid var(--ink);
}

.auth-role-owner {
  background: #ffe8f0;
}

.auth-role-admin {
  background: #e8f4ff;
}

.auth-offline {
  font-size: 0.65rem;
  opacity: 0.65;
}

.login-gate {
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border: var(--thin) solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.login-gate p {
  margin: 0;
  flex: 1 1 12rem;
}

.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-bottom: var(--thin) solid var(--ink);
}

.lb-rank {
  font-family: var(--mono);
  font-size: 0.75rem;
  min-width: 2rem;
}

.lb-avatar {
  border-radius: 50%;
  border: var(--thin) solid var(--ink);
}

.lb-name {
  flex: 1;
  font-weight: 600;
}

.lb-count {
  font-family: var(--mono);
  font-size: 0.72rem;
}

.admin-form label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
}

.admin-textarea {
  min-height: 4rem;
  resize: vertical;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.skel-toast {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  z-index: 9999;
  padding: 0.5rem 0.85rem;
  background: var(--ink);
  color: var(--paper, #fff);
  font-size: 0.75rem;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.skel-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.admin-tab[hidden] {
  display: none !important;
}

.timeline-intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.timeline-intro-row h1 {
  margin: 0;
}

.library-add-btn {
  flex-shrink: 0;
  min-width: 2rem;
  padding: 0.35rem 0.55rem;
  font-size: 1rem;
  line-height: 1;
}

.skel-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

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

body.skel-modal-open {
  overflow: hidden;
}

.skel-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.skel-modal-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(90dvh, 720px);
  overflow-y: auto;
  padding: 1rem 1.1rem 1.25rem;
}

.track-editor-panel {
  width: min(640px, 100%);
  max-height: min(92dvh, 820px);
}

.track-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.5rem;
}

.track-editor-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin: 0.5rem 0;
}

.track-editor-preview-heading {
  margin: 0 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.track-preview-cover-wrap {
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--thin) solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
  margin-bottom: 0.4rem;
}

.track-preview-cover {
  max-width: 100%;
  max-height: 7rem;
  object-fit: contain;
}

.track-preview-audio {
  width: 100%;
  margin-bottom: 0.4rem;
}

.track-file-label {
  font-size: 0.68rem;
}

@media (max-width: 560px) {
  .track-editor-grid,
  .track-editor-media {
    grid-template-columns: 1fr;
  }
}

.skel-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.skel-modal-title {
  margin: 0 2rem 0.75rem 0;
  font-family: var(--display);
  font-size: 1.1rem;
}

.tribute-list-wrap {
  padding: 1rem;
  margin-top: 1rem;
}

.tribute-list-heading {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tribute-card,
.tribute-pending-card {
  padding: 0.85rem 0;
  border-bottom: var(--thin) solid var(--ink);
}

.tribute-card:last-child,
.tribute-pending-card:last-child {
  border-bottom: none;
}

.tribute-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.tribute-avatar {
  border-radius: 50%;
  border: var(--thin) solid var(--ink);
}

.tribute-author {
  font-weight: 600;
  font-size: 0.78rem;
}

.tribute-date {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.62rem;
  opacity: 0.65;
}

.tribute-body {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.tribute-image {
  display: block;
  max-width: min(100%, 420px);
  margin-top: 0.65rem;
  border: var(--thin) solid var(--ink);
}

.tribute-mod-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.tribute-mine-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tribute-mine-item {
  font-size: 0.72rem;
  padding: 0.35rem 0;
  border-bottom: var(--thin) solid var(--ink);
}

.tribute-mine-status {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.tribute-status-pending .tribute-mine-status {
  color: #a06000;
}

.tribute-status-approved .tribute-mine-status {
  color: #1a6b2e;
}

.tribute-status-rejected .tribute-mine-status {
  color: #8b1a1a;
}

.tribute-compose,
.tribute-pending,
#tribute-mine section {
  margin-bottom: 1rem;
}