/* ============================================================
   MixIntel by Sound Engine
   Midnight Navy · Cyan-to-Purple · Premium Tech
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --bg:            #07080f;
  --bg-card:       #0c0e1c;
  --bg-card-2:     #0f1122;
  --bg-input:      #090a18;
  --bg-hover:      rgba(0, 212, 184, 0.05);

  --accent:        #00d4b8;
  --accent-hover:  #00bfa6;
  --accent-dim:    rgba(0, 212, 184, 0.12);
  --accent-border: rgba(0, 212, 184, 0.22);
  --accent-glow:   rgba(0, 212, 184, 0.35);

  --purple:        #7c4dcc;
  --purple-dim:    rgba(124, 77, 204, 0.15);
  --purple-border: rgba(124, 77, 204, 0.25);

  --crimson:       #8b1535;
  --gold:          #f0a832;
  --gold-dim:      rgba(240, 168, 50, 0.12);

  --green:         #00d4b8;
  --yellow:        #f0a832;
  --red:           #e8445a;
  --orange:        #f07a3a;

  --text:          #f0f2ff;
  --text-muted:    rgba(200, 210, 255, 0.5);
  --text-dim:      rgba(200, 210, 255, 0.25);

  --border:        rgba(100, 120, 255, 0.1);
  --border-hover:  rgba(0, 212, 184, 0.2);

  --header-h:      68px;
  --mob-nav-h:     72px;
  --radius-pill:   999px;
  --radius-lg:     16px;
  --radius-md:     12px;
  --radius-sm:     8px;

  --font-display:  'Exo 2', sans-serif;
  --font-body:     'Outfit', sans-serif;

  /* Gradient signature */
  --grad-se:       linear-gradient(135deg, #00d4b8 0%, #7c4dcc 100%);
  --grad-se-text:  linear-gradient(135deg, #00e5d4 0%, #a076e8 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Deep space noise texture ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(0,212,184,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(124,77,204,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(7,8,35,0.8) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}

/* ── Subtle grid overlay ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(100,120,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,120,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none; z-index: 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 200;
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 24px; gap: 16px;
  background: rgba(7, 8, 15, 0.92);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}

.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer; flex-shrink: 0;
}

.logo-icon {
  width: 34px; height: 34px; border-radius: 8px; overflow: hidden;
}
.logo-icon img { width: 100%; height: 100%; object-fit: cover; }

.logo-text-wrap { display: flex; flex-direction: column; line-height: 1; }
.logo-main {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800;
  background: var(--grad-se-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: .5px;
}
.logo-sub {
  font-size: 9px; letter-spacing: 1.5px; font-weight: 600;
  color: var(--text-dim); text-transform: uppercase; margin-top: 1px;
}

nav.nav-desktop {
  display: flex; align-items: center; gap: 2px; flex: 1;
}

.nav-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--text-muted);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.nav-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-btn.active { color: var(--accent); background: var(--accent-dim); }
.nav-btn svg { opacity: .6; flex-shrink: 0; }
.nav-btn.active svg { opacity: 1; stroke: var(--accent); }

.btn-signin {
  display: flex; align-items: center; gap: 7px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--accent); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  padding: 8px 18px; cursor: pointer;
  transition: all .2s; flex-shrink: 0; white-space: nowrap;
}
.btn-signin:hover { background: var(--accent); color: var(--bg); }

.main { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 40px 24px 120px; }

/* ============================================================
   PAGES
   ============================================================ */
.page { display: none; animation: fadeUp .35s ease; }
.page.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TYPOGRAPHY SYSTEM
   ============================================================ */
.page-hero { margin-bottom: 36px; }
.page-hero.centered { text-align: center; }
.page-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900; letter-spacing: -.5px; margin-bottom: 8px;
}
.page-title .accent-word {
  background: var(--grad-se-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-sub { color: var(--text-muted); font-size: 15px; max-width: 540px; }
.page-hero.centered .page-sub { margin: 0 auto; }

/* ============================================================
   SECTION LABEL
   ============================================================ */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-label {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--text-dim); text-transform: uppercase;
}

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero-section { text-align: center; padding: 60px 0 48px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--accent); text-transform: uppercase;
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  padding: 5px 14px; border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.hero-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: pulse 2s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 900; letter-spacing: -1px;
  line-height: 1.05; margin-bottom: 20px;
}
.hero-title .grad {
  background: var(--grad-se-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub { color: var(--text-muted); font-size: 16px; max-width: 500px; margin: 0 auto 32px; line-height: 1.7; }

/* ── Search bar ── */
.search-wrap { max-width: 600px; margin: 0 auto 16px; position: relative; }
.search-box { display: flex; gap: 0; position: relative; }
.search-input {
  flex: 1; background: var(--bg-card);
  border: 1px solid var(--border); border-right: none;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  color: var(--text); font-family: var(--font-body); font-size: 15px;
  padding: 14px 22px; outline: none;
  transition: border-color .2s;
}
.search-input:focus { border-color: var(--accent-border); }
.search-input::placeholder { color: var(--text-dim); }
.btn-search {
  background: var(--accent); color: var(--bg);
  border: none; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  padding: 14px 28px; cursor: pointer;
  transition: background .2s; white-space: nowrap;
}
.btn-search:hover { background: var(--accent-hover); }

/* Search suggestions */
.search-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  z-index: 300; display: none;
}
.search-suggestions.visible { display: block; }
.suggestion-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; cursor: pointer; font-size: 14px;
  transition: background .15s; border-bottom: 1px solid var(--border);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--bg-hover); }
