/* ============================================================
   CAFlytics shared app-shell — v2 visual redesign
   Branch: feature/caflytics-visual-redesign

   Scope: All rules are inside .cly-app or prefixed with .cly-
   so they cannot leak into CAFnizer, CAF Nexus, or CAFforce HR.

   DOM hooks used by caflytics-formations.js, caflytics-video.js,
   caflytics-tactics.js are PRESERVED EXACTLY — only their visual
   treatment is changed.
   ============================================================ */

/* ── Kill global page chrome (inherited from style.css) ──── */
body::before,
body::after {
  display: none !important;
}

/* The authenticated shell used to hide the entire document while the session
   check ran, producing a full white flash between CAFlytics pages. Pages that
   load this private-shell stylesheet now keep the branded canvas visible while
   the shell hydrates; the server remains the authoritative access gate. */
body[hidden] {
  display: block !important;
  min-height: 100vh;
  background: #f0f4f2;
}
body[hidden] .cly-app {
  min-height: 100vh;
}

/* ── Design tokens (scoped to .cly-app) ─────────────────── */
.cly-app {
  /* Backgrounds */
  --cly-bg:           #f0f4f2;
  --cly-surface:      #ffffff;
  --cly-surface-2:    #f7faf8;
  --cly-surface-3:    #eef3f0;

  /* Navigation */
  --cly-navy:         #0c1c2b;
  --cly-navy-2:       #142233;
  --cly-navy-3:       #1c2e40;

  /* Primary accent — CAF green */
  --cly-green:        #007a3d;
  --cly-green-l:      #00924a;
  --cly-green-dim:    #e3f4eb;
  --cly-green-dark:   #005a2c;

  /* Premium highlight — restrained gold */
  --cly-gold:         #b87d2e;
  --cly-gold-dim:     #fdf3e3;

  /* Semantic colours */
  --cly-positive:     #059669;
  --cly-warning:      #d97706;
  --cly-negative:     #dc2626;
  --cly-info:         #2563eb;

  /* Text */
  --cly-text:         #111827;
  --cly-text-2:       #374151;
  --cly-muted:        #6b7280;
  --cly-muted-l:      #9ca3af;

  /* Borders */
  --cly-border:       #dce8e1;
  --cly-border-dim:   #edf3ef;

  /* Focus */
  --cly-focus:        rgba(0, 122, 61, 0.55);

  /* Shadows */
  --cly-shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --cly-shadow-md:    0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --cly-shadow-lg:    0 12px 36px rgba(0,0,0,.11), 0 4px 12px rgba(0,0,0,.06);

  /* Typography */
  --cly-font-xs:      11px;
  --cly-font-sm:      12px;
  --cly-font-base:    13.5px;
  --cly-font-md:      14.5px;
  --cly-font-lg:      16px;
  --cly-font-xl:      22px;
  --cly-font-2xl:     30px;

  /* Radius */
  --cly-radius-sm:    6px;
  --cly-radius:       10px;
  --cly-radius-lg:    14px;

  /* Legacy aliases for backward-compat with js that uses --caf-* vars */
  --caf-bg:           var(--cly-bg);
  --caf-surface:      var(--cly-surface);
  --caf-surface-soft: var(--cly-surface-2);
  --caf-navy:         var(--cly-navy);
  --caf-green:        var(--cly-green);
  --caf-green-l:      var(--cly-green-l);
  --caf-green-dim:    var(--cly-green-dim);
  --caf-green-dark:   var(--cly-green-dark);
  --caf-gold:         var(--cly-gold);
  --caf-text:         var(--cly-text);
  --caf-muted:        var(--cly-muted);
  --caf-border:       var(--cly-border);
  --caf-border-dim:   var(--cly-border-dim);
}

/* ── Box-sizing reset (scoped) ──────────────────────────── */
.cly-app,
.cly-app *,
.cly-app *::before,
.cly-app *::after {
  box-sizing: border-box;
}

/* ── App grid ───────────────────────────────────────────── */
.cly-app {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 260px 1fr;
  background: var(--cly-bg);
  /* No overflow-x here (deliberately -- see below). `overflow-x: hidden`
     alone forces the UA to compute overflow-y as `auto` too (a lone
     `visible` axis isn't renderable per the CSS Overflow spec), which
     silently makes .cly-app a scroll container -- even though its own
     box never actually needs to scroll (min-height, not a fixed height,
     always grows to fit content). Every position:sticky descendant
     across every CAFlytics page (topbar, sidebar, Match Centre's
     header/tabs) computed its stuck offset relative to that dead inner
     scroll container instead of the real page scroll, so sticky never
     visually engaged anywhere. Confirmed live by comparing
     getBoundingClientRect() before/after a scroll: every "sticky"
     element moved by exactly the scroll delta, i.e. behaved as plain
     position:static. `contain: paint` was tried as a same-effect
     replacement, but it also makes this element the containing block
     for position:fixed descendants -- which breaks caflytics-ai.js's
     mobile chat panel (position:fixed, mounted inside .cly-topbar,
     i.e. inside .cly-app) the same way. The site already has
     `html { overflow-x: hidden }` globally (style.css) for horizontal
     clipping, which is safe here because the root element's overflow
     governs the viewport's own scrolling directly rather than creating
     an intermediate scroll container the way a nested element's does --
     so no replacement rule is needed on .cly-app at all. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--cly-font-base);
  color: var(--cly-text);
  line-height: 1.5;
}

/* ── Sidebar ────────────────────────────────────────────── */
.cly-sidebar {
  background: var(--cly-navy);
  color: rgba(255,255,255,.85);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.cly-sidebar::-webkit-scrollbar { display: none; }

/* Logo / brand area */
.cly-sidebar-logo {
  padding: 20px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cly-brand {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0;
}
.cly-brand-mark { color: var(--cly-green-l); }
.cly-brand-name { color: var(--cly-gold); }
.cly-brand-tagline {
  font-size: var(--cly-font-xs);
  color: rgba(255,255,255,.38);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Mobile hamburger — hidden on desktop */
.cly-nav-toggle {
  display: none;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.8);
  border-radius: var(--cly-radius-sm);
  padding: 7px 10px;
  font: inherit;
  font-size: var(--cly-font-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.cly-nav-toggle:hover { background: rgba(255,255,255,.13); }

/* Nav section grouping */
.cly-nav-section {
  padding: 14px 10px 4px;
}
.cly-nav-section-label {
  font-size: var(--cly-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.28);
  padding: 0 8px;
  margin-bottom: 4px;
}

/* Nav items */
.cly-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--cly-radius-sm);
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  font-size: var(--cly-font-sm);
  font-weight: 600;
  transition: background .13s, color .13s;
  min-height: 40px;
}
.cly-nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255,255,255,.95);
}
.cly-nav-item.active {
  background: var(--cly-green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,122,61,.35);
}
.cly-nav-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cly-nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

/* Back to hub link */
.cly-nav-back {
  margin-top: auto;
  padding: 12px 18px;
  color: rgba(255, 255, 255, 0.36);
  text-decoration: none;
  font-size: var(--cly-font-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,.06);
  display: block;
  transition: color .15s;
}
.cly-nav-back:hover { color: rgba(255,255,255,.7); }

/* ── Main content area ──────────────────────────────────── */
.cly-main { display: flex; flex-direction: column; min-width: 0; }

/* ── Topbar ─────────────────────────────────────────────── */
.cly-topbar {
  background: var(--cly-surface);
  border-bottom: 1px solid var(--cly-border);
  padding: 14px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--cly-shadow-sm);
}
.cly-topbar h1 {
  font-size: var(--cly-font-md);
  font-weight: 800;
  color: var(--cly-text);
  margin: 0;
  letter-spacing: -.01em;
}
.cly-topbar-sub {
  font-size: var(--cly-font-xs);
  color: var(--cly-muted);
  margin-top: 1px;
  font-weight: 500;
}
.cly-breadcrumb {
  font-size: var(--cly-font-xs);
  color: var(--cly-muted);
  font-weight: 500;
  margin-bottom: 2px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.cly-breadcrumb-current { color: var(--cly-green-dark); }

/* ── Content padding ────────────────────────────────────── */
.cly-content { padding: 24px 26px 72px; flex: 1; }

/* ── Freshness / data status bar ────────────────────────── */
.cly-freshness {
  border-radius: var(--cly-radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--cly-border);
  background: var(--cly-surface-2);
  color: var(--cly-muted);
  font-size: var(--cly-font-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cly-freshness.warning { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.cly-freshness.stale,
.cly-freshness.never  { background:#fef2f2; border-color:#fecaca; color:#991b1b; }

/* ── Demo / alert banner ────────────────────────────────── */
.cly-banner {
  background: var(--cly-gold-dim);
  color: #78350f;
  border: 1px solid #fde68a;
  border-radius: var(--cly-radius);
  padding: 10px 16px;
  font-size: var(--cly-font-sm);
  font-weight: 600;
  margin-bottom: 18px;
}

/* ── KPI row ─────────────────────────────────────────────── */
.cly-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.cly-kpi-card {
  background: var(--cly-surface);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--cly-shadow-sm);
  transition: box-shadow .15s;
}
.cly-kpi-card:hover { box-shadow: var(--cly-shadow-md); }
.cly-kpi-card.accent {
  border-left: 3px solid var(--cly-green);
  background: linear-gradient(135deg, var(--cly-green-dim) 0%, var(--cly-surface) 100%);
}
.cly-kpi-value {
  font-size: var(--cly-font-2xl);
  font-weight: 800;
  color: var(--cly-text);
  letter-spacing: -.02em;
  line-height: 1;
}
.cly-kpi-label {
  font-size: var(--cly-font-sm);
  color: var(--cly-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* ── Cards ───────────────────────────────────────────────── */
.cly-card {
  background: var(--cly-surface);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-lg);
  padding: 0;
  margin-bottom: 18px;
  box-shadow: var(--cly-shadow-sm);
  overflow: hidden;
}
.cly-card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--cly-border-dim);
  background: var(--cly-surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cly-card-body { padding: 18px 20px; }
/* backward-compat: cards that still use direct h2 children */
.cly-card > h2 {
  font-size: var(--cly-font-md);
  font-weight: 700;
  color: var(--cly-text);
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cly-border-dim);
}
.cly-card > canvas,
.cly-card > table,
.cly-card > .cly-empty,
.cly-card > .cly-table-wrap {
  padding: 0 20px 20px;
  display: block;
}
.cly-card-header h2 {
  font-size: var(--cly-font-md);
  font-weight: 700;
  color: var(--cly-text);
  margin: 0;
}

/* ── Two-column grid ─────────────────────────────────────── */
.cly-grid-2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
}

/* ── Filters row ─────────────────────────────────────────── */
.cly-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  max-width: 100%;
}
.cly-filters select,
.cly-filters input,
.cly-filters textarea {
  min-width: 0;
  max-width: 100%;
}
.cly-filters select,
.cly-filters input {
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-sm);
  padding: 8px 10px;
  font-size: var(--cly-font-sm);
  background: var(--cly-surface);
  color: var(--cly-text);
  font-family: inherit;
}
.cly-filters select:focus,
.cly-filters input:focus {
  outline: 2px solid var(--cly-focus);
  outline-offset: 1px;
}
.cly-card textarea,
.cly-card > input,
.cly-card > select,
.report-controls textarea {
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-sm);
  padding: 9px 10px;
  font-size: var(--cly-font-sm);
  background: var(--cly-surface);
  color: var(--cly-text);
  max-width: 100%;
  font-family: inherit;
}

/* ── Buttons ─────────────────────────────────────────────── */
.cly-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: var(--cly-radius-sm);
  padding: 8px 14px;
  font-size: var(--cly-font-sm);
  font-weight: 700;
  cursor: pointer;
  background: var(--cly-green);
  color: #fff;
  font-family: inherit;
  line-height: 1;
  transition: background .13s, box-shadow .13s;
  white-space: nowrap;
  text-decoration: none; /* .cly-btn is also used on <a> elements (e.g. caflytics-overview.html's hero/card links) */
}
.cly-btn:hover { color: #fff; }
.cly-btn:hover { background: var(--cly-green-l); }
.cly-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cly-btn-secondary {
  background: var(--cly-surface);
  color: var(--cly-text-2);
  border-color: var(--cly-border);
}
.cly-btn-secondary:hover { background: var(--cly-surface-2); border-color: var(--cly-green); }

/* ── Data table ──────────────────────────────────────────── */
.cly-table { width: 100%; border-collapse: collapse; font-size: var(--cly-font-sm); }
.cly-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.cly-table th {
  text-align: left;
  font-size: var(--cly-font-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--cly-muted);
  padding: 10px 12px;
  border-bottom: 2px solid var(--cly-border);
  white-space: nowrap;
}
.cly-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--cly-border-dim);
  color: var(--cly-text);
  vertical-align: middle;
}
.cly-table tr:last-child td { border-bottom: none; }
.cly-table tr.clickable { cursor: pointer; }
.cly-table tr.clickable:hover td { background: var(--cly-green-dim); }
.cly-table tr.clickable.selected td {
  background: var(--cly-green-dim);
  border-left: 3px solid var(--cly-green);
}
.cly-table tr.clickable:focus-visible {
  outline: 3px solid var(--cly-focus);
  outline-offset: -2px;
}

/* ── Match table premium styling ────────────────────────── */
#matches-table { table-layout: auto; }
#matches-table thead th { background: var(--cly-surface-2); }
#matches-table tbody tr.clickable {
  transition: background .12s;
}
#matches-table tbody tr.clickable:hover td {
  background: var(--cly-green-dim);
}
#matches-table tbody tr.clickable[aria-selected="true"] td,
#matches-table tbody tr.clickable.selected td {
  background: var(--cly-green-dim);
}
#matches-table tbody tr.clickable[aria-selected="true"] td:first-child {
  border-left: 3px solid var(--cly-green);
}

/* Match table team/score cells */
.mc-match-teams { font-weight: 600; color: var(--cly-text); }
.mc-match-vs    { color: var(--cly-muted); font-weight: 400; margin: 0 2px; }
.mc-match-score { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cly-text); }
.mc-match-time  { color: var(--cly-muted); font-size: var(--cly-font-xs); white-space: nowrap; }

