:root {
  --bg: #171310;
  --bg-raised: #1f1a15;
  --card: #241e18;
  --line: #3a3128;
  --ink: #f2ead9;
  --ink-dim: #b8ab94;
  --ink-faint: #85786500;
  --brass: #c9a227;
  --brass-bright: #e6c860;
  --tape-red: #b8483a;
  --ok: #7fae6a;
  --radius: 14px;
  --serif: 'Fraunces', serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  /* Content width scales with the viewport instead of stopping at a single
     fixed breakpoint — mostly-full-width on a phone, noticeably wider on an
     actual desktop monitor instead of sitting in a narrow centred column. */
  --content-max-width: 1600px;
  --track-single-max-width: 1100px;
  /* Current release codename colour — see CHANGELOG.md for the naming
     scheme and the fixed 10-colour rotation. Update this one value (and
     the badge's title attribute in each HTML page) when you cut a new
     minor release; bump the dessert name in CHANGELOG.md on a major one. */
  --release-color: #4f46e5; /* v4.71.1 — Indigo Donut */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, #241d15 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
}

a { color: inherit; }

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

.head-inner {
  max-width: min(94vw, var(--content-max-width));
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

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

.brand-mark {
  display: inline-flex;
  gap: 4px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.reel {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--brass);
  position: relative;
}
.reel::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--brass);
}

.brand-text h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0;
  letter-spacing: 0.01em;
}
.brand-text p {
  margin: 2px 0 0;
  color: var(--ink-dim);
  font-size: 0.85rem;
  font-family: var(--mono);
}

.add-form {
  display: flex;
  gap: 8px;
}
.add-form input {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 0.85rem;
  width: 280px;
  max-width: 50vw;
}
.add-form input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.add-form button {
  background: var(--brass);
  color: #201804;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.add-form button:hover { background: var(--brass-bright); }

main {
  max-width: min(94vw, var(--content-max-width));
  margin: 0 auto;
  padding: 32px 28px 80px;
  border: 3px solid var(--release-color);
  border-radius: var(--radius);
}

.head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.release-badge {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--release-color);
  background: var(--bg-raised);
  border: 1px solid var(--release-color);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: default;
  white-space: nowrap;
}

.status-line {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin-bottom: 20px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
}
.status-line.error { color: #e0a08c; border-color: var(--tape-red); }

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-dim);
}
.empty-state p:first-child {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
}
.empty-sub { font-family: var(--mono); font-size: 0.85rem; }

.grid-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 0;
  padding-bottom: 18px;
}

.platform-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 0;
  padding-bottom: 18px;
  font-family: var(--mono);
}
.platform-filter-label {
  font-size: 0.78rem;
  color: var(--ink-dim);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.platform-filter-count {
  background: var(--brass);
  color: #201804;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 7px;
}
.platform-filter-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
.platform-filter-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.platform-filter-clear { white-space: nowrap; }
.status-filter {
  display: flex;
  gap: 6px;
}
.status-filter-btn {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.status-filter-btn:hover { border-color: var(--brass); color: var(--ink); }
.status-filter-btn.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #201804;
  font-weight: 600;
}

.track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
}

.track-section-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tape-card-downloaded { opacity: 0.7; }

.track-grid.hide-downloaded .tape-card-downloaded { display: none; }

.tape-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tape-art {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-raised);
}
.tape-art-img {
  width: 100%;
  height: 100%;
  /* Suno cover art is always square (1920x1920) but this box is 16:9
     (sized for video) — "cover" would crop the top/bottom off square
     covers, cutting off content like title text near the edges. "contain"
     shows the whole square image, letterboxed, instead. */
  object-fit: contain;
  display: block;
}
.tape-art-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.tape-art-video[hidden] { display: none; }
.tape-video-embed {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}
.tape-video-embed[hidden] { display: none; }
.tape-mini-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.68rem;
  background: rgba(23, 19, 16, 0.85);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ink-dim);
  cursor: pointer;
}
.tape-mini-btn:hover { color: var(--brass-bright); border-color: var(--brass); }
.tape-mini-btn.uploading { color: var(--brass-bright); border-color: var(--brass); cursor: default; pointer-events: none; }
.tape-mini-btn-delete {
  /* Stacked directly under "Upload video" (top-right) rather than the
     box's bottom corner — for a tall 9:16 video box that bottom corner
     can be hundreds of pixels away from the other controls, which made
     this button practically undiscoverable. */
  top: 34px;
  right: 10px;
}
.tape-mini-btn-delete:hover { color: var(--tape-red); border-color: var(--tape-red); }