.suggestion-source { margin-left: auto; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; flex-shrink: 0; }
.local-badge  { background: var(--accent-dim); color: var(--accent); }
.mb-badge     { background: var(--purple-dim); color: #a076e8; }
.suggestion-loading, .suggestion-empty { color: var(--text-muted); font-size: 13px; }

/* Add to database button */
.btn-add-db {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--border);
  color: var(--text-muted); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 8px 18px; cursor: pointer; transition: all .2s; margin-top: 8px;
}
.btn-add-db:hover { border-color: var(--accent-border); color: var(--accent); }

/* Hero results */
.hero-results { margin-top: 24px; }
.hero-results.hidden { display: none; }
.results-grid { display: flex; flex-direction: column; gap: 8px; }

/* ── Stats bar ── */
.stats-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin: 32px 0;
  overflow: hidden;
}
.stat-item {
  flex: 1; min-width: 120px;
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px;
  border-right: 1px solid var(--border);
}
.stat-item:last-child { border-right: none; }
.stat-icon { color: var(--accent); flex-shrink: 0; }
.stat-num {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800;
  background: var(--grad-se-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ── Recent grid ── */
#recentGrid { display: flex; flex-direction: column; gap: 8px; }

/* ── Result cards ── */
.result-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
  transition: border-color .2s, background .2s;
}
.result-card:hover { border-color: var(--border-hover); background: var(--bg-card-2); }
.result-info { flex: 1; min-width: 0; }
.result-track { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-artist { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.result-label-name { font-size: 10px; color: var(--text-dim); margin-top: 3px; }
.result-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ============================================================
   STATUS PILLS & DOTS
   ============================================================ */
.status-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-display);
}
.pill-safe    { background: rgba(0,212,184,.15); color: #00d4b8; border: 1px solid rgba(0,212,184,.25); }
.pill-share   { background: rgba(240,168,50,.15); color: #f0a832; border: 1px solid rgba(240,168,50,.25); }
.pill-risk    { background: rgba(240,122,58,.15); color: #f07a3a; border: 1px solid rgba(240,122,58,.25); }
.pill-block   { background: rgba(232,68,90,.15); color: #e8445a; border: 1px solid rgba(232,68,90,.25); }
.pill-unknown { background: rgba(120,120,160,.15); color: #8888a8; border: 1px solid rgba(120,120,160,.2); }

.dot-safe    { background: #00d4b8; box-shadow: 0 0 6px rgba(0,212,184,.6); }
.dot-share   { background: #f0a832; box-shadow: 0 0 6px rgba(240,168,50,.6); }
.dot-risk    { background: #f07a3a; box-shadow: 0 0 6px rgba(240,122,58,.6); }
.dot-block   { background: #e8445a; box-shadow: 0 0 6px rgba(232,68,90,.6); }
.dot-unknown { background: #8888a8; }

.badge-safe    { background: rgba(0,212,184,.15); color: #00d4b8; }
.badge-share   { background: rgba(240,168,50,.15); color: #f0a832; }
.badge-risk    { background: rgba(240,122,58,.15); color: #f07a3a; }
.badge-block   { background: rgba(232,68,90,.15); color: #e8445a; }
.badge-unknown { background: rgba(120,120,160,.15); color: #8888a8; }

/* ============================================================
   GOOD TO GO PAGE
   ============================================================ */
.genre-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 6px 16px; cursor: pointer; transition: all .2s;
}
.chip:hover { border-color: var(--border-hover); color: var(--text); }
.chip.active { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); }

.gtg-search-wrap { margin-bottom: 16px; }
.gtg-search {
  width: 100%; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text); font-family: var(--font-body); font-size: 14px;
  padding: 10px 20px; outline: none; transition: border-color .2s;
}
.gtg-search:focus { border-color: var(--accent-border); }
.gtg-search::placeholder { color: var(--text-dim); }

.list-row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 1.2fr auto;
  align-items: center; gap: 12px;
  padding: 12px 16px; font-size: 13px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.list-row:hover { background: var(--bg-hover); }
.list-row-header {
  font-family: var(--font-display); font-size: 11px;
  font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-dim); background: var(--bg-card);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.list-row-header:hover { background: var(--bg-card); }
.list-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.row-num { color: var(--text-dim); font-family: var(--font-display); font-size: 12px; }
.row-track { font-weight: 600; }
.row-artist { color: var(--text-muted); }
.row-label  { color: var(--text-dim); font-size: 12px; }

/* ============================================================
   UPLOAD / SCAN
   ============================================================ */
.scan-tabs {
  display: flex; gap: 0; margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.scan-tab-btn {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  padding: 10px 20px; cursor: pointer; margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.scan-tab-btn:hover { color: var(--text); }
.scan-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.scan-tab-btn svg { opacity: .7; }
.scan-tab-btn.active svg { opacity: 1; stroke: var(--accent); }

.upload-area { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.upload-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.upload-zone {
  padding: 48px 32px; text-align: center; cursor: pointer;
  border: 2px dashed var(--border); border-radius: var(--radius-lg);
  margin: 16px; transition: all .25s;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--accent); background: var(--accent-dim);
}
.upload-icon-wrap { margin-bottom: 16px; }
.upload-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.upload-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }
.upload-info-cards { display: flex; flex-direction: column; gap: 10px; }
.info-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px;
}
.info-card strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.info-card p { font-size: 12px; color: var(--text-muted); }

.yt-scan-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px 32px;
  text-align: center; max-width: 600px; margin: 0 auto;
}
.yt-scan-icon { margin-bottom: 16px; }
.yt-scan-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.yt-scan-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; line-height: 1.6; }
.yt-input-row { display: flex; gap: 10px; margin-bottom: 10px; }
.yt-url-input {
  flex: 1; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--text);
  font-family: var(--font-body); font-size: 14px; padding: 12px 20px; outline: none;
  transition: border-color .2s;
}
.yt-url-input:focus { border-color: var(--accent-border); }
.yt-url-input::placeholder { color: var(--text-dim); }
.yt-error { color: var(--red); font-size: 13px; text-align: left; padding: 6px 4px; }
.yt-scan-features { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; font-size: 12px; color: var(--text-muted); }
.scan-results { margin-top: 28px; }
.scan-results.hidden { display: none; }

/* Scan progress */
.scan-results-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.scan-progress-wrap { padding: 28px; }
.scan-meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.scan-file-info { display: flex; align-items: center; gap: 12px; }
.scan-file-icon {
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  color: var(--accent); border-radius: 8px;
  font-size: 11px; font-weight: 700; padding: 6px 8px; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center; min-width: 42px;
  font-family: var(--font-display);
}
.yt-icon { background: rgba(255,0,0,.1); border-color: rgba(255,0,0,.2); padding: 6px; }
.scan-filename { font-weight: 600; font-size: 15px; font-family: var(--font-display); }
.scan-filemeta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.scan-pct { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--accent); }
.scan-progress-track { height: 4px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.scan-progress-fill {
  height: 100%; background: var(--grad-se);
  border-radius: 999px; transition: width .3s ease;
  box-shadow: 0 0 12px var(--accent-glow);
}
.scan-log { font-size: 12px; color: var(--text-muted); font-family: monospace; line-height: 1.8; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; }
.log-line { display: block; }
.log-done { color: var(--accent); }

/* Scan report */
.scan-report-header { padding: 28px 28px 20px; border-bottom: 1px solid var(--border); }
.scan-report-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.scan-complete-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); font-family: var(--font-display); }
.scan-overall-score { font-family: var(--font-display); font-size: 32px; font-weight: 900; }
.scan-report-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.scan-score-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.scan-yt-link { font-size: 12px; color: var(--accent); text-decoration: none; }
.scan-yt-link:hover { text-decoration: underline; }
.scan-stats-row { display: flex; border-bottom: 1px solid var(--border); }
.scan-stat { flex: 1; padding: 20px 16px; text-align: center; border-right: 1px solid var(--border); }
.scan-stat:last-child { border-right: none; }
.scan-stat-num { font-family: var(--font-display); font-size: 26px; font-weight: 900; line-height: 1; }
.scan-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.scan-recs-wrap { padding: 20px 24px; border-bottom: 1px solid var(--border); }
.scan-section-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 12px; font-family: var(--font-display); }
.scan-recs-list { display: flex; flex-direction: column; gap: 8px; }
.scan-rec { font-size: 13px; line-height: 1.5; padding: 10px 14px; border-radius: var(--radius-sm); border-left: 3px solid; }
.rec-good   { background: rgba(0,212,184,.07); border-color: var(--accent); }
.rec-warn   { background: rgba(240,168,50,.07); border-color: var(--yellow); }
.rec-danger { background: rgba(232,68,90,.07);  border-color: var(--red); }
.rec-info   { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.15); }
.scan-tracks-wrap { padding: 20px 24px; }
.scan-track-row { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.scan-track-row:last-child { border-bottom: none; }
.scan-track-num { font-size: 11px; color: var(--text-dim); min-width: 18px; text-align: right; padding-top: 3px; }
.scan-track-ts { font-size: 11px; color: var(--accent); font-family: monospace; min-width: 38px; padding-top: 3px; }
.scan-track-info { flex: 1; min-width: 0; }
.scan-track-title { font-weight: 600; font-size: 14px; font-family: var(--font-display); }
.scan-track-artist { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.scan-track-label-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.scan-track-label { font-size: 11px; color: var(--text-dim); background: rgba(255,255,255,.04); padding: 2px 7px; border-radius: 4px; }
.scan-track-note { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.05); color: var(--text-muted); }
.scan-track-detail { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 5px; }
.scan-track-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.scan-track-action { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.scan-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 20px 24px; border-top: 1px solid var(--border); }
.scan-add-db-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 24px 24px; padding: 16px 20px; background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: var(--radius-md); }
.scan-add-db-text { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.scan-add-db-text strong { color: var(--accent); }
.scan-add-db-text span { color: var(--text-muted); font-size: 12px; }

/* ============================================================
   MIX BUILDER
   ============================================================ */
.builder-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.builder-add-card, .builder-score-card, .tracklist-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px;
}
.builder-score-card { text-align: center; margin-bottom: 16px; }
.score-ring-wrap { position: relative; width: 120px; height: 120px; margin: 0 auto 12px; }
.score-ring-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 8; }
.score-ring-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .6s ease, stroke .3s; transform: rotate(-90deg); transform-origin: 50% 50%; }
.score-ring-text { font-family: var(--font-display); font-size: 28px; font-weight: 900; }
.score-ring-label { font-size: 11px; fill: rgba(200,210,255,0.5); }
.score-status-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.score-sub { font-size: 12px; color: var(--text-muted); }
.score-bar-wrap { margin-top: 16px; }
.score-bar-track { height: 6px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.score-bar-fill { height: 100%; background: var(--grad-se); border-radius: 999px; transition: width .5s ease; }
.form-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.form-input {
  flex: 1; min-width: 120px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-body); font-size: 14px;
  padding: 10px 14px; outline: none; transition: border-color .2s;
}
.form-input:focus { border-color: var(--accent-border); }
.form-input::placeholder { color: var(--text-dim); }
.tracklist-card { margin-top: 0; }
.tracklist-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tracklist-count { font-family: var(--font-display); font-size: 13px; color: var(--text-muted); }
.tracklist-empty { text-align: center; padding: 32px; color: var(--text-dim); font-size: 14px; }
.track-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.track-item:last-child { border-bottom: none; }
.track-item-num { font-size: 12px; color: var(--text-dim); min-width: 20px; text-align: center; font-family: var(--font-display); }
.track-item-info { flex: 1; min-width: 0; }
.track-item-title { font-size: 14px; font-weight: 600; font-family: var(--font-display); }
.track-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.track-item-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; font-size: 16px; transition: color .2s; line-height: 1; }
.track-item-remove:hover { color: var(--red); }

/* ============================================================
   DJ RESOURCES
   ============================================================ */
.resource-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.resource-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 10px 20px; cursor: pointer; margin-bottom: -1px; transition: all .2s;
}
.resource-tab:hover { color: var(--text); }
.resource-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.resource-panel { display: none; }
.resource-panel.active { display: block; }

.label-search-wrap { margin-bottom: 16px; }
.label-search {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--text);
  font-family: var(--font-body); font-size: 14px; padding: 10px 20px; outline: none;
  transition: border-color .2s;
}
.label-search:focus { border-color: var(--accent-border); }
.label-search::placeholder { color: var(--text-dim); }

.label-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.label-table { width: 100%; border-collapse: collapse; }
.label-table th { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim); padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.label-table td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
.label-table tr:last-child td { border-bottom: none; }
.label-table tr:hover td { background: var(--bg-hover); }

.guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.guide-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; cursor: pointer; transition: all .2s; }
.guide-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.guide-card h4 { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.guide-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.guide-card a { font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 600; }

.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tool-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; cursor: pointer; transition: all .2s; }
.tool-card:hover { border-color: var(--border-hover); background: var(--bg-card-2); }
.tool-card svg { margin-bottom: 12px; }
.tool-card h4 { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.tool-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ============================================================
   FORECAST PAGE
   ============================================================ */
.forecast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.forecast-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; position: relative; overflow: hidden;
}
.forecast-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-se);
}
.forecast-card-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.forecast-card-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }

/* Revenue Forecasting */
.revenue-inputs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.revenue-input-row { display: flex; flex-direction: column; gap: 5px; }
.revenue-input-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.revenue-slider {
  -webkit-appearance: none; width: 100%; height: 4px;
  background: rgba(255,255,255,.1); border-radius: 999px; outline: none;
}
.revenue-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent); cursor: pointer;
  box-shadow: 0 0 8px var(--accent-glow);
}
.revenue-slider-val { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--accent); }

.revenue-results { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.revenue-breakdown { display: flex; flex-direction: column; gap: 10px; }
.rev-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.rev-row-label { color: var(--text-muted); }
.rev-row-val { font-family: var(--font-display); font-weight: 700; }
.rev-row.total { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; }
.rev-row.total .rev-row-val { font-size: 22px; color: var(--accent); }
.rev-disclaimer { font-size: 11px; color: var(--text-dim); margin-top: 10px; text-align: center; }

/* Claim Probability */
.claim-search-row { display: flex; gap: 10px; margin-bottom: 16px; }
.claim-search {
  flex: 1; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--text);
  font-family: var(--font-body); font-size: 14px; padding: 10px 18px; outline: none;
  transition: border-color .2s;
}
.claim-search:focus { border-color: var(--accent-border); }
.claim-search::placeholder { color: var(--text-dim); }
.claim-results { display: flex; flex-direction: column; gap: 10px; }
.claim-track-row {
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.claim-track-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.claim-track-info .claim-title { font-weight: 600; font-size: 14px; font-family: var(--font-display); }
.claim-track-info .claim-artist { font-size: 12px; color: var(--text-muted); }
.claim-pct-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.claim-pct-num { font-family: var(--font-display); font-size: 22px; font-weight: 900; }
.claim-pct-label { font-size: 10px; color: var(--text-muted); }
.claim-bar-track { height: 5px; background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; }
.claim-bar-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }
.claim-factors { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.claim-factor { font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(255,255,255,.05); color: var(--text-muted); }

/* Trend Watch */
.trend-full { grid-column: 1 / -1; }
.trend-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.trend-filter-btn {
  background: var(--bg-card-2); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  padding: 5px 14px; cursor: pointer; transition: all .2s;
}
.trend-filter-btn:hover { border-color: var(--border-hover); color: var(--text); }
.trend-filter-btn.active { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); }
.trend-list { display: flex; flex-direction: column; gap: 10px; }
.trend-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 18px;
  transition: border-color .2s;
}
.trend-row:hover { border-color: var(--border-hover); }
.trend-label-info { flex: 1; }
.trend-label-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.trend-label-parent { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.trend-change-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.trend-change {
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  display: flex; align-items: center; gap: 4px;
}
.trend-up   { color: var(--red); }
.trend-down { color: var(--accent); }
.trend-flat { color: var(--text-muted); }
.trend-change-label { font-size: 10px; color: var(--text-dim); }
.trend-sparkline { width: 80px; height: 28px; }
.trend-badge {
  font-size: 10px; font-weight: 700; font-family: var(--font-display);
  padding: 3px 8px; border-radius: var(--radius-pill); letter-spacing: .5px;
}
.trend-badge-hot   { background: rgba(232,68,90,.15); color: var(--red); border: 1px solid rgba(232,68,90,.25); }
.trend-badge-cool  { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-border); }
.trend-badge-watch { background: rgba(240,168,50,.15); color: var(--yellow); border: 1px solid rgba(240,168,50,.25); }
.trend-badge-stable{ background: rgba(255,255,255,.05); color: var(--text-muted); border: 1px solid var(--border); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-accent {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: var(--bg);
  border: none; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  padding: 11px 24px; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.btn-accent:hover { background: var(--accent-hover); box-shadow: 0 4px 20px var(--accent-glow); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--border);
  color: var(--text-muted); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  padding: 11px 24px; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.btn-outline:hover { border-color: var(--border-hover); color: var(--text); }
.btn-ghost { background: none; border: none; color: var(--text-muted); font-family: var(--font-body); font-size: 14px; cursor: pointer; padding: 0 4px; transition: color .2s; }
.btn-ghost:hover { color: var(--text); }
.btn-sm { font-size: 13px !important; padding: 8px 16px !important; }
.btn-accent-sm {
  background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  padding: 8px 16px; cursor: pointer; transition: background .2s; white-space: nowrap;
}
.btn-accent-sm:hover { background: var(--accent-hover); }
.btn-text-link { background: none; border: none; color: var(--accent); cursor: pointer; font-family: var(--font-body); font-size: 14px; padding: 0; text-decoration: underline; }

/* ============================================================
   AUTH MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.8); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 20px; padding: 36px 32px; width: 100%; max-width: 420px;
  position: relative; animation: modalPop .25s ease;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,.06); border: none; color: var(--text-muted);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.modal-close:hover { background: rgba(255,255,255,.12); color: var(--text); }
.modal-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.modal-logo-icon { width: 32px; height: 32px; border-radius: 7px; overflow: hidden; }
.modal-logo-icon img { width: 100%; height: 100%; object-fit: cover; }
.modal-logo-name { font-family: var(--font-display); font-size: 14px; font-weight: 800; background: var(--grad-se-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.modal-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.auth-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.btn-social {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 12px; cursor: pointer; transition: all .2s;
}
.btn-social:hover { background: rgba(255,255,255,.1); border-color: var(--border-hover); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 12px; margin-bottom: 20px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; }
.auth-input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font-body); font-size: 14px; padding: 11px 14px; outline: none;
  transition: border-color .2s;
}
.auth-input:focus { border-color: var(--accent-border); }
.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-right: 42px; }
.auth-eye-btn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px;
}
.auth-forgot { display: block; text-align: right; font-size: 12px; color: var(--accent); background: none; border: none; cursor: pointer; margin-bottom: 16px; padding: 0; }
.auth-forgot:hover { text-decoration: underline; }
.btn-auth-submit {
  width: 100%; background: var(--accent); color: var(--bg);
  border: none; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  padding: 13px; cursor: pointer; margin-bottom: 16px; transition: all .2s;
}
.btn-auth-submit:hover { background: var(--accent-hover); box-shadow: 0 4px 20px var(--accent-glow); }
.btn-auth-submit:disabled { opacity: .5; cursor: not-allowed; }
.auth-error { color: var(--red); font-size: 13px; margin-bottom: 12px; min-height: 16px; }
.auth-toggle { text-align: center; font-size: 13px; color: var(--text-muted); }
.auth-toggle button { background: none; border: none; color: var(--accent); cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.auth-terms { text-align: center; font-size: 11px; color: var(--text-dim); margin-top: 16px; }
.auth-terms a { color: var(--text-muted); }
.hidden-field { display: none; }

/* ============================================================
   USER WIDGET
   ============================================================ */
.user-widget {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 6px 14px 6px 6px;
  cursor: pointer; position: relative; transition: border-color .2s;
}
.user-widget:hover { border-color: var(--border-hover); }
.user-avatar-wrap { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--accent-dim); border: 1px solid var(--accent-border); display: flex; align-items: center; justify-content: center; }
.user-name { font-size: 13px; font-weight: 600; font-family: var(--font-display); }
.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); width: 220px; overflow: hidden; z-index: 400;
  animation: fadeUp .2s ease; display: none;
}
.user-dropdown.visible { display: block; }
.dropdown-header { padding: 14px 16px; display: flex; align-items: center; gap: 10px; background: var(--bg-card); }
.dropdown-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--accent-dim); border: 1px solid var(--accent-border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dropdown-name { font-size: 14px; font-weight: 700; font-family: var(--font-display); }
.dropdown-email { font-size: 11px; color: var(--text-muted); }
.dropdown-divider { height: 1px; background: var(--border); }
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 16px;
  background: none; border: none; color: var(--text-muted);
  font-family: var(--font-body); font-size: 13px;
  cursor: pointer; text-align: left; transition: all .15s;
}
.dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
.dropdown-item-danger:hover { color: var(--red); }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: calc(var(--mob-nav-h) + 16px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 12px 24px;
  font-size: 13px; font-weight: 500; font-family: var(--font-display);
  z-index: 999; opacity: 0; transition: all .3s; white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { border-color: var(--accent-border); color: var(--accent); }
.toast-error   { border-color: rgba(232,68,90,.3); color: var(--red); }

/* ============================================================
   MOBILE NAV
   ============================================================ */
.nav-mobile {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--mob-nav-h);
  background: rgba(7, 8, 15, 0.96);
  backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  z-index: 9999;
  justify-content: space-around; align-items: center;
}
.mob-nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; color: var(--text-muted);
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  cursor: pointer; padding: 8px 12px; border-radius: var(--radius-sm);
  transition: all .2s; min-width: 52px;
}
.mob-nav-btn:hover { color: var(--text); }
.mob-nav-btn.active { color: var(--accent); }
.mob-nav-btn.active svg { stroke: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); }
#mobSigninBtn { color: var(--accent); }
#mobSigninBtn svg { stroke: var(--accent); }

