/* System typography and restrained surfaces, shared by review and trends.
   Apple HIG: typography, layout and buttons. No external font dependency. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --bg: #101012;
  --bg2: #151517;
  --panel: #1c1c1f;
  --panel2: #242427;
  --line: #343438;
  --text: #f2f2f4;
  --muted: #a1a1aa;
  --accent: #2868bd;
  --accent-soft: #669ff51a;
  --cyan: #86b4f8;
}
body { font-family: var(--font-ui); font-weight: 400; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
body :is(h1,h2,h3,h4) { font-weight: 500; }
body :is(b,strong) { font-weight: 500; }
#premiumTrends :is(p,span,small,label,select,input,button,td),
#statsPane :is(p,span,small,label,select,input,button,td),
#statsPane .sc-axis { font-weight: 400; }

/* A quiet toolbar: navigation is grouped; actions have equal-sized targets. */
#review .review-head { gap: 12px; padding-block: 16px 22px; align-items: center; }
#review .review-head h2 { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
#review .review-head .map-name { color: var(--muted); font-size: 12px; font-weight: 400; }
#review .review-head button {
  min-height: 36px; padding: 8px 13px; font-size: 13px; font-weight: 400;
  border: 1px solid transparent; border-radius: 8px; background: #ffffff07;
  color: #d5d5db; box-shadow: none; letter-spacing: 0;
}
#review .review-head button:hover { background: #ffffff10; color: #fff; }
#review .review-head #backHome { background: transparent; color: #a7c9fb; }
#review .pane-tabs { padding: 3px; gap: 2px; background: #ffffff08; border: 1px solid #ffffff0c; border-radius: 10px; }
#review .pane-tabs button { min-height: 32px; padding: 6px 16px; color: #b1b1ba; background: transparent; border-radius: 7px; }
#review .pane-tabs button.active { background: #38383d; color: #fff; box-shadow: 0 1px 3px #0004; }
#review .review-head #liveStart { color: #a7c9fb; background: transparent; border-color: transparent; }
#review .review-head #liveStart:hover { background: #669ff512; }
#review .review-head button:focus-visible { outline: 2px solid #8ab5f5; outline-offset: 3px; }

