/* ==========================================================================
   Falcon Dive x FIFA World Cup 2026 — Components
   Reusable component styles
   ========================================================================== */

/* ==========================================================================
   Falcon Dive Beak Mark Logo
   ========================================================================== */
.fd-beak {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}
.fd-beak--sm {
  width: 16px;
  height: 16px;
}
.fd-beak--lg {
  width: 28px;
  height: 28px;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  box-shadow: var(--elevation-card);
}

.card--elevated {
  background: var(--bg-elevated);
}

.card--teal {
  border-left: 3px solid var(--fd-primary);
}

.card--gold {
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: var(--radius-card);
}

/* Falcon Dive callout card — glowing blue border */
.fd-callout {
  background: linear-gradient(135deg, rgba(59, 114, 237, 0.06), rgba(59, 114, 237, 0.02));
  border: 1px solid rgba(59, 114, 237, 0.35);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  box-shadow: 0 0 8px rgba(59, 114, 237, 0.15), 0 0 20px rgba(59, 114, 237, 0.08);
}

.fd-callout__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

/* Product pill variants — small inline pills for EXO / PLIX / OMNIS */
.fd-callout__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  height: fit-content;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.fd-callout__pill--exo {
  background: rgba(77, 212, 172, 0.10);
  color: #4DD4AC;
  border-color: rgba(77, 212, 172, 0.25);
}

.fd-callout__pill--plix {
  background: rgba(59, 114, 237, 0.12);
  color: #6FA0F6;
  border-color: rgba(59, 114, 237, 0.28);
}

.fd-callout__pill--omnis {
  background: rgba(241, 141, 116, 0.12);
  color: #F18D74;
  border-color: rgba(241, 141, 116, 0.28);
}

.fd-callout__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  max-height: calc(var(--text-sm) * 1.5 * 4);
  overflow: hidden;
}

.fd-callout__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--fd-primary);
  font-weight: 500;
}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-badge);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* LIVE badge with pulse */
.badge--live {
  background: var(--live-red);
  color: #fff;
  animation: pulse-live-badge 1.5s ease-in-out infinite;
}

@keyframes pulse-live-badge {
  0%, 100% {
    transform: scale(1.0);
    opacity: 1.0;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

@keyframes pulse-live {
  0%, 100% {
    transform: scale(1.0);
    opacity: 1.0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

.badge--ht {
  background: var(--draw-amber);
  color: #000;
}

.badge--ft {
  background: var(--win-green);
  color: #000;
}

.badge--ns {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.badge--et {
  background: var(--draw-amber);
  color: #000;
}

.badge--pen {
  background: var(--live-red);
  color: #fff;
}

.badge--demo {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.match-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: default;
  user-select: none;
}

.match-context-chip__label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}

.match-context-chip__value {
  color: var(--text-primary);
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-context-chip .ti-chevron-down {
  font-size: 12px;
  color: var(--text-muted);
}

.match-context-chip[data-mode="pinned"] {
  border-color: var(--fd-primary);
  background: var(--fd-glow);
}

.match-context-chip[data-mode="concurrent"] {
  border-color: var(--blue-500, #3B72ED);
}

.badge--sharp {
  background: var(--fd-glow);
  color: var(--fd-primary);
  font-size: 9px;
}

.badge--value {
  background: rgba(255, 215, 0, 0.15);
  color: var(--value-gold);
}

.badge--strong-value {
  background: rgba(255, 215, 0, 0.2);
  color: var(--value-gold);
  font-weight: 700;
}

/* Status badges with leading dot */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
}

.status-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-badge--fit .status-badge__dot { background: var(--win-green); }
.status-badge--fit { color: var(--win-green); }

.status-badge--doubt .status-badge__dot { background: var(--draw-amber); }
.status-badge--doubt { color: var(--draw-amber); }

.status-badge--out .status-badge__dot { background: var(--loss-red); }
.status-badge--out { color: var(--loss-red); }

.status-badge--suspended .status-badge__dot { background: var(--coral-400); }
.status-badge--suspended { color: var(--coral-400); }

.status-badge--booked .status-badge__dot { background: var(--draw-amber); }
.status-badge--booked { color: var(--draw-amber); }

/* ==========================================================================
   Buttons — Pill-shaped per Aeros (7 variants)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

/* Primary — solid blue */
.btn--primary {
  background: var(--blue-500);
  color: #fff;
}
.btn--primary:hover {
  filter: brightness(1.1);
}

/* Primary Confirm — slightly brighter */
.btn--primary-confirm {
  background: var(--blue-500);
  color: #fff;
}
.btn--primary-confirm:hover {
  filter: brightness(1.1);
}

/* Coral */
.btn--coral {
  background: #F18D74;
  color: #0a0a0f;
}
.btn--coral:hover {
  filter: brightness(1.1);
}

/* Light */
.btn--light {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}
.btn--light:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Ghost with leading icon */
.btn--ghost-leading {
  background: transparent;
  color: var(--blue-500);
  border: 1px solid rgba(59, 114, 237, 0.3);
}
.btn--ghost-leading:hover {
  background: rgba(59, 114, 237, 0.08);
}

/* Ghost with trailing icon */
.btn--ghost-trailing {
  background: transparent;
  color: var(--blue-500);
  border: 1px solid rgba(59, 114, 237, 0.3);
}
.btn--ghost-trailing:hover {
  background: rgba(59, 114, 237, 0.08);
}

/* Subtle */
.btn--subtle {
  background: transparent;
  color: var(--text-secondary);
}
.btn--subtle:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* ==========================================================================
   Tables
   ========================================================================== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, var(--text-muted));
  border-bottom: 1px solid var(--bg-border);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-border);
  color: var(--text-secondary);
  white-space: nowrap;
}

.data-table tr:hover td {
  background: var(--bg-elevated);
}

/* Striped rows */
.data-table--striped tbody tr:nth-child(even) td {
  background: rgba(26, 26, 36, 0.5);
}

/* Pinnacle sharp-book row */
.data-table tr.pinnacle-row td {
  background: var(--fd-glow);
}

/* Numeric right-align */
.data-table td[data-numeric],
.data-table th[data-numeric] {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Scrollable table wrapper */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--bg-border);
  margin-bottom: var(--gap-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabs__item {
  padding: 10px 16px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

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

.tabs__item.is-active {
  color: var(--blue-500);
  border-bottom-color: var(--blue-500);
}

/* ==========================================================================
   Preview Banner — Capability Gate (Dev Spec §3.3)
   ========================================================================== */
.preview-banner {
  background: var(--bg-elevated);
  border-left: 3px solid var(--fd-primary);
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--gap-md);
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
  line-height: 1.5;
}

.preview-banner strong {
  color: var(--text-primary);
}

/* ==========================================================================
   Progress Bars & Probability Bars
   ========================================================================== */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 400ms ease;
  width: 0;
}

.progress-bar__fill--teal { background: var(--blue-500); }
.progress-bar__fill--blue { background: var(--fd-secondary); }
.progress-bar__fill--green { background: var(--win-green); }
.progress-bar__fill--red { background: var(--loss-red); }
.progress-bar__fill--amber { background: var(--draw-amber); }
.progress-bar__fill--gold { background: var(--value-gold); }

/* Stat bar — dual-sided */
.stat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-bar__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  min-width: 40px;
  text-align: center;
}

.stat-bar__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: center;
}

