:root {
  color-scheme: dark;
  --bg: #080c11;
  --panel: #0d131a;
  --panel-2: #111922;
  --line: #22303d;
  --line-soft: #18232e;
  --text: #edf3f7;
  --muted: #81909f;
  --cyan: #3dd6d0;
  --cyan-soft: rgba(61, 214, 208, 0.14);
  --orange: #ff9b52;
  --orange-soft: rgba(255, 155, 82, 0.14);
  --red: #f06272;
  --green: #68d391;
  --tone-positive: #62e6a7;
  --tone-neutral: #ff9b52;
  --tone-negative: #f06c7d;
  --radius: 6px;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

button, input, select { font: inherit; }

button, select, input {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: #0b1118;
}

button { cursor: pointer; }

button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.topbar {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: #0a0f15;
}

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

.brand-mark {
  width: 19px;
  height: 19px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 18px rgba(61, 214, 208, 0.28);
}

.brand-mark::before, .brand-mark::after {
  content: "";
  position: absolute;
  background: var(--cyan);
}

.brand-mark::before { width: 7px; height: 2px; left: 4px; top: 7px; }
.brand-mark::after { width: 2px; height: 7px; left: 7px; top: 4px; }
.brand strong { display: block; font-size: 13px; letter-spacing: 1.4px; }
.brand span { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }

.product-switch { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: #070b10; }
.product-tab { min-width: 104px; padding: 7px 12px; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; transition: color 150ms ease, background 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.product-tab:hover { color: var(--text); }
.product-tab.active { background: #15202a; color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(61, 214, 208, 0.16); }
.product-tab:active { transform: scale(0.97); }

.service-state {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #66717b;
}

.service-state.online .state-dot { background: var(--green); box-shadow: 0 0 10px rgba(104, 211, 145, 0.55); }
.service-state.offline .state-dot { background: var(--red); }

.workspace {
  height: calc(100vh - 58px);
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
}

.library {
  min-width: 0;
  border-right: 1px solid var(--line);
  background: #0a1016;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.import-panel { padding: 20px 18px 15px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.section-heading h1 { margin: 3px 0 0; font-size: 19px; letter-spacing: 0; }
.eyebrow { color: var(--cyan); font: 600 10px/1.2 "Roboto Mono", Consolas, monospace; letter-spacing: 1.1px; }
.match-count { color: var(--muted); font: 600 28px/1 "Roboto Mono", Consolas, monospace; }

.import-form { margin-top: 17px; }
.import-form label, .player-switcher label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 7px; }
.input-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 7px; }
.input-row input { width: 100%; min-width: 0; padding: 10px 11px; font-size: 12px; }
.input-row button { border-color: rgba(61, 214, 208, 0.55); background: var(--cyan); color: #031110; font-weight: 700; }
.input-row button:disabled { opacity: 0.55; cursor: wait; }

.player-switcher { margin-top: 13px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 7px; }
.player-switcher label { grid-column: 1 / -1; margin-bottom: -1px; }
.player-switcher select { min-width: 0; padding: 8px; }
.icon-button { width: 34px; font-size: 18px; color: var(--cyan); }

.list-toolbar {
  height: 39px;
  flex: 0 0 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
}

.match-list { min-height: 0; flex: 1; overflow-y: auto; padding: 8px; }
.list-empty { min-height: 170px; display: grid; place-content: center; gap: 7px; padding: 24px; text-align: center; color: var(--muted); }
.list-empty strong { color: var(--text); font-size: 14px; }
.list-empty span { font-size: 12px; line-height: 1.6; }

.match-item {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 11px 10px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease;
}

.match-item:hover { background: var(--panel-2); }
.match-item.active { border-color: rgba(61, 214, 208, 0.45); background: var(--cyan-soft); }
.map-code { display: grid; place-content: center; width: 42px; height: 42px; background: #131d27; color: var(--cyan); font: 700 10px/1 monospace; }
.match-copy { min-width: 0; }
.match-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.match-item-meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.match-copy .match-time { display: block; color: var(--muted); font: 11px/1.2 "Roboto Mono", Consolas, monospace; }
.match-kind { display: inline-flex; align-items: center; padding: 2px 5px; border: 1px solid var(--line); font: 700 8px/1 "Roboto Mono", Consolas, monospace; letter-spacing: 0; white-space: nowrap; }
.match-kind.friendly { border-color: rgba(255, 155, 82, 0.38); color: #ffc293; background: rgba(255, 155, 82, 0.09); }
.participant-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.participant-tag { display: inline-flex; min-width: 0; padding: 3px 5px; border: 1px solid var(--line); color: #aeb9c3; background: rgba(255, 255, 255, 0.025); font: 600 9px/1 "Roboto Mono", Consolas, monospace; }
.participant-tag.t { border-color: rgba(255, 155, 82, 0.3); color: #ffc293; background: rgba(255, 155, 82, 0.08); }
.participant-tag.ct { border-color: rgba(61, 214, 208, 0.3); color: #8ce9e5; background: rgba(61, 214, 208, 0.08); }
.participant-tag.tracked { color: #b9c5cf; }
.status-pill { padding: 4px 6px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; white-space: nowrap; }
.status-pill.ready { border-color: rgba(104, 211, 145, 0.4); color: var(--green); }
.status-pill.pending { border-color: rgba(255, 155, 82, 0.42); color: var(--orange); }
.status-pill.failed { border-color: rgba(240, 98, 114, 0.42); color: var(--red); }

.replay-shell { min-width: 0; min-height: 0; background: #080c11; }
.empty-stage { height: 100%; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.empty-stage h2 { margin: 22px 0 8px; font-size: 20px; }
.empty-stage p { max-width: 480px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.empty-radar { position: relative; width: 120px; height: 120px; border: 1px solid #25323e; border-radius: 50%; }
.empty-radar::before, .empty-radar::after { content: ""; position: absolute; inset: 19px; border: 1px solid #1c2832; border-radius: 50%; }
.empty-radar::after { inset: 42px; }
.empty-radar span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.empty-radar span:nth-child(1) { top: 28px; left: 66px; }
.empty-radar span:nth-child(2) { top: 73px; left: 35px; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.empty-radar span:nth-child(3) { top: 61px; left: 83px; }

.replay-view { height: 100%; display: grid; grid-template-rows: 68px minmax(0, 1fr) 80px; }
.replay-header { display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); align-items: center; padding: 0 20px; border-bottom: 1px solid var(--line); background: #0a1016; }
.replay-header h2 { margin: 3px 0 0; font-size: 16px; }
.scoreboard { display: flex; align-items: center; gap: 13px; font-family: "Roboto Mono", Consolas, monospace; }
.team { display: flex; align-items: baseline; gap: 9px; }
.team span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.team strong { font-size: 24px; }
.team-t strong { color: var(--orange); }
.team-ct strong { color: var(--cyan); }
.score-divider { color: #5b6874; }
.match-meta { justify-self: end; display: flex; gap: 8px; }
.match-meta span { border: 1px solid var(--line); padding: 5px 7px; color: var(--muted); font: 10px/1 monospace; }

.replay-grid {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #05080b;
}

.team-panel { position: absolute; z-index: 4; top: 14px; bottom: 14px; width: var(--roster-width, 210px); min-width: 0; min-height: 0; display: grid; grid-template-rows: 58px minmax(0, 1fr); overflow: hidden; background: rgba(10, 16, 22, 0.94); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34); backdrop-filter: blur(10px); }
.team-panel-t { border-right: 1px solid rgba(255, 155, 82, 0.22); background: linear-gradient(135deg, rgba(128, 100, 31, 0.17), #0a1016 42%); }
.team-panel-ct { border-left: 1px solid rgba(61, 214, 208, 0.22); background: linear-gradient(225deg, rgba(30, 107, 130, 0.18), #0a1016 42%); }
.team-panel-t { left: var(--roster-inset, 14px); }
.team-panel-ct { right: var(--roster-inset, 14px); }
.team-panel-heading { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 3px 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.team-panel-heading .team-side { color: var(--muted); font: 700 8px/1 "Roboto Mono", Consolas, monospace; letter-spacing: 1px; }
.team-panel-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.team-panel-heading span:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 700 9px/1 "Roboto Mono", Consolas, monospace; }
.team-panel-t .team-panel-heading span:last-child { color: #e8c76c; }
.team-panel-ct .team-panel-heading { text-align: right; }
.team-panel-ct .team-panel-heading span:last-child { grid-column: 1; color: #8de5ec; }
.team-panel-ct .team-panel-heading .team-side, .team-panel-ct .team-panel-heading strong { grid-column: 2; }

.roster { min-height: 0; display: grid; grid-template-rows: repeat(5, minmax(72px, 1fr)); grid-auto-rows: minmax(72px, 1fr); gap: 4px; overflow-y: auto; padding: 6px; }
.roster-row { min-width: 0; min-height: 72px; display: grid; grid-template-rows: auto minmax(28px, 1fr) 12px; align-content: stretch; gap: 1px; overflow: hidden; padding: 4px 7px 3px; border: 1px solid transparent; font-size: 10px; transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1), filter 150ms cubic-bezier(0.23, 1, 0.32, 1); }
.roster-row.t { border-left-color: rgba(255, 185, 80, 0.7); background: linear-gradient(90deg, rgba(132, 105, 29, 0.38), rgba(27, 29, 24, 0.82)); }
.roster-row.ct { border-right-color: rgba(85, 207, 229, 0.72); background: linear-gradient(270deg, rgba(29, 100, 128, 0.4), rgba(20, 27, 33, 0.84)); }
.roster-row.dead { opacity: 0.38; filter: grayscale(0.85); }
.roster-topline { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 6px; }
.roster-topline .player-slot { grid-column: 1; grid-row: 1 / span 2; }
.roster-topline .roster-name { grid-column: 2; grid-row: 1; }
.roster-topline .roster-money { grid-column: 3; grid-row: 1; }
.roster-row.ct .player-slot { grid-column: 3; grid-row: 1 / span 2; }
.roster-row.ct .roster-name { grid-column: 2; grid-row: 1; text-align: right; }
.roster-row.ct .roster-money { grid-column: 1; grid-row: 1; text-align: left; }
.player-slot { display: grid; place-content: center; width: 18px; height: 18px; border: 1px solid currentColor; color: #d5b955; font: 700 9px/1 "Roboto Mono", Consolas, monospace; }
.roster-row.ct .player-slot { color: #78d5e3; }
.roster-name { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.roster-money { color: #9aa8b5; font: 9px/1 "Roboto Mono", Consolas, monospace; }
.roster-kd { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: baseline; gap: 3px; color: #73818c; font: 700 11px/1 "Roboto Mono", Consolas, monospace; }
.roster-row.ct .roster-kd { grid-column: 1 / 3; justify-self: end; }
.roster-kd strong { font-size: 12px; }
.roster-kd small { color: #8b99a4; font-size: 9px; }
.roster-kd i { color: #4f5c66; font-style: normal; }
.roster-row.t .kills-value { color: #e8c76c; }
.roster-row.ct .kills-value { color: #8de5ec; }
.deaths-value { color: #d78991; }
.roster-combat { min-width: 0; min-height: 30px; display: grid; grid-template-columns: 44px minmax(44px, 1fr) 40px; grid-template-rows: minmax(18px, 1fr) auto; grid-template-areas: "hp weapon ammo" "armor weapon ammo"; align-items: center; align-self: stretch; gap: 1px 4px; }
.roster-row.ct .roster-combat { grid-template-columns: 40px minmax(44px, 1fr) 44px; grid-template-areas: "ammo weapon hp" "ammo weapon armor"; }
.hp-value { grid-area: hp; }
.armor-block { grid-area: armor; }
.weapon-block { grid-area: weapon; }
.weapon-ammo { grid-area: ammo; }
.roster-row.ct .hp-value { text-align: right; }
.roster-row.ct .weapon-ammo { text-align: left; }
.hp-value { align-self: end; color: #f1f6f8; font: 800 21px/1 "Roboto Mono", Consolas, monospace; }
.roster-row.dead .hp-value { color: #c8d0d5; }
.armor-block { min-width: 0; align-self: start; display: inline-flex; align-items: center; gap: 3px; color: #9aabb7; font: 700 9px/1 "Roboto Mono", Consolas, monospace; }
.armor-icon { width: 12px; height: 12px; }
.weapon-block { min-width: 0; display: grid; place-items: center; }
.weapon-icon { width: min(76px, 100%); height: 26px; color: #e2cc7b; }
.roster-row.ct .weapon-icon { color: #a8e7ef; }
.active-weapon { min-width: 0; max-width: 100%; overflow: hidden; color: #dce7ed; text-overflow: ellipsis; white-space: nowrap; font: 700 9px/1.2 "Roboto Mono", Consolas, monospace; }
.weapon-ammo { color: #84929e; font: 9px/1 "Roboto Mono", Consolas, monospace; white-space: nowrap; }
.roster-loadout { min-width: 0; display: flex; align-items: center; justify-content: space-between; align-self: end; gap: 5px; height: 12px; overflow: hidden; }
.roster-row.ct .roster-loadout { flex-direction: row-reverse; }
.equipment-list, .utility-list { min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.utility-list { justify-content: flex-end; }
.loadout-icon, .weapon-icon {
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}
.loadout-icon { width: 11px; height: 11px; color: #b5c1c9; }
.loadout-icon.bomb { color: #ff8c9a; }
.loadout-icon.defuse { color: #8de5ec; }
.loadout-icon.helmet { color: #b9c6cf; }
.loadout-icon.flashed, .loadout-icon.flash { color: #ffe28c; }
.loadout-icon.smoke { color: #aeb8bf; }
.loadout-icon.he { color: #f2a56f; }
.loadout-icon.fire { color: #ff854c; }
.loadout-icon.decoy { color: #a9b8c3; }

@media (min-width: 1101px) and (min-height: 800px) {
  .team-panel { grid-template-rows: 64px minmax(0, 1fr); }
  .team-panel-heading { padding: 11px 13px; }
  .team-panel-heading strong { font-size: 14px; }
  .team-panel-heading span:last-child { font-size: 10px; }
  .roster { gap: 5px; padding: 7px; }
  .roster-row { grid-template-rows: auto minmax(58px, 1fr) auto; gap: 7px; padding: 12px 12px 10px; }
  .roster-topline { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 3px 8px; }
  .player-slot { width: 22px; height: 22px; font-size: 10px; }
  .roster-name { font-size: 16px; }
  .roster-money { font-size: 11px; }
  .roster-kd { gap: 4px; font-size: 13px; }
  .roster-kd strong { font-size: 15px; }
  .roster-kd small { font-size: 10px; }
  .roster-combat { min-height: 58px; grid-template-columns: 52px minmax(64px, 1fr) 42px; grid-template-rows: minmax(30px, 1fr) auto; gap: 2px 4px; }
  .roster-row.ct .roster-combat { grid-template-columns: 42px minmax(64px, 1fr) 52px; }
  .hp-value { font-size: 29px; }
  .armor-block { gap: 4px; font-size: 11px; }
  .armor-icon { width: 14px; height: 14px; }
  .weapon-icon { width: min(92px, 100%); height: 40px; }
  .weapon-ammo { font-size: 10px; }
  .roster-loadout { height: 21px; }
  .equipment-list, .utility-list { gap: 5px; }
  .loadout-icon { width: 17px; height: 17px; }
}

.map-stage { min-width: 0; min-height: 0; position: relative; grid-column: 1; overflow: hidden; background-color: #05080b; background-image: linear-gradient(rgba(44, 62, 78, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(44, 62, 78, 0.1) 1px, transparent 1px); background-size: 24px 24px; }
.map-stage canvas { display: block; width: 100%; height: 100%; }
.map-loading { position: absolute; z-index: 5; inset: 0; display: grid; place-content: center; color: var(--muted); font-size: 12px; background: rgba(5, 8, 11, 0.74); }
.round-badge, .clock { position: absolute; z-index: 3; top: 14px; border: 1px solid var(--line); background: rgba(7, 11, 16, 0.86); backdrop-filter: blur(8px); font: 700 12px/1 monospace; }
.round-badge { left: 14px; padding: 8px 9px; color: var(--cyan); }
.clock { left: 50%; padding: 8px 10px; transform: translateX(-50%); }
.event-overlay { position: absolute; z-index: 3; top: 56px; right: calc(var(--map-left, 0px) + 14px); width: min(360px, 36%); pointer-events: none; }
.event-overlay-heading { display: flex; justify-content: flex-end; align-items: center; gap: 7px; margin-bottom: 6px; color: #8d9ba7; font: 700 8px/1 "Roboto Mono", Consolas, monospace; letter-spacing: 0.8px; }
.event-overlay-heading strong { color: #c5d0d7; font-size: 9px; }
.event-feed { display: grid; gap: 4px; }
.event-item { min-width: 0; display: grid; justify-items: end; gap: 4px; padding: 6px 8px; border-right: 2px solid #344454; background: rgba(8, 13, 18, 0.82); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); font-size: 9px; }
.event-item.frag { border-color: var(--red); }
.event-item.grenade { border-color: var(--orange); }
.event-item.bomb { border-color: var(--cyan); }
.event-time { color: #71808c; font: 8px/1 "Roboto Mono", Consolas, monospace; }
.event-line { min-width: 0; max-width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.event-line strong { min-width: 0; overflow: hidden; color: #dbe4e9; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.event-player.t { color: #f0cd73; }
.event-player.ct { color: #91e1ea; }
.event-line .loadout-icon { width: 14px; height: 14px; }
.event-line .event-weapon-icon { width: 42px; height: 14px; color: #d9e1e5; }
.event-line .headshot-icon { width: 11px; height: 11px; color: #ff8b99; }
.event-weapon-label { color: #aab7c1; font: 8px/1 "Roboto Mono", Consolas, monospace; }
.event-empty { padding: 8px; color: var(--muted); background: rgba(8, 13, 18, 0.66); text-align: right; font-size: 10px; }

.transport { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 12px 18px; border-top: 1px solid var(--line); background: #0a1016; }
.transport-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.playback-controls { display: flex; align-items: center; gap: 6px; }
.play-button { width: 44px; height: 44px; border-color: rgba(61, 214, 208, 0.55); background: var(--cyan); color: #06110f; font-size: 16px; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.play-button:active { transform: scale(0.97); }
.round-nav-button { width: 36px; height: 44px; padding: 0; border-color: #2a3a47; background: #101821; color: #b8c6cf; font-size: 17px; transition: border-color 140ms ease, color 140ms ease, background 140ms ease; }
.round-nav-button:hover:not(:disabled) { border-color: rgba(61, 214, 208, 0.58); background: #14212b; color: var(--cyan); }
.round-nav-button:disabled { opacity: 0.28; cursor: default; }
.timeline-wrap { min-width: 0; }
.timeline-wrap input { width: 100%; accent-color: var(--cyan); }
.timeline-meta { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted); font: 10px/1 monospace; }
.transport-options { display: grid; grid-template-columns: auto 86px auto 72px; gap: 7px; align-items: center; }
.transport-options label { color: var(--muted); font-size: 10px; }
.transport-options select { padding: 7px; font-size: 11px; }

.analytics-shell { height: calc(100vh - 58px); overflow-y: auto; padding: 34px clamp(24px, 4vw, 72px) 64px; background: radial-gradient(circle at 18% 0%, rgba(61, 214, 208, 0.07), transparent 32%), var(--bg); }
.analytics-header { max-width: 1680px; margin: 0 auto 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.analytics-header h1 { margin: 6px 0 5px; font-size: clamp(25px, 3vw, 40px); letter-spacing: 0; }
.analytics-header p { margin: 0; color: var(--muted); font-size: 13px; }
.window-switch { display: flex; gap: 3px; flex: 0 0 auto; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: #090e14; }
.window-switch button { min-width: 62px; padding: 8px 12px; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; transition: color 150ms ease, background 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.window-switch button:hover { color: var(--text); }
.window-switch button.active { background: var(--cyan-soft); color: var(--cyan); }
.window-switch button:active { transform: scale(0.97); }

.analytics-overview { max-width: 1680px; margin: 0 auto 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analytics-overview article { min-width: 0; padding: 20px 22px; border-right: 1px solid var(--line); }
.analytics-overview article:last-child { border-right: 0; }
.analytics-overview span { display: block; margin-bottom: 12px; color: var(--muted); font: 700 10px/1 "Roboto Mono", Consolas, monospace; }
.analytics-overview strong { color: var(--text); font: 700 31px/1 "Roboto Mono", Consolas, monospace; }
.analytics-overview small { margin-left: 7px; color: #657482; font-size: 10px; }

.analytics-section, .pair-grid { min-width: 0; max-width: 1680px; margin: 0 auto 34px; }
.analytics-section-heading { min-height: 46px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 13px; }
.analytics-section-heading h2 { margin: 4px 0 0; font-size: 17px; letter-spacing: 0; }
.analytics-section-heading > span { color: var(--muted); font-size: 10px; }
.leader-board { min-width: 0; display: grid; gap: 30px; }
.leader-focus-block { min-width: 0; overflow: hidden; padding: 20px; border: 1px solid rgba(61, 214, 208, 0.2); border-radius: var(--radius); background: radial-gradient(circle at 12% 0%, rgba(61, 214, 208, 0.12), transparent 34%), linear-gradient(135deg, rgba(15, 24, 32, 0.94), rgba(8, 13, 19, 0.98)); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18); }
.leader-subheading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.leader-subheading > div { display: flex; align-items: center; gap: 11px; }
.leader-subheading-index { color: rgba(61, 214, 208, 0.46); font: 800 11px/1 "Roboto Mono", Consolas, monospace; }
.leader-subheading small { display: block; margin-bottom: 3px; color: var(--cyan); font: 800 9px/1 "Roboto Mono", Consolas, monospace; }
.leader-subheading h3 { margin: 0; font-size: 16px; }
.leader-subheading p { margin: 0; color: var(--muted); font-size: 10px; }
.leader-focus-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.leader-category { min-width: 0; display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.leader-category-heading { min-width: 0; padding: 5px 4px 0 2px; }
.leader-category-index { display: block; margin-bottom: 24px; color: #52616d; font: 800 11px/1 "Roboto Mono", Consolas, monospace; }
.leader-category-heading small { display: block; margin-bottom: 5px; color: var(--cyan); font: 800 9px/1 "Roboto Mono", Consolas, monospace; }
.leader-category--round .leader-category-heading small, .leader-category--economy .leader-category-heading small, .leader-category--eco .leader-category-heading small { color: var(--orange); }
.leader-category--spectacle .leader-category-heading small { color: #ee8995; }
.leader-category-heading h3 { margin: 0; font-size: 16px; }
.leader-category-heading p { max-width: 155px; margin: 9px 0 0; color: #6f7d88; font-size: 10px; line-height: 1.55; }
.leader-category-grid { min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.leader-card { position: relative; isolation: isolate; min-width: 0; min-height: 182px; overflow: hidden; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); outline: 0; background: linear-gradient(145deg, rgba(61, 214, 208, 0.055), rgba(13, 19, 26, 0.92) 45%); box-shadow: 0 13px 34px rgba(0, 0, 0, 0.16); transition: border-color 160ms ease, background 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.leader-card.tone-positive { border-color: rgba(98, 230, 167, 0.26); background: linear-gradient(145deg, rgba(98, 230, 167, 0.085), rgba(13, 19, 26, 0.92) 45%); }
.leader-card.tone-neutral { border-color: rgba(255, 155, 82, 0.22); background: linear-gradient(145deg, rgba(255, 155, 82, 0.065), rgba(13, 19, 26, 0.92) 45%); }
.leader-card.tone-negative { border-color: rgba(240, 108, 125, 0.3); background: linear-gradient(145deg, rgba(240, 108, 125, 0.075), rgba(13, 19, 26, 0.92) 45%); }
.leader-card:hover, .leader-card:focus-visible { border-color: #344655; transform: translateY(-2px); }
.leader-card:active { transform: translateY(-1px) scale(0.99); }
.leader-card--compact { min-height: 154px; padding: 14px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.13); }
.leader-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.leader-label span { min-width: 0; overflow: hidden; color: #b9c6cf; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.leader-label small { flex: 0 0 auto; color: #71808c; font: 11px/1 "Roboto Mono", Consolas, monospace; }
.leader-card > strong { display: block; margin-top: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.leader-card--compact > strong { margin-top: 16px; font-size: 15px; }
.leader-value { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; }
.leader-value b { color: var(--cyan); font: 750 31px/1 "Roboto Mono", Consolas, monospace; }
.leader-card--compact .leader-value b { font-size: 25px; }
.leader-card.tone-positive .leader-value b { color: var(--tone-positive); }
.leader-card.tone-neutral .leader-value b { color: var(--tone-neutral); }
.leader-card.tone-negative .leader-value b { color: var(--tone-negative); }
.leader-value span { color: #81909b; font-size: 11px; }
.leader-card p { margin: 16px 0 0; color: #7b8a96; font-size: 11px; line-height: 1.5; }
.leader-card--compact p { margin-top: 12px; font-size: 10px; }
.leader-ranking { position: absolute; z-index: 2; inset: 6px; min-height: 0; display: grid; grid-template-rows: 24px minmax(0, 1fr); row-gap: 4px; padding: 10px 11px; border: 1px solid rgba(61, 214, 208, 0.26); border-radius: calc(var(--radius) - 2px); background: rgba(8, 13, 19, 0.97); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36); opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity 140ms ease, visibility 140ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.leader-card.tone-positive .leader-ranking { border-color: rgba(98, 230, 167, 0.34); }
.leader-card.tone-neutral .leader-ranking { border-color: rgba(255, 155, 82, 0.3); }
.leader-card.tone-negative .leader-ranking { border-color: rgba(240, 108, 125, 0.34); }
.leader-card:hover:not(.is-collapsed) .leader-ranking, .leader-card.is-expanded .leader-ranking { opacity: 1; visibility: visible; transform: translateY(0); }
.leader-ranking-heading { height: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.leader-ranking-heading span { color: var(--cyan); font: 800 10px/1 "Roboto Mono", Consolas, monospace; }
.leader-card.tone-positive .leader-ranking-heading span { color: var(--tone-positive); }
.leader-card.tone-neutral .leader-ranking-heading span { color: var(--tone-neutral); }
.leader-card.tone-negative .leader-ranking-heading span { color: var(--tone-negative); }
.leader-ranking-heading small { overflow: hidden; color: #7f8d98; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.leader-ranking ol { min-height: 0; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; overflow: hidden; list-style: none; }
.leader-ranking li { min-height: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 35px; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.035); }
.leader-ranking li:last-child { border-bottom: 0; }
.leader-ranking-position { color: #52616d; font: 700 9px/1 "Roboto Mono", Consolas, monospace; }
.leader-ranking li strong { overflow: hidden; color: #c7d1d8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.leader-ranking li b { color: var(--cyan); font: 750 11px/1 "Roboto Mono", Consolas, monospace; white-space: nowrap; }
.leader-card.tone-positive .leader-ranking li b { color: var(--tone-positive); }
.leader-card.tone-neutral .leader-ranking li b { color: var(--tone-neutral); }
.leader-card.tone-negative .leader-ranking li b { color: var(--tone-negative); }
.leader-ranking li b small { margin-left: 2px; color: #6f7d88; font: 8px/1 Inter, "Microsoft YaHei", sans-serif; }
.leader-ranking li em { color: #60707c; text-align: right; font: normal 8px/1 "Roboto Mono", Consolas, monospace; white-space: nowrap; }
.analytics-loading { grid-column: 1 / -1; min-height: 180px; display: grid; place-content: center; border: 1px dashed var(--line); color: var(--muted); font-size: 12px; }
.analytics-loading.error { color: #ee8995; }

.pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pair-column { min-width: 0; }
.pair-list { border-top: 1px solid rgba(61, 214, 208, 0.28); }
.pair-column.danger .pair-list { border-color: rgba(240, 98, 114, 0.28); }
.pair-row { min-height: 67px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.pair-rank { color: #52616d; font: 700 11px/1 "Roboto Mono", Consolas, monospace; }
.pair-row > div:nth-child(2) { min-width: 0; }
.pair-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.pair-row strong i { margin: 0 4px; color: var(--cyan); font-style: normal; }
.pair-column.danger .pair-row strong i { color: var(--red); }
.pair-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.pair-score { text-align: right; }
.pair-score b { display: block; color: var(--cyan); font: 700 19px/1 "Roboto Mono", Consolas, monospace; }
.pair-score.inverse b { color: #ee8995; }
.pair-score small.positive { color: var(--green); }
.pair-score small.negative { color: var(--red); }
.pair-empty { min-height: 110px; display: grid; place-content: center; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; }

.ranking-scroll { overflow-x: auto; border-top: 1px solid var(--line); }
.player-ranking { width: 100%; min-width: 900px; border-collapse: collapse; }
.player-ranking th { padding: 13px 12px; color: #7c8b96; text-align: right; font: 700 11px/1 "Roboto Mono", Consolas, monospace; }
.player-ranking th:first-child { text-align: left; }
.player-ranking td { padding: 16px 12px; border-top: 1px solid var(--line-soft); color: #bdc8d0; text-align: right; font: 13px/1 "Roboto Mono", Consolas, monospace; }
.player-ranking td:first-child { display: flex; align-items: center; gap: 13px; text-align: left; }
.player-ranking td strong { color: var(--text); font: 700 14px/1.2 Inter, "Microsoft YaHei", sans-serif; }
.ranking-position { color: #657580; font-size: 11px; }
.player-ranking .rating-cell { color: var(--cyan); font-weight: 800; }
.ranking-empty { display: table-cell !important; height: 120px; color: var(--muted) !important; text-align: center !important; }

.capability-section { padding: 24px 26px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 20% 28%, rgba(61, 214, 208, 0.08), transparent 33%), linear-gradient(135deg, rgba(15, 23, 31, 0.94), rgba(8, 12, 18, 0.97)); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18); }
.capability-heading { align-items: center; margin-bottom: 4px; }
.capability-controls { display: flex; align-items: center; gap: 10px; }
.capability-player-control { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; }
.capability-player-control select { min-width: 168px; padding: 8px 30px 8px 10px; border-color: #273743; background-color: #0b1219; color: var(--text); font-size: 12px; }
.capability-hide-comparison { min-height: 32px; padding: 7px 11px; border: 1px solid rgba(255, 157, 72, 0.42); border-radius: 4px; background: rgba(255, 157, 72, 0.08); color: #ffad67; font-size: 10px; font-weight: 700; }
.capability-hide-comparison:hover { border-color: rgba(255, 157, 72, 0.74); background: rgba(255, 157, 72, 0.14); }
.capability-layout { min-height: 470px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr); align-items: stretch; }
.capability-layout.has-player-portrait { grid-template-columns: minmax(0, 1.05fr) minmax(210px, 0.58fr) minmax(315px, 0.82fr); }
.capability-layout.portrait-wide { grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1fr) minmax(315px, 0.82fr); }
.capability-chart-wrap { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 15px 28px 0 0; border-right: 1px solid var(--line); }
.capability-layout.has-player-portrait .capability-chart-wrap { padding-right: 10px; border-right: 0; }
.capability-chart-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding-left: 8px; }
.capability-chart-copy strong { font-size: 22px; }
.capability-chart-copy span { color: var(--muted); font: 10px/1 "Roboto Mono", Consolas, monospace; }
.capability-chart-copy .capability-comparison-meta { display: inline-flex; align-items: center; gap: 6px; color: #ffad67; }
.capability-comparison-meta::before { width: 8px; height: 8px; border: 1px solid #ffad67; border-radius: 50%; background: rgba(255, 157, 72, 0.3); box-shadow: 0 0 8px rgba(255, 157, 72, 0.32); content: ""; }
.capability-chart { min-height: 405px; display: grid; place-items: center; }
.capability-chart svg { width: min(760px, 100%); height: 100%; max-height: 430px; overflow: visible; }
.radar-grid polygon { fill: rgba(61, 214, 208, 0.018); stroke: rgba(154, 184, 197, 0.24); stroke-width: 1; }
.radar-grid polygon:last-of-type { fill: none; stroke: rgba(61, 214, 208, 0.42); stroke-width: 1.4; }
.radar-grid line { stroke: rgba(154, 184, 197, 0.18); stroke-width: 1; }
.radar-shape { stroke-linejoin: round; }
.radar-shape-current { fill: rgba(61, 214, 208, 0.21); stroke: #67f4e9; stroke-width: 2.2; filter: drop-shadow(0 0 12px rgba(61, 214, 208, 0.28)); }
.radar-shape-previous { fill: rgba(255, 157, 72, 0.11); stroke: #ff9d48; stroke-width: 1.8; filter: drop-shadow(0 0 8px rgba(255, 157, 72, 0.22)); }
.radar-dots circle { fill: #071016; stroke: #67f4e9; stroke-width: 2.4; }
.radar-dots-previous circle { fill: #17100a; stroke: #ff9d48; stroke-width: 2; }
.radar-labels text { fill: #d3dde3; font: 700 13px/1 Inter, "Microsoft YaHei", sans-serif; }
.radar-labels tspan:last-child { fill: var(--cyan); font: 700 11px/1 "Roboto Mono", Consolas, monospace; }
.capability-portrait-stage { position: relative; min-width: 0; min-height: 470px; overflow: hidden; margin: 0; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(61, 214, 208, 0.025), rgba(61, 214, 208, 0.08)); }
.capability-portrait-stage::before { position: absolute; inset: 9% 12% 0; border: 1px solid rgba(61, 214, 208, 0.12); border-bottom: 0; content: ""; }
.capability-portrait-stage img { position: absolute; z-index: 1; inset: auto 50% 0 auto; width: 100%; height: 96%; object-fit: contain; object-position: center bottom; transform: translateX(50%); filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.34)); }
.capability-layout.portrait-cover .capability-portrait-stage img { height: 100%; object-fit: cover; object-position: 74% center; }
.capability-layout.portrait-wide .capability-portrait-stage img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.capability-metric-list { min-width: 0; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); padding: 12px 0 6px 30px; }
.capability-layout.has-player-portrait .capability-metric-list { padding-left: 22px; }
.capability-metric { min-width: 0; display: grid; grid-template-columns: minmax(125px, 0.8fr) minmax(150px, 1.2fr) 64px; align-items: center; gap: 14px; border-bottom: 1px solid var(--line-soft); }
.capability-metric:last-child { border-bottom: 0; }
.capability-metric > span { min-width: 0; color: #c6d1d8; font-size: 13px; font-weight: 750; }
.capability-metric > span i { display: inline-block; width: 25px; color: #52636f; font: normal 9px/1 "Roboto Mono", Consolas, monospace; }
.capability-metric > span small { display: block; margin: 5px 0 0 25px; color: var(--muted); font-size: 9px; font-weight: 500; }
.capability-metric > strong { min-width: 0; overflow: hidden; color: #d9e2e7; font: 700 13px/1.2 "Roboto Mono", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.capability-metric > b { color: var(--cyan); text-align: right; font: 750 22px/1 "Roboto Mono", Consolas, monospace; }
.capability-metric > b small { display: block; margin-top: 4px; color: #63737f; font: 8px/1 Inter, "Microsoft YaHei", sans-serif; }
.capability-empty { color: var(--muted); font-size: 12px; }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; max-width: min(540px, calc(100vw - 32px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #131c25; color: var(--text); font-size: 12px; transition: opacity 160ms ease, transform 160ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: rgba(240, 98, 114, 0.55); color: #ffd7dc; }

@media (max-width: 1100px) {
  body { overflow: auto; }
  .workspace { height: auto; min-height: calc(100vh - 58px); grid-template-columns: 1fr; }
  .library { max-height: 48vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .replay-shell { min-height: 1000px; }
  .replay-view { min-height: 1000px; }
  .replay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(460px, 62vh) minmax(410px, 1fr); }
  .map-stage { grid-column: 1 / -1; grid-row: 1; }
  .team-panel { position: static; z-index: auto; width: auto; }
  .team-panel-t { grid-column: 1; grid-row: 2; border-top: 1px solid rgba(255, 155, 82, 0.22); border-right: 1px solid var(--line); }
  .team-panel-ct { grid-column: 2; grid-row: 2; border-top: 1px solid rgba(61, 214, 208, 0.22); border-left: 0; }
  .event-overlay { right: 14px; width: min(360px, 48%); }
  .replay-header { grid-template-columns: 1fr auto; }
  .scoreboard { justify-self: end; }
  .match-meta { display: none; }
  .analytics-shell { height: auto; min-height: calc(100vh - 58px); }
  .leader-focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leader-category { grid-template-columns: 140px minmax(0, 1fr); gap: 14px; }
  .leader-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capability-layout, .capability-layout.has-player-portrait { grid-template-columns: 1fr; }
  .capability-chart-wrap { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .capability-layout.has-player-portrait .capability-chart-wrap { padding-right: 0; }
  .capability-portrait-stage { min-height: 430px; border-right: 0; border-bottom: 1px solid var(--line); }
  .capability-metric-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(78px, 1fr)); padding: 12px 0 0; column-gap: 24px; }
  .capability-layout.has-player-portrait .capability-metric-list { padding-left: 0; }
}

@media (max-width: 620px) {
  .topbar { height: 104px; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px; }
  .product-switch { grid-column: 1 / -1; grid-row: 2; }
  .product-tab { flex: 1; min-width: 0; }
  .service-state { justify-self: end; }
  .workspace { display: block; min-height: calc(100vh - 104px); }
  .library { max-height: 54vh; }
  .import-panel { padding: 15px 14px 12px; }
  .replay-shell { min-height: 1080px; }
  .replay-view { min-height: 1080px; grid-template-rows: 76px minmax(0, 1fr) 120px; }
  .replay-header { padding: 0 12px; }
  .replay-header h2 { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team span { display: none; }
  .scoreboard { gap: 8px; }
  .replay-grid { grid-template-rows: minmax(360px, 58vh) minmax(430px, 1fr); }
  .team-panel { grid-template-rows: 52px minmax(0, 1fr); }
  .team-panel-heading { padding: 8px; }
  .team-panel-heading strong { font-size: 10px; }
  .team-panel-heading span:last-child { font-size: 8px; }
  .roster { grid-template-rows: repeat(5, minmax(72px, 1fr)); gap: 2px; padding: 3px; }
  .roster-row { padding: 3px 4px 2px; }
  .roster-topline { grid-template-columns: 17px minmax(0, 1fr) auto; gap: 4px; }
  .player-slot { width: 16px; height: 16px; font-size: 8px; }
  .roster-name { font-size: 12px; }
  .roster-money { font-size: 8px; }
  .roster-combat { grid-template-columns: 38px minmax(34px, 1fr) 34px; gap: 1px 3px; }
  .roster-row.ct .roster-combat { grid-template-columns: 34px minmax(34px, 1fr) 38px; }
  .hp-value { font-size: 17px; }
  .weapon-icon { width: min(45px, 100%); height: 18px; }
  .weapon-ammo { font-size: 8px; }
  .loadout-icon { width: 11px; height: 11px; }
  .event-overlay { top: 52px; right: 10px; width: calc(100% - 20px); }
  .event-overlay-heading { display: none; }
  .event-item { padding: 5px 7px; }
  .event-item:nth-child(n + 4) { display: none; }
  .transport { grid-template-columns: 1fr; gap: 9px; padding: 10px 12px; }
  .transport-options { grid-template-columns: auto 1fr auto 1fr; }
  .analytics-shell { min-height: calc(100vh - 104px); padding: 24px 14px 48px; }
  .analytics-header { align-items: stretch; flex-direction: column; gap: 18px; }
  .window-switch { width: 100%; }
  .window-switch button { flex: 1; min-width: 0; padding-inline: 4px; }
  .analytics-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-overview article { padding: 16px 12px; }
  .analytics-overview article:nth-child(2) { border-right: 0; }
  .analytics-overview article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .analytics-overview strong { font-size: 25px; }
  .leader-board { gap: 24px; }
  .leader-focus-block { padding: 14px; }
  .leader-subheading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .leader-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leader-category { grid-template-columns: 1fr; gap: 11px; padding-top: 16px; }
  .leader-category-heading { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 0; }
  .leader-category-index { grid-row: 1 / 3; margin: 0; }
  .leader-category-heading small { margin: 0; }
  .leader-category-heading h3 { grid-column: 2; }
  .leader-category-heading p { grid-column: 2; max-width: none; margin-top: 5px; }
  .leader-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leader-card { min-height: 174px; padding: 13px; }
  .leader-card--compact { min-height: 196px; }
  .leader-card > strong { margin-top: 18px; font-size: 16px; }
  .leader-value b { font-size: 26px; }
  .leader-ranking li { min-height: 0; grid-template-columns: 19px minmax(0, 1fr) auto; grid-template-areas: "position player sample" "position value value"; gap: 1px 5px; padding: 1px 0; }
  .leader-ranking-position { grid-area: position; align-self: center; }
  .leader-ranking li strong { grid-area: player; font-size: 10px; }
  .leader-ranking li b { grid-area: value; font-size: 10px; }
  .leader-ranking li em { grid-area: sample; font-size: 8px; }
  .pair-grid { grid-template-columns: 1fr; gap: 28px; }
  .analytics-section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .capability-section { padding: 18px 14px 20px; }
  .capability-heading { align-items: stretch; }
  .capability-controls { justify-content: space-between; width: 100%; }
  .capability-player-control { justify-content: space-between; }
  .capability-player-control select { min-width: 0; width: 72%; }
  .capability-layout { min-height: 0; }
  .capability-chart-copy { align-items: flex-start; flex-direction: column; gap: 7px; padding: 12px 0 0; }
  .capability-chart-copy strong { font-size: 19px; }
  .capability-chart { min-height: 330px; }
  .capability-chart svg { height: auto; max-height: none; }
  .capability-portrait-stage { min-height: 390px; }
  .capability-portrait-stage img { height: 100%; }
  .capability-metric-list { grid-template-columns: 1fr; grid-template-rows: repeat(6, minmax(68px, auto)); column-gap: 0; }
  .capability-metric { grid-template-columns: minmax(100px, 0.85fr) minmax(120px, 1.15fr) 54px; gap: 8px; }
  .capability-metric > strong { font-size: 11px; }
  .capability-metric > b { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}