/* Match analysis: larger type with normal weights; data carries the emphasis. */
#review #statsPane { max-width: 1320px; padding: 24px 24px 60px; gap: 28px; }
#statsPane #statsCharts { color: var(--text); }
#statsPane .sc-eyebrow { display: none; }
#statsPane .sc-heading { margin: 4px 0 32px; }
#statsPane .sc-heading h2 { font-size: clamp(26px,3vw,34px); font-weight: 400; letter-spacing: -.035em; line-height: 1.2; }
#statsPane .sc-result strong { font-size: 30px; font-weight: 400; letter-spacing: -.02em; }
#statsPane :is(.sc-result span,.sc-control,.sc-subtitle,.sc-unit,.sc-method,.stats-hint) { color: #aaaab4; font-size: 12px; }
#statsPane .sc-toolbar { margin-bottom: 28px; gap: 18px; }
#statsPane .sc-control select { font-size: 13px; font-weight: 400; background: #242427; border: 1px solid #ffffff12; color: var(--text); min-height: 38px; }
#statsPane .sc-verified { border: 0; background: transparent; color: #a3bbb1; font-size: 12px; padding-inline: 0; }
#statsPane .sc-unverified { color: #d0b58c; }
#statsPane .sc-metrics { border: 1px solid #ffffff10; border-radius: 14px; background: #1c1c1f; gap: 0; margin-bottom: 28px; overflow: hidden; }
#statsPane .sc-metric { border: 0; border-radius: 0; background: none; padding: 24px 26px; gap: 10px; }
#statsPane .sc-metric + .sc-metric { border-left: 1px solid #ffffff0d; }
#statsPane .sc-metric:before { display: none; }
#statsPane .sc-metric span { font-size: 12px; letter-spacing: 0; color: #b2b2bc; }
#statsPane .sc-metric strong { font-size: 36px; font-weight: 400; color: var(--text); letter-spacing: -.04em; }
#statsPane .sc-metric small { font-size: 12px; color: #9b9ba6; }
#statsPane :is(.sc-card,.stats-block) { background: #1c1c1f; border: 1px solid #ffffff10; border-radius: 14px; padding: 26px; box-shadow: none; }
#statsPane :is(.sc-card h3,.stats-block h3) { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
#statsPane .sc-chart-grid { gap: 24px; }
#statsPane .sc-legend { color: #b1b1bb; font-size: 12px; }
#statsPane .sc-gridline { stroke: #ffffff0f; stroke-dasharray: none; }
#statsPane .sc-axis { fill: #a1a1ac; font-size: 11px; }
#statsPane .sc-bar-weapon { fill: #709ce0; }
#statsPane .sc-bar-utility { fill: #a8b1c5; }
#statsPane .sc-weapons:before { background: #709ce0; }
#statsPane .sc-utility:before { background: #a8b1c5; }
#statsPane .sc-average:before { background: #8cb9ac; }
#statsPane .sc-average-line { stroke: #8cb9ac; stroke-width: 1.6; }
#statsPane .sc-round.is-selected rect:not([fill]),#statsPane .sc-round:focus rect:not([fill]) { filter: none; }
#statsPane .sc-round-detail { border-color: #ffffff12; padding-top: 20px; }
#statsPane .sc-round-detail strong { font-weight: 500; font-size: 13px; }
#statsPane :is(.sc-round-detail span,.sc-player,.sc-player b) { font-size: 12px; font-weight: 400; color: #bebec7; }
#statsPane .sc-replay { color: #a7c9fb; background: #ffffff06; border-color: #ffffff14; font-size: 12px; }
#statsPane .sc-track { background: #ffffff09; }
#statsPane .sc-track i { background: #709ce0; }
#statsPane .sc-player.theirs i { background: #b2a28e; }
#statsPane .scoreboard-title { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
#statsPane table.scoreboard th { font-size: 11px; font-weight: 400; letter-spacing: 0; padding-block: 12px; text-transform: none; }
#statsPane table.scoreboard td { font-size: 13px; font-weight: 400; padding-block: 11px; }
#statsPane .stats-categories { background: #ffffff05; border-color: #ffffff0c; }
#statsPane .stats-categories button { font-weight: 400; min-height: 32px; }
#statsPane .stats-categories button.active { background: #38383d; }
#statsPane .round-chip { font-family: var(--font-ui); font-weight: 400; }