.stat-bar__track {
  flex: 1;
  height: 4px;
  background: var(--bg-border);
  border-radius: 2px;
  overflow: hidden;
}

.stat-bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 400ms ease;
}

/* Probability bars */
.probability-bar {
  display: flex;
  height: 24px;
  border-radius: var(--radius-badge);
  overflow: hidden;
  gap: 1px;
}

.probability-bar__segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: 500;
  color: #fff;
  transition: width 400ms ease;
}

/* ==========================================================================
   Shimmer Skeleton Loading
   ========================================================================== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-3, var(--bg-elevated)) 25%,
    var(--bg-border) 50%,
    var(--surface-3, var(--bg-elevated)) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}

.skeleton--text {
  height: 14px;
  margin-bottom: 8px;
}

.skeleton--text-sm {
  height: 10px;
  width: 60%;
  margin-bottom: 6px;
}

.skeleton--card {
  height: 120px;
  border-radius: var(--radius-card);
}

.skeleton--chart {
  height: 200px;
  border-radius: var(--radius-card);
}

.skeleton--circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   Odds Flash Animations
   ========================================================================== */
.odds-flash-up {
  animation: odds-up 500ms ease;
}

.odds-flash-down {
  animation: odds-down 500ms ease;
}

@keyframes odds-up {
  0% { background-color: transparent; }
  20% { background-color: rgba(34, 197, 94, 0.3); }
  100% { background-color: transparent; }
}

@keyframes odds-down {
  0% { background-color: transparent; }
  20% { background-color: rgba(239, 68, 68, 0.3); }
  100% { background-color: transparent; }
}

/* ==========================================================================
   Omnis Accordion (Cross-sell #3)
   ========================================================================== */
.omnis-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease;
  background: var(--bg-elevated);
  border-top: 1px solid var(--bg-border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.omnis-accordion.is-open {
  max-height: 200px;
}

.omnis-accordion__content {
  padding: 14px 20px;
}

.omnis-accordion__step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.omnis-accordion__step:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Pressure Index Gauge
   ========================================================================== */
.gauge {
  width: 100%;
  height: 8px;
  background: var(--bg-border);
  border-radius: 4px;
  overflow: hidden;
}

.gauge__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 600ms ease;
  background: var(--blue-500);
}

/* ==========================================================================
   Commentary Ticker
   ========================================================================== */
.commentary-ticker {
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.commentary-ticker__entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  animation: commentary-fade-in 300ms ease;
}

@keyframes commentary-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.commentary-ticker__minute {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--blue-500);
  background: rgba(59, 114, 237, 0.08);
  padding: 1px 6px;
  border-radius: var(--radius-badge);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Penalty Shootout
   ========================================================================== */
.pen-kick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  animation: pen-kick-in 300ms ease;
}

.pen-kick--scored {
  background: rgba(34, 197, 94, 0.2);
  color: var(--win-green);
}

.pen-kick--missed {
  background: rgba(239, 68, 68, 0.2);
  color: var(--loss-red);
}

.pen-kick--current {
  border: 2px solid var(--blue-500);
  animation: pen-current-pulse 1.5s ease-in-out infinite;
}

@keyframes pen-kick-in {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pen-current-pulse {
  0%, 100% { border-color: var(--blue-500); opacity: 1; }
  50% { border-color: rgba(59, 114, 237, 0.4); opacity: 0.7; }
}

/* ==========================================================================
   Ball Heatmap Density
   ========================================================================== */
.heatmap-point {
  transition: opacity 400ms ease;
}

/* ==========================================================================
   Form / Input (Lead Capture)
   ========================================================================== */
.lead-capture {
  background: linear-gradient(135deg, rgba(59, 114, 237, 0.06), rgba(59, 114, 237, 0.03));
  border: 1px solid rgba(59, 114, 237, 0.2);
  border-radius: var(--radius-card);
  padding: 28px 32px;
}

.lead-capture__input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: var(--text-base);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lead-capture__input:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 2px rgba(59, 114, 237, 0.2);
}

.lead-capture__submit {
  background: var(--blue-500);
  color: #fff;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.lead-capture__submit:hover {
  filter: brightness(1.1);
}

