/* NextSportz Analytics System - Core Stylesheet */
/* Theme: nextsportz_v2 brand palette (AppPalette) */
:root {
  /* === Background Scale (Light Mode Default) === */
  --bg-obsidian: #f6f6f6; /* ns-gray-150 - page base */
  --bg-panel: #ffffff; /* ns-gray-100 - card/panel layer */
  --bg-elevated: #ffffff; /* ns-gray-100 - elevated surfaces */
  --bg-mid: #e8ecfd; /* ns-gray-300 - borders, dividers */
  --bg-surface: #f6f8fb; /* ns-gray-200 - subtle surfaces */
  --bg-panel-glow: rgba(255, 255, 255, 0.85);

  /* === Brand Colors (AppPalette) === */
  --accent-brand: #5a7ced; /* brand500 */
  --accent-brand-dark: #415eca; /* brand600 */
  --accent-light: #bdd2fd; /* brand200 */
  --accent-orange: #d76a48; /* brandSecondary200 */

  /* === Legacy aliases (keeps old code working) === */
  --accent-neon: #5a7ced;
  --accent-cyan: #bdd2fd;

  /* === Text (AppPalette gray scale) === */
  --text-high: #101316; /* ns-gray-900 */
  --text-muted: #5c6170; /* ns-gray-500 */
  --text-subtle: #919aa8; /* ns-gray-400 */

  /* === Structure === */
  --grid-line: #e8ecfd; /* ns-gray-300 */
  --border-subtle: #e8ecfd; /* ns-gray-300 */

  /* === Semantic (AppPalette) === */
  --success: #00c951;
  --warning: #fe9900;
  --danger: #f73c2f;
  --gold-standard: #ffd700;
  --coral-error: #f73c2f;

  /* === Tier accent colors === */
  --color-bronze: #cd7f32;
  --color-silver: #c0c0c0;
  --color-gold: #d4af37;
  --color-elite: #a347ff;
  --color-star-magenta: #ff007f;
  --color-star-cyan: #00e5ff;
}

/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */
html.dark {
  /* === Background Scale === */
  --bg-obsidian: #101316; /* gray900 */
  --bg-panel: #16181a; /* gray850 */
  --bg-elevated: #23252a; /* gray800 */
  --bg-mid: #2d3750; /* gray700 */
  --bg-surface: #424b60; /* gray600 */
  --bg-panel-glow: rgba(22, 24, 26, 0.85);

  /* === Text === */
  --text-high: #ffffff; /* gray100 */
  --text-muted: #919aa8; /* gray400 */
  --text-subtle: #5c6170; /* gray500 */

  /* === Structure === */
  --grid-line: #2d3750; /* gray700 */
  --border-subtle: #424b60; /* gray600 */
}

/* Reset & Base Setup */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.report-container {
  background-color: var(--bg-obsidian);
  color: var(--text-high);
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Typography Utility classes */
.font-outfit {
  font-family: "Outfit", sans-serif;
}
.font-mono {
  font-family: "Roboto Mono", monospace;
}
.bold-800 {
  font-weight: 800;
}
.semibold-600 {
  font-weight: 600;
}
.medium-500 {
  font-weight: 500;
}
.regular-400 {
  font-weight: 400;
}
.size-96 {
  font-size: 96px;
}
.size-36 {
  font-size: 36px;
}
.size-24 {
  font-size: 24px;
}
.size-16 {
  font-size: 16px;
}
.size-14 {
  font-size: 14px;
}
.txt-center {
  text-align: center;
}
.txt-right {
  text-align: right;
}

/* Global App Header */
.app-header {
  background: linear-gradient(
    180deg,
    rgba(10, 14, 26, 0.95) 0%,
    rgba(18, 24, 41, 0.8) 100%
  );
  border-bottom: 1px solid var(--grid-line);
  padding: 20px 48px;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

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

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

.ns-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(90, 124, 237, 0.12);
  border: 1px solid rgba(90, 124, 237, 0.3);
  border-radius: 10px;
  padding: 6px;
}

.ns-badge svg {
  width: 100%;
  height: 100%;
}

.logo-text h1 {
  font-family: "Outfit", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.sub-logo {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.header-title {
  text-align: right;
}

.header-title h2 {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-high);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(90, 124, 237, 0.1);
  color: var(--accent-brand);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 4px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent-brand);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

/* Tabs Navigation Hub */
.navigation-hub {
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--grid-line);
}

.tabs-container {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}

.nav-tab {
  background: none;
  border: none;
  outline: none;
  color: var(--text-muted);
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.nav-tab:hover {
  color: var(--text-high);
}

.nav-tab.active {
  color: var(--accent-neon);
}

.nav-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-brand), var(--accent-light));
}

/* Main Layout Setup */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 48px;
  min-height: calc(100vh - 180px);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* ==========================================================================
   TAB 1: INTERACTIVE NS PLAYER CARD
   ========================================================================== */
.grid-card-showcase {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}

.card-display-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(18, 24, 41, 0.4);
  border: 1px solid var(--grid-line);
  border-radius: 24px;
}

.interactive-instruction {
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.interactive-instruction strong {
  color: var(--accent-cyan);
}

/* 3D Card Wrapper — MadSportzCard */
.card-container {
  width: 336px;
  height: 478px;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.card-container.flipped .card-inner {
  transform: rotateY(180deg);
}

/* Common Card Face */
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(90, 124, 237, 0.15);
}

/* ─── FRONT FACE: MadSportzCard Shield ─── */
.card-front {
  background: transparent;
  overflow: visible;
}

/* Shield SVG background that fills the front face */
.card-shield-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}

