/* ═══════════════════════════════════════════════
   Design tokens
   ═══════════════════════════════════════════════ */
:root {
  --bg:          #0d0f14;
  --bg-card:     #12141b;
  --bg-row:      #14161f;
  --bg-row-alt:  #11131c;
  --accent:      #d4cb00;
  --accent-dim:  rgba(212,203,0,.15);
  --accent-glow: rgba(212,203,0,.45);
  --text:        #ccc;
  --text-dim:    #555;
  --border:      rgba(255,255,255,.06);
  --border-hard: rgba(255,255,255,.12);

  /* Muted score palette */
  --c100-bg: rgba(70,140,85,.10); --c100: #4d9960;
  --chi-bg:  rgba(75,130,75,.08); --chi:  #5d9c5b;
  --cmi-bg:  rgba(160,150,30,.07);--cmi:  #a8a028;
  --clo-bg:  rgba(180,120,40,.07);--clo:  #b8842e;
  --cba-bg:  rgba(160,55,55,.07); --cba:  #b04545;
  --cnu-bg:  rgba(255,255,255,.02);--cnu: #2a2d3a;
}

/* ═══════════════════════════════════════════════
   Light theme overrides
   ═══════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:          #f0f1f4;
  --bg-card:     #ffffff;
  --bg-row:      #f7f8fa;
  --bg-row-alt:  #eef0f3;
  --accent:      #a89800;
  --accent-dim:  rgba(168,152,0,.12);
  --accent-glow: rgba(168,152,0,.30);
  --text:        #333;
  --text-dim:    #888;
  --border:      rgba(0,0,0,.08);
  --border-hard: rgba(0,0,0,.14);

  --c100-bg: rgba(40,130,60,.10); --c100: #1e7a38;
  --chi-bg:  rgba(40,120,50,.08); --chi:  #3a8540;
  --cmi-bg:  rgba(140,130,20,.10);--cmi:  #7a7018;
  --clo-bg:  rgba(160,100,30,.10);--clo:  #8a6020;
  --cba-bg:  rgba(180,50,50,.08); --cba:  #b03030;
  --cnu-bg:  rgba(0,0,0,.04);     --cnu: #c0c4d0;
}

[data-theme="light"] body { color: var(--text); }

[data-theme="light"] .data-table th { color: rgba(0,0,0,.5); }
[data-theme="light"] .data-table th.sortable:hover { color: rgba(0,0,0,.75); }

[data-theme="light"] .data-table tbody tr:hover { background: rgba(0,0,0,.04) !important; }

[data-theme="light"] .overview-table tbody tr:hover .col-id-val,
[data-theme="light"] .overview-table tbody tr:hover .col-name,
[data-theme="light"] .scores-table tbody tr:hover .col-id-val,
[data-theme="light"] .scores-table tbody tr:hover .col-name { background: rgba(230,232,238,1) !important; }

[data-theme="light"] .logo-name { color: #222; }
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,.35); }
[data-theme="light"] .modal { box-shadow: 0 8px 40px rgba(0,0,0,.15); }
[data-theme="light"] .modal h2 { color: #222; }
[data-theme="light"] .modal-close:hover { color: #000; }

[data-theme="light"] #month-select option { background: #fff; }

[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(168,152,0,.5); }

[data-theme="light"] .score-row { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }

[data-theme="light"] .tab:hover { color: #333; }
[data-theme="light"] .tab.active { color: #111; background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); }

[data-theme="light"] .header-badge { color: #fff; }

[data-theme="light"] .scores-table th.col-day.today { color: #000; font-weight: 900; }
[data-theme="light"] .today-col,
[data-theme="light"] .scores-table th.col-day.today {
  border-left-color: rgba(0,0,0,.4);
  border-right-color: rgba(0,0,0,.4);
}

[data-theme="light"] .btn-toggle-months,
[data-theme="light"] .btn-export {
  color: #6b6000;
  background: rgba(168,152,0,.18);
  border-color: rgba(140,126,0,.35);
}
[data-theme="light"] .btn-toggle-months:hover,
[data-theme="light"] .btn-export:hover {
  background: rgba(168,152,0,.30);
  border-color: rgba(140,126,0,.50);
}

/* ═══════════════════════════════════════════════ Scrollbar ═══ */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(212,203,0,.35); }
::-webkit-scrollbar-corner { background: var(--bg); }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.10) var(--bg);
}

/* ═══════════════════════════════════════════════ Reset ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

#app {
  max-width: 1600px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════ HEADER ═══ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 2px solid var(--accent);
  padding: 10px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  filter: drop-shadow(0 2px 12px rgba(212,203,0,.15));
}

/* Corner decorators */
.corner {
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--accent);
  border-style: solid;
}
.corner-tl { top:0; left:0;  border-width:2px 0 0 2px; }
.corner-tr { top:0; right:0; border-width:2px 2px 0 0; }

