*{box-sizing:border-box}
:root{
  --bg:#28262c;
  --top:#35323a;
  --bottom:#242229;
  --line:rgba(255,255,255,.09);
  --text:#fff;
  --muted:rgba(255,255,255,.58);
  --gold:#f4cb50;
  --silver:#e3e5e9;
  --bronze:#d48746;
}
html,body{margin:0;padding:0;background:transparent}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);overflow-x:hidden}
.wrap{width:100%;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.panel{
  width:100%;margin:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:
    radial-gradient(circle at 8% 0%,rgba(255,255,255,.07),transparent 28%),
    linear-gradient(145deg,var(--top),var(--bg) 58%,var(--bottom));
  box-shadow:0 12px 30px rgba(0,0,0,.25)
}
.accent{height:5px;background:linear-gradient(90deg,var(--gold),#dddfe4,var(--bronze))}
header{text-align:center;padding:21px 16px 17px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.25em;color:rgba(255,255,255,.42);margin-bottom:8px}
h1,h2{margin:0;line-height:1.04;letter-spacing:-.038em}
h1{font-size:clamp(34px,5.1vw,48px)}
h2{font-size:clamp(28px,4.3vw,36px)}
.subtitle{margin-top:9px;color:var(--muted);font-size:18px}

.medals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 16px 16px}
.medals article{
  min-width:0;text-align:center;
  padding:18px 10px 16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.035)
}
.icon{font-size:30px}
.label{margin-top:7px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.count{font-size:66px;font-weight:850;line-height:1;margin:10px 0 14px}
.gold{color:var(--gold)}.silver{color:var(--silver)}.bronze{color:var(--bronze)}
.latest{padding-top:13px;border-top:1px solid rgba(255,255,255,.08)}
.latest span{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.person-row{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-top:10px;min-width:0;text-align:left}
.avatar{
  width:64px;height:64px;border-radius:50%;flex:0 0 64px;overflow:hidden;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.13);
  color:#fff;font-size:18px;font-weight:900;line-height:1;text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.22)
}
.avatar img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.latest b{
  display:block;
  font-size:15px;
  line-height:1.18;
  color:rgba(255,255,255,.94);
  overflow-wrap:anywhere;
}

.total{display:flex;align-items:center;justify-content:space-between;margin:0 16px 16px;padding:16px 20px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.14)}
.total b,.total span{display:block}.total b{font-size:22px}.total span{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.total strong{font-size:68px;line-height:1}

.history header{padding:17px 16px 13px}
.table-wrap{
  margin:0 16px 16px;
  height:400px;max-height:400px;
  overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--line);
  border-radius:17px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent;
}
.table-wrap::-webkit-scrollbar{width:8px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:999px}
table{width:100%;border-collapse:collapse;table-layout:fixed;background:rgba(255,255,255,.025)}
th,td{text-align:center;border-right:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
th:last-child,td:last-child{border-right:0}
th{position:sticky;top:0;z-index:2;padding:11px 4px;background:#302e35;color:rgba(255,255,255,.55);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
td{padding:11px 4px;font-size:15px;font-weight:700;color:rgba(255,255,255,.9)}
tbody tr:last-child td{border-bottom:0}
td:nth-child(2){color:var(--gold)}
td:nth-child(3){color:var(--silver)}
td:nth-child(4){color:var(--bronze)}

@media(max-width:720px){
  header{padding:18px 12px 14px}
  .eyebrow{font-size:11px}
  h1{font-size:clamp(31px,6.3vw,42px)}
  .subtitle{font-size:16px}
  .medals{gap:9px;padding:0 10px 10px}
  .medals article{padding:14px 6px 12px;border-radius:17px}
  .count{font-size:54px}
  .avatar{width:50px;height:50px;flex-basis:50px}
  .latest b{font-size:13px}
  .total{margin:0 10px 10px}
  .total b{font-size:18px}
  .total strong{font-size:56px}
}
@media(max-width:520px){
  .panel{border-radius:18px}.wrap{gap:8px}
  header{padding:13px 8px 11px}
  .eyebrow{font-size:9px;margin-bottom:5px}
  h1{font-size:clamp(27px,8vw,34px)}
  h2{font-size:clamp(23px,6.8vw,29px)}
  .subtitle{font-size:14px;margin-top:6px}
  .medals{gap:6px;padding:0 7px 7px}
  .medals article{padding:10px 3px 8px;border-radius:14px}
  .icon{font-size:23px}.label{font-size:9px}.count{font-size:40px;margin:6px 0 8px}
  .latest{padding-top:8px}.latest span{font-size:8px}
  .person-row{gap:6px;margin-top:6px;justify-content:center;text-align:center;flex-direction:column}
  .avatar{width:40px;height:40px;flex-basis:40px;font-size:12px}
  .latest b{font-size:10px;line-height:1.1}
  .total{margin:0 7px 7px;padding:11px 12px}
  .total b{font-size:15px}.total span{font-size:9px}.total strong{font-size:42px}
  .history header{padding:11px 8px 9px}
  .table-wrap{margin:0 7px 7px;height:326px;max-height:326px}
  th{padding:7px 2px;font-size:7px}
  td{padding:7px 2px;font-size:10px}
}