/* ============================================================
 *  All Movement Matters — Design System  v1.0.0
 *
 *  Sections:
 *    § 1  Custom Properties (Design Tokens)
 *    § 2  Reset & Base
 *    § 3  Layout Shell
 *    § 4  Sidebar
 *    § 5  Workspace & Topbar
 *    § 6  Buttons & Badges
 *    § 7  Intake Grid — Upload, Form, Fields
 *    § 8  Calibration Matrix
 *    § 9  Pipeline Band
 *    § 10 Dashboard Grid
 *    § 11 Video Stage & Overlay Canvas
 *    § 12 Player Analytics Metrics
 *    § 13 AI Insights
 *    § 14 Tactical Map & Team Legend
 *    § 15 AI Diagnostics Console
 *    § 16 Coordinate Table
 *    § 17 Export Band
 *    § 18 Footer
 *    § 19 Scrollbar Styling
 *    § 20 Animations & Keyframes
 *    § 21 Responsive — ≤1250px
 *    § 22 Responsive — ≤720px
 * ============================================================ */

/* ============================================================
 *  § 1  Custom Properties
 * ============================================================ */
:root {
  color-scheme: dark;

  /* Palette */
  --ink:      #f8fafc;
  --muted:    #94a3b8;
  --line:     #1e293b;
  --line-hi:  #334155;
  --panel:    #0f172a;
  --paper:    #020617;

  /* Brand accent colours */
  --green:    #10b981;
  --green-hi: #34d399;
  --teal:     #06b6d4;
  --teal-hi:  #22d3ee;
  --red:      #f43f5e;
  --gold:     #f59e0b;
  --lime:     #84cc16;
  --sky:      #38bdf8;

  /* Player colours */
  --p1:       #cf4e40;
  --p2:       #187b83;

  /* Elevation */
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.35);
  --shadow:    0 18px 50px rgba(0,0,0,0.5);
  --shadow-lg: 0 32px 80px rgba(0,0,0,0.6);

  /* Motion */
  --ease:      cubic-bezier(0.4,0,0.2,1);
  --dur:       150ms;
  --dur-md:    250ms;

  /* Radius */
  --radius:    8px;
  --radius-lg: 12px;

  /* Same as --ink for selects/inputs */
  --text: #f8fafc;
}

/* ============================================================
 *  § 2  Reset & Base
 * ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
 *  § 3  Layout Shell
 * ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* ============================================================
 *  § 4  Sidebar
 * ============================================================ */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 20px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

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

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  font-size: 1.4rem;
  background: linear-gradient(135deg, var(--green) 0%, var(--teal) 100%);
  flex-shrink: 0;
}

.brand h1 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Nav */
.nav-list {
  display: grid;
  gap: 4px;
}

.nav-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-list a:hover {
  background: rgba(255,255,255,0.07);
  color: var(--ink);
}

.nav-list a.active {
  background: rgba(255,255,255,0.1);
  color: var(--ink);
}

/* Sidebar badges */
.sidebar-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Status panel */
.status-panel {
  margin-top: auto;
  display: flex;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
}

.status-panel strong,
.status-panel span {
  display: block;
  font-size: 0.82rem;
}

.status-panel strong {
  color: var(--ink);
}

.status-panel span {
  color: var(--muted);
  margin-top: 2px;
}

.status-dot {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gold);
  transition: background var(--dur-md) var(--ease);
}

.status-dot.ready   { background: var(--green); }
.status-dot.warning { background: var(--gold); animation: pulse-dot 2s infinite; }
.status-dot.error   { background: var(--red); }

/* ============================================================
 *  § 5  Workspace & Topbar
 * ============================================================ */
.workspace {
  padding: 28px 32px;
  display: grid;
  gap: 24px;
  align-content: start;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 800;
  background: linear-gradient(135deg, var(--ink) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-heading h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

/* ============================================================
 *  § 6  Buttons & Badges
 * ============================================================ */

/* Base shared styles */
.primary-button,
.icon-button,
.sample-button,
.export-actions button {
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  transition: all var(--dur) var(--ease);
}

/* Primary CTA */
.primary-button {
  min-height: 44px;
  padding: 0 20px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--green) 0%, #059669 100%);
  border-color: var(--green);
  box-shadow: 0 0 20px rgba(16,185,129,0.2);
}

.primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--green-hi) 0%, var(--green) 100%);
  box-shadow: 0 0 30px rgba(16,185,129,0.35);
  transform: translateY(-1px);
}

