:root{
  --bg:#07121f; --panel:#0e1d2c; --line:#203447; --text:#f7f9fb;
  --muted:#9fb0c0; --accent:#d71920; --gold:#f0c24b;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f6f8;color:#17202a}
.wrap{width:min(1180px,92%);margin:auto}
.hero{background:linear-gradient(135deg,#07121f,#102b43);color:var(--text);padding:34px 0 48px;border-bottom:4px solid var(--accent)}
.brand{font-weight:900;letter-spacing:1px;font-size:22px}
.brand span{color:var(--accent)}
.hero h1{font-size:clamp(34px,6vw,64px);margin:35px 0 10px}
.hero p{color:#c4d1dc;max-width:760px;font-size:18px;line-height:1.55}
.stats{display:flex;gap:18px;margin-top:32px;flex-wrap:wrap}
.stats div{background:rgba(255,255,255,.07);padding:16px 24px;border:1px solid rgba(255,255,255,.1);border-radius:12px;min-width:135px}
.stats strong{display:block;font-size:28px;color:var(--gold)}
.stats span{color:#cbd6df;font-size:13px}
main{padding:34px 0 60px}
.controls{display:flex;gap:12px;margin-bottom:30px;flex-wrap:wrap}
.controls input,.controls select{padding:13px 14px;border:1px solid #cfd8df;border-radius:10px;background:white;font-size:15px}
.controls input{flex:1;min-width:260px}
.controls select{min-width:210px}
h2{margin:24px 0 16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{background:white;border-radius:14px;padding:18px;box-shadow:0 3px 16px rgba(0,0,0,.07);border-top:4px solid var(--accent)}
.card .sport{font-size:12px;color:#6d7d8b;text-transform:uppercase;font-weight:700}
.card h3{margin:8px 0 6px}
.card .champ{font-size:20px;font-weight:800}
.card .season{color:#667789;margin-top:8px}
.section-head{display:flex;align-items:end;justify-content:space-between;margin-top:34px}
#resultCount{color:#758493;font-size:14px}
.table-wrap{overflow:auto;background:white;border-radius:14px;box-shadow:0 3px 18px rgba(0,0,0,.06)}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{text-align:left;padding:14px;border-bottom:1px solid #edf0f2}
th{background:#0c1d2b;color:#fff;font-size:13px}
tbody tr:hover{background:#f8fafb}
footer{background:#07121f;color:#9fb0c0;padding:26px 0}
@media(max-width:650px){.hero{padding-top:24px}.stats div{flex:1}.section-head{align-items:start;gap:10px;flex-direction:column}}