/* ===========================================================================
 * app.css — dark developer / gamer overhaul
 *
 * All design tokens are declared here as the single source of truth (the old
 * Core/Tokens injection no longer exists). RTL-first: physical left/right are
 * avoided in favour of logical inline/block properties. The only ltr islands
 * are numeric axes (waveform, code blocks).
 * ========================================================================= */

:root {
  /* palette */
  --bg:        #0D1117;
  --surface:   #161B22;
  --surface2:  #1C2128;
  --border:    #30363D;
  --text:      #E6EDF3;
  --text-muted:#8B949E;
  --green:     #39D353;
  --purple:    #A371F7;
  --cyan:      #58A6FF;
  --danger:    #F85149;
  --link:      var(--cyan);

  /* effects */
  --shadow-hard: 0 10px 30px rgba(1, 4, 9, .7);
  --glow-purple: 0 0 18px rgba(163, 113, 247, .18);
  --glow-green:  0 0 12px rgba(57, 211, 83, .45);

  /* radii */
  --radius:    8px;
  --radius-sm: 6px;

  /* spacing scale */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-16: 8rem;

  /* layout */
  --container: 72rem;
  --gutter:    1.25rem;
  --measure:   68ch;

  /* type */
  --font-body: "Vazirmatn", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --leading:   1.75;
}

/* --------------------------------------------------------------- reset/base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* thin dark scrollbar (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--leading);
  /* clip, never hidden — hidden breaks RTL start-side overflow containment */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* scanline overlay — fixed, faint, never interactive */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .03;
  background: repeating-linear-gradient(
    to bottom,
    var(--text) 0 1px,
    transparent 1px 3px
  );
}

::selection { background: rgba(163, 113, 247, .3); }

/* thin dark scrollbar (WebKit) */
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--surface2);
  border: 2px solid var(--bg);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border); }

h1, h2, h3, h4 {
  font-family: var(--font-body);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 var(--space-4); max-inline-size: var(--measure); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg, video, audio { max-inline-size: 100%; }
img, video { block-size: auto; }

/* every box with a reserved ratio spans its inline axis (no CLS) */
[style*="aspect-ratio"] { inline-size: 100%; }

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ layout */

.container {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { display: block; min-block-size: 60vh; }

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-4);
  z-index: 100;
  background: var(--purple);
  color: #fff;
  padding: .6rem 1rem;
  border-end-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
}
.skip-link:focus { inset-block-start: 0; }

/* ------------------------------------------------------- header + nav (56px) */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.site-header > .container {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  block-size: 56px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}
.site-logo:hover { text-decoration: none; }

/* pulsing green status dot (glyph hidden, dot drawn) */
.logo-mark {
  flex: 0 0 auto;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--green);
  color: transparent;
  font-size: 0;
  line-height: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57, 211, 83, .55); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(57, 211, 83, 0);  opacity: .55; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-inline-start: auto;
}
.site-nav a {
  color: var(--text-muted);
  font-weight: 500;
  padding-block: .2rem;
  border-block-end: 2px solid transparent;
  transition: color .15s ease;
}
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a.active,
.site-nav a[aria-current="page"] {
  color: var(--text);
  border-block-end-color: var(--purple);
}