/* ============================================================
   MUSICBRAINZ
   ============================================================ */
.mb-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--accent-dim); border-top-color: var(--accent);
  border-radius: 50%; animation: mbSpin .7s linear infinite; flex-shrink: 0;
}
@keyframes mbSpin { to { transform: rotate(360deg); } }
.mb-live-lookup { padding: 8px 0; }
.mb-lookup-header { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.mb-result { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; }
.mb-result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mb-result-track { font-size: 16px; font-weight: 700; font-family: var(--font-display); }
.mb-result-artist { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.mb-result-label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.mb-result-note { margin-top: 10px; font-size: 12px; color: var(--text-muted); background: rgba(255,255,255,.02); border-left: 2px solid var(--accent); padding: 6px 10px; border-radius: 0 6px 6px 0; }
.mb-result-source { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.mb-source-badge { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); background: rgba(255,255,255,.04); padding: 3px 8px; border-radius: 4px; }
.mb-mbid-link { font-size: 11px; color: var(--accent); text-decoration: none; opacity: .7; transition: opacity .2s; }
.mb-mbid-link:hover { opacity: 1; }
.mb-not-found { color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pill-unknown { background: rgba(120,120,160,.15); color: #8888a8; border: 1px solid rgba(120,120,160,.2); }
.dot-unknown { background: #8888a8; }
.badge-unknown { background: rgba(120,120,160,.15); color: #8888a8; }

/* ============================================================
   MISC
   ============================================================ */
.empty-state { text-align: center; padding: 40px; color: var(--text-dim); font-size: 14px; }
.hidden { display: none !important; }
.se-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  color: var(--text-dim); text-transform: uppercase;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 3px 10px; font-family: var(--font-display);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .nav-desktop { display: none !important; }
  .nav-mobile  { display: flex; }
  .main        { padding-bottom: calc(var(--mob-nav-h) + 24px); }
  .forecast-grid { grid-template-columns: 1fr; }
  .builder-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .upload-area { grid-template-columns: 1fr; }
  .hero-title  { font-size: 32px; }
  .stats-bar   { flex-wrap: wrap; }
  .stat-item   { min-width: 45%; border-right: none; border-bottom: 1px solid var(--border); }
  .scan-stats-row { flex-wrap: wrap; }
  .scan-stat   { min-width: 50%; }
  .yt-input-row { flex-direction: column; }
  .scan-track-detail { display: none; }
  .scan-actions { flex-direction: column; }
  .list-row    { grid-template-columns: 28px 1fr auto; }
  .list-row > div:nth-child(3), .list-row > div:nth-child(4) { display: none; }
  .trend-sparkline { display: none; }
}
@media (max-width: 600px) {
  .main { padding: 24px 16px 100px; }
  .modal-card { padding: 28px 20px; }
}

/* ============================================================
   COPYRIGHT INTELLIGENCE
   ============================================================ */
.cr-search-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.cr-search-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--purple));
}
.cr-search-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 800;
  margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.cr-search-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.6; }
.cr-input-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cr-input {
  flex: 1; min-width: 160px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text); font-family: var(--font-body); font-size: 14px;
  padding: 11px 18px; outline: none; transition: border-color .2s;
}
.cr-input:focus { border-color: var(--accent-border); }
.cr-input::placeholder { color: var(--text-dim); }
.cr-error { font-size: 13px; color: var(--red); margin-top: 6px; }
.cr-error.hidden { display: none; }