/* Content layer on top of shield SVG */
.mad-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* Player silhouette (top:85, centered, height:150 — matching Flutter) */
.mad-silhouette {
  position: absolute;
  top: 85px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.mad-silhouette svg {
  width: 120px;
  height: 150px;
  color: rgba(255, 255, 255, 0.12);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

/* Team Emblem circle (top:95, left:30 — Flutter: BoxDecoration circle, white bg, shadow) */
.mad-team-emblem {
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 50%; /* BoxShape.circle */
  background: #ffffff; /* AppPalette.gray100 */
  box-shadow: 0 4px 8px rgba(16, 19, 22, 0.26); /* gray900.withOpacity(0.26) */
  overflow: hidden; /* clipBehavior: Clip.antiAlias */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

/* School logo image inside the circular emblem */
.mad-team-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  border-radius: 50%;
}

/* Initials fallback when no logo URL available */
.mad-team-initials {
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #5a7ced; /* brand500 */
  line-height: 1;
  letter-spacing: -0.5px;
}

.mad-ns-score {
  position: absolute;
  top: 160px;
  left: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.mad-ovr-val {
  font-family: "Outfit", sans-serif;
  font-size: 52px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}
.mad-ovr-lbl {
  font-family: "Inter", sans-serif;
  font-size: 11px; /* was 12px — slightly tighter */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
  margin-top: 1px;
  line-height: 1;
}

/* MP + WR stats (top:162, right:30 — matching Flutter) */
.mad-mp-wr {
  position: absolute;
  top: 162px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.mad-mp-wr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.mad-stat-big {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
.mad-stat-lbl-sm {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
  margin-top: 2px;
  line-height: 1;
}

/* Name plate — centered between silhouette and stats grid */
.mad-nameplate {
  position: absolute;
  top: 235px;
  bottom: 158px; /* 478 - 315 (stats top) - 5px buffer */
  left: 20px;
  right: 20px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mad-nameplate span {
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.1;
  display: block;
  text-align: center;
}

/* Stats grid (top:315, left/right:20 — matching Flutter) */
.mad-stats {
  position: absolute;
  top: 315px;
  left: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px; /* was 12px — tighter spacing matching Flutter visual */
}
.mad-stat-row {
  display: flex;
  align-items: center;
}
.mad-stat-col {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mad-stat-col:first-child {
  justify-content: flex-end;
}
.mad-stat-col:last-child {
  justify-content: flex-start;
}
.mad-stat-key {
  font-family: "Inter", sans-serif;
  font-size: 15px; /* was 18px — reduced to match Flutter visual at 0.714 scale */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  min-width: 45px;
  line-height: 1;
}
.mad-stat-col:last-child .mad-stat-key {
  text-align: left;
}
.mad-stat-col:first-child .mad-stat-key {
  text-align: right;
}
.mad-stat-num {
  font-family: "Inter", sans-serif;
  font-size: 17px; /* was 20px */
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
.mad-stat-vdivider {
  width: 1.5px;
  height: 22px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 12px;
  flex-shrink: 0;
}

/* NS logo footer (bottom:30, centered — matching Flutter) */
.mad-footer {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.mad-logo-img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  opacity: 0.9;
}

/* School + jersey info (inside card, near bottom) */
.mad-school-row {
  position: absolute;
  bottom: 74px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  font-family: "Inter", sans-serif;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.5px;
}

/* ─── Tier Variants — border & glow colors injected via SVG ─── */
/* Border colors referenced by JS to update SVG stroke */
.tier-bronze {
  --tier-color: #cd7f32;
}
.tier-silver {
  --tier-color: #c0c0c0;
}
.tier-gold {
  --tier-color: #d4af37;
}
.tier-elite {
  --tier-color: #a347ff;
}
.tier-rising-star {
  --tier-color: #ff007f;
}

/* ─── CARD BACK ─── */
.card-back {
  transform: rotateY(180deg);
  background: #16181a;
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  border: 1px solid #2d3750;
  overflow: hidden;
}

/* Subtle dot texture on back */
.card-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(var(--grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.08;
  pointer-events: none;
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.2;
}

.card-back-top-row {
  display: flex;
  justify-content: space-between;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent-brand);
  position: relative;
  z-index: 5;
}

.card-back-analytics {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
  height: 120px;
  position: relative;
  z-index: 5;
}

.radar-box {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.back-table-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 3px;
}
.back-table-row span {
  color: var(--text-muted);
}
.back-table-row strong {
  font-family: "Roboto Mono", monospace;
  color: var(--accent-brand);
}

.card-back-analysis-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 12px 0;
  position: relative;
  z-index: 5;
}

.card-back-scouting {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
  position: relative;
  z-index: 5;
}

.scout-title {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

.scout-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.scout-list li {
  font-size: 9px;
  position: relative;
  padding-left: 9px;
  color: var(--text-high);
}
.scout-list li::before {
  content: "▪";
  color: var(--accent-brand);
  position: absolute;
  left: 0;
  top: 0;
}
.scout-list.dev-list li::before {
  color: var(--text-muted);
}

.card-back-footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 10px;
  position: relative;
  z-index: 5;
}

.qr-placeholder {
  width: 38px;
  height: 38px;
  background-color: #fff;
  border-radius: 5px;
  padding: 3px;
  color: #000;
}

.verification-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stamp-verified {
  font-size: 7px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
.stamp-name {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold-standard);
  letter-spacing: 0.5px;
}
.stamp-code {
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
  color: var(--text-muted);
}

/* Sidebar Details Panel */
.sidebar-details-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-section-title {
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-high);
}

.panel-desc {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.blueprints-grid-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.blueprint-info-card {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 16px;
  border-radius: 12px;
}

.blueprint-info-card h4 {
  font-family: "Outfit", sans-serif;
  color: var(--accent-brand);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.blueprint-info-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   TAB 2: INDIVIDUAL PLAYER TOURNAMENT REPORT
   ========================================================================== */
.report-viewer-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.print-button {
  background: linear-gradient(135deg, var(--accent-brand) 0%, #415eca 100%);
  color: #fff;
  border: none;
  outline: none;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(90, 124, 237, 0.35);
  transition: all 0.3s ease;
}

.print-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(90, 124, 237, 0.5);
}

.report-paper-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Page Standard Size — content flows naturally, min-height simulates A4 */
.report-page {
  /* Light theme variable overrides — all children using var() get light values */
  --bg-obsidian: #ffffff;
  --bg-panel: #f5f5f7;
  --bg-panel-alt: #ededf0;
  --bg-panel-glow: rgba(245, 245, 247, 0.85);
  --text-high: #1a1a1a;
  --text-medium: #333333;
  --text-muted: #888888;
  --accent-neon: #5a7ced;
  --accent-cyan: #5a7ced;
  --accent-amber: #b36b00;
  --grid-line: #e0e0e0;

  background: #ffffff;
  border: none;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  min-height: calc(
    900px * 1.414
  ); /* A4 proportional min-height based on max-width */
  padding: 0;
  display: table;
  table-layout: fixed;
  box-shadow: none;
  position: relative;
  overflow: visible;
  color: #1a1a1a;
  /* Print pagination: each entity starts on a new page */
  break-after: page;
  page-break-after: always;
}

/* Content body — fills as table-row-group, content flows naturally */
.report-page-.report-container {
  display: table-row-group;
  padding: 48px;
}

/* Keep key content blocks together when printed */
.report-page .plr-card-showcase,
.report-page .plr-stats-section,
.report-page .plr-performance-grid,
.report-page .plr-match-log,
.report-page .plr-bottom-grid,
.report-page .plr-header,
.report-page .trn-hero,
.report-page .trn-section,
.report-page .ts-hero,
.report-page .ts-stats-grid,
.report-page .ts-analysis-grid,
.report-page .match-detail-card,
.report-page .cp-top,
.report-page .cp-body,
.report-page .cp-bottom,
.report-page .concl-hero,
.report-page .concl-box,
.report-page .concl-summary-box {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Footer — table-footer-group repeats on every printed page automatically */
.report-footer {
  display: table-footer-group;
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #ffffff;
}

/* Inner wrapper for footer content layout */
.report-footer-inner {
  border-top: 1px solid #e0e0e0;
  padding: 8px 48px 6px;
  background: #ffffff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 12px;
}

.report-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}

.report-footer-brand .footer-label {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #999;
}

.report-footer-brand .footer-name {
  font-size: 9px;
  font-weight: 700;
  color: #333;
}

.report-footer-brand .footer-name.primary {
  color: #5a7ced;
}

.report-footer-inner > .report-footer-brand:first-child {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
}

.report-footer-inner > .report-footer-brand:last-child {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  text-align: right;
}

.report-footer-partnership {
  grid-row: 2;
  grid-column: 1 / -1;
  text-align: center;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.8px;
  color: #999;
  padding-top: 2px;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--grid-line);
  padding-bottom: 12px;
  margin-bottom: 32px;
}

.report-header .logo-area h2 {
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.header-right-meta {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  color: var(--accent-cyan);
  font-weight: 600;
  letter-spacing: 1.5px;
}

/* Page 1 Specific Styling */
.page-1-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 32px;
  align-items: start;
}

.report-card-showcase-cell {
  display: flex;
  justify-content: center;
}

.static-report-card {
  width: 290px;
  height: 406px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.static-report-card.gold-tier {
  background: linear-gradient(135deg, #2a210a 0%, #524014 50%, #181305 100%);
  border-color: var(--color-gold);
  box-shadow: 0 10px 20px rgba(212, 175, 55, 0.15);
}

.hero-ovr-pos {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 180px;
  margin-top: 8px;
}

.ovr-box {
  display: flex;
  flex-direction: column;
  font-family: "Outfit", sans-serif;
  line-height: 0.95;
}

.ovr-num {
  font-size: 58px;
  font-weight: 800;
}

.pos-code {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-cyan);
}

.silhouette-container {
  height: 100%;
  width: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: rgba(255, 255, 255, 0.15);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 12px 0;
  text-align: center;
}

.stats-row div {
  display: flex;
  flex-direction: column;
  font-size: 10px;
}

.stats-row div span {
  color: var(--text-muted);
}

.stats-row div strong {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
}

.player-identity-row {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p-name {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}

.school-jersey-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 9px;
  color: var(--text-muted);
}

.school-jersey-badge strong {
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  color: var(--text-high);
}

.report-details-cell {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.identity-header-block {
  border-left: 3px solid var(--accent-neon);
  padding-left: 16px;
}

.tag-meta {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 2px;
  display: block;
}

.player-primary-name {
  font-family: "Outfit", sans-serif;
  font-size: 32px;
  font-weight: 800;
}

.player-primary-meta {
  font-size: 13px;
  color: var(--text-muted);
}

.key-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.ir-dnp-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(142, 155, 174, 0.08);
  border: 1px solid rgba(142, 155, 174, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 10.5px;
  color: #8E9BAE;
  line-height: 1.4;
}

.metric-card {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

.metric-val {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 20px;
  color: var(--accent-neon);
  display: block;
}

.metric-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

.radar-scouting-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}

.split-left-radar h4,
.split-right-verdict h4 {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.split-right-verdict .verdict-para {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.badge-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rating-badge-inline {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.rating-badge-inline.gold {
  background: rgba(212, 175, 55, 0.15);
  color: var(--color-gold);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.rating-badge-inline.cyan {
  background: rgba(0, 229, 255, 0.1);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 229, 255, 0.3);
}

/* Page 2 Specific Styling */
.page-title {
  font-family: "Outfit", sans-serif;
  font-size: 22px;
  color: var(--text-high);
  margin-bottom: 6px;
}

.section-lead-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.table-wrapper {
  margin-bottom: 24px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--grid-line);
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
}

.report-table td {
  padding: 12px 14px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.report-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.01);
}

.res-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
}

.res-pill.win {
  background: rgba(0, 255, 102, 0.15);
  color: var(--accent-neon);
}
.res-pill.loss {
  background: rgba(255, 74, 74, 0.15);
  color: var(--coral-error);
}

.card-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 9px;
}

.card-badge.yellow {
  background: var(--gold-standard);
  color: #000;
}

.table-rating {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.table-rating.gold {
  background: rgba(212, 175, 55, 0.15);
  color: var(--color-gold);
}
.table-rating.silver {
  background: rgba(192, 192, 192, 0.15);
  color: var(--color-silver);
}
.table-rating.star {
  background: rgba(255, 0, 127, 0.15);
  color: var(--color-star-magenta);
}

.match-rating-progression-box {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 20px;
  border-radius: 12px;
}

.match-rating-progression-box h4 {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.chart-canvas-container {
  height: 120px;
  position: relative;
}

.rating-trend-svg {
  width: 100%;
  height: 100%;
}

.trend-line {
  stroke: var(--accent-cyan);
  stroke-width: 2.5;
  stroke-dasharray: 4 2;
}

.trend-node {
  stroke: var(--bg-panel);
  stroke-width: 2;
}

.trend-node.gold-node {
  fill: var(--color-gold);
}
.trend-node.silver-node {
  fill: var(--color-silver);
}
.trend-node.star-node {
  fill: var(--color-star-magenta);
}

.trend-text {
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  fill: var(--text-high);
  text-anchor: middle;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 0 10px;
  margin-top: 6px;
}

/* Page 3 Specific Styling */
.scouting-split-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.scouting-card-panel {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-radius: 12px;
  padding: 20px;
}

.scouting-card-panel h4 {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: 1px;
}

.scouting-card-panel.strengths h4 {
  color: var(--accent-neon);
}

.scouting-card-panel.development h4 {
  color: var(--accent-cyan);
}

.scouting-card-panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scouting-card-panel ul li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  position: relative;
  padding-left: 14px;
}

.scouting-card-panel ul li strong {
  color: var(--text-high);
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.scouting-card-panel.strengths ul li::before {
  content: "✓";
  color: var(--accent-neon);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.scouting-card-panel.development ul li::before {
  content: "↳";
  color: var(--accent-cyan);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.playing-style-profile-box {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.playing-style-profile-box h4 {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.archetype-meter-wrapper {
  margin-bottom: 12px;
}

.meter-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}

.arch-name {
  color: var(--text-high);
}

.arch-percent {
  color: var(--accent-cyan);
}

.meter-track {
  height: 6px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.meter-bar {
  height: 100%;
  border-radius: 3px;
}

.scouting-insight-big-box {
  background: rgba(0, 229, 255, 0.03);
  border: 1px solid rgba(0, 229, 255, 0.15);
  padding: 24px;
  border-radius: 12px;
}

.scouting-insight-big-box h4 {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  color: var(--accent-cyan);
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.scouting-insight-big-box p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 16px;
}

.scouting-signature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sign-block {
  display: flex;
  flex-direction: column;
}

.sign-name {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 13px;
}

.sign-title {
  font-size: 10px;
  color: var(--text-muted);
}

.seal-placeholder {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seal-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================================================
   TAB 3: SCHOOL / TEAM TOURNAMENT REPORT
   ========================================================================== */
.school-hero-header {
  margin-bottom: 32px;
  border-left: 4px solid var(--accent-cyan);
  padding-left: 20px;
}

.school-name-h1 {
  font-family: "Outfit", sans-serif;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.school-tournament-sub {
  font-size: 14px;
  color: var(--text-muted);
}

.school-grid-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.team-stats-box {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 20px;
  border-radius: 12px;
}

.team-stats-box h4,
.tournament-placement-box h4,
.journey-visualization-box h4 {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.stats-counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-counter {
  text-align: center;
  background: rgba(255, 255, 255, 0.01);
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed var(--grid-line);
}

.counter-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-neon);
}

.counter-lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

.tournament-placement-box {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.standing-content {
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
}

.standing-title {
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold-standard);
  display: block;
}

.standing-pos {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: block;
}

.bronze-badge-visual {
  display: inline-flex;
  flex-direction: column;
  background: linear-gradient(135deg, #a87c53 0%, #6e4524 100%);
  color: #fff;
  padding: 6px 16px;
  border-radius: 8px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
}

.badge-text {
  font-size: 14px;
}
.badge-sub {
  font-size: 8px;
  opacity: 0.8;
  letter-spacing: 1px;
}

.journey-visualization-box {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 24px;
  border-radius: 12px;
}

.journey-timeline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.journey-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 110px;
}

.node-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 11px;
  margin-bottom: 8px;
  border: 1.5px solid transparent;
}

.node-circle.win {
  background: rgba(0, 255, 102, 0.15);
  color: var(--accent-neon);
  border-color: var(--accent-neon);
}

.node-circle.loss {
  background: rgba(255, 74, 74, 0.15);
  color: var(--coral-error);
  border-color: var(--coral-error);
}

.node-circle.active-node {
  background: rgba(255, 215, 0, 0.15);
  color: var(--gold-standard);
  border-color: var(--gold-standard);
}

.node-match {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 10px;
  color: var(--text-high);
}

.node-score {
  font-size: 9px;
  color: var(--text-muted);
}

.journey-arrow {
  font-size: 16px;
  color: var(--grid-line);
}

/* Page 2 Team Report: Matches Grid */
.matches-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.match-detail-card {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 16px;
  border-radius: 12px;
}

.match-header-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.match-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.team-self,
.team-opp {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 12px;
  width: 40%;
}

.team-self {
  text-align: left;
}
.team-opp {
  text-align: right;
  color: var(--text-muted);
}

.score-nums {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-neon);
  background: rgba(255, 255, 255, 0.03);
  padding: 2px 8px;
  border-radius: 4px;
}

.match-scouting-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-line {
  font-size: 10px;
  color: var(--text-muted);
}

.stat-line strong {
  color: var(--text-high);
}

.match-scouting-summary {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
  padding-top: 8px;
  line-height: 1.4;
}

/* Page 3: Leaderboards */
.leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.leaderboard-item {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.leaderboard-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-cyan);
}

.leader-cat {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.leader-stat {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-neon);
  margin-bottom: 4px;
}

.leader-profile {
  display: flex;
  flex-direction: column;
}

.leader-name {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 12px;
}

.leader-pos {
  font-size: 9px;
  color: var(--text-muted);
}

/* Page 4: Team analysis grid */
.page-4-main-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 24px;
  align-items: center;
}

.radar-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.radar-column h4 {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.team-radar-wrapper {
  background: rgba(255, 255, 255, 0.01);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--grid-line);
}

.analysis-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.analysis-box {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 16px;
  border-radius: 12px;
}

.analysis-box h5 {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.analysis-box p {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.bar-container {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  margin-bottom: 10px;
}

.bar-fill {
  height: 100%;
  border-radius: 2px;
}

.green-fill {
  background-color: var(--accent-neon);
}
.cyan-fill {
  background-color: var(--accent-cyan);
}
.mute-fill {
  background-color: var(--text-muted);
}

.strengths-weaknesses-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.analysis-box.text-box {
  padding: 12px;
}

.analysis-box.text-box h6 {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.green-text {
  color: var(--accent-neon);
}
.coral-text {
  color: var(--coral-error);
}

.analysis-box.text-box ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analysis-box.text-box ul li {
  font-size: 11px;
  color: var(--text-muted);
  position: relative;
  padding-left: 10px;
  line-height: 1.3;
}

.analysis-box.text-box ul li::before {
  content: "▪";
  position: absolute;
  left: 0;
  color: inherit;
}

/* Page 5 Conclusion */
.conclusion-box {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.conclusion-box h4 {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  color: var(--accent-cyan);
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: 1.5px;
}

.conclusion-box p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

.development-recommendations-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.recs-box {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 16px;
  border-radius: 12px;
}

.recs-box h5 {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  color: var(--text-high);
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.recs-box ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recs-box ul li {
  font-size: 11px;
  color: var(--text-muted);
  position: relative;
  padding-left: 12px;
  line-height: 1.4;
}

.recs-box ul li::before {
  content: "▪";
  position: absolute;
  left: 0;
  color: var(--accent-cyan);
}

/* ==========================================================================
   TAB 4: OVR CALCULATOR
   ========================================================================== */
.grid-2col-calculator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.calculator-controls-panel {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 32px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calc-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-field-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.calc-field-group input[type="text"],
.calc-field-group select {
  background-color: var(--bg-obsidian);
  border: 1px solid var(--grid-line);
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

.calc-field-group input[type="text"]:focus,
.calc-field-group select:focus {
  border-color: var(--accent-cyan);
}

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

.calc-divider-accent {
  height: 1px;
  background-color: var(--grid-line);
  margin: 10px 0;
}

.calc-sliders-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.slider-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.slider-labels span {
  color: var(--text-muted);
}

.slider-labels strong {
  font-family: "Roboto Mono", monospace;
  color: var(--accent-neon);
}

.attribute-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--grid-line);
  outline: none;
  border-radius: 2px;
}

.attribute-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent-cyan);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
  transition: transform 0.1s ease;
}

.attribute-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

/* Calculator Preview scaling down */
.calculator-preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  background: rgba(18, 24, 41, 0.4);
  border: 1px solid var(--grid-line);
  border-radius: 20px;
}

.live-card-wrapper-scale {
  padding: 24px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.live-card-wrapper-scale .card-face {
  width: 336px;
  height: 478px;
  position: relative;
  transform: none;
}

/* ==========================================================================
   TAB 5: DESIGN SYSTEM SHOWCASE
   ========================================================================== */
.design-system-dossier {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ds-section {
  background-color: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-radius: 16px;
  padding: 32px;
}

.ds-section h3 {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  color: var(--accent-cyan);
  text-transform: uppercase;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--grid-line);
  padding-bottom: 12px;
}

.ds-typography-demo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-type-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  padding-bottom: 12px;
}

.type-token-lbl {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  width: 200px;
}

.type-preview {
  flex: 1;
  text-align: left;
}

.ds-colors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.color-chip {
  height: 120px;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.chip-color {
  font-family: "Roboto Mono", monospace;
  font-size: 14px;
  font-weight: 700;
}

.chip-name {
  font-size: 11px;
  font-weight: 500;
}

.ds-tiers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.tier-card-demo {
  height: 140px;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.tier-card-demo.bronze {
  background: linear-gradient(135deg, #1e1712 0%, #3d2d20 50%, #150f0a 100%);
  border-color: var(--color-bronze);
}
.tier-card-demo.silver {
  background: linear-gradient(135deg, #182026 0%, #2a3641 50%, #10151a 100%);
  border-color: var(--color-silver);
}
.tier-card-demo.gold {
  background: linear-gradient(135deg, #2a210a 0%, #524014 50%, #181305 100%);
  border-color: var(--color-gold);
}
.tier-card-demo.elite {
  background: linear-gradient(135deg, #180d2a 0%, #301655 50%, #0c0517 100%);
  border-color: var(--color-elite);
}
.tier-card-demo.rising-star {
  background: linear-gradient(135deg, #240a20 0%, #4d123c 50%, #0f030e 100%);
  border-color: var(--color-star-magenta);
}

.tier-name {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

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

/* Global Footer */
.app-footer-global {
  border-top: 1px solid var(--grid-line);
  padding: 32px 48px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.footer-partnership {
  margin-bottom: 12px;
}

.footer-partnership-label {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #8e9bae;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.footer-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8e9bae;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}

.footer-contact-item:hover {
  color: #5a7ced;
}

.footer-contact-divider {
  color: #3a4050;
}

/* ==========================================================================
   PRINT LAYOUT STYLES (@media print)
   ========================================================================== */
@media print {
  /* Consistent margins on ALL physical pages (including overflow pages) */
  @page {
    size: A4;
    margin: 12mm 16mm 14mm 16mm;
  }

  /* Keep dark brand theme on print — use -webkit-print-color-adjust to preserve backgrounds */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .report-container {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
  }

  .app-header,
  .navigation-hub,
  .report-viewer-controls,
  .app-footer-global {
    display: none !important;
  }

  .main-content {
    padding: 0 !important;
    max-width: 100% !important;
  }

  .tab-pane {
    display: none !important;
  }

  /* Force active report tab to display fully for printing */
  .tab-pane.active {
    display: block !important;
  }

  .report-paper-container {
    gap: 0 !important;
  }

  .report-page {
    /* White theme for print — matches on-screen rendering */
    --bg-obsidian: #ffffff;
    --bg-panel: #f5f5f7;
    --bg-panel-alt: #ededf0;
    --text-high: #1a1a1a;
    --text-medium: #333333;
    --text-muted: #888888;
    --accent-neon: #5a7ced;
    --accent-cyan: #5a7ced;
    --accent-brand: #5a7ced;
    --accent-amber: #b36b00;
    --grid-line: #e0e0e0;

    background: #ffffff !important;
    color: #1a1a1a !important;
    border: none !important;
    box-shadow: none !important;
    width: 210mm !important;
    min-height: 0 !important; /* allow natural content flow */
    height: auto !important; /* no fixed height — content determines pages */
    max-width: none !important;
    padding: 20mm !important;
    page-break-after: always !important;
    break-after: page !important;
    position: relative !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .report-header,
  .report-footer {
    border-color: #e0e0e0 !important;
    color: #1a1a1a !important;
    background: #ffffff !important;
  }

  .report-footer-inner {
    color: #888888 !important;
    border-top-color: #e0e0e0 !important;
  }

  .key-metrics-grid .metric-card,
  .scouting-card-panel,
  .playing-style-profile-box,
  .scouting-insight-big-box,
  .team-stats-box,
  .tournament-placement-box,
  .journey-visualization-box,
  .match-detail-card,
  .leaderboard-item,
  .analysis-box,
  .recs-box,
  .conclusion-box,
  .match-rating-progression-box {
    background: #f5f5f7 !important;
    border: 1px solid #e0e0e0 !important;
    color: #1a1a1a !important;
  }

  .report-table th {
    background: #ededf0 !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #e0e0e0 !important;
  }

  .report-table td {
    border-bottom: 1px solid #e0e0e0 !important;
    color: #1a1a1a !important;
  }

  .report-table tr:nth-child(even) td {
    background: #f5f5f7 !important;
  }

  .static-report-card {
    border: 1px solid #e0e0e0 !important;
    background: #f5f5f7 !important;
    box-shadow: none !important;
    color: #1a1a1a !important;
  }

  .static-report-card.gold-tier {
    background: #f5f5f7 !important;
    border: 2px solid #d4af37 !important;
  }

  .ovr-num,
  .pos-code,
  .p-name,
  .counter-num,
  .standing-title,
  .leader-stat,
  .node-score {
    color: #1a1a1a !important;
  }

  .res-pill.win {
    background: rgba(0, 201, 81, 0.1) !important;
    color: #00873a !important;
    border: 1px solid rgba(0, 201, 81, 0.3) !important;
  }
  .res-pill.loss {
    background: rgba(247, 60, 47, 0.1) !important;
    color: #c42b20 !important;
    border: 1px solid rgba(247, 60, 47, 0.3) !important;
  }
  .table-rating {
    background: #eeeeee !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
  }

  .trend-line {
    stroke: #000000 !important;
  }

  .trend-node {
    stroke: #1a1a1a !important;
  }

  /* Card back stays dark in print — exact Flutter colors */
  .report-page .plr-card-back {
    --bg-obsidian: #101316;
    --bg-panel: #16181a;
    --text-high: #ffffff;
    --text-medium: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --accent-brand: #5a7ced;
    --grid-line: #2d3750;
    background: #16181a !important;
    border-color: #2d3750 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .report-page .plr-card-back span,
  .report-page .plr-card-back strong,
  .report-page .plr-card-back li,
  .report-page .plr-card-back td,
  .report-page .plr-card-back th {
    color: #ffffff !important;
  }
  .report-page .plr-card-back .card-back-top-row {
    color: #5a7ced !important;
  }
  .report-page .plr-card-back .back-table-row span {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  .report-page .plr-card-back .back-table-row strong {
    color: #5a7ced !important;
  }
}

/* ==========================================================================
   COMPACT TEAM SUMMARY (TS) STYLES
   ========================================================================== */
.report-page.compact-team {
  min-height: calc(900px * 1.414);
  padding: 28px 36px;
}

.ts-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grid-line);
}

.ts-school-name {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

.ts-meta {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.ts-standing {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-standing-badge {
  background: rgba(255, 215, 0, 0.15);
  color: var(--gold-standard);
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.ts-standing-sub {
  font-size: 10px;
  color: var(--text-muted);
}

.ts-record {
  display: flex;
  gap: 8px;
}

.ts-record-stat {
  text-align: center;
  background: var(--bg-panel);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--grid-line);
  min-width: 48px;
}

.ts-record-num {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 18px;
  color: var(--text-high);
}

.ts-record-lbl {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ts-record-stat.win .ts-record-num {
  color: var(--accent-neon);
}
.ts-record-stat.loss .ts-record-num {
  color: var(--coral-error);
}

.ts-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.ts-stat-box {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 8px;
  border-radius: 6px;
  text-align: center;
}

.ts-stat-val {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-cyan);
}

.ts-stat-lbl {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ts-journey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.ts-journey-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 60px;
}

.ts-journey-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 10px;
  margin-bottom: 2px;
}

.ts-journey-circle.win {
  background: rgba(0, 255, 102, 0.15);
  color: var(--accent-neon);
  border: 1.5px solid var(--accent-neon);
}

.ts-journey-circle.loss {
  background: rgba(255, 74, 74, 0.15);
  color: var(--coral-error);
  border: 1.5px solid var(--coral-error);
}

.ts-journey-round {
  font-size: 8px;
  font-weight: 600;
  color: var(--text-muted);
}

.ts-journey-score {
  font-size: 8px;
  color: var(--text-high);
  font-family: "Roboto Mono", monospace;
}

.ts-journey-arrow {
  width: 16px;
  height: 2px;
  background: var(--grid-line);
  position: relative;
}

.ts-journey-arrow::after {
  content: ">";
  position: absolute;
  right: -2px;
  top: -6px;
  color: var(--grid-line);
  font-size: 10px;
}

.ts-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
}

.ts-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-section-title {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.ts-performer-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ts-performer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 6px 10px;
  border-radius: 4px;
}

.ts-perf-left {
  display: flex;
  flex-direction: column;
}

.ts-perf-cat {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ts-perf-name {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 600;
}

.ts-perf-val {
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-neon);
}

.ts-analysis-block {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 10px 12px;
  border-radius: 6px;
}

.ts-analysis-item h5 {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.ts-bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 3px;
}

.ts-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  margin-bottom: 4px;
}

.ts-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent-neon);
}

.ts-bar-fill.cyan {
  background: var(--accent-cyan);
}

.ts-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ts-tag-group h5 {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.ts-tag {
  display: inline-block;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  margin: 1px 2px;
  line-height: 1.3;
}

.ts-tag.green {
  background: rgba(0, 255, 102, 0.1);
  color: var(--accent-neon);
  border: 1px solid rgba(0, 255, 102, 0.2);
}

.ts-tag.mute {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  border: 1px solid var(--grid-line);
}

/* ==========================================================================
   COMPACT PLAYER (CP) PAGE STYLES
   ========================================================================== */
.report-page.compact-player {
  min-height: calc(900px * 1.414);
  padding: 24px 32px;
}

.report-page.compact-player.compact-player-dnp {
  opacity: 0.75;
}

.cp-dnp-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(142, 155, 174, 0.08);
  border: 1px solid rgba(142, 155, 174, 0.2);
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 10px;
  font-size: 10px;
  color: #8E9BAE;
  font-weight: 500;
}

.cp-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grid-line);
}

.cp-name {
  font-family: "Outfit", sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.cp-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-jersey {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.cp-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.cp-meta-item {
  font-size: 11px;
  color: var(--text-muted);
}

.cp-meta-divider {
  color: var(--grid-line);
  font-size: 10px;
}

.cp-ovr {
  text-align: center;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1.5px solid;
}

.cp-ovr.tier-bronze {
  background: linear-gradient(135deg, #1e1712, #3d2d20);
  border-color: var(--color-bronze);
}
.cp-ovr.tier-silver {
  background: linear-gradient(135deg, #182026, #2a3641);
  border-color: var(--color-silver);
}
.cp-ovr.tier-gold {
  background: linear-gradient(135deg, #2a210a, #524014);
  border-color: var(--color-gold);
}
.cp-ovr.tier-elite {
  background: linear-gradient(135deg, #180d2a, #301655);
  border-color: var(--color-elite);
}
.cp-ovr.tier-rising-star {
  background: linear-gradient(135deg, #240a20, #4d123c);
  border-color: var(--color-star-magenta);
}

.cp-ovr-val {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.cp-ovr-lbl {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

.cp-.report-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  margin-bottom: 10px;
}

.cp-radar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cp-radar-canvas {
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid var(--grid-line);
}

.cp-perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
}

.cp-perf-item {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 4px 6px;
  border-radius: 4px;
  text-align: center;
}

.cp-perf-val {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-high);
}

.cp-perf-lbl {
  font-size: 7px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cp-perf-item.accent .cp-perf-val {
  color: var(--accent-neon);
}
.cp-perf-item.accent2 .cp-perf-val {
  color: var(--accent-cyan);
}

.cp-stats-col {
  display: flex;
  align-items: center;
}

.cp-attributes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.cp-attr {
  display: grid;
  grid-template-columns: 32px 1fr 28px;
  gap: 8px;
  align-items: center;
}

.cp-attr-key {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.cp-attr-bar-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.cp-attr-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-neon));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.cp-attr-val {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  text-align: right;
  color: var(--text-high);
}

.cp-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 10px;
  flex: 1;
}

.cp-column {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 8px 10px;
  border-radius: 6px;
}

.cp-col-title {
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.cp-col-title.green {
  color: var(--accent-neon);
}
.cp-col-title.cyan {
  color: var(--accent-cyan);
}

.cp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cp-list li {
  font-size: 9px;
  color: var(--text-high);
  padding-left: 8px;
  position: relative;
  line-height: 1.3;
}

.cp-list li::before {
  content: "▪";
  position: absolute;
  left: 0;
  color: var(--accent-neon);
}

.cp-list.dev li::before {
  color: var(--accent-cyan);
}

.cp-verdict {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cp-verdict p {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  font-style: italic;
  flex: 1;
}

.cp-verdict-footer {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--grid-line);
  display: flex;
  flex-direction: column;
}

.cp-verdict-footer span:first-child {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 600;
}

.cp-verdict-title {
  font-size: 8px;
  color: var(--text-muted);
}

.cp-column.wide {
  background: rgba(0, 229, 255, 0.03);
  border-color: rgba(0, 229, 255, 0.15);
}

/* ==========================================================================
   PRINT STYLES FOR COMPACT REPORTS
   ========================================================================== */
@media print {
  .report-page.compact-team,
  .report-page.compact-player {
    background: #101316 !important; /* gray900 - v7DarkPrimary */
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    width: 210mm !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: none !important;
    padding: 15mm 20mm !important;
    page-break-after: always !important;
    break-after: page !important;
  }

  .report-page.compact-team *,
  .report-page.compact-player * {
    color: #ffffff !important;
  }

  .report-page.compact-team .ts-record-stat,
  .report-page.compact-player .cp-perf-item,
  .report-page.compact-player .cp-column,
  .report-page.compact-team .ts-analysis-block,
  .report-page.compact-team .ts-performer,
  .report-page.compact-team .ts-journey {
    background: #16181a !important; /* gray850 - v7DarkCardBackground */
    border-color: #2d3750 !important; /* gray700 - v7DarkBorder */
  }

  .report-page.compact-player .cp-radar-canvas {
    background: #16181a !important;
    border-color: #2d3750 !important;
  }

  .report-page.compact-player .cp-ovr {
    border-color: #2d3750 !important;
  }

  .report-page.compact-player .cp-ovr.tier-gold {
    background: #16181a !important;
    border: 2px solid #d4af37 !important;
  }

  .report-page.compact-player .cp-ovr.tier-silver {
    background: #16181a !important;
    border: 2px solid #c0c0c0 !important;
  }

  .cp-attr-bar {
    background: #5a7ced !important; /* brand500 - v7DarkAccent */
  }

  .cp-attr-bar-track {
    background: #2d3750 !important; /* gray700 - v7DarkBorder */
  }
}

/* ==========================================================================
   FULL TOURNAMENT REPORT — TEAM SELECTION GRID
   ========================================================================== */

/* Hero */
.ftr-hero {
  text-align: center;
  margin-bottom: 40px;
}
.ftr-hero .ftr-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--accent-brand);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 5px 14px;
  background: rgba(90, 124, 237, 0.08);
  border-radius: 20px;
  border: 1px solid rgba(90, 124, 237, 0.15);
}
.ftr-hero h2 {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-high);
  margin-bottom: 6px;
  line-height: 1.2;
}
.ftr-hero p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}
.ftr-tournament-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.ftr-tournament-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ftr-tournament-stat .stat-num {
  font-family: "Roboto Mono", monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-high);
}
.ftr-tournament-stat .stat-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ftr-tournament-stat.accent .stat-num {
  color: var(--accent-brand);
}

/* Filter Bar */
.ftr-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.ftr-search-box {
  flex: 1;
  min-width: 240px;
  position: relative;
}
.ftr-search-box input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-high);
  font-size: 14px;
  font-family: "Inter", sans-serif;
  outline: none;
  transition: all 0.25s ease;
}
.ftr-search-box input::placeholder {
  color: var(--text-subtle);
}
.ftr-search-box input:focus {
  border-color: rgba(90, 124, 237, 0.5);
  background: rgba(90, 124, 237, 0.05);
  box-shadow: 0 0 0 3px rgba(90, 124, 237, 0.08);
}
.ftr-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}
.ftr-sort-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: "Inter", sans-serif;
}
.ftr-sort-btn:hover {
  color: var(--text-high);
  border-color: rgba(90, 124, 237, 0.3);
  background: rgba(90, 124, 237, 0.05);
}
.ftr-sort-btn.active {
  color: var(--accent-brand);
  border-color: rgba(90, 124, 237, 0.3);
  background: rgba(90, 124, 237, 0.08);
}
.ftr-team-count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* Grid */
.ftr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}

/* Team Card */
.ftr-team-card {
  position: relative;
  background: linear-gradient(
    145deg,
    rgba(22, 24, 26, 0.95),
    rgba(16, 19, 22, 0.95)
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 22px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}
.ftr-team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(90, 124, 237, 0.06) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  border-radius: 14px;
}
.ftr-team-card:hover {
  border-color: rgba(90, 124, 237, 0.3);
  transform: translateY(-3px);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.3),
    0 0 50px rgba(90, 124, 237, 0.05);
}
.ftr-team-card:hover::before {
  opacity: 1;
}
.ftr-team-card:active {
  transform: translateY(-1px) scale(0.995);
}

/* Rank badge */
.ftr-card-rank {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}
.ftr-team-card.champion .ftr-card-rank {
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.15),
    rgba(212, 175, 55, 0.05)
  );
  border-color: rgba(212, 175, 55, 0.3);
  color: var(--color-gold);
}
.ftr-team-card.runner-up .ftr-card-rank {
  background: linear-gradient(
    135deg,
    rgba(192, 192, 192, 0.12),
    rgba(192, 192, 192, 0.04)
  );
  border-color: rgba(192, 192, 192, 0.25);
  color: var(--color-silver);
}

/* Card header */
.ftr-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.ftr-card-crest {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(90, 124, 237, 0.12),
    rgba(90, 124, 237, 0.04)
  );
  border: 1px solid rgba(90, 124, 237, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ftr-card-crest span {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-brand);
}
.ftr-crest-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  padding: 2px;
}
.ftr-card-info {
  flex: 1;
  min-width: 0;
  padding-right: 24px;
}
.ftr-card-name {
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-high);
  line-height: 1.3;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ftr-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Badge */
.ftr-card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 5px;
  margin-top: 5px;
  position: relative;
  z-index: 1;
}
.ftr-card-badge.champion-badge {
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.15),
    rgba(212, 175, 55, 0.05)
  );
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--color-gold);
}
.ftr-card-badge.runner-up-badge {
  background: linear-gradient(
    135deg,
    rgba(192, 192, 192, 0.12),
    rgba(192, 192, 192, 0.04)
  );
  border: 1px solid rgba(192, 192, 192, 0.2);
  color: var(--color-silver);
}

/* Card stats */
.ftr-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.ftr-card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.ftr-card-stat .num {
  font-family: "Roboto Mono", monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-high);
}
.ftr-card-stat .lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ftr-card-stat.win .num {
  color: var(--success);
}
.ftr-card-stat.loss .num {
  color: var(--danger);
}
.ftr-card-stat.gd-pos .num {
  color: var(--success);
}
.ftr-card-stat.gd-neg .num {
  color: var(--danger);
}

/* Card bottom */
.ftr-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.ftr-card-attrs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.ftr-attr-pill {
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}
.ftr-card-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(90, 124, 237, 0.08);
  border: 1px solid rgba(90, 124, 237, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.ftr-team-card:hover .ftr-card-arrow {
  background: rgba(90, 124, 237, 0.2);
  border-color: rgba(90, 124, 237, 0.4);
  transform: translateX(2px);
}
.ftr-card-arrow svg {
  width: 14px;
  height: 14px;
  color: var(--accent-brand);
}

/* Champion glow */
.ftr-team-card.champion {
  border-color: rgba(212, 175, 55, 0.12);
}
.ftr-team-card.champion::before {
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.05) 0%,
    transparent 60%
  );
}
.ftr-team-card.champion:hover {
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.3),
    0 0 50px rgba(212, 175, 55, 0.05);
}

/* Empty state */
.ftr-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 32px;
}
.ftr-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  color: var(--bg-mid);
}
.ftr-empty h3 {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-subtle);
  margin-bottom: 6px;
}
.ftr-empty p {
  font-size: 14px;
  color: var(--bg-surface);
}

/* Responsive */
@media (max-width: 768px) {
  .ftr-grid {
    grid-template-columns: 1fr;
  }
  .ftr-filter-bar {
    flex-direction: column;
  }
  .ftr-search-box {
    min-width: 100%;
  }
}
/* ==========================================================================
   FULL TOURNAMENT REPORT - PAGE-WIDE STYLES
   ========================================================================== */
.page-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  width: 600px;
  height: 600px;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

/* Positioning context for watermark */
.report-page-.report-container {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   PAGE 1: TOURNAMENT SUMMARY
   ========================================================================== */
.page-tournament-summary {
  padding: 36px 48px;
  min-height: calc(900px * 1.414); /* A4 proportional min-height */
}

.trn-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(189, 210, 253, 0.15);
  z-index: 1;
  position: relative;
}

.trn-hero-left {
  flex: 1;
}

.trn-eyebrow {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent-cyan);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.trn-title {
  font-family: "Outfit", sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.trn-meta-strip {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.trn-meta-item {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.trn-meta-icon {
  color: var(--accent-cyan);
}

.trn-stats-strip {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.trn-stat-pill {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 8px 14px;
  border-radius: 8px;
  text-align: center;
  min-width: 56px;
}

.trn-stat-pill.accent {
  border-color: rgba(90, 124, 237, 0.3);
  background: rgba(90, 124, 237, 0.05);
}

.trn-stat-num {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-high);
}

.trn-stat-pill.accent .trn-stat-num {
  color: var(--accent-neon);
}

.trn-stat-lbl {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trn-hero-right {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.trn-hero-badge {
  background: linear-gradient(
    135deg,
    rgba(189, 210, 253, 0.1),
    rgba(90, 124, 237, 0.1)
  );
  border: 1px solid rgba(189, 210, 253, 0.3);
  padding: 16px 20px;
  border-radius: 12px;
  text-align: center;
}

.trn-badge-text {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent-cyan);
  text-transform: uppercase;
  line-height: 1.4;
}

.trn-section {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.trn-section-title {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trn-section-icon {
  color: var(--accent-cyan);
}

.trn-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.trn-highlight-card {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 12px;
  border-radius: 8px;
}

.trn-highlight-card.champions {
  border-color: rgba(255, 215, 0, 0.4);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), var(--bg-panel));
}

.trn-highlight-card.runner-up {
  border-color: rgba(192, 192, 192, 0.35);
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.08), var(--bg-panel));
}

.trn-highlight-card.second-runner-up {
  border-color: rgba(205, 127, 50, 0.35);
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.08), var(--bg-panel));
}

.trn-highlight-card.top-scorer {
  border-color: rgba(0, 229, 255, 0.3);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.06), var(--bg-panel));
}