/* hamburger (mobile only) */
.nav-toggle {
  display: none;
  margin-inline-start: auto;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  inline-size: 40px;
  block-size: 40px;
  padding: 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  block-size: 2px;
  inline-size: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: sticky;
  inset-block-start: 56px;
  z-index: 49;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.mobile-nav:not([hidden]) { display: flex; flex-direction: column; }
.mobile-nav a {
  padding: var(--space-3) var(--gutter);
  color: var(--text-muted);
  border-block-end: 1px solid var(--border);
  font-weight: 500;
}
.mobile-nav a:last-child { border-block-end: 0; }
.mobile-nav a:hover { color: var(--text); background: var(--surface2); text-decoration: none; }

/* --------------------------------------------------------------- footer */

.site-footer {
  border-block-start: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  padding-block: var(--space-6);
  margin-block-start: var(--space-8);
  font-size: .9rem;
}
.site-footer p { max-inline-size: none; margin: 0; }

/* --------------------------------------------------------- persistent player */

.player-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 60;
  background: var(--surface);
  border-block-start: 1px solid var(--border);
}
.player-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.player-btn {
  flex: 0 0 auto;
  inline-size: 34px;
  block-size: 34px;
  border: none;
  border-radius: 50%;
  background: var(--green);
  color: #0D1117;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  box-shadow: var(--glow-green);
}
.player-btn .icon-pause { display: none; }
.player-btn[aria-pressed="true"] .icon-play  { display: none; }
.player-btn[aria-pressed="true"] .icon-pause { display: inline; }

.player-meta { min-inline-size: 0; flex: 0 1 12rem; overflow: hidden; }
.player-title {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-waveform {
  position: relative;
  flex: 1 1 auto;
  block-size: 32px;
  min-inline-size: 4rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  direction: ltr; /* time axis, not text */
}
.waveform-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 1px;
  padding-inline: 2px;
}
.waveform-progress {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0;
  background: rgba(163, 113, 247, .25);
  pointer-events: none;
}
.player-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: .85rem;
  white-space: nowrap;
}

/* keep footer content clear of the fixed bar when it is live */
body[data-audio="live"] .site-footer { padding-block-end: 5rem; }

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 10vw, 6rem) var(--space-8);
}
.hero > .container { position: relative; z-index: 2; }
.hero__blob {
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -10%;
  inline-size: min(60vw, 32rem);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(163, 113, 247, .28), transparent 60%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  color: var(--green);
  font-size: .9rem;
  letter-spacing: .05em;
  margin: 0 0 var(--space-3);
}
.hero__title {
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  background: linear-gradient(135deg, var(--text), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__sub {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-inline-size: 60ch;
  margin: 0 0 var(--space-6);
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: .6rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; border-color: var(--purple); box-shadow: var(--glow-purple); }
.btn:active { transform: translateY(1px); }

.btn--primary,
.btn--lacquer {
  background: var(--green);
  color: #0D1117;
  border-color: transparent;
}
.btn--primary:hover,
.btn--lacquer:hover { box-shadow: var(--glow-green); border-color: transparent; }

.ghost { background: transparent; }

/* ----------------------------------------------------------------- sections */

.section { padding-block: var(--space-7); }

/* header: title | flex line filler | mono badge/more */
.section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}
.section__header h1,
.section__header h2 { margin: 0; order: 0; white-space: nowrap; }
.section__header::before {
  content: "";
  order: 1;
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--border);
}
.section__more {
  order: 2;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--cyan);
  white-space: nowrap;
}

.text-muted, .muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.flex { display: flex; }
.items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }

/* --------------------------------------------------------------- base card */

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

/* -------------------------------------------------- tracks: horizontal rail */

.grid-3 {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--space-3);
}
.grid-3 .card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.grid-3 .card:hover {
  border-color: var(--purple);
  box-shadow: var(--glow-purple);
}
@media (max-width: 479.98px) {
  .grid-3 .card { flex: 0 0 72vw; }
}

/* track cover frame */
.card__cover {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface2);
}
.card__cover img,
img.card__cover { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* gradient scrim (renders on frame div only, not on replaced <img>) */
.card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 17, 23, .85), transparent 55%);
  pointer-events: none;
}

.card__cover-placeholder {
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 2.4rem;
}

/* play button — 34px green circle, bottom of the cover start-side */
.card__play {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 2;
  inline-size: 34px;
  block-size: 34px;
  border: none;
  border-radius: 50%;
  background: var(--green);
  color: #0D1117;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  box-shadow: var(--glow-green);
  transition: transform .12s ease;
}
.card__play:hover { transform: scale(1.08); }