/* ── Empty / loading states ──────────────────────────────── */
.cly-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--cly-muted);
  font-size: var(--cly-font-sm);
  line-height: 1.6;
}
.cly-empty-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
  opacity: .6;
}
.cly-empty strong {
  display: block;
  color: var(--cly-text-2);
  margin-bottom: 4px;
  font-size: var(--cly-font-base);
}

/* ── Badge / status pill ─────────────────────────────────── */
.cly-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--cly-font-xs);
  font-weight: 700;
  background: var(--cly-surface-2);
  color: var(--cly-muted);
  letter-spacing: .03em;
  white-space: nowrap;
}
.cly-badge.live    { background: #fee2e2; color: #b91c1c; }
.cly-badge.finished { background: var(--cly-green-dim); color: var(--cly-green-dark); }

/* ── Match event list ────────────────────────────────────── */
.cly-events { list-style: none; margin: 0; padding: 0; }
.cly-events li {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cly-border-dim);
  font-size: var(--cly-font-sm);
  align-items: center;
}
.cly-events li:last-child { border-bottom: none; }
.cly-events .cly-minute {
  font-weight: 800;
  color: var(--cly-green-dark);
  width: 44px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.cly-events li > span:nth-child(2) { flex: 1; }
.cly-event-watch {
  flex-shrink: 0;
  padding: 4px 9px;
  font-size: var(--cly-font-xs);
}

/* ── Lazy-load details sections ──────────────────────────── */
.cly-lazy-section {
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius);
  margin-top: 16px;
  overflow: hidden;
}
.cly-lazy-section summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  font-size: var(--cly-font-sm);
  color: var(--cly-text);
  background: var(--cly-surface-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.cly-lazy-section summary::-webkit-details-marker { display: none; }
.cly-lazy-section summary::before { content: '▸'; color: var(--cly-muted); font-size: 10px; }
.cly-lazy-section[open] summary::before { content: '▾'; }
.cly-lazy-section summary:hover { background: var(--cly-surface-3); }
.cly-lazy-body { padding: 14px 16px; }

/* ── Admin-only gate ─────────────────────────────────────── */
.cly-admin-only[hidden] { display: none !important; }

/* ── Provenance / data quality component ────────────────── */
.cly-provenance {
  font-size: var(--cly-font-xs);
  line-height: 1.7;
  color: var(--cly-muted);
  background: var(--cly-surface-2);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-sm);
  padding: 10px 14px;
  margin: 10px 0 16px;
}
.cly-provenance strong { color: var(--cly-text); }
.cly-provenance-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--cly-border);
  font-style: italic;
}
.cly-provenance-demo {
  background: var(--cly-gold-dim);
  border-color: #fde68a;
  color: #78350f;
}
.cly-provenance-demo strong { color: #78350f; }

/* ── Usage meter ─────────────────────────────────────────── */
.cly-usage-meter {
  height: 6px;
  border-radius: 999px;
  background: var(--cly-surface-3);
  border: 1px solid var(--cly-border);
  overflow: hidden;
  margin: 6px 0;
}
.cly-usage-meter-fill         { height: 100%; background: var(--cly-green); border-radius: inherit; }
.cly-usage-meter-fill.warning  { background: var(--cly-warning); }
.cly-usage-meter-fill.high     { background: #ea580c; }
.cly-usage-meter-fill.critical { background: var(--cly-negative); }

/* ── Screen-reader only ──────────────────────────────────── */
.cly-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Focus states ────────────────────────────────────────── */
.cly-btn:focus-visible,
.cly-nav-item:focus-visible,
.cly-nav-back:focus-visible,
.cly-nav-toggle:focus-visible,
.cly-tab:focus-visible,
.cly-lazy-section summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cly-focus);
  outline-offset: 2px;
}

/* ── Action bar ──────────────────────────────────────────── */
.cly-action-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

/* ── Section heading ─────────────────────────────────────── */
.cly-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.cly-section-heading h2 {
  margin: 0;
  font-size: var(--cly-font-lg);
  font-weight: 700;
  color: var(--cly-text);
}
.cly-section-heading p {
  margin: 3px 0 0;
  color: var(--cly-muted);
  font-size: var(--cly-font-sm);
}

/* ── Tactical dashboard widgets ──────────────────────────── */
.cly-tactical-dashboard { margin-top: 20px; }
.cly-tactical-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.cly-tactical-panel {
  background: var(--cly-surface);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius);
  padding: 14px;
}
.cly-tactical-panel h3 { margin: 0 0 10px; font-size: var(--cly-font-sm); font-weight: 700; color: var(--cly-text); }
.cly-tactical-panel p,
.cly-tactical-note { margin: 0; color: var(--cly-muted); font-size: var(--cly-font-xs); line-height: 1.55; }
.cly-tactical-panel--wide { grid-column: 1 / -1; }
.cly-tactical-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.cly-tactical-panel-head h3 { margin-bottom: 3px; }
.cly-panel-kicker {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--cly-border);
  border-radius: 999px;
  color: var(--cly-text-2);
  background: var(--cly-surface-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cly-timeline-legend,
.cly-activity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 12px;
  color: var(--cly-text-2);
  font-size: 10px;
  font-weight: 700;
}
.cly-timeline-legend > span,
.cly-activity-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.cly-timeline-legend i,
.cly-activity-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--cly-navy); }
.cly-timeline-legend .event-goal i { background: #047857; }
.cly-timeline-legend .event-yellow-card i { background: #f4c430; border-radius: 2px; }
.cly-timeline-legend .event-red-card i { background: #c62828; border-radius: 2px; }
.cly-timeline-legend .event-substitution i { background: #2563eb; border-radius: 2px; }
.cly-timeline-legend .event-var i { background: #6d28d9; }
.cly-timeline-legend .event-penalty i { background: #b45309; }
.cly-timeline-legend .event-card i { background: #475569; border-radius: 2px; }
.cly-timeline-viewport,
.cly-activity-viewport {
  max-width: 100%;
  margin-top: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.cly-timeline-viewport:focus-visible,
.cly-activity-viewport:focus-visible { outline: 2px solid var(--cly-green-l); outline-offset: 3px; }
.cly-event-timeline {
  --timeline-label-width: clamp(92px, 14vw, 150px);
  min-width: 640px;
  padding: 10px 10px 5px;
  border: 1px solid var(--cly-border-dim);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,122,61,.045), rgba(184,125,46,.045));
}
.cly-timeline-row,
.cly-timeline-neutral-row,
.cly-timeline-axis {
  display: grid;
  grid-template-columns: var(--timeline-label-width) minmax(0, 1fr);
  align-items: center;
}
.cly-timeline-row > strong {
  padding-right: 12px;
  overflow: hidden;
  color: var(--cly-text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cly-timeline-row.away > strong { color: #8a5b17; }
.cly-timeline-track {
  position: relative;
  height: 48px;
  border-inline: 1px solid var(--cly-border);
  background-image:
    linear-gradient(90deg, var(--cly-border-dim) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,122,61,.055), rgba(0,122,61,.015));
  background-position: left top;
  background-size: var(--timeline-segment-width) 100%, 100% 100%;
}
.cly-timeline-row .cly-timeline-track::before,
.cly-timeline-row .cly-timeline-track::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset-block: 0;
  border-left: 1px dashed rgba(15,23,42,.28);
  pointer-events: none;
}
.cly-timeline-row .cly-timeline-track::before { left: var(--half-time-position); }
.cly-timeline-row .cly-timeline-track::after { left: var(--regulation-end-position); }
.cly-timeline-row.home .cly-timeline-track { border-top: 1px solid var(--cly-border-dim); border-radius: 8px 8px 0 0; }
.cly-timeline-row.away .cly-timeline-track {
  border-bottom: 1px solid var(--cly-border-dim);
  border-radius: 0 0 8px 8px;
  background-image:
    linear-gradient(90deg, var(--cly-border-dim) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,125,46,.02), rgba(184,125,46,.075));
}
.cly-timeline-neutral-row { height: 1px; }
.cly-timeline-neutral-row .cly-timeline-track {
  z-index: 2;
  height: 1px;
  border: 0;
  background: var(--cly-border);
}
.cly-timeline-marker {
  position: absolute;
  z-index: 3;
  top: calc(50% + var(--event-offset, 0px));
  left: var(--event-position);
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 7px rgba(15,23,42,.22);
  color: #fff;
  background: #334155;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}
.cly-timeline-marker.is-start { transform: translate(0, -50%); }
.cly-timeline-marker.is-end { transform: translate(-100%, -50%); }
.cly-timeline-marker.event-goal { background: #047857; }
.cly-timeline-marker.event-yellow-card { border-radius: 4px; color: #2e2400; background: #f4c430; }
.cly-timeline-marker.event-red-card { border-radius: 4px; background: #c62828; }
.cly-timeline-marker.event-substitution { min-width: 30px; border-radius: 7px; background: #2563eb; }
.cly-timeline-marker.event-var { min-width: 28px; border-radius: 7px; background: #6d28d9; }
.cly-timeline-marker.event-penalty { background: #b45309; }
.cly-timeline-marker.event-card { border-radius: 4px; background: #475569; }
.cly-timeline-marker.neutral { border-color: #dbe3eb; box-shadow: 0 0 0 2px #fff, 0 2px 7px rgba(15,23,42,.25); }
.cly-timeline-marker:focus-visible { z-index: 6; outline: 3px solid rgba(14,165,233,.42); outline-offset: 2px; }
.cly-timeline-axis { margin-top: 6px; }
.cly-timeline-axis > div { display: flex; justify-content: space-between; color: var(--cly-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.cly-activity-legend .home i { background: var(--cly-green); }
.cly-activity-legend .away i { background: var(--cly-gold); }
.cly-activity-chart {
  display: grid;
  grid-template-columns: repeat(var(--activity-buckets), minmax(66px, 1fr));
  min-width: 560px;
  min-height: 150px;
  padding: 8px 4px 3px;
}
.cly-activity-bucket {
  display: grid;
  grid-template-rows: 48px 1px 48px auto auto;
  justify-items: center;
  border-right: 1px solid var(--cly-border-dim);
}
.cly-activity-bucket:last-child { border-right: 0; }
.cly-activity-half { display: flex; width: 100%; justify-content: center; }
.cly-activity-half.home { align-items: flex-end; }
.cly-activity-half.away { align-items: flex-start; }
.cly-activity-bar { display: block; width: min(26px, 52%); height: var(--bar-height); }
.cly-activity-bar.home { border-radius: 5px 5px 1px 1px; background: linear-gradient(180deg, var(--cly-green-l), var(--cly-green-dark)); }
.cly-activity-bar.away { border-radius: 1px 1px 5px 5px; background: linear-gradient(180deg, var(--cly-gold), #8a5b17); }
.cly-activity-midline { width: 76%; height: 1px; background: var(--cly-border); }
.cly-activity-bucket strong { margin-top: 4px; color: var(--cly-text); font-size: 10px; font-variant-numeric: tabular-nums; }
.cly-activity-bucket small { color: var(--cly-muted); font-size: 9px; white-space: nowrap; }
.cly-stat-bar-row {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  text-align: center;
  font-size: 11px;
}
.cly-stat-bar-row span { color: var(--cly-muted); }
.cly-stat-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 3px; min-height: 6px; }
.cly-stat-bars i { display: block; height: 6px; border-radius: 999px; }
.cly-stat-bars i.home { justify-self: end; background: var(--cly-green); }
.cly-stat-bars i.away { justify-self: start; background: var(--cly-gold); }
.cly-availability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 14px;
}
.cly-availability-grid > div { padding: 10px; border: 1px dashed var(--cly-border); border-radius: 9px; }
.cly-performer-list { display: grid; gap: 7px; }
.cly-performer-list > div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--cly-border-dim);
  padding-bottom: 6px;
  font-size: var(--cly-font-xs);
}
.cly-performer-list span { color: var(--cly-muted); }
.cly-trend-strip { display: flex; align-items: flex-end; min-height: 100px; gap: 8px; padding: 12px 4px 4px; }
.cly-trend-point { flex: 1; text-align: center; min-width: 34px; }
.cly-trend-point i {
  display: block;
  width: 100%;
  max-width: 34px;
  margin: 0 auto 4px;
  background: linear-gradient(180deg, var(--cly-green-l), var(--cly-green));
  border-radius: 5px 5px 2px 2px;
}
.cly-trend-point small { color: var(--cly-muted); font-size: 9px; }
.cly-benchmark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px,1fr)); gap: 9px; }
.cly-benchmark-card { border: 1px solid var(--cly-border); border-radius: 9px; padding: 10px; }
.cly-benchmark-card strong { display: block; color: var(--cly-text); }
.cly-benchmark-card span { color: var(--cly-muted); font-size: 11px; }
.cly-warning {
  background: var(--cly-gold-dim);
  border: 1px solid #fde68a;
  color: #78350f;
  border-radius: var(--cly-radius-sm);
  padding: 9px 12px;
  font-size: var(--cly-font-sm);
  margin: 10px 0;
}
.cly-identity { display: flex; flex-direction: column; gap: 2px; }
.cly-identity small { color: var(--cly-muted); }

/* ── Match detail premium header ─────────────────────────── */
.cly-match-header {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--cly-border-dim);
  background: var(--cly-surface-2);
}
.cly-match-header-meta {
  font-size: var(--cly-font-xs);
  color: var(--cly-muted);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}
.cly-match-header-meta-sep { opacity: .4; }
.cly-match-scoreline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cly-match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.cly-match-team-name {
  font-size: var(--cly-font-sm);
  font-weight: 700;
  color: var(--cly-text);
  text-align: center;
  line-height: 1.2;
}
.cly-match-score-box {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cly-match-score-val {
  font-size: 28px;
  font-weight: 900;
  color: var(--cly-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.cly-match-score-sep {
  font-size: 20px;
  color: var(--cly-muted-l);
  font-weight: 300;
}
.cly-match-header-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ── Match tabs ──────────────────────────────────────────── */
.mc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cly-border);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--cly-surface-2);
  padding: 0 18px;
}
.mc-tabs::-webkit-scrollbar { display: none; }
.mc-tab {
  padding: 11px 14px;
  font-size: var(--cly-font-sm);
  font-weight: 700;
  color: var(--cly-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: color .13s, border-color .13s;
  margin-bottom: -1px;
}
.mc-tab:hover { color: var(--cly-text); }
.mc-tab.is-active { color: var(--cly-green-dark); border-bottom-color: var(--cly-green); }
.mc-tab-panel { display: none; padding: 16px 20px; }
.mc-tab-panel.is-active { display: block; }

/* ── Filter pill (for match centre competition/status pills) */
.mc-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--cly-border);
  background: var(--cly-surface);
  color: var(--cly-text-2);
  font-size: var(--cly-font-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .13s, border-color .13s, color .13s;
  white-space: nowrap;
}
.mc-filter-pill:hover { border-color: var(--cly-green); color: var(--cly-green-dark); }
.mc-filter-pill.is-active {
  background: var(--cly-green);
  border-color: var(--cly-green);
  color: #fff;
}

/* ── Match list panel container ──────────────────────────── */
.mc-list-panel {
  background: var(--cly-surface);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--cly-shadow-sm);
}
.mc-list-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cly-border);
  background: var(--cly-surface-2);
}
.mc-list-panel-header h2 {
  font-size: var(--cly-font-md);
  font-weight: 700;
  color: var(--cly-text);
  margin: 0;
}
.mc-list-count { font-size: var(--cly-font-xs); color: var(--cly-muted); font-weight: 500; }

/* ── Match detail panel ──────────────────────────────────── */
/* No overflow:hidden here -- it silently broke position:sticky on the
   match header/tabs (.mc-sticky-head in caflytics-match-centre.html):
   sticky needs an ancestor chain up to the real page scroll, and any
   overflow other than visible along that chain blocks it, even though
   this panel was never meant to scroll independently. Rounded top
   corners are matched on .mc-sticky-head itself instead. */
.mc-detail-panel {
  background: var(--cly-surface);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-lg);
  box-shadow: var(--cly-shadow-sm);
}

/* ── Formations & Positions ──────────────────────────────── */
.cly-formation-panel { display: flex; flex-direction: column; gap: 10px; }
.cly-formation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.cly-formation-header strong { display: block; font-size: var(--cly-font-md); color: var(--cly-text); }
.cly-formation-name-label { font-size: var(--cly-font-xs); color: var(--cly-muted); }
.cly-formation-snapshot-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.cly-formation-snapshot-toggle .cly-btn.is-active {
  background: var(--cly-green);
  color: #fff;
  border-color: var(--cly-green);
}
.cly-formation-pitch-wrap { display: flex; flex-direction: column; gap: 6px; }
.cly-formation-pitch {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  /* Standard football pitch ratio: 105m × 68m ≈ 1.544:1 (landscape) */
  aspect-ratio: 105/68;
  /* No overflow:hidden here — markers near the touchline (e.g. a
     goalkeeper at x≈6) must never have their shirt/name label clipped.
     The rounded green pitch itself is a separate layer below that IS
     clipped, so corners still look correct. */
}
.cly-formation-pitch-surface {
  position: absolute;
  inset: 0;
  border-radius: var(--cly-radius);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 10%, rgba(0,0,0,.025) 10% 20%),
    linear-gradient(180deg, #14753d, #0b5b2e);
  border: 2px solid rgba(255,255,255,.5);
  overflow: hidden;
  pointer-events: none;
}

/* Pitch markings */
.cly-formation-halfway {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,.45);
}
.cly-formation-centre {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 50%;
}
.cly-formation-box {
  position: absolute;
  top: 21%;
  width: 16%;
  height: 58%;
  border: 2px solid rgba(255,255,255,.45);
}
.cly-formation-box-left { left: -2px; }
.cly-formation-box-right { right: -2px; }
.cly-formation-goal {
  position: absolute;
  top: 40%;
  width: 2.2%;
  height: 20%;
  border: 2px solid rgba(255,255,255,.58);
}
.cly-formation-goal-left { left: -2px; }
.cly-formation-goal-right { right: -2px; }

/* Player markers */
.cly-formation-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #fff;
  z-index: 2;
}
.cly-formation-shirt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cly-team-colour, var(--cly-navy));
  border: 2px solid rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  flex-shrink: 0;
}
.cly-formation-marker.cly-formation-away .cly-formation-shirt {
  background: var(--cly-team-colour, var(--cly-gold));
}
.cly-formation-marker.cly-formation-sub .cly-formation-shirt {
  background: #b45309;
  opacity: .75;
}
.cly-formation-marker:hover .cly-formation-shirt {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.4);
}
.cly-formation-marker:focus-visible {
  outline: 3px solid rgba(255,255,255,.7);
  outline-offset: 3px;
  border-radius: 50%;
}
.cly-formation-name {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  max-width: 76px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(7,23,19,.78);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  overflow: hidden;
  text-overflow: ellipsis;
}
.cly-formation-marker[data-label-side="above"] .cly-formation-name {
  top: auto;
  bottom: calc(100% + 4px);
}
.cly-formation-comparison { display: grid; gap: 10px; }
.cly-formation-comparison-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.cly-formation-comparison-title span,
.cly-formation-comparison h4 {
  color: var(--cly-muted);
  font-size: var(--cly-font-xs);
}
.cly-formation-comparison-title > div:first-child {
  display: grid;
  gap: 2px;
}
.cly-formation-view-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.cly-formation-view-toggle .cly-btn.is-active {
  background: var(--cly-green);
  border-color: var(--cly-green);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 133, 76, .18);
}
.cly-formation-view[hidden] { display: none; }
.cly-formation-comparison h4 { margin: 0 0 6px; }
.cly-formation-comparison-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.cly-formation-changes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--cly-border);
  border-radius: 9px;
  background: var(--cly-surface-2);
  color: var(--cly-muted);
  font-size: 11px;
}
.cly-formation-changes strong { color: var(--cly-text-2); margin-right: 3px; }
.cly-formation-changes span { padding: 3px 7px; border-radius: 999px; background: var(--cly-surface); }
.cly-formation-changes .on { color: #05603a; background: #e6f8ef; }
.cly-formation-changes .off { color: #934718; background: #fff0e5; }
@media (max-width: 760px) {
  .cly-formation-marker { width: 25px; height: 25px; }
  .cly-formation-shirt { width: 25px; height: 25px; font-size: 9px; }
  .cly-formation-name { max-width: 58px; font-size: 8px; }
}
.cly-formation-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.8);
  text-align: center;
  padding: 20px;
}
.cly-formation-direction {
  font-size: var(--cly-font-xs);
  color: var(--cly-muted);
  text-align: right;
  font-style: italic;
}