.trn-highlight-card.best-player {
  border-color: rgba(163, 71, 255, 0.3);
  background: linear-gradient(135deg, rgba(163, 71, 255, 0.06), var(--bg-panel));
}

.trn-highlight-card.best-keeper {
  border-color: rgba(0, 255, 102, 0.3);
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.06), var(--bg-panel));
}

.trn-hl-label {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}

.trn-hl-name {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-high);
  margin-bottom: 2px;
  line-height: 1.3;
}

.trn-hl-detail {
  font-size: 9px;
  color: var(--accent-cyan);
}

.trn-journey-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 12px 16px;
  border-radius: 12px;
}

.trn-journey-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 80px;
}

.trn-stage-node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grid-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 11px;
  color: var(--text-muted);
}

.trn-stage-node.final {
  background: linear-gradient(135deg, #d4af37, #ffd700);
  color: #000;
}

.trn-stage-info {
  display: flex;
  flex-direction: column;
}

.trn-stage-name {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-high);
}

.trn-stage-detail {
  font-size: 7px;
  color: var(--text-muted);
}

.trn-stage-arrow {
  width: 30px;
  height: 1px;
  background: var(--grid-line);
  position: relative;
}

.trn-stage-arrow::after {
  content: ">";
  position: absolute;
  right: -2px;
  top: -7px;
  color: var(--grid-line);
  font-size: 12px;
}

