/* Custom Modern Glassmorphism CSS Design System */
:root {
  /* Palette, retuned 2026-09-03: deep plum-black base with an electric violet -> cyan accent
     ramp. Deliberately NOT green-primary any more -- the annotated video overlays draw GREEN
     boxes on non-target players and a RED box on the target (CLAUDE.md §13.1), so a green UI
     accent competed visually with the very thing the user is meant to read on the video. Violet
     and cyan sit far from both overlay colours in hue, so the chrome never reads as data. */
  --bg-dark: #070512;
  --bg-deep: #0b0820;
  --bg-card: rgba(24, 18, 46, 0.72);
  --bg-card-hover: rgba(36, 26, 66, 0.85);
  --bg-elevated: rgba(44, 32, 80, 0.55);
  --border-color: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-glow: rgba(168, 85, 247, 0.38);

  --primary: #a855f7;
  --primary-deep: #7c3aed;
  --primary-soft: rgba(168, 85, 247, 0.14);
  --primary-glow: rgba(168, 85, 247, 0.45);

  --accent-cyan: #22d3ee;
  --accent-pink: #ec4899;
  --accent-gold: #fbbf24;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --accent-green: #34d399;
  --danger: #f43f5e;

  --gradient-primary: linear-gradient(135deg, #a855f7 0%, #22d3ee 100%);
  --gradient-warm: linear-gradient(135deg, #ec4899 0%, #fbbf24 100%);
  --gradient-sheen: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);

  --text-main: #f5f3ff;
  --text-muted: #a5a0c0;
  --text-dim: #6f6a8d;

  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px var(--border-glow), 0 12px 40px -12px var(--primary-glow);
  --backdrop-blur: blur(16px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.dark-theme {
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(at 0% 0%, rgba(168, 85, 247, 0.13) 0px, transparent 55%),
    radial-gradient(at 100% 0%, rgba(34, 211, 238, 0.10) 0px, transparent 50%),
    radial-gradient(at 85% 100%, rgba(236, 72, 153, 0.09) 0px, transparent 50%),
    radial-gradient(at 50% 60%, rgba(11, 8, 32, 0.6) 0px, transparent 100%);
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Glassmorphism Cards */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Header Navbar */
.navbar {
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: var(--backdrop-blur);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px 32px;
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  box-shadow: 0 0 20px var(--primary-glow);
}

.brand-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.5px;
}

.accent-text {
  color: var(--primary);
}

.brand-subtitle {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

.nav-stats {
  display: flex;
  gap: 12px;
}

.status-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.gpu-badge {
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--primary);
}

/* Layout Containers */
.main-container {
  max-width: 1400px;
  margin: 24px auto;
  padding: 0 24px 60px 24px;
}

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}

/* Pipeline Architecture Visualizer */
.pipeline-visualizer-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-header h2, .card-header h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge {
  background: rgba(16, 185, 129, 0.15);
  color: var(--primary);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

.badge-pulse i {
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.pipeline-flow-diagram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
}

.flow-step {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-align: center;
  min-width: 140px;
  flex: 1;
  transition: all 0.3s ease;
}

.flow-step.active {
  border-color: var(--primary);
  background: rgba(16, 185, 129, 0.1);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

.step-icon {
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 6px;
}

.step-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.step-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.flow-arrow {
  color: var(--text-dim);
  font-size: 14px;
}

/* Forms & Inputs */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.form-control:focus {
  border-color: var(--primary);
}

.upload-dropzone {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.upload-dropzone:hover {
  border-color: var(--primary);
  background: rgba(16, 185, 129, 0.05);
}

.upload-icon {
  font-size: 36px;
  color: var(--primary);
  margin-bottom: 10px;
}

.upload-text {
  font-size: 14px;
  font-weight: 600;
}

.upload-text span {
  color: var(--primary);
  text-decoration: underline;
}

.upload-sub {
  font-size: 12px;
  color: var(--text-dim);
}

/* Jersey Number Selection */
.jersey-input-row {
  display: flex;
  align-items: center;
}

.jersey-number-badge {
  background: var(--primary);
  color: #000;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 18px;
  padding: 10px 16px;
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.jersey-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
}

.jersey-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.chip-label {
  font-size: 12px;
  color: var(--text-dim);
}

.chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 4px 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chip:hover, .chip.active {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 12px 20px;
  transition: all 0.3s ease;
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 16px 24px;
  font-size: 16px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #059669);
  color: #000;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Terminal & Logs */
.terminal-logs {
  background: #050811;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  height: 220px;
  overflow-y: auto;

}

.log-entry {
  margin-bottom: 6px;
  line-height: 1.4;
}

.log-time {
  color: var(--text-dim);
  margin-right: 8px;
}

.log-info { color: var(--accent-cyan); }
.log-success { color: var(--primary); }
.log-error { color: #ef4444; }

/* Progress Bar */
.progress-wrapper {
  margin-bottom: 16px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.progress-bar-bg {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
}

.progress-bar-fill {
  background: linear-gradient(90deg, var(--primary), var(--accent-cyan));
  height: 100%;
  border-radius: 10px;
  transition: width 0.4s ease;
}

/* Results Dashboard Header Bar */
.dashboard-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 28px;
}

.player-profile-summary {
  display: flex;
  align-items: center;
  gap: 20px;
}

.jersey-avatar {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: #000;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.4);
}

.player-details h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 24px;
}

.player-meta-tags {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.meta-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Video & Stats Grid */
.grid-video-stats {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .grid-video-stats {
    grid-template-columns: 1fr;
  }
}

.video-player-wrapper video {
  width: 100%;
  border-radius: var(--radius-sm);
  background: #000;
  aspect-ratio: 16/9;
}

.video-toggles {
  display: flex;
  gap: 16px;
}

.toggle-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

/* Stat Card Container */
.stat-card-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.jersey-label {
  background: var(--accent-gold);
  color: #000;
  font-family: var(--font-heading);
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.stat-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stat-box.highlight-gold {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
}

.stat-box.highlight-cyan {
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.08);
}

.stat-icon {
  font-size: 16px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.highlight-gold .stat-value { color: var(--accent-gold); }
.highlight-cyan .stat-value { color: var(--accent-cyan); }

.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.secondary-metrics {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
}

.metric-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.metric-name { color: var(--text-muted); }
.metric-val { font-weight: 600; color: var(--primary); }

/* Pitch Canvas & Legend */
.pitch-container {
  display: flex;
  justify-content: center;
  background: #04140b;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 12px;
}

.pitch-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
}

.legend-run { color: var(--primary); }
.legend-sprint { color: var(--accent-gold); }
.legend-action { color: var(--accent-cyan); }

/* Events Table */
.table-wrapper {
  max-height: 380px;
  overflow-y: auto;
  margin-top: 12px;
}

.events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.events-table th, .events-table td {
  padding: 10px 14px;
  text-align: left;
}

.events-table th {
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-muted);
  font-weight: 600;
  position: sticky;
  top: 0;
}

.events-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s;
  cursor: pointer;
}

.events-table tr:hover {
  background: rgba(16, 185, 129, 0.08);
}

/* Highlights Reels Grid */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }
}

.reel-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reel-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
}

.reel-thumbnail {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gold-thumb { background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(239, 68, 68, 0.2)); }
.cyan-thumb { background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(59, 130, 246, 0.2)); }

.reel-icon {
  font-size: 32px;
  color: #fff;
  opacity: 0.8;
}

.reel-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

.reel-info {
  padding: 12px;
}

.reel-info h4 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}

