.tv-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1400px 700px at 15% -10%, rgba(232,179,77,0.06), transparent 55%),
    var(--bg);
}

.tv-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  padding: 0 clamp(28px, 6vw, 90px) 40px;
}

.tv-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.tv-hero-title {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.tv-hero-sub {
  color: var(--text-secondary);
  font-size: clamp(15px, 1.4vw, 19px);
  margin: 0;
}

.tv-pair-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 32px;
  text-align: center;
  min-width: 220px;
}
.tv-pair-code {
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 6px 0 2px;
}
.tv-pair-label { font-size: 13px; color: var(--text-secondary); }
.tv-pair-expiry { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }

/* Profiles */
.profile-row {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 8px 4px 16px;
  scrollbar-width: none;
}
.profile-row::-webkit-scrollbar { display: none; }

.profile-card {
  flex: 0 0 auto;
  width: clamp(140px, 12vw, 190px);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.profile-card:hover, .profile-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-4px);
  background: var(--surface-raised);
}
.profile-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.profile-avatar {
  width: clamp(56px, 6vw, 76px);
  height: clamp(56px, 6vw, 76px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6b4c1c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  color: #1a1305;
}

.profile-name {
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.profile-role {
  font-size: 11.5px;
  color: var(--text-tertiary);
  text-transform: lowercase;
}

/* Now playing */
.now-playing {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 26px;
}
.np-art {
  width: 66px; height: 66px;
  border-radius: var(--r-md);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  object-fit: cover;
}
.np-meta { flex: 1; min-width: 0; }
.np-title { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-artist { color: var(--text-secondary); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-empty { color: var(--text-tertiary); font-size: 14px; }
.np-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.np-progress-fill { height: 100%; background: var(--accent); }
.np-devices { font-size: 12.5px; color: var(--text-tertiary); flex-shrink: 0; }

/* Services */
.services-row { display: flex; gap: 14px; flex-wrap: wrap; }
.service-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-secondary);
}
.service-chip.unavailable { opacity: 0.55; }
.service-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); }

@media (max-width: 860px) {
  .tv-hero { flex-direction: column; align-items: flex-start; }
}