/* ── Group Division Grid ── */
.trn-groups-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.trn-group-card {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-radius: 8px;
  overflow: hidden;
}

.trn-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(90, 124, 237, 0.06);
  border-bottom: 1px solid var(--grid-line);
}

.trn-group-name {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: var(--accent-brand);
  letter-spacing: 0.5px;
}

.trn-group-count {
  font-size: 7px;
  color: var(--text-muted);
}

.trn-group-schools {
  display: flex;
  flex-direction: column;
}

.trn-group-school {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.trn-group-school:last-child {
  border-bottom: none;
}

.trn-group-school.winner {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), transparent);
}
.trn-group-school.runner {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.06), transparent);
}

.trn-group-rank {
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trn-group-pos {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
}

.trn-group-crest {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(90, 124, 237, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.trn-group-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.trn-group-initials {
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 800;
  color: var(--accent-brand);
}

.trn-group-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.trn-group-school-name {
  font-size: 8px;
  font-weight: 600;
  color: var(--text-high);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trn-group-school-stats {
  font-family: "Roboto Mono", monospace;
  font-size: 6.5px;
  color: var(--text-muted);
}

.trn-intelligence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.trn-intel-card {
  background: rgba(189, 210, 253, 0.03);
  border: 1px solid rgba(189, 210, 253, 0.1);
  padding: 14px;
  border-radius: 8px;
}

.trn-intel-card p {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-high);
}

.trn-brand-name.accent {
  color: var(--accent-neon);
  font-weight: 700;
}

.trn-brand-divider {
  width: 1px;
  height: 32px;
  background: var(--grid-line);
}

/* ==========================================================================
   PAGE 2: SCHOOL / TEAM SUMMARY
   ========================================================================== */
.page-school-summary {
  padding: 22px 36px;
  min-height: calc(900px * 1.414); /* A4 proportional min-height */
}

.sch-hero {
  margin-bottom: 16px;
}

.sch-hero-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.sch-crest-area {
  flex-shrink: 0;
}

.sch-large-crest {
  width: 52px;
  height: 52px;
  color: var(--accent-cyan);
  opacity: 0.7;
}

.sch-large-crest-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
}

.sch-identity {
  flex: 1;
}

.sch-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.sch-school-name {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
}

.sch-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.sch-meta-divider {
  color: var(--grid-line);
}

.sch-standing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.sch-standing-badge {
  padding: 2px 10px;
  border-radius: 4px;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.sch-standing-badge.bronze {
  background: rgba(205, 127, 50, 0.15);
  color: var(--color-bronze);
  border: 1px solid rgba(205, 127, 50, 0.3);
}

.sch-standing-badge.silver {
  background: rgba(192, 192, 192, 0.15);
  color: var(--color-silver);
  border: 1px solid rgba(192, 192, 192, 0.3);
}

.sch-standing-text {
  font-size: 10px;
  color: var(--text-muted);
}

.sch-record-strip {
  display: flex;
  gap: 8px;
}

.sch-record-item {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 8px 14px;
  border-radius: 6px;
  text-align: center;
  min-width: 52px;
}

.sch-record-item.win .sch-rec-num {
  color: var(--accent-neon);
}
.sch-record-item.loss .sch-rec-num {
  color: var(--coral-error);
}
.sch-record-item.gd .sch-rec-num {
  color: var(--accent-cyan);
}

.sch-rec-num {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-high);
}

.sch-rec-lbl {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sch-stats-dashboard {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.sch-stat-cell {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 8px 6px;
  border-radius: 6px;
  text-align: center;
}

.sch-stat-val {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-cyan);
}

.sch-stat-lbl {
  font-size: 7px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sch-split-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  margin-bottom: 12px;
}

.sch-radar-panel,
.sch-insights-panel {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 12px;
  border-radius: 8px;
}

.sch-panel-title {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sch-radar-wrap {
  display: flex;
  justify-content: center;
}

.sch-team-radar-canvas {
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 8px;
}

.sch-insight-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sch-insight-item {
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 2px solid;
}

.sch-insight-item.attacking {
  background: rgba(90, 124, 237, 0.03);
  border-left-color: var(--accent-neon);
}

.sch-insight-item.defensive {
  background: rgba(189, 210, 253, 0.03);
  border-left-color: var(--accent-cyan);
}

.sch-insight-item.discipline {
  background: rgba(255, 215, 0, 0.03);
  border-left-color: var(--gold-standard);
}

.sch-insight-cat {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 7px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.sch-insight-item p {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.4;
}

.sch-journey-section {
  margin-bottom: 12px;
}

.sch-journey-visual {
  display: flex;
  align-items: flex-start;
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 10px 12px;
  border-radius: 8px;
  overflow-x: auto;
}

.sch-journey-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 72px;
}

.sch-journey-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 10px;
  margin-bottom: 3px;
}

.sch-journey-circle.win {
  background: rgba(90, 124, 237, 0.15);
  color: var(--accent-neon);
  border: 1.5px solid var(--accent-neon);
}

.sch-journey-circle.loss {
  background: rgba(255, 74, 74, 0.15);
  color: var(--coral-error);
  border: 1.5px solid var(--coral-error);
}

.sch-journey-circle.draw {
  background: rgba(189, 210, 253, 0.1);
  color: var(--text-muted);
  border: 1.5px solid var(--text-muted);
}

.sch-journey-stage {
  font-size: 8px;
  font-weight: 600;
  color: var(--text-muted);
}
.sch-journey-score {
  font-size: 9px;
  font-family: "Roboto Mono", monospace;
  color: var(--text-high);
}
.sch-journey-opp {
  font-size: 7px;
  color: var(--text-muted);
  margin-top: 1px;
}

.sch-journey-connector {
  width: 24px;
  height: 2px;
  background: var(--grid-line);
  margin-top: 11px;
  flex-shrink: 0;
}

.sch-style-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sch-style-bars {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 10px 12px;
  border-radius: 8px;
}

.sch-style-bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 2px;
  margin-top: 6px;
}

.sch-style-bar-row:first-child {
  margin-top: 0;
}

.sch-style-pct {
  color: var(--accent-cyan);
  font-family: "Roboto Mono", monospace;
  font-size: 9px;
}

.sch-style-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

.sch-style-fill.primary {
  height: 100%;
  border-radius: 2px;
  background: var(--accent-neon);
}
.sch-style-fill.secondary {
  height: 100%;
  border-radius: 2px;
  background: var(--accent-cyan);
}
.sch-style-fill.tertiary {
  height: 100%;
  border-radius: 2px;
  background: var(--text-muted);
}

.sch-style-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sch-tag-block {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 10px;
  border-radius: 8px;
}

.sch-tag-block-title {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.sch-tag-block-title.green {
  color: var(--accent-neon);
}
.sch-tag-block-title.amber {
  color: var(--accent-cyan);
}

.sch-tag {
  display: inline-block;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  margin: 1px 2px;
  line-height: 1.3;
}

.sch-tag.green {
  background: rgba(90, 124, 237, 0.08);
  color: var(--accent-neon);
  border: 1px solid rgba(90, 124, 237, 0.15);
}
.sch-tag.amber {
  background: rgba(189, 210, 253, 0.08);
  color: var(--accent-cyan);
  border: 1px solid rgba(189, 210, 253, 0.15);
}

/* ==========================================================================
   TEAM JOURNEY PAGE
   ========================================================================== */
.page-team-journey {
  padding: 28px 40px;
  min-height: calc(900px * 1.414); /* A4 proportional min-height */
}

/* ==========================================================================
   MATCH DETAIL PAGES
   ========================================================================== */
.page-match-detail {
  padding: 28px 40px;
  min-height: calc(900px * 1.414); /* A4 proportional min-height */
}

/* ── Compact Row: Strengths/Weaknesses + Squad Roster ── */
.sch-compact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sch-compact-left,
.sch-compact-right {
  min-width: 0;
}

.sch-compact-tags {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sch-compact-tag-block {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 7px 8px;
  border-radius: 6px;
}

.sch-compact-tag-label {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.sch-compact-tag-label.green {
  color: var(--accent-neon);
}
.sch-compact-tag-label.amber {
  color: var(--accent-cyan);
}

.sch-compact-tag {
  display: inline-block;
  font-size: 7px;
  padding: 1px 5px;
  border-radius: 3px;
  margin: 1px 2px;
  line-height: 1.3;
}

.sch-compact-tag.green {
  background: rgba(0, 201, 81, 0.08);
  color: var(--success);
  border: 1px solid rgba(0, 201, 81, 0.15);
}
.sch-compact-tag.amber {
  background: rgba(247, 60, 47, 0.08);
  color: var(--danger);
  border: 1px solid rgba(247, 60, 47, 0.15);
}

.sch-compact-roster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

.sch-compact-player {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-radius: 4px;
  padding: 3px 6px;
}

.sch-compact-jersey {
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 800;
  color: #5a7ced;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sch-compact-pinfo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sch-compact-pname {
  font-size: 7.5px;
  color: var(--text-high);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.sch-compact-ovr {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: var(--accent-brand);
  flex-shrink: 0;
  min-width: 18px;
  text-align: right;
}

/* ── DNP (Did Not Play) Badge ── */
.sch-compact-player.dnp {
  opacity: 0.5;
  background: var(--bg-panel-muted, #1a1e26);
}

.sch-compact-dnp-badge {
  font-family: "Outfit", sans-serif;
  font-size: 6px;
  font-weight: 700;
  color: #8E9BAE;
  background: rgba(142, 155, 174, 0.15);
  border: 1px solid rgba(142, 155, 174, 0.25);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 4px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Compact Journey ── */
.sch-journey-section {
  margin-top: 6px;
}

.sch-journey-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-radius: 6px;
  padding: 6px 10px;
  gap: 0;
  flex-wrap: wrap;
}

.sch-journey-node-cp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 48px;
}

.sch-journey-circle-cp {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 800;
  border: 1.5px solid var(--grid-line);
}

.sch-journey-circle-cp.win {
  background: rgba(0, 201, 81, 0.1);
  border-color: rgba(0, 201, 81, 0.3);
  color: var(--success);
}
.sch-journey-circle-cp.loss {
  background: rgba(247, 60, 47, 0.1);
  border-color: rgba(247, 60, 47, 0.3);
  color: var(--danger);
}
.sch-journey-circle-cp.draw {
  background: rgba(254, 153, 0, 0.1);
  border-color: rgba(254, 153, 0, 0.3);
  color: var(--warning);
}

.sch-journey-label-cp {
  font-size: 7px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.sch-journey-score-cp {
  font-family: "Roboto Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-high);
}

.sch-journey-arrow-cp {
  font-size: 12px;
  color: var(--accent-brand);
  opacity: 0.35;
  margin: 0 2px;
  padding-bottom: 12px;
}

/* ── Compact Match Results Table ── */
.sch-matches-section {
  margin-top: 6px;
}

.sch-matches-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8px;
}

.sch-matches-table th {
  font-size: 7px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 5px;
  border-bottom: 1px solid var(--grid-line);
  font-weight: 600;
}

.sch-matches-table td {
  padding: 4px 5px;
  border-bottom: 1px solid var(--grid-line);
  color: var(--text-muted);
}

.sch-mt-num {
  color: var(--text-muted) !important;
}
.sch-mt-opp {
  color: var(--text-high) !important;
  font-weight: 600;
}
.sch-mt-stage {
  font-size: 7px;
}
.sch-mt-score {
  color: var(--text-high) !important;
  font-weight: 700;
  font-size: 9px !important;
}
.sch-mt-goal {
  color: var(--accent-neon) !important;
}
.sch-mt-result {
  font-size: 7px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
}
.sch-mt-result.win {
  background: rgba(0, 201, 81, 0.1);
  color: var(--success);
}
.sch-mt-result.loss {
  background: rgba(247, 60, 47, 0.1);
  color: var(--danger);
}
.sch-mt-result.draw {
  background: rgba(254, 153, 0, 0.1);
  color: var(--warning);
}

.sch-roster-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.sch-roster-name {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-high);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sch-roster-pos {
  font-size: 7px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sch-roster-ovr {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-neon);
  min-width: 24px;
  text-align: right;
}

/* Light theme overrides for roster cards */
.report-page .sch-roster-card {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}
.report-page .sch-roster-ovr {
  color: #5a7ced !important;
}

/* ── Own Goal Intelligence Card ──────────────────── */
.trn-intel-card.og-intel-card {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.trn-intel-badge {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 6px;
}

/* ── Own Goal Stat Cell ──────────────────────────── */
.sch-stat-cell.has-og {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.04);
}

.sch-stat-og-sub {
  display: block;
  font-size: 7px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.3px;
}

.og-highlight {
  color: #f59e0b;
  font-weight: 700;
}

/* Light theme own goal overrides */
.report-page .sch-stat-cell.has-og {
  border-color: rgba(245, 158, 11, 0.35) !important;
  background: rgba(245, 158, 11, 0.06) !important;
}
.report-page .trn-intel-card.og-intel-card {
  background: rgba(245, 158, 11, 0.06) !important;
}

/* ── Own Goal Roster Card ────────────────────────── */
.sch-roster-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 32px;
}

.sch-roster-card.has-own-goal {
  border-left: 2px solid #f59e0b;
}

.sch-roster-og-badge {
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
}

.match-hero {
  margin-bottom: 16px;
  padding: 12px;
  border-bottom: 1px solid var(--grid-line);
}

.match-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.match-num-label {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 1px;
}

.match-stage-pill {
  background: rgba(189, 210, 253, 0.1);
  color: var(--accent-cyan);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.match-scoreline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.match-team-self,
.match-team-opp {
  width: 35%;
}

.match-school-name {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-high);
}

.match-school-name.opp {
  text-align: right;
  color: var(--text-muted);
  font-size: 14px;
  display: block;
}

.match-score-center {
  text-align: center;
}

.match-score-nums {
  font-family: "Roboto Mono", monospace;
  font-size: 32px;
  font-weight: 800;
  color: var(--accent-neon);
  display: block;
}

.match-pso-scoreline {
  text-align: center;
  margin-top: 4px;
}

.match-pso-score-text {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--coral-error);
  letter-spacing: 0.5px;
}

.match-result-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 4px;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 4px;
}

.match-result-badge.win {
  background: rgba(90, 124, 237, 0.15);
  color: var(--accent-neon);
}
.match-result-badge.loss {
  background: rgba(255, 74, 74, 0.15);
  color: var(--coral-error);
}
.match-result-badge.draw {
  background: rgba(189, 210, 253, 0.1);
  color: var(--text-muted);
}

.match-meta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--text-muted);
}

.match-meta-divider {
  color: var(--grid-line);
}

.match-body-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.match-panel-title {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--grid-line);
  padding-bottom: 6px;
}