.reel-info p {
  font-size: 11px;
  color: var(--text-muted);
}

/* Utilities */
.margin-top-sm { margin-top: 8px; }
.margin-top-md { margin-top: 16px; }
.margin-top-lg { margin-top: 24px; }
.hidden { display: none !important; }
.collapsible-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }

/* Click-to-track player picker (`/api/frame_players`): a snapshot at the paused instant, with one
   clickable box per detected player. Deliberately an <img> (not the <video> element) -- the
   snapshot's own pixel dimensions match the returned box coordinates exactly, with no letterbox/
   object-fit math needed, since the image has no fixed max-height forcing an aspect-ratio
   mismatch (the bug the raw click-on-video coordinate path had to work around instead). */
.frame-players-wrapper {
  position: relative;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
  line-height: 0; /* no baseline gap under the image */
}

.frame-players-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.player-box {
  position: absolute;
  border: 2px solid var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.player-box:hover {
  border-color: var(--primary);
  background: rgba(16, 185, 129, 0.22);
}

.player-box.selected {
  border-color: var(--accent-gold);
  background: rgba(245, 158, 11, 0.28);
  box-shadow: 0 0 12px var(--primary-glow);
}

.player-box-label {
  position: absolute;
  top: -20px;
  left: -2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #0b0f19;
  background: var(--accent-cyan);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}

.player-box.selected .player-box-label {
  background: var(--accent-gold);
}

/* ==========================================================================
   Interactive polish layer (added 2026-09-03)
   Appended rather than merged into the rules above so the base layout stays
   readable and every enhancement here is opt-out by deleting this one block.
   Everything is transform/opacity/filter-based (compositor-friendly) and every
   motion rule is disabled under prefers-reduced-motion at the end of the file.
   ========================================================================== */

/* --- entrance animation, staggered down the page --- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pipeline-visualizer-card,
.setup-section > *,
.click-track-section > * {
  animation: rise-in 0.55s var(--ease-out) both;
}
.setup-section > *:nth-child(2) { animation-delay: 0.08s; }
.click-track-section > *      { animation-delay: 0.16s; }

/* --- cards: lift + violet glow on hover, animated gradient hairline on top --- */
.glass-card {
  position: relative;
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease,
              box-shadow 0.35s ease, background 0.3s ease;
}

.glass-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.35s ease;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.glass-card:hover {
  transform: translateY(-3px);
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-glow);
}