/* Track page only: image + video shown side by side instead of one
   swapping the other out, so you always have the reference image on hand
   even when a video's also available — this page's job is keeping every
   asset available for uploading elsewhere, not just showing one at a time. */
.tape-media-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 0;
}
.tape-media-row .tape-art {
  flex: 1 1 140px;
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius);
  /* Match the video box's aspect ratio so the two sit at the same size
     side by side, instead of the image using the base 16:9 ratio. */
  aspect-ratio: 8 / 9;
}
.tape-video-box {
  position: relative;
  flex: 1 1 140px;
  width: 100%;
  max-width: 320px;
  /* Portrait-ish, matching the short-form (Shorts/TikTok/Reels) video
     format this box is really for — not tied to the image's own aspect
     ratio now that they sit side by side instead of stacked. */
  aspect-ratio: 8 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.tape-video-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.tape-video-empty[hidden] { display: none; }

.tape-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px;
  margin-top: 12px;
}
.tape-gallery:empty { display: none; }
.tape-gallery-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--bg-raised);
}
.tape-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tape-gallery-thumb.is-hero { border-color: var(--brass); }
.tape-gallery-delete-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(23, 19, 16, 0.85);
  color: var(--ink-dim);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 1;
}
.tape-gallery-delete-btn:hover { background: var(--tape-red); color: #fff; }
.tape-gallery-delete-btn[hidden] { display: none; }
.tape-gallery-hero-btn {
  position: absolute;
  inset: auto 0 0 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  background: rgba(23, 19, 16, 0.85);
  border: none;
  padding: 3px 0;
  color: var(--ink-dim);
  cursor: pointer;
}
.tape-gallery-hero-btn:hover { color: var(--brass-bright); }
.tape-gallery-thumb.is-hero .tape-gallery-hero-btn { display: none; }
.tape-gallery-hero-label {
  position: absolute;
  inset: auto 0 0 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-align: center;
  background: var(--brass);
  color: #201804;
  font-weight: 600;
  padding: 3px 0;
}
.tape-format-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--mono);
  font-size: 0.7rem;
  background: rgba(23, 19, 16, 0.85);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--brass-bright);
}

.tape-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(0deg, rgba(15, 12, 9, 0.85) 0%, rgba(15, 12, 9, 0.55) 65%, transparent 100%);
}
.tape-controls[hidden] { display: none; }
.tape-play-btn {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--brass);
  color: #201804;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tape-play-btn:hover { background: var(--brass-bright); }
.tape-progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.tape-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--brass);
  border-radius: 2px;
  pointer-events: none;
}
.tape-time {
  flex: none;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink);
  min-width: 74px;
  text-align: right;
}

.tape-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }

.tape-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 0;
  line-height: 1.2;
}