.lead-capture__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Empty / Error States
   ========================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.empty-state__icon {
  font-size: 32px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.empty-state__text {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.empty-state__subtext {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 6px;
}

/* Stale hero banner */
.hero-stale-banner {
  display: none;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  font-size: var(--text-sm);
  color: var(--draw-amber);
  margin-bottom: var(--gap-sm);
}

.hero-stale-banner.is-visible {
  display: block;
}

/* ==========================================================================
   Form Guide Dots
   ========================================================================== */
.form-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 1px;
}

.form-dot--w { background: var(--win-green); }
.form-dot--d { background: var(--draw-amber); }
.form-dot--l { background: var(--loss-red); }

/* ==========================================================================
   Qualification Band Rows
   ========================================================================== */
.qual-row--qualified td {
  border-left: 3px solid var(--blue-500);
  background: rgba(59, 114, 237, 0.04);
}

.qual-row--possible td {
  border-left: 3px dashed var(--blue-500);
}

.qual-row--eliminated td {
  color: var(--text-muted);
}

/* ==========================================================================
   KPI / Stat Cards
   ========================================================================== */
.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-card__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-card__value {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--text-xl);
  color: var(--text-primary);
  line-height: 1.1;
}

.kpi-card__value--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Match Row
   ========================================================================== */
.match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bg-border);
  cursor: pointer;
  transition: background 0.1s ease;
}

.match-row:hover {
  background: var(--bg-elevated);
}

.match-row__teams {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}

.match-row__score {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: center;
}

/* ==========================================================================
   Tooltip
   ========================================================================== */
.tooltip {
  position: absolute;
  background: var(--surface-4);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  z-index: 1100;
  pointer-events: none;
  box-shadow: var(--elevation-popover);
  max-width: 240px;
}

/* ==========================================================================
   Updating Pulse (xG during live)
   ========================================================================== */
.updating-pulse {
  color: var(--text-muted);
  font-style: italic;
  animation: updating-text 1.5s ease-in-out infinite;
}

@keyframes updating-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ==========================================================================
   SECTION HEADER PATTERN — Breadcrumb + Display Title + Subtitle
   ========================================================================== */
.section-breadcrumb {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.section-display-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 250;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.section-display-title strong {
  font-weight: 600;
}

.section-subtitle {
  font-size: 15px;
  color: var(--text-tertiary, #7B89B8);
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 720px;
}

/* ==========================================================================
   COMMAND CENTER (Section 7.1)
   ========================================================================== */

/* Section title (legacy — kept for backward compat) */
.section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title i {
  color: var(--blue-500);
}

/* ── Section header with actions ── */
.cc-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.cc-section-header__content {
  flex: 1;
}

.cc-section-header__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 28px;
}

/* ── KPI dots (shared) ── */
.cc-kpi__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live-red);
}

.cc-kpi__dot--live {
  animation: kpi-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes kpi-dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(255, 68, 68, 0); }
}

/* ── KPI grid (v2 — below hero) ── */
.cc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.cc-kpi-v2 {
  padding: 16px 20px;
}

.cc-kpi-v2__header {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cc-kpi-v2__header i {
  font-size: 14px;
}

.cc-kpi-v2__header--teal {
  color: var(--fd-primary);
}

.cc-kpi-v2__value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

.cc-kpi-v2__value {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 36px;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.cc-kpi-v2__value--name {
  font-size: 28px;
  font-weight: 300;
}

.cc-kpi-v2__value--teal {
  color: var(--fd-primary);
}

.cc-kpi-v2__sub {
  font-size: 13px;
  color: var(--text-secondary);
}

.cc-kpi-v2__footer {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.cc-kpi-v2__footer i {
  font-size: 12px;
}

.cc-kpi-v2--teal {
  border-left: 3px solid var(--fd-primary);
}

/* ── Hero match panel ── */
.cc-hero {
  margin-bottom: 16px;
}

.cc-hero--gradient {
  background: linear-gradient(90deg, rgba(0,35,149,0.20) 0%, rgba(0,10,15,0.0) 40%, rgba(0,156,59,0.12) 100%), var(--bg-surface);
}

.cc-hero__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.cc-hero__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cc-hero__header-right {
  display: flex;
  gap: 8px;
}

.cc-hero__live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

.cc-hero__live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--win-green);
  animation: kpi-dot-pulse 1.5s ease-in-out infinite;
}

.cc-hero__match-info {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.cc-hero__action-btn {
  padding: 6px 16px;
  font-size: 13px;
}

/* ── Teams + Score (v2) ── */
.cc-hero__match-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
}

.cc-hero__team-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 180px;
}

.cc-hero__team-v2--home {
  justify-content: flex-end;
}

.cc-hero__team-v2--away {
  justify-content: flex-start;
}

.cc-hero__flag-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-hero__flag-ring--blue {
  border: 2px solid var(--france-blue);
  box-shadow: 0 0 12px rgba(0, 35, 149, 0.3);
}

.cc-hero__flag-ring--green {
  border: 2px solid var(--brazil-green);
  box-shadow: 0 0 12px rgba(0, 156, 59, 0.3);
}

.cc-hero__flag-emoji {
  font-size: 32px;
  line-height: 1;
}

.cc-hero__team-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc-hero__team-details--right {
  align-items: flex-end;
  text-align: right;
}

.cc-hero__team-name-v2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.1;
}