.primary-button:active:not(:disabled) {
  transform: translateY(0);
}

/* Icon button (reset) */
.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.icon-button:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.06);
  border-color: var(--line-hi);
}

/* Sample video button */
.sample-button {
  min-height: 42px;
  padding: 0 16px;
  color: var(--teal);
  font-weight: 700;
  border-color: rgba(6,182,212,0.25);
  background: rgba(6,182,212,0.04);
}

.sample-button:hover {
  background: rgba(6,182,212,0.1);
  border-color: rgba(6,182,212,0.5);
}

/* Disabled states */
.primary-button:disabled,
.export-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid var(--line-hi);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  letter-spacing: 0.03em;
}

.badge-sport    { background: rgba(6,182,212,0.1);   color: var(--teal);  border-color: rgba(6,182,212,0.3); }
.badge-version  { background: rgba(16,185,129,0.08); color: var(--green); border-color: rgba(16,185,129,0.25); }
.badge-required { background: rgba(244,63,94,0.08);  color: var(--red);   border-color: rgba(244,63,94,0.25); }
.live-badge     { background: rgba(16,185,129,0.15); color: var(--green); border-color: rgba(16,185,129,0.3); animation: pulse-dot 2s infinite; }

/* ============================================================
 *  § 7  Intake Grid — Upload, Form, Fields
 * ============================================================ */
.intake-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 24px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.input-panel,
.config-panel,
.metrics-panel,
.insights-panel,
.team-panel {
  display: grid;
  gap: 16px;
}

/* Upload zone */
.upload-zone {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 200px;
  padding: 20px;
  border: 1.5px dashed var(--line-hi);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  background:
    linear-gradient(rgba(15,23,42,0.75), rgba(15,23,42,0.75)),
    repeating-linear-gradient(135deg, #020617 0 10px, #0f172a 10px 20px);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  position: relative;
}

.upload-zone:hover {
  border-color: var(--teal);
  background:
    linear-gradient(rgba(6,182,212,0.04), rgba(6,182,212,0.04)),
    repeating-linear-gradient(135deg, #020617 0 10px, #0f172a 10px 20px);
}

.upload-zone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.upload-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--green));
  color: #fff;
  flex-shrink: 0;
}

.upload-zone strong {
  font-size: 0.92rem;
}

.upload-zone small {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Tracking hint */
.tracking-hint {
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(6,182,212,0.05);
  border: 1px solid rgba(6,182,212,0.15);
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.tracking-hint code {
  color: var(--teal);
  font-family: ui-monospace, monospace;
  font-size: 0.76rem;
}

/* Fieldset / segmented control */
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field-group {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 220px);
  gap: 12px;
  align-items: end;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  overflow: hidden;
}

.segmented-control label {
  display: block;
  cursor: pointer;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.segmented-control span {
  display: block;
  padding: 10px 12px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel);
  transition: all var(--dur) var(--ease);
}

.segmented-control input:checked + span {
  color: #fff;
  background: var(--teal);
}

/* Form grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
}

label > span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

input[type="text"],
input[type="date"],
select {
  min-height: 40px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

input:focus,
select:focus,
button:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(6,182,212,0.15);
}

/* Calibration description */
.calibration-info {
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(56,189,248,0.05);
  border: 1px solid rgba(56,189,248,0.12);
}

.calibration-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
}

.calibration-desc strong {
  color: var(--sky);
}

/* ============================================================
 *  § 8  Calibration Matrix
 * ============================================================ */
.homography-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.matrix-input {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line-hi);
  color: var(--sky);
  padding: 5px 4px;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  min-height: 32px;
  transition: all var(--dur) var(--ease);
}

.matrix-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.15);
  color: var(--green);
}

.matrix-input:disabled {
  opacity: 0.5;
  color: var(--muted);
  cursor: not-allowed;
  border-style: dashed;
  background: rgba(0,0,0,0.1);
}