.cr-sources-legend {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.cr-source-pill {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-dim); font-family: var(--font-display);
  font-weight: 600; letter-spacing: .4px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: var(--radius-pill);
}

/* Loading */
.cr-loading { padding: 40px; text-align: center; }
.cr-loading-inner { display: inline-flex; flex-direction: column; align-items: center; gap: 16px; }
.cr-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--accent-dim); border-top-color: var(--accent);
  animation: crSpin .8s linear infinite;
}
@keyframes crSpin { to { transform: rotate(360deg); } }
.cr-loading-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.cr-loading-steps { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.cr-step { font-size: 12px; color: var(--text-dim); padding: 3px 0; }
.cr-step.active { color: var(--accent); }

/* Summary */
.cr-summary {
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  border-radius: var(--radius-md); padding: 14px 18px;
  font-size: 13px; line-height: 1.6; color: var(--text-muted);
  margin-bottom: 16px;
}

/* Result card */
.cr-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  margin-bottom: 14px; overflow: hidden;
  transition: transform .2s;
}
.cr-card:hover { transform: translateY(-2px); }

.cr-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 20px 24px 16px;
}
.cr-card-track {
  font-family: var(--font-display); font-size: 18px; font-weight: 800;
  margin-bottom: 3px;
}
.cr-card-artist { font-size: 13px; color: var(--text-muted); }
.cr-rating-wrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  background: rgba(0,0,0,.2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px; flex-shrink: 0;
}
.cr-stars { font-size: 16px; letter-spacing: 1px; }
.cr-rating-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .5px; }