.match-panel-title.sub {
  border-bottom: none;
  font-size: 9px;
  margin-top: 12px;
}

.match-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.match-timeline-event {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-left: 3px solid var(--grid-line);
  transition: none;
}

/* ── Category-specific styling ── */
/* Team Goal → green */
.match-timeline-event.scoring {
  border-left-color: var(--success);
  background: linear-gradient(135deg, rgba(0, 201, 81, 0.05), var(--bg-panel));
}
/* Assist → cyan */
.match-timeline-event.assist-cat {
  border-left-color: var(--accent-cyan);
  background: linear-gradient(
    135deg,
    rgba(189, 210, 253, 0.04),
    var(--bg-panel)
  );
}
/* Team Yellow Card → gold/yellow */
.match-timeline-event.card {
  border-left-color: var(--gold-standard);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), var(--bg-panel));
}
/* Team Red Card → crimson (distinct from opponent goal red) */
.match-timeline-event.red-card {
  border-left-color: #c0392b;
  background: linear-gradient(135deg, rgba(192, 57, 43, 0.06), var(--bg-panel));
}
/* Own Goal / Opponent Goal → red */
.match-timeline-event.own-goal {
  border-left-color: var(--coral-error);
  background: linear-gradient(135deg, rgba(247, 60, 47, 0.05), var(--bg-panel));
}
/* Team Foul → amber */
.match-timeline-event.foul-cat {
  border-left-color: var(--warning);
  background: linear-gradient(135deg, rgba(254, 153, 0, 0.03), var(--bg-panel));
}
/* Opponent actions (foul, card) → neutral gray */
.match-timeline-event.opp-neutral {
  border-left-color: var(--text-muted);
  background: linear-gradient(
    135deg,
    rgba(145, 154, 168, 0.04),
    var(--bg-panel)
  );
  opacity: 0.85;
}
/* Phase events → muted */
.match-timeline-event.phase {
  border-left-color: var(--text-muted);
  background: transparent;
  opacity: 0.55;
}

.match-tl-time {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent-cyan);
  min-width: 26px;
  text-align: center;
  padding-top: 1px;
}

.match-tl-icon {
  font-size: 13px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.match-tl-icon-svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.match-tl-icon-svg svg {
  display: block;
  width: 12px;
  height: 16px;
}

.match-timeline-event.scoring .match-tl-icon {
  color: var(--success);
}
.match-timeline-event.assist-cat .match-tl-icon {
  color: var(--accent-cyan);
}
.match-timeline-event.red-card .match-tl-icon {
  color: #c0392b;
}
.match-timeline-event.own-goal .match-tl-icon {
  color: var(--coral-error);
}
.match-timeline-event.foul-cat .match-tl-icon {
  color: var(--warning);
}
.match-timeline-event.opp-neutral .match-tl-icon {
  color: var(--text-muted);
}

.match-tl-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.match-tl-label {
  font-family: "Outfit", sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.1;
}

.match-timeline-event.scoring .match-tl-label {
  color: var(--success);
}
.match-timeline-event.card .match-tl-label {
  color: var(--gold-standard);
}
.match-timeline-event.red-card .match-tl-label {
  color: #c0392b;
}
.match-timeline-event.own-goal .match-tl-label {
  color: var(--coral-error);
}
.match-timeline-event.opp-neutral .match-tl-label {
  color: var(--text-muted);
}

.match-tl-player {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-high);
  line-height: 1.3;
}

.match-tl-detail {
  font-size: 8px;
  color: var(--text-muted);
  line-height: 1.3;
}

.match-stats-panel {
  background: var(--bg-panel);
  padding: 24px;
  border-radius: 12px;
}

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

.match-stat-item {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 24px 10px 20px 10px; /* increased padding top/bottom */
  border-radius: 8px;
  text-align: center;
}

.match-stat-item.intensity {
  border-color: rgba(189, 210, 253, 0.2);
}

.match-stat-val {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-high);
  margin-bottom: 12px;
}

.match-stat-item.intensity .match-stat-val {
  color: var(--accent-cyan);
}

.match-stat-lbl {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.match-performers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.match-performer-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 8px 10px;
  border-radius: 6px;
}

.match-perf-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grid-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.match-performer-card:first-child .match-perf-rank {
  background: linear-gradient(135deg, var(--accent-neon), var(--accent-cyan));
  color: #000;
}

.match-perf-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.match-perf-name {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-high);
}

.match-perf-contribution {
  font-size: 9px;
  color: var(--text-muted);
}

.match-perf-rating {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-neon);
}

/* ── Penalty Shootout (compact paired-kick layout) ── */
.match-pso-section {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.match-pso-title {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-neon);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 6px;
}

.match-pso-scorebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.match-pso-scorebar-team {
  display: flex;
  align-items: center;
  gap: 8px;
}

.match-pso-scorebar-name {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-high);
}

.match-pso-scorebar-num {
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-neon);
  min-width: 20px;
  text-align: center;
}

.match-pso-scorebar-team.opp .match-pso-scorebar-num {
  color: var(--coral-error);
}

.match-pso-scorebar-vs {
  font-size: 12px;
  color: var(--text-muted);
}

.match-pso-kicks-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.match-pso-pair {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(90,124,237,0.03);
  border: 1px solid rgba(90,124,237,0.08);
  border-radius: 6px;
  padding: 4px 5px;
  min-width: 90px;
}

.match-pso-kick-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 3px;
}

.match-pso-kick-compact.scored {
  background: rgba(0,201,81,0.08);
}

.match-pso-kick-compact.missed {
  background: rgba(247,60,47,0.06);
}

.match-pso-kick-compact.empty {
  opacity: 0.3;
}

.match-pso-kick-compact .match-pso-kick-icon {
  font-size: 9px;
  min-width: 10px;
  text-align: center;
}

.match-pso-kick-compact.scored .match-pso-kick-icon { color: var(--success); }
.match-pso-kick-compact.missed .match-pso-kick-icon { color: var(--danger); }

.match-pso-kick-compact .match-pso-kick-player {
  font-size: 7.5px;
  color: var(--text-high);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-pso-side:first-of-type .match-pso-total { color: var(--success); }
.match-pso-side:last-of-type .match-pso-total { color: var(--coral-error); }

.match-pso-side:first-of-type .match-pso-total {
  color: var(--success);
}
.match-pso-side:last-of-type .match-pso-total {
  color: var(--coral-error);
}

.match-insight-box {
  background: linear-gradient(
    135deg,
    rgba(189, 210, 253, 0.04),
    rgba(18, 24, 41, 0.6)
  );
  border: 1px solid rgba(189, 210, 253, 0.12);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 4px;
}

.match-insight-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.match-insight-stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: rgba(189, 210, 253, 0.06);
  min-width: 80px;
  border-right: 1px solid rgba(189, 210, 253, 0.08);
}

.match-insight-stat-label {
  font-family: "Outfit", sans-serif;
  font-size: 7px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.match-insight-stat-val {
  font-family: "Outfit", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--accent-cyan);
  line-height: 1;
}

.match-insight-stat-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

.match-insight-divider {
  width: 1px;
  background: rgba(189, 210, 253, 0.08);
}

.match-insight-text-block {
  flex: 1;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.match-insight-kicker {
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.match-insight-text-block p {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.45;
  font-style: italic;
  margin: 0;
}

.match-insight-score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-width: 72px;
  border-left: 1px solid rgba(189, 210, 253, 0.08);
}

.match-insight-score-badge.win {
  background: rgba(90, 124, 237, 0.06);
}

.match-insight-score-badge.loss {
  background: rgba(255, 74, 74, 0.06);
}

.match-insight-score-num {
  font-family: "Roboto Mono", monospace;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-high);
  line-height: 1;
}

.match-insight-score-badge.win .match-insight-score-num {
  color: var(--accent-neon);
}

.match-insight-score-badge.loss .match-insight-score-num {
  color: var(--coral-error);
}

.match-insight-score-lbl {
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 2px;
}

.match-insight-score-badge.win .match-insight-score-lbl {
  color: var(--accent-neon);
}

.match-insight-score-badge.loss .match-insight-score-lbl {
  color: var(--coral-error);
}

/* ==========================================================================
   FULL PLAYER PAGES (SCOUTING DOSSIER)
   ========================================================================== */
.page-player-full {
  padding: 28px 40px;
  min-height: calc(900px * 1.414); /* A4 proportional min-height */
}

.plr-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grid-line);
}

.plr-header-left {
  flex: 1;
}

.plr-header-eyebrow {
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.plr-name {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
}

.plr-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
}

.plr-meta-divider {
  color: var(--grid-line);
}

.plr-jersey-badge {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(189, 210, 253, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
}

.plr-header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.plr-ovr-block {
  padding: 8px 18px;
  border-radius: 10px;
  border: 2px solid;
  text-align: center;
}

.plr-ovr-block.tier-bronze {
  background: linear-gradient(135deg, #1e1712, #3d2d20);
  border-color: var(--color-bronze);
}
.plr-ovr-block.tier-silver {
  background: linear-gradient(135deg, #182026, #2a3641);
  border-color: var(--color-silver);
}
.plr-ovr-block.tier-gold {
  background: linear-gradient(135deg, #2a210a, #524014);
  border-color: var(--color-gold);
}
.plr-ovr-block.tier-elite {
  background: linear-gradient(135deg, #180d2a, #301655);
  border-color: var(--color-elite);
}
.plr-ovr-block.tier-rising-star {
  background: linear-gradient(135deg, #240a20, #4d123c);
  border-color: var(--color-star-magenta);
}

.plr-ovr-num {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff; /* always white — badge has a dark gradient background */
}

.plr-ovr-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.6); /* always white/muted — dark bg */
  text-transform: uppercase;
}

/* ── DNP (Did Not Play) Notice for Full Player Page ── */
.plr-dnp-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(142, 155, 174, 0.08);
  border: 1px solid rgba(142, 155, 174, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 8.5px;
  color: #8E9BAE;
  line-height: 1.4;
}

.plr-dnp-icon {
  font-size: 14px;
  flex-shrink: 0;
  color: #6B7A90;
}

.plr-matches-badge {
  font-size: 9px;
  color: var(--text-muted);
  background: var(--bg-panel);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--grid-line);
}

.plr-card-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}

.plr-card-front,
.plr-card-back {
  width: 100%;
  aspect-ratio: 5 / 7;
  position: relative;
}

.plr-card-front {
  max-width: 240px;
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.plr-card-back {
  max-width: 240px;
  margin: 0 auto;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #2d3750;
  background: #16181a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.plr-card-back .card-back-top-row {
  font-size: 8px;
  margin-bottom: 6px;
}
.plr-card-back .card-back-analytics {
  height: auto;
  margin-top: 6px;
}
.plr-card-back .mini-table {
  gap: 3px;
}
.plr-card-back .back-table-row {
  font-size: 9px;
}
.plr-card-back .scout-list li {
  font-size: 8px;
}
.plr-card-back .verification-stamp .stamp-name {
  font-size: 10px;
}

.plr-card-back-radar {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.plr-stats-section {
  margin-bottom: 14px;
}

.plr-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.plr-stat-cell {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 8px 6px;
  border-radius: 6px;
  text-align: center;
}

.plr-stat-val {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-high);
}

.plr-stat-val.accent {
  color: var(--accent-neon);
}
.plr-stat-val.accent2 {
  color: var(--accent-cyan);
}
.plr-stat-val.warning {
  color: var(--gold-standard);
}
.plr-stat-val.danger {
  color: var(--coral-error);
}

.plr-stat-lbl {
  font-size: 7px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.plr-performance-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  margin-bottom: 14px;
}

.plr-radar-panel,
.plr-attributes-panel {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 12px;
  border-radius: 8px;
}

.plr-panel-title {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.plr-full-radar-canvas {
  width: 140px;
  height: 140px;
  display: block;
  margin: 0 auto;
}

.plr-attr-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.plr-attr-row {
  display: grid;
  grid-template-columns: 70px 1fr 28px;
  gap: 8px;
  align-items: center;
}

.plr-attr-label {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

.plr-attr-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.plr-attr-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-brand), var(--accent-light));
}

.plr-attr-val {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  text-align: right;
  color: var(--text-high);
}

.plr-match-log {
  margin-bottom: 14px;
}

.plr-match-table {
  font-size: 10px;
}
.plr-match-table th {
  font-size: 8px;
  padding: 8px 10px;
}
.plr-match-table td {
  font-size: 10px;
  padding: 8px 10px;
}

.plr-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  flex: 1;
}

.plr-archetype-panel,
.plr-insight-panel {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 12px;
  border-radius: 8px;
}

.plr-archetype-label {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-cyan);
  display: block;
  margin-bottom: 10px;
}

.plr-archetype-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plr-arch-row {
  margin-bottom: 4px;
}

.plr-arch-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  margin-bottom: 3px;
}

.plr-arch-labels span:first-child {
  color: var(--text-muted);
}
.plr-arch-labels span:last-child {
  color: var(--accent-cyan);
  font-family: "Roboto Mono", monospace;
}

.plr-arch-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

.plr-arch-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent-neon);
}

.plr-insight-panel {
  background: rgba(189, 210, 253, 0.03);
  border-color: rgba(189, 210, 253, 0.15);
}

.plr-insight-panel p {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 8px;
}

.plr-insight-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--grid-line);
  padding-top: 8px;
}

.plr-insight-sign {
  display: flex;
  flex-direction: column;
}

.plr-insight-name {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 600;
}

.plr-insight-role {
  font-size: 8px;
  color: var(--text-muted);
}

/* ==========================================================================
   CONCLUSION & ACKNOWLEDGEMENTS PAGE
   ========================================================================== */
.page-conclusion {
  padding: 36px 48px;
  min-height: calc(900px * 1.414); /* A4 proportional min-height */
}

.concl-hero {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--grid-line);
}

.concl-eyebrow {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent-cyan);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.concl-title {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 4px;
}

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

.concl-box {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.concl-summary-box {
  background: linear-gradient(
    135deg,
    rgba(189, 210, 253, 0.05),
    var(--bg-panel)
  );
  border: 1px solid rgba(189, 210, 253, 0.15);
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.concl-box-title {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.concl-box-title.green {
  color: var(--accent-neon);
}
.concl-box-title.cyan {
  color: var(--accent-cyan);
}

.concl-summary-text {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}

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

.concl-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.concl-list li {
  font-size: 10px;
  color: var(--text-muted);
  padding-left: 12px;
  position: relative;
  line-height: 1.4;
}

.concl-list li::before {
  content: "\25AA";
  position: absolute;
  left: 0;
}
.concl-list.green li::before {
  color: var(--accent-neon);
}
.concl-list.cyan li::before {
  color: var(--accent-cyan);
}
.concl-list.dev li::before {
  color: var(--accent-cyan);
}

.concl-closing {
  margin-bottom: 14px;
}

.concl-closing-quote {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), var(--bg-panel));
  border: 1px solid rgba(255, 215, 0, 0.15);
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 12px;
  text-align: center;
}

.concl-closing-quote p {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-high);
  line-height: 1.6;
  font-style: italic;
}

