:root{
  --bg:#0b3d91; --header:#145da0; --white:#fff; --text:#111;
  --alt:#f3f6fb; --yes:#2e7d32; --no:#c62828;
  --gold:#ffd966; --silver:#e2e2e2; --bronze:#eab676;
  --shadow:0 6px 20px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0; font-family:Roboto, Arial, sans-serif; color:var(--text); background:#fff;}
.hero{background:var(--bg); color:var(--white); padding:16px 12px;}
.brand{max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:12px;}
.brand img{height:48px; width:auto; display:block;}
.titles h1{margin:0; font:700 22px/1.2 Montserrat, Arial, sans-serif;}
.titles .sub{margin:2px 0 0; opacity:.85}
.tabs{max-width:1200px; margin:10px auto 0; display:flex; gap:8px;}
.tab{background:rgba(255,255,255,.15); color:#fff; border:0; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700;}
.tab.active{background:#fff; color:#0b3d91;}
.wrap{max-width:1200px; margin:0 auto; padding:16px;}
.bar{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.status{font-size:14px; color:#333}
.table-wrap{overflow-x:auto; background:#fff; border-radius:10px; box-shadow:var(--shadow);}
table{width:100%; border-collapse:collapse;}
thead th{position:sticky; top:0; background:var(--header); color:var(--white); padding:10px 8px; text-align:center; font:700 13px/1.2 Montserrat, Arial, sans-serif;}
tbody td{padding:10px 8px; border-bottom:1px solid #dfe6ef; text-align:center; font-size:14px;}
tbody tr:nth-child(even){background:var(--alt);}
td.name{text-align:left; white-space:nowrap;}
.badge{display:inline-block; padding:4px 8px; border-radius:6px; color:#fff; font-weight:700;}
.paid-YES{background:var(--yes);} .paid-NO{background:var(--no);}
.podium-1 td{background:var(--gold) !important;}
.podium-2 td{background:var(--silver) !important;}
.podium-3 td{background:var(--bronze) !important;}
.foot{display:flex; gap:12px; margin-top:12px;}
.pill{background:#fff2cc; border:1px solid #f1e3a0; padding:8px 12px; border-radius:10px; font-weight:700;}
.panel{display:none;}
.panel.active{display:block;}
.h2h{margin:10px 0 14px; padding:10px 12px; border-radius:10px; border:1px solid #cfdaf0; background:#eaf1ff;}
.h2h strong{font-weight:800;}
.h2h.off{display:none;}
@media (max-width:900px){
  thead th{font-size:12px}
  tbody td{font-size:13px}
td.num { text-align: right; }

  td.name span{display:inline-block; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}
/* Buttons + table actions */
.table-actions{ display:flex; justify-content:flex-end; padding:8px; }
.btn{
  background:#f5f7fb; border:1px solid #cfd8ea; padding:6px 10px; border-radius:8px;
  font-weight:700; cursor:pointer;
}
.btn:focus{ outline:2px solid #0b3d91; outline-offset:2px; }

/* Captions */
caption{ text-align:left; padding:8px 10px; font-weight:700; color:#344; }

/* Right-align numeric cells (you already added td.num earlier) */
td.num { text-align:right; }

/* Rank movement arrows */
.delta{ margin-left:6px; font-weight:800; font-size:12px; vertical-align:middle; }
.rank-up{ color:#2e7d32; }   /* green */
.rank-down{ color:#c62828; } /* red */
.rank-same{ color:#777; }

/* Mobile: collapse optional columns when wrapper has .collapsed */
@media (max-width:900px){
  #mg-table-wrap.collapsed th.opt,
  #mg-table-wrap.collapsed td.opt{ display:none; }
  /* keep only the core columns visible in collapsed mode */
}

/* Make headers keyboard-focusable */
thead th:focus{ outline:2px solid #0b3d91; outline-offset:2px; }

/* --- Footer --- */
.site-footer{
  margin:24px auto 0; padding:16px 12px; max-width:1200px;
  border-top:1px solid #e2e8f0; background:#f7f9fc; color:#384457;
  border-radius:12px 12px 0 0;
}
.site-footer p{ margin:6px 0; }
.site-footer .tiny{ font-size:12px; opacity:.85; line-height:1.4; }
.site-footer a{ color:#0b3d91; text-decoration:underline; }
.page h2{ margin-top:18px; }
.page p, .page ul{ line-height:1.5; }
.page ul{ padding-left:18px; }