/* ============================================================
 *  § 9  Pipeline Band
 * ============================================================ */
.pipeline-band {
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 16px;
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pipeline-step {
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  background: var(--paper);
  display: grid;
  align-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  transition: all var(--dur-md) var(--ease);
}

.pipeline-step::before {
  content: "";
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-hi);
  transition: background var(--dur-md) var(--ease);
}

.pipeline-step.done {
  border-color: rgba(16,185,129,0.3);
  background: rgba(16,185,129,0.04);
  color: var(--ink);
}
.pipeline-step.done::before   { background: var(--green); }

.pipeline-step.active {
  border-color: rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.05);
  color: var(--ink);
}
.pipeline-step.active::before { background: var(--gold); animation: pulse-bar 0.8s ease infinite; }

/* ============================================================
 *  § 10 Dashboard Grid
 * ============================================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  gap: 20px;
}

.video-panel {
  grid-row: span 2;
}

/* ============================================================
 *  § 11 Video Stage & Overlay Canvas
 * ============================================================ */
.video-stage {
  height: 100%;
  min-height: 420px;
}

.broadcast-frame {
  position: relative;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #020617, #0f172a 46%, #020617);
}

.broadcast-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
  z-index: 0;
}

.video-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(6,182,212,0.05), transparent 55%),
    linear-gradient(145deg, #020617, #0f172a 46%, #020617);
}

.video-empty-icon {
  font-size: 2.5rem;
  opacity: 0.5;
}

.video-empty strong {
  font-size: 1rem;
  color: var(--ink);
}

.video-empty span {
  font-size: 0.82rem;
  color: var(--muted);
}

.video-empty.hidden {
  display: none;
}

/* Canvas overlay */
.video-overlay-container {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

#overlayCanvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ============================================================
 *  § 12 Player Analytics Metrics
 * ============================================================ */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.metric-card {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}

.metric-card:hover {
  border-color: var(--line-hi);
}

.metric-card span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.metric-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.chart-wrapper {
  display: grid;
  gap: 6px;
}

.chart-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chart {
  height: 160px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 0;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.chart span {
  flex: 1;
  min-width: 18px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--teal-hi) 0%, var(--lime) 100%);
  opacity: 0.8;
  transition: height var(--dur-md) var(--ease), opacity var(--dur) var(--ease);
}

.chart span:hover {
  opacity: 1;
}

/* ============================================================
 *  § 13 AI Insights
 * ============================================================ */
.insights-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.insights-panel li {
  padding: 12px 14px;
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
  line-height: 1.5;
  transition: border-left-color var(--dur) var(--ease);
}

.insights-panel li:hover {
  border-left-color: var(--green);
}

/* ============================================================
 *  § 14 Tactical Map & Team Legend
 * ============================================================ */
.player-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.legend-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid;
}

.legend-card.legend-p1 {
  background: rgba(207,78,64,0.07);
  border-color: rgba(207,78,64,0.25);
}

.legend-card.legend-p2 {
  background: rgba(24,123,131,0.07);
  border-color: rgba(24,123,131,0.25);
}

.legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-p1 .legend-dot { background: var(--p1); box-shadow: 0 0 6px var(--p1); }
.legend-p2 .legend-dot { background: var(--p2); box-shadow: 0 0 6px var(--p2); }

.legend-info {
  flex: 1;
  min-width: 0;
}

.legend-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}

.legend-sub {
  font-size: 0.7rem;
  color: var(--muted);
}

.legend-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
}

.legend-p1 .legend-badge { background: rgba(207,78,64,0.2);  color: var(--p1); }
.legend-p2 .legend-badge { background: rgba(24,123,131,0.2); color: var(--p2); }

/* Tactical layout */
.tactical-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  justify-items: center;
}

.tactical-field-container {
  width: 100%;
  max-width: 210px;
  background: #1e5c3f;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line-hi);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.25);
  display: flex;
  justify-content: center;
}

#tacticalCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/2;
  max-height: 270px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 3px;
}

/* Team meters */
.team-bars {
  width: 100%;
  display: grid;
  gap: 12px;
}

.team-bars label {
  display: grid;
  grid-template-columns: 1fr 1.6fr 44px;
  align-items: center;
  gap: 8px;
}