.cc-hero__form-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cc-hero__form-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Score block */
.cc-hero__score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cc-hero__score-time {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.cc-hero__score {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc-hero__score-num {
  font-size: 72px;
  font-weight: 200;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cc-hero__score-sep {
  font-size: 28px;
  color: var(--text-muted);
  font-weight: 200;
}

.cc-hero__venue-line {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
}

/* ── Stats grid (3-column) ── */
.cc-hero__stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 16px;
}

.cc-hero__stat-col {
  padding: 14px 16px;
}

.cc-hero__stat-col--bordered {
  border-left: 1px solid var(--bg-border);
}

.cc-hero__stat-values {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.cc-hero__stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

.cc-stat-val {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.cc-stat-val--home {
  color: var(--text-primary);
}

.cc-stat-val--away {
  color: var(--text-primary);
}

.cc-stat-sub {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
}

.cc-hero__stat-bars {
  display: flex;
  gap: 3px;
  height: 4px;
}

.cc-hero__stat-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 400ms ease;
}

.cc-hero__stat-bar--home {
  background: var(--france-blue);
}

.cc-hero__stat-bar--away {
  background: var(--brazil-green);
}

/* ── Odds cards ── */
.cc-hero__odds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.cc-odds-card {
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-card);
  padding: 14px 18px;
}

.cc-odds-card--highlight {
  border-color: var(--win-green);
  background: rgba(34, 197, 94, 0.04);
}

.cc-odds-card__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.cc-odds-card__label--green {
  color: var(--win-green);
}

.cc-odds-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cc-odds-card__value {
  font-size: 28px;
  font-weight: 200;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cc-odds-card__value--green {
  color: var(--win-green);
}

.cc-odds-card__delta {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-badge);
}

.cc-odds-card__delta--red {
  background: rgba(239, 68, 68, 0.15);
  color: var(--loss-red);
}

.cc-odds-card__delta--green {
  background: rgba(34, 197, 94, 0.15);
  color: var(--win-green);
}

/* Match Facts strip */
/* Narrative row — 2-column: AI narrative left, facts + commentary right */
.cc-narrative-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 12px;
  margin-bottom: 12px;
}

.cc-narrative-row__right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cc-narrative-row .cc-narrative,
.cc-narrative-row .cc-facts,
.cc-narrative-row .cc-commentary {
  margin-bottom: 0;
}

.cc-narrative-row .cc-narrative {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cc-narrative-row .cc-narrative .cc-narrative__body {
  flex: 1;
}

@media (max-width: 1024px) {
  .cc-narrative-row { grid-template-columns: 1fr; }
}

.cc-facts {
  padding: 14px 20px;
}

.cc-facts__header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.cc-facts__item {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
}

/* AI Narrative */
.cc-narrative {
  padding: 14px 20px;
}

.cc-narrative__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.cc-narrative__body {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.7;
  transition: max-height 250ms ease;
}

.cc-narrative.is-collapsed .cc-narrative__body {
  max-height: 0;
  overflow: hidden;
}

/* Commentary ticker */
.cc-commentary {
  margin-bottom: 12px;
  padding: 14px 20px;
}

.cc-commentary__header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.cc-commentary__ticker {
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}

/* PLIX Sentinel — glowing blue border */
.cc-plix-sentinel {
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(59, 114, 237, 0.06), rgba(59, 114, 237, 0.02));
  border: 1px solid rgba(59, 114, 237, 0.35);
  box-shadow: 0 0 8px rgba(59, 114, 237, 0.15), 0 0 20px rgba(59, 114, 237, 0.08);
}

.cc-plix__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.cc-plix__badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-plix__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cc-plix__time {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.cc-plix__body {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 8px;
}

.cc-plix__action {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.cc-plix__action .fd-callout__pill {
  position: relative;
  top: 1px;
}

/* Middle row */
.cc-middle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

/* Match Facts + Live Commentary side-by-side row */
.cc-facts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

/* Group snapshot */
.cc-group-snapshot__header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.cc-group-snapshot__table th,
.cc-group-snapshot__table td {
  padding: 4px 6px;
  font-size: 12px;
}

.cc-group-row--qualified {
  border-left: 2px solid var(--blue-500);
}

/* Now playing */
.cc-now-playing__header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.cc-now-playing__match {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bg-border);
  font-size: 13px;
  color: var(--text-primary);
}

.cc-now-playing__group {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary);
}

/* Bottom row */
.cc-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

/* Value bets compact */
.cc-vb__header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.cc-vb__item {
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-border);
}

.cc-vb__market {
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 4px;
}

.cc-vb__details {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* xG chart & Odds movement — fill card height */
.cc-xg-chart,
.cc-odds-movement {
  display: flex;
  flex-direction: column;
}

.cc-xg-chart__header,
.cc-odds-movement__header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* EXO callout prominence */
.cc-exo-callout {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(59, 114, 237, 0.12), rgba(59, 114, 237, 0.06));
  border: 1px solid rgba(59, 114, 237, 0.35);
}

/* Responsive */
@media (max-width: 1024px) {
  .cc-section-header { flex-direction: column; gap: 12px; }
  .cc-section-header__actions { padding-top: 0; }
  .cc-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-middle-row { grid-template-columns: 1fr; }
  .cc-bottom-row { grid-template-columns: 1fr; }
  .cc-hero__stats-grid { grid-template-columns: 1fr; }
  .cc-hero__stat-col--bordered { border-left: none; border-top: 1px solid var(--bg-border); }
}

@media (max-width: 768px) {
  .cc-hero__match-v2 { flex-direction: column; gap: 16px; }
  .cc-hero__team-v2--home,
  .cc-hero__team-v2--away { justify-content: center; }
  .cc-hero__team-details--right { align-items: center; text-align: center; }
  .cc-hero__score-num { font-size: 48px; }
  .cc-hero__flag-ring { width: 48px; height: 48px; }
  .cc-hero__flag-emoji { font-size: 24px; }
  .cc-hero__header { flex-direction: column; align-items: flex-start; }
  .cc-hero__odds-grid { grid-template-columns: 1fr; }
  .cc-kpi-grid { grid-template-columns: 1fr; }
  .cc-facts-row { grid-template-columns: 1fr; }
}

/* ── Concurrent-match split hero (cc-hero--split) ──────────────────────────
   Activated only when AppState.matchContext.mode === 'concurrent'.
   Layout: 2-column ≥1280px, stacked tablet, segmented-control swap on mobile. */