/* Brand */
.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}
.logo-icon svg { display: block; }
.logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.logo-name {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.logo-sub {
  font-size: clamp(5px, 1.5vw, 7px);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 5px;
  text-transform: uppercase;
  padding-left: 2px;
}
.header-badge {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: clamp(8px, 2vw, 10px);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--bg);
  background: var(--accent);
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  box-shadow: 0 0 8px var(--accent-glow);
  flex-shrink: 0;
}
.last-updated {
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
  line-height: 1.5;
  flex-shrink: 0;
  max-width: 200px;
}

/* Theme toggle */
.btn-theme {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.3);
  color: #111;
  width: 30px; height: 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.btn-theme:hover { background: #fff; }
[data-theme="light"] .btn-theme {
  background: rgba(0,0,0,.75);
  border-color: rgba(0,0,0,.3);
  color: #fff;
}
[data-theme="light"] .btn-theme:hover { background: rgba(0,0,0,.9); }

/* ═══════════════════════════════════════════════ TOOLBAR ═══ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: sticky;
  top: 60px;
  z-index: 90;
}

/* Tabs */
.tabs { display: flex; gap: 4px; }
.tab {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
}
.tab:hover { color: var(--text); border-color: var(--border-hard); }
.tab.active {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
}

/* Month nav */
.month-nav { display: flex; align-items: center; gap: 6px; }
.btn-icon {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-hard);
  color: var(--text-dim);
  width: 30px; height: 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.btn-icon:hover { background: rgba(255,255,255,.08); color: var(--text); }
.btn-icon:disabled { opacity: .3; cursor: default; }

#month-select {
  background: var(--bg-row);
  border: 1px solid var(--border-hard);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  min-width: 140px;
}
#month-select option { background: var(--bg); }

/* Search */
.search-wrap { flex: 1; min-width: 180px; max-width: 320px; }
.search-input {
  width: 100%;
  background: var(--bg-row);
  border: 1px solid var(--border-hard);
  border-radius: 4px;
  padding: 6px 10px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.search-input:focus { border-color: rgba(255,255,255,.25); }
.search-input::placeholder { color: var(--text-dim); }

/* Export button */
.btn-export {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(212,203,0,.2);
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-export:hover {
  background: rgba(212,203,0,.25);
  border-color: rgba(212,203,0,.4);
}

/* ═══════════════════════════════════════════════ TAB CONTENT ═══ */
.tab-content { padding: 12px 0 24px; }

/* ═══════════════════════════════════════════════ SUMMARY BAR ═══ */
.summary {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  flex-wrap: wrap;
}
.bdg {
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  border: 1px solid transparent;
}
.bdg-100  { background: var(--c100-bg); color: var(--c100); border-color: rgba(77,153,96,.12); }
.bdg-high { background: var(--chi-bg);  color: var(--chi);  border-color: rgba(93,156,91,.12); }
.bdg-mid  { background: var(--cmi-bg);  color: var(--cmi);  border-color: rgba(168,160,40,.12); }
.bdg-low  { background: var(--clo-bg);  color: var(--clo);  border-color: rgba(184,132,46,.12); }
.bdg-bad  { background: var(--cba-bg);  color: var(--cba);  border-color: rgba(176,69,69,.12); }

/* ═══════════════════════════════════════════════ OVERVIEW TOGGLE ═══ */
.overview-toggle-wrap {
  padding: 0 16px 12px;
}
.btn-toggle-months {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(212,203,0,.2);
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
}
.btn-toggle-months:hover {
  background: rgba(212,203,0,.25);
  border-color: rgba(212,203,0,.4);
}

/* ═══════════════════════════════════════════════ TABLE WRAPPER ═══ */
.table-wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 16px;
  max-height: calc(100vh - 140px);
}

.scroll-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 0 8px;
  letter-spacing: 2px;
}

/* ═══════════════════════════════════════════════ BASE TABLE ═══ */
.data-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

.data-table thead tr {
  background: var(--bg-card);
}
.data-table th {
  padding: 10px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  text-align: center;
  border-bottom: 1px solid var(--border-hard);
  white-space: nowrap;
  user-select: none;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 10;
}
.data-table th.col-name { text-align: left; padding-left: 14px; }

/* Sorting */
.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { color: rgba(255,255,255,.65); }
.data-table th.sort-asc::after  { content: " \25B2"; font-size: 9px; opacity: .6; }
.data-table th.sort-desc::after { content: " \25BC"; font-size: 9px; opacity: .6; }

.data-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .1s;
}
.data-table tbody tr:nth-child(odd)  { background: var(--bg-row); }
.data-table tbody tr:nth-child(even) { background: var(--bg-row-alt); }
.data-table tbody tr:hover { background: rgba(255,255,255,.035) !important; }

