/* ═══════════════════════════════════════════════════════════════════
   FITFORGE TRACKER v3 — 2026 LUXURY DESIGN UPGRADE
   Animated mesh gradients · Crystal glass · Plasma glow · Premium UX
   ═══════════════════════════════════════════════════════════════════ */

/* ── 2026 Token Upgrades ────────────────────────────────────── */
:root {
  /* Plasma spectrum */
  --p1: #00EEFF; --p2: #3366FF; --p3: #8822FF;
  --grad-plasma: linear-gradient(135deg, #00EEFF 0%, #3366FF 50%, #8822FF 100%);
  --grad-plasma-v: linear-gradient(180deg, #00EEFF 0%, #3366FF 100%);

  /* Fire spectrum */
  --f1: #FF1F55; --f2: #FF6B00; --f3: #FFCC00;
  --grad-fire: linear-gradient(135deg, #FF1F55 0%, #FF6B00 55%, #FFCC00 100%);

  /* Emerald */
  --em1: #00FF88; --em2: #00CCAA;
  --grad-emerald: linear-gradient(135deg, #00FF88 0%, #00CCAA 100%);

  /* Crystal glass */
  --crystal:        rgba(255,255,255,0.038);
  --crystal-hover:  rgba(255,255,255,0.065);
  --crystal-border: rgba(255,255,255,0.092);
  --crystal-blur:   blur(28px) saturate(170%);

  /* Mesh gradients */
  --mesh-1: radial-gradient(ellipse at 15% 40%, rgba(0,238,255,0.055) 0%, transparent 55%);
  --mesh-2: radial-gradient(ellipse at 85% 15%, rgba(51,102,255,0.045) 0%, transparent 50%);
  --mesh-3: radial-gradient(ellipse at 50% 90%, rgba(136,34,255,0.035) 0%, transparent 55%);
  --mesh-4: radial-gradient(ellipse at 75% 65%, rgba(255,107,0,0.025) 0%, transparent 50%);

  /* Neon glows v2 */
  --glow-p-xs: 0 0 6px rgba(0,238,255,0.22);
  --glow-p-sm: 0 0 14px rgba(0,238,255,0.32), 0 0 28px rgba(0,238,255,0.14);
  --glow-p-md: 0 0 22px rgba(0,238,255,0.40), 0 0 45px rgba(0,238,255,0.18);
  --glow-p-lg: 0 0 35px rgba(0,238,255,0.50), 0 0 70px rgba(51,102,255,0.22);
  --glow-f-sm: 0 0 14px rgba(255,107,0,0.32),  0 0 28px rgba(255,204,0,0.14);
  --glow-e-sm: 0 0 14px rgba(0,255,136,0.30),  0 0 28px rgba(0,204,170,0.12);

  /* Typography v2 */
  --font-brand:   'Audiowide', sans-serif;
  --font-display: 'Syne', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

/* ── Animated Mesh Background ───────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--mesh-1), var(--mesh-2), var(--mesh-3), var(--mesh-4);
  animation: meshShift 20s ease-in-out infinite alternate;
}

@keyframes meshShift {
  0%   { opacity: 0.8; transform: scale(1) translate(0,0); }
  33%  { opacity: 1.0; transform: scale(1.05) translate(-1%,-1%); }
  66%  { opacity: 0.9; transform: scale(0.97) translate(1%,0); }
  100% { opacity: 1.0; transform: scale(1.02) translate(0,1%); }
}

/* ── Crystal Glass v2 ───────────────────────────────────────── */
.glass, .card, .chart-wrapper, .media-info-bar,
.url-input-section, .dl-config-grid, .dl-advanced-row,
.quality-list, .dl-action-bar, .monetization-form-panel,
.earnings-main-card, .earnings-breakdown, .ai-input-section,
.ai-output-panel, .hook-card, .tool-card {
  backdrop-filter: var(--crystal-blur) !important;
  -webkit-backdrop-filter: var(--crystal-blur) !important;
}

/* ── Scrollbar 2026 ─────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #00EEFF44, #3366FF44); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #00EEFF88, #3366FF88); }

/* ── Neon Text v2 ───────────────────────────────────────────── */
.neon-text  { background: var(--grad-plasma); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.fire-text  { background: var(--grad-fire);   -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.green-text { background: var(--grad-emerald);-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── Buttons v2 ─────────────────────────────────────────────── */
.btn-primary {
  background: var(--grad-plasma) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  position: relative; overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.btn-primary:hover::after { transform: translateX(100%); }
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: var(--glow-p-md), 0 8px 25px rgba(0,0,0,0.4) !important;
}

.btn-forge {
  background: var(--grad-fire) !important;
  color: #fff !important;
  font-weight: 700;
}
.btn-forge:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--glow-f-sm), 0 8px 25px rgba(0,0,0,0.4) !important;
}

/* ── Input 2026 ─────────────────────────────────────────────── */
.input-field:focus {
  border-color: rgba(0,238,255,0.5) !important;
  box-shadow: var(--glow-p-sm), inset 0 0 0 1px rgba(0,238,255,0.12) !important;
}
.input-field { transition: all 0.25s ease !important; }
.dl-config-select:focus { border-color: rgba(0,238,255,0.4) !important; }

/* ── Sidebar 2026 ───────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, rgba(3,3,14,0.97) 0%, rgba(6,6,22,0.96) 100%) !important;
  border-right: 1px solid rgba(0,238,255,0.08) !important;
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(0,238,255,0.12) 0%, rgba(0,238,255,0.04) 100%) !important;
  border-color: rgba(0,238,255,0.18) !important;
  color: var(--p1) !important;
}
.nav-item.active::before {
  background: var(--grad-plasma) !important;
  box-shadow: var(--glow-p-sm) !important;
}
.nav-item:hover { box-shadow: inset 0 0 0 1px rgba(0,238,255,0.06); }

/* ── Topbar 2026 ────────────────────────────────────────────── */
.topbar {
  background: rgba(3,3,14,0.88) !important;
  border-bottom: 1px solid rgba(0,238,255,0.07) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
}
.topbar-title span { color: var(--p1) !important; }

/* ── Quality List 2026 ──────────────────────────────────────── */
.quality-row-item {
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.quality-row-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--grad-plasma);
  transform: scaleY(0);
  transition: transform 0.2s;
  border-radius: 2px;
}
.quality-row-item:hover::before { transform: scaleY(1); }
.quality-row-item.selected {
  background: rgba(0,238,255,0.07) !important;
  border-color: rgba(0,238,255,0.35) !important;
  box-shadow: var(--glow-p-xs), inset 0 0 20px rgba(0,238,255,0.04) !important;
}
.quality-row-item.selected::before { transform: scaleY(1); }

/* ── Cards 2026 ─────────────────────────────────────────────── */
.card {
  transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.card:hover {
  border-color: rgba(0,238,255,0.14) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ── Tool Cards 2026 ────────────────────────────────────────── */
.tool-card:hover {
  border-color: rgba(0,238,255,0.2) !important;
  box-shadow: var(--glow-p-xs), 0 16px 48px rgba(0,0,0,0.6) !important;
  transform: translateY(-5px) !important;
}

/* ── Platform Pills 2026 ────────────────────────────────────── */
.platform-pill {
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.platform-pill:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
}

/* ── Media Info Bar 2026 ────────────────────────────────────── */
.media-info-bar {
  background: linear-gradient(135deg, rgba(0,238,255,0.06), rgba(51,102,255,0.04)) !important;
  border-color: rgba(0,238,255,0.18) !important;
  box-shadow: var(--glow-p-xs) !important;
  animation: fadeInUp 0.4s ease both !important;
}

/* ── Badges 2026 ────────────────────────────────────────────── */
.badge-cyan { background: rgba(0,238,255,0.12) !important; color: var(--p1) !important; border-color: rgba(0,238,255,0.22) !important; }

/* ── Toast 2026 ─────────────────────────────────────────────── */
.toast {
  background: rgba(8,8,24,0.96) !important;
  border-color: rgba(0,238,255,0.15) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), var(--glow-p-xs) !important;
}
.toast.success { border-left-color: var(--em1) !important; }
.toast.error   { border-left-color: var(--f1) !important; }
.toast.info    { border-left-color: var(--p1) !important; }
.toast.warning { border-left-color: var(--f2) !important; }

/* ── Action Bar 2026 ────────────────────────────────────────── */
.dl-action-bar {
  background: linear-gradient(135deg, rgba(0,238,255,0.06), rgba(51,102,255,0.03)) !important;
  border-color: rgba(0,238,255,0.18) !important;
  box-shadow: var(--glow-p-xs) !important;
}

/* ── Progress Bar 2026 ──────────────────────────────────────── */
.progress-fill {
  background: var(--grad-plasma) !important;
  box-shadow: var(--glow-p-sm) !important;
}

/* ── URL Input Section 2026 ─────────────────────────────────── */
.url-input-section {
  border-color: rgba(0,238,255,0.18) !important;
  background: linear-gradient(135deg, rgba(0,238,255,0.05), rgba(51,102,255,0.03)) !important;
}
.url-input-section:has(input:focus) {
  border-color: rgba(0,238,255,0.45) !important;
  box-shadow: var(--glow-p-sm) !important;
}

/* ── Stat Cards 2026 ────────────────────────────────────────── */
.stat-card::before {
  background: linear-gradient(90deg, transparent 0%, rgba(0,238,255,0.35) 50%, transparent 100%) !important;
}
.stat-card:hover {
  border-color: rgba(0,238,255,0.22) !important;
  box-shadow: var(--glow-p-sm), 0 16px 48px rgba(0,0,0,0.6) !important;
}
.stat-value {
  background: var(--grad-plasma) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Competitive Panel 2026 ─────────────────────────────────── */
.competitive-panel { border-color: rgba(136,34,255,0.25) !important; }
.competitive-title { color: #A855F7 !important; }

/* ── Earnings Card 2026 ─────────────────────────────────────── */
.earnings-main-card {
  background: linear-gradient(135deg, rgba(0,238,255,0.09), rgba(51,102,255,0.06)) !important;
  border-color: rgba(0,238,255,0.25) !important;
  box-shadow: var(--glow-p-sm) !important;
}

/* ── Loading Screen 2026 ────────────────────────────────────── */
#loading-screen { background: radial-gradient(ellipse at 50% 50%, #060616, #020208) !important; }
.loading-bar-fill { background: var(--grad-plasma) !important; box-shadow: var(--glow-p-sm) !important; }
.loading-logo-wrap::before { border-top-color: var(--p1) !important; }
.loading-logo-wrap::after  { border-bottom-color: rgba(51,102,255,0.5) !important; }

/* ── Channel Info 2026 ──────────────────────────────────────── */
.channel-avatar { background: var(--grad-plasma) !important; box-shadow: var(--glow-p-sm) !important; }

/* ── SEO Ring 2026 ──────────────────────────────────────────── */
.seo-score-val { background: var(--grad-plasma); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── AI Output Panel 2026 ───────────────────────────────────── */
.ai-output-panel { border-color: rgba(0,238,255,0.18) !important; }
.ai-output-panel::before { color: var(--p1) !important; }
.ai-output-section-title { color: var(--p1) !important; }
.ai-bullet::before { color: var(--p1) !important; }
.hook-card { border-left-color: var(--p1) !important; }
.hook-card:hover { border-left-color: var(--p1) !important; box-shadow: -2px 0 8px rgba(0,238,255,0.3) !important; }

/* ── Copy Button Floating ───────────────────────────────────── */
.copy-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: 10px; font-weight: 700;
  border-radius: var(--rfull); cursor: pointer;
  background: rgba(0,238,255,0.1); color: var(--p1);
  border: 1px solid rgba(0,238,255,0.2);
  transition: all 0.15s ease;
  user-select: none;
}
.copy-btn:hover { background: rgba(0,238,255,0.18); box-shadow: var(--glow-p-xs); }
.copy-btn.copied { background: rgba(0,255,136,0.12); color: var(--em1); border-color: rgba(0,255,136,0.2); }

/* ── Picker 2026 ────────────────────────────────────────────── */
.picker-item:hover { border-color: rgba(0,238,255,0.45) !important; }
.picker-item.selected { border-color: var(--p1) !important; box-shadow: var(--glow-p-sm) !important; }
.picker-check { background: var(--p1) !important; }

/* ── Queue Item 2026 ────────────────────────────────────────── */
.queue-file-icon { background: rgba(0,238,255,0.1) !important; color: var(--p1) !important; }
.queue-status.completed { color: var(--em1) !important; }
.queue-status.downloading { color: var(--p1) !important; }

/* ── Hover effect for nav section labels ────────────────────── */
.sidebar-section-label {
  background: linear-gradient(90deg, var(--p1) 0%, var(--p2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  opacity: 0.7;
}

/* ── Toggle switch 2026 ─────────────────────────────────────── */
.toggle-switch input:checked + .toggle-slider {
  background: rgba(0,238,255,0.15) !important;
  border-color: rgba(0,238,255,0.35) !important;
}
.toggle-switch input:checked + .toggle-slider::before {
  background: var(--p1) !important;
  box-shadow: var(--glow-p-xs) !important;
}

/* ── Quality option 2026 ────────────────────────────────────── */
.quality-option.selected {
  border-color: var(--p1) !important;
  box-shadow: var(--glow-p-xs) !important;
}

/* ── Platform select card 2026 ──────────────────────────────── */
.platform-select-card.active {
  border-color: var(--p1) !important;
  background: rgba(0,238,255,0.08) !important;
  color: var(--p1) !important;
  box-shadow: var(--glow-p-xs) !important;
}

/* ── Shimmer on hover for tool cards ────────────────────────── */
.tool-card { position: relative; overflow: hidden; }
.tool-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Scrollbar on hover reveal ──────────────────────────────── */
.sidebar-nav { overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { width: 3px; }

/* ── Global copy state ──────────────────────────────────────── */
@keyframes copiedPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.copy-btn.copied { animation: copiedPulse 0.3s ease; }