.cr-card-meta {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 24px 16px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.cr-meta-row { display: flex; align-items: baseline; gap: 12px; font-size: 13px; }
.cr-meta-label { color: var(--text-dim); font-size: 11px; font-family: var(--font-display); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; min-width: 130px; flex-shrink: 0; }
.cr-meta-val { color: var(--text); flex: 1; }
.cr-mono { font-family: monospace; font-size: 12px; color: var(--accent); }

.cr-pro-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  font-family: var(--font-display); letter-spacing: .5px;
  background: var(--purple-dim); border: 1px solid var(--purple-border);
  color: #a076e8; padding: 2px 8px; border-radius: var(--radius-pill);
  margin-right: 5px;
}

.cr-assessment {
  margin: 0 24px 16px; padding: 12px 16px;
  background: rgba(255,255,255,.03); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px; color: var(--text-muted); line-height: 1.6;
}

.cr-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--text-dim);
  text-transform: uppercase; font-family: var(--font-display);
  margin-bottom: 8px;
}

.cr-usage-wrap, .cr-sources-wrap { padding: 12px 24px; border-top: 1px solid rgba(255,255,255,.05); }
.cr-usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cr-usage-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255,255,255,.03); border-radius: var(--radius-sm); padding: 8px 12px;
}
.cr-usage-type { font-size: 12px; color: var(--text-muted); }
.cr-usage-status { font-size: 11px; font-weight: 700; font-family: var(--font-display); letter-spacing: .4px; }
.cr-usage-allowed  { color: var(--accent); }
.cr-usage-caution  { color: var(--gold); }
.cr-usage-blocked  { color: var(--red); }
.cr-usage-licensed { color: #4db8ff; }

.cr-sources-list { display: flex; flex-direction: column; gap: 5px; }
.cr-source-row {
  display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 4px 0;
}
.cr-source-name { color: var(--text-muted); min-width: 120px; flex-shrink: 0; }
.cr-source-result { font-weight: 700; font-family: var(--font-display); font-size: 11px; }
.cr-source-found     { color: var(--accent); }
.cr-source-not-found { color: var(--text-dim); }
.cr-source-detail { font-size: 11px; color: var(--text-dim); flex: 1; }

.cr-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.05);
}
.cr-footer-rec {
  font-size: 13px; line-height: 1.5; flex: 1;
  padding: 8px 12px; border-radius: var(--radius-sm); border-left: 3px solid;
}
.cr-license-link {
  font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.cr-license-link:hover { text-decoration: underline; }

.cr-no-results, .cr-error-state {
  text-align: center; padding: 40px 20px; color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 14px;
}
.cr-results-list { margin-bottom: 12px; }
.cr-disclaimer {
  font-size: 11px; color: var(--text-dim); text-align: center;
  padding: 12px; line-height: 1.6; border-top: 1px solid var(--border);
}

/* Inline badge in scan results */
.cr-inline-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid; border-radius: var(--radius-pill);
  padding: 3px 10px; font-size: 11px; margin-top: 5px;
}
.cr-inline-stars { font-size: 11px; }
.cr-inline-label { font-weight: 700; font-family: var(--font-display); letter-spacing: .3px; }
.cr-inline-pub { color: var(--text-dim); font-size: 10px; }

