/* ---- VARIABLES ---- */
:root {
  --bg-base:      #0a0a0f;
  --bg-surface:   #111118;
  --bg-card:      #16161f;
  --bg-elevated:  #1e1e2a;
  --border:       rgba(255,255,255,0.07);

  --accent:       #ff5500;
  --accent2:      #1db954;
  --accent3:      #a259ff;
  --accent-glow:  rgba(255,85,0,0.35);

  --text-primary:   #f0f0f5;
  --text-secondary: #8888aa;
  --text-muted:     #44445a;

  --sidebar-w:  240px;
  --player-h:   90px;
  --topbar-h:   64px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

body {
  background-color: var(--bg-base);
}

h1 {
  color: var(--text-primary);
}

h2 {
  color: var(--text-primary);
}

p {
  color: var(--text-primary);
}

.sidebar {
  grid-area: sidebar;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0 0 1rem 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 1.5rem 1.2rem 1.2rem;
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.logo-icon {
  width: 34px; height: 34px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
}