.data-table td {
  padding: 6px 10px;
  text-align: center;
  font-size: 13px;
  height: 36px;
}

/* ═══════════════════════════════════════════════ STICKY COLUMNS ═══ */
.overview-table th.col-id,
.scores-table th.col-id {
  position: sticky;
  left: 0;
  top: 0;
  min-width: 60px;
  width: 60px;
  background: var(--bg-card);
  z-index: 31;
  border-right: none;
  font-size: 10px;
}
.overview-table th.col-name,
.scores-table th.col-name {
  position: sticky;
  left: 59px;
  top: 0;
  min-width: 200px;
  background: var(--bg-card);
  z-index: 30;
  border-right: 1px solid var(--border-hard);
  box-shadow: 4px 0 8px rgba(0,0,0,.25);
}
.overview-table th.col-avg,
.scores-table th.col-avg {
  min-width: 60px;
}

.overview-table td.col-id-val,
.scores-table td.col-id-val {
  position: sticky;
  left: 0;
  z-index: 6;
  text-align: center;
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  width: 60px;
  min-width: 60px;
  border-right: none;
}
.overview-table td.col-name,
.scores-table td.col-name {
  position: sticky;
  left: 59px;
  z-index: 5;
  text-align: left;
  padding-left: 14px;
  font-size: 13px;
  font-weight: 500;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 8px rgba(0,0,0,.25);
}

/* Explicit backgrounds for sticky cells — prevents transparency on scroll */
.overview-table tbody tr:nth-child(odd) .col-id-val,
.overview-table tbody tr:nth-child(odd) .col-name,
.scores-table tbody tr:nth-child(odd) .col-id-val,
.scores-table tbody tr:nth-child(odd) .col-name { background: var(--bg-row); }

.overview-table tbody tr:nth-child(even) .col-id-val,
.overview-table tbody tr:nth-child(even) .col-name,
.scores-table tbody tr:nth-child(even) .col-id-val,
.scores-table tbody tr:nth-child(even) .col-name { background: var(--bg-row-alt); }

.overview-table tbody tr:hover .col-id-val,
.overview-table tbody tr:hover .col-name,
.scores-table tbody tr:hover .col-id-val,
.scores-table tbody tr:hover .col-name { background: rgba(30,32,42,1) !important; }

/* Average row in overview */
.avg-row { background: var(--bg-card) !important; border-bottom: 2px solid var(--border-hard) !important; }
.avg-row .col-id-val,
.avg-row .col-name { background: var(--bg-card) !important; }
.avg-row td { font-weight: 700; font-size: 13px; }
.avg-row .avg-label { font-style: italic; color: var(--text-dim); }
.avg-row .avg-cell { font-weight: 800; }

/* Avg column */
.overview-table td.col-avg,
.scores-table td.col-avg {
  font-weight: 800;
  font-size: 14px;
  border-right: 1px solid var(--border);
}

/* Day / month data columns */
.scores-table th.col-day {
  min-width: 34px;
  width: 34px;
}
.scores-table th.col-day.today { color: rgba(255,255,255,.7); }

/* ═══════════════════════════════════════════════ SCORE CELLS ═══ */
.score-cell { cursor: pointer; font-weight: 700; transition: filter .1s; }
.score-cell:hover { filter: brightness(1.15); }

.s-100  { background: var(--c100-bg); color: var(--c100); }
.s-high { background: var(--chi-bg);  color: var(--chi); }
.s-mid  { background: var(--cmi-bg);  color: var(--cmi); }
.s-low  { background: var(--clo-bg);  color: var(--clo); }
.s-bad  { background: var(--cba-bg);  color: var(--cba); }
.s-null { background: var(--cnu-bg);  color: var(--cnu); cursor: default; }

.today-col {
  border-left: 2px solid rgba(255,255,255,.15);
  border-right: 2px solid rgba(255,255,255,.15);
}
.scores-table th.col-day.today {
  border-left: 2px solid rgba(255,255,255,.15);
  border-right: 2px solid rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════════════ LOADING / EMPTY ═══ */
.hidden { display: none !important; }

.loading-spinner {
  display: flex; flex-direction: column; align-items: center;
  padding: 60px; gap: 16px; color: var(--text-dim);
}
.spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--border-hard);
  border-top-color: var(--text-dim);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center; padding: 60px; color: var(--text-dim);
  font-size: 14px; line-height: 1.8;
}