/* ── Video panel ─────────────────────────────────────────── */
.cly-video-panel { display: flex; flex-direction: column; gap: 12px; }
.cly-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--cly-radius);
  overflow: hidden;
}
.cly-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
}
.cly-video-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.cly-video-half-buttons { display: flex; gap: 6px; }
.cly-video-half-buttons .cly-btn.is-active {
  background: var(--cly-green);
  color: #fff;
  border-color: var(--cly-green);
}
.cly-video-speed {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--cly-font-xs);
  color: var(--cly-muted);
}
.cly-video-speed select {
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-sm);
  padding: 4px 6px;
  font-size: var(--cly-font-xs);
  background: var(--cly-surface);
  font-family: inherit;
}
.cly-video-jump-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cly-video-event-info {
  font-size: var(--cly-font-xs);
  color: var(--cly-muted);
  background: var(--cly-surface-2);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-sm);
  padding: 6px 10px;
}

/* ── Reduced-motion preference ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cly-nav-item,
  .cly-btn,
  .cly-kpi-card,
  .cly-table tr.clickable td {
    transition: none;
  }
}

/* ── Responsive: tablet ──────────────────────────────────── */
@media (max-width: 1024px) {
  .cly-app { grid-template-columns: 220px 1fr; }
  .cly-grid-2 { grid-template-columns: 1.1fr 1fr; }
}

/* ── Responsive: mobile ──────────────────────────────────── */
@media (max-width: 900px) {
  .cly-app {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .cly-sidebar {
    position: sticky;
    top: 0;
    height: auto;
    z-index: 100;
    overflow: visible;
    min-width: 0;
    max-width: 100vw;
  }
  .cly-sidebar-logo {
    padding: 10px 14px;
    flex-direction: row;
    align-items: center;
  }
  .cly-brand-tagline { display: none; }
  .cly-nav-toggle { display: flex; align-items: center; }
  /* Hide nav sections by default on mobile */
  .cly-sidebar > nav { display: none; }
  .cly-sidebar > .cly-nav-back { display: none; }
  .cly-sidebar.nav-open > nav { display: block; }
  .cly-sidebar.nav-open > .cly-nav-back { display: block; }
  .cly-nav-item { width: 100%; }
  .cly-grid-2 { grid-template-columns: 1fr; }
  .cly-main { min-width: 0; }
  .cly-topbar { padding: 12px 16px; align-items: flex-start; }
  .cly-content { padding: 16px 14px 100px; }
  .cly-tactical-grid { grid-template-columns: 1fr; }
  .cly-tactical-panel { padding: 12px; }
  .cly-tactical-panel-head { gap: 8px; }
  .cly-event-timeline { --timeline-label-width: 92px; min-width: 600px; }
  .cly-timeline-row > strong { font-size: 10px; }
  .cly-timeline-viewport,
  .cly-activity-viewport { margin-inline: -4px; padding: 0 4px 4px; }
  .cly-availability-grid { grid-template-columns: 1fr; }
  .cly-action-bar .cly-btn { flex: 1 1 140px; }
  .cly-match-score-val { font-size: 22px; }
}

/* ── Responsive: small phone ─────────────────────────────── */
@media (max-width: 560px) {
  .cly-kpi-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cly-card-body { padding: 14px; }
  .cly-filters > :not(.cly-sr-only) { flex: 1 1 100%; width: 100% !important; }
  .cly-topbar { flex-direction: column; }
  .cly-formation-pitch { aspect-ratio: 105/68; }
  .cly-video-controls-row { flex-direction: column; align-items: flex-start; }
  .cly-match-scoreline { gap: 8px; }
}

/* ── National-team flags ──────────────────────────────────── */
.cly-flag {
  display: inline-block;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  flex-shrink: 0;
  vertical-align: middle;
}
.cly-flag-fallback {
  display: inline-block;
  border-radius: 2px;
  background: var(--cly-surface-3);
  border: 1px solid var(--cly-border);
  flex-shrink: 0;
}

/* ── Competition family badge ────────────────────────────── */
.cly-comp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1;
  flex-shrink: 0;
  background: var(--cly-comp-colour, var(--cly-navy));
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* ── Shared analysis filter bar (caflytics-filters.js) ─────
   None of .cly-universal-filters/.cly-filter-row/.cly-filter-group/
   .cly-perspective-btn/.cly-period-btn/.cly-action-btn/.cly-filter-select
   had ANY dedicated styling anywhere in the codebase -- confirmed by
   grepping every .css and .html file. They rendered as bare browser-
   default <fieldset>/<legend>/<button>/<select> elements, which is why
   the shared filter bar (used on every Match Centre analysis tab) looked
   like a stack of plain HTML form controls rather than a designed
   toolbar, and why it dominated the visible viewport before any real
   analysis content appeared. */
.cly-universal-filters {
  background: var(--cly-surface);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-lg);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cly-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-start;
}
.cly-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.cly-filter-label {
  font-size: var(--cly-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cly-muted);
  padding: 0;
  margin: 0;
}
.cly-filter-select {
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-sm);
  padding: 6px 9px;
  font-size: var(--cly-font-sm);
  font-family: inherit;
  background: var(--cly-surface);
  color: var(--cly-text);
  min-height: 32px;
}
.cly-filter-select:disabled { opacity: .5; }
.cly-filter-select:focus-visible { outline: 3px solid var(--cly-focus); outline-offset: 1px; }

/* Segmented pill toggles -- same visual language as .mc-filter-pill */
.cly-perspective-toggle, .cly-period-toggle, .cly-action-type-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.cly-perspective-btn, .cly-period-btn, .cly-action-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--cly-border);
  background: var(--cly-surface);
  color: var(--cly-text-2);
  font-size: var(--cly-font-xs);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .13s, border-color .13s, color .13s;
}
.cly-perspective-btn:hover, .cly-period-btn:hover, .cly-action-btn:hover { border-color: var(--cly-green); color: var(--cly-green-dark); }
.cly-perspective-btn.is-active, .cly-period-btn.is-active, .cly-action-btn.is-active {
  background: var(--cly-green);
  border-color: var(--cly-green);
  color: #fff;
}
.cly-period-custom {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.cly-period-custom.is-active { display: flex; flex-wrap: wrap; }
.cly-period-custom input {
  width: 72px;
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius-sm);
  padding: 6px 8px;
  font-size: var(--cly-font-sm);
  font-family: inherit;
}
.cly-period-error { color: var(--cly-negative); font-size: var(--cly-font-xs); }

/* Secondary filters (Player/Squad role/Outcome/Play context) collapsed
   by default -- these are real, useful filters, just used far less often
   than Team/Period/Action, so they no longer force everyone to scroll
   past them before reaching the actual analysis. */
.cly-filter-more { flex-basis: 100%; border: 0; margin: 0; }
.cly-filter-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  font-size: var(--cly-font-xs);
  font-weight: 700;
  color: var(--cly-green-dark);
  padding: 4px 0;
}
.cly-filter-more > summary::-webkit-details-marker { display: none; }
.cly-filter-more > summary::before { content: '▸'; font-size: 10px; }
.cly-filter-more[open] > summary::before { content: '▾'; }
.cly-filter-more-body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px dashed var(--cly-border);
}
.cly-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--cly-border-dim);
  color: var(--cly-muted);
  font-size: 11px;
}
.cly-active-filters strong {
  color: var(--cly-text-2);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cly-active-filters span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #b8dbc8;
  border-radius: 999px;
  background: var(--cly-green-dim);
  color: var(--cly-green-dark);
  font-weight: 750;
}
@media (max-width: 700px) {
  .cly-filter-row { gap: 10px; }
  .cly-filter-group, .cly-filter-more-body > .cly-filter-group { flex: 1 1 100%; }
}

