:root {
  --bg: #15171c;
  --panel: #1d2027;
  --border: #2a2e38;
  --text: #e6e8ee;
  --muted: #9aa0ad;
  --accent: #6aa9ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

h1 { font-size: 20px; margin: 0; }
h1 .nav-link {
  font-size: 13px;
  font-weight: normal;
  color: var(--muted);
  text-decoration: none;
  margin-left: 16px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  vertical-align: middle;
}
h1 .nav-link:hover { color: var(--text, #eee); border-color: var(--muted); }
h2 { font-size: 16px; margin: 0 0 12px 0; color: var(--muted); font-weight: 500; }

main {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1800px;
  margin: 0 auto;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.two-col .left-col,
.two-col .right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 1280px) {
  .two-col { grid-template-columns: 1fr; }
}

section { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
#summary { padding: 12px 16px; }
#summary h2 { margin-bottom: 8px; }

#source-bar { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); }
#source-status code { background: #0d0f13; padding: 2px 6px; border-radius: 4px; color: var(--accent); }
#source-status.ok { color: #6cc070; }
#source-status.warn { color: #e0c060; }
#source-status.err { color: #e08585; }

.file-picker { display: inline-block; cursor: pointer; }
.file-picker input { display: none; }
.file-picker span {
  display: inline-block;
  padding: 6px 12px;
  background: #2a2e38;
  border-radius: 4px;
  font-size: 12px;
}
.file-picker:hover span { background: #353a47; }

.file-picker-btn {
  display: inline-block;
  padding: 6px 12px;
  background: #2a2e38;
  color: var(--text);
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.file-picker-btn:hover { background: #353a47; }
.file-picker-btn.subtle {
  background: transparent;
  color: var(--muted);
  padding: 6px 8px;
}
.file-picker-btn.subtle:hover { color: var(--text); background: #2a2e38; }
.file-picker-btn[hidden] { display: none; }

#file-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
#file-hint summary {
  cursor: pointer;
  width: max-content;
  padding: 2px 0;
}
#file-hint summary:hover { color: var(--text); }
#file-hint .hint-content {
  margin-top: 6px;
  padding: 8px 12px;
  background: #1f232c;
  border-radius: 4px;
  border-left: 2px solid #44506a;
  max-width: 760px;
}
#file-hint .hint-content p { margin: 4px 0; }
#file-hint .hint-content code {
  background: #15171c;
  padding: 1px 5px;
  border-radius: 2px;
  word-break: break-all;
  font-size: 11px;
}
#file-hint .hint-secondary { opacity: 0.7; }
#file-hint .hint-privacy { margin-top: 8px; font-style: italic; opacity: 0.8; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.stat {
  padding: 8px 10px;
  background: #0d0f13;
  border-radius: 6px;
}
.stat .label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.stat .value { font-size: 18px; font-weight: 600; margin-top: 2px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 500; }
tbody tr:hover { background: #22262f; }
table.compact { font-size: 12.5px; }
table.compact th, table.compact td { padding: 4px 6px; }

#rank-chart { width: 100%; height: 340px; }

.filter-bar {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; font-size: 12px;
}
main > .filter-bar { margin-bottom: 0; }
#recent-runs #class-filter { margin-bottom: 8px; }
.filter-label { color: var(--muted); margin-right: 4px; font-weight: 500; }
.filter-sep { color: var(--border); margin: 0 4px; }

.chip {
  background: #0d0f13; color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px; font-size: 12px;
  cursor: pointer; user-select: none;
  transition: all 0.1s ease;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.active { background: #2a2e38; color: var(--text); border-color: var(--accent); }
.chip-meta { font-style: italic; }

.tier-chip[data-tier="Unranked"].active    { color: #9aa0ad; border-color: #9aa0ad; }
.tier-chip[data-tier="Bronze"].active      { color: #cd7f32; border-color: #cd7f32; }
.tier-chip[data-tier="Silver"].active      { color: #d6d6d6; border-color: #d6d6d6; }
.tier-chip[data-tier="Gold"].active        { color: #ffd24a; border-color: #ffd24a; }
.tier-chip[data-tier="Platinum"].active    { color: #6ad5c9; border-color: #6ad5c9; }
.tier-chip[data-tier="Diamond"].active     { color: #6aa9ff; border-color: #6aa9ff; }
.tier-chip[data-tier="Master"].active      { color: #ff7ab6; border-color: #ff7ab6; }
.tier-chip[data-tier="Grandmaster"].active { color: #ffaa00; border-color: #ffaa00; }

.class-chip[data-class="0"].active { color: #a8d571; border-color: #a8d571; }
.class-chip[data-class="1"].active { color: #cf78fd; border-color: #cf78fd; }
.class-chip[data-class="2"].active { color: #7f9fff; border-color: #7f9fff; }
.class-chip[data-class="3"].active { color: #ff642e; border-color: #ff642e; }
.class-chip[data-class="4"].active { color: #48d8f4; border-color: #48d8f4; }
.class-chip[data-class="5"].active { color: #ff9ff7; border-color: #ff9ff7; }
.class-chip[data-class="6"].active { color: #fa7d3c; border-color: #fa7d3c; }

.loadout-chip[data-loadout="0"].active { color: #cfcfcf; border-color: #cfcfcf; }
.loadout-chip[data-loadout="1"].active { color: #b0c4de; border-color: #b0c4de; }
.loadout-chip[data-loadout="2"].active { color: #c8aef5; border-color: #c8aef5; }
.loadout-chip[data-loadout="3"].active { color: #f5c542; border-color: #f5c542; }

/* Tier-colored text (used in the per-class table for current/peak MMR). */
.tier-Unranked    { color: #9aa0ad; font-weight: 600; }
.tier-Bronze      { color: #cd7f32; font-weight: 600; }
.tier-Silver      { color: #d6d6d6; font-weight: 600; }
.tier-Gold        { color: #ffd24a; font-weight: 600; }
.tier-Platinum    { color: #6ad5c9; font-weight: 600; }
.tier-Diamond     { color: #6aa9ff; font-weight: 600; }
.tier-Master      { color: #ff7ab6; font-weight: 600; }
.tier-Grandmaster { color: #ffaa00; font-weight: 600; }

.rank-float { color: var(--muted); font-size: 11px; }

#recent-runs-controls { margin-bottom: 10px; font-size: 12px; color: var(--muted); }
#recent-runs-controls select {
  background: #0d0f13; color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; font-size: 12px;
}

.random-marker {
  font-size: 10px;
  color: var(--muted);
  vertical-align: super;
  margin-left: 2px;
  font-weight: normal;
  letter-spacing: 0;
}
#recent-runs-table .delta-pos { color: #6cc070; font-weight: 600; }
#recent-runs-table .delta-neg { color: #e08585; font-weight: 600; }
#recent-runs-table .mmr-delta-cell { white-space: nowrap; }
#recent-runs-table .mmr-delta-cell .rank-float { margin-left: 4px; }
#recent-runs-table .yes { color: #6cc070; font-weight: 600; }
#recent-runs-table .no { color: #e08585; font-weight: 600; }
#recent-runs-table .live {
  color: #f5c542; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(245, 197, 66, 0.12);
  font-size: 11px; letter-spacing: 0.5px;
}
#recent-runs-table tr.ongoing-row { background: rgba(245, 197, 66, 0.04); }
#recent-runs-table tr.ongoing-row:hover { background: rgba(245, 197, 66, 0.1); }
#recent-runs-table td.class-cell {
  font-weight: 600;
}