:root {
  --bg: #0b0b0f;
  --panel: #141618;
  --card: #1a1b1d;
  --text: #e9e9e9;
  --muted: #a1a1a1;
  --radius: 12px;
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.bg-dark { background: #0b0b0f; }
.bg-dark-subtle { background: #1a1a1d; }
.brand { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.form-control { background:#111216; color:#eaeaea; border:1px solid #2a2a2a; }
.form-control-dark { background:#141618; color:#eaeaea; border:1px solid #2a2a2a; }
.lyrics-gradient { display:flex; align-items:flex-end; }
.center-hero {
  background: linear-gradient(135deg, #6a00ff 0%, #7a00ff 40%, #2b0052 100%);
  border-radius: var(--radius);
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  min-height: 210px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.center-hero h1 {
  font-size: clamp(28px, 4vw, 58px);
  line-height: 1.05;
  font-weight: 800;
  margin: 0;
}
.container-player { padding: 0; }
@media (max-width: 991px) {
  .center-hero { min-height: 180px; }
}
/* Grid-based layout adjustments for pixel parity with the reference */
@media (min-width: 1200px) {
  .row.g-0 {
    display: grid;
    grid-template-columns: 360px 1fr 360px;
    grid-gap: 16px;
    height: calc(100vh - 64px);
    align-items: stretch;
  }
  .row.g-0 > aside, .row.g-0 > section {
    overflow: auto;
  }
}
@media (max-width: 1199px) {
  /* Tablet: show left + center, hide right by default for parity */
  .row.g-0 { grid-template-columns: 320px 1fr; }
  aside[aria-label="Connect panel"] { display: none; }
}
@media (max-width: 600px) {
  .row.g-0 { grid-template-columns: 1fr; height: auto; }
  aside[aria-label="Connect panel"] { display: none; }
}
/* Improve pixel parity for track rows */
.table td, .table th {
  padding: 12px 14px;
}
.table thead th { font-weight: 600; color: #d9d9d9; }