.concl-tech-insight {
  background: rgba(189, 210, 253, 0.03);
  border: 1px solid rgba(189, 210, 253, 0.1);
  padding: 14px;
  border-radius: 10px;
}

.concl-tech-insight p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 10px;
}

.concl-sign-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--grid-line);
  padding-top: 10px;
}

.concl-sign-block {
  display: flex;
  flex-direction: column;
}

.concl-sign-name {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.concl-sign-title {
  font-size: 9px;
  color: var(--text-muted);
}

.concl-acknowledgements {
  margin-top: auto;
}

.concl-ack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  padding: 14px;
  border-radius: 10px;
}

.concl-ack-item {
  text-align: center;
  padding: 8px;
}

.concl-ack-item.highlight {
  background: rgba(90, 124, 237, 0.05);
  border: 1px solid rgba(90, 124, 237, 0.15);
  border-radius: 8px;
}

.concl-ack-role {
  display: block;
  font-size: 7px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.concl-ack-name {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-high);
}

.concl-ack-name.accent {
  color: var(--accent-neon);
  font-weight: 700;
}

/* ==========================================================================
   REPORT COVER PAGE
   ========================================================================== */
.page-ns-cover {
  padding: 0;
  min-height: calc(900px * 1.414);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-ns-cover .report-page-.report-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-ns-cover .page-watermark {
  opacity: 0.06;
  width: 500px;
  height: 500px;
}

.cover-wrapper {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 40px 20px;
}

.cover-logo {
  margin-bottom: 20px;
  display: inline-block;
  filter: drop-shadow(0 4px 20px rgba(90, 124, 237, 0.2));
}

.cover-brand {
  font-family: "Outfit", sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--accent-brand);
  letter-spacing: 4px;
  line-height: 1;
  margin-bottom: 8px;
}

.cover-tagline {
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.cover-divider {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-brand), transparent);
  margin: 0 auto 24px;
}

.cover-tournament {
  font-family: "Outfit", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-high);
  margin-bottom: 6px;
  line-height: 1.2;
}

.cover-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cover-category {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-cyan);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cover-report-for {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cover-school-name {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-high);
  line-height: 1.2;
}

.cover-footer-text {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cover-footer-text span {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* ==========================================================================
   ABOUT NEXTSPORTZ INTRO PAGE — Redesigned layout
   ========================================================================== */

/* ── Page Container ── */
.page-ns-intro {
  padding: 18px 38px;
  min-height: 0;
  height: auto;
}

/* ── Hero Block ── */
.nsi-hero {
  text-align: center;
  margin-bottom: 8px;
  padding: 10px 18px 10px;
  background: linear-gradient(
    135deg,
    rgba(90, 124, 237, 0.04),
    rgba(189, 210, 253, 0.02)
  );
  border: 1px solid rgba(189, 210, 253, 0.12);
  border-radius: 10px;
  position: relative;
  z-index: 1;
}

.nsi-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent-brand);
  text-transform: uppercase;
  background: rgba(90, 124, 237, 0.08);
  border: 1px solid rgba(90, 124, 237, 0.2);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 5px;
}

.nsi-hero-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.nsi-hero-title {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
  line-height: 1.15;
  color: var(--text-high);
}

.nsi-hero-subtitle {
  font-size: 10px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 8px;
  line-height: 1.45;
}

.nsi-hero-stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.nsi-hero-stat {
  text-align: center;
  min-width: 56px;
}

.nsi-hero-stat-num {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-high);
  line-height: 1.1;
}

.nsi-hero-stat.accent .nsi-hero-stat-num {
  color: var(--accent-brand);
}