.grid-3 .card h3 {
  margin: 0;
  padding: var(--space-3) var(--space-3) 0;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.grid-3 .card h3 a { color: var(--text); }
.grid-3 .card h3 a:hover { color: var(--purple); text-decoration: none; }
.grid-3 .card > .text-muted {
  padding: var(--space-1) var(--space-3) var(--space-3);
  font-size: .85rem;
  margin: 0;
}

/* ------------------------------------------------- blog: table-style rows */

.grid-2 {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  counter-reset: row;
}
.grid-2 .card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition: background .12s ease;
}
.grid-2 .card:last-child { border-block-end: 0; }
.grid-2 .card:hover { background: var(--surface2); text-decoration: none; }
.grid-2 .card::before {
  counter-increment: row;
  content: counter(row);
  flex: 0 0 auto;
  min-inline-size: 2ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--text-muted);
}
.grid-2 .card h3 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid-2 .card time { flex: 0 0 auto; font-size: .85rem; color: var(--text-muted); white-space: nowrap; }
.grid-2 .card::after { content: "←"; flex: 0 0 auto; color: var(--cyan); }

/* -------------------------------------------------- generic 2-col (single) */

.grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------------------------- badge */

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: .15rem .5rem;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--purple);
  border: 1px solid var(--border);
}

/* --------------------------------------------------------- track show block */

.track-player {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-block: var(--space-4);
}
.track-player__title { font-weight: 700; margin: 0 0 var(--space-2); }
.track-player__meta { color: var(--text-muted); font-size: .85rem; margin: 0; }
.track-player audio { inline-size: 100%; display: block; margin-block-start: var(--space-3); }

/* --------------------------------------------------------------- breadcrumb */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--text-muted);
  margin-block-end: var(--space-5);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb__sep { color: var(--border); }

/* ----------------------------------------------------------- long-form body */

.post-body { max-inline-size: var(--measure); }
.post-body h2 { font-size: 1.6rem; margin-block: var(--space-6) var(--space-3); }
.post-body h3 { font-size: 1.3rem; margin-block: var(--space-5) var(--space-2); }
.post-body p { margin-block: 0 var(--space-4); }
.post-body a { color: var(--cyan); }
.post-body ul, .post-body ol { padding-inline-start: 1.4em; margin-block: 0 var(--space-4); }
.post-body li { margin-block-end: .4em; }
.post-body blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--purple);
  color: var(--text-muted);
}
.post-body img { border: 1px solid var(--border); border-radius: var(--radius); }
.post-body hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--space-6); }
.post-body pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .9rem;
  direction: ltr;
  text-align: start;
}
.post-body code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--surface2);
  padding: .15em .4em;
  border-radius: 4px;
}
.post-body pre code { background: none; padding: 0; }