.cc-hero--split {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.cc-hero--split .cc-hero__half {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--bg-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-hero--split .cc-hero__half--primary { border-left: 2px solid var(--fd-primary); }
.cc-hero--split .cc-hero__half--secondary { border-left: 2px solid var(--blue-500, #3B72ED); }
.cc-hero--split .cc-hero__half-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cc-hero--split .cc-hero__half-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cc-hero--split .cc-hero__score-num { font-size: 56px; font-weight: 250; }
.cc-hero--split .cc-hero__flag-ring { width: 48px; height: 48px; }
.cc-hero--split .cc-hero__team-name-v2 { font-size: 16px; }
.cc-hero--split .cc-hero__team-v2 { min-width: 0; gap: 10px; }
.cc-hero--split .cc-hero__half-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.cc-hero--split .cc-hero__half-stat-label {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 3px;
}
.cc-hero--split .cc-hero__half-odds {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.cc-hero--split .cc-odds-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  font-size: 11px;
}
.cc-hero--split .cc-odds-chip__label {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cc-hero--split .cc-hero__stat-bars--inline {
  display: flex;
  gap: 3px;
  height: 4px;
}

/* Mobile segmented control (only visible <768px) */
.cc-hero__match-toggle {
  display: none;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elevated);
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.cc-hero__match-toggle-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 180ms ease, color 180ms ease;
}
.cc-hero__match-toggle-btn--active {
  background: var(--fd-primary);
  color: #0a0a0f;
}

/* Match-tag chip used in shared blocks (AI Narrative / Match Facts / Commentary) */
.cc-match-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-badge);
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  color: var(--fd-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 6px 0 4px;
  vertical-align: middle;
}

/* Tablet 768–1279px: stack halves */
@media (max-width: 1279px) {
  .cc-hero--split { flex-direction: column; }
}

/* Mobile <768px: hide split layout, show segmented toggle + single active half */
@media (max-width: 767px) {
  .cc-hero__match-toggle { display: flex; }
  .cc-hero--split .cc-hero__half { display: none; }
  .cc-hero--split .cc-hero__half--mobile-active { display: flex; }
}

/* ==========================================================================
   GROUP STANDINGS (Section 7.2)
   ========================================================================== */
.gs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.gs-tabs {
  display: flex;
  gap: 6px;
}

.gs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.gs-card {
  padding: 12px 14px;
  overflow-x: auto;
}

.gs-card--hero {
  border: 1px solid var(--blue-500);
}

.gs-card__header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.gs-table {
  width: 100%;
  font-size: 11px;
}

.gs-table th {
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 4px 3px;
  text-align: center;
}

.gs-table th:nth-child(3) { text-align: left; }

.gs-table td {
  padding: 4px 3px;
  text-align: center;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.gs-table td:nth-child(3) { text-align: left; }

.gs-flag {
  font-size: 14px;
}

.gs-team-name { white-space: nowrap; }

.gs-team-link {
  color: var(--text-primary);
  text-decoration: none;
}

.gs-team-link:hover {
  color: var(--blue-500);
  text-decoration: underline;
}

/* Qualification bands */
.gs-row--qualified {
  background: rgba(59, 114, 237, 0.06);
  border-left: 2px solid var(--blue-500);
}

.gs-row--best-third {
  border-left: 2px dashed var(--blue-500);
}

.gs-row--eliminated {
  opacity: 0.5;
}

/* Form dots */
.gs-form {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.gs-form-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.gs-form-dot--win { background: var(--win-green); }
.gs-form-dot--draw { background: var(--draw-amber); }
.gs-form-dot--loss { background: var(--loss-red); }

/* Live dot */
.gs-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live-red);
  margin-left: 4px;
  animation: pulse-live-badge 1.5s ease-in-out infinite;
}

/* Legend */
.gs-legend {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
}

.gs-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gs-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.gs-legend-color--qualified { background: rgba(59, 114, 237, 0.3); border-left: 2px solid var(--blue-500); }
.gs-legend-color--third { border-left: 2px dashed var(--blue-500); }
.gs-legend-color--elim { background: var(--bg-border); opacity: 0.5; }

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

@media (max-width: 768px) {
  .gs-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MATCH SCHEDULE (Section 7.3)
   ========================================================================== */
.ms-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.ms-date-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--bg-border);
  margin-bottom: 8px;
}

.ms-concurrent-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 0;
  background: rgba(59, 114, 237, 0.06);
  border-left: 3px solid var(--blue-500);
  padding-left: 12px;
  margin-bottom: 8px;
}

.ms-match-row {
  margin-bottom: 8px;
  padding: 12px 16px;
  transition: border-color 150ms;
}

.ms-match-row:hover {
  border-color: var(--blue-500);
}

.ms-match-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ms-match-row__status {
  min-width: 80px;
}

.ms-match-row__teams {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.ms-match-row__team {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
}

.ms-match-row__score {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  min-width: 50px;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ms-match-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.ms-match-row__actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.ms-day-change {
  font-size: 10px;
  color: var(--draw-amber);
  font-weight: 500;
}

/* Status badges */
.badge--ht {
  background: var(--draw-amber);
  color: #000;
}

.badge--ft {
  background: var(--win-green);
  color: #000;
}

.badge--ns {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.badge--var {
  background: rgba(59, 114, 237, 0.2);
  color: #3B72ED;
  font-size: 9px;
  padding: 1px 6px;
}

.badge--value-strong {
  background: rgba(255, 215, 0, 0.15);
  color: var(--value-gold);
  font-size: 9px;
}

.badge--value {
  background: rgba(59, 114, 237, 0.1);
  color: var(--blue-500);
  font-size: 9px;
}

/* Expanded row */
.ms-expanded {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bg-border);
}

.ms-expanded__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--bg-border);
  margin-bottom: 12px;
}

.ms-tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 150ms, border-color 150ms;
}

.ms-tab:hover { color: var(--text-primary); }

.ms-tab--active {
  color: var(--blue-500);
  border-bottom-color: var(--blue-500);
}

.ms-expanded__content {
  min-height: 80px;
}

/* Stats in expanded row */
.ms-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ms-stat-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-border);
  border-radius: 3px;
  overflow: hidden;
}

.ms-stat-bar__fill--home {
  height: 100%;
  background: var(--france-blue);
  transition: width 400ms ease;
}