.nsi-hero-stat-lbl {
  font-size: 7.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Section ── */
.nsi-section {
  margin-bottom: 7px;
  position: relative;
  z-index: 1;
}

.nsi-section-last {
  margin-bottom: 5px;
}

.nsi-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.nsi-section-badge {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-brand);
  background: rgba(90, 124, 237, 0.08);
  border: 1px solid rgba(90, 124, 237, 0.18);
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nsi-section-title {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ── Body Text ── */
.nsi-.report-container {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 5px;
}

.nsi-body strong {
  color: var(--text-high);
  font-weight: 600;
}

/* ── Grids ── */
.nsi-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.nsi-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* ── Pillars ── */
.nsi-pillar {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-left: 3px solid var(--accent-brand);
  padding: 7px 10px;
  border-radius: 0 6px 6px 0;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.nsi-pillar-icon-wrap {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(90, 124, 237, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nsi-pillar-icon {
  font-size: 12px;
  color: var(--accent-brand);
  line-height: 1;
}

.nsi-pillar-.report-container {
  flex: 1;
  min-width: 0;
}

.nsi-pillar-title {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-high);
  display: block;
  margin-bottom: 1px;
}

.nsi-pillar-desc {
  font-size: 7.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ── Compare Cards ── */
.nsi-compare-card {
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--grid-line);
  background: var(--bg-panel);
}

.nsi-compare-card.without {
  border-left: 3px solid var(--danger);
  background: linear-gradient(135deg, rgba(247, 60, 47, 0.03), var(--bg-panel));
}

.nsi-compare-card.with {
  border-left: 3px solid var(--success);
  background: linear-gradient(135deg, rgba(0, 201, 81, 0.03), var(--bg-panel));
}

.nsi-compare-label {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  display: block;
  margin-bottom: 3px;
}

.nsi-compare-card.without .nsi-compare-label {
  color: var(--danger);
}
.nsi-compare-card.with .nsi-compare-label {
  color: var(--success);
}

.nsi-compare-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nsi-compare-list li {
  font-size: 9px;
  color: var(--text-muted);
  padding-left: 8px;
  position: relative;
  line-height: 1.3;
}

.nsi-compare-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
}

.nsi-compare-card.without .nsi-compare-list li::before {
  color: var(--danger);
  opacity: 0.5;
}
.nsi-compare-card.with .nsi-compare-list li::before {
  color: var(--success);
}

/* ── Flow Steps ── */
.nsi-flow {
  display: flex;
  align-items: flex-start;
  gap: 0;
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-radius: 8px;
  padding: 6px 6px;
}

.nsi-flow-step {
  flex: 1;
  text-align: center;
  padding: 0 4px;
}

.nsi-flow-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(90, 124, 237, 0.1);
  border: 2px solid rgba(90, 124, 237, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-brand);
  margin: 0 auto 4px;
}

.nsi-flow-title {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-high);
  display: block;
  margin-bottom: 1px;
}

.nsi-flow-desc {
  font-size: 8.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

.nsi-flow-arrow {
  font-size: 14px;
  color: var(--accent-brand);
  opacity: 0.4;
  padding-top: 6px;
  flex-shrink: 0;
}

/* ── Outcomes ── */
.nsi-outcome {
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-radius: 7px;
  padding: 6px 10px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.nsi-outcome-icon {
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
  color: var(--accent-brand);
}

.nsi-outcome-icon svg {
  display: block;
}

.nsi-outcome-.report-container {
  flex: 1;
  min-width: 0;
}

.nsi-outcome-title {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-high);
  display: block;
  margin-bottom: 1px;
}

.nsi-outcome-desc {
  font-size: 8.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── CTA Block ── */
.nsi-cta {
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

.nsi-cta-inner {
  background: linear-gradient(
    135deg,
    rgba(90, 124, 237, 0.1),
    rgba(90, 124, 237, 0.03)
  );
  border: 1.5px solid rgba(90, 124, 237, 0.3);
  padding: 8px 16px;
  border-radius: 10px;
  text-align: center;
}

.nsi-cta-title {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-high);
  margin-bottom: 2px;
}

.nsi-cta-.report-container {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.35;
  margin-bottom: 4px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.nsi-cta-body strong {
  color: var(--text-high);
  font-weight: 600;
}

.nsi-cta-contacts {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.nsi-cta-contact {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-high);
  font-weight: 500;
}

.nsi-cta-contact-icon {
  color: var(--accent-brand);
  font-size: 11px;
}

/* ==========================================================================
   REPORT PAGE BASE OVERRIDES FOR FULL REPORT PAGES
   ========================================================================== */
.page-tournament-summary .report-footer,
.page-school-summary .report-footer,
.page-match-detail .report-footer,
.page-player-full .report-footer,
.page-conclusion .report-footer,
.page-ns-intro .report-footer {
  z-index: 1;
  position: relative;
}

/* Print overrides for full report pages */
@media print {
  @page {
    size: A4;
    margin: 0mm;
    /* Setting margin to 0 removes the browser's running header (title/URL)
       and footer (page numbers/date). Content margins handled by body padding. */
  }

  /* Force white body background, remove dark theme */
  html,
  body,
  .report-container {
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    /* Compensate for zero @page margin — this gives consistent safe margins */
    padding: 12mm 14mm !important;
    margin: 0 !important;
  }

  /* Hide toolbar, page navigation, export buttons, and other non-report UI */
  .tr-toolbar,
  .tr-page-nav,
  .tr-export-btn,
  .print-button,
  .export-btn-pdf,
  .report-footer,
  .report-footer-inner,
  .report-header,
  #toolbar,
  #page-nav {
    display: none !important;
  }

  /* Report body container — no max-width, no extra padding */
  .tr-body,
  .report-paper-container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  .page-tournament-summary,
  .page-school-summary,
  .page-match-detail,
  .page-player-full,
  .page-conclusion,
  .page-ns-intro,
  .page-ns-cover {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: none !important;
    padding: 0 !important;
    display: table !important;
    table-layout: fixed !important;
    page-break-after: always !important;
    break-after: page !important;
  }

  /* Body content — inner padding is minimal since @page provides outer margin */
  .report-page-.report-container {
    display: table-row-group !important;
    padding: 4mm 6mm 2mm 6mm !important;
  }

  /* Footer repeats on every physical page */
  .report-footer {
    display: table-footer-group !important;
    background: #ffffff !important;
  }

  .report-footer-inner {
    padding: 3mm 6mm !important;
    border-top: 0.5pt solid #d0d0d0 !important;
    background: #ffffff !important;
    color: #888 !important;
  }

  .page-watermark {
    opacity: 0.09 !important;
  }

  /* Card front gets light borders, card back stays dark */
  .plr-card-front {
    border-color: #e0e0e0 !important;
    box-shadow: none !important;
  }
  .plr-card-back {
    border-color: #2d3750 !important;
    background: #16181a !important;
    color: #ffffff !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .plr-card-back span,
  .plr-card-back strong,
  .plr-card-back td,
  .plr-card-back th,
  .plr-card-back li {
    color: #ffffff !important;
  }
  .plr-card-back .card-back-top-row {
    color: #5a7ced !important;
  }
  .plr-card-back .back-table-row span {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  .plr-card-back .back-table-row strong {
    color: #5a7ced !important;
  }

  .trn-highlight-card,
  .trn-intel-card,
  .sch-stat-cell,
  .match-timeline-event,
  .plr-stat-cell,
  .plr-radar-panel,
  .plr-attributes-panel,
  .plr-archetype-panel,
  .plr-insight-panel,
  .concl-box,
  .concl-summary-box,
  .sch-radar-panel,
  .sch-insights-panel,
  .sch-style-bars,
  .sch-tag-block {
    background: #f5f5f7 !important;
    border-color: #e0e0e0 !important;
    color: #1a1a1a !important;
  }

  .match-result-badge.win {
    background: rgba(0, 201, 81, 0.1) !important;
    color: #00873a !important;
  }
  .match-result-badge.loss {
    background: rgba(247, 60, 47, 0.1) !important;
    color: #c42b20 !important;
  }

  /* Force CSS variables in print — report pages use light theme */
  .report-page {
    --bg-obsidian: #ffffff !important;
    --bg-panel: #f5f5f7 !important;
    --text-high: #1a1a1a !important;
    --text-medium: #333333 !important;
    --text-muted: #888888 !important;
    --accent-neon: #5a7ced !important;
    --accent-cyan: #5a7ced !important;
    --accent-brand: #5a7ced !important;
    --grid-line: #e0e0e0 !important;
    color: #1a1a1a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Restore card-back dark variables in print */
  .report-page .plr-card-back {
    --bg-obsidian: #101316 !important;
    --bg-panel: #16181a !important;
    --text-high: #ffffff !important;
    --text-medium: #ffffff !important;
    --text-muted: rgba(255, 255, 255, 0.6) !important;
    --accent-brand: #5a7ced !important;
    --grid-line: #2d3750 !important;
  }

  /* Card front — keep white text in print (Flutter: gray100=#FFFFFF) */
  .report-page .plr-card-front {
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .report-page .plr-card-front .mad-ovr-val,
  .report-page .plr-card-front .mad-stat-big,
  .report-page .plr-card-front .mad-stat-num,
  .report-page .plr-card-front .mad-nameplate span {
    color: #ffffff !important;
  }
  .report-page .plr-card-front .mad-ovr-lbl,
  .report-page .plr-card-front .mad-stat-lbl-sm {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  .report-page .plr-card-front .mad-stat-key {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .report-page .plr-card-front .mad-silhouette svg {
    color: rgba(255, 255, 255, 0.5) !important;
  }
  .report-page .plr-card-front .mad-nameplate {
    background: transparent !important;
  }
  .report-page .plr-card-front .mad-stat-vdivider {
    background: rgba(255, 255, 255, 0.2) !important;
  }

  /* OVR block — always dark bg, text always white in print too */
  .report-page .plr-ovr-num {
    color: #ffffff !important;
  }
  .report-page .plr-ovr-label {
    color: rgba(255, 255, 255, 0.6) !important;
  }
}

/* ==========================================================================
   LIGHT THEME OVERRIDES FOR ALL REPORT PAGES (on-screen)
   ========================================================================== */

/* Watermark — very subtle on white */
.report-page .page-watermark {
  opacity: 0.09;
}

/* Text colors — dark on white */
.report-page,
.report-page h1,
.report-page h2,
.report-page h3,
.report-page h4,
.report-page h5,
.report-page strong,
.report-page span,
.report-page td,
.report-page th,
.report-page p,
.report-page li {
  color: #1a1a1a;
}

/* Muted/secondary text */
.report-page .trn-eyebrow,
.report-page .sch-subtitle,
.report-page .match-meta-row,
.report-page .match-meta-divider,
.report-page .match-stat-lbl,
.report-page .plr-meta-row span,
.report-page .plr-stat-lbl,
.report-page .concl-eyebrow,
.report-page .stamp-verified,
.report-page .match-tl-detail,
.report-page .plr-attrib-label,
.report-page .plr-insight-label,
.report-page .cp-stat-label,
.report-page .ts-record-lbl,
.report-page .ts-stat-lbl,
.report-page .ts-perf-cat,
.report-page .ts-standing-sub,
.report-page .sch-insight-label,
.report-page .concl-summary-label {
  color: #666 !important;
}

/* Panel/card backgrounds — light gray */
.report-page .trn-highlight-card,
.report-page .trn-intel-card,
.report-page .trn-group-card,
.report-page .sch-stat-cell,
.report-page .sch-radar-panel,
.report-page .sch-insights-panel,
.report-page .sch-style-bars,
.report-page .sch-tag-block,
.report-page .sch-compact-tag-block,
.report-page .sch-compact-player,
.report-page .sch-journey-compact,
.report-page .match-timeline-event,
.report-page .match-stats-panel,
.report-page .match-insight-box,
.report-page .match-pso-section,
.report-page .plr-stat-cell,
.report-page .plr-radar-panel,
.report-page .plr-attributes-panel,
.report-page .plr-archetype-panel,
.report-page .plr-insight-panel,
.report-page .concl-box,
.report-page .concl-summary-box,
.report-page .ts-stat-box,
.report-page .ts-section,
.report-page .cp-stat-box {
  background: #f5f5f7 !important;
  border-color: #e0e0e0 !important;
}

/* Highlight card category colors (on light theme) */
.report-page .trn-highlight-card.champions {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), #f5f5f7) !important;
  border-color: rgba(255, 215, 0, 0.45) !important;
}
.report-page .trn-highlight-card.runner-up {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), #f5f5f7) !important;
  border-color: rgba(192, 192, 192, 0.4) !important;
}
.report-page .trn-highlight-card.second-runner-up {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), #f5f5f7) !important;
  border-color: rgba(205, 127, 50, 0.4) !important;
}
.report-page .trn-highlight-card.top-scorer {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), #f5f5f7) !important;
  border-color: rgba(0, 229, 255, 0.35) !important;
}
.report-page .trn-highlight-card.best-player {
  background: linear-gradient(135deg, rgba(163, 71, 255, 0.08), #f5f5f7) !important;
  border-color: rgba(163, 71, 255, 0.35) !important;
}
.report-page .trn-highlight-card.best-keeper {
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.08), #f5f5f7) !important;
  border-color: rgba(0, 255, 102, 0.35) !important;
}

/* Inner cards inside panels — white */
.report-page .match-stat-item:not(.intensity),
.report-page .match-performer-card {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}

/* Borders */
.report-page .report-header,
.report-page .plr-match-log table,
.report-page .plr-match-log th,
.report-page .plr-match-log td {
  border-color: #e0e0e0 !important;
}

/* Table headers and rows */
.report-page table thead th {
  background: #f0f0f2 !important;
  color: #555 !important;
  border-color: #e0e0e0 !important;
}

.report-page table tbody td {
  border-color: #e8e8e8 !important;
  color: #1a1a1a !important;
}

.report-page table tbody tr:nth-child(even) {
  background: #fafafa !important;
}

/* Accent colors stay vibrant on white */
.report-page .trn-hero-title,
.report-page .sch-school-name,
.report-page .plr-name,
.report-page .match-score-nums,
.report-page .concl-hero-title,
.report-page .ts-school-name {
  color: #1a1a1a !important;
}

/* Accent brand / links */
.report-page .sch-compact-ovr,
.report-page .match-perf-rating,
.report-page .plr-ovr-val,
.report-page .ts-perf-val,
.report-page .sch-stat-val {
  color: #5a7ced !important;
}

/* OVR block — always dark bg, text must always be white */
.report-page .plr-ovr-num {
  color: #ffffff !important;
}
.report-page .plr-ovr-label {
  color: rgba(255, 255, 255, 0.6) !important;
}
/* Matches badge — stays subtle on white page, just needs readable text */
.report-page .plr-matches-badge {
  color: #555555 !important;
  background: #f0f0f3 !important;
  border-color: #d8d8dc !important;
}

/* Result badges — lighter backgrounds on white */
.report-page .match-result-badge.win {
  background: rgba(0, 201, 81, 0.1) !important;
  color: #00873a !important;
}
.report-page .match-result-badge.loss {
  background: rgba(247, 60, 47, 0.1) !important;
  color: #c42b20 !important;
}

/* Match hero area */
.report-page .match-hero {
  background: #f5f5f7 !important;
  border-color: #e0e0e0 !important;
}

/* Journey nodes */
.report-page .ts-journey-circle.win {
  background: rgba(0, 201, 81, 0.12) !important;
  color: #00873a !important;
  border-color: rgba(0, 201, 81, 0.3) !important;
}
.report-page .ts-journey-circle.loss {
  background: rgba(247, 60, 47, 0.12) !important;
  color: #c42b20 !important;
  border-color: rgba(247, 60, 47, 0.3) !important;
}

/* Tags */
.report-page .ts-tag.green,
.report-page .sch-tag.green,
.report-page .sch-compact-tag.green {
  background: rgba(0, 201, 81, 0.08) !important;
  color: #00873a !important;
  border-color: rgba(0, 201, 81, 0.2) !important;
}
.report-page .sch-compact-tag.amber {
  background: rgba(247, 60, 47, 0.08) !important;
  color: #c42b20 !important;
  border-color: rgba(247, 60, 47, 0.2) !important;
}
.report-page .ts-tag.mute,
.report-page .sch-tag.amber,
.report-page .sch-compact-tag.amber {
  background: rgba(255, 165, 0, 0.08) !important;
  color: #b36b00 !important;
  border-color: rgba(255, 165, 0, 0.2) !important;
}

/* Timeline event icons/lines — light theme */
.report-page .match-timeline-event {
  background: transparent !important;
  border-color: #e0e0e0 !important;
  border-left-color: #d0d0d0 !important;
}
.report-page .match-timeline-event.scoring {
  background: linear-gradient(
    135deg,
    rgba(0, 201, 81, 0.04),
    transparent
  ) !important;
  border-left-color: #00a844 !important;
}
.report-page .match-timeline-event.assist-cat {
  background: linear-gradient(
    135deg,
    rgba(90, 124, 237, 0.02),
    transparent
  ) !important;
  border-left-color: #8ea5f0 !important;
}
.report-page .match-timeline-event.card {
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.06),
    transparent
  ) !important;
  border-left-color: #c9a020 !important;
}
.report-page .match-timeline-event.red-card {
  background: linear-gradient(
    135deg,
    rgba(192, 57, 43, 0.05),
    transparent
  ) !important;
  border-left-color: #b03227 !important;
}
.report-page .match-timeline-event.own-goal {
  background: linear-gradient(
    135deg,
    rgba(247, 60, 47, 0.04),
    transparent
  ) !important;
  border-left-color: #c42b20 !important;
}
.report-page .match-timeline-event.foul-cat {
  background: linear-gradient(
    135deg,
    rgba(254, 153, 0, 0.03),
    transparent
  ) !important;
  border-left-color: #cc7a00 !important;
}
.report-page .match-timeline-event.opp-neutral {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.02),
    transparent
  ) !important;
  border-left-color: #c0c0c0 !important;
  opacity: 0.8;
}
.report-page .match-timeline-event.phase {
  opacity: 0.45;
  background: transparent !important;
}

.report-page .match-tl-label {
  color: #555 !important;
}
.report-page .match-timeline-event.scoring .match-tl-label {
  color: #00873a !important;
}
.report-page .match-timeline-event.card .match-tl-label {
  color: #b8941f !important;
}
.report-page .match-timeline-event.red-card .match-tl-label {
  color: #a02b20 !important;
}
.report-page .match-timeline-event.own-goal .match-tl-label {
  color: #c42b20 !important;
}
.report-page .match-timeline-event.opp-neutral .match-tl-label {
  color: #888 !important;
}
.report-page .match-tl-player {
  color: #1a1a1a !important;
}
.report-page .match-tl-detail {
  color: #777 !important;
}
.report-page .match-tl-time {
  color: #5a7ced !important;
}

/* Insight boxes */
.report-page .match-insight-inner {
  background: #f5f5f7 !important;
  border-color: #e0e0e0 !important;
}

/* Player card back — stays dark (it's the MadSportzCard) — exact Flutter colors */
.report-page .plr-card-back {
  /* Restore dark-theme CSS variables inside the card so child elements get correct colors */
  --bg-obsidian: #101316; /* gray900 */
  --bg-panel: #16181a; /* gray850 */
  --text-high: #ffffff; /* gray100 */
  --text-medium: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.6);
  --accent-brand: #5a7ced; /* brand500 */
  --accent-neon: #5a7ced;
  --accent-cyan: #5a7ced;
  --grid-line: #2d3750; /* gray700 */

  background: #16181a !important;
  border-color: #2d3750 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
.report-page .plr-card-back span,
.report-page .plr-card-back strong,
.report-page .plr-card-back td,
.report-page .plr-card-back th,
.report-page .plr-card-back p,
.report-page .plr-card-back li {
  color: inherit !important;
}
/* Card back specific text overrides */
.report-page .plr-card-back .card-back-top-row {
  color: #5a7ced !important; /* brand500 */
}
.report-page .plr-card-back .back-table-row span {
  color: rgba(255, 255, 255, 0.6) !important;
}
.report-page .plr-card-back .back-table-row strong {
  color: #5a7ced !important;
}
.report-page .plr-card-back .scout-title {
  color: rgba(255, 255, 255, 0.6) !important;
}
.report-page .plr-card-back .scout-list li {
  color: #ffffff !important;
}
.report-page .plr-card-back .scout-list li::before {
  color: #5a7ced !important;
}
.report-page .plr-card-back .scout-list.dev-list li::before {
  color: rgba(255, 255, 255, 0.6) !important;
}
.report-page .plr-card-back .stamp-verified {
  color: rgba(255, 255, 255, 0.6) !important;
}
.report-page .plr-card-back .stamp-name {
  color: #ffffff !important;
}
.report-page .plr-card-back .stamp-id {
  color: #5a7ced !important;
}
.report-page .plr-card-back .card-back-analysis-divider {
  background: rgba(255, 255, 255, 0.07) !important;
}
.report-page .plr-card-back .card-back-footer {
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}

/* NS Score badge on player header */
.report-page .plr-ovr-badge {
  background: #5a7ced !important;
  color: #ffffff !important;
}

/* Radar chart canvas needs no background override */

/* Conclusion page signature */
.report-page .concl-sign-name {
  color: #1a1a1a !important;
}
.report-page .concl-sign-title {
  color: #666 !important;
}

.report-page .cover-brand {
  color: #5a7ced !important;
}

.report-page .cover-tournament {
  color: #1a1a1a !important;
}

.report-page .cover-tagline,
.report-page .cover-meta,
.report-page .cover-footer-text span {
  color: #666 !important;
}

.report-page .cover-category {
  color: #5a7ced !important;
}

.report-page .cover-report-for {
  color: #666 !important;
}

.report-page .cover-school-name {
  color: #1a1a1a !important;
}

/* NS Intro page — redesigned light theme overrides */
.report-page .nsi-hero {
  background: linear-gradient(
    135deg,
    rgba(90, 124, 237, 0.03),
    rgba(189, 210, 253, 0.01)
  ) !important;
  border-color: rgba(189, 210, 253, 0.08) !important;
}

.report-page .nsi-pillar,
.report-page .nsi-compare-card,
.report-page .nsi-flow,
.report-page .nsi-outcome {
  background: #f5f5f7 !important;
  border-color: #e0e0e0 !important;
}

.report-page .nsi-pillar {
  border-left-color: #5a7ced !important;
}

.report-page .nsi-compare-card.without {
  background: linear-gradient(
    135deg,
    rgba(247, 60, 47, 0.02),
    #f5f5f7
  ) !important;
  border-left-color: #f73c2f !important;
}

.report-page .nsi-compare-card.with {
  background: linear-gradient(
    135deg,
    rgba(0, 201, 81, 0.02),
    #f5f5f7
  ) !important;
  border-left-color: #00c951 !important;
}

.report-page .nsi-pillar-icon-wrap {
  background: rgba(90, 124, 237, 0.06) !important;
}

.report-page .nsi-flow-num {
  background: rgba(90, 124, 237, 0.06) !important;
  border-color: rgba(90, 124, 237, 0.2) !important;
}

.report-page .nsi-cta-inner {
  background: linear-gradient(
    135deg,
    rgba(90, 124, 237, 0.06),
    rgba(90, 124, 237, 0.02)
  ) !important;
  border-color: rgba(90, 124, 237, 0.2) !important;
}

.report-page .nsi-hero-badge {
  background: rgba(90, 124, 237, 0.05) !important;
  border-color: rgba(90, 124, 237, 0.18) !important;
}

.report-page .nsi-section-badge {
  background: rgba(90, 124, 237, 0.05) !important;
  border-color: rgba(90, 124, 237, 0.15) !important;
}

.report-page .nsi-hero-subtitle,
.report-page .nsi-body,
.report-page .nsi-pillar-desc,
.report-page .nsi-flow-desc,
.report-page .nsi-outcome-desc,
.report-page .nsi-cta-body,
.report-page .nsi-compare-list li {
  color: #666 !important;
}

.report-page .nsi-hero-stat-lbl,
.report-page .nsi-section-title {
  color: #555 !important;
}

.report-page .nsi-pillar-title,
.report-page .nsi-flow-title,
.report-page .nsi-outcome-title,
.report-page .nsi-cta-title,
.report-page .nsi-hero-stat-num,
.report-page .nsi-cta-contact {
  color: #1a1a1a !important;
}

.report-page .nsi-hero-stat.accent .nsi-hero-stat-num,
.report-page .nsi-hero-badge,
.report-page .nsi-section-badge,
.report-page .nsi-pillar-icon,
.report-page .nsi-flow-num,
.report-page .nsi-flow-arrow,
.report-page .nsi-cta-contact-icon {
  color: #5a7ced !important;
}

.report-page .nsi-compare-card.without .nsi-compare-label {
  color: #c42b20 !important;
}

.report-page .nsi-compare-card.with .nsi-compare-label {
  color: #00873a !important;
}

/* ==========================================================================
   CARD FRONT — MadSportsCard Shield (exact Flutter colors — NEVER changes)
   AppPalette: gray100=#FFFFFF, brand500=#5A7CED, gray900=#101316
   ========================================================================== */

/* Shield card lives inside .plr-card-front — force white text since
   .report-page generic overrides set color:#1A1A1A on all spans/strong/etc. */
.report-page .plr-card-front {
  color: #ffffff !important; /* gray100 */
}

/* Silhouette icon — 50% white (matches Flutter: AppPalette.gray100.withValues(alpha: 0.5)) */
.report-page .plr-card-front .mad-silhouette svg {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* NS Score big number — full white (AppPalette.gray100) */
.report-page .plr-card-front .mad-ovr-val {
  color: #ffffff !important;
}
/* NS Score label — 60% white (AppPalette.gray100.withValues(alpha: 0.6)) */
.report-page .plr-card-front .mad-ovr-lbl {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* MP stat number — full white */
.report-page .plr-card-front .mad-stat-big {
  color: #ffffff !important;
}
/* MP/WR labels — 60% white */
.report-page .plr-card-front .mad-stat-lbl-sm {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Name plate — transparent background, white text */
.report-page .plr-card-front .mad-nameplate {
  background: transparent !important;
}
.report-page .plr-card-front .mad-nameplate span {
  color: #ffffff !important;
}

/* Stats grid — labels 70% white, numbers full white (matching Flutter) */
.report-page .plr-card-front .mad-stat-key {
  color: rgba(255, 255, 255, 0.7) !important;
}
.report-page .plr-card-front .mad-stat-num {
  color: #ffffff !important;
}
/* Divider between stat columns — 20% white */
.report-page .plr-card-front .mad-stat-vdivider {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Extracted from team-select.html */
      /* ─── Reset & Base ─── */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Inter", sans-serif;
        background: #0a0c10;
        color: #e0e4ec;
        min-height: 100vh;
        overflow-x: hidden;
      }

      /* ─── Animated Background ─── */
      .bg-glow {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
      }
      .bg-glow::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        top: -100px;
        left: -100px;
        background: radial-gradient(
          circle,
          rgba(90, 124, 237, 0.12) 0%,
          transparent 70%
        );
        animation: float 12s ease-in-out infinite;
      }
      .bg-glow::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        bottom: -80px;
        right: -80px;
        background: radial-gradient(
          circle,
          rgba(215, 106, 72, 0.1) 0%,
          transparent 70%
        );
        animation: float 15s ease-in-out infinite reverse;
      }
      @keyframes float {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
        }
        33% {
          transform: translate(60px, -40px) scale(1.1);
        }
        66% {
          transform: translate(-40px, 30px) scale(0.95);
        }
      }

      /* ─── Header ─── */
      .ts-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(10, 12, 16, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 16px 32px;
      }
      .ts-header-inner {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .ts-logo-area {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .ts-logo-area svg {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
      }
      .ts-logo-text h1 {
        font-family: "Outfit", sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        line-height: 1.1;
      }
      .ts-logo-text span {
        font-size: 11px;
        color: #6b7a90;
        font-weight: 500;
        letter-spacing: 0.3px;
      }
      .ts-header-right {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .ts-back-link {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #8e9bae;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        padding: 8px 16px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.25s ease;
      }
      .ts-back-link:hover {
        color: #fff;
        border-color: rgba(90, 124, 237, 0.4);
        background: rgba(90, 124, 237, 0.08);
      }

      /* ─── Main Content ─── */
      .ts-main {
        position: relative;
        z-index: 1;
        max-width: 1440px;
        margin: 0 auto;
        padding: 40px 32px 80px;
      }

      /* ─── Tournament Hero ─── */
      .ts-tournament-hero {
        text-align: center;
        margin-bottom: 48px;
      }
      .ts-tournament-hero .ts-eyebrow {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2.5px;
        color: #5a7ced;
        text-transform: uppercase;
        margin-bottom: 12px;
        padding: 6px 16px;
        background: rgba(90, 124, 237, 0.08);
        border-radius: 20px;
        border: 1px solid rgba(90, 124, 237, 0.15);
      }
      .ts-tournament-hero h2 {
        font-family: "Outfit", sans-serif;
        font-size: 32px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 8px;
        line-height: 1.2;
      }
      .ts-tournament-hero p {
        font-size: 15px;
        color: #6b7a90;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
      }
      .ts-tournament-stats {
        display: flex;
        justify-content: center;
        gap: 24px;
        margin-top: 24px;
        flex-wrap: wrap;
      }
      .ts-tournament-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 12px 20px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.06);
      }
      .ts-tournament-stat .stat-num {
        font-family: "Roboto Mono", monospace;
        font-size: 22px;
        font-weight: 700;
        color: #fff;
      }
      .ts-tournament-stat .stat-lbl {
        font-size: 11px;
        font-weight: 600;
        color: #6b7a90;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      .ts-tournament-stat.accent .stat-num {
        color: #5a7ced;
      }

      /* ─── Search & Filter Bar ─── */
      .ts-filter-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 32px;
        flex-wrap: wrap;
      }
      .ts-search-box {
        flex: 1;
        min-width: 260px;
        position: relative;
      }
      .ts-search-box input {
        width: 100%;
        padding: 12px 16px 12px 44px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        color: #e0e4ec;
        font-size: 14px;
        font-family: "Inter", sans-serif;
        outline: none;
        transition: all 0.25s ease;
      }
      .ts-search-box input::placeholder {
        color: #4a5568;
      }
      .ts-search-box input:focus {
        border-color: rgba(90, 124, 237, 0.5);
        background: rgba(90, 124, 237, 0.05);
        box-shadow: 0 0 0 3px rgba(90, 124, 237, 0.08);
      }
      .ts-search-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        color: #4a5568;
        pointer-events: none;
      }
      .ts-sort-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 12px 18px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        color: #8e9bae;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.25s ease;
        font-family: "Inter", sans-serif;
      }
      .ts-sort-btn:hover {
        color: #fff;
        border-color: rgba(90, 124, 237, 0.4);
        background: rgba(90, 124, 237, 0.06);
      }
      .ts-sort-btn.active {
        color: #5a7ced;
        border-color: rgba(90, 124, 237, 0.3);
        background: rgba(90, 124, 237, 0.08);
      }
      .ts-team-count {
        font-size: 13px;
        color: #6b7a90;
        font-weight: 500;
        white-space: nowrap;
      }

      /* ─── Team Grid ─── */
      .ts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 20px;
      }

      /* ─── Team Card ─── */
      .ts-team-card {
        position: relative;
        background: linear-gradient(
          145deg,
          rgba(20, 24, 32, 0.95) 0%,
          rgba(14, 17, 23, 0.95) 100%
        );
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        padding: 24px;
        cursor: pointer;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
      }
      .ts-team-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(90, 124, 237, 0.06) 0%,
          transparent 60%
        );
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
        border-radius: 16px;
      }
      .ts-team-card:hover {
        border-color: rgba(90, 124, 237, 0.3);
        transform: translateY(-4px);
        box-shadow:
          0 16px 40px rgba(0, 0, 0, 0.3),
          0 0 60px rgba(90, 124, 237, 0.05);
      }
      .ts-team-card:hover::before {
        opacity: 1;
      }
      .ts-team-card:active {
        transform: translateY(-2px) scale(0.99);
      }

      /* Card rank badge */
      .ts-card-rank {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Roboto Mono", monospace;
        font-size: 12px;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #6b7a90;
      }
      .ts-team-card.champion .ts-card-rank {
        background: linear-gradient(
          135deg,
          rgba(212, 175, 55, 0.15),
          rgba(212, 175, 55, 0.05)
        );
        border-color: rgba(212, 175, 55, 0.3);
        color: #d4af37;
      }
      .ts-team-card.runner-up .ts-card-rank {
        background: linear-gradient(
          135deg,
          rgba(192, 192, 192, 0.12),
          rgba(192, 192, 192, 0.04)
        );
        border-color: rgba(192, 192, 192, 0.25);
        color: #c0c0c0;
      }

      /* Card header */
      .ts-card-header {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 16px;
        position: relative;
        z-index: 1;
      }
      .ts-card-crest {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(
          135deg,
          rgba(90, 124, 237, 0.12) 0%,
          rgba(90, 124, 237, 0.04) 100%
        );
        border: 1px solid rgba(90, 124, 237, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .ts-card-crest span {
        font-family: "Outfit", sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #5a7ced;
      }
      .ts-crest-logo {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 10px;
        padding: 2px;
      }
      .ts-card-info {
        flex: 1;
        min-width: 0;
        padding-right: 28px;
      }
      .ts-card-name {
        font-family: "Outfit", sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .ts-card-meta {
        font-size: 12px;
        color: #6b7a90;
        font-weight: 500;
      }

      /* Card achievement badge */
      .ts-card-badge {
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 6px;
        margin-top: 6px;
        position: relative;
        z-index: 1;
      }
      .ts-card-badge.champion-badge {
        background: linear-gradient(
          135deg,
          rgba(212, 175, 55, 0.15),
          rgba(212, 175, 55, 0.05)
        );
        border: 1px solid rgba(212, 175, 55, 0.25);
        color: #d4af37;
      }
      .ts-card-badge.runner-up-badge {
        background: linear-gradient(
          135deg,
          rgba(192, 192, 192, 0.12),
          rgba(192, 192, 192, 0.04)
        );
        border: 1px solid rgba(192, 192, 192, 0.2);
        color: #c0c0c0;
      }
      .ts-card-badge.semifinal-badge {
        background: rgba(90, 124, 237, 0.08);
        border: 1px solid rgba(90, 124, 237, 0.15);
        color: #5a7ced;
      }

      /* Card stats row */
      .ts-card-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 16px;
        position: relative;
        z-index: 1;
      }
      .ts-card-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 10px 4px;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.04);
      }
      .ts-card-stat .num {
        font-family: "Roboto Mono", monospace;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
      }
      .ts-card-stat .lbl {
        font-size: 10px;
        font-weight: 600;
        color: #4a5568;
        text-transform: uppercase;
        letter-spacing: 0.8px;
      }
      .ts-card-stat.win .num {
        color: #34d399;
      }
      .ts-card-stat.loss .num {
        color: #f87171;
      }
      .ts-card-stat.gd-pos .num {
        color: #34d399;
      }
      .ts-card-stat.gd-neg .num {
        color: #f87171;
      }

      /* Card bottom row */
      .ts-card-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: relative;
        z-index: 1;
      }
      .ts-card-attrs {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .ts-attr-pill {
        font-family: "Roboto Mono", monospace;
        font-size: 10px;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: #8e9bae;
      }
      .ts-card-arrow {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(90, 124, 237, 0.08);
        border: 1px solid rgba(90, 124, 237, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.25s ease;
      }
      .ts-team-card:hover .ts-card-arrow {
        background: rgba(90, 124, 237, 0.2);
        border-color: rgba(90, 124, 237, 0.4);
        transform: translateX(2px);
      }
      .ts-card-arrow svg {
        width: 16px;
        height: 16px;
        color: #5a7ced;
      }

      /* ─── Champion Glow Effect ─── */
      .ts-team-card.champion {
        border-color: rgba(212, 175, 55, 0.15);
      }
      .ts-team-card.champion::before {
        background: linear-gradient(
          135deg,
          rgba(212, 175, 55, 0.06) 0%,
          transparent 60%
        );
      }
      .ts-team-card.champion:hover {
        border-color: rgba(212, 175, 55, 0.35);
        box-shadow:
          0 16px 40px rgba(0, 0, 0, 0.3),
          0 0 60px rgba(212, 175, 55, 0.06);
      }

      /* ─── Empty State ─── */
      .ts-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 80px 40px;
      }
      .ts-empty-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        color: #2d3748;
      }
      .ts-empty h3 {
        font-family: "Outfit", sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: #4a5568;
        margin-bottom: 8px;
      }
      .ts-empty p {
        font-size: 14px;
        color: #3a4558;
      }

      /* ─── Report Overlay ─── */
      .ts-report-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(10, 12, 16, 0.92);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: none;
        overflow-y: auto;
      }
      .ts-report-overlay.active {
        display: block;
        animation: fadeIn 0.3s ease;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      .ts-report-toolbar {
        position: sticky;
        top: 0;
        z-index: 1010;
        background: rgba(10, 12, 16, 0.9);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 12px 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .ts-report-toolbar-left {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .ts-close-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        color: #8e9bae;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        font-family: "Inter", sans-serif;
        transition: all 0.2s ease;
      }
      .ts-close-btn:hover {
        color: #fff;
        background: rgba(255, 60, 60, 0.08);
        border-color: rgba(255, 60, 60, 0.2);
      }
      .ts-report-team-name {
        font-family: "Outfit", sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
      }
      .ts-report-toolbar-right {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .ts-export-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        font-family: "Inter", sans-serif;
        border: none;
        transition: all 0.2s ease;
      }
      .ts-export-btn.png {
        background: linear-gradient(135deg, #5a7ced, #4a6cd4);
        color: #fff;
      }
      .ts-export-btn.png:hover {
        background: linear-gradient(135deg, #6b8cff, #5a7ced);
        box-shadow: 0 4px 16px rgba(90, 124, 237, 0.3);
      }
      .ts-export-btn.pdf {
        background: linear-gradient(135deg, #d76a48, #b3512a);
        color: #fff;
      }
      .ts-export-btn.pdf:hover {
        box-shadow: 0 4px 16px rgba(215, 106, 72, 0.3);
      }
      .ts-report-body {
        max-width: 900px;
        margin: 0 auto;
        padding: 32px 16px 80px;
      }

      /* ─── Responsive ─── */
      @media (max-width: 768px) {
        .ts-main {
          padding: 24px 16px 60px;
        }
        .ts-grid {
          grid-template-columns: 1fr;
        }
        .ts-tournament-hero h2 {
          font-size: 24px;
        }
        .ts-header {
          padding: 12px 16px;
        }
        .ts-filter-bar {
          flex-direction: column;
        }
        .ts-search-box {
          min-width: 100%;
        }
        .ts-report-toolbar {
          padding: 12px 16px;
          flex-wrap: wrap;
          gap: 8px;
        }
      }

/* ==========================================================================
   TEAM REPORT UI STYLES (TOOLBAR & NAV)
   ========================================================================== */
.tr-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 12, 16, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tr-toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #8E9BAE;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.tr-back-btn:hover {
  color: #ffffff;
  border-color: rgba(90, 124, 237, 0.4);
  background: rgba(90, 124, 237, 0.1);
}
.tr-team-title {
  display: flex;
  flex-direction: column;
}
.tr-team-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}
.tr-team-subtitle {
  font-size: 11px;
  color: #6B7A90;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.tr-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tr-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(215, 106, 72, 0.1);
  border: 1px solid rgba(215, 106, 72, 0.2);
  border-radius: 8px;
  color: #D76A48;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.tr-export-btn:hover:not(:disabled) {
  background: #D76A48;
  color: #ffffff;
}
.tr-export-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Page Nav */
.tr-body {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.tr-page-nav {
  position: sticky;
  top: 73px; /* height of toolbar */
  width: 240px;
  height: calc(100vh - 73px);
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 12, 16, 0.5);
  padding: 24px 16px;
  display: flex; /* overridden by JS, but keeping flex direction */
  flex-direction: column;
  gap: 4px;
}
.tr-page-nav-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6B7A90;
  font-weight: 600;
  margin-bottom: 8px;
  padding-left: 12px;
}
.tr-page-pill {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: #8E9BAE;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.tr-page-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}
.tr-page-pill.team-pill {
  color: #A0B0E0;
}
.tr-page-pill.dnp-pill {
  opacity: 0.5;
  font-style: italic;
}

/* Report Paper */
.report-paper-container {
  flex: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0A0C10;
}



/* ==========================================================================
   LIGHT THEME OVERRIDES FOR TOURNAMENT REPORT (on-screen)
   ========================================================================== */
html:not(.dark) .tr-toolbar {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--border-subtle);
}
html:not(.dark) .tr-back-btn {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-high);
}
html:not(.dark) .tr-team-title .tr-team-name {
  color: var(--text-high) !important;
}
html:not(.dark) .tr-team-title .tr-team-subtitle {
  color: var(--text-muted) !important;
}

html:not(.dark) .ftr-team-card {
  background: var(--bg-panel) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-high);
}
html:not(.dark) .ftr-team-card::before {
  background: var(--bg-elevated);
}
html:not(.dark) .ftr-team-card:hover {
  border-color: var(--accent-brand) !important;
}