/* ------------------------------------------------------------------- likes */

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  padding: .45rem .9rem;
  cursor: pointer;
  font: inherit;
  transition: border-color .15s ease, color .15s ease;
}
.like-btn:hover { border-color: var(--purple); color: var(--text); }
.like-btn.liked { color: var(--purple); border-color: var(--purple); }
.like-btn__count { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ----------------------------------------------------------------- comments */

.comments { margin-block-start: var(--space-8); max-inline-size: var(--measure); }
.comments__title { font-size: 1.4rem; margin-block-end: var(--space-4); }

.comment-list { display: flex; flex-direction: column; gap: var(--space-3); margin-block-end: var(--space-6); }
.comment {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.comment:target { border-color: var(--purple); scroll-margin-block: var(--space-6); }
.comment__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-end: var(--space-2);
  font-size: .85rem;
  color: var(--text-muted);
}
.comment__author { font-weight: 600; color: var(--text); }
.comment__ts-badge {
  font-family: var(--font-mono);
  font-size: .78rem;
  background: var(--surface2);
  color: var(--cyan);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .1rem .45rem;
  cursor: pointer;
}
.comment__ts-badge:hover { border-color: var(--cyan); }
.comment__time { margin-inline-start: auto; }
.comment__body { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------- forms */

.comment-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  max-inline-size: var(--measure);
}
.comment-form__title { font-weight: 700; font-size: 1.1rem; margin: 0 0 var(--space-4); }

.honeypot { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

.form-group { margin-block-end: var(--space-4); }
.form-group label { display: block; font-weight: 600; margin-block-end: var(--space-2); font-size: .9rem; }

input[type=text],
input[type=password],
input[type=number],
textarea,
select {
  inline-size: 100%;
  padding: .6rem .75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: var(--glow-purple);
}
textarea { min-block-size: 8rem; resize: vertical; }

.form-error   { color: var(--danger); font-size: .85rem; }
.form-success { color: var(--green);  font-size: .85rem; }

/* ---------------------------------------------------------------- pagination */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
}
.pagination a,
.pagination .current {
  min-inline-size: 2.4em;
  text-align: center;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.pagination a:hover { border-color: var(--purple); text-decoration: none; }
.pagination .current { background: var(--purple); color: #fff; border-color: var(--purple); }

/* --------------------------------------------------------------- error page */

.error-page { max-inline-size: var(--measure); }

/* ------------------------------------------------------------ media queries */

@media (max-width: 767.98px) {
  .site-nav   { display: none; }
  .nav-toggle { display: flex; }
}

@media (min-width: 768px) {
  .mobile-nav { display: none !important; }
}

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

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

/* ============================================================================
   Player page — dark theme restyle
   Scoped to classes that exist in Music/views/show.php + partials/comments.php
   (breadcrumb, card__cover, track-player, comments, comment*, comment-form).
   No new markup/classes are introduced — PHP is untouched.
   ========================================================================== */

/* -- breadcrumb: monospace trail ------------------------------------------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: .72rem;
  gap: .5rem;
}
.breadcrumb a { transition: color .15s ease; }
.breadcrumb a:hover { color: var(--purple); }
.breadcrumb__sep { color: var(--border); }

/* -- player card: cover | info grid ---------------------------------------- */
.track-player {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: var(--space-5);
}
.track-player__title { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.track-player__meta  { color: var(--text-muted); font-size: .82rem; line-height: 1.6; }

/* cover placeholder reads as the "cover" tile on the show page */
.card__cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

/* -- comments: heading + count badge --------------------------------------- */
.comments__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.comments__title bdi {
  font-family: var(--font-mono);
  font-size: .72rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .1rem .6rem;
}

/* -- comment form ---------------------------------------------------------- */
.comment-form {
  border-radius: 8px;
  padding: var(--space-4);
}
.comment-form input[type=text],
.comment-form textarea {
  background: var(--surface2);
  outline: none;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--purple); }
.comment-form textarea { min-block-size: 72px; }
.comment-form .btn--primary { border-radius: 6px; }

/* -- comment list ---------------------------------------------------------- */
.comment-list {
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.comment {
  border: 0;
  border-radius: 0;
  padding: .875rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: background .15s ease;
}
.comment:hover { background: var(--surface2); }

.comment__header { gap: .75rem; margin-block-end: 0; }
.comment__author { font-weight: 700; }
.comment__ts-badge {
  font-family: var(--font-mono);
  color: var(--purple);
  background: rgba(163, 113, 247, .08);
  border-color: rgba(163, 113, 247, .2);
  border-radius: 3px;
}
.comment__ts-badge:hover { border-color: var(--purple); }
.comment__time {
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-inline-start: auto;
}
.comment__body { font-size: .85rem; line-height: 1.6; }

/* -- direct download button (player page) ---------------------------------- */
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .45rem 1rem;
  color: var(--text-muted);
  font-size: .82rem;
  text-decoration: none;
  transition: border-color .2s, color .2s;
  margin-top: .75rem;
}
.btn-download:hover { border-color: var(--cyan); color: var(--cyan); }