.publish-status { margin: 10px 0 4px; }
.publish-status-title {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.publish-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.publish-chip {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink-dim);
  cursor: pointer;
}
.publish-chip::before {
  content: "○ ";
  opacity: 0.6;
}
.publish-chip:hover { border-color: var(--brass); color: var(--brass-bright); }
.publish-chip.published {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(127, 174, 106, 0.1);
}
.publish-chip.published::before { content: "✓ "; opacity: 1; }
.publish-chip.published:hover { border-color: var(--ok); color: var(--ok); }
.publish-chip[data-readonly="true"] { cursor: default; }
.publish-chip[data-readonly="true"]:hover { border-color: var(--line); color: var(--ink-dim); }
.publish-chip[data-readonly="true"].published:hover { border-color: var(--ok); color: var(--ok); }
.tape-tags {
  margin: 0;
  color: var(--brass-bright);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tape-tags + .copy-btn {
  width: 20px;
  height: 20px;
  margin-top: 6px;
}

.tape-meta {
  display: flex;
  gap: 18px;
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
}
.tape-meta > div { display: flex; flex-direction: column; gap: 2px; }
.tape-meta dt { text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.tape-meta dd { margin: 0; color: var(--ink); }

.tape-audio { display: none; }
.tape-file-audio { display: none; }

.tape-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.tape-files:empty { display: none; }

.tape-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tape-play-btn-mini { width: 24px; height: 24px; font-size: 0.65rem; }
.tape-file-name {
  flex: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tape-file-row .tape-progress {
  background: rgba(255, 255, 255, 0.1);
}
.tape-file-row .tape-time { color: var(--ink-dim); }

.tape-details { font-size: 0.85rem; }
.tape-details summary {
  cursor: pointer;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 10px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.detail-grid label { display: flex; flex-direction: column; gap: 4px; }

.detail-field input,
.detail-field textarea,
.detail-field select,
.detail-grid input {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
  resize: vertical;
}
.detail-field input:focus,
.detail-field textarea:focus,
.detail-field select:focus,
.detail-grid input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }

.suno-original-lyrics summary {
  cursor: pointer;
  color: var(--ink-dim);
}
.suno-original-lyrics summary:hover { color: var(--brass-bright); }
.suno-original-lyrics textarea { margin-top: 6px; opacity: 0.85; cursor: default; }

.detail-readonly {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.detail-readonly code {
  background: var(--bg-raised);
  padding: 2px 6px;
  border-radius: 4px;
}
.detail-readonly a { color: var(--brass); }

.field-with-copy {
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-with-copy input,
.field-with-copy textarea,
.field-with-copy select {
  flex: 1;
  min-width: 0;
}
.copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-raised);
  color: var(--ink-dim);
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--brass); color: var(--brass-bright); }
.copy-btn.copied { color: var(--ok); border-color: var(--ok); }
.detail-readonly .copy-btn {
  width: 20px;
  height: 20px;
  margin-left: 4px;
}

.detail-save-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.save-status {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.save-status.ok { color: var(--ok); }
.save-status.err { color: var(--tape-red); }

.btn-delete {
  margin-left: auto;
  color: var(--tape-red);
}
.btn-delete:hover { border-color: var(--tape-red); }
.btn-delete:disabled { opacity: 0.6; cursor: default; }

.timed-lyrics {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  margin-top: 8px;
}

.album-art-prompt {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  margin-top: 8px;
}
.album-art-prompt[hidden] { display: none; }
.album-art-prompt-label {
  display: block;
  font-weight: bold;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.7rem;
  margin-bottom: 4px;
}
.album-art-prompt p {
  margin: 0;
}

.lyrics-download-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.download-folder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.download-folder-current {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.link-btn {
  background: none;
  border: none;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  align-self: flex-start;
  text-transform: none;
  letter-spacing: normal;
}

.tape-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.section-divider {
  margin: 24px 0 0;
  border: none;
  border-top: 2px solid var(--line);
}

.post-track-section {
  margin-top: 16px;
}
.post-track-section h3 {
  font-size: 1rem;
  margin: 0 0 10px;
}
/* Two side-by-side post-track-sections (e.g. Album Artwork Generator +
   Cinemagraph Video Generator), same spirit as .tape-media-row's image/
   video pairing. Wraps to stacked on narrow viewports. */
.post-track-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.post-track-columns > .post-track-section {
  flex: 1 1 280px;
  margin-top: 0;
}

.cinemagraph-results {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}
.cinemagraph-results[hidden] { display: none; }
.cinemagraph-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 220px;
}
.cinemagraph-result video {
  width: 100%;
  border-radius: var(--radius);
  background: #000;
  border: 1px solid var(--line);
}
.cinemagraph-result-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
}
.deploy-missing-list {
  margin: 0 0 10px;
  padding-left: 18px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--tape-red);
}
.deploy-missing-list:empty { display: none; }
.deploy-status {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-top: 8px;
}
.deploy-status.err { color: var(--tape-red); }
.deploy-status.ok { color: var(--ok); }

.youtube-info-status {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-top: 8px;
}
.youtube-info-status.err { color: var(--tape-red); }
.youtube-info-status.ok { color: var(--ok); }

.social-clip-preview { margin-top: 10px; }
.social-clip-preview[hidden] { display: none; }
.social-clip-video {
  width: 160px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  background: #000;
  margin-top: 8px;
}
.social-clip-video[hidden] { display: none; }
.social-clip-embed {
  width: 160px;
  aspect-ratio: 9 / 16;
  display: block;
  border: none;
  border-radius: var(--radius);
  background: #000;
  margin-top: 8px;
}
.social-clip-embed[hidden] { display: none; }
.social-clip-empty {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-top: 8px;
}
.social-clip-empty[hidden] { display: none; }
.social-clip-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin: 8px 0 0;
}
.social-clip-status {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-top: 8px;
}
.social-clip-status.err { color: var(--tape-red); }
.social-clip-status.ok { color: var(--ok); }

.field-hint {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  margin: 4px 0 0;
}

