* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #0f0f14;
  color: #e0e0e0;
  padding: 32px 48px;
  max-width: 1200px;
  margin: 0 auto;
}
h1 { font-size: 1.8rem; margin-bottom: 24px; color: #fff; }
h1 .sub { font-size: 1rem; color: #888; font-weight: 400; margin-left: 12px; }
h2 { font-size: 1.1rem; color: #aaa; margin: 28px 0 10px; text-transform: uppercase; letter-spacing: 1px; }
a { color: #e94560; text-decoration: none; }
a:hover { text-decoration: underline; }
/* The inline <nav class="topnav"> is legacy: nav.js builds the real floating
   navbar (.demonav) and removes/hides every .topnav at load. Hide it up front
   (pre-JS) so it never flashes unstyled — same end state nav.js produces, just
   without the FOUC. (Match pages reuse this class for a breadcrumb; nav.js
   strips that too, so this changes nothing post-load.) */
.topnav {
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  font-size: 0.88rem;
  color: #666;
}
.topnav a { color: #888; }
.topnav a:hover { color: #eee; text-decoration: none; }
.topnav a.home { color: #e94560; font-weight: 600; font-size: 0.95rem; }
.topnav a.home:hover { color: #ff6b80; }
.topnav .sep { color: #333; }
.topnav .cur { color: #ccc; }
.topnav .nav-right { margin-left: auto; font-size: 0.82rem; color: #555; }
.topnav .nav-right a { color: #666; }
.topnav .nav-right a:hover { color: #aaa; }
.ver { color: #444; }
.statusbar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #16162a;
  border: 1px solid #1e1e3a;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.85rem;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sb-icon { color: #4caf50; font-size: 0.65rem; }
.sb-title { color: #ccc; font-weight: 500; }
.sb-desc { color: #777; }
.sb-since { color: #444; margin-left: auto; }
.sb-eta { color: #666; }
.sb-bar-wrap { display:inline-block; width:60px; height:5px; background:#0f0f1a; border-radius:3px; vertical-align:middle; margin-left:4px; overflow:hidden; }
.sb-bar { height:100%; background:#4a9fd8; border-radius:3px; transition:width .4s; }
.summary-bar {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
}
.sum-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #16162a;
  border: 1px solid #1e1e3a;
  border-radius: 8px;
  padding: 12px 28px;
  min-width: 100px;
}
.sum-val { font-size: 1.6rem; font-weight: 700; color: #e94560; font-variant-numeric: tabular-nums; }
.sum-lbl { font-size: 0.75rem; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.scard {
  background: #16162a;
  border: 1px solid #1e1e3a;
  border-radius: 8px;
  padding: 18px 20px;
  transition: border-color .3s;
}
.scard.flash { border-color: #e94560; }
.scard-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: #555; margin-bottom: 12px; }
.scard-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.sk { font-size: 0.82rem; color: #666; white-space: nowrap; }
.sv { font-size: 0.88rem; color: #ccc; text-align: right; word-break: break-all; }
.sv-hi { color: #e94560; font-weight: 600; }
.dim { color: #555; }
.progress-wrap { background: #0f0f1a; border-radius: 4px; height: 6px; margin-top: 10px; overflow: hidden; }
.progress-bar  { height: 100%; background: #4a9fd8; border-radius: 4px; transition: width .4s; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
thead { background: #1a1a2e; color: #aaa; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }
th, td { padding: 9px 14px; text-align: left; border-bottom: 1px solid #1e1e2e;
         vertical-align: middle; }
/* Unified table chrome: column headers centered (H + V); very subtle
   vertical separators so columns don't visually run together, without the
   heavy "grid" look. Last column drops the divider. */
th { white-space: nowrap; text-align: center; vertical-align: middle; }
th, td { border-right: 1px solid rgba(255,255,255,0.04); }
th:last-child, td:last-child { border-right: none; }
/* Taller match rows (~1.5×) — more room for a bigger map icon + readable
   player names. Header stays compact. */
tbody td { padding-top: 7px; padding-bottom: 7px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.center { text-align: center; }
td.map { font-weight: 600; font-size: 14px; }
/* CS2 map silhouette icon (extracted from the game VPK). */
td.map .mapicon { width: 56px; height: 56px; vertical-align: middle; }
td.mono { font-family: monospace; font-size: 11px; color: #888; }
td.score { font-weight: 700; font-size: 15px; letter-spacing: 1px; }
td.score .sep { color: #555; margin: 0 2px; }
.upload-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.upload-label { font-size: 0.85rem; color: #666; }
.btn-upload {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid #4a9fd8;
  border-radius: 4px;
  color: #4a9fd8;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background .15s, color .15s;
}
.btn-upload:hover { background: #4a9fd8; color: #fff; }
.upload-status { font-size: 0.83rem; color: #888; }
.upload-status.ok  { color: #4caf50; }
.upload-status.err { color: #e94560; }
.upload-progress-wrap { display: inline-flex; align-items: center; gap: 8px; }
.upload-prog-bar-wrap { width: 120px; height: 5px; background: #0f0f1a; border-radius: 3px; overflow: hidden; }
.upload-prog-bar { height: 100%; background: #4a9fd8; border-radius: 3px; transition: width .2s; width: 0%; }
.upload-prog-pct { font-size: 0.8rem; color: #aaa; min-width: 32px; font-variant-numeric: tabular-nums; }
td.players { font-size: 13px; line-height: 1.65; }
/* Players: green ramp for the winning team, red ramp for the losing
   team; brightness within each name = that player's match impact
   (computed in colourRoster, applied as an inline colour). One team
   per line. Names link to the player's profile. */
td.players .team { display: block; }
td.players .team a { text-decoration: none; }
td.players .team a:hover { text-decoration: underline; }
td.players .sep2 { color: #555; }
td.num { text-align: right; font-size: 0.78rem; color: #555; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mid-col { white-space: nowrap; }
/* Consolidated actions cell: compact icon row. */
td.actions { white-space: nowrap; }
td.actions .act { display: inline-block; padding: 2px 5px; text-decoration: none;
                  color: #9aa; font-size: 0.95rem; border-radius: 3px; }
td.actions .act:hover { background: #222; color: #eee; }
td.actions .act.dim { color: #444; cursor: default; }
.ext-mm { font-size: 0.7rem; color: #333; margin-left: 4px; }
td.name { font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.team { font-size: 0.8rem; color: #888; }
tr.team-CT { border-left: 3px solid #4a9fd8; }
tr.team-T  { border-left: 3px solid #e07020; }
tr:hover { background: #16162a; }
.hi { color: #e94560; font-weight: 600; }
.link-minimap { font-size: 0.85rem; color: #888; }
.link-minimap:hover { color: #eee; }
.video-wrap { margin: 24px 0 12px; }
.video-wrap video { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 180px); border-radius: 6px; background: #000; }
.file-info { font-size: 0.82rem; color: #666; margin-bottom: 24px; }
.no-file { color: #666; font-size: 0.9rem; margin: 24px 0; }
.meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.meta-item {
  display: flex;
  flex-direction: column;
  background: #16162a;
  border: 1px solid #1e1e3a;
  border-radius: 6px;
  padding: 8px 14px;
  min-width: 90px;
}
.meta-k { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.8px; color: #555; margin-bottom: 3px; }
.meta-v { font-size: 0.9rem; color: #ccc; font-weight: 500; font-variant-numeric: tabular-nums; }
.mode-normal { color: #4a9fd8; }
.mode-turbo  { color: #f0a030; }
.mode-draft  { color: #c060e0; }
.btn-render, .btn-stop {
  padding: 6px 14px;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font: inherit;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.btn-player { border: 1px solid #40c080; color: #40c080; text-decoration: none; }
.btn-player:hover { background: #40c080; color: #fff; }
.btn-render { border: 1px solid #4a9fd8; color: #4a9fd8; cursor: pointer; text-decoration: none; }
.btn-render:hover:not(:disabled) { background: #4a9fd8; color: #fff; text-decoration: none; }
.btn-render:disabled { opacity: 0.35; cursor: default; }
.btn-stop { border: 1px solid #e94560; color: #e94560; }
.btn-stop:hover:not(:disabled) { background: #e94560; color: #fff; }
.btn-stop:disabled { border-color: #444; color: #444; cursor: default; }
.er-btn-row { display: inline-flex; gap: 6px; align-items: center; }
.btn-calib {
  background: transparent;
  border: 1px solid #333;
  color: #555;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  font: inherit;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-calib:hover:not(:disabled) { border-color: #666; color: #999; }
.btn-calib:disabled { opacity: 0.4; cursor: default; }
.er-calib-item { margin-left: auto; }
.link-render {
  color: #4a9fd8;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  font-size: 0.85rem;
  white-space: nowrap;
}
.link-render:hover { color: #87c4f0; text-decoration: underline; }
.er-panel {
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  padding: 12px 16px 14px;
  margin: 16px 0;
  background: #141820;
}
.er-panel legend { color: #4a9fd8; padding: 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.er-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.er-row label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: #888; }
.er-row label.er-cb { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
.er-row select { background: #0d0d14; color: #ddd; border: 1px solid #333; border-radius: 4px; padding: 6px 8px; font: inherit; min-width: 130px; }
.er-row select:focus { outline: none; border-color: #4a9fd8; }
.er-status { margin-top: 8px; font-size: 0.85rem; color: #aaa; min-height: 1.2em; }
.er-log { margin-top: 6px; padding: 6px 8px; background: #0d0d14; border: 1px solid #333; border-radius: 4px; font-size: 0.78rem; color: #e07070; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow-y: auto; }
.er-estimate { margin-top: 8px; font-size: 0.82rem; color: #888; min-height: 1.2em; font-family: ui-monospace, monospace; }
.er-estimate b { color: #4a9fd8; font-weight: 600; }
.er-res-display {
  background: #0d0d14;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  min-width: 130px;
  color: #ccc;
  font-size: 0.85em;
}
.er-sep { border: 0; border-top: 1px solid #222; margin: 16px 0; }
.btn-split  { border: 1px solid #30c0a0; color: #30c0a0; }
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-ok      { background: #1a3a1a; color: #4caf50; }
.badge-no      { background: #1e1e1e; color: #555; }
.badge-future  { background: #1e1e1e; color: #444; }
.badge-rendering { background: #1a2a3a; color: #4a9fd8; font-variant-numeric: tabular-nums; }
.badge-link { text-decoration: none; }
.badge-link:hover .badge { filter: brightness(1.3); }
.render-progress { margin-left: 2px; }
.prog-bar-wrap { height: 6px; background: #0f0f1a; border-radius: 3px; overflow: hidden; }
.prog-bar { height: 100%; background: #4a9fd8; border-radius: 3px; transition: width .4s; width: 0%; }
.prog-pct { color: #ccc; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 36px; }
.prog-eta { color: #666; }