.team-bars label > span {
  font-size: 0.76rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

meter {
  width: 100%;
  height: 10px;
}

/* Heatmap toggle */
.heatmap-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  width: auto;
  margin: 0;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

.heatmap-toggle-label:hover {
  color: var(--ink);
}

.heatmap-toggle-label input {
  width: 14px;
  min-height: 14px;
  margin: 0;
  cursor: pointer;
}

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags span {
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 0.78rem;
  border: 1px solid var(--line);
  transition: all var(--dur) var(--ease);
}

.tags span:hover {
  background: rgba(255,255,255,0.08);
  color: var(--ink);
  border-color: var(--line-hi);
}

/* ============================================================
 *  § 15 AI Diagnostics Console
 * ============================================================ */
.console-panel {
  display: grid;
  gap: 12px;
}

.console-box {
  background: #0a1017;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  height: 180px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  color: #4ade80;
  line-height: 1.5;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
}

.console-line {
  margin-bottom: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(74,222,128,0.07);
  word-break: break-word;
}

.console-line.info    { color: #60a5fa; }
.console-line.success { color: #4ade80; }
.console-line.warn    { color: #facc15; }
.console-line.system  { color: #a7f3d0; opacity: 0.85; }

/* ============================================================
 *  § 16 Coordinate Table
 * ============================================================ */
.coordinates-panel {
  display: grid;
  gap: 12px;
}

.coordinates-container {
  height: 180px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.coordinates-container table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, monospace;
  font-size: 0.76rem;
}

.coordinates-container th {
  position: sticky;
  top: 0;
  background: var(--paper);
  padding: 8px 10px;
  border-bottom: 2px solid var(--line-hi);
  text-align: left;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.coordinates-container td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.coordinates-container tr:nth-child(even) td {
  background: rgba(255,255,255,0.015);
}

.coordinates-container tr:hover td {
  background: rgba(6,182,212,0.04);
}

/* ============================================================
 *  § 17 Export Band
 * ============================================================ */
.exports-band {
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 16px;
}

.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.export-actions button {
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius);
  transition: all var(--dur) var(--ease);
}

.export-actions button:hover:not(:disabled) {
  background: rgba(255,255,255,0.07);
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: 0 0 12px rgba(6,182,212,0.12);
}

/* ============================================================
 *  § 18 Footer
 * ============================================================ */
.app-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.app-footer strong {
  color: var(--ink);
}

/* ============================================================
 *  § 19 Scrollbar Styling (Webkit)
 * ============================================================ */
.console-box,
.coordinates-container,
.pipeline,
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi) transparent;
}

.console-box::-webkit-scrollbar,
.coordinates-container::-webkit-scrollbar,
.pipeline::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.console-box::-webkit-scrollbar-track,
.coordinates-container::-webkit-scrollbar-track,
.pipeline::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.console-box::-webkit-scrollbar-thumb,
.coordinates-container::-webkit-scrollbar-thumb,
.pipeline::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border-radius: 999px;
}

/* ============================================================
 *  § 20 Animations & Keyframes
 * ============================================================ */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes pulse-bar {
  0%, 100% { transform: scaleX(1); }
  50%       { transform: scaleX(0.7); }
}

@keyframes slide-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 *  § 21 Responsive — ≤ 1250px
 * ============================================================ */
@media (max-width: 1250px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
  }

  .brand p { display: none; }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .sidebar-badges { margin-left: auto; }
  .status-panel   { margin-top: 0; width: 100%; }

  .intake-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .video-panel {
    grid-row: auto;
  }
}

/* ============================================================
 *  § 22 Responsive — ≤ 720px
 * ============================================================ */
@media (max-width: 720px) {
  .workspace {
    padding: 16px;
    gap: 16px;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar-actions,
  .primary-button {
    width: 100%;
  }

  .icon-button {
    flex: 0 0 44px;
  }

  .form-grid,
  .field-group,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .player-legend {
    grid-template-columns: 1fr;
  }

  .video-stage,
  .broadcast-frame {
    min-height: 280px;
  }

  .export-actions {
    flex-direction: column;
  }

  .export-actions button {
    width: 100%;
    justify-content: center;
  }

  .pipeline {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
  }
}