body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 700px;
  margin: 40px auto;
  padding: 0 20px;
  background: #0f0f0f;
  color: #e0e0e0;
}

header { text-align: center; margin-bottom: 40px; }
h1 { margin: 0; font-size: 2.4rem; }
p { margin: 8px 0 0; color: #888; }

section { margin-bottom: 50px; }

.auth-buttons { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  background: #1db954;
  color: white;
}
.btn.primary { background: #1db954; }
.btn.youtube { background: #ff0000; }

.status-dot {
  font-size: 2rem;
  line-height: 1;
}
.connected { color: #1db954; }
.disconnected { color: #555; }

#track-url {
  width: 100%;
  padding: 14px;
  font-size: 1.1rem;
  margin: 16px 0;
  border-radius: 6px;
  border: 1px solid #444;
  background: #1a1a1a;
  color: white;
}

#status-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
}
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #333; }
th { background: #222; }

.success::before { content: "✅ "; }
.failure::before { content: "❌ "; }
.ambiguous::before { content: "⚠️ "; }