@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --font-ui: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-data: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --font-mono: var(--font-data);
  --surface-0: #090d10;
  --surface-1: #0f151a;
  --surface-2: #151d23;
  --border: #2f3b45;
  --border-strong: #46545f;
  --text: #d8e0e6;
  --muted: #82909b;
  --accent: #69b8dc;
  --radius-sm: 0;
  --radius-md: 0;
  --ui-scale: 1;
  --ui-scaled-width: 100vw;
  --ui-scaled-height: 100vh;
  font-family: var(--font-ui);
  font-feature-settings: "tnum" 1;
  font-synthesis: none;
  background: var(--surface-0);
  color: var(--text);
  font-size: 14px;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { width: 100%; height: 100%; }
button, input, select, textarea { color: inherit; font: inherit; }
button { border-radius: var(--radius-sm); cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid rgba(105,184,220,.8); outline-offset: 2px; }
.auth-gate { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: 24px; background: #090c0f; }
.auth-card { display: grid; width: min(400px, 100%); gap: 16px; padding: 32px; border: 1px solid var(--border-strong); background: rgba(12,17,21,.97); box-shadow: 0 24px 80px rgba(0,0,0,.65); }
.auth-card h1 { margin: -2px 0 4px; color: #f0f4f7; font-size: 28px; letter-spacing: -.025em; }
.auth-card p { margin: 0; color: #93a1ab; font-size: 13px; line-height: 1.55; }
.auth-kicker { color: #68bce5; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.auth-card label { display: grid; gap: 8px; color: #91a0ab; font-size: 11px; font-weight: 750; letter-spacing: .06em; }
.auth-card input { height: 42px; padding: 0 12px; border: 1px solid #3a4852; border-radius: var(--radius-sm); outline: 0; color: #eaf0f4; background: #090d10; font: 14px var(--font-ui); }
.auth-card input:focus { border-color: #5ca3c7; box-shadow: 0 0 0 2px rgba(92,163,199,.14); }
.auth-card button { height: 42px; border: 1px solid #55783e; color: #ddecce; background: #1c2d16; font-weight: 800; letter-spacing: .045em; cursor: pointer; }
.auth-card .auth-existing { border-color: #4383a1; color: #daf1fb; background: #153044; }
.auth-card .auth-existing:hover { border-color: #69b8dc; background: #1b3b52; }
.auth-card .auth-create:hover { border-color: #70a24f; background: #263d1d; }
.auth-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: #687680; font-size: 10px; font-weight: 750; letter-spacing: .1em; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; content: ""; background: #26313a; }
.admin-invite-button { flex: 0 0 auto; margin-left: 4px; padding: 4px 10px; border: 1px solid #55783e; color: #ddecce; background: #182716; font-size: 10px; font-weight: 800; letter-spacing: .045em; cursor: pointer; }
.admin-invite-button:disabled { cursor: wait; opacity: .55; }
.admin-invite-modal { background: rgba(4,7,9,.82); }
.admin-invite-modal .auth-card input { user-select: all; }
.admin-jobs-button { display: none; flex: 0 0 auto; padding: 4px 10px; border: 1px solid #59643b; color: #d8dfa4; background: #202412; font-size: 10px; font-weight: 800; letter-spacing: .045em; cursor: pointer; }
.is-admin .admin-jobs-button { display: inline-block; }
.admin-role-tab { display: none; }
.is-admin .admin-role-tab { display: inline-flex; }
.admin-jobs-button:hover { border-color: #849451; background: #2a3017; }
.admin-jobs-backdrop { z-index: 4300; }
.admin-jobs-panel { width: min(1220px, 100%); max-height: calc(100vh - 48px); overflow: hidden; border: 1px solid #4a4f38; background: #0e1215; box-shadow: 0 24px 80px rgba(0,0,0,.72); }
.admin-jobs-close { align-self: stretch; min-width: 74px; border: 0; border-left: 1px solid #39402d; color: #bdc78a; background: #202418; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.admin-jobs-close:hover { color: #f0f5c2; background: #2b311d; }
.admin-jobs-body { max-height: calc(100vh - 83px); overflow: auto; }
.admin-jobs-summary { display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr)); border-bottom: 1px solid #30362a; background: #121713; }
.admin-jobs-summary div { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border-right: 1px solid #30362a; }
.admin-jobs-summary div:last-child { border-right: 0; }
.admin-jobs-summary span { color: #818b70; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.admin-jobs-summary strong { color: #e2e9b2; font: 600 22px var(--font-data); }
.admin-jobs-meta { padding: 8px 12px; border-bottom: 1px solid #273039; color: #71808a; font: 9px var(--font-data); letter-spacing: .04em; text-align: right; }
.admin-jobs-table-wrap { overflow: auto; }
.admin-jobs-table { width: 100%; min-width: 940px; border-collapse: collapse; table-layout: fixed; }
.admin-jobs-table th { padding: 9px 12px; border-bottom: 1px solid #34404a; color: #73818c; background: #11171b; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-align: left; }
.admin-jobs-table th:nth-child(1) { width: 15%; }
.admin-jobs-table th:nth-child(2) { width: 25%; }
.admin-jobs-table th:nth-child(3) { width: 36%; }
.admin-jobs-table th:nth-child(4) { width: 24%; }
.admin-jobs-table td { padding: 10px 12px; border-bottom: 1px solid #242d34; color: #c7d0d6; vertical-align: top; }
.admin-job-row:not(.queued) td:first-child { box-shadow: inset 3px 0 #65b895; }
.admin-job-row.queued td:first-child { box-shadow: inset 3px 0 #9c8845; }
.admin-job-row.clip td:first-child { box-shadow: inset 3px 0 #5d91b4; }
.admin-jobs-table td > strong, .admin-jobs-table td > span, .admin-jobs-table td > code, .admin-jobs-table td > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-jobs-table td > strong { color: #e1e7eb; font-size: 11px; }
.admin-jobs-table td > small { margin-top: 5px; color: #788791; font: 9px var(--font-data); }
.admin-job-kind, .admin-job-state { color: #cbd58f; font-size: 10px; font-weight: 800; letter-spacing: .055em; }
.admin-job-row.clip .admin-job-kind { color: #9ecce9; }
.admin-jobs-table code { margin-top: 5px; color: #687780; font: 9px var(--font-data); }
.admin-jobs-empty { padding: 44px 16px; color: #75806d; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: center; }
@media (max-width: 760px) { .admin-jobs-summary { grid-template-columns: repeat(3, 1fr); } .admin-jobs-summary div:nth-child(3) { border-right: 0; } .admin-jobs-panel { max-height: calc(100vh - 20px); } .admin-jobs-body { max-height: calc(100vh - 60px); } }

/* Admin Role Explorer */
.role-explorer-page { position: fixed; inset: var(--command-bar-height, 42px) 0 24px; z-index: 20; overflow: auto; padding: 18px; color: #dce5ea; background: #090d10; }
.role-explorer-page > * { width: min(1680px, 100%); margin-right: auto; margin-left: auto; }
.role-explorer-header { display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); margin-bottom: 14px; border: 1px solid #34424b; background: #10171b; }
.role-explorer-header > div:first-child { padding: 18px; }
.role-explorer-header span, .data-card > header span { display: block; color: #7f939e; font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.role-explorer-header h1 { margin: 4px 0 6px; font-size: 24px; letter-spacing: -.025em; }
.role-explorer-header p { max-width: 720px; margin: 0; color: #90a0a9; font-size: 11px; line-height: 1.55; }
.role-slice-picker { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-left: 1px solid #34424b; }
.role-revision-picker { display: flex; min-width: 0; overflow-x: auto; border-bottom: 1px solid #34424b; background: #0a1013; }
.role-revision-option { flex: 0 0 auto; min-height: 30px; padding: 5px 10px; border: 0; border-right: 1px solid #29353c; color: #687b85; background: #0a1013; font: 8px var(--font-data); letter-spacing: .035em; }
.role-revision-option:hover, .role-revision-option.selected { color: #dce8ed; background: #172127; box-shadow: inset 0 -2px #62b48e; }
.role-map-picker { display: grid; grid-template-columns: repeat(7, minmax(108px, 1fr)); align-content: stretch; min-width: 0; }
.role-slice-option { display: grid; align-content: center; gap: 4px; min-height: 56px; padding: 8px 10px; border: 0; border-right: 1px solid #29353c; border-bottom: 1px solid #29353c; color: #a7b5bc; background: #0d1317; text-align: left; cursor: pointer; }
.role-slice-option:hover, .role-slice-option.selected { color: #edf5f8; background: #172127; box-shadow: inset 3px 0 #62b48e; }
.role-slice-option.failed { box-shadow: inset 3px 0 #a35b52; }
.role-slice-option span, .role-slice-option small { overflow: hidden; color: #63757f; font: 8px var(--font-data); text-overflow: ellipsis; white-space: nowrap; }
.data-card { min-width: 0; margin-bottom: 14px; border: 1px solid #34424b; background: #0f1519; }
.data-card > header { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-bottom: 1px solid #2c3941; background: #121b20; }
.data-card > header strong { color: #b9c8cf; font-size: 10px; letter-spacing: .075em; }
.data-card-metric { display: grid; min-width: 0; gap: 3px; padding: 11px 13px; border-right: 1px solid #27333a; }
.data-card-metric span { color: #758993; font-size: 8px; font-weight: 800; letter-spacing: .075em; }
.data-card-metric strong { min-width: 0; overflow-wrap: anywhere; color: #e1e9ed; font: 600 19px var(--font-data); }
.data-card-metric small { color: #6f818a; font: 9px var(--font-data); }
.role-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.role-summary-grid.aggregate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-summary-grid .data-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-summary-grid .data-card > header { grid-column: 1 / -1; }
.role-provenance-card .data-card-metric strong { font-size: 15px; }
.role-evaluation-card { border-left: 3px solid #c18b51; }
.role-evaluation-card p, .role-evaluation-card ol { margin: 12px 16px; color: #bbc9d0; font-size: 13px; line-height: 1.6; }
.role-evaluation-card ol { padding-left: 20px; }
.role-disclosure { min-width: 0; margin-bottom: 14px; border: 1px solid #34424b; background: #0f1519; }
.role-disclosure > summary { padding: 13px; color: #c4d2d9; font-size: 12px; cursor: pointer; }
.role-disclosure > summary:focus-visible { outline: 2px solid #62b48e; outline-offset: -2px; }
.role-disclosure > .data-card { margin-bottom: 0; border: 0; border-top: 1px solid #34424b; }
.role-analysis-sidebar > .role-disclosure { margin-bottom: 0; }

.role-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); align-items: start; gap: 14px; margin-bottom: 14px; }
.role-analysis-grid > .data-card, .role-analysis-sidebar > .data-card { margin-bottom: 0; }
.role-analysis-sidebar { display: grid; min-width: 0; gap: 14px; }
.role-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 14px; }
.role-detail-grid > .data-card { margin-bottom: 14px; }
.role-failed-layout { display: grid; grid-template-columns: minmax(440px, 1.15fr) minmax(540px, .85fr); align-items: start; gap: 14px; }
.role-failed-layout .role-summary-grid { grid-template-columns: 1fr; gap: 0; }
.role-failed-layout .role-summary-grid .data-card { margin-bottom: 14px; }
.role-eligibility-card { border-color: #6d5540; }
.role-eligibility-card > header { background: #201912; }
.role-eligibility-intro { padding: 20px; border-bottom: 1px solid #3d3328; }
.role-eligibility-intro strong { color: #e7c498; font-size: 15px; letter-spacing: .035em; }
.role-eligibility-intro p { max-width: 720px; margin: 8px 0 0; color: #a89987; font-size: 11px; line-height: 1.55; }
.role-eligibility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-eligibility-item { display: grid; gap: 7px; min-width: 0; padding: 15px; border-right: 1px solid #3d3328; }
.role-eligibility-item:last-child { border-right: 0; }
.role-eligibility-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.role-eligibility-label span, .role-eligibility-item small { color: #897c6d; font-size: 8px; font-weight: 800; letter-spacing: .065em; }
.role-eligibility-label strong { color: #ead6bb; font: 600 16px var(--font-data); }
.role-eligibility-track { height: 7px; border: 1px solid #463b2f; background: #0c0d0d; }
.role-eligibility-fill { height: 100%; background: #c18b51; }
.role-pipeline-progress { border-color: #3c5148; }
.role-pipeline-progress.running > header { box-shadow: inset 3px 0 #d1a85e; }
.role-pipeline-progress.complete > header { box-shadow: inset 3px 0 #62b48e; }
.role-pipeline-progress.failed > header { box-shadow: inset 3px 0 #b66157; }
.role-pipeline-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.role-pipeline-message { padding: 18px 13px; color: #80929b; font: 9px var(--font-data); letter-spacing: .05em; }
.role-pipeline-message.error { color: #e0a49d; }
.role-pipeline-track { height: 8px; border-top: 1px solid #27333a; border-bottom: 1px solid #27333a; background: #080d0f; }
.role-pipeline-fill { height: 100%; background: #62b48e; transition: width .2s linear; }
.role-pipeline-progress.running .role-pipeline-fill { background: #d1a85e; }
.role-pipeline-progress.failed .role-pipeline-fill { background: #b66157; }
.role-pipeline-detail { display: flex; justify-content: space-between; gap: 18px; padding: 8px 12px; color: #74868f; font: 9px var(--font-data); }
.role-pipeline-detail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-annotation-card { margin-bottom: 14px; border-color: #43554d; }
.role-annotation-controls { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) auto; align-items: end; border-bottom: 1px solid #2b373e; background: #0b1114; }
.role-annotation-controls > div { padding: 10px; border-right: 1px solid #2b373e; }
.role-annotation-controls span, .role-annotation-evidence span, .role-annotation-priors > span, .role-annotation-notes > span, .role-annotation-replay-panel > span { display: block; margin-bottom: 6px; color: #71838c; font-size: 8px; font-weight: 800; letter-spacing: .065em; }
.role-annotation-controls div div { display: flex; }
.role-annotation-controls button, .role-annotation-duty button { padding: 6px 8px; border: 1px solid #34424b; border-right: 0; color: #84949c; background: #10171b; font: 8px var(--font-data); cursor: pointer; }
.role-annotation-controls button:last-child, .role-annotation-duty button:last-child { border-right: 1px solid #34424b; }
.role-annotation-controls button.selected, .role-annotation-duty button.selected { color: #dce8ed; background: #203029; box-shadow: inset 0 -2px #62b48e; }
.role-annotation-controls .role-annotation-load { min-height: 100%; border: 0; border-left: 1px solid #34424b; color: #b9d8ca; background: #17251f; font-weight: 800; }
.role-annotation-empty, .role-annotation-error { padding: 18px; color: #82949d; font-size: 10px; line-height: 1.5; }
.role-annotation-error { color: #e0a49d; }
.role-annotation-identity { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid #2b373e; }
.role-annotation-replay-panel { padding: 12px; border-bottom: 1px solid #2b373e; background: #0b1114; }
.role-annotation-replay { min-height: 398px; border: 1px solid #303e46; background: #080d0f; overflow: hidden; }
.role-annotation-replay-canvas { display: block; width: 100%; }
.role-annotation-replay-controls { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px; border-top: 1px solid #303e46; background: #10171b; }
.role-annotation-replay-controls button { padding: 6px 12px; border: 1px solid #426352; color: #d9eee4; background: #1b3429; font: 800 8px var(--font-data); cursor: pointer; }
.role-annotation-replay-controls input { flex: 1; min-width: 120px; }
.role-annotation-replay-controls span { min-width: 165px; color: #9aabb3; font: 9px var(--font-data); text-align: right; }
.role-annotation-evidence { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); border-bottom: 1px solid #2b373e; }
.role-annotation-evidence > div { min-width: 0; padding: 12px; border-right: 1px solid #2b373e; }
.role-annotation-evidence > div:last-child { border-right: 0; }
.role-annotation-evidence pre, .role-annotation-priors pre { max-height: 260px; margin: 0; overflow: auto; color: #a9bbc3; background: #080d0f; font: 9px/1.45 var(--font-data); white-space: pre-wrap; }
.role-annotation-priors { padding: 12px; border-bottom: 1px solid #2b373e; }
.role-annotation-priors > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #2b373e; }
.role-annotation-priors pre { padding: 10px; }
.role-annotation-duties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-annotation-duty { min-width: 0; padding: 10px; border-right: 1px solid #2b373e; border-bottom: 1px solid #2b373e; }
.role-annotation-duty strong { display: block; margin-bottom: 7px; color: #c4d0d5; font-size: 9px; letter-spacing: .035em; }
.role-annotation-duty > div { display: flex; }
.role-annotation-notes { display: block; padding: 12px; }
.role-annotation-notes textarea { width: 100%; min-height: 64px; padding: 8px; border: 1px solid #34424b; color: #d3dde1; background: #0b1114; resize: vertical; }
.role-annotation-submit { width: 100%; padding: 11px; border: 0; border-top: 1px solid #426352; color: #d9eee4; background: #1b3429; font: 800 9px var(--font-data); letter-spacing: .055em; cursor: pointer; }
.role-annotation-submit:disabled { border-color: #303a3f; color: #59676e; background: #11171a; cursor: not-allowed; }
.role-loading, .role-error, .role-empty { padding: 36px 20px; border: 1px solid #34424b; color: #7f929b; background: #0f1519; text-align: center; }
.role-error { border-color: #6d413d; color: #e0a49d; }
.role-empty strong { display: block; color: #b9c8cf; font-size: 12px; letter-spacing: .07em; }
.role-empty p { margin: 8px 0 0; }
.role-gates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-gate { display: grid; min-width: 0; overflow-wrap: anywhere; gap: 4px; padding: 12px; border-right: 1px solid #27333a; box-shadow: inset 0 3px #62b48e; }
.role-gate.fail { box-shadow: inset 0 3px #b66157; }
.role-gate span, .role-gate small { color: #71838c; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.role-gate strong { font: 600 20px var(--font-data); }
.data-table-wrap { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 9px 12px; border-bottom: 1px solid #33414a; color: #72848d; background: #11191e; font-size: 8px; letter-spacing: .07em; text-align: left; white-space: nowrap; }
.data-table td { padding: 9px 12px; border-bottom: 1px solid #222d33; color: #bbc7cd; font-size: 10px; vertical-align: top; }
.data-table td.number { font-family: var(--font-data); text-align: right; }
.data-table-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 9px 12px; border-top: 1px solid #2c3941; }
.data-table-pagination span { color: #758993; font: 8px var(--font-data); }
.data-table-pagination button { min-height: 27px; padding: 4px 8px; border: 1px solid #3f5360; color: #a9c7d5; background: #111c22; font-size: 8px; font-weight: 800; }
.role-status { display: inline-block; min-width: 44px; padding: 3px 5px; border: 1px solid #416c59; color: #91d5b6; font-size: 8px; font-weight: 800; text-align: center; }
.role-status.fail { border-color: #704640; color: #e1a099; }
.role-status.selected { border-color: #4b7c68; color: #a9ddc5; }
.role-status.compared { border-color: #46535a; color: #87969d; }
.role-component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.role-component-card { min-width: 0; padding: 10px; border-right: 1px solid #2b373e; border-bottom: 1px solid #2b373e; background: #0d1317; }
.role-component-card.selected { box-shadow: inset 3px 0 #65b895; background: #131d21; }
.role-component-select { display: grid; width: 100%; margin-bottom: 9px; padding: 7px 8px; border: 1px solid #34424b; color: #c8d3d8; background: #121a1f; text-align: left; cursor: pointer; }
.role-component-select span { color: #79b89a; font: 800 9px var(--font-data); }
.role-component-select strong { margin: 3px 0; font-size: 13px; }
.role-component-select small { color: #75858d; font: 8px var(--font-data); }
.role-archetype-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.role-suggestion-badge { padding: 3px 5px; border: 1px solid #46535a; color: #93a2aa; font: 7px var(--font-data); letter-spacing: .03em; }
.role-suggestion-badge.primary { border-color: #416c59; color: #9fd7bd; }
.role-neutral-descriptors { line-height: 1.45; }
.role-component-card label { display: grid; gap: 3px; margin-top: 7px; color: #778a93; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.role-component-card input, .role-component-card textarea, .role-profile-filter input { box-sizing: border-box; width: 100%; padding: 7px 8px; border: 1px solid #34424b; border-radius: 0; color: #dbe5e9; background: #090e11; font: 10px var(--font-data); }
.role-component-card textarea { min-height: 50px; resize: vertical; }
.role-save-label, .role-publish-labels, .role-profile-filter button, .role-round-detail button { min-height: 29px; padding: 5px 9px; border: 1px solid #4b6d5d; border-radius: 0; color: #bce1cf; background: #16251e; font-size: 8px; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
.role-save-label { margin-top: 8px; }
.role-publish-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 12px; color: #75868e; font-size: 9px; }
.role-message { padding: 8px 12px; border-top: 1px solid #2d3a41; color: #9fceb8; font: 9px var(--font-data); }
.role-signature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #27333a; }
.role-signature > div { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(120px, 2fr) 56px; align-items: center; gap: 8px; padding: 7px 10px; background: #0d1317; }
.role-signature span { overflow: hidden; color: #8798a0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.role-signature strong { font: 9px var(--font-data); text-align: right; }
.role-signature-track, .role-bar-track { height: 5px; background: #202b31; }
.role-signature-fill, .role-bar-fill { height: 100%; background: #64ae8d; }
.role-signature-fill.negative { margin-left: auto; background: #b86a61; }
.role-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 0; padding: 0; list-style: none; }
.role-routes li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-right: 1px solid #27333a; border-bottom: 1px solid #27333a; }
.role-routes strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.role-routes span { color: #70828b; font: 9px var(--font-data); white-space: nowrap; }
.role-scatter { display: block; position: relative; width: calc(100% - 24px); min-height: 520px; margin: 12px auto; border: 1px solid #303e46; background: #0a0f12; box-shadow: inset 0 0 0 1px #111a1f; }
.role-chart-note { margin: 10px 12px 0; color: #778b95; font: 10px/1.5 monospace; letter-spacing: .04em; }
.role-profile-filter { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid #2c3941; }
.role-profile-filter input { max-width: 280px; }
.role-filter-card { border-color: #3d4f59; }
.role-filter-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.role-filter-groups > div { min-width: 0; padding: 10px; border-right: 1px solid #2c3941; }
.role-filter-groups > div:last-child { border-right: 0; }
.role-filter-groups > div > span { display: block; margin-bottom: 7px; color: #758993; font-size: 8px; font-weight: 800; letter-spacing: .075em; }
.role-filter-groups > div > div { display: flex; flex-wrap: wrap; gap: 4px; }
.role-filter-option { min-height: 27px; padding: 4px 7px; border: 1px solid #34424b; color: #85969e; background: #0b1114; font-size: 8px; font-weight: 800; }
.role-filter-option:hover, .role-filter-option.selected { border-color: #4c8069; color: #bde2d0; background: #16251e; }
.role-archetype-evidence .data-table { min-width: 960px; }
.role-archetype-evidence .data-table td:nth-child(5), .role-archetype-evidence .data-table td:nth-child(6) { min-width: 220px; color: #8799a1; font: 8px/1.5 var(--font-data); }
.role-archetype-evidence .data-table td strong, .role-archetype-evidence .data-table td small { display: block; }
.role-archetype-evidence .data-table td small { margin-top: 3px; color: #667982; font: 8px var(--font-data); }
.role-evidence-template, .role-novel-note { margin: 0; padding: 10px 12px; border-top: 1px solid #2b373e; color: #8799a1; font-size: 10px; line-height: 1.5; }
.role-novel-note { color: #d2b17b; }
.role-posterior-bars { display: grid; min-width: 170px; gap: 3px; }
.role-posterior-bars > div { display: grid; grid-template-columns: 22px minmax(70px, 1fr) 42px; align-items: center; gap: 5px; }
.role-posterior-bars span, .role-posterior-bars strong { font: 8px var(--font-data); }
.role-performance-card { border-color: #5b5335; }
.role-performance-card > header { background: #211d12; }
.role-performance-card .data-table tr.selected td { background: #17221e; }
.role-round-detail { position: fixed; z-index: 4500; top: 48px; right: 0; bottom: 24px; width: min(520px, 100vw); overflow: auto; border-left: 1px solid #4a5961; background: #0b1114; box-shadow: -20px 0 60px rgba(0,0,0,.65); }
.role-round-detail > header { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid #34424b; background: #141d22; }
.role-round-detail > header div { display: grid; gap: 3px; }
.role-round-detail > header span { color: #71848e; font-size: 8px; }
.role-round-detail > .role-posterior-bars, .role-round-context { margin: 12px; }
.role-round-context { display: grid; gap: 5px; color: #82949d; font: 9px var(--font-data); }
.role-round-detail h3 { margin: 14px 12px 6px; color: #80929b; font-size: 9px; letter-spacing: .07em; }
.role-round-detail table { width: calc(100% - 24px); margin: 0 12px; border-collapse: collapse; }
.role-round-detail td { padding: 6px 8px; border-bottom: 1px solid #253139; color: #aebbc1; font-size: 8px; }

@media (max-width: 1200px) {
  .role-analysis-grid, .role-failed-layout, .role-detail-grid { grid-template-columns: 1fr; }
  .role-map-picker { grid-template-columns: repeat(4, minmax(108px, 1fr)); }
}
@media (max-width: 980px) {
  .role-explorer-header { grid-template-columns: 1fr; }
  .role-slice-picker { border-top: 1px solid #34424b; border-left: 0; }
  .role-summary-grid { grid-template-columns: 1fr; }
  .role-summary-grid.aggregate { grid-template-columns: 1fr; }
  .role-pipeline-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-gates { grid-template-columns: repeat(3, 1fr); }
  .role-signature { grid-template-columns: 1fr; }
  .role-filter-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .role-explorer-page { padding: 10px; }
  .role-explorer-page .data-card > header { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  .role-annotation-controls, .role-annotation-evidence { grid-template-columns: minmax(0, 1fr); }
  .role-map-picker { grid-template-columns: repeat(2, minmax(108px, 1fr)); }
  .role-eligibility-grid { grid-template-columns: 1fr; }
  .role-eligibility-item { border-right: 0; border-bottom: 1px solid #3d3328; }
  .role-scatter { min-height: 420px; }
  .role-filter-groups { grid-template-columns: 1fr; }
}
.match-downloads-button { padding: 4px 8px; border: 1px solid #356b86; color: #9ed2ea; background: #112330; font-size: 10px; font-weight: 750; letter-spacing: .06em; cursor: pointer; }
.match-downloads-button:hover { border-color: #59a9ce; background: #173346; }
.match-history-manager-backdrop { z-index: 4200; }
.match-history-manager { width: min(980px, 100%); max-height: calc(100vh - 48px); overflow: hidden; border: 1px solid #3b4651; background: #10151a; box-shadow: 0 24px 80px rgba(0,0,0,.7); }
.match-history-manager-body { max-height: calc(100vh - 84px); overflow: auto; }
.match-history-toolbar { position: sticky; z-index: 2; top: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #35414c; background: #10151a; }
.match-history-toolbar button { min-height: 38px; padding: 0 12px; border: 1px solid #35414c; color: #98a7b2; background: #151b20; font-size: 12px; font-weight: 750; letter-spacing: .04em; cursor: pointer; }
.match-history-toolbar button[data-refresh] { color: #9ed2ea; border-color: #356b86; background: #112330; }
.match-history-toolbar button:disabled { cursor: wait; opacity: .55; }
.match-history-card-list { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 16px 16px; }
.match-history-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; min-width: 0; padding: 14px 16px; border: 1px solid #33404a; background: #0c1115; }
.match-history-card.ready { border-color: #35634f; background: #0d1712; }
.match-history-card.acquiring, .match-history-card.analyzing, .match-history-card.queued, .match-history-card.retrying { border-color: #65582e; background: #17150e; }
.match-history-card.failed { border-color: #68383d; background: #1a1013; }
.match-history-summary, .match-history-action { display: grid; gap: 5px; }
.match-history-summary strong { color: #e4ebef; font-size: 20px; letter-spacing: .06em; }
.match-history-summary time { color: #7e8d98; font-size: 13px; letter-spacing: .03em; }
.match-history-summary small { max-width: 620px; color: #b39463; font-size: 11px; line-height: 1.4; }
.match-history-action { min-width: 180px; justify-items: stretch; }
.match-history-action b { color: #d9b75d; font: 700 20px var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; }
.match-history-action button { min-width: 180px; min-height: 38px; padding: 0 12px; border: 1px solid #356b86; color: #9ed2ea; background: #112330; font-size: 12px; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.match-history-action button:disabled { color: #728078; border-color: #2c3b32; background: #111712; cursor: default; }
.match-history-credentials-form p { margin: 0; padding: 12px; border-bottom: 1px solid #202832; color: #8c98a4; line-height: 1.5; }
.match-history-credentials-form p a { color: #9ed2ea; }
.match-history-credentials-form label { display: grid; gap: 6px; padding: 10px 12px 0; color: #8996a2; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.match-history-credentials-form input { width: 100%; height: 32px; padding: 0 9px; border: 1px solid #35414c; outline: 0; color: #e1e7ec; background: #090d11; font-family: var(--font-ui); font-size: 12px; }
.match-history-credentials-form input:focus { border-color: #4b91b4; box-shadow: inset 2px 0 #4aa7d8; }
@media (max-width: 680px) { .match-history-toolbar { align-items: stretch; flex-wrap: wrap; } .match-history-toolbar button { flex: 1; } .match-history-card-list { padding: 10px; } .match-history-card { gap: 12px; padding: 12px; } .match-history-action { min-width: 132px; } .match-history-action button { min-width: 132px; } }
.analysis-progress { position: fixed; z-index: 1000; top: 42px; left: 50%; width: min(560px, calc(100vw - 32px)); padding: 10px 12px; transform: translateX(-50%); border: 1px solid #35634f; background: rgba(10,17,14,.97); box-shadow: 0 12px 38px rgba(0,0,0,.6); }
.analysis-progress[hidden] { display: none; }
.analysis-progress-copy { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; margin-bottom: 7px; font-size: 10px; }
#analysis-progress-stage { color: #75d0a5; font-weight: 800; letter-spacing: .1em; }
#analysis-progress-message { overflow: hidden; color: #b9c8c1; text-overflow: ellipsis; white-space: nowrap; }
#analysis-progress-count { color: #71827a; }
.analysis-progress-track { height: 4px; overflow: hidden; background: #17231e; }
#analysis-progress-fill { width: 0; height: 100%; background: #57bd8c; transition: width .18s ease; }
.analysis-progress.indeterminate #analysis-progress-fill { width: 34%; animation: analysis-progress-slide 1.1s ease-in-out infinite; }
@keyframes analysis-progress-slide { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
.workstation {
  display: grid;
  grid-template-columns: clamp(240px, 28%, 300px) minmax(0, 1fr) clamp(320px, 22vw, 400px);
  grid-template-rows: auto minmax(0, 1fr) 24px;
  width: var(--ui-scaled-width);
  height: var(--ui-scaled-height);
  transform: scale(var(--ui-scale));
  transform-origin: top left;
  background: #0a0d10;
}
.workstation:focus { outline: none; }
.command-bar { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-bottom: 1px solid #29313a; background: #11161b; letter-spacing: .04em; }
.command-bar strong { color: #f0f4f8; }
.command-bar.app-header { max-width: var(--ui-scaled-width); z-index: 90; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: 42px; align-items: stretch; gap: 0; padding: 0; background: #0a0d10; }
.app-brand { display: flex; grid-column: 1; grid-row: 1; align-items: center; padding: 0 14px; background: #11171c; white-space: nowrap; }
.app-header-primary { display: flex; min-width: 0; grid-column: 2; grid-row: 1; align-items: center; gap: 10px; padding-right: 14px; background: #11171c; }
.app-header-navigation { display: flex; min-width: 0; height: 100%; align-items: center; flex: 0 1 auto; overflow-x: auto; scrollbar-width: thin; }
.match-hierarchy-chevron { width: 14px; height: 14px; flex: 0 0 14px; margin: 0 5px; filter: invert(65%); }
.app-header-primary > .app-tabs, .match-context-tabs { flex-shrink: 0; }
@media (max-width: 900px) { .app-header-primary { gap: 4px; padding-right: 4px; } .app-header.has-match-context .app-brand { display: none; } .command-bar.app-header.has-match-context { grid-template-columns: minmax(0, 1fr); } .app-header.has-match-context .app-header-primary { grid-column: 1; gap: 3px; padding-right: 4px; } .app-header .match-context-tab { min-width: 58px; padding-inline: 8px; } }
.app-header-navigation .app-tabs { margin-left: 0; }
.app-header-spacer { min-width: 8px; flex: 1 1 auto; }
.match-context-tabs { position: static; display: flex; width: max-content; height: 100%; align-items: stretch; border: 0; background: #0f171d; }
.match-context-tab { min-width: 82px; padding: 0 14px; border: 0; border-right: 1px solid #344550; color: #7f909b; background: #0f171d; font-size: 10px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; cursor: pointer; }
.match-context-tab:first-child { min-width: 96px; color: #a9c4d2; }
.match-context-tab:last-child { border-right: 0; }
.match-context-tab:hover { color: #edf5f8; background: #17242c; }
.match-context-tab.active { color: #f1f8fb; background: #172a34; box-shadow: inset 0 -2px #58a7cc; }
.import-menu { position: relative; }
.import-button { padding: 4px 8px; border: 1px solid #5f4a24; color: #e5b45b; background: #1c1811; font-size: 10px; letter-spacing: .06em; }
.import-dropdown { position: absolute; z-index: 50; top: calc(100% + 5px); left: 0; display: grid; width: 190px; padding: 4px; border: 1px solid #414c56; background: #10151a; box-shadow: 0 12px 30px rgba(0,0,0,.55); }
.import-dropdown button { padding: 7px 9px; border: 0; color: #c8d0d6; background: transparent; text-align: left; font-size: 10px; letter-spacing: .04em; }
.import-dropdown button:hover { color: #fff; background: #202a33; }
.admin-menu { position: relative; flex: 0 0 auto; }
.admin-menu-button { min-width: 82px; border: 1px solid #59643b; color: #d8dfa4; background: #202412; font-weight: 800; letter-spacing: .05em; }
.admin-menu-button:hover { border-color: #849451; background: #2a3017; }
.admin-dropdown { position: absolute; z-index: 140; top: calc(100% + 7px); right: 0; display: grid; width: 230px; padding: 6px; border: 1px solid #59643b; background: #11160e; box-shadow: 0 18px 54px rgba(0,0,0,.72); }
.admin-dropdown button, .admin-dropdown a { text-decoration: none; min-height: 34px; padding: 7px 9px; border: 0; border-bottom: 1px solid #303822; color: #cbd49b; background: transparent; font-size: 10px; font-weight: 750; letter-spacing: .045em; text-align: left; }
.admin-dropdown button:last-child { border-bottom: 0; }
.admin-dropdown button:hover:not(:disabled), .admin-dropdown a:hover { color: #f1f6c4; background: #252c16; }
.admin-dropdown button:disabled { color: #5d624a; cursor: default; }
.reanalyze-button { display: none; padding: 4px 8px; border: 1px solid #385942; color: #78c897; background: #101b14; font-size: 10px; letter-spacing: .06em; }
.is-admin .reanalyze-button { display: inline-block; }
.reanalyze-button:disabled { color: #59635d; border-color: #29332d; background: #111612; }
.web-command-actions { display: flex; align-items: center; gap: 8px; }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.app-header-primary .topbar-right { margin-left: 0; }
.web-command-controls { display: flex; align-items: center; gap: 8px; }
.profile-menu { position: relative; flex: 0 0 auto; }
.profile-button, .topbar-icon-button { height: 30px; border: 1px solid #394854; color: #b8c5ce; background: #151d23; font-weight: 750; letter-spacing: .04em; }
.profile-button { display: flex; max-width: 220px; align-items: center; gap: 7px; padding: 0 8px 0 4px; }
.profile-avatar { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.profile-button-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chevron { width: 12px; height: 12px; flex: 0 0 auto; opacity: .62; filter: invert(73%); transform: rotate(90deg); }
.profile-button:hover, .topbar-icon-button:hover { color: #e9f2f7; border-color: #597080; background: #1a252d; }
.profile-dropdown { position: absolute; z-index: 120; top: calc(100% + 8px); right: 0; display: grid; width: 220px; gap: 8px; padding: 10px; border: 1px solid var(--border-strong); background: rgba(13,19,24,.99); box-shadow: 0 18px 54px rgba(0,0,0,.72); }
.profile-dropdown[hidden] { display: none; }
.profile-identity { overflow: hidden; padding: 3px 4px 8px; border-bottom: 1px solid #29343d; color: #778691; font-size: 10px; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.profile-steam-link { min-height: 32px; padding: 9px 8px; border: 1px solid #34566a; color: #9ed2ea; background: #112330; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-align: center; text-decoration: none; }
.profile-steam-link:hover { border-color: #59a9ce; background: #173346; }
.profile-admin-jobs { min-height: 34px; border: 1px solid #59643b; color: #d8dfa4; background: #202412; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.profile-admin-jobs:hover { border-color: #849451; background: #2a3017; }
.profile-logout { min-height: 34px; border: 1px solid #6a3d43; color: #e69aa0; background: #241519; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.profile-logout:hover:not(:disabled) { border-color: #98525b; background: #321a20; }
.profile-logout:disabled { cursor: wait; opacity: .6; }
.left-pane, .center-pane, .right-pane { min-width: 0; min-height: 0; overflow: hidden; }
.left-pane { grid-column: 1; grid-row: 2; border-right: 1px solid #29313a; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; background: #0e1216; }
.center-pane { grid-column: 2; grid-row: 2; display: grid; grid-template-rows: minmax(220px, 1fr) clamp(120px, 25%, 190px) 42px; }
.right-pane { grid-column: 3; grid-row: 2; display: grid; grid-template-rows: minmax(150px, 2fr) minmax(130px, 2fr) minmax(180px, 3fr); border-left: 1px solid #29313a; background: #0b0f13; }
.panel { border-bottom: 1px solid #29313a; background: #0c1014; min-width: 0; min-height: 0; }
.section-header { height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; background: #141a20; border-bottom: 1px solid #29313a; color: #98a4af; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.count { min-width: 24px; text-align: right; color: #65717d; }
.table-block { min-height: 100px; border-bottom: 1px solid #29313a; overflow: hidden; }
.table-block.players { min-height: 378px; flex: 0 0 auto; }
.players .rows { height: auto; overflow: visible; }
.table-block.engagements { flex: 1; }
.engagements .row { grid-template-columns: minmax(0, 1fr) 96px 58px; min-height: 54px; cursor: pointer; }
.engagement-participants, .engagement-time { display: flex; min-width: 0; flex-direction: column; gap: 2px; overflow: hidden; }
.engagement-participants strong, .engagement-participants small, .engagement-time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engagement-participants small, .engagement-time small { color: #71808b; font-size: 8px; letter-spacing: .04em; }
.engagement-flags { color: #d8ae58 !important; }
.engagement-event-count { display: flex; flex-direction: column; gap: 2px; color: #9ed2ea; text-align: right; }
.engagement-event-count small { color: #71808b; font-size: 8px; }
.rows { height: calc(100% - 26px); overflow: auto; }
.row { display: grid; grid-template-columns: 1fr 90px 44px; width: 100%; min-height: 26px; align-items: center; gap: 6px; padding: 0 8px; border: 0; border-bottom: 1px solid #182028; border-radius: 0; background: transparent; text-align: left; cursor: default; }
.row:hover { background: #151c22; }
.row.selected { background: #193143; box-shadow: inset 2px 0 #4aa7d8; }
.player-team-header, .players .player-row { grid-template-columns: minmax(0, 1fr) 24px 24px 38px 38px 34px; }
.player-team-header { display: grid; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-bottom: 1px solid #27323a; color: #687681; background: #10161a; font-size: 9px; font-weight: 800; letter-spacing: .045em; text-align: right; }
.player-team-header strong { text-align: left; }
.player-team-group.team-t .player-team-header strong { color: #d8ae58; }
.player-team-group.team-ct .player-team-header strong { color: #69b8dc; }
.players .player-row { min-height: 30px; height: 30px; gap: 4px; cursor: pointer; }
.player-row:disabled { cursor: wait; opacity: .58; }
.player-browser-name { display: flex; min-width: 0; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; }
.player-number-key { display: grid; flex: 0 0 17px; width: 17px; height: 17px; place-items: center; border: 1px solid #46525c; color: #d9e0e5; background: #151c22; font-size: 8px; font-weight: 900; line-height: 15px; text-align: center; }
.team-t .player-number-key { border-color: #745d31; color: #e2bb68; }
.team-ct .player-number-key { border-color: #376b84; color: #79c2e4; }
.player-browser-label { flex: 0 1 58px; min-width: 34px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.player-live-loadout { display: flex; min-width: 0; align-items: center; gap: 1px; overflow: hidden; }
.equipment-item { position: relative; display: inline-flex; min-width: 30px; height: 22px; align-items: center; justify-content: center; border-bottom: 1px solid #34404a; color: #a9b5be; }
.equipment-item img { display: block; width: 30px; max-height: 17px; object-fit: contain; filter: brightness(0) invert(78%) sepia(8%) saturate(291%) hue-rotate(161deg); }
.equipment-item.compact { min-width: 18px; width: 18px; height: 14px; border: 0; }
.equipment-item.compact img { width: 18px; max-height: 10px; }
.equipment-fallback { max-width: 48px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.equipment-count { position: absolute; right: -1px; bottom: -2px; padding: 0 1px; color: #f1dc83; background: #10161a; font-size: 7px; line-height: 9px; }
.player-browser-team { color: #82909c; font-family: var(--font-ui); font-size: 10px; text-align: right; }
.player-stat { color: #aeb9c1; }
.player-browser-status { color: #78909f; font-family: var(--font-ui); font-size: 9px; text-align: right; }
.player-row.selected .player-browser-status { color: #73c7eb; }
.number { font-family: var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; }
.map-panel { position: relative; display: grid; grid-template-rows: 48px 1fr; }
.map-toolbar { position: relative; display: flex; align-items: center; gap: 16px; padding: 0 8px; background: #10161b; border-bottom: 1px solid #29313a; }
.map-toolbar button { padding: 3px 7px; border: 1px solid #34414c; background: #151c22; font-size: 10px; }
.map-score-stack { position: absolute; top: 3px; left: 50%; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); pointer-events: none; }
.map-current-score { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 850; letter-spacing: .03em; line-height: 17px; }
.map-round-clock { display: flex; min-height: 20px; align-items: center; justify-content: center; gap: 5px; color: #e6edf2; font-size: 15px; font-weight: 900; letter-spacing: .035em; line-height: 20px; text-align: center; text-shadow: 0 0 6px rgba(212,228,238,.22); }
.map-round-clock.freeze { color: #aeb9c1; }
.map-round-clock.round-over { color: #687681; }
.map-round-clock.bomb { color: #ffc45a; text-shadow: 0 0 7px rgba(255,162,39,.38); }
.map-round-clock-bomb-icon { width: 14px; height: 14px; object-fit: contain; filter: brightness(0) saturate(100%) invert(78%) sepia(74%) saturate(1067%) hue-rotate(334deg) brightness(103%); }
.map-defuse-clock { margin-left: 3px; padding-left: 7px; border-left: 1px solid #466c7d; color: #72caec; font-size: 10px; letter-spacing: .055em; }
.map-score-t { color: #e1b75e; text-shadow: 0 0 5px rgba(225,183,94,.25); }
.map-score-ct { color: #68bce5; text-shadow: 0 0 5px rgba(104,188,229,.25); }
.map-score-separator { color: #596673; font-size: 10px; }
.map-controls { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.map-controls button { min-width: 25px; height: 20px; padding: 0 5px; cursor: pointer; }
.map-controls button:hover { color: #f0d878; border-color: #746331; }
.heatmap-status { color: #d39945; font-family: var(--font-ui); font-size: 9px; }
.heatmap-status.error { color: #df6971; }
.heatmap-toggle { color: #c08d45; border-color: #5d4729 !important; background: #1d1710 !important; }
.heatmap-toggle.active { color: #ffd681; border-color: #a27634 !important; box-shadow: inset 0 -2px #d69d45; }
.spatial-toggle { color: #80b9cf; border-color: #365f70 !important; background: #101c22 !important; }
.spatial-toggle.active { color: #c5edf9; border-color: #67a9c3 !important; box-shadow: inset 0 -2px #67a9c3; }
.prediction-toggle { color: #83909b; border-color: #35414c !important; background: #11171c !important; }
.prediction-toggle.active { color: #e4bb70; border-color: #8b6734 !important; background: #211a11 !important; box-shadow: inset 0 -2px #d69d45; }
.utility-smoke { color: #aab2b9; }
.utility-flash { color: #f4ecad; }
.utility-he_grenade { color: #8fc769; }
.utility-molotov, .utility-incendiary { color: #e48045; }
.utility-decoy { color: #bd83d4; }
.map-surface { position: relative; container-type: size; display: grid; place-items: center; overflow: hidden; cursor: grab; user-select: none; background: #07090a; }
.map-surface.panning { cursor: grabbing; }
#tactical-map { width: 100%; height: 100%; }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #65717d; pointer-events: none; }
.map-grid { position: relative; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); overflow: visible; background: #111315; }
.map-grid.radar { background-color: #080909; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; box-shadow: 0 0 0 1px #283039, 0 12px 48px rgba(0,0,0,.42); }
.map-vector-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spatial-nav-area { fill: rgba(121, 145, 158, .06); stroke: rgba(180, 205, 216, .48); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: visiblePainted; }
.spatial-nav-area.occupation-terrorist { fill: rgba(214, 164, 74, .20); stroke: rgba(242, 196, 105, .74); }
.spatial-nav-area.occupation-counter_terrorist { fill: rgba(92, 163, 199, .20); stroke: rgba(126, 203, 235, .74); }
.spatial-nav-area.occupation-contested { fill: rgba(202, 93, 104, .25); stroke: rgba(245, 124, 136, .88); }
.spatial-callout-label { fill: #dce8ed; stroke: #081014; stroke-width: 3px; paint-order: stroke; font: 800 16px var(--font-data); letter-spacing: .04em; text-anchor: middle; pointer-events: none; }
.ground-equipment-marker { pointer-events: none; filter: drop-shadow(0 0 2px #050607) drop-shadow(0 0 5px rgba(0,0,0,.85)); }
.ground-equipment-marker image { opacity: .92; filter: brightness(0) invert(89%) sepia(8%) saturate(521%) hue-rotate(155deg); }
.ground-equipment-fallback { fill: #d6dee3; stroke: #080a0c; stroke-width: 2px; paint-order: stroke; text-anchor: middle; dominant-baseline: central; font-family: var(--font-ui); font-size: 7px; font-weight: 800; }
.heatmap-cell { pointer-events: none; mix-blend-mode: screen; filter: blur(5px); }
.heatmap-cell.team-t { fill: #ef9138; }
.heatmap-cell.team-ct { fill: #4ea4d5; }
.heatmap-cell.team-other { fill: #d2dae1; }
.planted-bomb-marker { pointer-events: none; filter: drop-shadow(0 0 3px rgba(9,7,3,.95)) drop-shadow(0 0 10px rgba(255,176,51,.8)); animation: bomb-vector-pulse .72s ease-in-out infinite alternate; }
.bomb-ring { fill: #e99b2e; stroke: #ffdc73; stroke-width: 3; }
.bomb-label, .utility-marker-label { text-anchor: middle; dominant-baseline: central; font-family: var(--font-ui); font-size: 11px; font-weight: 900; pointer-events: none; }
.bomb-label { fill: #211303; }
.bomb-timer { fill: #ffe2a0; stroke: rgba(14,9,3,.96); stroke-width: 4; paint-order: stroke; text-anchor: middle; font-family: var(--font-ui); font-size: 13px; font-weight: 900; pointer-events: none; }
.player-marker { cursor: pointer; overflow: visible; }
.player-hit-target { fill: transparent; }
.player-dot-background { fill: #171c20; }
.player-health-fill { fill: #a9b4bd; }
.player-marker.team-2 .player-health-fill { fill: #d6a44a; }
.player-marker.team-3 .player-health-fill { fill: #5ca3c7; }
.player-utility-damage-flash { fill: rgba(238,54,61,.88); stroke: #ff8a8e; stroke-width: 2; pointer-events: none; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(255,45,54,.92)); }
.player-dot { fill: none; stroke: #0b0d0f; stroke-width: 3; filter: drop-shadow(0 0 1px rgba(255,255,255,.35)); }
.player-marker-number { fill: #11171b; stroke: rgba(232,239,244,.78); stroke-width: 1.35px; paint-order: stroke; text-anchor: middle; dominant-baseline: central; font-family: var(--font-ui); font-size: 8px; font-weight: 950; pointer-events: none; }
.player-forward-rank-badge { pointer-events: none; }
.player-forward-rank-badge rect { fill: #11171b; stroke: #f2c94c; stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.player-forward-rank-badge text { fill: #f7f2df; text-anchor: middle; dominant-baseline: central; font-family: var(--font-data); font-size: 7px; font-weight: 900; }
.player-marker.selected .player-dot { stroke: #f4efe5; stroke-width: 4; filter: drop-shadow(0 0 7px rgba(244,239,229,.65)); }
.player-armor-ring { fill: none; stroke: #a3a9ae; stroke-width: 2; pointer-events: none; vector-effect: non-scaling-stroke; }
.player-marker.dead { opacity: 1; }
.player-marker.dead > :not(.timeline-event-player-highlight) { opacity: .38; }
.player-firing-indicator { pointer-events: none; color: #ffe27a; }
.player-muzzle-core { stroke: #fff0a1; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(255,215,89,.9)); }
.player-muzzle-spark { stroke: #ffe27a; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(255,215,89,.8)); }
.player-flash-indicator { pointer-events: none; color: #fff4a8; }
.player-flash-eye-base { fill: rgba(16,19,21,.94); }
.player-flash-eye-blind { fill: #fff; }
.player-flash-eye-outline, .player-flash-eye-pupil { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(255,243,157,.82)); }
.player-flash-eye-pupil { fill: none; }
.view-direction-head { fill: none; stroke: #a9b4bd; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; pointer-events: none; vector-effect: non-scaling-stroke; }
.player-marker.team-2 .view-direction-head { stroke: #d6a44a; }
.player-marker.team-3 .view-direction-head { stroke: #5ca3c7; }
.shot-trace { stroke-width: 3; stroke-linecap: round; pointer-events: none; filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); }
.shot-trace-clear { stroke: #f4db72; }
.shot-trace-continuation { stroke: #e9d890; stroke-width: 2; }
.shot-trace-wallbang { stroke: #ef704f; stroke-dasharray: 8 3; }
.shot-trace-smoke { stroke: #70c5e8; stroke-dasharray: 5 3; }
.shot-trace-wall-smoke { stroke: #d783e6; stroke-dasharray: 8 3 2 3; }
.shot-trace-confirmed { stroke: #ffef85; stroke-width: 2.5; }
.shot-trace-miss-direction { stroke: #e9d890; stroke-width: 2; stroke-dasharray: 5 4; opacity: .34; }
.shot-fire-pulse { pointer-events: none; transform-box: fill-box; transform-origin: center; animation: shot-fire-pulse .3s ease-out both; }
.shot-fire-ring { fill: rgba(255, 219, 102, .16); stroke: #ffe27a; stroke-width: 2.5; }
.shot-fire-spark { fill: none; stroke: #fff0a1; stroke-width: 2.5; stroke-linecap: round; }
.shot-impact { fill: #fff2b2; stroke: #17120a; stroke-width: 1.5; pointer-events: none; }
.shot-hit-marker { color: #ffef85; pointer-events: none; filter: drop-shadow(0 0 3px rgba(0,0,0,.95)); }
.shot-hit-marker.killed { color: #ff6f69; }
.shot-hit-ring { fill: rgba(15,12,6,.28); stroke: currentColor; stroke-width: 2.5; }
.shot-hit-cross { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.shot-hit-label { fill: currentColor; stroke: rgba(8,8,8,.95); stroke-width: 3; paint-order: stroke; text-anchor: middle; font-family: var(--font-ui); font-size: 10px; font-weight: 900; }
.shot-legend { display: flex; gap: 5px; font-size: 8px; font-weight: 800; }
.shot-legend span::before { display: inline-block; width: 12px; height: 2px; margin-right: 3px; vertical-align: middle; content: ""; background: currentColor; }
.shot-legend .shot-clear { color: #f4db72; }
.shot-legend .shot-wall { color: #ef704f; }
.shot-legend .shot-smoke { color: #70c5e8; }
.shot-legend .shot-confirmed { color: #ffef85; }
.shot-legend .shot-fired { color: #d5a94a; }
.he-damage-effect { pointer-events: none; }
.he-damage-radius { fill: rgba(157,221,114,.07); stroke: rgba(190,240,142,.9); stroke-width: 2.5; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(117,190,75,.72)); }
.he-blast-wave { fill: rgba(210,244,145,.13); stroke: #e0ff9f; stroke-width: 4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(181,232,101,.92)); }
.utility-path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.utility-path.utility-smoke { stroke: #aab2b9; }
.utility-path.utility-flash { stroke: #f4ecad; }
.utility-path.utility-he_grenade { stroke: #8fc769; }
.utility-path.utility-molotov, .utility-path.utility-incendiary { stroke: #e48045; }
.utility-path.utility-decoy { stroke: #bd83d4; }
.utility-marker { pointer-events: none; color: #c4cbd0; filter: drop-shadow(0 0 2px rgba(5,7,8,.95)); }
.utility-marker-body { fill: rgba(10,13,15,.9); stroke: currentColor; stroke-width: 2; }
.utility-marker-label { fill: currentColor; font-size: 9px; }
.utility-marker.utility-smoke { color: #c4cbd0; }
.utility-marker.utility-flash { color: #fff7bd; }
.utility-marker.utility-he_grenade { color: #a9df7e; }
.utility-marker.utility-molotov, .utility-marker.utility-incendiary { color: #f2a36b; }
.utility-marker.utility-decoy { color: #d49ee8; }
.utility-marker.active.utility-molotov .utility-marker-body, .utility-marker.active.utility-incendiary .utility-marker-body { fill: rgba(190,72,29,.5); }
.utility-marker.active.utility-flash { animation: utility-pulse .5s ease-out infinite alternate; }
.smoke-footprint { pointer-events: none; vector-effect: non-scaling-stroke; }
.smoke-presentation { pointer-events: none; transform-box: view-box; }
.smoke-footprint-smoothed { fill: rgba(145,155,161,.78); stroke: rgba(235,241,244,.9); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(35,40,44,.9)); }
.smoke-he-boundary { pointer-events: none; fill: none; stroke: rgba(235,241,244,.9); stroke-width: 4; vector-effect: non-scaling-stroke; }
.smoke-owner-ct .smoke-footprint-smoothed { fill: rgba(65,135,190,.76); stroke: rgba(158,218,255,.96); filter: drop-shadow(0 0 5px rgba(54,142,208,.72)); }
.smoke-owner-t .smoke-footprint-smoothed { fill: rgba(190,151,52,.76); stroke: rgba(255,224,126,.96); filter: drop-shadow(0 0 5px rgba(205,159,44,.7)); }
.smoke-owner-ct .smoke-he-boundary { stroke: rgba(158,218,255,.96); }
.smoke-owner-t .smoke-he-boundary { stroke: rgba(255,224,126,.96); }
.smoke-owner-selected .smoke-footprint-smoothed { fill: rgba(177,190,197,.88); stroke: #f1d978; stroke-width: 3; filter: drop-shadow(0 0 7px rgba(224,196,88,.56)); }
.smoke-owner-selected .smoke-he-boundary { stroke: #f1d978; stroke-width: 6; }
.smoke-owner-ct.smoke-owner-selected .smoke-footprint-smoothed { fill: rgba(74,153,214,.9); stroke: #d5efff; filter: drop-shadow(0 0 8px rgba(75,171,235,.82)); }
.smoke-owner-t.smoke-owner-selected .smoke-footprint-smoothed { fill: rgba(218,171,55,.9); stroke: #fff0a8; filter: drop-shadow(0 0 8px rgba(229,181,58,.82)); }
.smoke-owner-ct.smoke-owner-selected .smoke-he-boundary { stroke: #d5efff; }
.smoke-owner-t.smoke-owner-selected .smoke-he-boundary { stroke: #fff0a8; }
.smoke-duration-clock { pointer-events: none; filter: drop-shadow(0 0 3px rgba(4,7,9,.92)); }
.smoke-duration-clock-bg { fill: rgba(8,12,15,.78); }
.smoke-duration-clock-fill { fill: rgba(220,229,234,.72); }
.smoke-owner-ct .smoke-duration-clock-fill { fill: rgba(89,191,255,.78); }
.smoke-owner-t .smoke-duration-clock-fill { fill: rgba(255,202,58,.78); }
.smoke-duration-clock-outline { fill: none; stroke: rgba(235,242,246,.82); stroke-width: 2.5; }
.inferno-owner .inferno-footprint { fill: rgba(241,96,29,.62); stroke: rgba(255,194,80,.96); stroke-width: 2.5; filter: drop-shadow(0 0 5px rgba(255,91,24,.72)); }
.inferno-owner.smoke-owner-selected .inferno-footprint { fill: rgba(255,119,34,.76); stroke: #f1d978; stroke-width: 3.5; filter: drop-shadow(0 0 7px rgba(255,147,48,.82)); }
.smoke-footprint-raw { display: none; fill: rgba(135,146,152,.48); stroke: #f2c14e; stroke-width: 1.5; stroke-linejoin: miter; }
.smoke-debug-voxel { display: none; fill: rgba(82,189,216,.2); stroke: rgba(113,220,244,.9); stroke-width: 1; vector-effect: non-scaling-stroke; }
.smoke-debug-detonation { display: none; fill: none; stroke: #ff5f57; stroke-width: 2; vector-effect: non-scaling-stroke; }
.smoke-debug-level { display: none; fill: #f2c14e; stroke: rgba(8,10,12,.95); stroke-width: 3; paint-order: stroke; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
body.smoke-debug-raw .smoke-footprint-smoothed { display: none; }
body.smoke-debug-raw .smoke-footprint-raw { display: block; }
body.smoke-debug-voxels .smoke-footprint-smoothed { opacity: .18; }
body.smoke-debug-voxels .smoke-footprint-raw,
body.smoke-debug-voxels .smoke-debug-voxel,
body.smoke-debug-voxels .smoke-debug-detonation { display: block; }
body.smoke-debug-raw .smoke-debug-level,
body.smoke-debug-voxels .smoke-debug-level { display: block; }
.map-panel svg text { stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1; }
.player-tag { display: none; overflow: visible; pointer-events: none; }
.player-marker:hover .player-tag, .player-marker:focus .player-tag, .player-marker.selected .player-tag { display: block; }
.player-tag.always-visible { display: block; }
.player-tag-content { display: flex; width: 100%; height: 20px; align-items: center; justify-content: center; gap: 4px; }
.player-label { color: #eef1f2; font-family: var(--font-ui); font-size: 12px; font-weight: 650; line-height: 1; text-shadow: 0 1px 2px #080a0c, 1px 0 1px #080a0c, -1px 0 1px #080a0c; white-space: nowrap; }
.player-equipped-weapon-icon { width: 28px; height: 14px; flex: 0 0 28px; object-fit: contain; opacity: .92; filter: drop-shadow(0 1px 1px rgba(8,10,12,.96)); }
.player-ammo-indicator { stroke: rgba(8,10,12,.98); stroke-width: 3; paint-order: stroke; font-family: var(--font-mono); font-size: 10px; font-weight: 900; pointer-events: none; }
.player-ammo-indicator.green { fill: #6fdb83; }
.player-ammo-indicator.orange { fill: #ffb14a; }
.player-ammo-indicator.red { fill: #ff5b57; }
.killfeed-header { flex: 0 0 auto; }
.killfeed-panel, .communications-panel { min-width: 0; min-height: 0; overflow: hidden; }
.killfeed-panel { display: flex; flex-direction: column; border-bottom: 1px solid #29313a; }
.communications-panel { display: flex; flex-direction: column; }
.killfeed-list { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; align-items: flex-end; overflow: hidden; gap: 3px; padding: 8px 9px; }
.killfeed-entry { display: flex; width: 100%; max-width: 100%; flex-direction: column; align-items: flex-end; }
.killfeed-row { display: flex; width: max-content; max-width: 100%; min-height: 36px; align-items: center; justify-content: flex-end; gap: 4px; overflow: hidden; padding: 4px 9px; border: 1px solid rgba(94,108,119,.28); color: #f2f4f5; background: rgba(5,8,10,.82); box-shadow: 0 2px 8px rgba(0,0,0,.24); font-family: var(--font-ui); font-size: 12px; font-weight: 700; white-space: nowrap; }
.killfeed-row:hover { border-color: #536572; background: rgba(14,20,25,.96); }
.killfeed-row.entering { animation: killfeed-enter .12s ease-out both; }
@keyframes killfeed-enter { from { opacity: 0; transform: translateX(8px); } to { transform: translateX(0); } }
.killfeed-name { min-width: 0; max-width: 92px; overflow: hidden; flex: 0 1 auto; text-overflow: ellipsis; text-shadow: 1px 1px 1px #000; }
.killfeed-name.victim { max-width: 106px; }
.killfeed-team-ct { color: #6f9ce6; }
.killfeed-team-t { color: #eabe54; }
.killfeed-team-neutral { color: #aaa; }
.killfeed-plus { flex: 0 0 auto; color: #f2f4f5; font-weight: 900; }
.killfeed-way { display: flex; min-width: 20px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 2px; }
.killfeed-notice-icon { display: block; width: 18px; height: 20px; flex: 0 0 auto; object-fit: contain; filter: brightness(0) invert(95%); }
.killfeed-notice-icon.flash-assist { width: 15px; height: 18px; }
.killfeed-weapon-icon { display: block; width: 42px; height: 22px; flex: 0 1 42px; object-fit: contain; filter: brightness(0) invert(95%); }
.killfeed-weapon-fallback { max-width: 54px; overflow: hidden; color: #d8dde0; font-size: 8px; letter-spacing: .03em; text-overflow: ellipsis; }
.killfeed-wipe { display: flex; min-width: 148px; height: 24px; align-items: center; gap: 5px; margin-top: -1px; padding: 2px 9px; color: #f0c7c7; background: rgba(75, 13, 17, .88); font-size: 9px; font-weight: 850; letter-spacing: .06em; }
.killfeed-wipe .killfeed-notice-icon { width: 15px; height: 15px; }
.killfeed-empty { width: 100%; padding: 18px 8px; color: #56636d; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-align: center; }
.communications-header { flex: 0 0 auto; }
.communications-list { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 3px 0; }
.communication-row { display: grid; width: 100%; min-height: 29px; grid-template-columns: 53px 16px 17px minmax(0, 1fr); align-items: center; gap: 4px; padding: 4px 7px; border: 0; border-bottom: 1px solid #1b242b; color: #cdd5da; background: #0b1014; text-align: left; }
.communication-row:hover { background: #151d23; box-shadow: inset 2px 0 #4a7e99; }
.communication-row.urgent { background: #1b1012; box-shadow: inset 2px 0 #d65d63; }
.communication-time { color: #697985; font-size: 8px; font-weight: 800; white-space: nowrap; }
.communication-icon { width: 14px; height: 14px; object-fit: contain; opacity: .78; filter: invert(82%) sepia(9%) saturate(381%) hue-rotate(161deg) brightness(91%); }
.communication-player-number { display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid #46525c; color: #d9e0e5; background: #151c22; font-size: 8px; font-weight: 900; }
.communication-player-number.killfeed-team-t { border-color: #745d31; color: #eabe54; }
.communication-player-number.killfeed-team-ct { border-color: #376b84; color: #6f9ce6; }
.communication-copy { display: flex; min-width: 0; flex-wrap: nowrap; align-items: baseline; gap: 4px; overflow: hidden; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.communication-speaker { overflow: hidden; max-width: 82px; flex: 0 1 auto; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.communication-audience { color: #7b8993; font-size: 8px; font-weight: 800; }
.communication-text { min-width: 0; overflow: hidden; flex: 1 1 auto; color: #c7d0d6; text-overflow: ellipsis; white-space: nowrap; }
.radar-ping { pointer-events: none; color: #9ca9b2; }
.radar-ping.terrorist { color: #eabe54; }
.radar-ping.counter_terrorist { color: #6f9ce6; }
.radar-ping.urgent { color: #ff696f; }
.radar-ping-pulse { fill: none; stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px currentColor); }
.radar-ping-dot { fill: rgba(8,12,15,.88); stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke; }
.radar-ping-number { fill: currentColor; stroke: rgba(5,8,10,.96); stroke-width: 2; paint-order: stroke; font-family: var(--font-mono); font-size: 9px; font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.map-readout { position: absolute; right: 8px; bottom: 8px; z-index: 5; padding: 4px 6px; color: #98a1a8; background: rgba(8,10,12,.86); border: 1px solid rgba(255,255,255,.08); font-size: 10px; }
.timeline { display: grid; grid-template-rows: 30px 1fr 34px; padding-bottom: 4px; }
.timeline-header { justify-content: flex-start; gap: 10px; }
.timeline-header-filters { display: flex; height: 100%; align-items: center; gap: 4px; }
.timeline-event-count { margin-left: auto; }
.timeline-filter-button { min-width: 54px; max-width: 116px; height: 22px; overflow: hidden; padding: 0 7px; border: 1px solid #34414c; color: #8997a2; background: #10161b; font-family: var(--font-ui); font-size: 9px; font-weight: 800; letter-spacing: .045em; text-overflow: ellipsis; white-space: nowrap; }
.timeline-filter-button:hover:not(:disabled) { color: #dce5ea; border-color: #53626e; background: #182128; }
.timeline-filter-button.active { color: #f1d978; border-color: #8b7331; background: #241f10; box-shadow: inset 0 -2px #c2a648; }
.timeline-filter-button.ct-only { color: #9edaff; border-color: #3e7896; background: #102431; }
.timeline-filter-button.t-only { color: #ffe07e; border-color: #8b7331; background: #28210d; }
.timeline-filter-button:disabled { color: #4f5b64; border-color: #252e36; background: #0d1216; cursor: default; }
.timeline-track { position: relative; min-height: 0; margin: 4px 12px; overflow: hidden; border-top: 1px solid #51606e; border-bottom: 1px solid #252e37; background: #0d1318; }
.timeline-cursor { position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; background: #e7c45b; box-shadow: 0 0 0 1px #1e1b10; z-index: 3; }
.timeline-highlight-round { position: absolute; inset: 0; z-index: 1; pointer-events: none; border: 1px solid rgba(220,184,73,.38); background: rgba(199, 158, 46, .04); box-shadow: inset 3px 0 rgba(229,195,85,.55); }
.timeline-highlight-badge { position: absolute; z-index: 3; top: 4px; right: 5px; padding: 2px 5px; pointer-events: none; color: #ead16d; border: 1px solid rgba(193,157,58,.48); background: rgba(23,20,10,.9); font-family: var(--font-ui); font-size: 7px; font-weight: 800; letter-spacing: .06em; }
.timeline-lanes { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); pointer-events: none; }
.timeline-lane { display: flex; align-items: center; padding-left: 3px; border-bottom: 1px solid rgba(81,96,110,.28); color: rgba(125,140,153,.34); font-size: 7px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.timeline-lane:last-child { border-bottom: 0; }
.timeline-lane:nth-child(even) { background: rgba(255,255,255,.012); }
.marker-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.event-marker { position: absolute; top: 2px; display: grid; place-items: center; width: 3px; height: calc(33.333% - 4px); min-height: 4px; padding: 0; transform: translateX(-1px); border: 0; pointer-events: none; color: #07100b; background: #7693a8; font-size: 7px; font-weight: 900; line-height: 1; }
.event-marker.event-kill, .event-marker.event-death { width: 10px; transform: translateX(-5px); }
.event-marker.event-kill { color: #07100b; background: #64c98b; }
.event-marker.event-death { color: #170709; background: #df6971; }
.utility-duration-bar { position: absolute; z-index: 1; min-height: 2px; overflow: hidden; pointer-events: none; opacity: .88; }
.utility-duration-bar::after { position: absolute; top: 0; right: 0; bottom: 0; left: var(--fade-start); content: ""; background: rgba(13, 19, 24, .76); }
.utility-duration-bar.utility-smoke { border-top: 1px solid rgba(236,241,244,.9); background: rgba(161,171,178,.76); }
.utility-duration-bar.utility-smoke.timeline-team-ct { border-color: #a8dcf7; background: rgba(61,139,190,.82); }
.utility-duration-bar.utility-smoke.timeline-team-t { border-color: #ffe18a; background: rgba(190,150,48,.84); }
.utility-duration-bar.utility-molotov,
.utility-duration-bar.utility-incendiary { border-top: 1px solid rgba(255,184,121,.94); background: rgba(211,101,50,.78); }
.utility-duration-bar.selected-player-utility { z-index: 2; border: 1px solid #f1d978; opacity: 1; box-shadow: 0 0 4px rgba(241,217,120,.72); }
.utility-timeline-marker { position: absolute; z-index: 4; width: 8px; height: calc(33.333% - 4px); min-height: 4px; transform: translateX(-4px); pointer-events: none; opacity: .96; }
.utility-timeline-marker.utility-flash { top: 2px; background: #fff2a1; box-shadow: 0 0 3px rgba(255,242,161,.75); }
.utility-timeline-marker.utility-he_grenade,
.utility-timeline-marker.utility-decoy { top: calc(33.333% + 2px); }
.utility-timeline-marker.utility-he_grenade { background: #9ddd72; box-shadow: 0 0 3px rgba(157,221,114,.6); }
.utility-timeline-marker.utility-decoy { background: #bd83d4; }
.utility-timeline-marker.selected-player-utility { width: 11px; transform: translateX(-5.5px); border: 1px solid #fff2a1; box-shadow: 0 0 5px rgba(241,217,120,.95); }
.combat-timeline-span { position: absolute; top: calc(66.667% + 5px); z-index: 1; height: calc(33.333% - 10px); min-height: 3px; pointer-events: none; background: rgba(180,75,81,.42); box-shadow: inset 0 1px rgba(235,124,129,.38); }
.combat-timeline-span.selected-player-combat { z-index: 2; border-top: 1px solid #f1d978; border-bottom: 1px solid rgba(241,217,120,.72); background: rgba(208,102,85,.78); box-shadow: 0 0 4px rgba(241,217,120,.55); }
.objective-timeline-marker { position: absolute; top: calc(66.667% + 2px); z-index: 2; display: grid; place-items: center; width: 13px; height: calc(33.333% - 4px); min-height: 8px; transform: translateX(-6px); pointer-events: none; font-size: 7px; font-weight: 900; line-height: 1; }
.objective-timeline-marker.objective-bomb_plant { color: #1a1104; background: #e8a84c; }
.objective-timeline-marker.objective-bomb_defuse { color: #041318; background: #62c3dd; }
.objective-timeline-marker.objective-bomb_explode { color: #180804; background: #eb684b; }
.kill-timeline-marker { position: absolute; top: calc(66.667% + 1px); z-index: 3; display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 20px; height: calc(33.333% - 2px); padding: 0 3px; transform: translateX(-50%); border: 1px solid #f09a9e; pointer-events: none; color: #fff0f0; background: #8e343b; box-shadow: 0 0 0 1px rgba(8,10,12,.8); font-weight: 900; line-height: 1; }
.kill-timeline-marker.kill-group { min-width: 35px; color: #fff7e0; border-color: #f1be6b; background: #92393c; }
.kill-timeline-marker.selected-player-kill { z-index: 4; color: #171204; border-color: #fff0a6; background: #e3c65f; box-shadow: 0 0 5px rgba(241,217,120,.88); }
.kill-timeline-marker.selected-player-kill .kill-timeline-count { color: #4c3b07; }
.kill-timeline-icon { display: block; flex: 0 0 auto; width: 17px; height: 17px; overflow: visible; filter: invert(1); }
.kill-timeline-marker.selected-player-kill .kill-timeline-icon { filter: none; }
.kill-timeline-count { display: block; min-width: 13px; color: #ffd98c; font-family: var(--font-ui); font-size: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: 1; text-align: right; }
.marker-layer .timeline-event-clickable { z-index: 5; pointer-events: auto; cursor: pointer; }
.marker-layer .timeline-event-clickable:hover { filter: brightness(1.28); }
.timeline-track:active .timeline-event-clickable,
.timeline-track.timeline-dragging .timeline-event-clickable { pointer-events: none; }
.timeline-region-preview { position: absolute; top: 0; bottom: 0; z-index: 3; border: 1px solid rgba(240,196,91,.9); background: rgba(232,176,56,.16); box-shadow: inset 2px 0 #f0c45b, inset -2px 0 #f0c45b; pointer-events: none; }
.timeline-interaction { position: absolute; inset: 0; z-index: 4; }
.timeline-track:active .timeline-interaction,
.timeline-track.timeline-dragging .timeline-interaction { z-index: 6; }
.timeline-interaction.scrub { cursor: ew-resize; }
.timeline-interaction.select-region { cursor: crosshair; }
.timeline-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 2px 12px 0; }
.timeline-footer-left { display: flex; min-width: 0; justify-content: flex-start; }
.timeline-transport { display: flex; align-items: center; gap: 4px; }
.timeline-transport-center { justify-self: center; }
.timeline-tools { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 4px; }
.transport-button { display: grid; place-items: center; width: 27px; height: 23px; padding: 0; border: 1px solid #34414c; color: #b9c4cd; background: #151c22; cursor: pointer; font-family: var(--font-ui); font-size: 10px; }
.transport-button:hover:not(:disabled) { color: #f0d878; border-color: #746331; background: #211e13; }
.transport-button:disabled { color: #58636d; border-color: #252e36; background: #10151a; cursor: default; }
.transport-button.active { box-shadow: inset 0 -2px #bca348; }
.transport-button.timeline-tool-button { width: auto; min-width: 50px; padding: 0 6px; }
.transport-button.timeline-fit { width: auto; min-width: 31px; padding: 0 5px; }
.transport-button.playback-rate-button { width: auto; min-width: 34px; margin-left: 4px; padding: 0 6px; color: #f0d878; border-color: #665827; background: #201c10; font-weight: 900; font-variant-numeric: tabular-nums; }
.transport-button.playback-rate-button:hover { border-color: #9b8437; background: #2a2411; }
.transport-icon { display: block; width: 15px; height: 15px; filter: brightness(0) invert(82%) sepia(10%) saturate(323%) hue-rotate(162deg); }
.transport-button:hover:not(:disabled) .transport-icon { filter: brightness(0) invert(88%) sepia(55%) saturate(582%) hue-rotate(356deg); }
.transport-button:disabled .transport-icon { opacity: .38; }
.transport-hint { margin-left: 4px; color: #596672; font-size: 8px; letter-spacing: .08em; }
.timeline-readout { min-width: 150px; overflow: hidden; margin-right: 4px; color: #82909d; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.playback-rate { color: #c0a94c; font-size: 10px; }
.timeline-highlight-launch { min-width: 112px; height: 23px; padding: 0 8px; border: 1px solid #8b7232; color: #f0d978; background: #211c0e; cursor: pointer; font-family: var(--font-ui); font-size: 8px; font-weight: 800; letter-spacing: .03em; }
.timeline-highlight-launch:hover:not(:disabled) { color: #fff2a8; border-color: #caa64a; background: #302711; }
.timeline-highlight-launch:disabled { color: #776e4a; border-color: #49412b; cursor: wait; }
.highlight-status { overflow: hidden; margin-left: auto; color: #8e9aa4; text-overflow: ellipsis; white-space: nowrap; }
.highlight-status.running { color: #d7bb55; }
.highlight-status.error { color: #df6971; }
.analysis-stack { height: 100%; display: grid; grid-template-rows: 142px minmax(180px, 1fr) minmax(150px, 210px) 86px; }
.player-summary { overflow: hidden; }
.player-summary-header > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c5d0d9; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: calc(100% - 26px); }
.summary-stat { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 5px; padding: 7px 9px; border-right: 1px solid #202832; border-bottom: 1px solid #202832; background: #0c1014; }
.summary-stat:nth-child(4n) { border-right: 0; }
.summary-stat:nth-child(n+5) { border-bottom: 0; }
.summary-label { overflow: hidden; color: #667481; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.summary-stat strong { color: #e1e7ec; font-size: 13px; text-align: left; }
.analysis { overflow: auto; }
.inspector { padding: 10px; }
.inspector h3 { margin: 0 0 4px; font-size: 14px; }
.evidence-tick { color: #8f9ba7; margin-bottom: 8px; }
.flags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.flags span { padding: 2px 5px; color: #e5b45b; border: 1px solid #594728; background: #1c1811; }
table { width: 100%; border-collapse: collapse; }
td { padding: 4px 5px; border-bottom: 1px solid #202832; }
.observation-list { display: flex; flex-direction: column; }
.observation-list button { display: flex; justify-content: space-between; padding: 5px 8px; border: 0; border-top: 1px solid #202832; background: transparent; text-align: left; }
.observation-list button:hover { background: #151c22; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; height: calc(100% - 26px); background: #29313a; }
.metric-chart { display: grid; grid-template-rows: 24px 1fr 18px; min-width: 0; background: #0c1014; }
.metric-chart-title { padding: 7px 8px 0; color: #65717d; font-size: 9px; letter-spacing: .06em; }
.metric-bars { display: flex; align-items: end; gap: 2px; min-height: 0; padding: 8px; border-top: 1px solid #182028; }
.metric-bar { flex: 1; min-width: 2px; max-width: 12px; background: #4a93b8; border-top: 1px solid #82c4e5; }
.metric-bar:nth-child(4n) { background: #c69743; border-top-color: #e6bd73; }
.metric-scale { display: flex; justify-content: space-between; padding: 2px 8px 0; border-top: 1px solid #182028; color: #65717d; font-size: 9px; }
.empty { display: grid; place-items: center; color: #65717d; min-height: 80px; }
.round-strip { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 6px 8px; border-top: 1px solid #29313a; border-bottom: 0; background: #10151a; }
.round-strip-label { position: sticky; left: 0; z-index: 2; flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; padding: 0 8px 0 2px; border-right: 1px solid #29313a; color: #7d8994; background: #10151a; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.round-number { flex: 0 0 auto; min-width: 29px; height: 28px; padding: 0 7px; border: 1px solid #303b45; color: #85919c; background: #141a20; cursor: pointer; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.round-number:hover { color: #e3e8ec; border-color: #53616d; }
.round-number.selected { color: #0b1115; border-color: #d6bd61; background: #d6bd61; font-weight: 800; }
.player-overview { flex: 0 0 auto; overflow: visible; border-bottom: 0; }
.player-overview-empty { display: grid; height: calc(100% - 26px); place-items: center; color: #65717d; }
.player-overview-team { overflow: hidden; color: #71808c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.player-overview-identity { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; padding: 0 8px; border-bottom: 1px solid #202832; }
.player-overview-identity strong { overflow: hidden; color: #e0e6eb; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.player-overview-identity span { flex: 0 0 auto; color: #80909c; font-size: 9px; }
.player-equipment-detail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 46px; border-bottom: 1px solid #202832; background: #0b1014; }
.player-active-equipment { display: grid; align-content: center; min-width: 92px; gap: 1px; padding: 4px 7px; border-right: 1px solid #202832; }
.player-active-equipment span { color: #71818d; font-size: 7px; letter-spacing: .05em; }
.player-active-equipment strong { max-width: 112px; overflow: hidden; color: #dce4e9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.player-active-equipment .number { color: #e4bd58; font-size: 8px; }
.player-equipment-items { display: flex; min-width: 0; align-items: center; gap: 4px; overflow-x: auto; padding: 5px 7px; }
.player-equipment-meta { display: grid; align-content: center; gap: 2px; padding: 4px 7px; border-left: 1px solid #202832; color: #8998a3; font-size: 8px; white-space: nowrap; }
.player-equipment-message { display: grid; min-height: 34px; place-items: center; border-bottom: 1px solid #202832; color: #758590; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.player-equipment-message.error { color: #d58b91; }
.player-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 92px; }
.player-overview-stat { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 5px 7px; border-right: 1px solid #202832; border-bottom: 1px solid #202832; }
.player-overview-stat:nth-child(4n) { border-right: 0; }
.player-overview-stat:nth-child(n+5) { border-bottom: 0; }
.player-overview-stat span { overflow: hidden; color: #65727e; font-size: 7px; font-weight: 700; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.player-overview-stat strong { color: #dce3e8; font-size: 11px; text-align: left; }
.player-highlight-strip { display: grid; grid-template-rows: 28px minmax(44px, auto); min-height: 80px; border-top: 1px solid #29313a; background: #0b0f13; }
.player-highlight-label { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; color: #8f9ba6; font-size: 8px; font-weight: 750; letter-spacing: .07em; }
.player-highlight-rounds { display: flex; align-content: flex-start; gap: 4px; overflow: visible; flex-wrap: wrap; padding: 5px 7px 7px; }
.player-highlight-round { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 72px; height: 27px; padding: 0 6px; border: 1px solid #4a3f28; color: #cbb970; background: #17150f; cursor: pointer; font-family: var(--font-ui); font-size: 9px; }
.player-highlight-round:hover:not(:disabled), .player-highlight-round.selected { color: #fff0a6; border-color: #a88b3d; background: #28210f; }
.player-highlight-round:disabled { opacity: .58; cursor: wait; }
.player-highlight-round strong { color: #e2c85f; font-size: 9px; }
.player-highlight-empty { padding: 6px 2px; color: #596673; font-size: 9px; }
.footer { grid-column: 1 / -1; grid-row: 3; display: flex; min-width: 0; min-height: 0; gap: 20px; align-items: center; overflow: hidden; padding: 0 8px; border-top: 1px solid #29313a; background: #11161b; color: #6f7b87; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(3, 5, 7, .76); backdrop-filter: blur(2px); }
.share-code-dialog { width: min(500px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #3b4651; background: #10151a; box-shadow: 0 24px 80px rgba(0, 0, 0, .6); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; height: 34px; padding-left: 12px; border-bottom: 1px solid #29313a; color: #e3e9ee; background: #161c22; letter-spacing: .08em; }
.dialog-close { width: 34px; height: 33px; border: 0; border-left: 1px solid #29313a; color: #84919c; background: transparent; font-size: 20px; }
.share-code-dialog p { margin: 0; padding: 12px; border-bottom: 1px solid #202832; color: #8c98a4; line-height: 1.5; }
.share-code-dialog p a { color: #9ed2ea; }
.share-code-dialog label { display: grid; gap: 6px; padding: 10px 12px 0; color: #8996a2; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.share-code-dialog input { width: 100%; height: 32px; padding: 0 9px; border: 1px solid #35414c; outline: 0; color: #e1e7ec; background: #090d11; font-family: var(--font-ui); font-size: 12px; }
.share-code-dialog input:focus { border-color: #4b91b4; box-shadow: inset 2px 0 #4aa7d8; }
.match-history-results { display: grid; gap: 6px; margin: 10px 12px 0; }
.match-history-results button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 10px; border: 1px solid #35414c; color: #9ed2ea; background: #112330; font: inherit; }
.match-history-results button:hover:not(:disabled) { border-color: #59a9ce; background: #173346; }
.match-history-results code { overflow: hidden; color: #7f8c97; font-size: 9px; text-overflow: ellipsis; }
.dialog-note, .dialog-progress, .dialog-error { min-height: 34px; margin: 10px 12px 0; padding: 8px; border: 1px solid #29313a; color: #798692; background: #0c1115; font-size: 10px; line-height: 1.5; }
.dialog-progress { display: flex; align-items: center; gap: 8px; color: #65b895; border-color: #285343; }
.dialog-error { color: #df7d83; border-color: #67343a; background: #1a1013; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; background: #53b58b; box-shadow: 0 0 0 3px rgba(83, 181, 139, .12); animation: activity-pulse 1.2s ease-in-out infinite; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px; }
.dialog-actions button { min-width: 100px; height: 30px; border: 1px solid #35414c; background: #151b20; font-size: 10px; font-weight: 700; letter-spacing: .07em; }
.dialog-actions .fetch-button { color: #9ed2ea; border-color: #356b86; background: #112330; }
.provider-credit { padding: 10px 12px 0; color: #d75a9d; font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.dialog-actions button:disabled, .dialog-close:disabled { cursor: wait; opacity: .55; }

/* Keep dense tactical information readable at normal browser zoom. */
.workstation { grid-template-columns: clamp(380px, 30%, 460px) minmax(0, 1fr) clamp(320px, 22vw, 400px); grid-template-rows: auto minmax(0, 1fr) 28px; }
.command-bar, .command-bar button, .footer { font-size: 12px; }
.command-bar button { min-height: 28px; padding-inline: 10px; }
.section-header { height: 30px; font-size: 12px; }
.row { min-height: 32px; font-size: 12px; }
.player-browser-team, .map-toolbar button, .map-readout, .playback-rate { font-size: 12px; }
.player-browser-status, .heatmap-status, .transport-hint, .summary-label,
.metric-chart-title, .metric-scale, .round-strip-label, .player-overview-team,
.player-overview-identity span, .player-overview-stat span, .player-highlight-label,
.player-highlight-empty, .shot-legend, .kill-timeline-count { font-size: 10px; }
.map-current-score { font-size: 15px; }
.map-score-separator, .transport-button, .timeline-highlight-launch,
.player-highlight-round, .player-highlight-round strong { font-size: 11px; }
.timeline-lane, .event-marker, .objective-timeline-marker, .timeline-highlight-badge { font-size: 9px; }
.summary-stat strong, .player-overview-stat strong { font-size: 14px; }
.round-number { min-width: 34px; height: 32px; font-size: 12px; }
.player-overview-identity strong { font-size: 14px; }
.match-downloads-button, .admin-invite-button { font-size: 11px; }
.match-history-toolbar button, .match-history-action button { min-height: 38px; font-size: 12px; }
.match-history-summary strong { font-size: 20px; }
.match-history-credentials-form label,
.dialog-note, .dialog-progress, .dialog-error { font-size: 14px; }
.match-history-credentials-form input, .share-code-dialog input { height: 38px; font-size: 14px; }
.dialog-header { height: 40px; font-size: 13px; }
.dialog-close { width: 40px; height: 39px; }
.dialog-actions button { min-height: 36px; font-size: 12px; }
.utility-marker-label { font-size: 11px; }
.player-label, .smoke-debug-level { font-size: 14px; }
@keyframes activity-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes utility-pulse { from { opacity: .62; } to { opacity: 1; } }
@keyframes bomb-vector-pulse { from { opacity: .72; } to { opacity: 1; } }
@keyframes shot-fire-pulse { from { opacity: 1; } to { opacity: 0; } }
@keyframes timeline-event-player-flash {
  0%, 100% { r: 15px; opacity: 0; stroke-width: 2px; }
  9%, 51% { r: 15px; opacity: 1; stroke-width: 5px; }
  30%, 82% { r: 24px; opacity: .16; stroke-width: 2px; }
}
.timeline-event-player-highlight { fill: none; stroke: #fff2a1; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 7px rgba(255,224,94,.95)); animation: timeline-event-player-flash 1.55s ease-out both; }
.timeline-event-position-highlight { fill: rgba(255,238,125,.1); stroke: #fff2a1; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 8px rgba(255,224,94,.95)); animation: timeline-event-player-flash 1.55s ease-out both; }
.app-tabs { display: flex; align-self: stretch; gap: 2px; margin-left: 6px; }
.app-tab { position: relative; display: flex; min-width: 88px; align-items: center; justify-content: center; padding: 0 12px; border: 0; color: #76838e; background: transparent; font-weight: 800; letter-spacing: .07em; text-decoration: none; cursor: pointer; }
.app-tab:hover { color: #d5dde3; background: #171e24; }
.app-tab.active { color: #dce8ef; background: #17232b; box-shadow: inset 0 -2px #58a7cc; }
.tab-hidden { display: none !important; }

.options-menu { position: relative; }
.options-button { position: relative; display: block; width: 30px; padding: 0; line-height: 1; }
.settings-icon { position: absolute; top: 50%; left: 50%; display: block; width: 18px; height: 18px; transform: translate(-50%, -50%); pointer-events: none; filter: invert(82%) sepia(9%) saturate(381%) hue-rotate(161deg) brightness(91%); }
.options-button:hover .settings-icon, .options-button.active .settings-icon { filter: invert(94%) sepia(10%) saturate(297%) hue-rotate(158deg) brightness(102%); }
.options-button.active { color: #d9edf7; border-color: #4b8ead; background: #173043; box-shadow: none; }
.options-dropdown { position: absolute; z-index: 80; bottom: calc(100% + 10px); left: 0; display: grid; width: 320px; gap: 14px; padding: 16px; border: 1px solid var(--border-strong); background: rgba(13,19,24,.99); box-shadow: 0 18px 54px rgba(0,0,0,.72); }
.options-dropdown header { display: flex; align-items: center; min-height: 26px; padding-bottom: 11px; border-bottom: 1px solid #29343d; }
.options-dropdown header strong { color: #e7eef3; font-size: 14px; letter-spacing: .045em; }
.options-section-title { margin-bottom: -4px; color: #69b8dc; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.options-dropdown label { display: grid; gap: 8px; color: #8d9aa4; font-size: 10px; font-weight: 800; letter-spacing: .065em; }
.options-dropdown label > div { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.option-choice { min-height: 34px; border: 1px solid #35414b; color: #9ca9b3; background: #12181d; cursor: pointer; font-size: 11px; font-weight: 750; }
.option-choice:hover { color: #e5edf2; border-color: #53626f; }
.option-choice.selected { color: #f5df85; border-color: #8d7534; background: #241e0f; box-shadow: inset 0 -2px #c8a849; }
.option-choice:disabled { cursor: default; opacity: .82; }
.topbar-settings .options-dropdown { top: calc(100% + 8px); right: 0; bottom: auto; left: auto; }

.clips-pane { grid-column: 1 / -1; grid-row: 2; min-width: 0; min-height: 0; overflow: auto; background: #090d10; }
.rating-pane { grid-column: 2 / -1; grid-row: 2; z-index: 2; min-width: 0; min-height: 0; overflow: auto; padding: 18px; background: #090d10; }
.rating-pane.roster-collapsed { grid-column: 1 / -1; }
.rating-pane.empty, .rating-pane.loading, .rating-pane.error { display: grid; place-items: center; }
.rating-message { padding: 24px; color: #74838e; font-size: 11px; font-weight: 750; letter-spacing: .07em; text-align: center; }
.rating-message.error, .rating-pane.error .rating-message { color: #df747b; }
.rating-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 10px; padding: 14px 16px; border: 1px solid #34414b; background: #0f151a; }
.rating-header > div:first-child { display: grid; gap: 5px; }
.rating-header span { color: #69b8dc; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.rating-header strong { color: #eef3f6; font-size: 24px; }
.rating-header-actions { display: flex; align-items: flex-end; gap: 12px; }
.rating-header-actions > button, .rating-radar-caption button { min-height: 34px; padding: 0 11px; border: 1px solid #394751; color: #9baab3; background: #11181d; font-size: 10px; font-weight: 850; letter-spacing: .055em; cursor: pointer; }
.rating-header-actions > button:hover, .rating-radar-caption button:hover { color: #dce7ed; border-color: #5a6c78; }
.rating-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 390px); align-items: start; gap: 10px; margin-top: 10px; }
.rating-graph-panel { min-width: 0; overflow: hidden; border: 1px solid #34414b; background: #0b1014; }
.rating-overview-graph { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; padding: 12px; min-width: 0; background: #0a0f13; }
.rating-final-node { display: grid; min-width: 0; justify-items: center; align-content: center; gap: 4px; padding: 8px 6px; border: 1px solid #bc9d44; color: #d9bb61; background: #211c0f; box-shadow: 0 8px 24px rgba(0,0,0,.32); font: inherit; text-align: center; cursor: pointer; }
.rating-final-node:hover, .rating-final-node.active { border-color: #ffe994; background: #30270f; box-shadow: inset 0 -3px #d5b84f, 0 8px 24px rgba(0,0,0,.32); }
.rating-final-node span { font-size: 9px; font-weight: 850; letter-spacing: .07em; }
.rating-final-node strong { color: #ffe994; font-size: 27px; }
.rating-components { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.rating-component { display: grid; align-content: center; gap: 4px; min-width: 0; min-height: 62px; padding: 8px 10px; border: 1px solid #34414b; color: #aab7bf; background: #10161b; text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.rating-component:hover { border-color: #60727e; background: #151e24; }
.rating-component.active { border-color: #62b3d7; background: #102532; box-shadow: inset 0 -3px #58a7cc; }
.rating-component-label { overflow: hidden; color: #dce6eb; font-size: 10px; font-weight: 850; letter-spacing: 0; text-overflow: ellipsis; white-space: normal; }
.rating-component-value { color: #edf3f6; font-size: 18px; line-height: 1; text-align: left; }
.rating-trace { overflow: hidden; border: 0; border-top: 1px solid #2c3b44; background: #0b1014; }
.rating-round-chart { position: relative; overflow-x: auto; }
.rating-chart-heading { position: absolute; z-index: 2; top: 0; right: 0; left: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 18px 20px 4px; pointer-events: none; }
.rating-chart-heading > div:first-child { display: grid; gap: 4px; }
.rating-chart-heading span { color: #65b2d4; font-size: 10px; font-weight: 850; letter-spacing: .09em; }
.rating-chart-heading strong { color: #e7eef2; font-size: 20px; }
.rating-chart-heading-side { display: flex; align-items: flex-start; gap: 18px; }
.rating-chart-legend { display: flex; align-items: center; gap: 16px; padding-top: 5px; }
.rating-chart-legend span { display: flex; align-items: center; gap: 7px; color: #72c3e6; font-size: 11px; letter-spacing: .04em; }
.rating-chart-legend span::before { width: 23px; height: 3px; background: #65b9df; content: ""; }
.rating-chart-legend span.cumulative { color: #f0d36c; }
.rating-chart-legend span.cumulative::before { background: #f0d36c; }
.rating-round-chart-svg { display: block; width: 100%; height: auto; cursor: pointer; }
.rating-chart-grid { stroke: #293842; stroke-width: 1px; stroke-dasharray: 4 7; vector-effect: non-scaling-stroke; }
.rating-chart-axis { stroke: #52636e; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.rating-chart-axis-value, .rating-chart-axis-label { fill: #95a6af; font-family: var(--font-mono); font-size: 15px; font-weight: 750; text-anchor: end; }
.rating-chart-axis-label { fill: #6fb6d6; font-size: 14px; letter-spacing: .04em; text-anchor: middle; }
.rating-chart-x-axis-label { fill: #6fb6d6; font-family: var(--font-mono); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-anchor: middle; }
.rating-chart-curve-halo, .rating-chart-curve { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rating-chart-curve-halo { stroke: rgba(88,167,204,.15); stroke-width: 11px; }
.rating-chart-curve { stroke: #65b9df; stroke-width: 3px; filter: drop-shadow(0 0 4px rgba(88,167,204,.42)); }
.rating-chart-baseline { stroke: #81909a; stroke-width: 1.5px; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.rating-chart-cumulative-halo, .rating-chart-cumulative { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rating-chart-cumulative-halo { stroke: rgba(240,211,108,.14); stroke-width: 10px; }
.rating-chart-cumulative { stroke: #f0d36c; stroke-width: 3px; filter: drop-shadow(0 0 4px rgba(240,211,108,.35)); }
.rating-chart-rating-stem { stroke: rgba(139,155,165,.48); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.rating-chart-crosshair { stroke: #d8e4e9; stroke-width: 1.5px; stroke-dasharray: 4 4; pointer-events: none; vector-effect: non-scaling-stroke; }
.rating-chart-hover-dot { fill: #0b1014; stroke: #d9f1fb; stroke-width: 4px; pointer-events: none; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(116,197,232,.75)); }
.rating-chart-hover-dot.cumulative { stroke: #f2d972; filter: drop-shadow(0 0 5px rgba(240,211,108,.65)); }
.rating-chart-point { cursor: pointer; outline: none; }
.rating-chart-hit-area { fill: transparent; }
.rating-chart-dot { fill: #0d151a; stroke: #74c5e8; stroke-width: 4px; vector-effect: non-scaling-stroke; transition: fill .15s ease, stroke-width .15s ease; }
.rating-chart-point.positive .rating-chart-dot { stroke: #79c89c; }
.rating-chart-point.negative .rating-chart-dot { stroke: #dc747b; }
.rating-chart-point:hover .rating-chart-dot, .rating-chart-point.selected .rating-chart-dot { fill: #f1d46e; stroke: #fff0a4; stroke-width: 5px; filter: drop-shadow(0 0 7px rgba(241,212,110,.72)); }
.rating-chart-round { fill: #a1b1ba; font-family: var(--font-mono); font-size: 15px; font-weight: 800; text-anchor: middle; }
.rating-inspector { overflow: hidden; border: 1px solid #34414b; background: #0e1418; }
.rating-inspector { position: sticky; top: 0; }
.rating-inspector .section-header { min-height: 40px; padding: 0 14px; }
.rating-chart-hover-detail { display: grid; gap: 13px; padding: 16px; border-bottom: 1px solid #29343c; background: #10191f; }
.rating-chart-hover-detail > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rating-chart-hover-detail span { color: #79bad7; font-size: 13px; font-weight: 850; letter-spacing: .045em; }
.rating-chart-hover-detail > div:first-child strong { color: #f1d878; font-size: 27px; }
.rating-chart-hover-metrics strong { color: #e8cc64; font-size: 14px; }
.rating-node-details { display: grid; gap: 9px; padding: 16px; border-bottom: 1px solid #29343c; }
.rating-node-details > span, .rating-impact span { color: #69b8dc; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.rating-node-details > strong { color: #e8eef2; font-size: 18px; }
.rating-node-details > b { color: #f1d878; font-size: 24px; }
.rating-impact { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid #26323a; }
.rating-impact strong { color: #eed36d; font-size: 14px; }
.rating-swing-state { display: grid; grid-template-columns: 1fr 1.2fr 1fr; border-bottom: 1px solid #34414b; background: #0a1115; }
.rating-swing-state > div { display: grid; justify-items: center; gap: 5px; padding: 11px 5px; border-right: 1px solid #28353d; }
.rating-swing-state > div:last-child { border-right: 0; }
.rating-swing-state span { color: #798993; font-size: 10px; font-weight: 850; letter-spacing: .07em; }
.rating-swing-state strong { color: #dbe7ec; font-size: 14px; }
.rating-swing-state .rating-swing-arrow { color: #d9bd62; background: #17150d; }
.rating-swing-state .rating-swing-arrow strong { color: #f0d979; }
.rating-radar-header { border-top: 1px solid #34414b; }
.rating-radar-empty { display: grid; min-height: 84px; place-items: center; padding: 20px; color: #788993; background: #090d10; font-size: 11px; font-weight: 750; letter-spacing: .045em; text-align: center; }
.rating-radar-viewport { position: relative; height: 220px; overflow: hidden; border-block: 1px solid #27343c; background: #070a0c; }
.rating-radar-world { position: absolute; width: 100%; height: 100%; background-color: #10171c; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }
.radar-layer-toggle { position: absolute; z-index: 7; top: 8px; right: 8px; display: flex; border: 1px solid #3d4b55; background: rgba(11,15,18,.94); }
.radar-layer-button { height: 28px; padding: 0 9px; border: 0; border-right: 1px solid #3d4b55; color: #a8b3ba; background: transparent; font-size: 11px; font-weight: 600; letter-spacing: .025em; }
.radar-layer-button:last-child { border-right: 0; }
.radar-layer-button:hover { color: #e7edf0; background: #151d22; }
.radar-layer-button.active { color: #d9eff8; background: #18303b; box-shadow: inset 0 -2px #69b8dc; }
.rating-radar-player { position: absolute; width: 8px; height: 8px; border: 2px solid #11171b; border-radius: 50%; transform: translate(-50%, -50%) scale(.35); opacity: .38; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.rating-radar-player.team-2 { background: #d6a44a; }
.rating-radar-player.team-3 { background: #5ca3c7; }
.rating-radar-player.participant { z-index: 2; transform: translate(-50%, -50%) scale(.55); opacity: 1; box-shadow: 0 0 0 2px #fff2a1, 0 0 6px #fff2a1; }
.rating-radar-player.dead { z-index: 3; width: 13px; height: 13px; border: 0; border-radius: 0; background-color: transparent; background-image: url('assets/icons/x.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: .88; filter: invert(92%) sepia(7%) saturate(479%) hue-rotate(158deg) brightness(106%) drop-shadow(0 0 2px #050708); transform: translate(-50%, -50%) scale(.62); }
.rating-radar-player.participant.dead { opacity: 1; filter: invert(88%) sepia(75%) saturate(445%) hue-rotate(353deg) brightness(105%) drop-shadow(0 0 4px #fff2a1); transform: translate(-50%, -50%) scale(.72); box-shadow: none; }
.rating-radar-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; color: #8b9ba4; font: 10px var(--font-mono); }
.rating-radar-caption button { flex: 0 0 auto; border-color: #3f7188; color: #a7d5e8; }
.rating-damage-breakdown { border-bottom: 1px solid #34414b; }
.rating-damage-total { border-bottom: 1px solid #34414b; }
.rating-damage-total-values { display: grid; grid-template-columns: 1fr 1fr; background: #0a1115; }
.rating-damage-total-values > div { display: grid; gap: 6px; padding: 13px; border-right: 1px solid #30404a; }
.rating-damage-total-values > div:last-child { border-right: 0; }
.rating-damage-total-values span { color: #85a9b9; font-size: 12px; font-weight: 850; }
.rating-damage-total-values strong { color: #f2da78; font-size: 25px; line-height: 1; }
.rating-kast-summary { border-bottom: 1px solid #34414b; }
.rating-kast-summary-values { display: grid; background: #0a1115; }
.rating-kast-summary-values > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 9px 13px; border-top: 1px solid #26323a; }
.rating-kast-summary-values span { color: #9ab8c5; font-size: 13px; font-weight: 850; }
.rating-kast-summary-values strong { color: #f2da78; font-size: 21px; }
.rating-damage-list { display: grid; }
.rating-damage-event, .rating-kill-event { display: grid; border-top: 1px solid #26323a; background: #0b1115; }
.rating-event-subject { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 9px 13px; }
.rating-event-subject > div:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.rating-event-subject > div:nth-child(2) strong { overflow: hidden; color: #e3ebef; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.rating-event-subject > div:nth-child(2) span { color: #7fc1df; font-size: 12px; font-weight: 750; }
.rating-event-subject > strong { color: #91a2ac; font-size: 12px; }
.rating-event-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #30404a; background: #0a1014; }
.rating-event-factor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 56px; padding: 9px 12px; border-right: 1px solid #30404a; border-bottom: 1px solid #30404a; }
.rating-event-factor:nth-child(even) { border-right: 0; }
.rating-event-factor span { color: #91a4ae; font-size: 12px; font-weight: 850; letter-spacing: .025em; }
.rating-event-factor strong { color: #dbe4e9; font-size: 18px; line-height: 1; }
.rating-event-factor.economy strong { color: #7fc5e2; }
.rating-event-factor.modifier strong { color: #d8b967; }
.rating-event-factor.result strong { color: #f2da78; }
.rating-damage-icon { display: grid; width: 52px; height: 34px; place-items: center; }
.rating-damage-icon img { width: 48px; max-height: 28px; object-fit: contain; opacity: 0.78; }
.rating-event-breakdown { border-bottom: 1px solid #34414b; }
.rating-kill-list, .rating-swing-events, .rating-kill-detail-list, .rating-survival-list, .rating-kast-list { display: grid; }
.rating-kill-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 8px 13px; border-top: 1px solid #26323a; }
.rating-kill-icon { display: grid; width: 42px; height: 28px; place-items: center; }
.rating-kill-icon img { width: 38px; max-height: 24px; object-fit: contain; opacity: .78; }
.rating-kill-icon img.interface { width: 19px; filter: invert(85%) sepia(8%) saturate(447%) hue-rotate(158deg) brightness(103%); }
.rating-kill-row > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.rating-kill-row strong { overflow: hidden; color: #dce5ea; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rating-kill-row > div:nth-child(2) span { color: #79b9d5; font-size: 11px; }
.rating-event-tick { color: #7f8f98; font-size: 9px; }
.rating-kill-detail-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 8px 13px; border-top: 1px solid #26323a; }
.rating-kill-detail-row > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.rating-kill-detail-row > div:nth-child(2) strong { overflow: hidden; color: #dce5ea; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rating-kill-detail-row > div:nth-child(2) span { color: #79b9d5; font-size: 11px; }
.rating-kill-detail-row > div:nth-child(2) small { color: #75858e; font-size: 9px; }
.rating-detail-values { display: grid; justify-items: end; gap: 4px; }
.rating-detail-values strong { color: #9baab3; font-size: 10px; }
.rating-detail-values b { color: #f1d46e; font-size: 12px; }
.rating-detail-empty { display: grid; gap: 5px; min-height: 72px; place-content: center; padding: 14px; color: #81919a; background: #0a1014; font-size: 11px; text-align: center; }
.rating-detail-empty strong { color: #dce5ea; font-size: 12px; }
.rating-detail-empty.positive strong, .rating-detail-empty.positive span { color: #82c9a3; }
.rating-kast-event { display: grid; border-top: 1px solid #26323a; }
.rating-kast-factors { display: grid; grid-template-columns: repeat(2, 1fr); background: #0a1115; }
.rating-kast-factor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border-right: 1px solid #30404a; border-bottom: 1px solid #30404a; }
.rating-kast-factor:nth-child(even) { border-right: 0; }
.rating-kast-factor:nth-last-child(-n+2) { border-bottom: 0; }
.rating-kast-factor span { color: #8aa8b6; font-size: 12px; font-weight: 850; letter-spacing: .035em; }
.rating-kast-factor strong { color: #768790; font-size: 18px; line-height: 1; }
.rating-kast-factor.active strong, .rating-kast-factor.result strong { color: #f1d46e; }
.rating-kast-factor.inactive strong { color: #687780; }
.rating-survival-event { display: grid; border-top: 1px solid #26323a; }
.rating-survival-factors { display: grid; grid-template-columns: repeat(3, 1fr); background: #0a1115; }
.rating-survival-factors > div { display: grid; gap: 5px; min-height: 64px; align-content: center; padding: 10px 12px; border-right: 1px solid #30404a; }
.rating-survival-factors > div:last-child { border-right: 0; }
.rating-survival-factors span { color: #7da7b9; font-size: 11px; font-weight: 850; letter-spacing: .06em; }
.rating-survival-factors strong { color: #f1d46e; font-size: 17px; line-height: 1; }
.rating-survival-event .rating-kill-detail-row { border-top-color: #30404a; }
.rating-swing-event-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 9px 13px; border: 0; border-top: 1px solid #26323a; color: inherit; background: #0e1418; text-align: left; cursor: pointer; }
.rating-swing-event-row:hover { background: #142029; }
.rating-swing-event-row > div { display: grid; gap: 4px; min-width: 0; }
.rating-swing-event-row strong { overflow: hidden; color: #dce5ea; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rating-swing-event-row span { color: #81939e; font: 9px var(--font-mono); }
.rating-swing-event-row > b { color: #f1d46e; font-size: 14px; white-space: nowrap; }

/* Rating workspace: analytical editorial visual system. */
.rating-pane {
  --rating-bg: #0b0f12;
  --rating-surface: #10161a;
  --rating-surface-raised: #151d22;
  --rating-border: #26323a;
  --rating-border-strong: #3d4b55;
  --rating-text: #e7edf0;
  --rating-text-secondary: #a8b3ba;
  --rating-text-muted: #84919a;
  --rating-cyan: #69b8dc;
  --rating-amber: #e1c45a;
  --rating-green: #69b98c;
  --rating-red: #d26d73;
  color: var(--rating-text);
  background: var(--rating-bg);
  font-size: 13px;
  line-height: 1.4;
}
.rating-pane .number { font-family: var(--font-ui); font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }
.behavior-insights { margin-top: 12px; padding: 12px; border: 1px solid var(--rating-border); background: var(--rating-surface); }
.behavior-insights summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.behavior-insights p { margin: 10px 0; color: var(--rating-text-secondary); }
.behavior-insights h3 { margin: 14px 0 8px; font-size: 14px; }
.visual-control-stats h2 { margin: 0; font-size: 18px; }
.behavior-control caption { padding: 10px 0; text-align: left; color: var(--rating-text-secondary); }
.visual-control-stats .behavior-profiles { grid-template-columns: 1fr; }
.visual-control-stats .behavior-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 700px) {
  .visual-control-stats .behavior-metrics { grid-template-columns: 1fr; gap: 0; }
}
.behavior-profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.behavior-side { min-width: 0; }
.behavior-metrics { display: grid; }
.behavior-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--rating-border); }
.behavior-metric small { grid-column: 1 / -1; }
.behavior-method { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--rating-border); }
.behavior-metric strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.behavior-insights small { display: block; color: var(--rating-text-muted); }
.behavior-events { max-height: 320px; overflow: auto; }
.behavior-events > div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rating-border); }
.behavior-control table { border-collapse: collapse; width: 100%; font-size: 11px; font-variant-numeric: tabular-nums; }
.behavior-control th, .behavior-control td { padding: 7px 9px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--rating-border); }
.behavior-control th:first-child, .behavior-control td:first-child { text-align: left; }
.behavior-control th { position: sticky; top: 0; background: var(--rating-surface); }
.behavior-events a { min-width: 64px; color: var(--rating-cyan); }
.rating-header { border-color: var(--rating-border); background: var(--rating-surface); }
.rating-header span { color: var(--rating-text-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; line-height: 14px; }
.rating-header strong { color: var(--rating-text); font-size: 24px; font-weight: 600; line-height: 28px; letter-spacing: -.015em; }
.rating-header-actions > button, .rating-radar-caption button { min-height: 34px; border-color: var(--rating-border-strong); color: var(--rating-text-secondary); background: var(--rating-surface); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.rating-header-actions > button:hover, .rating-radar-caption button:hover { color: var(--rating-text); border-color: var(--rating-cyan); background: var(--rating-surface-raised); }
.rating-workspace { gap: 10px; }
.rating-graph-panel, .rating-inspector { border-color: var(--rating-border); background: var(--rating-surface); }
.rating-overview-graph { background: var(--rating-bg); }
.rating-final-node { border-color: #8b783b; color: var(--rating-amber); background: #19170f; box-shadow: none; }
.rating-final-node:hover, .rating-final-node.active { border-color: var(--rating-amber); background: #201c10; box-shadow: none; }
.rating-final-node span { color: #b8a45d; font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .045em; }
.rating-final-node strong { color: #f1d66b; font-size: 32px; font-weight: 700; line-height: 34px; letter-spacing: -.025em; }
.rating-component { gap: 2px; border-color: var(--rating-border); color: var(--rating-text-secondary); background: var(--rating-surface); transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.rating-component:hover { border-color: var(--rating-border-strong); color: var(--rating-text); background: var(--rating-surface-raised); }
.rating-component.active { border-color: var(--rating-cyan); color: var(--rating-text); background: #111b20; box-shadow: inset 0 -2px var(--rating-cyan); }
.rating-component-label { color: var(--rating-text-secondary); font-size: 11px; font-weight: 600; line-height: 16px; }
.rating-component.active .rating-component-label { color: #b9ddec; }
.rating-component-value { color: var(--rating-text); font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -.025em; }
.rating-trace { border-top-color: var(--rating-border); background: var(--rating-bg); }
.rating-chart-heading { padding-top: 17px; }
.rating-chart-heading span { color: var(--rating-text-muted); font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .055em; }
.rating-chart-heading strong { color: var(--rating-text); font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: -.01em; }
.rating-chart-legend { gap: 18px; }
.rating-chart-legend span { color: var(--rating-text-secondary); font-size: 11px; font-weight: 500; letter-spacing: .01em; }
.rating-chart-legend span::before { width: 22px; height: 2px; background: var(--rating-cyan); }
.rating-chart-legend span.cumulative { color: #d8c672; }
.rating-chart-legend span.cumulative::before { background: var(--rating-amber); }
.rating-chart-grid { stroke: #223039; stroke-dasharray: 3 7; }
.rating-chart-axis { stroke: #41515b; }
.rating-chart-axis-value, .rating-chart-axis-label { fill: var(--rating-text-muted); font-family: var(--font-data); font-size: 12px; font-weight: 500; }
.rating-chart-axis-label { fill: var(--rating-text-secondary); font-size: 11px; font-weight: 600; letter-spacing: .025em; }
.rating-chart-x-axis-label { fill: var(--rating-text-secondary); font-family: var(--font-data); font-size: 11px; font-weight: 600; letter-spacing: .05em; }
.rating-chart-curve-halo, .rating-chart-cumulative-halo { display: none; }
.rating-chart-curve { stroke: var(--rating-cyan); stroke-width: 2.5px; filter: none; }
.rating-chart-baseline { stroke: #72818a; stroke-width: 1.25px; stroke-dasharray: 6 6; }
.rating-chart-cumulative { stroke: var(--rating-amber); stroke-width: 2.5px; filter: none; }
.rating-chart-rating-stem { stroke: rgba(132,145,154,.42); stroke-width: 1.25px; }
.rating-chart-crosshair { stroke: var(--rating-amber); stroke-width: 1.25px; stroke-dasharray: 4 5; }
.rating-chart-hover-dot, .rating-chart-hover-dot.cumulative { fill: var(--rating-bg); stroke: var(--rating-amber); stroke-width: 3px; filter: none; }
.rating-chart-dot { fill: var(--rating-bg); stroke: #7da6b7; stroke-width: 3px; filter: none; }
.rating-chart-point.positive .rating-chart-dot { stroke: var(--rating-green); }
.rating-chart-point.negative .rating-chart-dot { stroke: var(--rating-red); }
.rating-chart-point:hover .rating-chart-dot, .rating-chart-point.selected .rating-chart-dot { fill: var(--rating-amber); stroke: #f2dea0; stroke-width: 4px; filter: none; }
.rating-chart-round { fill: var(--rating-text-secondary); font-family: var(--font-data); font-size: 12px; font-weight: 600; }
.rating-inspector { background: var(--rating-surface); }
.rating-pane .section-header, .rating-inspector .section-header { min-height: 40px; padding: 0 14px; border-color: var(--rating-border); color: var(--rating-text-secondary); background: var(--rating-surface-raised); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .035em; }
.rating-chart-hover-detail { gap: 12px; padding: 16px; border-color: var(--rating-border); background: #11191e; }
.rating-chart-hover-detail span { color: var(--rating-text-secondary); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .025em; }
.rating-chart-hover-detail > div:first-child strong { color: #f1d66b; font-size: 28px; font-weight: 600; line-height: 32px; letter-spacing: -.025em; }
.rating-chart-hover-metrics strong { color: var(--rating-amber); font-size: 14px; font-weight: 600; }
.rating-node-details { gap: 10px; padding: 16px; border-color: var(--rating-border); }
.rating-node-details > span, .rating-impact span { color: var(--rating-text-muted); font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .04em; }
.rating-node-details > strong { color: var(--rating-text); font-size: 18px; font-weight: 600; line-height: 24px; }
.rating-node-details > b { color: var(--rating-amber); font-size: 24px; font-weight: 600; line-height: 28px; }
.rating-impact { border-color: var(--rating-border); }
.rating-impact strong { color: var(--rating-amber); font-size: 14px; font-weight: 600; }
.rating-swing-state { border-color: var(--rating-border); background: var(--rating-bg); }
.rating-swing-state > div { border-color: var(--rating-border); }
.rating-swing-state span { color: var(--rating-text-muted); font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .035em; }
.rating-swing-state strong { color: var(--rating-text); font-size: 15px; font-weight: 600; }
.rating-swing-state .rating-swing-arrow { color: var(--rating-amber); background: #19170f; }
.rating-swing-state .rating-swing-arrow strong { color: var(--rating-amber); }
.rating-radar-header, .rating-radar-viewport { border-color: var(--rating-border); }
.rating-radar-empty { color: var(--rating-text-muted); background: var(--rating-bg); font-size: 12px; font-weight: 500; letter-spacing: .015em; }
.rating-radar-caption { color: var(--rating-text-muted); font: 500 11px/16px var(--font-data); }
.rating-radar-caption button { color: #b9ddec; }
.rating-damage-breakdown, .rating-damage-total, .rating-kast-summary, .rating-event-breakdown { border-color: var(--rating-border); }
.rating-damage-total-values, .rating-kast-summary-values, .rating-event-factors, .rating-kast-factors, .rating-survival-factors { background: var(--rating-bg); }
.rating-damage-total-values > div { gap: 6px; padding: 14px; border-color: var(--rating-border); }
.rating-damage-total-values span { color: var(--rating-text-secondary); font-size: 12px; font-weight: 600; line-height: 16px; }
.rating-damage-total-values strong { color: var(--rating-amber); font-size: 26px; font-weight: 600; line-height: 30px; letter-spacing: -.02em; }
.rating-kast-summary-values > div { min-height: 48px; padding: 10px 14px; border-color: var(--rating-border); }
.rating-kast-summary-values span { color: var(--rating-text-secondary); font-size: 13px; font-weight: 600; }
.rating-kast-summary-values strong { color: var(--rating-amber); font-size: 22px; font-weight: 600; }
.rating-damage-event, .rating-kill-event, .rating-kast-event, .rating-survival-event { border-color: var(--rating-border); background: var(--rating-surface); }
.rating-event-subject { gap: 12px; padding: 10px 14px; }
.rating-event-subject > div:nth-child(2) { gap: 3px; }
.rating-event-subject > div:nth-child(2) strong { color: var(--rating-text); font-size: 14px; font-weight: 600; line-height: 20px; }
.rating-event-subject > div:nth-child(2) span { color: var(--rating-text-secondary); font-size: 12px; font-weight: 400; line-height: 18px; }
.rating-event-subject > strong { color: var(--rating-text-muted); font-size: 12px; font-weight: 500; }
.rating-event-factors { border-color: var(--rating-border); }
.rating-event-factor { min-height: 56px; padding: 10px 12px; border-color: var(--rating-border); }
.rating-event-factor span { color: var(--rating-text-secondary); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .01em; }
.rating-event-factor strong { color: var(--rating-text); font-size: 18px; font-weight: 600; line-height: 22px; }
.rating-event-factor.economy strong, .rating-event-factor.modifier strong { color: var(--rating-text); }
.rating-event-factor.result strong { color: var(--rating-amber); }
.rating-damage-icon img, .rating-kill-icon img { opacity: .9; }
.rating-kill-row { gap: 12px; min-height: 56px; padding: 9px 14px; border-color: var(--rating-border); }
.rating-kill-row > div:nth-child(2) { gap: 2px; }
.rating-kill-row strong { color: var(--rating-text); font-size: 13px; font-weight: 600; line-height: 18px; }
.rating-kill-row > div:nth-child(2) span { color: var(--rating-text-secondary); font-size: 12px; font-weight: 400; line-height: 18px; }
.rating-event-tick { color: var(--rating-text-muted); font: 500 11px/16px var(--font-data); }
.rating-kill-detail-row { gap: 12px; min-height: 64px; padding: 9px 14px; border-color: var(--rating-border); }
.rating-kill-detail-row > div:nth-child(2) { gap: 2px; }
.rating-kill-detail-row > div:nth-child(2) strong { color: var(--rating-text); font-size: 13px; font-weight: 600; line-height: 18px; }
.rating-kill-detail-row > div:nth-child(2) span { color: var(--rating-text-secondary); font-size: 12px; line-height: 18px; }
.rating-kill-detail-row > div:nth-child(2) small { color: var(--rating-text-muted); font: 500 11px/16px var(--font-data); }
.rating-detail-values { gap: 3px; }
.rating-detail-values strong { color: var(--rating-text-muted); font-size: 11px; font-weight: 600; }
.rating-detail-values b { color: var(--rating-amber); font-size: 14px; font-weight: 600; }
.rating-detail-empty { color: var(--rating-text-muted); background: var(--rating-bg); font-size: 12px; }
.rating-detail-empty strong { color: var(--rating-text); font-size: 13px; font-weight: 600; }
.rating-detail-empty.positive strong, .rating-detail-empty.positive span { color: var(--rating-green); }
.rating-kast-factor { min-height: 58px; padding: 10px 12px; border-color: var(--rating-border); }
.rating-kast-factor span { color: var(--rating-text-secondary); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .015em; }
.rating-kast-factor strong { color: var(--rating-text-muted); font-size: 18px; font-weight: 600; }
.rating-kast-factor.active strong, .rating-kast-factor.result strong { color: var(--rating-amber); }
.rating-kast-factor.inactive strong { color: #74828b; }
.rating-survival-factors > div { border-color: var(--rating-border); }
.rating-survival-factors span { color: var(--rating-text-secondary); font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .035em; }
.rating-survival-factors strong { color: var(--rating-amber); font-size: 18px; font-weight: 600; }
.rating-survival-event .rating-kill-detail-row { border-color: var(--rating-border); }
.rating-swing-event-row { min-height: 60px; padding: 10px 14px; border-color: var(--rating-border); color: inherit; background: var(--rating-surface); }
.rating-swing-event-row:hover { background: var(--rating-surface-raised); }
.rating-swing-event-row > div { gap: 3px; }
.rating-swing-event-row strong { color: var(--rating-text); font-size: 13px; font-weight: 600; line-height: 18px; }
.rating-swing-event-row span { color: var(--rating-text-muted); font: 500 11px/16px var(--font-data); }
.rating-swing-event-row > b { color: var(--rating-amber); font-size: 16px; font-weight: 600; }
.aim-rating-section { margin-top: 10px; border: 1px solid var(--rating-border); background: var(--rating-surface); }
.aim-rating-summary { display: grid; min-height: 86px; border-bottom: 1px solid var(--rating-border); }
.aim-dimensions-profile { display: grid; grid-template-columns: 180px minmax(0, 1fr); border-bottom: 1px solid var(--rating-border); background: #0b1115; }
.aim-dimensions-overall { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; gap: 2px 12px; min-height: 104px; padding: 14px 16px; border-right: 1px solid var(--rating-border); }
.aim-dimensions-overall span, .aim-dimension-card span { color: var(--rating-cyan); font-size: 12px; font-weight: 700; letter-spacing: .045em; }
.aim-dimensions-overall strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--rating-amber); font-size: 42px; line-height: 46px; }
.aim-dimensions-overall small, .aim-dimension-card small { color: var(--rating-text-muted); font: 10px var(--font-data); }
.aim-dimensions-grid { display: grid; grid-template-columns: repeat(5, minmax(105px, 1fr)); }
.aim-dimension-card { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 12px 14px; border-right: 1px solid var(--rating-border); }
.aim-dimension-card:last-child { border-right: 0; }
.aim-dimension-card strong { color: var(--rating-text); font: 700 24px var(--font-data); }
.aim-metrics-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(105px, 1fr)); border-top: 1px solid var(--rating-border); }
.aim-metric-card { display: grid; align-content: center; gap: 3px; min-width: 0; padding: 10px 12px; border-right: 1px solid var(--rating-border); }
.aim-metric-card:last-child { border-right: 0; }
.aim-metric-card span, .aim-counter-evidence span { color: var(--rating-cyan); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.aim-metric-card strong { color: var(--rating-text); font: 700 19px var(--font-data); }
.aim-metric-card small, .aim-counter-evidence small { color: var(--rating-text-muted); font: 9px var(--font-data); }
.aim-counter-evidence { display: grid; grid-column: 1 / -1; grid-template-columns: auto 1fr; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--rating-border); }
.aim-dimensions-provenance { grid-column: 1 / -1; padding: 7px 12px; border-top: 1px solid var(--rating-border); color: var(--rating-text-muted); font: 9px var(--font-data); letter-spacing: .025em; }
.aim-dimensions-message { grid-column: 1 / -1; min-height: 70px; padding: 24px 16px; color: var(--rating-text-muted); font: 700 11px var(--font-data); letter-spacing: .05em; }
.aim-dimensions-message.warning { color: #d7a85d; }
.aim-view-tabs { display: flex; min-height: 38px; border-bottom: 1px solid var(--rating-border); background: #0b1115; }
.aim-view-tabs button { min-width: 150px; padding: 0 16px; border: 0; border-right: 1px solid var(--rating-border); border-radius: 0; color: var(--rating-text-muted); background: transparent; font-size: 11px; font-weight: 700; letter-spacing: .055em; }
.aim-view-tabs button:hover { color: var(--rating-text); background: var(--rating-surface-raised); }
.aim-view-tabs button.selected { color: var(--rating-cyan); background: #11212a; box-shadow: inset 0 -2px var(--rating-cyan); }
.aim-rating-stats, .aim-round-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aim-rating-stats > div, .aim-round-stats > div { display: grid; align-content: center; gap: 5px; min-width: 0; padding: 12px 16px; border-right: 1px solid var(--rating-border); }
.aim-rating-stats > div:last-child, .aim-round-stats > div:last-child { border-right: 0; }
.aim-rating-stats span, .aim-round-stats span { color: var(--rating-text-muted); font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .04em; }
.aim-rating-stats strong, .aim-round-stats strong { overflow: hidden; color: var(--rating-text); font-size: 19px; font-weight: 600; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; }
.aim-rating-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); }
.aim-rating-chart { min-width: 0; overflow: hidden; border-right: 1px solid var(--rating-border); }
.aim-rating-chart .rating-chart-heading span { color: var(--rating-text-muted); }
.aim-rating-chart .rating-chart-curve { stroke: var(--rating-green); }
.aim-rating-chart .rating-chart-dot { stroke: var(--rating-green); }
.aim-round-detail { min-width: 0; background: #0e1519; }
.aim-round-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; padding: 11px 14px; border-bottom: 1px solid var(--rating-border); }
.aim-round-heading > div { display: grid; gap: 4px; }
.aim-round-heading span { color: var(--rating-text); font-size: 15px; font-weight: 600; line-height: 20px; }
.aim-round-heading small { color: var(--rating-text-muted); font-size: 11px; font-weight: 500; line-height: 15px; }
.aim-round-heading > strong { color: var(--rating-amber); font-size: 32px; font-weight: 700; line-height: 36px; }
.aim-round-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--rating-border); }
.aim-round-stats > div { min-height: 66px; padding: 9px 13px; border-bottom: 1px solid var(--rating-border); }
.aim-round-stats > div:nth-child(even) { border-right: 0; }
.aim-round-stats strong { font-size: 16px; line-height: 20px; }
.aim-engagement-list { display: grid; max-height: 310px; overflow-y: auto; }
.aim-engagement-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(78px, auto) auto; align-items: center; gap: 10px; min-height: 66px; padding: 8px 13px; border: 0; border-top: 1px solid var(--rating-border); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.aim-engagement-row:first-child { border-top: 0; }
.aim-engagement-row:hover, .aim-engagement-row:focus-visible { background: var(--rating-surface-raised); outline: 1px solid var(--rating-cyan); outline-offset: -1px; }
.aim-engagement-row > div { display: grid; min-width: 0; gap: 2px; }
.aim-engagement-row > div > strong, .aim-engagement-row > div > span, .aim-engagement-row > div > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aim-engagement-row > div > strong { color: var(--rating-text); font-size: 12px; line-height: 17px; }
.aim-engagement-row > div > span, .aim-engagement-row > div > small { color: var(--rating-text-muted); font-size: 10px; line-height: 14px; }
.aim-engagement-row > div > small { color: var(--rating-amber); }
.aim-engagement-row > strong { color: var(--rating-green); font-size: 10px; font-weight: 600; text-align: right; }
.aim-engagement-row > span { color: var(--rating-text-muted); font-size: 10px; white-space: nowrap; }
.aim-rating-empty, .aim-round-empty { display: grid; min-height: 130px; place-items: center; color: var(--rating-text-muted); font-size: 12px; font-weight: 500; letter-spacing: .025em; }
.visibility-calculation-view { display: grid; background: #0a1014; }
.visibility-engagement-heading, .visibility-3d-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 9px 14px; border-bottom: 1px solid var(--rating-border); }
.visibility-engagement-heading > div, .visibility-3d-toolbar > div:first-child { display: grid; gap: 3px; }
.visibility-engagement-heading span, .visibility-3d-toolbar span { color: var(--rating-text-muted); font-size: 10px; font-weight: 600; letter-spacing: .05em; }
.visibility-engagement-heading strong, .visibility-3d-toolbar strong { color: var(--rating-text); font-size: 13px; }
.visibility-engagement-heading button, .visibility-camera-controls button { min-height: 30px; padding: 0 10px; border: 1px solid #356b86; border-radius: 0; color: #a4d7ed; background: #112330; font-size: 10px; font-weight: 700; letter-spacing: .045em; }
.visibility-event-strip { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--rating-border); background: #0d1418; }
.visibility-event-tick { display: grid; flex: 0 0 auto; gap: 2px; min-width: 112px; min-height: 44px; padding: 6px 10px; border: 0; border-right: 1px solid var(--rating-border); border-radius: 0; color: var(--rating-text-muted); background: transparent; text-align: left; }
.visibility-event-tick strong { color: var(--rating-text); font-size: 10px; font-weight: 600; }
.visibility-event-tick span { font-size: 10px; }
.visibility-event-tick.shot strong { color: var(--rating-amber); }
.visibility-event-tick.damage strong { color: #e5877f; }
.visibility-event-tick:hover, .visibility-event-tick.selected { background: #152129; }
.visibility-event-tick.selected { box-shadow: inset 0 -2px var(--rating-cyan); }
.visibility-diagnostic-loaded { display: grid; }
.visibility-camera-controls { display: flex !important; gap: 6px !important; }
.visibility-3d-stage { position: relative; min-height: 440px; overflow: hidden; border-bottom: 1px solid var(--rating-border); background: #080d10; cursor: grab; touch-action: none; user-select: none; }
.visibility-3d-stage.orbiting, .visibility-3d-stage.panning { cursor: grabbing; }
.visibility-3d-canvas { display: block; width: 100%; height: 440px; outline: 0; }
.visibility-map-face { fill: rgba(84,105,117,.2); stroke: rgba(132,155,168,.38); stroke-width: .55; vector-effect: non-scaling-stroke; pointer-events: none; }
.visibility-map-face.concrete { fill: rgba(100,111,117,.22); }
.visibility-map-face.metal, .visibility-map-face.sheet_metal { fill: rgba(68,109,128,.25); stroke: rgba(106,165,191,.42); }
.visibility-map-face.wood { fill: rgba(125,97,63,.25); stroke: rgba(176,135,84,.42); }
.visibility-map-face.transparent { fill: rgba(78,153,176,.08); stroke: rgba(100,203,231,.48); stroke-dasharray: 3 2; }
.visibility-map-face.world_physics { opacity: .82; stroke: rgba(232,183,94,.72); stroke-width: .8; }
.visibility-map-face.visibility_occluder { opacity: .42; }
.visibility-ray { stroke-width: 1; vector-effect: non-scaling-stroke; }
.visibility-ray.clear { stroke: rgba(83,196,142,.7); }
.visibility-ray.blocked { stroke: rgba(236,103,89,.8); }
.visibility-ray.behind-wall { stroke: rgba(236,103,89,.25); stroke-dasharray: 4 4; }
.visibility-ray.outside-frustum { stroke: rgba(124,139,148,.16); }
.visibility-ray.smoke-blocked { stroke: rgba(173,154,188,.55); stroke-dasharray: 3 3; }
.visibility-sample { stroke-width: 1; }
.visibility-sample.clear { fill: #53c48e; stroke: #b5efd0; }
.visibility-sample.blocked { fill: #ec6759; stroke: #ffc2ba; }
.visibility-sample.outside-frustum { fill: #53616a; stroke: #84929a; }
.visibility-sample.smoke-blocked { fill: #9b85aa; stroke: #d3c0df; }
.visibility-collision-point { fill: #ffb45e; stroke: #fff0d1; stroke-width: 1; }
.visibility-collision-point.ignored-origin { fill: #0b1115; stroke: #f0bd58; stroke-width: 1.5; stroke-dasharray: 2 1; }
.visibility-viewer-eye { fill: #62b9e5; stroke: #d7f3ff; stroke-width: 2; }
.visibility-3d-legend { position: absolute; right: 12px; bottom: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; max-width: min(720px, calc(100% - 24px)); padding: 7px 9px; border: 1px solid var(--rating-border); background: rgba(8,13,16,.9); }
.visibility-3d-legend span { color: var(--rating-text-muted); font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.visibility-3d-legend .clear { color: #78d9aa; }
.visibility-3d-legend .blocked { color: #f28d83; }
.visibility-3d-legend .map-context { color: #aebbc0; }
.visibility-3d-legend .physics-geometry { color: #e8b75e; }
.visibility-3d-legend .mesh-registration { color: #f3c96f; }
.visibility-3d-legend .visibility-geometry { color: #a6bdc9; }
.visibility-3d-legend .scene-detail { color: #78adc2; }
.visibility-3d-legend .ignored-origin { color: #f0bd58; }
.visibility-3d-legend .viewer-position { color: #58bced; }
.visibility-3d-legend .target-position { color: #ef6670; }
.visibility-3d-legend .body-heading { color: #79c8ef; }
.visibility-3d-legend .aim-direction { color: #d9edf6; }
.visibility-3d-legend .radar-plane { color: #d8e3e8; }
.visibility-3d-legend .radar-registration { color: #f1f7fa; }
.visibility-3d-legend .actual-shot { color: #ffc857; }
.visibility-camera-help { position: absolute; top: 10px; left: 12px; padding: 6px 8px; border: 1px solid var(--rating-border); color: #8397a2; background: rgba(8,13,16,.88); font-size: 9px; font-weight: 700; letter-spacing: .045em; pointer-events: none; }
.visibility-diagnostic-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); border-bottom: 1px solid var(--rating-border); }
.visibility-diagnostic-facts > div { display: grid; gap: 4px; min-width: 0; padding: 10px 13px; border-right: 1px solid var(--rating-border); }
.visibility-diagnostic-facts > div:last-child { border-right: 0; }
.visibility-diagnostic-facts span { color: var(--rating-text-muted); font-size: 9px; font-weight: 600; }
.visibility-diagnostic-facts strong { overflow: hidden; color: var(--rating-text); font: 600 12px var(--font-data); text-overflow: ellipsis; white-space: nowrap; }
.visibility-collision-list { display: grid; max-height: 150px; overflow-y: auto; border-bottom: 1px solid var(--rating-border); }
.visibility-collision-list > div { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 34px; padding: 5px 13px; border-top: 1px solid var(--rating-border); font-size: 10px; }
.visibility-collision-list > div:first-child { border-top: 0; }
.visibility-collision-list strong { color: var(--rating-amber); }
.visibility-collision-list span { overflow: hidden; color: var(--rating-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.visibility-collision-list > span { padding: 12px 13px; color: var(--rating-text-muted); font-size: 10px; }
.visibility-provenance { display: flex; justify-content: space-between; gap: 16px; padding: 8px 13px; color: var(--rating-text-muted); font-size: 9px; letter-spacing: .025em; }
.aim-trace-layout { display: grid; min-width: 0; }
.aim-trace-engagement-switcher { display: flex; overflow-x: auto; border-bottom: 1px solid var(--rating-border); background: #0b1115; }
.aim-trace-engagement-switcher button { display: grid; flex: 0 0 auto; min-width: 150px; gap: 3px; padding: 8px 12px; border: 0; border-right: 1px solid var(--rating-border); border-radius: 0; color: var(--rating-text-muted); background: transparent; text-align: left; cursor: pointer; }
.aim-trace-engagement-switcher button:hover, .aim-trace-engagement-switcher button:focus-visible { color: var(--rating-text); background: var(--rating-surface-raised); outline: 1px solid var(--rating-cyan); outline-offset: -1px; }
.aim-trace-engagement-switcher button.selected { color: var(--rating-cyan); background: #11212a; box-shadow: inset 0 -2px var(--rating-cyan); }
.aim-trace-engagement-switcher strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.aim-trace-engagement-switcher span { font: 9px var(--font-data); }
.aim-trace-viewer { display: grid; min-width: 0; min-height: 520px; border: 0; background: #0a0f13; }
.aim-trace-loading, .aim-trace-empty { display: grid; min-height: 420px; place-items: center; color: var(--rating-text-muted); font: 700 10px var(--font-data); letter-spacing: .08em; }
.aim-trace-empty.compact { min-height: 250px; }
.aim-trace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px; border-bottom: 1px solid var(--rating-border); background: #10171c; }
.aim-trace-header > div:first-child { display: grid; gap: 3px; }
.aim-trace-header strong { color: var(--rating-text); font: 700 13px var(--font-data); }
.aim-trace-header span { color: var(--rating-text-muted); font: 600 11px var(--font-data); letter-spacing: .04em; }
.aim-trace-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.aim-trace-legend .final-path { color: #f4f8fa; }
.aim-trace-legend .aim-only { color: #67b9dc; }
.aim-trace-legend .follow-through { color: #8799a4; }
.aim-trace-legend .kill { color: #ff8a80; }
.aim-trace-legend .hit { color: #70c994; }
.aim-trace-legend .miss { color: #dc7479; }
.aim-trace-legend .post-death { color: #8799a4; }
.aim-trace-availability { padding: 9px 13px; border-bottom: 1px solid #6f532e; color: #e4ba72; background: #231a10; font: 700 10px var(--font-data); letter-spacing: .035em; }
.aim-trace-metrics { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-bottom: 1px solid var(--rating-border); }
.aim-trace-metrics > div { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border-right: 1px solid var(--rating-border); }
.aim-trace-metrics > div:last-child { border-right: 0; }
.aim-trace-metrics span { color: var(--rating-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .035em; }
.aim-trace-metrics strong { overflow: hidden; color: var(--rating-text); font: 600 15px var(--font-data); text-overflow: ellipsis; }
.aim-analysis-grid { display: grid; grid-template-columns: minmax(480px, 1.2fr) minmax(390px, .8fr); min-width: 0; border-bottom: 1px solid var(--rating-border); }
.aim-analysis-panel { display: grid; align-content: start; min-width: 0; background: #0a1014; }
.aim-analysis-panel + .aim-analysis-panel { border-left: 1px solid var(--rating-border); }
.aim-analysis-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 12px; border-bottom: 1px solid var(--rating-border); background: #0e161b; }
.aim-analysis-panel > header > div { display: grid; gap: 3px; }
.aim-analysis-panel > header strong { color: var(--rating-text); font: 700 12px var(--font-data); letter-spacing: .035em; }
.aim-analysis-panel > header span { color: var(--rating-text-muted); font: 600 10px var(--font-data); letter-spacing: .035em; }
.aim-plane-header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.aim-plane-zoom-controls { display: flex; align-items: stretch; border: 1px solid #40515c; }
.aim-plane-zoom-controls button { display: grid; width: 34px; min-height: 30px; padding: 0; place-items: center; border: 0; border-right: 1px solid #40515c; border-radius: 0; color: var(--rating-text); background: #101b21; cursor: pointer; }
.aim-plane-zoom-controls button:last-child { border-right: 0; }
.aim-plane-zoom-controls button:hover, .aim-plane-zoom-controls button:focus-visible { background: #18303b; outline: 1px solid var(--rating-cyan); outline-offset: -1px; }
.aim-plane-zoom-controls button:disabled { opacity: .38; cursor: default; }
.aim-plane-zoom-controls button.reset { width: 42px; font: 700 11px var(--font-data); }
.aim-plane-zoom-controls img { width: 16px; height: 16px; filter: invert(86%) sepia(8%) saturate(278%) hue-rotate(154deg); }
.aim-plane-stage { min-height: 460px; padding: 8px; overflow: hidden; background: #080d10; cursor: zoom-in; touch-action: pan-y; }
.aim-plane-chart { display: block; width: 100%; height: 460px; }
.aim-plane-grid line { stroke: #202d35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.aim-plane-grid line.axis { stroke: #4d6573; }
.aim-plane-viewport-frame { fill: none; stroke: #526672; stroke-width: 1; vector-effect: non-scaling-stroke; }
.aim-plane-standard-fov { fill: none; stroke: #d7a85d; stroke-width: 1.5; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.aim-plane-grid text, .aim-plane-axis-title, .aim-plane-unavailable { fill: #8799a4; font: 11px var(--font-data); }
.aim-plane-axis-title { fill: #8fa3ae; font-weight: 700; letter-spacing: .04em; }
.aim-plane-fov-reference .backdrop { fill: rgba(8,13,16,.92); stroke: #40515c; stroke-width: 1; }
.aim-plane-fov-reference .standard { fill: rgba(215,168,93,.04); stroke: #d7a85d; stroke-width: 1.5; stroke-dasharray: 6 4; }
.aim-plane-fov-reference .current { fill: rgba(87,180,220,.08); stroke: #67b9dc; stroke-width: 1.5; }
.aim-plane-fov-reference text { fill: #c0ced5; font: 700 10px var(--font-data); letter-spacing: .035em; }
.aim-plane-aim-only { fill: none; stroke: #67b9dc; stroke-width: 2; vector-effect: non-scaling-stroke; }
.aim-plane-final-path { fill: none; stroke: #f4f8fa; stroke-width: 2.25; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1px rgba(244,248,250,.55)); }
.aim-plane-capsule { stroke: rgba(204,105,111,.38); stroke-linecap: round; }
.aim-plane-capsule.visible { stroke: rgba(223,108,115,.82); }
.aim-plane-capsule.region-1 { stroke: rgba(222,172,88,.48); }
.aim-plane-capsule.region-1.visible { stroke: rgba(238,188,99,.92); }
.aim-plane-capsule.server-confirmed-hit { stroke: #70c994; filter: drop-shadow(0 0 3px rgba(112,201,148,.9)); }
.aim-plane-shot text { font: 700 11px var(--font-data); }
.aim-plane-shot-mark { stroke-width: 2; vector-effect: non-scaling-stroke; }
.aim-plane-shot.kill .aim-plane-shot-mark { stroke: #ff6f69; stroke-width: 3; }
.aim-plane-shot.hit .aim-plane-shot-mark { stroke: #70c994; }
.aim-plane-shot.miss .aim-plane-shot-mark { stroke: #dc7479; }
.aim-plane-shot.post-death .aim-plane-shot-mark { stroke: #8799a4; }
.aim-plane-shot.kill text { fill: #ff8a80; }
.aim-plane-shot.hit text { fill: #70c994; }
.aim-plane-shot.miss text { fill: #dc7479; }
.aim-plane-shot.post-death text { fill: #8799a4; }
.aim-plane-crosshair line { stroke: #f4f8fa; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.aim-plane-unavailable { fill: #b98d57; font-weight: 700; letter-spacing: .04em; }
.aim-plane-scrubber { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 54px; padding: 8px 12px; border-top: 1px solid var(--rating-border); background: #0d1418; }
.aim-plane-scrubber input { width: 100%; accent-color: var(--rating-cyan); }
.aim-plane-scrubber span { overflow: hidden; color: var(--rating-text-muted); font: 11px/1.5 var(--font-data); }
.aim-trace-plot { min-height: 310px; padding: 8px 10px 0; overflow-x: auto; }
.aim-trace-chart { display: block; width: 100%; min-width: 680px; height: 310px; }
.aim-trace-grid line { stroke: #243039; stroke-width: 1; }
.aim-trace-grid text, .aim-trace-axis-label { fill: #8799a4; font: 11px var(--font-data); }
.aim-trace-series { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.aim-trace-series.body { stroke: #7bc4e4; }
.aim-trace-series.head { stroke: #d7a85d; stroke-dasharray: 5 4; }
.aim-trace-shot { stroke-width: 1; stroke-dasharray: 3 3; }
.aim-trace-shot.kill { stroke: #ff6f69; stroke-width: 2; }
.aim-trace-shot.hit { stroke: #70c994; }
.aim-trace-shot.miss { stroke: #dc7479; }
.aim-trace-shot.post-death { stroke: #8799a4; stroke-dasharray: 2 4; }
.aim-trace-shot-label { font: 700 9px var(--font-data); }
.aim-trace-shot-label.kill { fill: #ff8a80; }
.aim-trace-shot-label.hit { fill: #70c994; }
.aim-trace-shot-label.miss { fill: #dc7479; }
.aim-trace-shot-label.post-death { fill: #8799a4; }
.aim-trace-quality { padding: 9px 12px; border-bottom: 1px solid var(--rating-border); color: var(--rating-text-muted); font: 11px var(--font-data); }
.aim-trace-table-wrap { overflow-x: auto; }
.aim-estimated-path, .aim-accuracy-model { stroke-dasharray: 4 5; }
.aim-selection-line { stroke: #e6e6e6; stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
.aim-bullet-error, .aim-accuracy-inaccuracy { fill: #d7a85d; stroke: #d7a85d; }
.aim-centerline-error { fill: none; stroke: #eee; stroke-width: 1.5; }
.aim-accuracy-spread { fill: none; stroke: #7bc4e4; stroke-width: 1.5; }
.aim-accuracy-model { stroke: #d7a85d; }
.aim-quality-summary { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 0; }
.aim-quality-summary span { display: block; color: #aaa; font-size: 12px; }
.aim-shot-inspector { margin: 12px 0; padding: 12px; }
.aim-shot-inspector pre { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.aim-shot-inspector select, .aim-trace-table button { border: 1px solid #555; border-radius: 0; background: #202020; color: #eee; padding: 4px 8px; }
.aim-rating-explanation { color: #bbb; font-size: 12px; }
.aim-linked-chart { cursor: crosshair; }
.aim-trace-table { width: 100%; min-width: 700px; border-collapse: collapse; font: 11px var(--font-data); }
.aim-trace-table th, .aim-trace-table td { padding: 8px 10px; border-right: 1px solid var(--rating-border); border-bottom: 1px solid var(--rating-border); text-align: right; white-space: nowrap; }
.aim-trace-table th { color: var(--rating-text-muted); background: #10171c; font-size: 10px; letter-spacing: .04em; }
.aim-trace-table th:nth-child(2), .aim-trace-table td:nth-child(2) { text-align: left; }
.aim-trace-table td { color: var(--rating-text); }
.aim-trace-table td.kill { color: #ff8a80; font-weight: 700; }
.aim-trace-table td.hit { color: #70c994; }
.aim-trace-table td.miss { color: #dc7479; }
.aim-trace-table td.post-death { color: #8799a4; }
@media (max-width: 1380px) { .aim-trace-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } .aim-trace-metrics > div:nth-child(4) { border-right: 0; } .aim-trace-metrics > div:nth-child(-n+4) { border-bottom: 1px solid var(--rating-border); } .aim-analysis-grid { grid-template-columns: 1fr; } .aim-analysis-panel + .aim-analysis-panel { border-left: 0; border-top: 1px solid var(--rating-border); } }
@media (max-width: 720px) { .aim-trace-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aim-trace-metrics > div:nth-child(even) { border-right: 0; } .aim-trace-metrics > div { border-bottom: 1px solid var(--rating-border); } .aim-analysis-panel > header { align-items: flex-start; flex-direction: column; } .aim-plane-header-tools { width: 100%; justify-content: space-between; } .aim-plane-scrubber { grid-template-columns: 1fr; } .aim-plane-stage, .aim-plane-chart { height: 360px; min-height: 360px; } }
@media (max-width: 920px) { .aim-dimensions-profile { grid-template-columns: 1fr; } .aim-dimensions-overall { border-right: 0; border-bottom: 1px solid var(--rating-border); } .aim-dimensions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aim-dimension-card { border-bottom: 1px solid var(--rating-border); } .aim-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aim-metric-card { border-bottom: 1px solid var(--rating-border); } .aim-counter-evidence { grid-template-columns: 1fr; } }
.clips-pane { display: grid; grid-template-columns: clamp(180px, 16vw, 220px) minmax(0, 1140px); justify-content: center; align-content: start; gap: 24px; padding: clamp(30px, 5vh, 52px) clamp(22px, 3vw, 48px) 48px; }
.clips-pane > div { min-width: 0; }
.clips-toolbar { min-width: 0; margin: 0; padding: 0; background: #090d10; }
.clips-toolbar .my-matches-heading h1 { font-size: clamp(112px, 12vw, 180px); }
.clip-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 22px; width: 100%; max-width: 1140px; margin: 0 auto; padding: 0; }
.clip-library-card { min-width: 0; width: 100%; border: 1px solid #34434d; background: #0e1418; color: #dce5ea; }
.clip-media { position: relative; aspect-ratio: 16 / 9; border-bottom: 1px solid #34434d; background: #111b22; }
.clip-library-card .clip-play { position: absolute; inset: 0; width: 100%; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #111b22; }
.clip-play img { width: 36px; height: 36px; filter: invert(1); }
.clip-play .clip-thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.clip-play img:not(.clip-thumbnail) { position: relative; z-index: 1; padding: 8px; width: 52px; height: 52px; background: transparent; filter: invert(1) drop-shadow(0 1px 3px #000); }
.clip-play[hidden] { display: none; }
.clip-media .clip-stop { position: absolute; left: 8px; top: 8px; z-index: 2; }
.clip-media video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #080c0f; }
.clip-placeholder { display: grid; height: 100%; align-content: center; justify-items: center; gap: 10px; padding: 54px 20px 26px; text-align: center; }
.clip-placeholder strong { font: 500 16px/1.4 var(--font-ui); }
.clip-placeholder p { max-width: 290px; margin: 0; color: #a2b0b9; font: 400 13px/1.6 var(--font-ui); }
.clip-placeholder.failed strong { color: #f08e96; }
.clip-placeholder progress { width: 150px; height: 4px; border: 0; appearance: none; accent-color: #8fd0ec; background: #34434d; }
.clip-placeholder progress::-webkit-progress-bar { background: #34434d; }
.clip-placeholder progress::-webkit-progress-value { background: #8fd0ec; }
.clip-placeholder progress::-moz-progress-bar { background: #8fd0ec; }
.clip-version-controls { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; align-items: center; border: 1px solid #34434d; background: #0e1418; }
.clip-version-controls span { min-width: 48px; color: #a2b0b9; text-align: center; font: 500 12px var(--font-data); }
.clip-library-card button, .clip-actions a { min-height: 44px; padding: 6px; color: #dce5ea; background: #0e1418; font: 500 12px/1.4 var(--font-data); cursor: pointer; text-decoration: none; }
.clip-library-card .clip-icon:not(.option-choice) { border: 0; }
.clip-library-card .clip-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; flex: 0 0 44px; }
.clip-icon img { width: 18px; height: 18px; filter: invert(82%) sepia(20%) saturate(834%) hue-rotate(161deg); }
.clip-library-card button:hover, .clip-actions a:hover { background: #19252e; }
.clip-library-card button:disabled { opacity: .4; cursor: default; }
.clip-caption { padding: 12px 16px; }
.clip-title-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.clip-title-row h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; font: 500 20px/1.35 var(--font-ui); }
.clip-context { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a2b0b9; text-decoration: none; font: 500 12px/1.6 var(--font-data); }
.clip-context:hover { color: #8fd0ec; }
.clip-share-status { color: #8fd0ec; font-size: 12px; }
.clip-actions { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 2px; padding: 6px; border-top: 1px solid #34434d; }
.clip-actions > * { flex: 0 0 auto; white-space: nowrap; }
.clip-actions a { display: inline-flex; align-items: center; }
.clip-actions .clip-library-delete { margin-left: auto; }
.clip-actions .clip-library-delete img { filter: invert(69%) sepia(20%) saturate(1300%) hue-rotate(308deg); }
.clip-details { padding: 16px; border-top: 1px solid #34434d; overflow-wrap: anywhere; font: 400 13px/1.6 var(--font-ui); }
.clip-details dl { display: grid; gap: 8px; margin: 0; }
.clip-details dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
.clip-details dt { color: #a2b0b9; }
.clip-details dd { margin: 0; font-family: var(--font-data); }
.clip-details summary { cursor: pointer; padding-top: 12px; }
.clip-library-failure { margin: 0; color: #f08e96; font-size: 13px; }
.clips-library-message { min-height: 180px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: #a2b0b9; font-size: 14px; }
.clips-library-message a { color: #8fd0ec; }
.clips-library-banner.error { padding: 16px 24px; color: #f08e96; font-size: 13px; }
.clips-library-banner button { border: 1px solid #34434d; color: #dce5ea; background: #0e1418; min-height: 44px; padding: 6px 10px; }
@media (max-width: 1250px) { .clip-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
@media (max-width: 950px) { .clip-library-grid { grid-template-columns: minmax(0, 1fr); max-width: 380px; } }
@media (max-width: 720px) { .clips-pane { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 12px; } .clips-toolbar { padding: 0; } .clip-library-grid { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 16px; } .clip-caption { padding: 10px 12px; } .clip-actions { gap: 0; padding: 4px; } .clip-actions button, .clip-actions a { padding-inline: 5px; } .clip-actions .clip-icon { padding: 0; } }
.clip-rerender-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; padding: 24px; place-items: center; background: rgba(2,5,7,.82); }
.clip-rerender-dialog { display: grid; width: min(680px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #465762; background: #0d1317; box-shadow: 0 22px 70px rgba(0,0,0,.58); }
.clip-rerender-dialog > header, .clip-rerender-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 10px 14px; border-bottom: 1px solid #34414b; background: #111a20; }
.clip-rerender-dialog > header > div { display: grid; gap: 4px; }
.clip-rerender-dialog > header strong { color: #e4edf2; font-size: 15px; letter-spacing: .07em; }
.clip-rerender-dialog > header span, .clip-rerender-dialog > footer span { color: #7f909a; font-size: 10px; letter-spacing: .05em; }
.clip-rerender-dialog > footer { border-top: 1px solid #34414b; border-bottom: 0; }
.clip-rerender-dialog button { min-height: 32px; padding: 7px 11px; border: 1px solid #42525d; border-radius: 0; color: #aab8c0; background: #11191e; font: 800 10px var(--font-ui); letter-spacing: .045em; cursor: pointer; }
.clip-rerender-dialog button:hover, .clip-rerender-dialog button:focus-visible, .clip-rerender-dialog button.selected { border-color: #4b91b2; color: #cdebf7; background: #122833; outline: none; }
.clip-rerender-dialog button:disabled { opacity: .5; cursor: wait; }
.clip-rerender-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clip-rerender-settings > div { display: grid; gap: 8px; padding: 13px 14px; border-right: 1px solid #2f3b43; border-bottom: 1px solid #2f3b43; }
.clip-rerender-settings > div:nth-child(even) { border-right: 0; }
.clip-rerender-settings > div > span { color: #788994; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.clip-rerender-settings > div > div { display: flex; flex-wrap: wrap; gap: 7px; }
.clip-rerender-settings > .clip-rerender-povs { grid-column: 1 / -1; border-right: 0; }
.clip-rerender-dialog > .clip-library-failure { padding: 12px 14px; border-bottom: 1px solid #754147; background: #241317; }

/* Shared visual language for application chrome, dialogs, and cards. */
.command-bar { padding-inline: 14px; background: #11171c; }
.command-bar strong { letter-spacing: .025em; }
.import-button, .reanalyze-button, .match-downloads-button, .admin-invite-button,
.match-history-toolbar button, .match-history-action button, .dialog-actions button,
.clips-toolbar button { transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.import-dropdown { padding: 6px; }
.app-tab { letter-spacing: .045em; }
.section-header, .round-strip-label, .summary-label, .player-overview-stat span,
.player-highlight-label, .dialog-header, .clips-toolbar span { letter-spacing: .045em; }
@media (max-width: 1180px) {
  .rating-pane { grid-column: 1 / -1; padding: 12px; }
  .rating-workspace { grid-template-columns: 1fr; }
  .rating-inspector { position: static; }
  .aim-rating-body { grid-template-columns: 1fr; }
  .aim-rating-chart { border-right: 0; border-bottom: 1px solid var(--rating-border); }
}

@media (max-width: 720px) {
  .app-tab { min-width: 72px; padding-inline: 8px; }
  .clip-library-grid { grid-template-columns: 1fr; padding: 10px; }
  .options-dropdown { position: fixed; right: 10px; bottom: 46px; left: 10px; width: auto; }
  .rating-pane { padding: 10px; }
  .rating-header { align-items: flex-start; }
  .rating-overview-graph { grid-template-columns: 80px minmax(0, 1fr); gap: 6px; padding: 8px; }
  .rating-components { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aim-rating-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aim-rating-stats > div { border-bottom: 1px solid var(--rating-border); }
  .aim-rating-stats > div:nth-child(even) { border-right: 0; }
}

@media (max-width: 560px) {
  .dialog-backdrop { padding: 10px; }
  .share-code-dialog { max-height: calc(100vh - 20px); }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions button { flex: 1 1 130px; }
  .rating-header { display: grid; }
  .rating-header-actions { justify-content: space-between; }
}

/* My matches */
.workstation:has(.clips-pane),
.workstation.matches-view {
  grid-template-columns: minmax(0, 1fr);
}
.workstation.roles-view,
.workstation.overview-view {
  grid-template-columns: minmax(0, 1fr);
}
.workstation .role-explorer-page {
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  grid-row: 2;
}

.my-matches-page {
  --match-card-border: #34434d;
  --match-card-label: #6f7f8a;
  --match-card-muted: #91a1ac;
  --match-card-surface: #0e1418;
  --match-card-accent: #8fd0ec;
  --match-card-small: 18px;
  --match-result-win-rgb: 91 178 126;
  --match-result-loss-rgb: 207 91 101;
  --match-result-win: rgb(var(--match-result-win-rgb));
  --match-result-loss: rgb(var(--match-result-loss-rgb));

  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(30px, 5vh, 52px) clamp(22px, 6vw, 92px) 72px;
  background-color: #090d10;
  background-image:
    url("assets/backgrounds/match-rectangle-grid.svg"),
    url("assets/backgrounds/match-rectangle-grid.svg");
  background-size: 48px 18px, 48px 18px;
}

/* Page header and sync status */
.my-matches-heading {
  position: relative;
  z-index: 0;
  display: flex;
  min-height: clamp(150px, 18vw, 220px);
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
}

.my-matches-heading h1 {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  margin: 0;
  color: #eff5f8;
  font: 700 clamp(112px, 15vw, 210px)/.62 var(--font-ui);
  letter-spacing: -.075em;
  pointer-events: none;
  transform: scaleX(.46) scaleY(1.4);
  transform-origin: left top;
  white-space: nowrap;
}

.my-matches-heading-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.my-matches-heading-meta span {
  color: #61717d;
  font: 600 11px var(--font-data);
  letter-spacing: .12em;
  white-space: nowrap;
}

.my-matches-heading-meta button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #356b86;
  color: #9ed2ea;
  background: #112330;
  font: 700 10px var(--font-data);
  letter-spacing: .08em;
}

.my-matches-heading-meta button:hover,
.my-matches-message button:hover {
  border-color: var(--accent);
  background: #18394c;
}

.my-matches-list {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(960px, 100%);
  row-gap: 72px;
  margin: clamp(-150px, -11vw, -88px) auto 0;
}

/* Shared card shell */
.my-match-card-entry {
  display: grid;
  min-width: 0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .24);
}

.my-match-card-entry > .my-match-card {
  width: 100%;
  box-shadow: none;
}

.my-match-card-entry.has-footer > .my-match-card {
  border-bottom: 0;
}

.my-match-card {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  min-height: 180px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--match-card-border);
  color: #dce5ea;
  background: var(--match-card-surface);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .24);
  text-align: left;
  transition: border-color .16s ease, background-color .16s ease;
}

button.my-match-card:hover {
  border-color: #5a7788;
  background: #111920;
}

.my-match-card:focus-visible {
  outline-offset: 3px;
}

/* Matches still moving through the download and analysis pipeline */
.my-match-pipeline-card.available,
.my-match-pipeline-card.queued {
  border-color: #65582e;
}

.my-match-pipeline-card.acquiring,
.my-match-pipeline-card.downloaded,
.my-match-pipeline-card.analyzing {
  border-color: #356b86;
}

.my-match-pipeline-card.failed {
  border-color: #68383d;
}

.my-match-pipeline-detail {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 6px;
  padding: 12px 16px;
  text-align: center;
}

.my-match-pipeline-detail > span,
.my-match-rank > span {
  color: var(--match-card-label);
  font: 600 var(--match-card-small)/1 var(--font-data);
  letter-spacing: .11em;
}

.my-match-pipeline-detail strong {
  color: #aab8c1;
  font: 600 var(--match-card-small)/1.4 var(--font-data);
  letter-spacing: .035em;
}

.my-match-pipeline-retry {
  min-height: 30px;
  margin-top: 4px;
  padding: 0 10px;
  border: 1px solid #8b4d53;
  color: #ef9aa0;
  background: #1b1013;
  font: 700 var(--match-card-small)/1 var(--font-data);
  letter-spacing: .06em;
}

.my-match-pipeline-retry:hover {
  border-color: #c96b73;
  background: #251519;
}

.my-match-pipeline-card.available .my-match-special strong,
.my-match-pipeline-card.queued .my-match-special strong {
  color: #d9b75d;
}

.my-match-pipeline-card.failed .my-match-special strong {
  color: #df747b;
}

/* Analyzed match identity and result */
.my-match-primary {
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr);
  min-width: 0;
  border-right: 1px solid var(--match-card-border);
}

.my-match-mapline {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 6px 16px;
  border-bottom: 1px solid var(--match-card-border);
  isolation: isolate;
}

.my-match-mapline::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(7, 11, 14, .72);
  content: "";
  pointer-events: none;
}

.my-match-map-badge {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
}

.my-match-map-badge img {
  display: block;
  object-fit: contain;
}

.my-match-map-placeholder {
  border: 1px solid #27343d;
  background: #11191e;
}

.my-match-map-radar {
  position: absolute;
  z-index: -2;
  inset: -42%;
  width: 184%;
  height: 184%;
  max-width: none;
  opacity: .58;
  object-fit: cover;
  filter: grayscale(.78) contrast(1.3) blur(5px);
  transform: rotate(-12deg) scale(1.08);
  pointer-events: none;
}

.my-match-map-icon {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .75));
}

.my-match-identity {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 14px;
  row-gap: 4px;
}

.my-match-map-name {
  overflow: hidden;
  color: #e9f0f4;
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-match-player {
  grid-column: 1 / -1;
  color: #7faec2;
  font: 600 var(--match-card-small) var(--font-data);
  letter-spacing: .13em;
}

.my-match-date {
  color: var(--match-card-muted);
  font: 700 var(--match-card-small)/1 var(--font-data);
  letter-spacing: .06em;
  transform: translateY(5px);
  white-space: nowrap;
}

.my-match-bottomline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(184px, 22vw, 216px);
  min-width: 0;
}

.my-match-rank {
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: start;
  gap: 6px;
  padding: 10px 16px;
}

.my-match-rank > strong {
  color: #aebbc3;
  font: 700 22px var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: .035em;
}

.my-match-rank.competitive img {
  display: block;
  width: 110px;
  height: 40px;
  object-fit: contain;
}

.my-match-rank.unavailable strong {
  color: #596872;
  font-size: var(--match-card-small);
}

.my-match-rank.premier.grey { --premier-tier: #aebbc3; --premier-text: #d5dee3; }
.my-match-rank.premier.cyan { --premier-tier: #65c9e8; --premier-text: #9de8ff; }
.my-match-rank.premier.blue { --premier-tier: #5188e6; --premier-text: #8eb6ff; }
.my-match-rank.premier.purple { --premier-tier: #946ee8; --premier-text: #c1a8ff; }
.my-match-rank.premier.pink { --premier-tier: #df5fa9; --premier-text: #f39acb; }
.my-match-rank.premier.red { --premier-tier: #df5d58; --premier-text: #ff9a94; }
.my-match-rank.premier.gold { --premier-tier: #ddb858; --premier-text: #ffe08a; }

.my-match-premier-ratingline {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.my-match-premier-badge {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 110px;
  height: 40px;
  align-items: center;
  overflow: hidden;
}

.my-match-premier-badge > img,
.my-match-premier-badge::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.my-match-premier-badge > img {
  display: block;
}

.my-match-premier-badge::after {
  background: var(--premier-tier);
  content: "";
  mix-blend-mode: color;
  opacity: .7;
  pointer-events: none;
}

.my-match-premier-values {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  min-width: 0;
  padding: 0 12px 0 18px;
}

.my-match-premier-values strong {
  color: var(--premier-text);
  font: 700 25px/.9 var(--font-ui);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-style: italic;
  letter-spacing: -.045em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
  transform: skewX(-4deg) scaleX(.94);
  transform-origin: right center;
}

.my-match-rank-change {
  display: grid;
  flex: 0 0 auto;
  justify-items: start;
  color: #f1f5f7;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-transform: uppercase;
}

.my-match-rank-change strong {
  color: var(--premier-text);
  font: 700 22px/.9 var(--font-ui);
  font-style: italic;
  letter-spacing: -.045em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

.my-match-score {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border-left: 1px solid var(--match-card-border);
  text-align: right;
}

.my-match-score strong {
  position: absolute;
  top: 50%;
  right: 16px;
  display: flex;
  width: auto;
  justify-content: flex-end;
  color: #f2f6f8;
  font: 700 clamp(64px, 6vw, 84px)/.75 var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.09em;
  transform: translateY(-50%) scaleX(.68) scaleY(1.25);
  transform-origin: right center;
}

.my-match-score-separator {
  color: #f2f6f8;
}

.my-match-card-entry.match-result-win .my-match-score-player {
  color: var(--match-result-win);
}

.my-match-card-entry.match-result-loss .my-match-score-player {
  color: var(--match-result-loss);
}

.my-match-card-entry.match-result-win {
  box-shadow:
    0 0 0 3px #090d10,
    0 0 0 5px rgb(var(--match-result-win-rgb) / .62),
    0 12px 36px rgba(0, 0, 0, .24);
}

.my-match-card-entry.match-result-loss {
  box-shadow:
    0 0 0 3px #090d10,
    0 0 0 5px rgb(var(--match-result-loss-rgb) / .64),
    0 12px 36px rgba(0, 0, 0, .24);
}

.my-match-footer {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 7px 6px 14px;
  border: 1px solid var(--match-card-border);
  background: #0b1115;
}

.my-match-friends {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.my-match-friends > span {
  margin-right: 3px;
  color: #82939e;
  font: 700 var(--match-card-small)/1 var(--font-data);
  letter-spacing: .08em;
  white-space: nowrap;
}

.my-match-friend {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid #465762;
  border-radius: 50%;
  background: #151d23;
}

.my-match-friend:hover {
  border-color: #8fd0ec;
}

.my-match-friend img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-match-friend-placeholder {
  color: #b9c7cf;
  font: 700 14px/1 var(--font-data);
}

.my-match-share {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid #3c4b55;
  background: #11191e;
}

.my-match-share:hover {
  border-color: #6d8999;
  background: #172229;
}

.my-match-share img {
  width: 17px;
  height: 17px;
  opacity: .84;
  filter: invert(82%) sepia(9%) saturate(381%) hue-rotate(161deg) brightness(91%);
}

/* Analyzed match performance */
.my-match-performance {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(92px, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-width: 0;
  overflow: hidden;
  background: #0d1419;
}

.my-match-pipeline-performance {
  grid-template-columns: minmax(0, 1fr);
}

.my-match-special {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
  min-width: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--match-card-border);
  text-align: left;
}

.my-match-performance:not(.my-match-pipeline-performance) .my-match-special {
  grid-column: 1;
  grid-row: 1;
}

.my-match-special > span,
.my-match-metrics span {
  color: #82939e;
  font: 700 var(--match-card-small)/1 var(--font-data);
  letter-spacing: .1em;
}

.my-match-special strong {
  color: var(--match-card-accent);
  font: 650 clamp(32px, 3vw, 44px)/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}

.my-match-metrics {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  align-content: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 12px;
}

.my-match-metrics > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
}

.my-match-metrics strong {
  color: #dbe5ea;
  font: 650 20px var(--font-data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.my-match-grade {
  display: grid;
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border-left: 1px solid var(--match-card-border);
  color: #dae5eb;
  text-align: center;
}

.my-match-grade span {
  display: block;
  font: 700 clamp(116px, 12vw, 156px)/.72 var(--font-data);
  letter-spacing: -.1em;
  transform: scaleX(.64) scaleY(1.22);
  transform-origin: center;
}

.my-match-grade.grade-sss,
.my-match-grade.grade-ss,
.my-match-grade.grade-s {
  color: #e3bd64;
}

.my-match-grade.grade-ss span {
  letter-spacing: -.18em;
  transform: translateX(-8px) scaleX(.72) scaleY(1.22);
}

.my-match-grade.grade-sss span {
  letter-spacing: -.24em;
  transform: translateX(-29px) scaleX(.48) scaleY(1.22);
}

.my-match-grade.grade-a { color: #76c9ea; }
.my-match-grade.grade-b { color: #a9d6c0; }
.my-match-grade.grade-c { color: #d87959; }
.my-match-grade.grade-d { color: #d95760; }
.my-match-grade.grade-f { color: #8f3d49; }

@media (max-width: 966px) {
  .my-match-grade.grade-sss span {
    transform: translateX(-27px) scaleX(.48) scaleY(1.22);
  }
}

/* Loading, empty, and error states */
.my-matches-message {
  display: grid;
  min-height: 240px;
  place-content: center;
  justify-items: center;
  gap: 10px;
  border: 1px solid var(--match-card-border);
  color: #71808b;
  background: #0d1216;
  text-align: center;
}

.my-matches-message.compact {
  min-height: 132px;
}

.my-matches-message strong {
  color: #dbe4e9;
  font-size: 17px;
  letter-spacing: .08em;
}

.my-matches-message span {
  max-width: 460px;
  line-height: 1.5;
}

.my-matches-message.error strong {
  color: #df747b;
}

.my-matches-message button {
  min-height: 38px;
  margin-top: 10px;
  padding: 0 16px;
  border: 1px solid #4383a1;
  color: #b9e3f5;
  background: #122c3b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .075em;
}

@media (max-width: 860px) {
  .my-matches-page {
    padding: 28px 18px 54px;
  }

  .my-matches-heading-meta {
    align-items: flex-end;
    flex-direction: column;
  }

  .my-match-card {
    grid-template-columns: 1fr;
  }

  .my-match-primary {
    border-right: 0;
    border-bottom: 1px solid var(--match-card-border);
  }

  .my-match-performance {
    min-height: 220px;
  }

  .my-match-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .my-matches-heading {
    align-items: flex-start;
    flex-direction: row;
    gap: 12px;
  }

  .my-matches-heading h1 {
    font-size: 112px;
  }

  .my-matches-heading-meta {
    width: auto;
    align-items: flex-end;
  }

  .my-matches-heading-meta span {
    white-space: normal;
  }

  .my-match-mapline {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding-inline: 12px;
  }

  .my-match-map-badge {
    width: 52px;
    height: 52px;
  }

  .my-match-map-radar {
    inset: -48%;
    width: 196%;
    height: 196%;
  }

  .my-match-map-icon {
    width: 48px;
    height: 48px;
  }

  .my-match-map-name {
    font-size: 22px;
  }

  .my-match-date {
    font-size: var(--match-card-small);
    transform: translateY(3px);
  }

  .my-match-bottomline {
    grid-template-columns: minmax(0, 1fr) 176px;
  }

  .my-match-rank {
    padding-inline: 10px;
  }

  .my-match-score strong {
    font-size: 68px;
  }

  .my-match-metrics {
    grid-template-columns: 1fr;
  }

  .my-match-metrics > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Public, unlisted match overview. */
html:has(.overview-body), body.overview-body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
.overview-body,
.match-overview-page {
  --match-card-border: #34434d;
  --match-card-label: #6f7f8a;
  --match-card-muted: #91a1ac;
  --match-card-surface: #0e1418;
  --match-card-accent: #8fd0ec;
  --match-card-small: 18px;
  --match-result-win-rgb: 91 178 126;
  --match-result-loss-rgb: 207 91 101;
  --match-result-win: rgb(var(--match-result-win-rgb));
  --match-result-loss: rgb(var(--match-result-loss-rgb));
  margin: 0;
  color: #dce5ea;
  background-color: #090d10;
  background-image: url("assets/backgrounds/match-rectangle-grid.svg");
  background-size: 48px 18px;
}
.overview-command { position: sticky; z-index: 100; top: 0; height: 42px; }
.overview-command .app-tabs { height: 100%; }
.overview-auth-controls[hidden] { display: none; }
.overview-settings-link { position: relative; display: block; width: 30px; flex: 0 0 auto; }
.overview-share-command { display: flex; height: 28px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #356b86; color: #a4d7ee; background: #112330; font-size: 10px; font-weight: 800; }
.overview-share-command img { width: 14px; height: 14px; filter: invert(82%) sepia(20%) saturate(834%) hue-rotate(161deg); }
#overview-app, .match-overview-host { display: grid; width: min(1480px, 100%); gap: 24px; margin: 0 auto; padding: 26px clamp(14px, 2.4vw, 38px) 56px; }
.match-overview-page { width: 100%; min-width: 0; min-height: 0; grid-column: 1 / -1; grid-row: 2; overflow-x: hidden; overflow-y: auto; background-color: #090d10; background-image: url("assets/backgrounds/match-rectangle-grid.svg"); background-size: 48px 18px; }
.match-overview-host { align-content: start; }
.match-overview-host:empty::before { display: grid; min-height: 55vh; place-items: center; color: #758691; content: attr(data-empty-message); font: 700 11px var(--font-data); letter-spacing: .12em; text-align: center; }
.overview-loading { padding: 30vh 20px; color: #758691; font: 700 11px var(--font-data); letter-spacing: .12em; text-align: center; }
.overview-back-link { display: inline-flex; width: max-content; height: 32px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #3e5665; color: #bbd5e1; background: #111c23; font: 800 10px var(--font-ui); letter-spacing: .065em; text-decoration: none; }
.overview-back-link:hover, .overview-back-link:focus-visible { border-color: #71b3d0; color: #f1f8fb; background: #172a34; outline: none; }
.overview-back-link img { width: 15px; height: 15px; filter: invert(82%) sepia(20%) saturate(834%) hue-rotate(161deg); }
.overview-hero { --overview-preview-height: 156px; --overview-preview-width: 277.333px; grid-template-columns: minmax(0, 1fr) auto; min-height: 180px; }
.overview-hero.match-result-win .my-match-score-player { color: var(--match-result-win); }
.overview-hero.match-result-loss .my-match-score-player { color: var(--match-result-loss); }
.overview-clips { display: flex; height: 180px; min-width: 0; align-items: center; gap: 8px; padding: 12px; overflow: hidden; }
.overview-hero.clips-1 .overview-clips { width: 301.333px; }
.overview-hero.clips-2 .overview-clips { width: 586.666px; }
.overview-hero.clips-3 .overview-clips { width: 872px; }
.overview-clip-wrap { position: relative; width: auto; max-width: var(--overview-preview-width); height: auto; max-height: var(--overview-preview-height); flex: 1 1 var(--overview-preview-width); aspect-ratio: 16 / 9; overflow: hidden; }
.overview-clip { position: relative; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 1px solid #35434c; color: #dfe8ed; background: #080c0f; text-align: left; transition: border-color .15s ease, transform .15s ease; }
.overview-clip:hover, .overview-clip:focus-visible { border-color: var(--match-card-accent); outline: none; transform: translateY(-2px); }
.overview-clip video { width: 100%; height: 100%; object-fit: cover; opacity: .74; }
.overview-clip::after { position: absolute; inset: 0; content: ""; box-shadow: inset 0 -56px 40px -30px #05080a; pointer-events: none; }
.overview-clip strong { position: absolute; z-index: 2; right: 9px; bottom: 8px; left: 9px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.overview-clip-share { position: absolute; z-index: 4; top: 8px; left: 8px; display: flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid #69a7c2; color: #cdeaf7; background: #102837; font-size: 8px; font-weight: 800; letter-spacing: .035em; cursor: pointer; }
.overview-clip-share img { width: 11px; height: 11px; filter: invert(87%) sepia(18%) saturate(633%) hue-rotate(157deg); }
.overview-clip-share:hover, .overview-clip-share:focus-visible { border-color: #a8dbef; color: #fff; outline: none; }
.overview-clip-analyzer { position: absolute; z-index: 4; top: 8px; right: 8px; padding: 4px 6px; border: 1px solid #69a7c2; color: #cdeaf7; background: #102837; font-size: 8px; font-weight: 800; letter-spacing: .035em; text-decoration: none; }
.overview-clip-analyzer:hover, .overview-clip-analyzer:focus-visible { border-color: #a8dbef; color: #fff; outline: none; }
.overview-clip-rerender { position: absolute; z-index: 4; top: 34px; right: 8px; padding: 4px 6px; border: 1px solid #667781; border-radius: 0; color: #c0cbd1; background: #111a1f; font-size: 8px; font-weight: 800; letter-spacing: .035em; cursor: pointer; }
.overview-clip-rerender:hover, .overview-clip-rerender:focus-visible { border-color: #a8dbef; color: #fff; outline: none; }
.overview-hero-footer { display: grid; min-height: 48px; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 9px; border-top: 1px solid var(--match-card-border); background: #0b1115; }
.overview-footer-friends { display: flex; min-width: 0; min-height: 34px; grid-column: 1; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px 0 4px; overflow-x: auto; border-right: 1px solid #303d46; }
.overview-footer-friends-label { margin-right: 2px; color: #82939e; font: 700 10px/1 var(--font-data); letter-spacing: .08em; white-space: nowrap; }
.overview-footer-friend { width: 30px; height: 30px; }
.overview-footer-share { height: 32px; grid-column: 2; justify-self: end; }
.radar-match-card {
  --match-card-border: #34434d;
  --match-card-label: #6f7f8a;
  --match-card-muted: #91a1ac;
  --match-card-surface: #0e1418;
  --match-card-accent: #8fd0ec;
  --match-card-small: 18px;
  --match-result-win: #5bb27e;
  --match-result-loss: #cf5b65;
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 180px 48px;
  box-shadow: none;
}
.radar-match-primary { min-width: 0; border-right: 0; }
.radar-match-card .my-match-map-name { font-size: clamp(22px, 2vw, 28px); white-space: normal; overflow-wrap: anywhere; }
.radar-match-card.match-result-win .my-match-score-player { color: var(--match-result-win); }
.radar-match-card.match-result-loss .my-match-score-player { color: var(--match-result-loss); }
.radar-match-card .my-match-bottomline { grid-template-columns: minmax(0, 1fr) minmax(142px, 44%); }
.radar-match-card .my-match-rank { padding-inline: 10px; }
.radar-match-card .my-match-premier-ratingline { gap: 6px; }
.radar-match-card .my-match-score strong { right: 10px; font-size: clamp(54px, 5vw, 72px); }
.radar-match-footer { grid-column: 1; grid-row: 2; gap: 6px; padding-inline: 7px; }
.radar-match-footer .overview-footer-share { min-width: 32px; padding-inline: 8px; font-size: 0; }
.overview-rerender-dialog { width: min(620px, calc(100vw - 28px)); }
.overview-rerender-body { display: grid; gap: 14px; padding: 16px; color: #81919a; font-size: 11px; }
.overview-rerender-body.error, .overview-rerender-status.error { color: #ef8e95; }
.overview-rerender-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #33414a; }
.overview-rerender-field { display: grid; gap: 7px; padding: 10px; border-right: 1px solid #33414a; border-bottom: 1px solid #33414a; }
.overview-rerender-field:nth-child(even) { border-right: 0; }
.overview-rerender-field:last-child { grid-column: 1 / -1; border-right: 0; }
.overview-rerender-field span { color: #7e8e98; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.overview-rerender-field select { min-height: 34px; padding: 6px 8px; border: 1px solid #495b66; border-radius: 0; color: #d7e3e9; background: #10181d; font: 700 10px var(--font-ui); }
.overview-rerender-status { margin: 0; color: #8797a0; font-size: 10px; letter-spacing: .04em; }
.overview-rerender-submit { min-height: 36px; padding: 8px 12px; border: 1px solid #4b91b2; border-radius: 0; color: #cdebf7; background: #122833; font: 800 10px var(--font-ui); letter-spacing: .055em; cursor: pointer; }
.overview-radars { display: grid; width: min(100%, 500px); min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; justify-self: end; gap: 8px; padding: 12px; overflow-x: auto; }
.overview-radar-card { position: relative; display: block; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid #35434c; color: #dfe8ed; background: #080c0f; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.overview-radar-card:hover, a.overview-radar-card:focus-visible { border-color: #72b5d2; outline: none; box-shadow: inset 0 0 0 1px #72b5d2; transform: translateY(-2px); }
.overview-radar-viewport { position: absolute; inset: 0; overflow: hidden; background: #070a0c; }
.overview-radar-world { position: absolute; width: 100%; height: 100%; background-color: #10171c; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; transform-origin: 0 0; }
.overview-radar-marker { position: absolute; width: 8px; height: 8px; border: 2px solid #11171b; border-radius: 50%; opacity: .42; transform: translate(-50%, -50%) scale(.5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.overview-radar-marker.side-subject { background: #5ca3c7; }
.overview-radar-marker.side-opponent { background: #d6a44a; }
.overview-radar-marker.participant { z-index: 2; opacity: 1; transform: translate(-50%, -50%) scale(.72); box-shadow: 0 0 0 2px #fff2a1, 0 0 6px #fff2a1; }
.overview-radar-marker.dead { z-index: 3; width: 13px; height: 13px; border: 0; border-radius: 0; background-color: transparent; background-image: url('assets/icons/x.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: .9; filter: invert(92%) sepia(7%) saturate(479%) hue-rotate(158deg) brightness(106%) drop-shadow(0 0 2px #050708); transform: translate(-50%, -50%) scale(.72); box-shadow: none; }
.overview-radar-caption { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; min-height: 34px; padding: 10px; overflow: hidden; border-top: 1px solid #35434c; color: #cdd9df; background: #0a1115; font: 700 11px/1.2 var(--font-data); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.overview-radar-loading { display: grid; place-items: center; padding: 12px; color: #657681; font: 700 10px/1.4 var(--font-data); letter-spacing: .07em; text-align: center; }
.overview-summary-columns {
  --overview-insight-gap: clamp(12px, 1vw, 18px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.overview-summary-column { display: grid; min-width: 0; align-content: start; gap: 20px; }
.overview-summary-left { align-self: stretch; grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: stretch; gap: var(--overview-insight-gap); }
.overview-summary-left .overview-annotated-region,
.overview-summary-left .overview-annotated-content,
.overview-summary-left .overview-chart-panel { min-height: 0; height: 100%; }
.overview-summary-right { min-width: 0; align-self: start; }
.overview-panel { min-width: 0; border: 1px solid var(--match-card-border); background: var(--match-card-surface); box-shadow: 0 12px 36px rgba(0, 0, 0, .24); }
.overview-panel-header { display: flex; min-height: 34px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--match-card-border); color: var(--match-card-label); background: #10171c; font: 800 11px var(--font-data); letter-spacing: .09em; }
.overview-identity-panel { --overview-grade-width: clamp(128px, 20%, 168px); display: grid; align-self: stretch; grid-template-columns: minmax(0, 1fr) var(--overview-grade-width); grid-template-rows: 92px repeat(5, 44px); align-content: start; }
.overview-identity-heading, .overview-accolades { display: contents; }
.overview-identity-panel h1 { align-self: stretch; display: flex; min-width: 0; grid-column: 1; grid-row: 1; align-items: center; margin: 0; padding: 16px 20px; overflow: hidden; color: #edf3f6; font-size: clamp(32px, 3vw, 52px); font-weight: 700; letter-spacing: -.045em; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.overview-grade { position: relative; display: grid; grid-column: 2; grid-row: 1 / 4; place-items: center; overflow: hidden; border-bottom: 1px solid #303d46; border-left: 1px solid #303d46; color: #dae5eb; background: #10171c; text-align: center; }
.overview-grade::before { position: absolute; inset: 0; background: currentColor; content: ""; opacity: .08; pointer-events: none; }
.overview-grade span { position: relative; display: block; width: 100%; font: 700 clamp(146px, 12vw, 184px)/.72 var(--font-data); letter-spacing: -.1em; text-align: center; transform: translate(-.04em, -.03em) scaleX(.9) scaleY(1.25); transform-origin: center; }
.overview-grade.grade-sss, .overview-grade.grade-ss, .overview-grade.grade-s { color: #e3bd64; }
.overview-grade.grade-ss span { letter-spacing: -.18em; transform: translate(-.07em, -.03em) scaleX(.62) scaleY(1.25); }
.overview-grade.grade-sss span { letter-spacing: -.24em; transform: translate(-.19em, -.03em) scaleX(.38) scaleY(1.25); }
.overview-grade.grade-a { color: #76c9ea; }
.overview-grade.grade-b { color: #a9d6c0; }
.overview-grade.grade-c { color: #d87959; }
.overview-grade.grade-d { color: #d95760; }
.overview-grade.grade-f { color: #8f3d49; }
.overview-metric span { color: #75858f; font: 800 13px/1 var(--font-data); letter-spacing: .06em; }
.overview-metric { display: grid; gap: 4px; }
.overview-metric strong { color: #e2e9ed; font: 700 21px/1.1 var(--font-data); text-align: left; }
.overview-accolade { display: grid; min-width: 0; grid-column: 1; grid-template-columns: minmax(0, 1fr) minmax(76px, auto) minmax(96px, auto); align-items: center; gap: 14px; min-height: 0; padding: 3px 12px; border-top: 1px solid #263139; }
.overview-accolade:nth-child(n+3) { grid-column: 1 / -1; padding-right: calc(var(--overview-grade-width) + 12px); }
.overview-accolade:last-child { border-bottom: 0; }
.overview-accolade span { overflow: hidden; color: #8596a1; font: 700 15px var(--font-data); letter-spacing: .07em; text-overflow: ellipsis; white-space: nowrap; }
.overview-accolade strong { color: #e1e8ec; font: 700 24px var(--font-data); text-align: right; }
.overview-accolade small { color: #647580; font: 700 11px var(--font-data); letter-spacing: .05em; text-align: right; white-space: nowrap; }
.overview-accolade.match_best { box-shadow: inset 3px 0 #d2ad4e; }
.overview-accolade.team_best { box-shadow: inset 3px 0 #5faacb; }
.overview-insights-grid { display: grid; align-self: stretch; justify-self: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); width: 100%; height: auto; aspect-ratio: 1; gap: var(--overview-insight-gap); overflow: visible; border: 0; background: transparent; box-shadow: none; }
.overview-insight-tile { position: relative; display: grid; min-width: 0; min-height: 0; height: 100%; width: 100%; overflow: hidden; border: 1px solid #303d46; background: #0d1418; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.overview-insight-tile.unavailable { grid-template-rows: minmax(0, 1fr); }
.overview-axes-tile { display: block; }
.overview-axis-triangle { position: relative; width: 100%; height: 100%; }
.overview-axis-triangle > svg { position: absolute; inset: 8% 5% 10%; width: 90%; height: 82%; }
.overview-axis-triangle > svg line { stroke: #35434c; stroke-width: 1; vector-effect: non-scaling-stroke; }
.overview-axis { position: absolute; display: grid; justify-items: center; gap: 3px; }
.overview-axis span { color: #aab7bf; font: 800 11px/1 var(--font-data); letter-spacing: .05em; }
.overview-axis strong { color: #8fd0ec; font: 700 clamp(30px, 3vw, 44px)/1 var(--font-data); }
.aim-axis { top: 8%; left: 50%; transform: translateX(-50%); }
.utility-axis { bottom: 7%; left: 5%; opacity: .65; }
.positioning-axis { right: 4%; bottom: 7%; opacity: .65; }
.overview-insight-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border-bottom: 1px solid #2c3840; background: #10171c; }
.overview-insight-heading strong { overflow: hidden; color: #b7c5cc; font: 800 10px var(--font-data); letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.overview-insight-heading span { flex: 0 0 auto; color: #667781; font: 700 8px var(--font-data); letter-spacing: .05em; }
.overview-insight-placeholder { align-self: center; max-width: 190px; margin: auto; padding: 16px; color: #566670; font: 700 10px/1.5 var(--font-data); letter-spacing: .06em; text-align: center; }
.overview-spray-tile > svg { display: block; width: 100%; height: 100%; min-height: 0; }
.overview-spray-axis { stroke: #2e3b43; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.overview-spray-shot { stroke-width: 2; vector-effect: non-scaling-stroke; }
.overview-spray-shot.hit { fill: #163325; stroke: #70c994; }
.overview-spray-shot.miss { fill: #35181c; stroke: #dc7479; }
.overview-spray-score { position: absolute; right: 9px; bottom: 8px; color: #7fcba0; font: 700 9px var(--font-data); letter-spacing: .04em; }
.overview-insight-radar-viewport { position: relative; min-height: 0; overflow: hidden; background: #070a0c; }
.overview-radar-annotation { position: absolute; z-index: 4; width: 14px; height: 14px; border: 2px solid #fff0a2; border-radius: 50%; background: rgba(240, 214, 106, .22); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(240, 214, 106, .12), 0 0 10px #f0d66a; }
.overview-unavailable { display: grid; grid-column: 1 / -1; gap: 6px; margin: auto; padding: 22px; color: #64747e; font: 700 12px var(--font-data); text-align: center; }
.overview-unavailable small { max-width: 320px; color: #52616a; font-size: 10px; font-weight: 500; line-height: 1.5; }
.overview-annotated-region { --overview-margin-rail: 184px; position: relative; min-width: 0; }
.overview-annotated-content { min-width: 0; }
.overview-margin-rail { position: absolute; top: 0; display: none; width: var(--overview-margin-rail); align-content: start; gap: 16px; padding-top: 42px; }
.overview-margin-rail.left { right: calc(100% + 16px); }
.overview-margin-rail.right { left: calc(100% + 16px); }
.overview-margin-blurb { position: relative; padding: 13px 14px 15px; border-top: 1px solid #34434d; border-bottom: 1px solid #34434d; color: #b9c6cc; background: #0c1317; }
.overview-margin-rail.left .overview-margin-blurb { border-right: 3px solid #6a8796; text-align: right; }
.overview-margin-rail.right .overview-margin-blurb { border-left: 3px solid #6a8796; }
.overview-margin-rail.left .overview-margin-blurb::after,
.overview-margin-rail.right .overview-margin-blurb::after { position: absolute; top: 27px; width: 16px; border-top: 1px solid #526873; content: ""; }
.overview-margin-rail.left .overview-margin-blurb::after { right: -19px; }
.overview-margin-rail.right .overview-margin-blurb::after { left: -19px; }
.overview-margin-blurb.positive { border-color: #4f8f69; background: #0d1913; }
.overview-margin-blurb.warning { border-color: #a77941; background: #19140e; }
.overview-margin-blurb-label { display: block; margin-bottom: 8px; color: #88a4b2; font: 800 9px var(--font-data); letter-spacing: .1em; }
.overview-margin-blurb.positive .overview-margin-blurb-label { color: #76c895; }
.overview-margin-blurb.warning .overview-margin-blurb-label { color: #d3a45f; }
.overview-margin-blurb p { margin: 0; color: inherit; font: 600 13px/1.48 var(--font-ui); }
.overview-chart-panel {
  --rating-bg: #0b0f12;
  --rating-surface: #10161a;
  --rating-surface-raised: #151d22;
  --rating-border: #26323a;
  --rating-border-strong: #3d4b55;
  --rating-text: #e7edf0;
  --rating-text-secondary: #a8b3ba;
  --rating-text-muted: #84919a;
  --rating-cyan: #69b8dc;
  --rating-amber: #e1c45a;
  --rating-green: #69b98c;
  --rating-red: #d26d73;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  color: var(--rating-text);
  background: var(--rating-bg);
}
.overview-rating-chart { min-height: 0; overflow: hidden; flex: 1; background: var(--rating-bg); }
.overview-chart-panel .rating-round-chart-svg { width: 100%; min-height: 0; padding: 0; flex: none; }
.overview-chart-side-band.ct { fill: rgba(80, 159, 199, .15); }
.overview-chart-side-band.t { fill: rgba(214, 164, 74, .14); }
.overview-chart-side-band.unknown { fill: #253038; }
.overview-chart-side-label.unknown { fill: #a7b4ba; }
.overview-chart-side-label { font: 800 10px var(--font-data); letter-spacing: .08em; text-anchor: middle; }
.overview-chart-side-label.ct { fill: #80bdd9; }
.overview-chart-side-label.t { fill: #d8b269; }
.overview-chart-side-break { stroke: #475761; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.overview-chart-panel .rating-chart-axis-value,
.overview-chart-panel .rating-chart-axis-label,
.overview-chart-panel .rating-chart-x-axis-label,
.overview-chart-panel .rating-chart-round { font-family: var(--font-data); }
.overview-chart-panel .rating-chart-grid,
.overview-chart-panel .rating-chart-axis,
.overview-chart-panel .rating-chart-baseline,
.overview-chart-panel .rating-chart-curve-halo,
.overview-chart-panel .rating-chart-curve,
.overview-chart-panel .rating-chart-cumulative-halo,
.overview-chart-panel .rating-chart-cumulative,
.overview-chart-panel .overview-chart-side-band,
.overview-chart-panel .overview-chart-side-label,
.overview-chart-panel .overview-chart-side-break { pointer-events: none; }
.overview-chart-panel .rating-chart-point:focus-visible .rating-chart-dot { fill: var(--rating-amber); stroke: #f2dea0; stroke-width: 4px; }
.overview-chart-hit-surface { fill: transparent; cursor: pointer; }
.overview-chart-panel .rating-chart-point:hover:not(.selected) .rating-chart-dot { fill: #0d151a; stroke-width: 4px; filter: none; }
.overview-chart-panel .rating-chart-point.positive:hover:not(.selected) .rating-chart-dot { stroke: var(--rating-green); }
.overview-chart-panel .rating-chart-point.negative:hover:not(.selected) .rating-chart-dot { stroke: var(--rating-red); }
.overview-chart-panel .rating-chart-crosshair[hidden],
.overview-chart-panel .rating-chart-hover-dot[hidden] { display: none; }
.overview-chart-hover-detail { position: absolute; z-index: 4; top: 52px; right: 14px; display: grid; min-width: 184px; gap: 3px; padding: 9px 11px; border: 1px solid var(--rating-border-strong); color: var(--rating-text-secondary); background: rgba(11, 15, 18, .94); box-shadow: 0 8px 20px rgba(0, 0, 0, .32); pointer-events: none; }
.overview-chart-hover-detail[hidden] { display: none; }
.overview-chart-hover-detail span { font: 600 10px/1.35 var(--font-data); letter-spacing: .035em; }
.overview-chart-hover-detail strong { color: var(--rating-amber); font: 600 15px/1.35 var(--font-data); }
.overview-chart-hover-detail .overview-chart-hover-round { color: var(--rating-text); }
.overview-scoreboard-wrap { max-width: 100%; overflow-x: auto; }
.overview-scoreboard { min-width: 1320px; font: 500 15px var(--font-data); }
.overview-scoreboard th, .overview-scoreboard td { padding: 12px 10px; border-right: 1px solid #253039; border-bottom: 1px solid #253039; text-align: right; white-space: nowrap; }
.overview-scoreboard thead th { position: sticky; z-index: 2; top: 0; padding: 0; color: #82939e; background: #10171c; font-size: 12px; }
.overview-sort-button { display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: flex-end; gap: 5px; padding: 12px 10px; border: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-align: inherit; }
.overview-sort-button:hover, .overview-sort-button:focus-visible { color: #d9e4e9; background: #19242a; }
.overview-sort-button.active { color: #9fd5eb; }
.overview-scoreboard .player-column .overview-sort-button { justify-content: flex-start; }
.overview-sort-direction { width: 13px; height: 13px; filter: invert(78%) sepia(20%) saturate(653%) hue-rotate(157deg); }
.overview-sort-button.ascending .overview-sort-direction { transform: rotate(-90deg); }
.overview-sort-button.descending .overview-sort-direction { transform: rotate(90deg); }
.overview-scoreboard .player-column { position: sticky; z-index: 1; left: 0; width: 240px; max-width: 240px; overflow: hidden; color: #dce6eb; background: #0d1317; font-size: 15px; text-align: left; text-overflow: ellipsis; }
.overview-scoreboard thead .player-column { z-index: 3; background: #10171c; }
.overview-scoreboard .player-column small { margin-left: 8px; padding: 2px 4px; color: #9fd5eb; border: 1px solid #386982; font-size: 10px; }
.overview-scoreboard .overview-team-heading { position: static; padding: 9px 10px; color: #7da1b5; background: #111c23; font: 800 12px var(--font-data); letter-spacing: .06em; text-align: left; }
.overview-scoreboard tbody:first-of-type .overview-team-heading { box-shadow: inset 3px 0 var(--match-card-accent); }
.overview-scoreboard tbody:last-of-type .overview-team-heading { box-shadow: inset 3px 0 #d6a44a; }
.overview-scoreboard .subject-row td, .overview-scoreboard .subject-row .player-column { background: #102028; }
.overview-scoreboard tbody tr:not(.overview-team-group-row):hover td,
.overview-scoreboard tbody tr:not(.overview-team-group-row):hover .player-column { background: #182229; }
.overview-leader { display: inline-flex; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.overview-leader img { width: 100%; height: 100%; filter: invert(74%) sepia(54%) saturate(453%) hue-rotate(3deg); }
.overview-dialog-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2, 5, 7, .9); }
.overview-video-dialog { width: min(1120px, 100%); border: 1px solid #52636e; background: #090d10; box-shadow: 0 24px 90px #000; }
.overview-dialog-header { display: flex; min-height: 46px; align-items: center; justify-content: space-between; border-bottom: 1px solid #34434d; }
.overview-dialog-header h2 { margin: 0; padding: 0 15px; font-size: 12px; }
.overview-dialog-close { align-self: stretch; width: 48px; padding: 0; border: 0; border-left: 1px solid #34434d; background: #131a1f; }
.overview-dialog-close img { width: 18px; filter: invert(85%); }
.overview-video-dialog video { display: block; width: 100%; max-height: calc(100vh - 130px); background: #000; }
.clip-share-page { display: grid; width: min(1120px, 100%); min-height: calc(100vh - 42px); margin: 0 auto; padding: clamp(16px, 4vw, 54px); place-items: start center; }
.clip-share-panel { display: grid; width: 100%; border: 1px solid #35434c; background: #0b1115; box-shadow: 0 22px 70px rgba(0,0,0,.45); }
.clip-share-panel > header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 16px; border-bottom: 1px solid #35434c; background: #10171c; }
.clip-share-panel > header > div { display: grid; min-width: 0; gap: 5px; }
.clip-share-panel > header span, .clip-share-panel > footer span { color: #748691; font: 700 9px var(--font-data); letter-spacing: .1em; }
.clip-share-panel h1 { margin: 0; overflow: hidden; color: #e4edf1; font: 700 clamp(16px, 2.2vw, 24px) var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.clip-share-copy { display: flex; min-width: 94px; height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid #356b86; color: #a4d7ee; background: #112330; font-size: 10px; font-weight: 800; cursor: pointer; }
.clip-share-copy img { width: 14px; height: 14px; filter: invert(82%) sepia(20%) saturate(834%) hue-rotate(161deg); }
.clip-share-copy:disabled { opacity: .7; cursor: default; }
.clip-share-panel video { display: block; width: 100%; max-height: calc(100vh - 270px); background: #000; }
.clip-share-unavailable { min-height: 420px; place-items: center; color: #7b8b94; font: 700 11px var(--font-data); letter-spacing: .08em; }
.clip-share-unavailable:not([hidden]) { display: grid; }
.clip-share-panel > footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #35434c; }
.clip-share-panel > footer > div { display: grid; gap: 5px; padding: 12px 16px; border-right: 1px solid #35434c; }
.clip-share-panel > footer > div:last-child { border-right: 0; }
.clip-share-panel > footer strong { color: #cbd8de; font: 700 11px var(--font-data); }
.dialog-open { overflow: hidden; }
.overview-copy-fallback { position: fixed; top: -1000px; opacity: 0; }
.overview-not-found { display: grid; min-height: calc(100vh - 42px); place-content: center; justify-items: center; padding: 30px; color: #788994; text-align: center; }
.overview-not-found span { color: #3a4b55; font: 700 100px var(--font-data); }
.overview-not-found h1 { margin: 0; color: #dce5ea; }
.overview-not-found a { margin-top: 20px; padding: 10px 14px; border: 1px solid #356b86; color: #a4d7ee; background: #112330; text-decoration: none; }
@media (min-width: 1920px) {
  .overview-margin-rail { display: grid; }
}
@media (max-width: 780px) {
  .overview-command { overflow: hidden; }
  .overview-command > strong { display: none; }
  .overview-command .app-tabs { min-width: 0; flex: 1; margin-left: 0; overflow-x: auto; }
  .overview-share-command { flex: 0 0 auto; }
  #overview-app, .match-overview-host { padding: 10px 10px 34px; }
  .overview-hero { grid-template-columns: 1fr; }
  .overview-hero .overview-clips { width: 100%; }
  .overview-hero-footer { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .overview-footer-share { grid-column: 2; grid-row: 1; }
  .overview-footer-friends { min-height: 34px; grid-column: 1; grid-row: 1; padding: 0 8px 0 2px; border-right: 1px solid #303d46; }
  .overview-match-primary { border-right: 0; border-bottom: 1px solid var(--match-card-border); }
  .overview-radars { grid-template-columns: repeat(3, minmax(min(220px, 70vw), 1fr)); }
  .overview-summary-columns { grid-template-columns: 1fr; }
  .overview-summary-column { display: contents; }
  .overview-summary-right { height: auto; container-type: normal; }
  .overview-identity-panel { order: 1; }
  .overview-insights-grid { height: auto; order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: 1; }
  .overview-insight-tile { width: 100%; }
  .overview-summary-left .overview-annotated-region { order: 3; }
  .overview-identity-panel { --overview-grade-width: 104px; grid-template-columns: minmax(0, 1fr) var(--overview-grade-width); grid-template-rows: 88px repeat(5, 40px); }
  .overview-identity-panel h1 { padding: 12px; overflow: visible; font-size: clamp(26px, 8vw, 32px); text-overflow: clip; }
  .overview-grade span { font-size: 142px; }
  .overview-accolade { grid-template-columns: minmax(0, 1fr) minmax(60px, auto); gap: 10px; }
  .overview-accolade small { display: none; }
  .overview-insight-heading span { display: none; }
  .overview-chart-panel { min-height: 0; }
  .clip-share-page { padding: 10px; }
  .clip-share-panel > header { align-items: flex-start; }
  .clip-share-panel h1 { white-space: normal; }
  .clip-share-panel video { max-height: 62vh; }
  .clip-share-panel > footer { grid-template-columns: 1fr; }
  .clip-share-panel > footer > div { border-right: 0; }
}
@media (max-width: 480px) {
  .overview-share-command { min-width: 42px; padding: 0 10px; font-size: 0; }
  .overview-command .profile-button-name { display: none; }
  .overview-command .profile-button { width: 30px; padding: 0 3px; }
  .overview-command .profile-chevron { display: none; }
  .overview-identity-panel { --overview-grade-width: 92px; grid-template-columns: minmax(0, 1fr) var(--overview-grade-width); }
  .overview-grade span { font-size: 128px; }
  .overview-axis span { font-size: 8px; }
  .overview-insight-heading { padding-inline: 7px; }
  .overview-insight-heading strong, .overview-insight-placeholder { font-size: 8px; }
  .overview-dialog-backdrop { padding: 8px; }
}

/* Stats keeps the roster beside the measurements; collapsed rosters leave no hidden controls. */
.workstation.rating-view { grid-template-columns: clamp(380px, 30%, 460px) minmax(0, 1fr); }

.rating-view .rating-pane { grid-column: 2; }
.rating-pane .rating-round-chart-svg { min-width: 480px; }
.rating-view:has(.rating-pane.roster-collapsed) { grid-template-columns: minmax(0, 1fr); }
.rating-view .rating-pane.roster-collapsed { grid-column: 1; }
.rating-view:has(.rating-pane.roster-collapsed) .left-pane { display: none; }
.rating-view .player-browser-label { flex: 1; max-width: none; }
.rating-view .player-number-key { display: none; }
.rating-view .players .player-row { min-height: 38px; height: auto; }
.rating-view .player-team-header { height: 30px; }
.rating-component-value { text-align: left; }
@media (max-width: 1180px) {
  .workstation.rating-view { grid-template-columns: 380px minmax(0, 1fr); }
  .rating-view:has(.rating-pane.roster-collapsed) { grid-template-columns: minmax(0, 1fr); }
  .behavior-profiles { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .workstation.rating-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 180px minmax(0, 1fr) 28px; }
  .rating-view .rating-pane { grid-column: 1; grid-row: 3; }
  .rating-view .footer { grid-row: 4; }
  .rating-view:has(.rating-pane.roster-collapsed) { grid-template-rows: auto minmax(0, 1fr) 28px; }
  .rating-view .rating-pane.roster-collapsed { grid-row: 2; }
  .rating-view:has(.rating-pane.roster-collapsed) .footer { grid-row: 3; }
  .behavior-events > div { flex-wrap: wrap; gap: 4px; }
}

/* Role estimates: the match-summary palette, with content-first disclosure. */
cs2-behavior-roles { display: block; min-width: 0; container-type: inline-size; }
.behavior-role-estimates { padding: 12px 4px 4px; color: var(--rating-text, #e7edf0); font: 14px/1.5 var(--font-ui); }
.role-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.behavior-role-estimates .role-eyebrow { margin: 0 0 8px; color: var(--rating-text-muted, #84919a); font: 600 10px/1.4 var(--font-data); letter-spacing: .1em; }
.role-section-header h2 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.behavior-role-estimates .role-section-description { margin: 8px 0 0; color: var(--rating-text-secondary, #a8b3ba); }
.role-status-tag { flex: none; margin-top: 24px; padding: 3px 8px; border: 1px solid var(--rating-border, #26323a); color: var(--rating-text-secondary, #a8b3ba); font-size: 12px; }
.role-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.role-card { min-width: 0; padding: 24px; border: 1px solid var(--rating-border, #26323a); background: var(--rating-surface, #10161a); }
.role-card-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; margin-bottom: 20px; }
.role-side-label { color: var(--rating-cyan, #69b8dc); font-weight: 600; font-size: 12px; }
.role-side-label.terrorist { color: var(--rating-amber, #e1c45a); }
.role-round-count { color: var(--rating-text-muted, #84919a); font-size: 12px; }
.behavior-role-estimates .role-title { margin: 0; color: var(--rating-text, #e7edf0); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; }
.behavior-role-estimates .role-description { min-height: 44px; margin: 12px 0 0; color: var(--rating-text-secondary, #a8b3ba); font-size: 14px; line-height: 1.55; }
.role-duty-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.role-duty { padding: 3px 8px; background: var(--rating-surface-raised, #151d22); border: 1px solid var(--rating-border, #26323a); color: var(--rating-text-secondary, #a8b3ba); font-size: 12px; }
.role-key-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0 16px; padding-top: 20px; border-top: 1px solid var(--rating-border, #26323a); }
.role-key-fact { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.role-key-fact strong { font-size: 24px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.role-key-fact span { max-width: 26ch; color: var(--rating-text-muted, #84919a); font-size: 12px; line-height: 1.5; }
.behavior-role-estimates summary { min-height: 44px; padding: 12px 0; font-size: 13px; font-weight: 500; cursor: pointer; }
.role-evidence > summary { color: var(--rating-cyan, #69b8dc); }
.role-evidence-body { padding: 0 0 16px; }
.role-evidence-body h4 { margin: 24px 0 4px; font-size: 14px; font-weight: 600; }
.role-measure-list { margin: 16px 0 0; padding: 0; }
.role-measure-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rating-border, #26323a); font-size: 12px; }
.role-measure-list dt { color: var(--rating-text-secondary, #a8b3ba); }
.role-measure-list dd { flex: none; margin: 0; font-variant-numeric: tabular-nums; }
.role-round { border-bottom: 1px solid var(--rating-border, #26323a); }
.role-round summary span:last-child { float: right; color: var(--rating-text-muted, #84919a); font-size: 12px; }
.role-round-body { padding: 0 12px 16px; }
.role-replay-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 4px; color: var(--rating-cyan, #69b8dc); font-size: 13px; }
.behavior-role-estimates .role-help { margin: 0 0 12px; color: var(--rating-text-muted, #84919a); font-size: 12px; }
.role-card-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--rating-border, #26323a); }
.role-button, .role-text-button { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid transparent; border-radius: 0; background: transparent; font: 500 13px/1.3 var(--font-ui); cursor: pointer; }
.role-button.secondary { border-color: var(--rating-border-strong, #3d4b55); color: var(--rating-text, #e7edf0); background: var(--rating-surface-raised, #151d22); }
.role-button.primary { border-color: var(--rating-cyan, #69b8dc); background: var(--rating-cyan, #69b8dc); color: #081017; }
.role-text-button { color: var(--rating-cyan, #69b8dc); }
.role-button:hover, .role-text-button:hover { filter: brightness(1.15); background-color: #202e37; color: #edf5fa; }
.role-button.primary:hover { background-color: #8dccE8; color: #081017; }
.role-button:active, .role-text-button:active { filter: brightness(.85); }
.role-button:disabled, .role-text-button:disabled { opacity: .55; cursor: wait; }
.behavior-role-estimates :is(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid var(--rating-cyan, #69b8dc); outline-offset: 3px; }
.role-report { margin-top: 20px; padding: 14px 16px; border-left: 2px solid var(--rating-cyan, #69b8dc); background: var(--rating-surface-raised, #151d22); overflow-wrap: anywhere; }
.behavior-role-estimates .role-report-label { margin: 0 0 6px; font: 500 10px/1.4 var(--font-data); letter-spacing: .08em; color: var(--rating-text-muted, #84919a); }
.role-report strong { display: block; font-size: 14px; font-weight: 500; }
.role-report-scope { display: block; margin-top: 4px; color: var(--rating-text-muted, #84919a); font-size: 12px; }
.role-report p:last-child { margin-bottom: 0; font-size: 13px; }
.role-history { margin-top: 4px; color: var(--rating-text-secondary, #a8b3ba); }
.role-history .role-report { margin-top: 0; margin-bottom: 12px; }
.role-section-footer { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-top: 16px; border-top: 1px solid var(--rating-border, #26323a); padding-top: 8px; }
.role-method { max-width: 75ch; color: var(--rating-text-muted, #84919a); }
.role-method-body { font-size: 12px; line-height: 1.6; }
.role-method a { color: var(--rating-cyan, #69b8dc); }
.role-section-footer > button { flex: none; }
.behavior-role-estimates .role-status { margin: 16px 0 0; color: var(--rating-green, #69b98c); font-size: 13px; }
.role-status:empty { display: none; }
.role-correction { margin-top: 20px; padding-top: 24px; border-top: 1px solid var(--rating-border-strong, #3d4b55); }
.role-correction-heading h4 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.role-correction-heading p:last-child { margin: 8px 0 20px; font-size: 13px; line-height: 1.5; }
.role-form-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.role-field { display: flex; min-width: 0; flex-direction: column; gap: 8px; margin-bottom: 20px; font-size: 13px; font-weight: 500; }
.role-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.role-field small, .role-duty-options legend span { display: inline; color: var(--rating-text-muted, #84919a); font-size: 12px; font-weight: 400; }
.role-field :is(input, select, textarea) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rating-border-strong, #3d4b55); border-radius: 0; background: var(--rating-bg, #0c1115); color: var(--rating-text, #e7edf0); font: 400 14px/1.4 var(--font-ui); }
.role-field textarea { min-height: 96px; resize: vertical; }
.role-field textarea::placeholder, .role-field input::placeholder { color: var(--rating-text-muted, #84919a); opacity: 1; }
.role-duty-options { margin: 0 0 20px; padding: 0; border: 0; }
.role-duty-options legend { width: 100%; margin-bottom: 4px; font-size: 13px; font-weight: 500; }
.role-duty-options legend span { float: right; }
.role-duty-options label { display: flex; min-height: 44px; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.role-duty-options input { width: 17px; height: 17px; margin: 0; accent-color: var(--rating-cyan, #69b8dc); }
.role-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.behavior-role-estimates .role-form-error { margin: 0 0 12px; color: #f29b9e; font-size: 13px; }
.role-form-error:empty { display: none; }
.role-card [hidden] { display: none !important; }
.role-loading, .role-empty { padding: 32px 24px; color: var(--rating-text-secondary, #a8b3ba); font: 14px/1.5 var(--font-ui); }
.role-empty h3 { color: var(--rating-text, #e7edf0); font-size: 20px; }
@container (max-width: 720px) {
  .role-card-grid { grid-template-columns: 1fr; }
  .role-section-header { gap: 12px; }
  .role-card { padding: 20px; }
}
@container (max-width: 400px) {
  .role-form-columns { grid-template-columns: 1fr; gap: 0; }
  .role-section-header h2 { font-size: 21px; }
  .role-status-tag { margin-top: 22px; }
  .role-card-heading { flex-direction: column; gap: 4px; }
}
.behavior-role-estimates .role-status[data-kind="error"] { color: #f29b9e; }

/* Role Lab: full-corpus evidence, using the established match-page palette. */
cs2-behavior-lab { display: block; min-width: 0; }
.behavior-lab { color: #e7edf0; font-family: var(--font-ui); }
.lab-intro { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin: 8px 0 28px; }
.lab-intro h2 { margin: 6px 0 10px; font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.lab-intro p:last-child { max-width: 70ch; margin: 0; color: #a8b3ba; line-height: 1.6; font-size: 14px; }
.lab-eyebrow { margin: 0; color: #84919a; font: 500 10px/1.5 var(--font-data); letter-spacing: .1em; }
.lab-revision { padding: 7px 10px; border: 1px solid #30483c; background: #14251d; color: #9dceb2; white-space: nowrap; font-size: 12px; }
.lab-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: #26323a; border: 1px solid #26323a; }
.lab-metric { min-width: 0; padding: 20px; background: #10161a; display: flex; flex-direction: column; gap: 8px; }
.lab-metric > span { color: #a8b3ba; font-size: 13px; }
.lab-metric > strong { font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lab-metric > small { color: #84919a; font-size: 12px; line-height: 1.5; }
.lab-map-controls { display: flex; gap: 16px; margin: 28px 0; }
.lab-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #a8b3ba; font-size: 12px; }
.lab-field :is(select,input) { min-height: 44px; border: 1px solid #3d4b55; border-radius: 0; background: #10161a; color: #e7edf0; padding: 10px 12px; font: 400 14px/1.4 var(--font-ui); }
.lab-map-controls select { min-width: 200px; }
.lab-section-heading { margin: 0 0 20px; }
.lab-section-heading h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.lab-section-heading p, .lab-muted { margin: 0; color: #84919a; font-size: 13px; line-height: 1.6; }
.lab-distributions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 24px; }
.lab-distribution { padding: 24px; background: #10161a; border: 1px solid #26323a; }
.lab-distribution h4 { margin: 0 0 20px; font-size: 15px; font-weight: 500; }
.lab-role-bar { display: grid; grid-template-columns: minmax(140px,1.5fr) minmax(40px,1fr) 55px; gap: 12px; align-items: center; min-height: 32px; font-size: 12px; color: #a8b3ba; }
.lab-role-bar > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.lab-bar-track { height: 6px; background: #24313a; }
.lab-bar-track > span { display: block; height: 100%; background: #69b8dc; }
.behavior-lab summary, .behavior-lab-dialog summary { min-height: 44px; padding: 13px 0; color: #69b8dc; cursor: pointer; font-size: 13px; line-height: 1.4; }
.behavior-lab details, .behavior-lab-dialog details { min-width: 0; }
.lab-coverage { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid #26323a; gap: 1px; background: #26323a; }
.lab-coverage .lab-metric > strong { font-size: 22px; }
.lab-player-section { margin: 32px 0; padding-top: 28px; border-top: 1px solid #26323a; }
.lab-filters { display: flex; gap: 24px; justify-content: space-between; align-items: end; margin: 20px 0; }
.lab-search { display: flex; gap: 12px; align-items: end; flex: 1; }
.lab-search .lab-field { max-width: 390px; flex: 1; }
.lab-result-count { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.lab-result-count strong { font-size: 14px; font-weight: 500; }
.lab-result-count span { color: #84919a; font-size: 12px; line-height: 1.6; }
.lab-table-scroll { overflow: auto; border: 1px solid #26323a; }
.lab-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.lab-table th { background: #151d22; color: #84919a; padding: 12px 16px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.lab-table td { padding: 16px; border-top: 1px solid #26323a; background: #10161a; vertical-align: middle; }
.lab-table td strong { font-weight: 500; }
.lab-table td small { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; color: #84919a; }
.lab-table tr:hover td { background: #151f26; }
.lab-pagination { display: flex; justify-content: end; align-items: center; gap: 20px; margin-top: 16px; font-size: 12px; color: #a8b3ba; }
.lab-empty { padding: 28px; border: 1px solid #26323a; color: #a8b3ba; line-height: 1.6; }
.lab-methods { max-width: 100ch; color: #a8b3ba; font-size: 13px; line-height: 1.6; padding-bottom: 16px; }
.behavior-lab a, .behavior-lab-dialog a { color: #69b8dc; font-size: 13px; overflow-wrap: anywhere; }
.behavior-lab :is(button,a,summary,input,select):focus-visible, .behavior-lab-dialog :is(button,a,summary):focus-visible { outline: 2px solid #69b8dc; outline-offset: 3px; }
.behavior-lab-dialog { width: min(1000px,calc(100vw - 40px)); max-height: calc(100vh - 48px); margin: auto; padding: 0; border: 1px solid #3d4b55; border-radius: 0; color: #e7edf0; background: #0c1115; font-family: var(--font-ui); overflow: auto; }
.behavior-lab-dialog::backdrop { background: rgb(0 0 0 / 70%); }
.behavior-lab-dialog > header { display: flex; justify-content: space-between; gap: 24px; align-items: start; padding: 24px 28px; border-bottom: 1px solid #26323a; background: #10161a; }
.behavior-lab-dialog h2 { margin: 6px 0 8px; font-size: 26px; font-weight: 600; }
.behavior-lab-dialog header p:last-child { margin: 0; color: #a8b3ba; font-size: 13px; }
.lab-detail-body { padding: 28px; }
.lab-detail-role h3 { margin: 0 0 12px; font-size: 28px; font-weight: 500; }
.lab-detail-role p { max-width: 75ch; font-size: 14px; line-height: 1.6; color: #a8b3ba; }
.lab-values { margin: 16px 0; }
.lab-values > div { display: grid; grid-template-columns: minmax(150px,1fr) minmax(0,2fr); gap: 24px; padding: 12px 0; border-bottom: 1px solid #26323a; font-size: 13px; }
.lab-values dt { color: #a8b3ba; overflow-wrap: anywhere; }
.lab-values dd { margin: 0; overflow-wrap: anywhere; }
.lab-values dd small { display: block; margin-top: 5px; font-size: 11px; color: #84919a; }
.lab-values .lab-values > div { display: block; }
.lab-values .lab-values dd { margin-top: 6px; }
.lab-round-list { margin: 20px 0; }
.lab-round-list > details { border-top: 1px solid #26323a; }
.lab-round-body { padding: 0 0 20px; }
.lab-round-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
@media(max-width:1000px) {
  .lab-kpis, .lab-distributions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lab-distributions { grid-template-columns: 1fr; }
}
@media(max-width:640px) {
  .lab-intro, .lab-filters { flex-direction: column; align-items: stretch; }
  .lab-revision { align-self: start; }
  .lab-map-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .lab-map-controls select { min-width: 0; width: 100%; }
  .lab-kpis, .lab-coverage, .lab-round-kpis { grid-template-columns: 1fr 1fr; }
  .lab-metric { padding: 16px; }
  .lab-metric strong { font-size: 24px; }
  .behavior-lab-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .behavior-lab-dialog > header, .lab-detail-body { padding: 20px; }
  .lab-values > div { grid-template-columns: 1fr; gap: 6px; }
}

.map-grid[data-volume-smoke-enabled="true"] .smoke-footprint-smoothed:not(.inferno-footprint),
.map-grid[data-volume-smoke-enabled="true"] .smoke-owner:not(.inferno-owner) .smoke-footprint-raw,
.map-grid[data-volume-smoke-enabled="true"] .smoke-owner:not(.inferno-owner) .smoke-debug-voxel { display: none; }

.map-grid[data-volume-smoke-enabled="true"] .smoke-owner:not(.inferno-owner) .smoke-presentation { display: none; }

.map-panel:has(.map-grid[data-volume-smoke-enabled="true"]) cs2-exposure { --recorded-smoke-display: none; }

/* Keep the clip actions symmetric around the three text controls. */
.clip-actions { display: grid; grid-template-columns: 44px minmax(4px, 1fr) max-content 6px max-content 6px max-content minmax(4px, 1fr) 44px; gap: 0; }
.clip-actions > * { grid-row: 1; }
.clip-actions > .clip-icon { grid-column: 1; }
.clip-actions > a.option-choice:not(.clip-icon) { grid-column: 3; }
.clip-actions > button.option-choice:not(.clip-icon) { grid-column: 5; max-width: 80px; white-space: normal; }
.clip-actions > button.option-choice[aria-expanded] { grid-column: 7; }
.clip-actions > .clip-library-delete { grid-column: 9; margin-left: 0; }
.clip-actions > .option-choice:not(.clip-icon) { text-transform: uppercase; font-size: 11px; }
.clip-radar { position: relative; display: grid; min-width: 0; aspect-ratio: 1; align-items: center; justify-items: center; background: #0a1014; color: #a2b0b9; font: 500 11px var(--font-data); }
.clip-radar canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.clip-radar-status { position: absolute; bottom: 6px; left: 6px; padding: 4px 6px; background: #0a1014; pointer-events: none; }
@media (max-width: 720px) {
  .command-bar.app-header { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .app-header .app-brand { display: none; }
  .app-header .app-header-primary { grid-column: 1; flex-wrap: wrap; gap: 8px; padding: 8px; }
  .app-header-navigation { order: 2; flex: 1 0 100%; width: 100%; height: 44px; }
  .app-header .app-header-spacer { display: none; }
  .app-header .topbar-right { margin-left: auto; }
  .app-header-primary > .app-tabs { margin-left: 0; }
  .app-header button { min-height: 44px; }
  .app-header .match-context-tab { padding-inline: 8px; }
  .app-header-navigation .app-tab { min-width: 64px; padding-inline: 6px; }
  .match-hierarchy-chevron { margin-inline: 3px; }
  .clip-library-grid { padding: 0; }
  .app-header .import-dropdown { position: fixed; top: 60px; left: 8px; right: 8px; width: auto; max-width: none; }

}
@media (max-width: 1000px) {
  .workstation:has(> .center-pane) { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content max-content max-content 28px; align-content: start; overflow-y: auto; overflow-x: hidden; }
  .workstation:has(> .center-pane) > .app-header { position: sticky; top: 0; }
  .workstation > .center-pane { grid-column: 1; grid-row: 2; grid-template-rows: minmax(480px, calc(var(--ui-scaled-width) + 160px)) 210px 56px; }
  .workstation:has(> .center-pane) > .left-pane { grid-column: 1; grid-row: 3; overflow: visible; border-right: 0; }
  .workstation:has(> .center-pane) > .right-pane { grid-column: 1; grid-row: 4; grid-template-rows: 220px 220px 320px; border-left: 0; }
  .workstation:has(> .center-pane) > .footer { grid-column: 1; grid-row: 5; }
  .center-pane .map-panel { grid-template-rows: auto minmax(280px, 1fr); }
  .map-toolbar { flex-wrap: wrap; gap: 8px; padding: 8px; }
  .map-score-stack { position: static; left: auto; transform: none; margin-left: auto; }
  .map-controls { flex-wrap: wrap; flex: 1 0 100%; margin-left: 0; gap: 4px; }
  .map-controls button, .transport-button { min-width: 36px; min-height: 36px; }
  .map-surface, .timeline-interaction { touch-action: none; }
  .timeline { grid-template-rows: auto 1fr auto; }
  .timeline-header { height: auto; min-height: 36px; flex-wrap: wrap; gap: 4px; }
  .timeline-header-filters { flex-wrap: wrap; }
  .timeline-footer { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px; }
  .timeline-footer-left { justify-content: center; }
  .timeline-tools { justify-content: center; }
  .transport-hint { display: none; }
  .round-strip button { min-height: 40px; min-width: 40px; }
}

.clip-playback-backdrop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 64px 24px 24px; background: rgba(0, 0, 0, .86); }
.clip-playback-stage { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); align-items: center; gap: 16px; width: min(1440px, 100%); max-height: calc(100dvh - 96px); overflow: auto; }
.clip-playback-stage video { display: block; width: 100%; height: auto; max-height: calc(100dvh - 96px); aspect-ratio: 16 / 9; background: #080c0f; }
.clip-playback-backdrop > .clip-stop { position: absolute; top: 12px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
body:has(.clip-playback-backdrop) { overflow: hidden; }
@media (max-width: 720px) and (orientation: portrait) {
  .clip-playback-backdrop { padding: 64px 12px 20px; }
  .clip-playback-stage { grid-template-columns: minmax(0, 1fr); }
}

cs2-control-radar { display: block; margin-top: 16px; color: var(--rating-text); }
.control-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.control-sides { display: flex; }
cs2-control-radar button, cs2-control-radar select { border: 1px solid #3b4d59; border-radius: 0; background: #121c23; color: #dce6ed; min-height: 36px; padding: 8px 12px; cursor: pointer; }
cs2-control-radar button[aria-pressed="true"] { background: #254351; border-color: #7edce9; color: #fff; }
cs2-control-radar button:focus-visible { outline: 2px solid #f9d58a; outline-offset: -2px; }
.control-rounds { color: #9eafb9; font-size: 12px; }
.control-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; max-width: 896px; }
.control-metrics button { display: grid; gap: 4px; text-align: left; padding: 8px 12px; }
.control-metrics strong { font: 600 21px var(--font-data); }
.control-metrics span { font-size: 12px; }
.control-body { display: grid; grid-template-columns: minmax(0,640px) minmax(180px,240px); gap: 16px; align-items: start; max-width: 896px; }
.control-map-pane { width: 100%; max-width: min(640px,76vh); }
.control-map-stage { position: relative; border: 1px solid #3b4d59; background: #10181d; overflow: hidden; }
cs2-control-radar canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.control-zoom { position: absolute; right: 10px; top: 10px; display: flex; }
.control-zoom img { width: 18px; height: 18px; display: block; filter: invert(86%) sepia(8%) saturate(278%) hue-rotate(154deg); }
.control-readout { min-height: 44px; padding: 12px 0; font-size: 12px; }
.control-scale { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 11px var(--font-data); color: #b8c9d2; padding-top: 10px; }
.control-scale i { display: inline-block; width: 24px; height: 12px; border: 1px solid #8ca4b1; }
.control-scale span:last-child { margin-left: auto; }
.control-zones h3 { margin: 0 0 10px; font-size: 12px; }
.control-zone-list { display: grid; max-height: min(320px,38vh); overflow-y: auto; gap: 4px; }
.control-zone-list button { position: relative; display: flex; gap: 8px; justify-content: space-between; text-align: left; font-size: 11px; padding: 10px 8px 13px; }
.control-zone-list strong { white-space: nowrap; font-family: var(--font-data); }
.control-zone-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: #65c5d8; }
.control-method { border-top: 1px solid #34434c; padding: 12px 0; color: #a9bac5; font-size: 12px; line-height: 1.6; }
.control-method summary { cursor: pointer; }
@media(max-width:600px) { .control-body { grid-template-columns: 1fr; } .control-zone-list { max-height: 230px; grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .control-toolbar { flex-wrap: wrap; } .control-metrics button { padding: 10px; } .control-metrics strong { font-size: 21px; } }


/* Grouped processing queue and on-demand stage history. */
.admin-jobs-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
.jobs-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border-bottom:1px solid #303b43; }
.jobs-toolbar label { display:flex; gap:12px; align-items:center; font-size:12px; }
.jobs-toolbar input { width:290px; max-width:100%; padding:8px; border:1px solid #46535b; border-radius:0; color:#e0e7ea; background:#141d23; }
.jobs-toolbar [data-refresh], .job-note { color:#9baab3; font-size:12px; }
.job-note, .job-section-title { margin:12px 16px; }
.job-section-title { font-size:14px; }
.job-group { border-top:1px solid #303b43; background:#121a20; }
.job-group > summary { display:grid; grid-template-columns:1.3fr 1.25fr 1fr 1fr; gap:16px; padding:16px; cursor:pointer; list-style:revert; }
.job-group > summary:hover, .jobs-recent > summary:hover { background:#1b2830; }
.job-group > summary:focus-visible, .jobs-recent > summary:focus-visible { outline:2px solid #76c5d3; outline-offset:-2px; }
.job-group > summary > span { min-width:0; display:flex; flex-direction:column; gap:5px; }
.job-group strong { color:#d8e7ee; font-size:13px; }
.job-group small, .jobs-recent small { color:#91a4ae; font-size:11px; overflow-wrap:anywhere; }
.job-group[open] > summary { border-left:3px solid #68becb; background:#1a2931; }
.job-expanded { padding:8px 16px 20px; border-top:1px solid #35424b; }
.job-expanded .job-note { margin:10px 0; overflow-wrap:anywhere; }
.job-expanded h4 { font-size:13px; margin:16px 0 8px; }
.job-linked { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.job-linked li { display:flex; gap:8px; flex-wrap:wrap; border:1px solid #35424b; padding:8px; font-size:12px; }
.job-timings { border-collapse:collapse; width:100%; font-size:12px; }
.job-timings th { color:#8fa4b0; text-align:left; font-weight:500; }
.job-timings td, .job-timings th { border-bottom:1px solid #303b43; padding:8px; }
.job-timings td:nth-child(2) { font-variant-numeric:tabular-nums; white-space:nowrap; }
.job-timings meter { width:100%; height:12px; border-radius:0; background:#283840; }
.job-timings meter::-webkit-meter-bar { background:#283840; border:0; border-radius:0; }
.job-timings meter::-webkit-meter-optimum-value { background:#68becb; }
.job-timings meter::-moz-meter-bar { background:#68becb; }
.jobs-recent { margin-top:16px; border-top:1px solid #46545c; }
.jobs-recent > summary { cursor:pointer; padding:16px; color:#c7d5dd; font-size:14px; }
.jobs-recent > summary small { margin-left:12px; }
@media(max-width:700px) { .job-group > summary { grid-template-columns:1fr 1fr; gap:14px; } .jobs-toolbar { align-items:stretch; flex-direction:column; gap:8px; } .jobs-toolbar label { align-items:stretch; flex-direction:column; gap:6px; } .jobs-toolbar input { width:100%; box-sizing:border-box; } .job-timings th:nth-child(3) { font-size:10px; } }
.admin-jobs-panel { display:flex; flex-direction:column; }
.admin-jobs-body { min-height:0; max-height:none; }
.jobs-toolbar { flex-shrink:0; }
/* Progressive disclosure: quiet summaries, clear content hierarchy. */
.job-group > summary { position:relative; padding:18px 20px 18px 44px; min-height:44px; align-items:center; }
.job-disclosure { position:absolute; left:16px; top:24px; width:16px; height:16px; opacity:.7; filter:invert(1); }
.job-group[open] > summary > .job-disclosure { transform:rotate(90deg); }
.job-group strong { font-size:14px; font-weight:600; }
.job-group small { font-size:12px; line-height:1.45; }
.job-expanded { padding:8px 24px 20px 44px; }
.job-expanded h4 { font-size:14px; }
.job-note { line-height:1.55; }
.jobs-help { padding:12px 16px 4px; color:#9fb0ba; font-size:12px; }
.jobs-help > summary, .job-technical > summary { cursor:pointer; padding:8px 0; }
.jobs-help .job-note { margin:8px 0; }
.job-technical { margin-top:20px; border-top:1px solid #303b43; color:#9fb0ba; font-size:12px; }
.job-technical dl { display:grid; grid-template-columns:140px 1fr; gap:10px 16px; }
.job-technical dt { color:#869ba8; }
.job-technical dd { margin:0; overflow-wrap:anywhere; }
.job-linked li { border:0; border-left:2px solid #45606e; background:#17232b; padding:10px 12px; }
.admin-jobs-close { min-height:44px; font-size:12px; }
@media(max-width:700px) { .job-group > summary { padding:16px 16px 16px 38px; } .job-expanded { padding:8px 16px 20px; } .job-disclosure { left:12px; top:20px; } .job-technical dl { grid-template-columns:100px 1fr; } .admin-jobs-summary span { font-size:10px; } }

.aim-plane-centerline circle { fill: none; stroke: var(--text-primary, #ddd); stroke-width: 1.5; }
.aim-plane-shot.selected-pellet .aim-plane-shot-mark { stroke-width: 4; }
.aim-plane-shot.selected-pellet text { text-decoration: underline; }
.aim-plane-aim-only.aim-estimated-path { stroke-dasharray: 5 4; }

.aim-plane-centerline .aim-accuracy-envelope { stroke-dasharray: 3 3; stroke-width: 1; }
/* The jobs panel owns its grid; generic dialog heights must not size its header. */
.admin-jobs-panel { box-sizing:border-box; display:grid; grid-template-rows:auto auto minmax(0,1fr); height:min(960px,calc(100dvh - 48px)); }
.admin-jobs-header { display:grid; grid-template-columns:minmax(0,1fr) auto; min-height:48px; border-bottom:1px solid #29313a; background:#161c22; color:#e3e9ee; }
.admin-jobs-header > strong { align-self:center; padding:12px 16px; font-size:14px; font-weight:600; }
.admin-jobs-header > .admin-jobs-close { display:grid; place-items:center; align-self:stretch; min-height:48px; height:auto; margin:0; padding:0 20px; border-radius:0; }
.job-averages { border-bottom:1px solid #303b43; }
.job-averages-heading { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; padding:14px 16px 10px; color:#d8e7ee; font-size:13px; }
.job-averages-heading > span { color:#91a4ae; font-size:11px; }
.job-averages-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.job-average { display:grid; gap:5px; padding:10px 16px 14px; border-right:1px solid #303b43; }
.job-average:last-child { border-right:0; }
.job-average > span { color:#a3b5c0; font-size:12px; }
.job-average > strong { font:600 22px var(--font-data); color:#d8e7ee; }
.job-average > small { color:#91a4ae; font-size:11px; }
#jobs-average-method { padding:0 16px 12px; color:#91a4ae; font-size:12px; }
#jobs-average-method > summary { cursor:pointer; padding:6px 0; }
#jobs-average-method > p { margin:8px 0; line-height:1.5; }
@media(max-width:700px) { .admin-jobs-panel { height:calc(100dvh - 20px); max-height:calc(100dvh - 20px); } .job-average { padding:10px; } .job-average > strong { font-size:18px; } .job-average > span { font-size:11px; } }
.job-group.job-running > summary { background:#12302d; box-shadow:inset 3px 0 #67d6b4; }
.job-group.job-running > summary:hover, .job-group.job-running[open] > summary { background:#194139; }
.job-group.job-running .job-status { color:#9be6cb; }
.job-group.job-running[open] > summary { border-left:0; }
.job-duration-bar { width:100%; height:10px; background:#283840; overflow:hidden; }
.job-duration-bar > span { display:block; height:100%; background:#68becb; transition:width .8s linear; }
.job-running .job-duration-bar > span { background:#67d6b4; }
.job-group > summary { transition:background-color .18s ease,box-shadow .18s ease; }
.job-disclosure { transition:transform .18s ease; }
[data-clock-start], [data-stage-time], [data-attempt-total] { font-variant-numeric:tabular-nums; }
@media(prefers-reduced-motion:reduce) { .job-duration-bar > span, .job-group > summary, .job-disclosure { transition:none; } }

/* Aim details stay readable inside narrow rating panels. */
.aim-diagnostics { display: block; border-block: 1px solid var(--rating-border); }
.aim-diagnostics > summary { padding: 12px; cursor: pointer; color: var(--rating-text); font-size: 12px; }
.aim-diagnostics .aim-quality-summary, .aim-diagnostics .aim-rating-explanation { padding-inline: 12px; }
.aim-shot-inspector .aim-trace-metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.aim-shot-inspector .aim-trace-metrics strong { overflow: visible; overflow-wrap: anywhere; font-size: 13px; }
.aim-shot-inspector select { max-width: 100%; }
.aim-trace-table tr[aria-selected="true"] { background: #1b303b; }
.aim-trace-table button:focus-visible, .aim-diagnostics summary:focus-visible { outline: 2px solid #7bc4e4; outline-offset: -2px; }

.aim-accuracy-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0 12px; color: #a9bac5; font: 11px var(--font-data); }
.aim-accuracy-legend span { display: inline-flex; align-items: center; gap: 6px; }
.aim-accuracy-legend .inaccuracy::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d7a85d; }
.aim-accuracy-legend .spread::before { content: ""; width: 7px; height: 7px; border: 1px solid #7bc4e4; }
.aim-accuracy-legend .recovery::before { content: ""; width: 16px; border-top: 2px dashed #d7a85d; }
.aim-accuracy-model-point { fill: #0a1014; stroke: #d7a85d; stroke-width: 1; }
.aim-accuracy-unavailable { min-height: 100px; display: grid; align-content: center; color: #a9bac5; font: 12px var(--font-data); }

/* Smoke Lab shares the workstation's rectangular panels and typography. */
.smoke-lab { display:flex; flex-direction:column; width:100%; min-width:0; height:calc(100vh - 106px); min-height:500px; background:#0b1115; color:var(--text); font:14px var(--font-ui); }
.lab-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:18px 24px; border-bottom:1px solid var(--border); background:#0f151a; }
.lab-header h1 { margin:0; color:#edf3f6; font-size:24px; font-weight:600; letter-spacing:-.025em; line-height:1.15; }
.lab-header p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.smoke-lab button,.smoke-lab select,.lab-origin input { min-height:34px; padding:6px 11px; border:1px solid #35434e; border-radius:0; background:#151f26; color:#dce5ea; font:500 12px var(--font-ui); }
.smoke-lab button { cursor:pointer; transition:background .12s,border-color .12s; }
.smoke-lab button:hover { background:#22333e; border-color:#526977; }
.smoke-lab button:disabled { opacity:.4; cursor:default; }
.smoke-lab button.lab-primary { background:#23495c; border-color:#467e98; color:#eaf7ff; font-weight:600; }
.smoke-lab button.lab-primary:hover,.smoke-lab button.lab-primary[aria-pressed=true] { background:#31627a; border-color:#80c6e5; }
.smoke-lab button.lab-text-button { border-color:transparent; background:transparent; color:#9babba; }
.smoke-lab button.lab-text-button:hover { color:#e3edf4; background:#172129; }
.lab-modes { display:flex; padding:3px; gap:3px; border:1px solid #2d3b45; background:#0a1014; }
.lab-modes button { border-color:transparent; background:transparent; padding:8px 18px; color:#8e9fac; }
.lab-modes button[aria-pressed=true] { border-color:#375c70; background:#1b3544; color:#e0f2ff; }
.lab-toolbar { display:flex; align-items:end; gap:16px; padding:12px 24px; background:#10171c; border-bottom:1px solid var(--border); }
.lab-field { display:grid; gap:6px; min-width:0; }
.lab-field > span { font:600 10px var(--font-data); letter-spacing:.08em; text-transform:uppercase; color:#8d9faa; }
.lab-field select { width:100%; min-width:170px; max-width:290px; }
.lab-toolbar .lab-field:first-child select { min-width:210px; }
.lab-toolbar-actions { margin-left:auto; }
.lab-main { display:grid; grid-template-columns:minmax(0,1fr) 336px; flex:1; min-height:0; }
.lab-stage { display:flex; flex-direction:column; min-width:0; min-height:0; }
.lab-viewport { position:relative; flex:1; min-width:0; min-height:0; overflow:hidden; background:#0b1115; }
.lab-viewport canvas { display:block; width:100%; height:100%; touch-action:none; }
.lab-canvas-caption { position:absolute; z-index:2; top:18px; left:22px; display:grid; gap:5px; pointer-events:none; }
.lab-canvas-caption strong { font-size:16px; font-weight:600; color:#e4edf2; }
.lab-canvas-caption span { font-size:11px; color:#899eaa; }
.lab-camera { position:absolute; z-index:4; top:16px; right:18px; display:flex; gap:6px; }
.lab-camera button { min-height:30px; background:#111c23; font-size:11px; color:#9eb3c1; }
.lab-camera button[aria-pressed=true] { border-color:var(--accent); color:#deeff8; }
.lab-navigation-hint { position:absolute; z-index:2; bottom:14px; left:22px; color:#718995; font:10px var(--font-data); pointer-events:none; }
.lab-sidebar { min-width:0; overflow:auto; border-left:1px solid var(--border); background:#0e151a; }
.lab-section { padding:18px 20px; border-bottom:1px solid #293640; }
.lab-section h2,.lab-section > summary { margin:0 0 14px; font:600 11px var(--font-data); letter-spacing:.08em; text-transform:uppercase; color:#a9bac5; }
.lab-section-heading { display:flex; align-items:baseline; justify-content:space-between; }
.lab-count { color:#788d9b; font:11px var(--font-data); }
.lab-placement-actions { display:flex; align-items:center; gap:8px; }
.lab-placement-actions .lab-primary { flex:1; }
.lab-empty { padding:24px 12px 10px; text-align:center; }
.lab-empty strong { font-size:13px; font-weight:500; color:#afbfca; }
.lab-empty p { margin:8px 0 0; font-size:12px; line-height:1.65; color:#728997; }
.lab-origin { margin-top:10px; padding:10px; border:1px solid #293b47; border-left:2px solid #344956; background:#111b22; }
.lab-origin[data-selected=true] { border-left-color:#e2b36a; background:#17212a; }
.lab-origin-heading { display:flex; align-items:center; gap:8px; }
.lab-origin-number { color:#e2b36a; font:600 11px var(--font-data); }
.lab-origin .lab-origin-select { flex:1; min-height:24px; padding:0; border:0; background:transparent; text-align:left; color:#d6e1e9; }
.lab-origin .lab-origin-remove { min-height:24px; padding:0; border:0; background:transparent; font-size:11px; color:#7f949f; }
.lab-origin .lab-origin-remove:hover { color:#f4aaaa; }
.lab-coordinates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:12px; }
.lab-coordinates label { display:grid; gap:5px; min-width:0; }
.lab-coordinates label > span { color:#7d939f; font:10px var(--font-data); }
.lab-origin input { width:100%; min-width:0; min-height:31px; padding:5px 6px; background:#0c151c; font:11px var(--font-data); }
.lab-origin-hint { margin:10px 0 0; color:#7993a1; font-size:10px; }
.lab-origin:not([data-selected=true]) .lab-coordinates,.lab-origin:not([data-selected=true]) .lab-origin-hint { display:none; }
.lab-section .lab-field select { min-width:0; max-width:none; }
.lab-check { display:flex; align-items:flex-start; gap:9px; margin-top:15px; cursor:pointer; }
.lab-check input { margin:3px 0 0; flex:none; accent-color:var(--accent); }
.lab-check strong { display:block; color:#b6c6d0; font-size:12px; font-weight:500; }
.lab-check small { display:block; margin-top:4px; color:#728b9a; font-size:11px; line-height:1.5; }
.lab-control-heading { display:flex; justify-content:space-between; align-items:center; color:#b4c5d0; font-size:12px; }
.lab-value { color:#8dabbc; font:11px var(--font-data); }
.lab-sidebar input[type=range] { display:block; width:100%; margin:14px 0 8px; accent-color:#78b6d6; }
.lab-help { margin:0; color:#738b99; font-size:11px; line-height:1.55; }
.lab-layers { display:grid; grid-template-columns:1fr 1fr; gap:12px 8px; margin-top:18px; }
.lab-layers label { display:flex; align-items:center; gap:7px; color:#a2b7c4; font-size:12px; }
.lab-layers input { margin:0; accent-color:var(--accent); }
.lab-layers label:has(input:disabled) { opacity:.4; }
.lab-advanced { margin-top:18px; padding-top:12px; border-top:1px solid #25343e; }
.lab-advanced > summary { color:#829aa9; font-size:11px; cursor:pointer; }
.lab-inspector-details > summary { margin:0; cursor:pointer; }
.lab-inspector { margin-top:14px; overflow-wrap:anywhere; font-size:11px; color:#90a8b7; }
.lab-inspector pre { margin:0; white-space:pre-wrap; max-height:300px; overflow:auto; padding:10px; background:#091117; font:10px/1.6 var(--font-data); }
.lab-inspector-path { color:#bbceda; font:11px var(--font-data); }
.lab-before-after { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; }
.lab-before-after section { min-width:0; }
.lab-before-after h3 { margin:0 0 8px; color:#8096a5; font:600 10px var(--font-data); text-transform:uppercase; }
.lab-legend { display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:11px; }
.lab-legend span { display:grid; gap:5px; padding:10px; border:1px solid #293c48; background:#111d24; }
.lab-legend strong { font:500 17px var(--font-data); }
.lab-legend small { font-size:11px; }

.lab-diff-0 { color:#8799a4; }.lab-diff-1 { color:#10ccdf; }.lab-diff-2 { color:#f233a6; }.lab-diff-3 { color:#ffa61a; }
.lab-changes { margin-top:14px; font-size:12px; color:#9eb5c3; }
.lab-changes button { display:block; width:100%; min-height:30px; text-align:left; overflow-wrap:anywhere; margin-top:5px; font:10px var(--font-data); }
.lab-changes .lab-diff-1,.lab-inspector.lab-diff-1 { color:#10ccdf; }.lab-changes .lab-diff-2,.lab-inspector.lab-diff-2 { color:#f233a6; }.lab-changes .lab-diff-3,.lab-inspector.lab-diff-3 { color:#ffa61a; }
.lab-playback { display:flex; align-items:center; gap:22px; padding:14px 22px; border-top:1px solid var(--border); background:#10191f; }
.lab-playback-actions { display:flex; gap:6px; }
.lab-playback-actions button { min-width:60px; }
.lab-timeline { min-width:0; flex:1; }
.lab-timeline-label { display:flex; align-items:center; gap:8px; color:#7f99aa; font:10px var(--font-data); }
.lab-clock { margin-left:auto; color:#d2e7f3; font-size:12px; white-space:nowrap; }
.lab-duration { color:#576f7d; white-space:nowrap; }
.lab-timeline input { display:block; width:100%; margin:8px 0 0; accent-color:#8ac8e6; }
.lab-startup-label { color:#e4b66e; font:10px var(--font-ui); }
.lab-footer { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:32px; padding:7px 22px; border-top:1px solid #26343d; background:#0c1318; }
.lab-status { margin:0; font-size:11px; color:#7895a6; }
.lab-status-error { color:#efa79b; }
.lab-diagnostics summary { color:#647f90; font-size:10px; white-space:nowrap; cursor:pointer; }
.lab-metrics { position:absolute; right:16px; bottom:36px; z-index:8; display:block; max-width:420px; padding:12px; background:#131f27; border:1px solid #364d5c; color:#a3bfce; font:10px/1.7 var(--font-data); }
.lab-marker-layer { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.smoke-lab .lab-bloom-marker { position:absolute; transform:translate(-50%,-150%); min-height:20px; padding:2px 5px; color:#ffd38a; border:1px solid #b68d48; background:#172129; font:11px var(--font-data); pointer-events:auto; }
.smoke-lab .lab-bloom-marker[aria-pressed=true] { background:#67451c; }
.smoke-lab [hidden] { display:none; }
.workstation.smoke-lab-view { grid-template-columns:minmax(0,1fr); }
.smoke-lab-view > .smoke-lab { grid-column:1 / -1; grid-row:2; min-height:0; height:auto; overflow:hidden; }
@media(max-width:1100px) { .lab-main { grid-template-columns:minmax(0,1fr) 290px; }.lab-header,.lab-toolbar { padding-left:16px; padding-right:16px; }.lab-field select,.lab-toolbar .lab-field:first-child select { min-width:135px; max-width:210px; }.lab-modes button { padding:8px 12px; }.lab-startup-label { max-width:135px; }.lab-timeline-label { flex-wrap:wrap; } }

.lab-changes .lab-diff-1,.lab-inspector.lab-diff-1 { color:#10ccdf; }
.lab-changes .lab-diff-2,.lab-inspector.lab-diff-2 { color:#f233a6; }
.lab-changes .lab-diff-3,.lab-inspector.lab-diff-3 { color:#ffa61a; }

.utility-profile { padding: 16px; border: 1px solid #25333e; background: #0b1115; color: #d6e1e8; }
.utility-profile header { display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.utility-profile header .number { font-size: 32px; }
.utility-components, .utility-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.utility-components > div { display: grid; gap: 6px; padding: 12px; border: 1px solid #25333e; }
.utility-profile table { width: 100%; border-collapse: collapse; }
.utility-profile th, .utility-profile td { padding: 6px; text-align: right; border-bottom: 1px solid #25333e; }
.utility-profile th:first-child, .utility-profile td:first-child { text-align: left; }
.utility-profile button, .utility-profile select { border-radius: 0; border: 1px solid #394b5a; padding: 6px; background: #111d26; color: inherit; }
.utility-profile button { cursor: pointer; text-align: left; }
.utility-profile small { display: block; }
@media (max-width: 760px) { .utility-components, .utility-groups { grid-template-columns: 1fr; } .utility-profile header { flex-wrap: wrap; } }
.lab-contact { width:100%; margin-top:10px; text-align:left; }
.lab-contact[aria-pressed=true] { border-color:#467e98; background:#23495c; color:#eaf7ff; }
.lab-contact + .lab-help { margin:8px 0 12px; }

.lab-playback-actions button[aria-pressed=true] { border-color:#467e98; background:#23495c; color:#eaf7ff; }