:root{
  --navy:#0c0a2e;
  --navy-2:#161348;
  --gold:#f5c518;
  --gold-2:#ffe58a;
  --bg:#f3f1ec;
  --paper:#fffcf7;
  --ink:#14121f;
  --mute:#6b6680;
  --line:#e6e1d6;
  --live:#e10600;
  --next:#b15b00;
  --ok:#0b7a45;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--bg);color:var(--ink)}
body{font-family:"IBM Plex Sans",system-ui,sans-serif;padding-bottom:88px}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
img{max-width:100%;display:block}

.top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  background:var(--navy);color:#fff;
  border-bottom:3px solid var(--gold);
}
.brand{display:flex;align-items:center;gap:12px}
.mark{
  width:38px;height:38px;border-radius:8px;
  background:var(--gold);color:var(--navy);
  display:grid;place-items:center;
  font-family:Syne,sans-serif;font-weight:800;font-size:18px;
}
.brand h1{font-family:Syne,sans-serif;font-size:18px;letter-spacing:.12em;font-weight:800;line-height:1}
.brand small{display:block;color:var(--gold);letter-spacing:.16em;font-size:8px;margin-top:4px}
.issue{
  background:var(--gold);color:var(--navy);
  font-size:10px;font-weight:800;letter-spacing:.08em;
  padding:9px 12px;border-radius:999px;
}

.hero{background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#fff;padding:8px 20px 22px}
.desk{display:inline-block;background:var(--gold);color:var(--navy);font-size:10px;font-weight:800;letter-spacing:.08em;padding:6px 9px;margin-bottom:10px}
.hero h2{font-family:Syne,sans-serif;font-size:28px;letter-spacing:-.03em;margin:6px 0 12px}
.hero p{color:#c9c6d8;font-size:14px;line-height:1.5;max-width:720px}
.days{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.day{
  min-width:68px;border:1px solid #3d3a68;border-radius:14px;padding:8px 10px;
  color:#ddd;text-align:left;
}
.day b{display:block;font-family:Syne,sans-serif;font-size:20px}
.day span{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#aaa}
.day em{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-style:normal;margin-top:2px}
.day.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.day.on span,.day.on em{color:var(--navy)}

.wrap{max-width:860px;margin:0 auto;padding:18px 16px 40px}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{padding:8px 13px;font-size:12px;font-weight:650;color:var(--mute)}
.seg button.on{background:var(--navy);color:#fff}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:7px 12px;font-size:13px;font-weight:600;
}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px;margin:12px 0}
.kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}

.strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.live-card{
  flex:0 0 220px;background:#fff;border:1px solid #f0c9c9;border-radius:16px;padding:12px;
}
.live-card strong{display:block;font-family:Syne,sans-serif;font-size:26px;margin:6px 0 2px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:6px;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.35}}

.match{display:block;padding:14px 4px;border-bottom:1px solid var(--line)}
.match:last-child{border-bottom:0}
.line{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.line .a,.line .b{font-weight:700;font-size:16px}
.line .b{text-align:right}
.score{font-family:Syne,sans-serif;font-size:28px;letter-spacing:-.04em;min-width:64px;text-align:center}
.games{color:var(--mute);font-size:13px;margin-top:4px}
.meta{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;color:var(--mute)}
.st{font-weight:800;letter-spacing:.08em;font-size:10px}
.st.LIVE{color:var(--live)}
.st.NEXT{color:var(--next)}
.st.FT{color:var(--mute)}
.pill{border:1px solid var(--line);border-radius:999px;padding:1px 7px;font-size:10px;font-weight:700;letter-spacing:.04em}

.section{margin-top:16px}
.section h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}

nav.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--navy);border-top:3px solid var(--gold);
  display:grid;grid-template-columns:repeat(4,1fr);
}
nav.tabbar a{color:#8b88a8;text-align:center;padding:12px 4px 16px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
nav.tabbar a.on{color:var(--gold)}

.match-hero{padding:28px 8px 8px;text-align:center}
.match-hero .comp{letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--mute);font-weight:800}
.match-hero .names{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;margin:16px 0}
.match-hero h2{font-family:Syne,sans-serif;font-size:26px;letter-spacing:-.03em}
.match-hero .big{font-family:Syne,sans-serif;font-size:72px;line-height:.9;letter-spacing:-.05em}
.gamepills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.gamepills span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:13px;font-weight:650}
.watchbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:11px 14px;border-radius:12px;font-size:12px;font-weight:800;letter-spacing:.06em}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.updated{text-align:center;color:var(--mute);font-size:12px;margin-top:10px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.story{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:180px}
.story .ph{height:110px;background:linear-gradient(135deg,var(--navy),#3b2f7a)}
.story .body{padding:14px}
.story .body small{letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:800;color:var(--mute)}
.story h3{font-family:Syne,sans-serif;font-size:18px;margin:6px 0}
.cover{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;min-height:240px}
.cover .ph{height:auto;min-height:240px;display:flex;align-end;padding:20px;color:#fff}
.cover h3{font-size:28px;color:#fff}

.product{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.product .ph{width:110px;height:90px;border-radius:14px;background:#ece8dc}
.product h3{font-family:Syne,sans-serif;font-size:18px}
.price{font-family:Syne,sans-serif;font-size:20px}

.stack{display:flex;flex-direction:column;gap:8px}
.empty{color:var(--mute);padding:20px 0}

.desk-row{display:grid;grid-template-columns:1fr 80px 1fr 90px 1fr 1fr auto;gap:6px;align-items:center;margin:8px 0;font-size:12px}
.desk-row input,.desk-row select, .field{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff}
@media(max-width:800px){
  .grid,.cover{grid-template-columns:1fr}
  .desk-row{grid-template-columns:1fr 1fr}
  .match-hero .big{font-size:56px}
  .product{grid-template-columns:88px 1fr}
  .price{grid-column:2}
}

.comp-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;margin:12px 0;overflow:hidden}
.comp-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#f7f4ee;border-bottom:1px solid var(--line)}
.comp-head h3{font-family:Syne,sans-serif;font-size:16px;letter-spacing:-.02em}
.comp-head span{color:var(--mute);font-size:12px}
.comp-head .livecount{color:var(--live);font-weight:800;font-size:11px;letter-spacing:.08em}
.match{padding:10px 14px}
.line{grid-template-columns:54px 1fr auto;text-align:left}
.line .a,.line .b{font-size:15px;font-weight:650}
.line .b{text-align:left;color:var(--mute);font-weight:500;grid-column:2}
.scorecol{text-align:right;font-family:Syne,sans-serif;font-size:20px;min-width:42px}
.statuscol{font-size:10px;font-weight:800;letter-spacing:.06em;padding-top:3px}
.pair{display:flex;flex-direction:column;gap:2px}

.scorecard{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.scorecard th{text-align:left;color:var(--mute);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--line)}
.scorecard td{padding:8px;border-bottom:1px solid var(--line)}
.scorecard tr.live td{color:var(--live);font-weight:700}