.ms-mini-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* Events timeline */
.ms-events-timeline {
  border-left: 2px solid var(--bg-border);
  padding-left: 12px;
}

.ms-event {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-primary);
  position: relative;
}

.ms-event::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bg-border);
}

.ms-event--goal::before { background: var(--win-green); }
.ms-event--card::before { background: var(--draw-amber); }
.ms-event--var::before { background: #3B72ED; }
.ms-event--sub::before { background: var(--text-muted); }

.ms-event__minute {
  min-width: 30px;
  color: var(--text-secondary);
  font-size: 11px;
}

.ms-event__icon { font-size: 14px; }

/* Match facts in expanded */
.ms-facts__item {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  padding: 4px 0;
}

.ms-ai-overview {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.7;
}

.ms-commentary-list { }

.ms-commentary-entry {
  font-size: 12px;
  color: var(--text-primary);
  padding: 6px 0;
  border-bottom: 1px solid var(--bg-border);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ms-odds-pills {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* Referee line */
.ms-expanded__referee {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 10px 0;
  border-top: 1px solid var(--bg-border);
  margin-top: 10px;
}

.ms-expanded__footer {
  padding-top: 8px;
}

/* Live Match Tracker */
.ms-tracker {
  position: fixed;
  bottom: 0;
  left: 240px;
  right: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--bg-border);
  z-index: 100;
  transition: transform 250ms ease;
}

.ms-tracker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.ms-tracker__body {
  padding: 0 16px 12px;
}

.ms-tracker__match {
  font-size: 13px;
  color: var(--text-primary);
  padding: 4px 0;
}

@media (max-width: 768px) {
  .ms-match-row__main { flex-direction: column; align-items: flex-start; }
  .ms-tracker { left: 0; bottom: 60px; }
}

/* ==========================================================================
   KNOCKOUT BRACKET (Section 7.4)
   ========================================================================== */
/* ── Knockout Bracket ────────────────────────────────────────────────── */
.kb-scroll-wrapper {
  overflow-x: auto;
  margin-bottom: 20px;
  padding-bottom: 12px;
}

.kb-bracket {
  display: flex;
  gap: 16px;
  min-width: 1100px;
  align-items: flex-start;
}

.kb-stage-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}

.kb-stage-column--r32 { min-width: 200px; }
.kb-stage-column--r16 { min-width: 200px; }

/* Two-line stage header */
.kb-stage-header {
  padding: 0 0 12px 0;
  margin-bottom: 4px;
}

.kb-stage-header__title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.kb-stage-header__sub {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Champion column */
.kb-stage--champion {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}

.kb-champion {
  text-align: center;
  padding: 24px 16px;
  border-radius: var(--radius-card);
  background: rgba(255, 215, 0, 0.04);
  border: 1px solid rgba(255, 215, 0, 0.25);
}

.kb-champion__trophy {
  font-size: 44px;
  margin-bottom: 10px;
  line-height: 1;
}

.kb-champion__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--value-gold, #ffd700);
}

/* ── Match slot ────────────────────────────────────────────────────── */
.kb-slot {
  background: var(--surface-1, var(--bg-surface));
  border: 1px solid var(--border-subtle, var(--bg-border));
  border-left: 3px solid var(--border-subtle, var(--bg-border));
  border-radius: var(--radius-card);
  padding: 8px 12px;
  cursor: default;
  position: relative;
  transition: border-color 150ms;
}

.kb-slot:hover {
  border-color: var(--text-muted);
}

/* TBD placeholder */
.kb-slot--tbd {
  background: var(--surface-2, var(--bg-elevated));
  border: 1px solid var(--border-subtle, var(--bg-border));
  border-left: 3px solid var(--border-subtle, var(--bg-border));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.kb-slot__tbd-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Projected slots — dashed border telegraphs "projection, not a result" */
.kb-slot--projected {
  border-style: dashed !important;
}

/* Confidence pill — small monospace pill rendered inline in .kb-slot__team */
.kb-confidence-pill {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-pill, 9999px);
  color: var(--text-primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.kb-confidence-pill--high {
  color: var(--win-green);
}

.kb-confidence-pill--low {
  color: var(--text-secondary);
}

/* Projection disclaimer — sits above the signal-coverage strip */
.kb-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 16px 0 8px 0;
  background: transparent;
  border-left: 2px solid var(--bg-border);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.kb-disclaimer i.ti {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--fd-primary, #00d4aa);
  margin-top: 1px;
}

.kb-disclaimer strong {
  color: var(--text-primary);
  font-weight: 500;
}

/* Signal coverage header strip — transparency about projection inputs */
.kb-signal-coverage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  margin: 8px 0 16px 0;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-left: 3px solid var(--fd-primary, #00d4aa);
  border-radius: var(--radius-card, 8px);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.kb-signal-coverage .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  margin-left: 4px;
}

.kb-signal-coverage__sep {
  color: var(--text-muted);
}

/* Live match */
.kb-slot--live {
  border-left-color: var(--state-success, #4DD4AC);
}

/* Hero match — glowing blue */
.kb-slot--hero {
  border-left-color: var(--blue-500, #3B72ED);
  border-color: rgba(59, 114, 237, 0.35);
  box-shadow: 0 0 8px rgba(59, 114, 237, 0.15), 0 0 20px rgba(59, 114, 237, 0.08);
}

/* Team row */
.kb-slot__team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  color: var(--text-primary);
}

.kb-slot__flag { font-size: 14px; }

.kb-slot__name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.kb-slot__name--winner {
  font-weight: 600;
}

.kb-slot__name--projected {
  color: var(--coral-400, #F18D74);
  font-style: normal;
  font-size: 13px;
}

.kb-slot__score {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.kb-slot__live {
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--state-success, #4DD4AC);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Tooltip */
.kb-tooltip {
  position: fixed;
  background: var(--surface-4, var(--bg-elevated));
  border: 1px solid var(--border-subtle, var(--bg-border));
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
  box-shadow: var(--elevation-popover, 0 4px 12px rgba(0,0,0,0.3));
}

/* Progress bar animation */
.progress-bar--animated {
  transition: width 400ms ease;
}

/* Table shared */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--bg-border);
}

.table th {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table--striped tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   VALUE BETS (Section 7.6)
   ========================================================================== */

/* Section header with actions */
.vb-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.vb-section-header__content {
  flex: 1;
}

.vb-section-header__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 32px;
}

/* Filter/Sort action pills */
.vb-action-pill {
  padding: 7px 16px;
  font-size: 13px;
  border: 1px solid var(--bg-border);
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 150ms ease;
}

.vb-action-pill:hover {
  background: var(--bg-elevated);
  border-color: var(--text-muted);
}

/* 2-column card grid */
.vb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Card wrapper — depth from borders, not shadows (Aeros principle) */
.vb-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle, var(--bg-border));
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--elevation-card);
}

/* STRONG VALUE card — coral/warm-ether tinted border (Aeros alert pattern) */
.vb-card--strong {
  border-color: rgba(241, 141, 116, 0.28);
}

/* Card body */
.vb-card__body {
  padding: 24px;
  flex: 1;
}

/* Header row */
.vb-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* Badge variants — pill-shaped per Aeros */
.vb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.vb-badge--strong {
  background: rgba(241, 141, 116, 0.12);
  color: var(--coral-300, #F6A892);
  border: 1px solid rgba(241, 141, 116, 0.28);
}

.vb-badge--value {
  background: transparent;
  color: var(--blue-500, #3B72ED);
  border: 1px solid rgba(59, 114, 237, 0.35);
}

/* Concurrent-mode match-tag chip on value bet cards */
.value-bet__match-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  color: var(--fd-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 8px;
}

/* Concurrent-mode filter pill row */
.vb-filter-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.vb-filter-pill {
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.vb-filter-pill:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.18); }
.vb-filter-pill--active {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
  color: #0a0a0f;
}

/* Match info */
.vb-card__match-info {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* Market name */
.vb-card__market {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.3;
}

/* 4-stat row */
.vb-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  margin-bottom: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--bg-border);
  border-bottom: 1px solid var(--bg-border);
}

.vb-stat {
  padding: 0 16px;
  border-right: 1px solid var(--bg-border);
}

.vb-stat:first-child {
  padding-left: 0;
}

.vb-stat:last-child {
  border-right: none;
  padding-right: 0;
}

.vb-stat__label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.vb-stat__value {
  font-size: 24px;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.vb-stat__value--fd {
  color: var(--blue-500, #3B72ED);
}

.vb-stat__value--edge {
  color: var(--win-green);
}

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

/* Dual probability bars */
.vb-bars {
  margin-bottom: 20px;
}

.vb-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.vb-bar-row:last-child {
  margin-bottom: 0;
}

.vb-bar-label {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 64px;
  flex-shrink: 0;
}

.vb-bar-label--fd {
  color: var(--blue-500, #3B72ED);
}

.vb-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-border);
  border-radius: 3px;
  overflow: hidden;
}

.vb-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 400ms ease;
}

.vb-bar-fill--market {
  background: var(--text-muted);
}

.vb-bar-fill--fd {
  background: var(--blue-500, #3B72ED);
}

.vb-bar-pct {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 44px;
  text-align: right;
  flex-shrink: 0;
}

.vb-bar-pct--fd {
  color: var(--blue-500, #3B72ED);
}

/* Reasoning */
.vb-reasoning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Footer */
.vb-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* View odds pill button */
.vb-view-odds-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--bg-border);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.vb-view-odds-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--text-muted);
}

/* Confidence indicator */
.vb-confidence {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vb-confidence strong {
  color: var(--text-primary);
}

.vb-confidence__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vb-confidence__dot--high {
  background: var(--win-green);
}

.vb-confidence__dot--med {
  background: var(--draw-amber);
}

/* Omnis toggle */
.vb-omnis-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: none;
  border: none;
  border-top: 1px solid var(--bg-border);
  cursor: pointer;
  transition: background 150ms;
}

.vb-omnis-toggle:hover {
  background: rgba(0, 212, 170, 0.04);
}

.vb-omnis-toggle__text {
  font-size: 13px;
  color: var(--fd-primary);
  font-style: italic;
}

.vb-omnis-toggle__chevron {
  font-size: 16px;
  color: var(--text-muted);
  transition: transform 200ms ease;
  margin-left: auto;
}

.vb-omnis-toggle.is-open .vb-omnis-toggle__chevron {
  transform: rotate(180deg);
}

/* Omnis panel content */
.vb-omnis-content {
  padding: 16px 24px 20px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--bg-border);
}