/* ── Spatial pitch maps (caflytics-pitch.js) ─────────────── */
.cly-pitch-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(8px, 1vw, 12px);
  background: linear-gradient(145deg, #081812, #10291e 58%, #0a2018);
  border: 1px solid rgba(55, 214, 145, 0.28);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(4, 19, 13, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.cly-pitch-container:fullscreen {
  max-width: none;
  display: grid;
  align-content: center;
  padding: clamp(16px, 3vw, 40px);
  background: #07140f;
}
.cly-pitch-svg {
  width: auto;
  max-width: 100%;
  max-height: 330px;
  height: auto;
  aspect-ratio: 680/440;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  background: #091a13;
}
.cly-pitch-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #00e676;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 10px rgba(0, 230, 153, 0.35);
}
.cly-pitch-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 8px #00e676;
}
.cly-map-mode-label {
  position: absolute;
  z-index: 2;
  top: 48px;
  left: 24px;
  pointer-events: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(8, 22, 16, 0.88);
  color: #00e676;
  border: 1px solid rgba(0, 230, 153, 0.35);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.cly-map-dot-seekable {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease, opacity 0.2s ease;
}
.cly-map-dot-seekable:hover {
  opacity: 1 !important;
  transform: scale(1.35);
  filter: drop-shadow(0 0 8px rgba(0, 230, 153, 0.95)) !important;
}
.cly-map-dot-seekable:focus-visible {
  outline: 3px solid #00e676;
  outline-offset: 2px;
  stroke: #ffffff;
  stroke-width: 3px;
}
/* Cross-highlight between the pitch-location attempt map and the
   goal-mouth map when they share the same real shot (see
   wireLinkedShotHighlight in caflytics-match-centre.html). */
.cly-map-dot-linked {
  opacity: 1 !important;
  stroke: #ffe169 !important;
  stroke-width: 3.5px !important;
  filter: drop-shadow(0 0 8px rgba(255, 225, 105, 0.95)) !important;
}
.cly-pass-arrow-group:hover .cly-pass-arrow-visible,
.cly-pass-arrow-group:focus-within .cly-pass-arrow-visible {
  opacity: 1 !important;
  filter: drop-shadow(0 0 6px rgba(0, 230, 153, 0.85));
}
.cly-heat-zone {
  shape-rendering: geometricPrecision;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.cly-heat-zone:hover { opacity: 1 !important; filter: brightness(1.08) saturate(1.08); }
.cly-heat-point { cursor: default; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.cly-heat-point.cly-map-dot-seekable { cursor: pointer; }
.cly-heat-cell-hit { pointer-events: all; cursor: crosshair; }
.cly-map-sample-note {
  display: inline-flex;
  align-items: center;
  margin-top: 9px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 235, 150, 0.12);
  border: 1px solid rgba(244, 211, 94, 0.4);
  color: #f4d35e;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.cly-zone-count-label { fill: #ffffff; font-size: 15px; font-weight: 800; pointer-events: none; text-shadow: 0 2px 4px rgba(0,0,0,.8); }

/* Shared legend treatment for every pitch-map renderer */
.cly-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 12px;
  padding: 10px 16px;
  background: rgba(8, 22, 16, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 230, 153, 0.2);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.cly-map-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cly-map-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255,255,255,0.3);
}
.cly-map-legend i.cly-legend-line { width: 16px; height: 3.5px; border-radius: 2px; }
.cly-map-legend-muted { margin-left: auto; color: #94a3b8; font-weight: 500; }
.cly-heat-legend { gap: 10px; }
.cly-heat-scale {
  width: clamp(100px, 15vw, 180px);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(0,180,216), rgb(0,230,153), rgb(255,214,0), rgb(255,110,0), rgb(245,0,87));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Honest empty-state overlay shared by every renderer */
.cly-pitch-empty-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  background: rgba(8, 22, 16, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 230, 153, 0.3);
  border-radius: 14px;
  padding: 16px 20px;
  color: #cbd5e1;
}

/* ── Goal-mouth map ─────────────────────────────────────── */
.cly-goalmouth-svg { aspect-ratio: auto; background: #08161f; border-radius: 12px; }
.cly-goalmouth-field { fill: #0b1e2b; }
.cly-goalmouth-frame { fill: rgba(0, 230, 153, 0.08); stroke: #ffffff; stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(0, 230, 153, 0.4)); }
.cly-goalmouth-bar { stroke: #00e676; stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 4px #00e676); }
.cly-goalmouth-grid { stroke: rgba(0, 230, 153, 0.15); stroke-width: 1; stroke-dasharray: 4,4; }
.cly-map-provenance {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11.5px; color: var(--cly-muted);
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--cly-border, rgba(0,0,0,.1));
}
.cly-map-provenance strong { color: var(--cly-text); font-weight: 600; }

@media (max-width: 720px) {
  .cly-pitch-container { border-radius: 13px; }
  .cly-pitch-title { font-size: 11px; letter-spacing: .045em; }
  .cly-map-mode-label { top: 42px; left: 18px; padding: 4px 8px; }
  .cly-map-legend { gap: 7px 12px; padding: 9px 10px; font-size: 11px; }
  .cly-map-legend-muted { flex-basis: 100%; margin-left: 0; }
  .cly-heat-legend .cly-map-legend-muted { flex-basis: auto; margin-left: auto; }
}

/* ── Attempts & Goal-Mouth split grid ────────────────────── */
.cly-attempts-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: flex-start;
  margin-top: 10px;
}
@media (max-width: 900px) {
  .cly-attempts-split-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Linked shot cross-highlight ─────────────────────────── */
.cly-map-dot-linked {
  r: 14px !important;
  stroke: var(--cly-gold) !important;
  stroke-width: 3.5px !important;
  filter: drop-shadow(0 0 6px rgba(184, 125, 46, 0.9));
  z-index: 10;
}

/* ── Pass network nodes ──────────────────────────────────── */
.cly-pass-node text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  user-select: none;
  pointer-events: none;
}

/* ── Roster card view ────────────────────────────────────── */
.mc-roster-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 768px) {
  .mc-roster-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Broadcast Tactical & Referee Studio ─────────────────── */
.cly-studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}
.cly-studio-main-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* The studio is a workspace: keep the chrome above the stage lean so the
   drawing surface is reachable without scrolling on a laptop screen. */
.cly-studio-header-card { padding: 10px 14px; }
.cly-studio-header-card h2 { font-size: 14px; }
.cly-studio-header-card select,
.cly-studio-header-card .cly-btn {
  font-size: 11.5px;
  padding: 5px 9px;
}
.cly-studio-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--cly-surface-2);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius);
  max-width: 100%;
}
.cly-studio-tool-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border-right: 1px solid var(--cly-border);
  padding-right: 7px;
  margin-bottom: 2px;
}
.cly-studio-tool-btn {
  padding: 4px 7px;
  border: 1px solid var(--cly-border);
  border-radius: 6px;
  background: var(--cly-surface);
  color: var(--cly-text);
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cly-studio-tool-btn:hover {
  background: var(--cly-surface-hover);
  border-color: var(--cly-green);
}
.cly-studio-tool-btn.is-active {
  background: var(--cly-green);
  border-color: var(--cly-green);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 122, 61, 0.3);
}
.cly-studio-swatch {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.cly-studio-swatch:hover { transform: scale(1.15); }
.cly-studio-swatch.is-active { border-color: #ffffff; box-shadow: 0 0 0 2px var(--cly-green); }

.cly-studio-canvas-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Keep the whole stage on screen: a drawing surface you have to scroll to
     reach is unusable, and pointer events below the fold never land. */
  max-height: calc(100vh - 250px);
  border-radius: 12px;
  overflow: hidden;
  background: #04140c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  touch-action: none;
}
.cly-studio-media-layer,
.cly-studio-svg-layer {
  position: absolute;
  inset: 0;
}
.cly-studio-media-layer { z-index: 0; background: #000; }
.cly-studio-media-layer[hidden] { display: none; }
/* Live magnification is drawn between the video and the overlay: SVG cannot
   sample a playing <video>, but this canvas shares the same stage box. */
.cly-studio-magnifier-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cly-studio-magnifier-layer[hidden] { display: none; }
.cly-studio-svg-layer { z-index: 2; touch-action: none; }
.cly-studio-media-layer .is-stage-video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  pointer-events: none;
  background: #000;
}
.cly-studio-stage-hud {
  position: absolute;
  z-index: 3;
  inset: 10px 10px auto 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  color: rgba(255,255,255,.82);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .55px;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.cly-live-chip,
.cly-stage-safe-label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(3,12,9,.72);
  backdrop-filter: blur(6px);
}
.cly-live-chip { color: #72f6ad; border-color: rgba(0,230,118,.4); }
.cly-stage-safe-label { margin-left: auto; color: #ffd45a; }
/* The SVG letterboxes itself, so it can safely fill a clamped container. */
.cly-studio-canvas-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cly-studio-token {
  cursor: grab;
  user-select: none;
  transition: transform 0.1s ease;
}
.cly-studio-token:active { cursor: grabbing; transform: scale(1.1); }

.cly-studio-deck {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0 4px;
}
.cly-studio-slide-thumb {
  flex: 0 0 130px;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--cly-border);
  border-radius: 8px;
  background: var(--cly-surface-2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.cly-studio-slide-thumb.is-active {
  border-color: var(--cly-green);
  box-shadow: 0 0 0 2px var(--cly-green-dim);
}
.cly-studio-slide-thumb span {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(0,0,0,0.6);
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Smart Crop cutouts ─────────────────────────────────────── */
.cly-studio-canvas-container.is-cropping { cursor: crosshair; }
.cly-studio-canvas-container.is-cropping .cly-studio-token,
.cly-studio-canvas-container.is-cropping .cly-studio-cutout { cursor: crosshair; }
.cly-studio-cutout {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.cly-studio-cutout:active { cursor: grabbing; }
.cly-studio-cutout-handle { cursor: nwse-resize; }
.cly-studio-crop-marquee { pointer-events: none; }

/* ── Toolbar extras ─────────────────────────────────────────── */
.cly-studio-group-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--cly-muted);
  padding-right: 2px;
}
.cly-studio-analysis-group {
  background: var(--cly-green-dim);
  border-radius: 8px;
  padding: 4px 8px 4px 6px;
}
.cly-studio-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cly-text-2);
  cursor: pointer;
  white-space: nowrap;
}
.cly-studio-check input { accent-color: var(--cly-green); }
.cly-drawing-handle { cursor: move; }

/* ── Video source panel ─────────────────────────────────────── */
.cly-studio-video-panel {
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-radius);
  background: var(--cly-surface-2);
  overflow: hidden;
}
.cly-studio-video-panel[hidden] { display: none; }
.cly-studio-video-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--cly-navy);
  color: #ffffff;
  font-size: 12px;
}
.cly-studio-video-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
}
.cly-studio-video-time {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #ffd45a;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 5px;
  padding: 2px 8px;
}
.cly-studio-video {
  display: block;
  width: 100%;
  max-height: 300px;
  background: #000000;
}
.cly-studio-video-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
}
.cly-studio-freeze-btn { font-size: 12px; }
.cly-studio-video-hint {
  flex: 1 1 220px;
  font-size: 11px;
  color: var(--cly-muted);
  line-height: 1.45;
}

/* ── Drawer: assets / analysis / debrief ────────────────────── */
.cly-studio-drawer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cly-studio-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 3px;
  background: var(--cly-surface-3);
  border-radius: 8px;
}
.cly-studio-tab {
  padding: 6px 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--cly-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cly-studio-tab:hover { color: var(--cly-text); }
.cly-studio-tab.is-active {
  background: var(--cly-surface);
  color: var(--cly-green-dark);
  box-shadow: var(--cly-shadow-sm);
}
.cly-studio-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cly-studio-tabpanel[hidden] { display: none; }
.cly-studio-drawer-title { margin: 0; font-size: 13px; }
.cly-studio-drawer-sub { margin: -6px 0 0; }

.cly-studio-scale-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--cly-muted);
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--cly-green-dim);
  border-left: 3px solid var(--cly-green);
}
.cly-studio-scale-note.is-warning {
  background: var(--cly-gold-dim);
  border-left-color: var(--cly-warning);
  color: var(--cly-text-2);
}
.cly-studio-findings { display: flex; flex-direction: column; gap: 6px; }
.cly-studio-finding {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid var(--cly-border);
  border-radius: 7px;
  background: var(--cly-surface-2);
}
.cly-studio-finding span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cly-muted);
}
.cly-studio-finding strong { font-size: 12px; color: var(--cly-green-dark); line-height: 1.35; }
.cly-studio-empty {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--cly-muted);
}
.cly-studio-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--cly-surface-3);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--cly-text-2);
}
.cly-studio-legend strong {
  font-size: 9.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cly-muted);
}
.cly-studio-legend .cly-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 5px;
}

.cly-studio-field { display: flex; flex-direction: column; gap: 3px; }
.cly-studio-field span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cly-muted);
}
.cly-studio-field input,
.cly-studio-field select,
.cly-studio-field textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--cly-border);
  border-radius: 6px;
  background: var(--cly-surface);
  color: var(--cly-text);
  font: inherit;
  font-size: 12px;
  resize: vertical;
}
.cly-studio-field input:focus,
.cly-studio-field select:focus,
.cly-studio-field textarea:focus {
  outline: 2px solid var(--cly-focus);
  outline-offset: 1px;
  border-color: var(--cly-green);
}

/* Floating studio feedback — must never take part in layout, or the canvas
   would jump under the pointer mid-drawing. */