/* Rating info bar */
.cr-rating-legend {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
}
.cr-legend-item {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--text-muted); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 5px 12px;
}

@media (max-width: 768px) {
  .cr-card-header { flex-direction: column; }
  .cr-rating-wrap { align-items: flex-start; flex-direction: row; gap: 10px; }
  .cr-usage-grid  { grid-template-columns: 1fr; }
  .cr-meta-label  { min-width: 90px; }
  .cr-card-footer { flex-direction: column; align-items: flex-start; }
}

/* ── Copyright loading v2 ─────────────────────────────────────── */
.cr-spinner-wrap {
  position: relative; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.cr-spinner-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--accent-dim); border-top-color: var(--accent);
  animation: crSpin .9s linear infinite;
}
.cr-spinner-icon {
  font-size: 18px; color: var(--accent); font-weight: 700; z-index: 1;
}
.cr-loading-query {
  font-size: 14px; color: var(--text); font-family: var(--font-display);
  font-weight: 700; max-width: 400px; text-align: center;
}
.cr-loading-step-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,212,184,.06); border: 1px solid rgba(0,212,184,.15);
  border-radius: var(--radius-pill); padding: 8px 16px;
}
.cr-step-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0; animation: pulse 1s ease-in-out infinite;
}
.cr-step-text { font-size: 13px; color: var(--accent); font-family: var(--font-display); font-weight: 600; }
.cr-loading-sources { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cr-src-tag {
  font-size: 10px; font-weight: 700; font-family: var(--font-display); letter-spacing: .5px;
  color: var(--text-dim); background: rgba(255,255,255,.04); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: var(--radius-pill);
}
.cr-loading-note { font-size: 11px; color: var(--text-dim); text-align: center; }

/* ── Copyright loading extras ─────────────────────────── */
.cr-spinner-wrap {
  position: relative; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.cr-spinner-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--accent-dim); border-top-color: var(--accent);
  animation: crSpin .9s linear infinite;
}
.cr-spinner-icon {
  font-size: 18px; font-weight: 700; color: var(--accent);
  font-family: var(--font-display); z-index: 1;
}
.cr-loading-query {
  font-size: 15px; font-weight: 700; color: var(--text);
  font-family: var(--font-display); margin-top: -4px;
}
.cr-loading-step-row {
  display: flex; align-items: center; gap: 8px; margin: 4px 0;
}
.cr-step-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0; animation: crPulse 1.2s ease-in-out infinite;
}
@keyframes crPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
.cr-step-text { font-size: 13px; color: var(--accent); font-family: var(--font-display); font-weight: 600; }
.cr-loading-sources { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cr-src-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  font-family: var(--font-display); color: var(--text-dim);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: var(--radius-pill);
}
.cr-loading-note { font-size: 12px; color: var(--text-dim); }