.vb-omnis-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fd-primary);
  margin-bottom: 14px;
}

.vb-omnis-step {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.vb-omnis-step:last-of-type {
  margin-bottom: 14px;
}

.vb-omnis-step p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.vb-omnis-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  min-width: 44px;
  text-align: center;
  flex-shrink: 0;
  height: fit-content;
}

.vb-omnis-badge--exo {
  background: var(--bg-border);
  color: var(--text-primary);
}

.vb-omnis-badge--plix {
  background: rgba(59, 114, 237, 0.15);
  color: var(--fd-primary);
}

.vb-omnis-badge--omnis {
  background: rgba(0, 153, 255, 0.15);
  color: var(--fd-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
  .vb-grid { grid-template-columns: 1fr; }
  .vb-section-header { flex-direction: column; gap: 12px; }
  .vb-section-header__actions { padding-top: 0; }
}

@media (max-width: 768px) {
  .vb-stats-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .vb-stat { border-right: none; padding: 0; }
}

/* Font utilities */
.font-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Head-to-Head
   ========================================================================== */

.h2h-select {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--bg-border);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  min-width: 160px;
  cursor: pointer;
}

.h2h-select:focus {
  outline: none;
  border-color: var(--fd-secondary);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   About Page
   ========================================================================== */

.about-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 32px;
  margin-bottom: 40px;
  align-items: start;
}