.cly-studio-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 8500;
  max-width: min(420px, calc(100vw - 40px));
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 212, 90, 0.55);
  background: rgba(6, 45, 28, 0.96);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  animation: cly-toast-in 0.22s ease;
  pointer-events: none;
}
.cly-studio-toast[hidden] { display: none; }
@keyframes cly-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── External screen picker ─────────────────────────────────── */
/* ── Project identity, PROJECT menu and project chooser ── */
.cly-project-breadcrumb {
  color: var(--cly-muted);
  font-weight: 600;
}
.cly-project-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.cly-project-save-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--cly-border);
  border-radius: 999px;
  background: var(--cly-surface-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--cly-muted);
}
.cly-project-save-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cly-project-save-state[data-state="saved"] { color: #34d399; border-color: rgba(52, 211, 153, 0.4); }
.cly-project-save-state[data-state="dirty"] { color: #fbbf24; border-color: rgba(251, 191, 36, 0.45); }
.cly-project-save-state[data-state="saving"] { color: #22d3ee; border-color: rgba(34, 211, 238, 0.45); }
.cly-project-save-state[data-state="new"] { color: #94a3b8; }
.cly-project-meta {
  font-size: 11px;
  color: var(--cly-muted);
  letter-spacing: 0.2px;
}

.cly-project-menu { position: relative; }
.cly-project-menu-btn { font-weight: 800; letter-spacing: 0.6px; }
.cly-project-menu-list {
  position: absolute;
  z-index: 8000;
  top: calc(100% + 6px);
  left: 0;
  min-width: 232px;
  padding: 6px;
  border: 1px solid var(--cly-border);
  border-radius: 10px;
  background: var(--cly-surface);
  box-shadow: var(--cly-shadow-lg);
}
.cly-project-menu-list[hidden] { display: none; }
.cly-project-menu-list hr {
  margin: 5px 4px;
  border: 0;
  border-top: 1px solid var(--cly-border);
}
.cly-project-menu-list button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--cly-text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.cly-project-menu-list button small {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--cly-muted);
}
.cly-project-menu-list button:hover { background: var(--cly-green-dim); }
.cly-project-menu-list button.is-danger { color: #fb4b5f; }
.cly-project-menu-list button.is-danger:hover { background: rgba(251, 75, 95, 0.12); }

.cly-project-list { gap: 8px; }
.cly-project-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  border: 1px solid var(--cly-border);
  border-radius: 9px;
  background: var(--cly-surface-2);
  overflow: hidden;
}
.cly-project-row.is-active { border-color: var(--cly-green); }
.cly-project-open {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  background: none;
  color: var(--cly-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cly-project-open:hover { background: var(--cly-green-dim); }
.cly-project-open strong { display: block; font-size: 13px; }
.cly-project-open small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--cly-muted);
}
.cly-project-open-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cly-green-dim);
  color: var(--cly-green);
  font-size: 9px;
  letter-spacing: 0.5px;
}
.cly-project-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 0;
}

.cly-confirm-dialog { width: min(460px, 100%); }
.cly-confirm-actions { justify-content: flex-end; gap: 8px; }

/* Destructive actions must never look like the confirm-and-continue button. */
.cly-btn.is-danger,
#studio-workspace .cly-btn.is-danger {
  border: 1px solid rgba(251, 75, 95, 0.55);
  background: rgba(251, 75, 95, 0.16);
  color: #ff8a97;
}
.cly-btn.is-danger:hover,
#studio-workspace .cly-btn.is-danger:hover {
  background: rgba(251, 75, 95, 0.28);
  color: #ffd7dc;
}

/* The studio runs a dark broadcast workstation palette. Its dialogs sit
   outside #studio-workspace in the DOM (they are fixed overlays), so they are
   painted by id rather than inheriting the light application surface. */
#studio-screen-modal,
#studio-projects-modal,
#studio-project-form-modal,
#studio-confirm-modal { background: rgba(2, 6, 9, 0.74); }

#studio-screen-modal .cly-screen-dialog,
#studio-projects-modal .cly-screen-dialog,
#studio-project-form-modal .cly-screen-dialog,
#studio-confirm-modal .cly-screen-dialog {
  border: 1px solid rgba(34, 211, 238, 0.24);
  background: #0a1117;
  color: #e2e8f0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
}
#studio-screen-modal h3,
#studio-projects-modal h3,
#studio-project-form-modal h3,
#studio-confirm-modal h3 { color: #f1f5f9; }
#studio-screen-modal p,
#studio-projects-modal p,
#studio-project-form-modal p,
#studio-confirm-modal p,
#studio-projects-modal .cly-screen-foot span,
#studio-projects-modal .cly-project-open small,
#studio-project-form-modal .cly-studio-field span { color: #8fa3b4; }
#studio-projects-modal .cly-project-row,
#studio-screen-modal .cly-screen-option {
  border-color: rgba(148, 163, 184, 0.2);
  background: #0f1a22;
}
#studio-projects-modal .cly-project-row.is-active { border-color: rgba(114, 246, 173, 0.5); }
#studio-projects-modal .cly-project-open { color: #e2e8f0; }
#studio-projects-modal .cly-project-open:hover { background: rgba(114, 246, 173, 0.09); }
#studio-projects-modal .cly-project-open-tag {
  background: rgba(114, 246, 173, 0.14);
  color: #72f6ad;
}
#studio-project-form-modal input,
#studio-project-form-modal select {
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #0f1a22;
  color: #e2e8f0;
}
#studio-projects-modal .cly-studio-tool-btn,
#studio-screen-modal .cly-studio-tool-btn,
#studio-project-form-modal .cly-studio-tool-btn {
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #0f1a22;
  color: #cbd5e1;
}
#studio-projects-modal .cly-studio-tool-btn.is-danger { color: #ff8a97; border-color: rgba(251, 75, 95, 0.45); }
#studio-projects-modal .cly-studio-empty { color: #8fa3b4; }

#studio-screen-modal .cly-btn-secondary,
#studio-projects-modal .cly-btn-secondary,
#studio-project-form-modal .cly-btn-secondary,
#studio-confirm-modal .cly-btn-secondary {
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: #0f1a22;
  color: #cbd5e1;
}
#studio-screen-modal .cly-btn-secondary:hover,
#studio-projects-modal .cly-btn-secondary:hover,
#studio-project-form-modal .cly-btn-secondary:hover,
#studio-confirm-modal .cly-btn-secondary:hover { background: #16232d; color: #f1f5f9; }

/* A destructive button must not wear the confirm-green focus ring. */
.cly-btn.is-danger:focus-visible { outline: 2px solid #fb4b5f; outline-offset: 2px; box-shadow: none; }
#studio-workspace .cly-project-menu-list {
  border-color: rgba(34, 211, 238, 0.24);
  background: #0a1117;
}
#studio-workspace .cly-project-menu-list button { color: #e2e8f0; }
#studio-workspace .cly-project-menu-list button small { color: #7d8fa0; }
#studio-workspace .cly-project-menu-list button:hover { background: rgba(114, 246, 173, 0.1); }
#studio-workspace .cly-project-menu-list hr { border-top-color: rgba(148, 163, 184, 0.18); }
#studio-workspace .cly-project-save-state {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 26, 34, 0.9);
}
#studio-workspace .cly-project-breadcrumb { color: #7d8fa0; }

/* A drop target should say so before the file lands. */
.cly-studio-canvas-container.is-media-drop {
  outline: 2px dashed var(--cly-studio-cyan, #22d3ee);
  outline-offset: -6px;
}

.cly-studio-slide-thumb { position: relative; }
.cly-slide-thumb-delete {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: rgba(6, 12, 18, 0.82);
  color: #fb4b5f;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cly-studio-slide-thumb:hover .cly-slide-thumb-delete,
.cly-slide-thumb-delete:focus-visible { opacity: 1; }

.cly-screen-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 20, 12, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.cly-screen-modal[hidden] { display: none; }
.cly-screen-dialog {
  width: min(560px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--cly-surface);
  border: 1px solid var(--cly-border);
  border-radius: 12px;
  box-shadow: var(--cly-shadow-lg);
  padding: 18px 20px;
}
.cly-screen-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.cly-screen-dialog-head h3 { margin: 0; font-size: 15px; }
.cly-screen-dialog-head p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--cly-muted);
  line-height: 1.5;
}
.cly-screen-list { display: flex; flex-direction: column; gap: 8px; }
.cly-screen-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--cly-border);
  border-radius: 9px;
  background: var(--cly-surface-2);
  color: var(--cly-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cly-screen-option:hover {
  border-color: var(--cly-green);
  background: var(--cly-green-dim);
}
.cly-screen-option[disabled] { opacity: 0.55; cursor: not-allowed; }
.cly-screen-option .cly-screen-icon { font-size: 22px; line-height: 1; }
.cly-screen-option strong { display: block; font-size: 13px; }
.cly-screen-option small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--cly-muted);
}
.cly-screen-tag {
  margin-left: auto;
  flex: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cly-green-dim);
  color: var(--cly-green-dark);
}
.cly-screen-tag.is-muted { background: var(--cly-surface-3); color: var(--cly-muted); }
.cly-screen-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--cly-border-dim);
  font-size: 11px;
  color: var(--cly-muted);
}

@media (max-width: 900px) {
  .cly-studio-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   CAFlytics Command Studio

   A self-contained broadcast-operator skin for the Tactical / VAR
   workspace. The graphite and signal palette is intentionally scoped to
   #studio-workspace so the rest of the CAFlytics application keeps its
   lighter analysis-shell treatment.
   ============================================================ */
#studio-workspace {
  --cly-bg: #071019;
  --cly-surface: #111c27;
  --cly-surface-2: #0c1620;
  --cly-surface-3: #172432;
  --cly-navy: #06101a;
  --cly-navy-2: #0b1722;
  --cly-navy-3: #132333;
  --cly-green: #72f6ad;
  --cly-green-l: #9affc7;
  --cly-green-dim: rgba(114, 246, 173, 0.1);
  --cly-green-dark: #72f6ad;
  --cly-gold: #fbbf24;
  --cly-gold-dim: rgba(251, 191, 36, 0.11);
  --cly-text: #edf7ff;
  --cly-text-2: #b9c9d7;
  --cly-muted: #8294a5;
  --cly-muted-l: #627587;
  --cly-border: rgba(159, 190, 212, 0.17);
  --cly-border-dim: rgba(159, 190, 212, 0.09);
  --cly-focus: rgba(34, 211, 238, 0.42);
  --cly-shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.22);
  --cly-shadow-md: 0 12px 34px rgba(0, 0, 0, 0.31);
  --cly-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --cly-studio-cyan: #22d3ee;
  --cly-studio-lime: #72f6ad;
  --cly-studio-amber: #fbbf24;
  --cly-studio-red: #fb4b5f;
  position: relative;
  isolation: isolate;
  padding: 12px;
  border: 1px solid rgba(159, 190, 212, 0.14);
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% -8%, rgba(34, 211, 238, 0.11), transparent 30%),
    radial-gradient(circle at 4% 24%, rgba(114, 246, 173, 0.055), transparent 25%),
    linear-gradient(145deg, #08121c 0%, #050c13 100%);
  color: var(--cly-text);
  box-shadow: 0 30px 80px rgba(2, 7, 12, 0.28);
}

#studio-workspace .cly-card {
  border-color: var(--cly-border);
  background: linear-gradient(145deg, rgba(18, 30, 42, 0.98), rgba(11, 20, 29, 0.98));
  box-shadow: var(--cly-shadow-sm);
}

/* Command header and output state */
#studio-workspace .cly-studio-command-header {
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border-color: rgba(34, 211, 238, 0.22);
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0.075), transparent 34%),
    linear-gradient(145deg, #111e2a, #0a141e);
}

#studio-workspace .cly-studio-command-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cly-studio-cyan), var(--cly-studio-lime));
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.65);
}

#studio-workspace .cly-studio-command-header .cly-section-heading {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(440px, auto);
  gap: 18px;
  align-items: center;
}

#studio-workspace .cly-studio-command-header h2 {
  color: #f6fbff;
  font-size: clamp(15px, 1.25vw, 19px);
  letter-spacing: -0.02em;
}

#studio-workspace .cly-studio-command-header .cly-topbar-sub {
  max-width: 720px;
  color: #91a5b6;
  font-size: 11px;
}

.cly-command-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 3px;
  color: var(--cly-studio-cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#studio-autosave-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid rgba(114, 246, 173, 0.22);
  border-radius: 999px;
  background: rgba(114, 246, 173, 0.075);
  color: var(--cly-studio-lime);
  font-size: 8px;
  letter-spacing: 0.1em;
}

#studio-autosave-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}

#studio-autosave-status.is-saving { color: var(--cly-studio-amber); }
#studio-autosave-status.is-error { color: var(--cly-studio-red); }

#studio-workspace .cly-header-control-cluster {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--cly-border);
  border-radius: 8px;
  background: rgba(3, 10, 16, 0.42);
}

#studio-workspace .cly-header-control-cluster .cly-btn {
  min-width: 34px;
  border-color: transparent;
  background: transparent;
}

#studio-workspace .cly-header-control-cluster .cly-btn:hover {
  border-color: rgba(34, 211, 238, 0.26);
  background: rgba(34, 211, 238, 0.08);
}

#studio-workspace .cly-btn {
  border-color: var(--cly-border);
  color: var(--cly-text-2);
}

#studio-workspace .cly-btn:hover {
  border-color: rgba(34, 211, 238, 0.45);
  color: #ffffff;
}

#studio-workspace .cly-btn:not(.cly-btn-secondary):not(.cly-program-btn) {
  border-color: rgba(34, 211, 238, 0.42);
  background: linear-gradient(135deg, #24d5d9, #36d99a);
  color: #041217;
  box-shadow: 0 5px 15px rgba(34, 211, 238, 0.12);
}

#studio-workspace .cly-btn:not(.cly-btn-secondary):not(.cly-program-btn):hover {
  border-color: #8af9df;
  background: linear-gradient(135deg, #6eeaf1, #72f6ad);
  color: #020b0e;
}

#studio-workspace .cly-studio-project-name {
  width: clamp(140px, 16vw, 240px);
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid var(--cly-border);
  border-radius: 7px;
  background: rgba(2, 8, 13, 0.38);
  color: var(--cly-text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

#studio-workspace .cly-studio-project-name:focus {
  outline: 2px solid var(--cly-focus);
  outline-offset: 1px;
  border-color: var(--cly-studio-cyan);
}

#studio-workspace .cly-program-btn {
  gap: 7px;
  border-color: rgba(34, 211, 238, 0.34);
  background: rgba(34, 211, 238, 0.075);
  color: #c8f8ff;
}

.cly-tally-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4b6071;
  box-shadow: 0 0 0 3px rgba(75, 96, 113, 0.16);
}

#studio-workspace .cly-program-btn:not(.cly-btn-secondary),
#studio-workspace .cly-program-btn.is-on-air,
#studio-workspace .cly-program-btn[aria-pressed="true"] {
  border-color: var(--cly-studio-red);
  background: linear-gradient(135deg, #d92743, #a6112b);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(251, 75, 95, 0.12), 0 8px 20px rgba(251, 75, 95, 0.2);
}

#studio-workspace .cly-program-btn.is-on-air .cly-tally-dot,
#studio-workspace .cly-program-btn[aria-pressed="true"] .cly-tally-dot {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 0 10px #ffffff;
  animation: cly-tally-pulse 1.25s ease-in-out infinite;
}