/* ═══════════════════════════════════════════════ MODAL ═══ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-hard);
  border-radius: 8px;
  padding: 24px 28px;
  min-width: 340px;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--text-dim); line-height: 1;
  padding: 4px 8px; border-radius: 4px;
  transition: color .15s;
}
.modal-close:hover { color: #fff; }
.modal h2 {
  font-size: 17px; font-weight: 700;
  color: #fff; margin-bottom: 4px; padding-right: 30px;
  letter-spacing: .3px;
}
.modal-date { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }

.modal-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 17px; font-weight: 800;
  border: 1px solid transparent;
}
.modal-total.s-100  { background: var(--c100-bg); color: var(--c100); border-color: rgba(77,153,96,.2); }
.modal-total.s-high { background: var(--chi-bg);  color: var(--chi);  border-color: rgba(93,156,91,.2); }
.modal-total.s-mid  { background: var(--cmi-bg);  color: var(--cmi);  border-color: rgba(168,160,40,.2); }
.modal-total.s-low  { background: var(--clo-bg);  color: var(--clo);  border-color: rgba(184,132,46,.2); }
.modal-total.s-bad  { background: var(--cba-bg);  color: var(--cba);  border-color: rgba(176,69,69,.2); }

.modal-section { margin-bottom: 14px; }
.modal-section h3 {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-dim);
  margin-bottom: 6px; font-weight: 700;
}

.score-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 4px; margin-bottom: 3px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
}
.score-row-label { font-size: 14px; font-weight: 500; }
.score-row-right { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.score-row-errors {
  font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 3px;
}
.score-row-errors.err-ok {
  color: var(--c100); background: var(--c100-bg);
  border: 1px solid rgba(77,153,96,.2);
}
.score-row-errors.err-bad {
  color: var(--cba); background: var(--cba-bg);
  border: 1px solid rgba(176,69,69,.2);
}
.score-row-pts { font-weight: 800; min-width: 52px; text-align: right; font-size: 14px; }

.pts-full { color: var(--c100); }
.pts-ok   { color: var(--cmi); }
.pts-bad  { color: var(--cba); }

/* Host table in modal */
.host-table-wrap {
  overflow-x: auto; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.06);
}
.host-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.host-table thead tr { background: rgba(255,255,255,.03); }
.host-table th {
  padding: 7px 10px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
}
.host-table th:first-child { text-align: left; }
.host-table td { padding: 6px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.03); }
.host-table tr:last-child td { border-bottom: none; }
.host-table tr:hover td { background: rgba(255,255,255,.02); }
td.host-name { text-align: left; font-weight: 500; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td.host-bad { color: var(--cba); font-weight: 700; }
td.host-ok  { color: var(--c100); }

/* ═══════════════════════════════════════════════ LEGEND ═══ */
.legend-wrap {
  padding: 16px 16px 32px;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}
.legend-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
}
.legend-title {
  font-size: 16px; font-weight: 700;
  color: var(--accent); letter-spacing: .5px;
  margin-bottom: 10px; text-transform: uppercase;
}
.legend-desc {
  font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 12px;
}
.legend-desc code {
  background: rgba(255,255,255,.06); border-radius: 3px;
  padding: 2px 6px; font-family: monospace; font-size: 13px;
}
.legend-scale {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.legend-badge {
  display: inline-block; padding: 5px 12px;
  border-radius: 4px; font-size: 13px; font-weight: 700;
}
.legend-table {
  width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px;
}
.legend-table thead tr {
  border-bottom: 1px solid var(--border-hard);
}
.legend-table th {
  text-align: left; padding: 8px 10px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-dim); font-weight: 700;
}
.legend-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top; line-height: 1.5;
}
.legend-table td em { color: var(--text-dim); font-style: normal; }
.legend-table tr:last-child td { border-bottom: none; }
.legend-warn {
  background: rgba(176,69,69,.08);
  border-color: rgba(176,69,69,.25);
  color: #d07070; font-size: 14px; line-height: 1.6;
}

/* ═══════════════════════════════════════════════ RESPONSIVE ═══ */
@media (max-width: 600px) {
  .site-header { padding: 8px 12px; }
  .logo-icon svg { height: 28px; }
  .header-badge { display: none; }
  .last-updated { display: none; }
  .toolbar { top: 52px; padding: 8px 12px; gap: 8px; }
  .tab { padding: 5px 10px; font-size: 11px; }
  .table-wrapper { padding: 0 0 16px; }
  .summary { padding: 8px 12px; }
  .modal { padding: 18px 16px; min-width: unset; }
  .data-table td { padding: 5px 6px; font-size: 12px; height: 32px; }
  .data-table th { padding: 8px 6px; font-size: 10px; }
  .overview-table th.col-id,
  .scores-table th.col-id { min-width: 50px; width: 50px; }
  .overview-table th.col-name,
  .scores-table th.col-name { min-width: 130px; left: 49px; }
  .overview-table td.col-id-val,
  .scores-table td.col-id-val { min-width: 50px; width: 50px; }
  .overview-table td.col-name,
  .scores-table td.col-name { left: 49px; max-width: 130px; }
  .scores-table th.col-day { min-width: 28px; width: 28px; }
}