.cover-art-results {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}
.cover-art-results[hidden] { display: none; }
.cover-art-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 160px;
}
.cover-art-result img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
.cover-art-result-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
}

.source-status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.source-status.ok { color: var(--ok); border-color: var(--ok); }
.source-status:empty { display: none; }

.char-counter {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  text-align: right;
  margin-top: 4px;
}
.char-counter.warn { color: var(--brass, #c9a227); }
.char-counter.over { color: var(--tape-red); }

.deploy-progress {
  height: 4px;
  width: 220px;
  max-width: 100%;
  border-radius: 999px;
  background: var(--bg-raised);
  overflow: hidden;
  margin-top: 10px;
}
.deploy-progress[hidden] { display: none; }
.deploy-progress-fill {
  width: 40%;
  height: 100%;
  background: var(--brass);
  border-radius: 999px;
  animation: deploy-progress-indeterminate 1.2s ease-in-out infinite;
}
@keyframes deploy-progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.btn:hover { border-color: var(--brass); }
.btn-download { color: var(--ink); }
.btn-convert { color: var(--brass-bright); }

.btn-download-all {
  background: var(--brass);
  color: #201804;
  border-color: var(--brass);
  font-weight: 600;
}
.btn-download-all:hover { background: var(--brass-bright); border-color: var(--brass-bright); }
.btn-download-all:disabled { opacity: 0.6; cursor: default; }

.btn-save {
  background: var(--brass);
  color: #201804;
  border-color: var(--brass);
  font-weight: 600;
}
.btn-save:hover { background: var(--brass-bright); border-color: var(--brass-bright); }

.btn-edit {
  background: var(--brass);
  color: #201804;
  border-color: var(--brass);
  font-weight: 600;
  display: inline-block;
}
.btn-edit:hover { background: var(--brass-bright); border-color: var(--brass-bright); }
.btn-edit[hidden] { display: none; }

.btn-social-search {
  background: var(--brass);
  color: #201804;
  border-color: var(--brass);
  font-weight: 600;
}
.btn-social-search:hover { background: var(--brass-bright); border-color: var(--brass-bright); }

.btn-processed { color: var(--ink-dim); }
.btn-processed.done { color: var(--ok); border-color: var(--ok); }
.btn-processed:disabled { opacity: 0.6; cursor: default; }

.download-result {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.download-result.ok { color: var(--ok); }
.download-result.err { color: var(--tape-red); }

.conv-group { display: inline-flex; align-items: center; gap: 6px; }
.conv-group[hidden] { display: none; }
.conv-status {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.conv-status.ok { color: var(--ok); }
.conv-status.err { color: var(--tape-red); }

.genre-suggest {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.genre-suggest.err { color: var(--tape-red); }

.audius-status {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.audius-status.err { color: var(--tape-red); }

.youtube-status {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.youtube-status.err { color: var(--tape-red); }

.audius-manual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.audius-manual[hidden] { display: none; }
.audius-manual label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.audius-manual input {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  min-width: 220px;
}
.audius-manual input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.genre-suggest-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.genre-suggest-pick {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--brass);
  background: none;
  color: var(--brass-bright);
  cursor: pointer;
}
.genre-suggest-pick:hover { background: var(--brass); color: #201804; }
.genre-suggest-pick.is-selected {
  background: var(--brass);
  color: #201804;
  font-weight: 600;
}

.song-preview[hidden] { display: none; }
.song-preview {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  padding: 16px 44px 16px 18px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.song-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0;
}
.song-preview-close:hover { border-color: var(--tape-red); color: var(--tape-red); }
.song-preview-art {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.song-preview-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-raised);
  display: block;
}
.song-preview-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 19, 16, 0.75);
  color: var(--brass-bright);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.song-preview-play-btn:hover { background: rgba(23, 19, 16, 0.92); }
.song-preview-info {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.song-preview-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
}
.song-preview-audio { display: none; }
.song-preview-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.track-single { max-width: min(90vw, var(--track-single-max-width)); }

/* The track page has one column of content, not a grid — its outer frame
   should hug that content's width instead of stretching to the generic
   (much wider) content cap, or the border ends up floating with empty gaps
   on either side of the actual card. */
main.main-track { max-width: min(90vw, var(--track-single-max-width)); }
.head-inner-track { max-width: min(90vw, var(--track-single-max-width)); }

@media (max-width: 520px) {
  .add-form input { width: 100%; max-width: none; }
  .head-inner { flex-direction: column; align-items: flex-start; }
}