/* Main studio geometry */
#studio-workspace .cly-studio-layout {
  grid-template-columns: minmax(0, 1fr) clamp(310px, 22vw, 360px);
  gap: 12px;
}

#studio-workspace .cly-studio-main-card { gap: 9px; }

/* Mode selector, professional tool ribbon and style strip */
#studio-workspace .cly-studio-toolbar {
  display: block;
  padding: 0;
  overflow: hidden;
  border-color: rgba(159, 190, 212, 0.2);
  border-radius: 12px;
  background: #0a141e;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
}

.cly-studio-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4px;
  border-bottom: 1px solid var(--cly-border);
  background: #07111a;
}

.cly-studio-mode-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #8195a7;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.cly-studio-mode-switch button > span {
  color: #587082;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8px;
}

.cly-studio-mode-switch button:hover {
  background: rgba(34, 211, 238, 0.06);
  color: #cceef5;
}

.cly-studio-mode-switch button.is-active,
.cly-studio-mode-switch button[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(114, 246, 173, 0.09));
  color: #ffffff;
  box-shadow: inset 0 -2px 0 var(--cly-studio-cyan), 0 5px 16px rgba(0, 0, 0, 0.18);
}

.cly-studio-mode-switch button.is-active > span,
.cly-studio-mode-switch button[aria-selected="true"] > span { color: var(--cly-studio-lime); }

.cly-pro-tool-ribbon {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(180px, 1fr) minmax(235px, 1.35fr) minmax(300px, 1.7fr) minmax(225px, 1.2fr);
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #314455 #09131d;
}

.cly-tool-cluster {
  min-width: 0;
  padding: 7px 8px 8px;
  border-right: 1px solid var(--cly-border-dim);
  background: linear-gradient(180deg, rgba(255,255,255,0.017), transparent);
}

.cly-tool-cluster:last-child { border-right: 0; }

.cly-tool-cluster > strong {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #70879a;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.cly-tool-cluster > strong::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: #3c5669;
}

.cly-tool-cluster > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 3px;
}

#studio-workspace .cly-studio-tool-btn {
  min-height: 29px;
  padding: 4px 6px;
  border-color: rgba(159, 190, 212, 0.15);
  border-radius: 6px;
  background: #111d28;
  color: #a9bbc9;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.15;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease, transform 130ms ease;
}

.cly-tool-cluster .cly-studio-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 46px;
  white-space: normal;
  text-align: center;
}

.cly-tool-cluster .cly-studio-tool-btn > span {
  color: #d7e6ef;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

#studio-workspace .cly-studio-tool-btn:hover {
  z-index: 1;
  border-color: rgba(34, 211, 238, 0.52);
  background: #172735;
  color: #ffffff;
  transform: translateY(-1px);
}

#studio-workspace .cly-studio-tool-btn.is-active {
  border-color: var(--cly-studio-cyan);
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.24), rgba(26, 113, 131, 0.24));
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.12), 0 5px 14px rgba(0, 0, 0, 0.22);
}

#studio-workspace .cly-studio-tool-btn.is-active > span { color: var(--cly-studio-lime); }

#studio-workspace .cly-studio-tool-btn.is-danger {
  border-color: rgba(251, 75, 95, 0.23);
  color: #ff9aaa;
}

#studio-workspace .cly-studio-tool-btn.is-danger:hover {
  border-color: rgba(251, 75, 95, 0.66);
  background: rgba(251, 75, 95, 0.12);
  color: #ffd5dc;
}

.cly-tool-cluster.is-var-cluster {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.055), rgba(251, 191, 36, 0.012));
}

.cly-tool-cluster.is-var-cluster > strong { color: #e9b93d; }
.cly-tool-cluster.is-var-cluster > strong::before {
  background: var(--cly-studio-amber);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.cly-tool-cluster > select,
.cly-pro-stylebar select {
  width: 100%;
  min-height: 27px;
  margin-top: 5px;
  padding: 4px 7px;
  border: 1px solid var(--cly-border);
  border-radius: 6px;
  background: #0c1721;
  color: var(--cly-text-2);
  font: inherit;
  font-size: 9.5px;
}

#studio-workspace .cly-var-generate-btn {
  width: 100%;
  margin-top: 4px;
  border-color: rgba(251, 191, 36, 0.38);
  background: rgba(251, 191, 36, 0.08);
  color: #ffe39a;
}

.cly-pro-stylebar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  min-height: 38px;
  border-top: 1px solid var(--cly-border);
  background: #08121b;
  overflow-x: auto;
}

.cly-style-segment {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 5px 8px;
  border-right: 1px solid var(--cly-border-dim);
}

.cly-style-segment > span {
  margin-right: 2px;
  color: #657b8d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cly-style-segment .cly-studio-tool-btn { min-height: 26px; }
.cly-history-segment { margin-left: auto; border-right: 0; }

#studio-workspace .cly-studio-swatch {
  position: relative;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  padding: 0;
  border: 2px solid #071019;
  border-radius: 50%;
  background: var(--swatch, #ffffff);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
}

#studio-workspace .cly-studio-swatch:hover { transform: scale(1.14); }

#studio-workspace .cly-studio-swatch.is-active {
  border-color: #071019;
  box-shadow: 0 0 0 2px var(--cly-studio-cyan), 0 0 11px color-mix(in srgb, var(--swatch, #fff) 45%, transparent);
}

#studio-custom-drawing-color {
  width: 23px;
  height: 23px;
  padding: 2px;
  border: 1px solid var(--cly-border);
  border-radius: 6px;
  background: #0d1923;
  cursor: pointer;
}

#studio-workspace .cly-studio-check { color: #8fa3b4; font-size: 9.5px; }
#studio-workspace .cly-studio-check input { accent-color: var(--cly-studio-cyan); }

/* 16:9 compositor, live media plane and safe-area HUD */
#studio-workspace .cly-studio-canvas-container {
  aspect-ratio: 16 / 9;
  max-height: none;
  border: 1px solid rgba(34, 211, 238, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(rgba(34, 211, 238, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.035) 1px, transparent 1px),
    #020609;
  background-size: 32px 32px;
  box-shadow: 0 0 0 3px #071019, 0 18px 50px rgba(0, 0, 0, 0.48), 0 0 34px rgba(34, 211, 238, 0.055);
}

#studio-workspace .cly-studio-canvas-container::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 4.5%;
  border: 1px dashed rgba(255, 255, 255, 0.105);
  pointer-events: none;
}

#studio-workspace .cly-studio-media-layer,
#studio-workspace .cly-studio-svg-layer {
  width: 100%;
  height: 100%;
}

#studio-workspace .cly-studio-svg-layer { overflow: hidden; }
#studio-workspace .cly-studio-svg-layer > svg { width: 100%; height: 100%; }

#studio-workspace .cly-studio-stage-hud {
  inset: 8px 9px auto 9px;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px #000;
}

#studio-workspace .cly-live-chip,
#studio-workspace .cly-stage-safe-label,
#studio-stage-selection-chip {
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 5px;
  background: rgba(3, 9, 14, 0.73);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#studio-workspace .cly-live-chip {
  border-color: rgba(114, 246, 173, 0.36);
  color: var(--cly-studio-lime);
}

#studio-stage-selection-chip { color: #a8b9c6; }
#studio-workspace .cly-stage-safe-label {
  margin-left: auto;
  border-color: rgba(34, 211, 238, 0.24);
  color: var(--cly-studio-cyan);
}

#studio-workspace[data-studio-mode="var"] .cly-live-chip {
  border-color: rgba(251, 191, 36, 0.42);
  color: var(--cly-studio-amber);
}

#studio-workspace.is-on-air .cly-studio-canvas-container {
  border-color: var(--cly-studio-red);
  box-shadow: 0 0 0 3px rgba(251, 75, 95, 0.18), 0 18px 52px rgba(0, 0, 0, 0.55);
}

/* SVG animation hooks emitted by the rendering engine. */
.cly-spotlight-beam {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: cly-spotlight-breathe 2.8s ease-in-out infinite;
}

.cly-spotlight-floor { animation: cly-spotlight-floor 2.8s ease-in-out infinite; }
.cly-spotlight-scan { animation: cly-spotlight-scan 4s linear infinite; }

.cly-selection-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: cly-selection-ring 1.45s ease-out infinite;
}

@keyframes cly-spotlight-breathe {
  0%, 100% { opacity: 0.76; transform: scaleX(0.985); }
  50% { opacity: 1; transform: scaleX(1.025); }
}

@keyframes cly-spotlight-floor {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

@keyframes cly-spotlight-scan {
  to { stroke-dashoffset: -64; }
}

@keyframes cly-selection-ring {
  0% { opacity: 0.9; transform: scale(0.94); }
  72%, 100% { opacity: 0; transform: scale(1.22); }
}

@keyframes cly-tally-pulse {
  0%, 100% { opacity: 0.72; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Session strip and slide rail */
#studio-workspace .cly-studio-notes-card,
#studio-workspace .cly-studio-main-card > .cly-card {
  border-color: var(--cly-border);
  background: rgba(11, 20, 29, 0.94);
}

#studio-workspace .cly-studio-deck {
  gap: 8px;
  padding: 7px 1px 3px;
  scrollbar-width: thin;
  scrollbar-color: #34495a transparent;
}

#studio-workspace .cly-studio-slide-thumb {
  flex-basis: 142px;
  border-color: rgba(159, 190, 212, 0.2);
  border-radius: 7px;
  background: #071019;
}

#studio-workspace .cly-studio-slide-thumb:hover { border-color: rgba(34, 211, 238, 0.48); }

#studio-workspace .cly-studio-slide-thumb.is-active {
  border-color: var(--cly-studio-cyan);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.14), 0 6px 16px rgba(0,0,0,0.3);
}

/* Seven-tab operator drawer */
#studio-workspace .cly-studio-drawer {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 88px);
  gap: 9px;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #334a5b #0b151f;
  border-color: rgba(34, 211, 238, 0.14);
  background: linear-gradient(180deg, #101c27, #0a131c);
}

#studio-workspace .cly-studio-tabs {
  position: sticky;
  z-index: 4;
  top: -8px;
  display: flex;
  gap: 3px;
  padding: 6px 0 7px;
  overflow-x: auto;
  border-bottom: 1px solid var(--cly-border);
  border-radius: 0;
  background: #0f1b26;
  scrollbar-width: none;
}

#studio-workspace .cly-studio-tabs::-webkit-scrollbar { display: none; }

#studio-workspace .cly-studio-tab {
  position: relative;
  flex: 1 0 auto;
  min-width: 48px;
  padding: 6px 5px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #718697;
  font-size: 9.5px;
  letter-spacing: 0.015em;
}

#studio-workspace .cly-studio-tab:hover {
  border-color: rgba(34, 211, 238, 0.16);
  background: rgba(34, 211, 238, 0.05);
  color: #c2d9e6;
}

#studio-workspace .cly-studio-tab.is-active {
  border-color: rgba(34, 211, 238, 0.25);
  background: rgba(34, 211, 238, 0.1);
  color: #e5fbff;
  box-shadow: inset 0 -2px 0 var(--cly-studio-cyan);
}

#studio-workspace .cly-studio-tabpanel {
  gap: 9px;
  min-height: 0;
  animation: cly-panel-in 150ms ease-out;
}

#studio-workspace .cly-studio-drawer-title {
  color: #f0f8ff;
  font-size: 12px;
  letter-spacing: 0.01em;
}

#studio-workspace .cly-studio-drawer-sub { color: #748899; font-size: 10px; }

@keyframes cly-panel-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

#studio-workspace .cly-studio-field { gap: 4px; }
#studio-workspace .cly-studio-field > span {
  color: #718697;
  font-size: 8.5px;
  letter-spacing: 0.1em;
}

#studio-workspace .cly-studio-field input,
#studio-workspace .cly-studio-field select,
#studio-workspace .cly-studio-field textarea {
  min-height: 32px;
  border-color: rgba(159, 190, 212, 0.17);
  background: #0a151f;
  color: #d8e7f0;
  font-size: 11px;
}

#studio-workspace .cly-studio-field input:hover,
#studio-workspace .cly-studio-field select:hover,
#studio-workspace .cly-studio-field textarea:hover { border-color: rgba(34, 211, 238, 0.3); }

#studio-workspace .cly-studio-field input:focus,
#studio-workspace .cly-studio-field select:focus,
#studio-workspace .cly-studio-field textarea:focus {
  border-color: var(--cly-studio-cyan);
  outline-color: var(--cly-focus);
}

/* Object inspector and ordered scene layers */
.cly-studio-inspector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--cly-border);
  border-radius: 8px;
  background: rgba(3, 10, 16, 0.34);
}

.cly-studio-inspector-grid > .cly-studio-field:only-child,
.cly-studio-inspector-grid > .cly-studio-field.is-wide { grid-column: 1 / -1; }

.cly-object-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.cly-object-actions .cly-studio-tool-btn {
  min-width: 0;
  padding-inline: 3px;
  font-size: 9px;
}

.cly-object-actions .cly-btn {
  min-width: 0;
  min-height: 31px;
  padding: 5px 4px;
  font-size: 9px;
  line-height: 1.2;
  white-space: normal;
}

#studio-workspace .cly-object-actions .cly-btn.is-danger {
  border-color: rgba(251, 75, 95, 0.28);
  background: rgba(251, 75, 95, 0.07);
  color: #ff9aaa;
}

#studio-workspace .cly-object-actions .cly-btn.is-danger:hover {
  border-color: rgba(251, 75, 95, 0.62);
  background: rgba(251, 75, 95, 0.14);
  color: #ffe0e5;
}

#studio-workspace .cly-studio-inspector-grid input[type="range"] {
  min-height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--cly-studio-cyan);
}

#studio-workspace .cly-studio-inspector-grid input[type="color"] {
  height: 32px;
  padding: 3px;
  cursor: pointer;
}

#studio-workspace .cly-studio-inspector-grid output {
  float: right;
  color: var(--cly-studio-cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
}

.cly-layer-list,
.cly-tag-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 48px;
}

.cly-layer-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 7px;
  border: 1px solid var(--cly-border-dim);
  border-radius: 7px;
  background: rgba(7, 16, 24, 0.66);
  color: #aebfcb;
  width: 100%;
  font: inherit;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