.glass-card:hover::before { opacity: 1; }

/* --- buttons: gradient primary + a sheen that sweeps across on hover --- */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s ease,
              filter 0.25s ease, border-color 0.25s ease;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-sheen);
  transform: translateX(-120%);
  transition: transform 0.65s var(--ease-out);
  pointer-events: none;
}

.btn:hover::after { transform: translateX(120%); }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-primary {
  background: var(--gradient-primary);
  border: none;
  color: #0b0820;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.btn-primary:hover {
  filter: brightness(1.08) saturate(1.05);
  box-shadow: 0 10px 32px -8px var(--primary-glow);
}

.btn-secondary:hover {
  border-color: var(--border-glow);
  box-shadow: 0 6px 22px -10px var(--primary-glow);
}

/* --- form controls: violet focus ring --- */
.form-control {
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* --- jersey quick-select chips --- */
.chip {
  transition: transform 0.2s var(--ease-out), background 0.25s ease,
              color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.chip:hover { transform: translateY(-2px); border-color: var(--border-glow); }
.chip.active {
  background: var(--gradient-primary);
  color: #0b0820;
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 6px 18px -8px var(--primary-glow);
}

/* --- pipeline flow steps: hover raise, active pulse --- */
.flow-step {
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease,
              box-shadow 0.3s ease, background 0.3s ease;
}
.flow-step:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--border-glow);
  box-shadow: 0 12px 30px -14px var(--primary-glow);
}
.flow-step .step-icon { transition: transform 0.3s var(--ease-out); }
.flow-step:hover .step-icon { transform: scale(1.12) rotate(-4deg); }

@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.35); }
  50%      { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
}
.flow-step.active {
  border-color: var(--primary);
  animation: step-pulse 2.4s ease-out infinite;
}

.flow-arrow { color: var(--text-dim); transition: color 0.3s ease; }
.pipeline-flow-diagram:hover .flow-arrow { color: var(--primary); }