html:not(.dark) .ftr-card-rank {
  background: var(--bg-elevated);
  color: var(--text-muted);
}
html:not(.dark) .ftr-card-stats {
  border-top-color: var(--border-subtle);
}
html:not(.dark) .ftr-stat-box {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

html:not(.dark) .ftr-card-name,
html:not(.dark) .ftr-stat-val,
html:not(.dark) .ftr-hero h2,
html:not(.dark) .ftr-tournament-stat .stat-num {
  color: var(--text-high) !important;
}

html:not(.dark) .ftr-card-subtitle,
html:not(.dark) .ftr-stat-lbl,
html:not(.dark) .ftr-hero p,
html:not(.dark) .ftr-tournament-stat .stat-lbl,
html:not(.dark) .ftr-search-icon,
html:not(.dark) .ftr-search-input::placeholder {
  color: var(--text-muted) !important;
}

html:not(.dark) .ftr-search-wrapper {
  border-bottom-color: var(--border-subtle);
}
html:not(.dark) .ftr-search-input {
  color: var(--text-high);
}

html:not(.dark) .ftr-btn {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
  color: var(--text-muted);
}
html:not(.dark) .ftr-btn:hover {
  background: var(--bg-surface);
  color: var(--text-high);
}
html:not(.dark) .ftr-btn.active {
  background: rgba(90, 124, 237, 0.15);
  border-color: rgba(90, 124, 237, 0.4);
  color: var(--accent-brand);
}

/* ==========================================================================
   LIGHT THEME — Team Report page chrome (toolbar, sidebar, paper container)
   ========================================================================== */

/* Paper background — was #0A0C10 */
html:not(.dark) .report-paper-container {
  background: var(--bg-obsidian) !important; /* #f6f6f6 */
}

/* Page-nav sidebar — was rgba(10,12,16,0.5) */
html:not(.dark) .tr-page-nav {
  background: var(--bg-panel) !important;   /* #ffffff */
  border-right-color: var(--border-subtle) !important;
}
html:not(.dark) .tr-page-nav-label {
  color: var(--text-muted) !important;
}
html:not(.dark) .tr-page-pill {
  color: var(--text-medium, #444444) !important;
}
html:not(.dark) .tr-page-pill:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-high) !important;
}
html:not(.dark) .tr-page-pill.team-pill {
  color: var(--accent-brand) !important;
}

/* Back button */
html:not(.dark) .tr-back-btn {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
}
html:not(.dark) .tr-back-btn:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--accent-brand) !important;
  color: var(--accent-brand) !important;
}

/* Team name / subtitle in toolbar */
html:not(.dark) .tr-team-name {
  color: var(--text-high) !important;
}
html:not(.dark) .tr-team-subtitle {
  color: var(--text-muted) !important;
}