/* Team trends: grouped values, neutral surfaces, no decorative gradients. */
#teamDashboardDialog.trends-premium { background: #161618!important; border-color: #414145!important; border-radius: 20px!important; color: var(--text); }
#teamDashboardDialog.trends-premium::backdrop { background: #08080baa; backdrop-filter: blur(12px); }
#teamDashboardDialog.trends-premium > form { padding: 34px!important; }
#teamDashboardDialog .admin-dialog-head { border-bottom: 0; padding-bottom: 8px; margin-bottom: 28px; }
#teamDashboardDialog .admin-dialog-head small { display: none; }
#teamDashboardDialog .admin-dialog-head h2 { font-weight: 400; font-size: 30px; letter-spacing: -.035em; }
#teamDashboardDialog .icon-button { border: 0; background: #ffffff08; color: #bcbcc5; border-radius: 50%; font-weight: 400; }
#premiumTrends .tr-body { gap: 28px; }
#premiumTrends .tr-control { font-size: 12px; letter-spacing: 0; color: #aaaab5; }
#premiumTrends .tr-control :is(select,input) { background: #252528; border-color: #ffffff14; font-size: 13px; font-weight: 400; color: var(--text); }
#premiumTrends :is(.tr-quiet,.tr-customize summary,.tr-link) { font-size: 12px; font-weight: 400; background: #ffffff06; border-color: #ffffff12; color: #c7c7d0; }
#premiumTrends .tr-customize[open] > summary { background: #ffffff12; }
#premiumTrends .tr-settings { background: #28282b; border-color: #ffffff20; box-shadow: 0 16px 48px #0006; border-radius: 14px; }
#premiumTrends .tr-check { font-size: 12px; color: #bdbdc7; }
#premiumTrends .tr-check input { accent-color: #669ff5; width: 16px; height: 16px; }
#premiumTrends .tr-context { color: #a5a5af; font-size: 13px; }
#premiumTrends .tr-quality { border: 0; background: none; color: #a3bbb1; font-size: 12px; padding: 0; }
#premiumTrends .tr-kpis { gap: 0; background: #212124; border: 1px solid #ffffff10; border-radius: 14px; overflow: hidden; }
#premiumTrends .tr-kpi { padding: 26px 24px; background: none; border: 0; border-radius: 0; gap: 12px; }
#premiumTrends .tr-kpi + .tr-kpi { border-left: 1px solid #ffffff0d; }
#premiumTrends .tr-kpi:before { display: none; }
#premiumTrends .tr-kpi span { font-size: 12px; letter-spacing: 0; color: #b2b2bc; }
#premiumTrends .tr-kpi strong { font-weight: 400; color: var(--text); font-size: 36px; letter-spacing: -.04em; }
#premiumTrends .tr-kpi small { font-size: 12px; color: #a1a1ac; letter-spacing: 0; }
#premiumTrends .tr-card { background: #1c1c1f; border: 1px solid #ffffff10; padding: 28px; border-radius: 14px; }
#premiumTrends .tr-card-head h3 { font-size: 18px; font-weight: 500; letter-spacing: -.025em; }
#premiumTrends :is(.tr-subtitle,.tr-footnote,.tr-method,.tr-legend,.tr-delta) { color: #a5a5af; font-size: 12px; line-height: 1.6; }
#premiumTrends .tr-grid { stroke: #ffffff0f; stroke-dasharray: none; }
#premiumTrends .tr-axis { fill: #a1a1ac; font-size: 11px; }
#premiumTrends .tr-line { stroke: #7aa5e8; stroke-width: 1.75; }
#premiumTrends .tr-rolling { stroke: #91b8aa; stroke-width: 1.5; }
#premiumTrends .tr-compare { stroke: #c4b19b; stroke-width: 1.5; }
#premiumTrends .tr-dot { fill: #8db1eb; stroke: #1c1c1f; stroke-width: 2; r: 3; }
#premiumTrends .tr-point.selected .tr-dot,#premiumTrends .tr-point:focus .tr-dot { filter: none; r: 5; fill: #e3edff; }
#premiumTrends .tr-gap { fill: #1c1c1f; stroke: #878792; }
#premiumTrends .tr-chart-detail { border-color: #ffffff12; padding-top: 20px; }
#premiumTrends .tr-chart-detail strong { font-size: 13px; font-weight: 500; }
#premiumTrends .tr-chart-detail span { color: #aaaab5; font-size: 12px; }
#premiumTrends .tr-buy-track { background: #ffffff09; height: 5px; }
#premiumTrends .tr-buy-track i { background: #7c9fcc; }
#premiumTrends .tr-buy-row { font-size: 13px; }
#premiumTrends .tr-buy-row strong { font-weight: 400; font-size: 13px; }
#premiumTrends :is(.tr-buy-row small,.tr-rate small) { font-size: 11px; color: #a1a1ac; }
#premiumTrends .tr-rate span { font-size: 12px; color: #b4b4be; }
#premiumTrends .tr-rate strong { font-weight: 400; font-size: 24px; }
#premiumTrends .tr-rates { border-color: #ffffff12; padding-top: 24px; gap: 24px; }
#premiumTrends .tr-matrix { border-spacing: 4px; }
#premiumTrends .tr-matrix th { font-size: 11px; font-weight: 400; color: #b5b5bf; }
#premiumTrends .tr-matrix td { background: #252528; border: 0; border-radius: 6px; }
#premiumTrends .tr-matrix td[style] { background: color-mix(in srgb,#354b49 calc(var(--win)*100%),#252528); }
#premiumTrends .tr-matrix td strong { font-weight: 400; font-size: 16px; }
#premiumTrends .tr-matrix td small { font-size: 11px; color: #b1b1bb; }
#premiumTrends .tr-map { background: #252528; border: 1px solid #ffffff0b; border-radius: 10px; padding: 22px; }
#premiumTrends .tr-map:hover { transform: none; border-color: #707079; background: #2b2b2f; }
#premiumTrends .tr-map-name { font-size: 12px; letter-spacing: .03em; color: #b7b7c1; }
#premiumTrends .tr-map > strong { font-size: 30px; font-weight: 400; }
#premiumTrends :is(.tr-map > small,.tr-map-sides) { font-size: 12px; color: #a8a8b3; }
#premiumTrends .tr-map-sides { border-color: #ffffff12; }
#premiumTrends .tr-player-table { font-size: 13px; }
#premiumTrends .tr-player-table :is(th,td) { border-color: #ffffff0c; padding-block: 15px; }
#premiumTrends .tr-player-table th { font-size: 12px; font-weight: 400; color: #a5a5af; }
#premiumTrends .tr-player-table th:first-child,#premiumTrends .tr-player-table td:first-child { background: #1c1c1f; }
#premiumTrends .tr-player-table tr:hover td { background: #28282b; }
#premiumTrends .tr-name { font-weight: 400; color: #e1e1e7; }
#premiumTrends .tr-player-table td small { font-size: 10px; color: #a1a1ac; }
#premiumTrends .tr-match { background: transparent; border: 0; border-bottom: 1px solid #ffffff0c; border-radius: 0; padding-block: 16px; }
#premiumTrends .tr-match:hover { background: #ffffff04; }
#premiumTrends .tr-match strong { font-weight: 500; font-size: 13px; }
#premiumTrends .tr-match small { font-size: 11px; color: #a1a1ac; }
#premiumTrends .tr-data-badge { border: 0; background: none; color: #c2ad91; font-size: 11px; }
#premiumTrends .tr-data-badge.verified { background: none; color: #9fb8aa; }
#premiumTrends :is(button,a,summary,select,input):focus-visible { outline: 2px solid #8ab5f5; outline-offset: 3px; }
@media(max-width:1100px) {
  #premiumTrends .tr-kpi { border-bottom: 1px solid #ffffff0d; }
}
@media(max-width:650px) {
  #review .review-head { gap: 8px; }
  #review .pane-tabs { order: 5; }
  #review #statsPane { padding: 20px 8px 40px; }
  #statsPane :is(.sc-card,.stats-block) { padding: 18px; }
  #statsPane .sc-metric { padding: 20px 18px; border-bottom: 1px solid #ffffff0d; }
  #teamDashboardDialog.trends-premium > form { padding: 20px!important; }
  #teamDashboardDialog .admin-dialog-head h2 { font-size: 25px; }
  #premiumTrends .tr-kpi { padding: 22px 18px; }
  #premiumTrends .tr-kpi strong { font-size: 32px; }
  #premiumTrends .tr-card { padding: 18px; }
  #premiumTrends .tr-data-badge { font-size: 10px; max-width: 64px; }
  #premiumTrends .tr-settings { right: 3vw; width: 94vw; }
}
@media(prefers-reduced-transparency:reduce) {
  #teamDashboardDialog.trends-premium::backdrop { backdrop-filter: none; background: #101012ed; }
}