/* --- progress bar: gradient fill + travelling shimmer while running --- */
.progress-bar-fill {
  background: var(--gradient-primary);
  position: relative;
  overflow: hidden;
  transition: width 0.5s var(--ease-out);
}

@keyframes shimmer { to { transform: translateX(220%); } }

.progress-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 45%;
  background: var(--gradient-sheen);
  transform: translateX(-120%);
  animation: shimmer 1.6s linear infinite;
}

/* --- stat cards --- */
.stat-card,
.stat-box {
  transition: transform 0.28s var(--ease-out), border-color 0.28s ease,
              box-shadow 0.28s ease, background 0.28s ease;
}
.stat-card:hover,
.stat-box:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: 0 14px 34px -16px var(--primary-glow);
}

/* --- click-to-track video: it is the primary interaction, so make the target
       area obvious and give it a focus glow while the pointer is over it --- */
.click-track-section .click-preview-wrapper {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.click-track-section .click-preview-wrapper:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 1px var(--primary), 0 18px 50px -18px var(--primary-glow);
}

/* --- detected-player boxes in the "Load Players" picker --- */
.player-box {
  transition: border-color 0.15s ease, background 0.15s ease,
              transform 0.15s var(--ease-out), box-shadow 0.15s ease;
}
.player-box:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 2px var(--accent-cyan), 0 8px 20px -8px rgba(34, 211, 238, 0.5);
  z-index: 5;
}

/* --- upload dropzone --- */
.upload-dropzone {
  transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s var(--ease-out);
}
.upload-dropzone:hover,
.upload-dropzone.dragover {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-2px);
}
.upload-dropzone .upload-icon { transition: transform 0.3s var(--ease-out), color 0.3s ease; }
.upload-dropzone:hover .upload-icon { transform: translateY(-3px) scale(1.08); color: var(--primary); }

/* --- brand mark: spin the ball on header hover --- */
@keyframes ball-roll { to { transform: rotate(360deg); } }
.brand:hover .fa-spin-hover { animation: ball-roll 1.1s linear infinite; }

.accent-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- "Pipeline Active" pulse dot --- */
@keyframes badge-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.badge-pulse i { animation: badge-blink 1.8s ease-in-out infinite; color: var(--accent-green); }

/* --- table rows --- */
tbody tr { transition: background 0.18s ease; }
tbody tr:hover { background: var(--primary-soft); }

/* --- custom scrollbars, themed to match --- */
* { scrollbar-width: thin; scrollbar-color: var(--primary-deep) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary), var(--primary-deep));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: border-box; }

/* --- respect the OS "reduce motion" setting: keep every hover CUE (colour,
       glow, border) but drop the movement and the infinite loops --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .glass-card:hover,
  .btn:hover,
  .chip:hover,
  .flow-step:hover,
  .stat-card:hover,
  .stat-box:hover,
  .player-box:hover,
  .upload-dropzone:hover { transform: none; }
  .progress-bar-fill::after { display: none; }
}


/* ---- Access gate overlay (hosted deployment) ---- */
.login-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 5, 18, 0.92); backdrop-filter: blur(10px);
}
.login-overlay.hidden { display: none; }
.login-card {
  width: min(92vw, 380px); padding: 2rem 1.75rem; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border-glow); border-radius: 18px;
  box-shadow: var(--shadow-glow); display: flex; flex-direction: column; gap: 0.9rem;
}
.login-card .brand-icon { margin: 0 auto; }
.login-card h2 { margin: 0; font-family: 'Outfit', sans-serif; letter-spacing: 0.04em; }
.login-card p { margin: 0; opacity: 0.75; font-size: 0.9rem; }
.login-card input {
  padding: 0.75rem 0.9rem; border-radius: 10px; border: 1px solid var(--border-glow);
  background: var(--bg-elevated); color: inherit; font-size: 1rem; outline: none;
}
.login-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.login-error { color: var(--accent-pink); font-size: 0.85rem; }
.login-error.hidden { display: none; }