.cly-layer-row:hover { border-color: rgba(34, 211, 238, 0.27); background: rgba(20, 37, 49, 0.84); }
.cly-layer-row.is-selected {
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(34, 211, 238, 0.09);
  color: #eefcff;
  box-shadow: inset 2px 0 0 var(--cly-studio-cyan);
}

.cly-layer-row.is-hidden { opacity: 0.48; }
.cly-layer-row.is-locked { border-style: dashed; }

.cly-layer-kind {
  display: grid;
  place-items: center;
  min-height: 21px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 4px;
  background: rgba(34, 211, 238, 0.065);
  color: var(--cly-studio-cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 7px;
  font-weight: 900;
}

.cly-layer-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cly-layer-row > small { color: #748a9b; font-size: 8px; }
.cly-layer-row.is-locked > small { color: var(--cly-studio-amber); }

.cly-layer-row button {
  min-width: 24px;
  min-height: 24px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #8095a6;
  cursor: pointer;
}

.cly-layer-row button:hover { border-color: var(--cly-border); color: #ffffff; }

.cly-selection-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  padding: 8px 9px;
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 8px;
  background: rgba(34, 211, 238, 0.07);
}

.cly-selection-summary > span {
  grid-row: 1 / span 2;
  align-self: center;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(34, 211, 238, 0.13);
  color: var(--cly-studio-cyan);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cly-selection-summary > strong {
  overflow: hidden;
  color: #ecfaff;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cly-selection-summary > small { color: #7f94a4; font-size: 8.5px; }

/* VAR workflow: amber is reserved for review state, red for a recorded
   intervention/error state rather than ordinary navigation. */
.cly-var-safety-note {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(251, 191, 36, 0.26);
  border-left: 3px solid var(--cly-studio-amber);
  border-radius: 7px;
  background: rgba(251, 191, 36, 0.07);
  color: #d8c38d;
  font-size: 9.5px;
  line-height: 1.5;
}

.cly-var-safety-note strong {
  display: block;
  margin-bottom: 2px;
  color: #ffe29a;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cly-var-safety-note span { display: block; }

.cly-var-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--cly-border);
  border-radius: 8px;
  background: rgba(5, 12, 18, 0.58);
}

.cly-var-step {
  position: relative;
  min-width: 0;
  min-height: 42px;
  padding: 5px 3px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #708596;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.cly-var-step::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 5px;
  height: 1px;
  background: #344858;
}

.cly-var-step:last-child::after { display: none; }
.cly-var-step:hover { color: #d5e6ef; background: rgba(255,255,255,0.035); }
.cly-var-step > span {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0 auto 3px;
  border: 1px solid #3c5263;
  border-radius: 50%;
  color: #879aaa;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 7px;
}

.cly-var-step.is-active {
  border-color: rgba(251, 191, 36, 0.48);
  background: rgba(251, 191, 36, 0.105);
  color: #ffe5a3;
  box-shadow: inset 0 -2px 0 var(--cly-studio-amber);
}

.cly-var-step.is-complete {
  border-color: rgba(114, 246, 173, 0.2);
  color: var(--cly-studio-lime);
}

.cly-var-step.is-active > span {
  border-color: var(--cly-studio-amber);
  background: var(--cly-studio-amber);
  color: #241700;
}

.cly-var-step.is-complete > span {
  border-color: var(--cly-studio-lime);
  background: rgba(114, 246, 173, 0.12);
  color: var(--cly-studio-lime);
}

.cly-var-step.is-complete::after { background: rgba(114, 246, 173, 0.55); }

.cly-var-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.cly-var-metrics > * {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--cly-border);
  border-radius: 7px;
  background: #0a151f;
  color: #91a6b6;
  font-size: 9px;
}

.cly-var-metrics > p { grid-column: 1 / -1; margin: 0; line-height: 1.45; }

.cly-var-metrics strong {
  display: block;
  margin-top: 2px;
  color: #f2f8fc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.cly-var-metrics .is-warning { border-color: rgba(251, 191, 36, 0.34); color: #e7c875; }
.cly-var-metrics .is-critical { border-color: rgba(251, 75, 95, 0.4); color: #ff97a7; }

.cly-var-audit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px solid rgba(251, 191, 36, 0.25);
}

.cly-var-audit > div,
.cly-var-audit > p {
  position: relative;
  margin: 0;
  padding: 5px 7px;
  border-radius: 5px;
  background: rgba(251, 191, 36, 0.045);
  color: #91a5b4;
  font-size: 9px;
  line-height: 1.4;
}

.cly-var-audit > div::before,
.cly-var-audit > p::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cly-studio-amber);
}

.cly-var-audit > strong {
  color: #778d9d;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cly-var-audit > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 7px;
}

.cly-var-audit > div > span {
  color: #ead18a;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cly-var-audit > div > small {
  color: #647b8d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 7.5px;
}

.cly-var-audit > div > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #a8bac7;
  font-size: 9px;
}

/* Live tag pad and event ledger */
.cly-tag-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.cly-tag-quick-actions button {
  min-height: 38px;
  padding: 5px;
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 7px;
  background: rgba(34, 211, 238, 0.055);
  color: #b9d9e3;
  font: inherit;
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
}

.cly-tag-quick-actions button:hover,
.cly-tag-quick-actions button:focus-visible {
  border-color: var(--cly-studio-cyan);
  background: rgba(34, 211, 238, 0.13);
  color: #ffffff;
  outline: none;
}

.cly-tag-quick-actions button[data-live-tag*="var" i],
.cly-tag-quick-actions button[data-live-tag*="offside" i] {
  border-color: rgba(251, 191, 36, 0.27);
  background: rgba(251, 191, 36, 0.065);
  color: #ead18a;
}

.cly-tag-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid var(--cly-border-dim);
  border-radius: 7px;
  background: rgba(7, 16, 24, 0.65);
  color: #a7bac8;
  font-size: 9.5px;
}

.cly-tag-row time {
  color: var(--cly-studio-cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
}

.cly-tag-row > button:first-child {
  padding: 3px 4px;
  color: var(--cly-studio-cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8.5px;
}

.cly-tag-row > button:first-child:hover { color: #b7f7ff; }

.cly-tag-row > span {
  min-width: 0;
  overflow: hidden;
}

.cly-tag-row > span > strong {
  display: block;
  overflow: hidden;
  color: #e2f0f6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cly-tag-row > span > small {
  display: block;
  overflow: hidden;
  color: #708596;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cly-tag-row[data-rating="positive"] { border-left: 2px solid var(--cly-studio-lime); }
.cly-tag-row[data-rating="negative"] { border-left: 2px solid var(--cly-studio-red); }
.cly-tag-row[data-rating="review"] { border-left: 2px solid var(--cly-studio-amber); }

.cly-tag-row button {
  border: 0;
  background: transparent;
  color: #718697;
  cursor: pointer;
}

.cly-tag-row > button:last-child:hover { color: var(--cly-studio-red); }

/* Perspective-camera surface controls */
.cly-camera-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(34, 211, 238, 0.15);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.045), rgba(3, 10, 16, 0.28));
}

.cly-studio-subheading {
  margin: 4px 0 -1px;
  color: #86a0b2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cly-camera-grid input[type="range"] {
  width: 100%;
  min-height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--cly-studio-cyan);
}

/* Drawer read-outs retain strong hierarchy on the dark surface. */
#studio-workspace .cly-studio-scale-note {
  border-left-color: var(--cly-studio-cyan);
  background: rgba(34, 211, 238, 0.07);
  color: #92a8b8;
}

#studio-workspace .cly-studio-scale-note.is-warning {
  border-left-color: var(--cly-studio-amber);
  background: rgba(251, 191, 36, 0.08);
  color: #d6c38e;
}

#studio-workspace .cly-studio-finding,
#studio-workspace .cly-studio-legend {
  border-color: var(--cly-border);
  background: #0a151f;
}

#studio-workspace .cly-studio-finding strong { color: #dff9ff; }

/* Keyboard accessibility on the dense control surface. */
#studio-workspace button:focus-visible,
#studio-workspace select:focus-visible,
#studio-workspace input:focus-visible,
#studio-workspace textarea:focus-visible,
#studio-workspace [tabindex]:focus-visible {
  outline: 2px solid var(--cly-studio-cyan);
  outline-offset: 2px;
}

/* Tablet / narrow laptop: keep the program stage full-width and move the
   inspector below it. The tool ribbon remains horizontally discoverable. */
@media (max-width: 1180px) {
  #studio-workspace .cly-studio-command-header .cly-section-heading {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #studio-workspace .cly-studio-layout { grid-template-columns: 1fr; }
  #studio-workspace .cly-studio-drawer {
    position: static;
    max-height: none;
  }

  #studio-workspace .cly-studio-tabs {
    position: static;
    justify-content: flex-start;
  }

  #studio-workspace .cly-studio-tab { flex: 1 1 72px; }
}

@media (max-width: 760px) {
  #studio-workspace {
    margin-inline: -6px;
    padding: 7px;
    border-radius: 11px;
  }

  #studio-workspace .cly-studio-command-header { padding: 10px; }
  #studio-workspace .cly-studio-command-header .cly-section-heading > div:last-child {
    width: 100%;
    justify-content: flex-start !important;
  }

  #studio-workspace .cly-header-control-cluster { width: 100%; }
  #studio-workspace .cly-header-control-cluster .cly-btn { flex: 1; }
  #studio-workspace .cly-studio-project-name { width: 100%; }

  .cly-pro-tool-ribbon {
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    scroll-snap-type: x proximity;
  }

  .cly-tool-cluster { scroll-snap-align: start; }

  .cly-pro-stylebar { justify-content: flex-start; }
  .cly-history-segment { margin-left: 0; }

  #studio-workspace .cly-studio-canvas-container {
    border-radius: 6px;
    box-shadow: 0 0 0 2px #071019, 0 10px 30px rgba(0,0,0,0.42);
  }

  #studio-workspace .cly-studio-canvas-container::after { display: none; }
  #studio-stage-selection-chip { display: none; }

  #studio-workspace .cly-studio-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  #studio-workspace .cly-studio-tab {
    min-width: 0;
    font-size: 9px;
  }

  .cly-var-workflow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cly-var-step::after { display: none; }
}

@media (max-width: 480px) {
  .cly-studio-mode-switch button { padding-inline: 4px; font-size: 9px; }
  .cly-studio-mode-switch button > span { display: none; }
  .cly-style-segment { padding-inline: 6px; }
  .cly-media-segment .cly-studio-check { display: none; }
  .cly-studio-inspector-grid,
  .cly-camera-grid { grid-template-columns: 1fr; }
  .cly-object-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cly-tag-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (pointer: coarse) {
  #studio-workspace .cly-studio-tool-btn { min-height: 34px; }
  #studio-workspace .cly-studio-tab { min-height: 34px; }
  .cly-layer-row { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .cly-spotlight-beam,
  .cly-spotlight-floor,
  .cly-spotlight-scan,
  .cly-selection-pulse,
  .cly-tally-dot,
  #studio-workspace .cly-studio-tabpanel {
    animation: none !important;
  }
}

#studio-workspace .cly-track-confidence {
  align-items: center;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: #9fb9ae;
  display: inline-flex;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  min-height: 24px;
  padding: 0 8px;
}

#studio-workspace .cly-track-confidence[data-state="tracking"],
#studio-workspace .cly-track-confidence[data-state="complete"] {
  background: rgba(114, 246, 173, 0.12);
  border-color: rgba(114, 246, 173, 0.38);
  color: #72f6ad;
}

#studio-workspace .cly-track-confidence[data-state="lost"] {
  background: rgba(251, 75, 95, 0.12);
  border-color: rgba(251, 75, 95, 0.38);
  color: #fb4b5f;
}

#studio-workspace .cly-timeline-track {
  flex: 1;
  min-width: 180px;
  position: relative;
}

#studio-workspace .cly-timeline-track > input[type="range"] {
  accent-color: #72f6ad;
  cursor: pointer;
  display: block;
  margin: 0;
  width: 100%;
}

#studio-workspace .cly-timeline-markers {
  inset: -2px 8px auto;
  pointer-events: none;
  position: absolute;
}

#studio-workspace .cly-timeline-markers button {
  background: #22d3ee;
  border: 2px solid #06151d;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.55);
  cursor: pointer;
  height: 10px;
  padding: 0;
  pointer-events: auto;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 10px;
}

#studio-workspace .cly-timeline-markers button[data-rating="positive"] { background: #72f6ad; }
#studio-workspace .cly-timeline-markers button[data-rating="negative"] { background: #fb4b5f; }
#studio-workspace .cly-timeline-markers button[data-rating="review"] { background: #fbbf24; }


/* ============================================================
   EXPORT PREVIEW — isolated output review surface

   The operator reported still seeing the editor video behind the
   preview, which made the exported result impossible to judge.
   The cause was that "preview" replayed the editor's own <video>
   in place; there was no preview layer at all.

   This layer is deliberately near-opaque. A translucent glass
   pane over moving football video leaves the editor competing
   with the preview, which is the whole complaint. Contrast wins
   over decoration here.

   Not scoped under #studio-workspace: it is appended to <body>
   so it sits above the entire page, including the shell.
   ============================================================ */