.about-col--text {
  padding-top: 8px;
}

.about-para {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 16px;
}

.about-para strong {
  color: var(--text-primary);
}

/* FD brand lockup */
.about-fd-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.about-fd-logo-full {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* Product cards (EXO / PLIX / OMNIS) */
.about-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0 16px;
}

.about-product-card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-card);
  padding: 16px;
}

.about-product-card__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 10px;
  margin-bottom: 4px;
}

.about-product-card__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Powered by line */
.about-powered-by {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.about-lognormal-logo {
  height: 19px;
  width: auto;
  display: block;
  margin-bottom: 20px;
  opacity: 0.7;
}

/* CTA buttons */
.about-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.about-cta {
  padding: 10px 22px;
  text-decoration: none;
}

/* Lead capture card */
.about-lead-card {
  padding: 28px;
  border: 1px solid rgba(59, 114, 237, 0.35);
  box-shadow: 0 0 8px rgba(59, 114, 237, 0.15), 0 0 20px rgba(59, 114, 237, 0.08);
}

.about-lead-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.about-lead-card__logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.about-lead-card__title {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
}

.about-lead-card__sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.about-lead-card__form {
  display: flex;
  gap: 12px;
}

.about-lead-card__input {
  flex: 1;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-display);
  outline: none;
}

.about-lead-card__input:focus {
  border-color: var(--fd-secondary);
}

.about-lead-card__btn {
  padding: 10px 24px;
  white-space: nowrap;
  opacity: 0.5;
  pointer-events: none;
}

.about-lead-card__fine {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
  line-height: 1.5;
}

/* Meta info card (right column, row 2) */
.about-meta-card {
  padding: 24px;
}

.about-meta-block {
  margin-bottom: 20px;
}

.about-meta-block:last-child {
  margin-bottom: 0;
}

.about-meta-block .about-para {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .about-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .about-products {
    grid-template-columns: 1fr;
  }

  .about-lead-card__form {
    flex-direction: column;
  }

  .about-cta-row {
    flex-direction: column;
  }

  .about-cta {
    text-align: center;
  }
}

/* ==========================================================================
   Empty State — shown when API returns no data
   ========================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 32px 16px;
  color: var(--text-secondary);
  text-align: center;
}
.empty-state__icon {
  font-size: 32px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.empty-state__text {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}
.empty-state__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* ==========================================================================
   Data Status Badge — per-section indicator (live, api, cached, empty, offline)
   ========================================================================== */
.data-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  font: 500 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--bg-border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  margin-left: auto;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.data-badge--live {
  color: var(--state-success, #4DD4AC);
  border-color: rgba(77, 212, 172, 0.30);
  background: rgba(77, 212, 172, 0.08);
}
.data-badge--live::before {
  box-shadow: 0 0 0 0 currentColor;
  animation: fd-pulse 1.6s ease-out infinite;
}
.data-badge--api {
  color: var(--fd-secondary, #3B72ED);
  border-color: rgba(59, 114, 237, 0.30);
  background: rgba(59, 114, 237, 0.08);
}
.data-badge--cached {
  color: var(--draw-amber, #F59E0B);
  border-color: rgba(245, 158, 11, 0.30);
  background: rgba(245, 158, 11, 0.08);
}
.data-badge--empty {
  color: var(--text-muted);
}
.data-badge--offline {
  color: var(--coral-400, #F18D74);
  border-color: rgba(241, 141, 116, 0.30);
  background: rgba(241, 141, 116, 0.10);
}
.data-badge--static {
  display: none;
}
@keyframes fd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(77, 212, 172, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(77, 212, 172, 0); }
}

/* Top-bar live clock — replaces the DEMO MODE badge slot */
#header-live-clock {
  font: 500 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--bg-border);
  background: var(--bg-elevated);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ==========================================================================
   KPI Tile (Aeros §9.2 / §9.3) — shared, used by Form Guide and reusable
   ========================================================================== */
.kpi-tile {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  box-shadow: var(--elevation-card);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.kpi-tile:hover {
  border-color: var(--border-strong);
}
.kpi-tile__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.kpi-tile__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.kpi-tile__num {
  font-family: var(--font-display);
  font-weight: 250;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.kpi-tile__unit {
  font-size: 14px;
  color: var(--text-tertiary);
  font-weight: 300;
}
.kpi-tile__meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: auto;
}
.kpi-tile__delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font: 500 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  width: fit-content;
}
.kpi-tile__delta--up   { color: var(--state-success); background: rgba(77,212,172,0.10); }
.kpi-tile__delta--down { color: var(--coral-300);    background: rgba(241,141,116,0.10); }
.kpi-tile__delta--flat { color: var(--text-tertiary); background: rgba(123,137,184,0.10); }

/* ==========================================================================
   Streak chip — shared, also reusable in Team Deep-dive
   ========================================================================== */
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.streak-chip:hover { border-color: var(--border-strong); }
.streak-chip i { font-size: 14px; color: var(--text-tertiary); }
.streak-chip--positive { color: var(--state-success); background: rgba(77,212,172,0.08); border-color: rgba(77,212,172,0.20); }
.streak-chip--positive i { color: var(--state-success); }
.streak-chip--negative { color: var(--coral-300); background: rgba(241,141,116,0.08); border-color: rgba(241,141,116,0.24); }
.streak-chip--negative i { color: var(--coral-300); }
.streak-chip--neutral  { color: var(--blue-200); background: rgba(59,114,237,0.08); border-color: rgba(59,114,237,0.22); }
.streak-chip--neutral i { color: var(--blue-300); }

/* ─── Splash Overlay (boot) ──────────────────────────────────────────────── */
.splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 400ms ease-out;
}

.splash-overlay.is-fading {
  opacity: 0;
  pointer-events: none;
}

.splash-overlay__image {
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .splash-overlay { transition: opacity 1ms linear; }
}