/* ═══════════════════════════════════════════════════════════════
   Competitor Tracker — Feature Styles
   All classes are prefixed ct- to prevent any collision with
   existing Musical SEO styles. This file only adds new rules.
   ═══════════════════════════════════════════════════════════════ */

/* ── Spinner ─────────────────────────────────────────────────── */
.ct-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12);
  color: var(--color-text-muted);
}
.ct-spin-ring {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: #10B981;
  border-radius: 50%;
  animation: ct-spin 0.7s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* ── Error / Notice ──────────────────────────────────────────── */
.ct-error {
  background: var(--color-error-muted);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  color: var(--color-error);
  margin-top: var(--space-4);
}

/* ── Disambiguation ──────────────────────────────────────────── */
.ct-disambiguation {
  margin-top: var(--space-4);
}
.ct-disambig-header {
  margin-bottom: var(--space-6);
}
.ct-disambig-header h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.ct-disambig-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
@media (max-width: 640px) {
  .ct-disambig-platforms { grid-template-columns: 1fr; }
}
.ct-disambig-platform {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ct-platform-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.ct-platform-spotify { color: #1DB954; }
.ct-platform-youtube { color: #EF4444; }

.ct-artist-option {
  display: block;
  cursor: pointer;
}
.ct-artist-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ct-artist-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  background: var(--color-bg-surface);
  transition: border-color 0.15s, background 0.15s;
}
.ct-artist-option input:checked + .ct-artist-card {
  border-color: #10B981;
  background: rgba(16,185,129,0.07);
}
.ct-artist-card:hover {
  background: var(--color-bg-hover);
}
.ct-artist-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ct-thumb-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-overlay);
  flex-shrink: 0;
}
.ct-artist-info { flex: 1; min-width: 0; }
.ct-artist-name {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-artist-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.ct-artist-genres {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-disambig-none {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-3);
  text-align: center;
}
.ct-skip-card {
  opacity: 0.55;
}
.ct-option-skip input:checked + .ct-skip-card {
  border-color: var(--color-border-hover);
  background: var(--color-bg-overlay);
  opacity: 1;
}

.ct-disambig-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ── Artist Header (results) ─────────────────────────────────── */
.ct-results-wrap { margin-top: var(--space-4); }

.ct-artist-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.ct-hero-image {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-border-hover);
}
.ct-hero-info { flex: 1; min-width: 0; }
.ct-hero-name {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.ct-hero-genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
.ct-genre-tag {
  background: rgba(16,185,129,0.12);
  color: #10B981;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  text-transform: capitalize;
}
.ct-hero-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── Platform Grid ───────────────────────────────────────────── */
.ct-platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
@media (max-width: 860px) {
  .ct-platform-grid { grid-template-columns: 1fr; }
}
.ct-platform-block {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}
.ct-block-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.ct-ext-link {
  margin-left: auto;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.ct-ext-link:hover {
  color: #10B981;
  background: rgba(16,185,129,0.1);
}
.ct-block-empty { opacity: 0.55; }
.ct-no-platform {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-4) 0;
  text-align: center;
}

/* ── Top Track ───────────────────────────────────────────────── */
.ct-top-track {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.ct-track-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.ct-track-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ct-album-art {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.ct-track-name {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.ct-track-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Recent Videos ───────────────────────────────────────────── */
.ct-recent-videos {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.ct-section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.ct-video-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.ct-video-row:last-child { border-bottom: none; }
.ct-video-thumb {
  width: 80px;
  height: 45px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.ct-video-info { flex: 1; min-width: 0; }
.ct-video-title {
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-video-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Track Another ───────────────────────────────────────────── */
.ct-track-another {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.ct-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── kpi-grid inside platform block override ─────────────────── */
.ct-platform-block .kpi-card {
  padding: var(--space-4);
}
.ct-platform-block .kpi-value {
  font-size: var(--text-xl);
}

/* ── Tracked List (Phase 2) ──────────────────────────────────── */
.ct-tracked-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.ct-tracked-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}
.ct-tracked-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.ct-cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.ct-tracked-card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}
.ct-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ct-card-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}
.ct-card-added {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.ct-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.ct-swap-lock {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  white-space: nowrap;
}
.ct-card-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.ct-card-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.ct-card-stat strong { color: var(--color-text); }

/* ── Charts (Phase 2) ────────────────────────────────────────── */
.ct-charts-wrap {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ct-chart-section {}
.ct-chart-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.ct-chart-canvas-wrap {
  position: relative;
  height: 80px;
}
.ct-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
}

/* ── Admin section (Phase 3) ─────────────────────────────────── */
.ct-admin-section {
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--color-bg-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.ct-admin-section h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-warning);
  margin-bottom: var(--space-3);
}
.ct-admin-form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.ct-admin-form .search-input {
  padding: 8px 12px;
  font-size: var(--text-sm);
}

/* ── btn-sm ──────────────────────────────────────────────────── */
.btn-sm {
  padding: 5px 12px !important;
  font-size: var(--text-xs) !important;
}