.studio-export-preview {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  /* Fully opaque. 0.94 already hid the pitch, but 6% transmission still let
     editor furniture ghost through at the panel edges, and the whole complaint
     was the background competing with the preview. There is nothing to gain
     from seeing the editor while judging an export. */
  background: #020605;
  /* No backdrop-filter blur: a blurred pitch is still a visible, moving
     distraction, and it costs a compositor pass on every preview frame. */
}
.studio-export-preview-shell {
  width: min(1600px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.studio-export-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 14px;
  border: 1px solid rgba(114, 246, 173, 0.22);
  border-radius: 10px;
  background: #08130f;
}
.studio-export-preview-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.studio-export-preview-title strong {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #72f6ad;
}
.studio-export-preview-facts {
  font-size: 11.5px; color: #9fb9ae; font-variant-numeric: tabular-nums;
}
.studio-export-preview-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The shell's secondary button is designed for a light surface; on this
   near-black backdrop it rendered as dark-on-dark and the controls were barely
   legible. Restated for a dark ground -- the same contrast-over-decoration rule
   the backdrop itself follows. */
.studio-export-preview-actions .cly-btn {
  background: #0f2a1e;
  border: 1px solid rgba(114, 246, 173, 0.45);
  color: #d8f5e6;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
}
.studio-export-preview-actions .cly-btn:hover {
  background: #16412e;
  border-color: #72f6ad;
  color: #ffffff;
}
.studio-export-preview-actions .cly-btn:focus-visible {
  outline: 2px solid #72f6ad;
  outline-offset: 2px;
}
/* Export This Clip is the affirmative action and reads as such. */
.studio-export-preview-actions #studio-export-preview-export {
  background: linear-gradient(135deg, #007a3d, #00a852);
  border-color: #00c261;
  color: #ffffff;
}
.studio-export-preview-clock {
  font-size: 12px; font-family: ui-monospace, monospace; color: #dcebe5;
  font-variant-numeric: tabular-nums; margin-right: 4px;
}
/* The stage holds the composited output canvas and nothing else -- no
   handles, no toolbars, no editor guides drawn over the picture. */
.studio-export-preview-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(114, 246, 173, 0.16);
  border-radius: 10px;
  background: #000;
  overflow: hidden;
}
.studio-export-preview-stage canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.studio-export-preview-note {
  margin: 0;
  font-size: 11px;
  color: #8fa79c;
  text-align: center;
}
.studio-export-preview-note.is-error { color: #fb7185; font-weight: 700; }

@media (max-width: 760px) {
  .studio-export-preview { padding: 8px; }
  .studio-export-preview-head { padding: 8px 10px; }
  .studio-export-preview-actions { width: 100%; }
  .studio-export-preview-clock { width: 100%; }
}

/* ============================================================
   VAR EVIDENCE PREVIEW — isolated evidence review surface (Phase D)

   A SEPARATE ruleset from .studio-export-preview above -- that CSS is
   untouched. Same principle, learned from the export preview work: a
   moving/paused football frame behind a translucent panel still competes
   visually, so this backdrop is opaque, not a decorative glass pane.
   ============================================================ */
.studio-evidence-preview {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #020605;
}
.studio-evidence-preview-shell {
  width: min(1600px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.studio-evidence-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 14px;
  border: 1px solid rgba(114, 246, 173, 0.22);
  border-radius: 10px;
  background: #08130f;
}
.studio-evidence-preview-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.studio-evidence-preview-title strong { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #72f6ad; }
.studio-evidence-preview-facts { font-size: 11.5px; color: #9fb9ae; font-variant-numeric: tabular-nums; }
.studio-evidence-preview-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.studio-evidence-preview-actions .cly-btn {
  background: #0f2a1e;
  border: 1px solid rgba(114, 246, 173, 0.45);
  color: #d8f5e6;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
}
.studio-evidence-preview-actions .cly-btn:hover { background: #16412e; border-color: #72f6ad; color: #ffffff; }
.studio-evidence-preview-actions #studio-evidence-preview-approve {
  background: linear-gradient(135deg, #007a3d, #00a852);
  border-color: #00c261;
  color: #ffffff;
}
.studio-evidence-preview-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(114, 246, 173, 0.16);
  border-radius: 10px;
  background: #000;
  overflow: hidden;
}
.studio-evidence-preview-stage canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.studio-evidence-preview-note { margin: 0; font-size: 11px; color: #8fa79c; text-align: center; }

/* ── VAR panel additions (incident fields, calibration status, evidence list) ── */
.cly-var-incident-meta { font-size: 11px; color: var(--cly-muted); margin: 2px 0 8px; }
.cly-var-calibration-status {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--cly-border); background: var(--cly-surface-2); font-size: 12px; margin-bottom: 6px;
}
.cly-var-calibration-status.is-valid { border-color: rgba(0, 122, 61, 0.4); background: var(--cly-green-dim); color: var(--cly-green-dark); }
.cly-var-calibration-status.is-invalid { border-color: rgba(217, 119, 6, 0.4); background: var(--cly-gold-dim); color: var(--cly-gold); }
.cly-var-calibration-status strong { font-weight: 800; }
.cly-var-advanced { margin: 0 0 10px; font-size: 11px; color: var(--cly-muted); }
.cly-var-advanced summary { cursor: pointer; font-weight: 700; }
.cly-var-advanced pre { font-size: 10px; white-space: pre-wrap; word-break: break-all; margin: 6px 0 0; color: var(--cly-text-2); }
.cly-var-evidence-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.cly-var-evidence-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 9px; border: 1px solid var(--cly-border); border-radius: 7px; font-size: 11.5px;
}

/* ── Broadcast tab: camera mosaic, sync bar, VAR Subscreen tray ──────────── */
.cly-camera-transport { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.cly-camera-transport input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--cly-green); }
.cly-camera-transport select {
  padding: 4px 6px; border-radius: 6px; border: 1px solid var(--cly-border);
  background: var(--cly-surface-2); color: var(--cly-text); font-size: 11.5px;
}

.cly-camera-sync-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.cly-camera-sync-chip {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px;
  border: 2px solid var(--cly-border); background: var(--cly-surface-2); font-size: 11.5px; min-width: 128px;
}
.cly-camera-sync-chip span { font-weight: 700; }
.cly-camera-sync-chip.is-reference { border-color: #ffb020; }
.cly-camera-sync-chip.is-synced { border-color: #00e676; }
.cly-camera-sync-chip.is-unsynced { border-color: #fb4b5f; }
.cly-camera-sync-chip button {
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--cly-border);
  background: var(--cly-surface); color: var(--cly-text); font-size: 11px; cursor: pointer;
}
.cly-camera-sync-nudge { display: flex; align-items: center; gap: 6px; }
.cly-camera-sync-nudge small { min-width: 34px; text-align: center; color: var(--cly-muted); }

.cly-camera-mosaic {
  display: grid; gap: 10px; margin: 10px 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.cly-camera-mosaic--1 { grid-template-columns: minmax(220px, 1fr); }
.cly-camera-tile {
  position: relative; border: 2px solid var(--cly-border); border-radius: 10px; overflow: hidden;
  background: #020807; display: flex; flex-direction: column;
}
.cly-camera-tile.is-reference { border-color: #ffb020; }
.cly-camera-tile.is-synced { border-color: #00e676; }
.cly-camera-tile.is-unsynced { border-color: #fb4b5f; }
.cly-camera-tile.is-in-tray { box-shadow: 0 0 0 2px var(--cly-green) inset; }
.cly-camera-tile-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.cly-camera-tile-video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.cly-camera-tile-chrome {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 4px;
  padding: 5px 6px; background: var(--cly-surface-2); font-size: 10.5px;
}
.cly-camera-tile-label {
  border: 1px solid var(--cly-border); border-radius: 5px; background: var(--cly-surface);
  color: var(--cly-text); font-size: 10.5px; padding: 3px 5px; min-width: 0;
}
.cly-camera-tile-role {
  border: 1px solid var(--cly-border); border-radius: 5px; background: var(--cly-surface);
  color: var(--cly-text); font-size: 10.5px; padding: 3px 4px;
}
.cly-camera-tile-add, .cly-camera-tile-remove {
  border: 1px solid var(--cly-border); border-radius: 5px; background: var(--cly-surface);
  color: var(--cly-text); font-size: 10.5px; padding: 3px 6px; cursor: pointer;
}
.cly-camera-tile-add:disabled { opacity: 0.4; cursor: not-allowed; }
.cly-camera-tile-remove { color: #ff8a97; }

.cly-var-subscreen-tray {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 46px; padding: 8px;
  border: 2px dashed var(--cly-border); border-radius: 10px; margin: 8px 0 14px;
}
.cly-var-subscreen-chip {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--cly-green); background: var(--cly-green-dim); color: var(--cly-green-dark);
  font-size: 11.5px; font-weight: 700;
}
.cly-var-subscreen-chip button {
  border: none; background: transparent; color: inherit; cursor: pointer; font-size: 12px; line-height: 1;
}

.cly-camera-removed-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 8px; border: 1px solid var(--cly-border); border-radius: 7px; font-size: 11.5px; margin-top: 4px;
}
.cly-camera-removed-chip button {
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--cly-border);
  background: var(--cly-surface); color: var(--cly-text); font-size: 11px; cursor: pointer;
}

/* ============================================================
   CAFLYTICS VISUAL EXPERIENCE V2 — GLOBAL DESIGN SYSTEM LAYER
   ============================================================ */

:root {
  --cly-card-radius: 12px;
  --cly-section-gap: 24px;
  --cly-hero-padding: 24px 28px;
  --cly-verified: #059669;
  --cly-partial: #d97706;
  --cly-unavailable: #64748b;
  --cly-gold-accent: #b87d2e;
}

/* ── Global Page Hero Component V2 ────────────────────────── */
.cly-hero-v2 {
  position: relative;
  overflow: hidden;
  border-radius: var(--cly-card-radius);
  background:
    radial-gradient(1000px 400px at 10% -20%, rgba(0, 146, 74, 0.28), transparent 60%),
    radial-gradient(600px 300px at 100% 0%, rgba(184, 125, 46, 0.22), transparent 55%),
    linear-gradient(155deg, #0a1926 0%, #122334 60%, #1a2f42 100%);
  color: #eef3f0;
  padding: 24px 28px;
  margin-bottom: 22px;
  border: 1px solid rgba(184, 125, 46, 0.35);
  box-shadow: 0 10px 30px rgba(10, 25, 38, 0.15);
}

.cly-hero-v2::before {
  content: '';
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.cly-hero-v2-grid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cly-hero-v2-identity {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 320px;
}

.cly-hero-v2-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 26px;
  border: 2px solid var(--cly-gold);
  background: rgba(255, 255, 255, 0.1);
  color: #fdf3e3;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cly-hero-v2-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.cly-hero-v2-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cly-hero-v2-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7dd9a6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cly-hero-v2-title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

.cly-hero-v2-sub {
  font-size: 13px;
  color: #c7d3ce;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cly-hero-v2-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.cly-hero-v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #eef3f0;
}

.cly-hero-v2-chip.is-active {
  background: rgba(5, 150, 105, 0.25);
  border-color: #059669;
  color: #6ee7b7;
}

.cly-hero-v2-chip.is-gold {
  background: rgba(184, 125, 46, 0.25);
  border-color: #b87d2e;
  color: #fde68a;
}

.cly-hero-v2-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cly-hero-v2-summary-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cly-hero-v2-stat {
  display: flex;
  flex-direction: column;
}

.cly-hero-v2-stat strong {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.cly-hero-v2-stat span {
  font-size: 11px;
  color: #a9bcb6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ── Scaled 4-Tier KPI Hierarchy ──────────────────────────── */
.cly-kpi-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.cly-kpi-tier-card {
  background: var(--cly-surface);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-card-radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--cly-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cly-kpi-tier-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cly-shadow-md);
}

.cly-kpi-tier-card.is-primary {
  border-left: 4px solid var(--cly-green);
  background: linear-gradient(180deg, var(--cly-surface) 0%, var(--cly-surface-2) 100%);
}

.cly-kpi-tier-card.is-status {
  border-left: 4px solid var(--cly-positive);
}

.cly-kpi-tier-card.is-coverage {
  border-left: 4px solid var(--cly-gold);
}

.cly-kpi-tier-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--cly-navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.cly-kpi-tier-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cly-text-2);
  margin-top: 4px;
}

.cly-kpi-tier-sub {
  font-size: 11px;
  color: var(--cly-muted);
  margin-top: 2px;
}

/* ── Compact Filter Toolbar V2 ────────────────────────────── */
.cly-filter-bar-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--cly-surface);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-card-radius);
  margin-bottom: 20px;
  box-shadow: var(--cly-shadow-sm);
}

.cly-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 150px;
}

.cly-filter-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cly-muted);
}

.cly-filter-select,
.cly-filter-input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--cly-border);
  border-radius: 8px;
  background: var(--cly-surface-2);
  color: var(--cly-text);
  font-size: 12.5px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cly-filter-select:focus,
.cly-filter-input:focus {
  border-color: var(--cly-green);
  box-shadow: 0 0 0 3px var(--cly-green-dim);
  background: var(--cly-surface);
}

/* ── Standardized 3-State Spatial Map / Pitch System ──────── */
.cly-spatial-card-v2 {
  background: var(--cly-surface);
  border: 1px solid var(--cly-border);
  border-radius: var(--cly-card-radius);
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: var(--cly-shadow-sm);
}

.cly-spatial-head-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.cly-spatial-badge-v2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.cly-spatial-badge-v2.is-full {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.cly-spatial-badge-v2.is-partial {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.cly-spatial-warning-banner-v2 {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #d97706;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
  margin-bottom: 14px;
  line-height: 1.4;
}

.cly-spatial-fallback-v2 {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: var(--cly-card-radius);
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 22px;
}

.cly-spatial-fallback-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.cly-spatial-fallback-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.cly-fb-metric-v2 strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
}

.cly-fb-metric-v2 span {
  font-size: 11px;
  color: #64748b;
}

/* ── Standardized Empty States V2 ─────────────────────────── */
.cly-empty-v2 {
  background: var(--cly-surface);
  border: 1px dashed var(--cly-border);
  border-radius: var(--cly-card-radius);
  padding: 32px 24px;
  text-align: center;
  margin: 16px 0;
}

.cly-empty-v2-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cly-surface-2);
  color: var(--cly-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.cly-empty-v2-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--cly-navy);
  margin: 0 0 6px;
}

.cly-empty-v2-desc {
  font-size: 12.5px;
  color: var(--cly-muted);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.45;
}

/* ── Large Desktop & Responsive Densities ──────────────────── */
@media (min-width: 1920px) {
  .cly-content {
    max-width: 1720px;
    margin: 0 auto;
  }
  .cly-kpi-tier-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 2560px) {
  .cly-content {
    max-width: 2240px;
    margin: 0 auto;
  }
  .cly-kpi-tier-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .cly-hero-v2-grid {
    flex-direction: column;
    align-items: flex-start;
  }
  .cly-hero-v2-identity {
    min-width: 100%;
  }
  .cly-kpi-tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cly-hero-v2 {
    padding: 18px 16px;
  }
  .cly-kpi-tier-grid {
    grid-template-columns: 1fr;
  }
  .cly-filter-bar-v2 {
    flex-direction: column;
    align-items: stretch;
  }
}