:root { --bg:#000; --card:#04121b; --group:#8dc63f; --accent:#8dc63f; --ink:#04131b; --soft:#14303f; --hover:#0b1d28; --hl:#0f2a3b; --line:#12232e; --text:#eef2f6; --muted:#8a99a6; --win:#8dc63f; --draw:#e0b23a; --loss:#d9423a; --live:#ff5a4f; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:inherit; text-decoration:none; }
img { vertical-align:middle; }
button { font:inherit; color:inherit; cursor:pointer; }
[hidden] { display:none !important; }
.wrap { max-width:1180px; margin:0 auto; padding:0 16px; }
.muted { color:var(--muted); } .pad { padding:16px; }

.topbar { background:#03121a; text-align:center; font-size:13px; padding:8px 12px; border-bottom:1px solid var(--line); }
.header { background:#061a24; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.header-in { display:flex; align-items:center; gap:20px; min-height:64px; }
.logo img { display:block; height:48px; width:auto; }
.logo { font-size:26px; font-weight:800; letter-spacing:.5px; color:var(--accent); }
.menu { display:flex; gap:6px; flex:1; }
.menu a { padding:20px 12px 17px; font-weight:700; border-bottom:3px solid transparent; }
.menu a.on { border-color:var(--accent); }
.tools button { background:none; border:1px solid var(--line); border-radius:8px; width:36px; height:36px; margin-left:6px; }
.burger { display:none; background:none; border:0; font-size:22px; }

.wrap.with-side { display:grid; grid-template-columns:240px 1fr; gap:24px; padding-top:20px; padding-bottom:30px; }
.wrap:not(.with-side) { padding-top:20px; padding-bottom:30px; }
.content { min-width:0; }
.side h3 { font-size:13px; letter-spacing:.08em; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.side ul { list-style:none; margin:0 0 18px; padding:0; }
.side li a, .side summary { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:14px; cursor:pointer; }
.side li a:hover, .side summary:hover { color:var(--accent); }
.side details ul { margin:0 0 6px 28px; }
.side summary { list-style:none; } .side summary::-webkit-details-marker { display:none; }

.panel { background:var(--card); border-radius:14px; padding:18px; }
.ph { margin:0 0 14px; font-size:20px; display:flex; align-items:center; gap:10px; }
.empty { color:var(--muted); padding:20px 4px; }

.datestrip { display:flex; gap:8px; justify-content:center; margin-bottom:18px; overflow-x:auto; }
.dpill { background:var(--soft); border-radius:999px; padding:8px 16px; text-align:center; min-width:64px; line-height:1.15; }
.dpill b { display:block; font-size:20px; font-weight:600; }
.dpill span { font-size:14px; }
.dpill.on { background:var(--accent); color:var(--ink); }
.filters { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.flt { background:none; border:0; border-bottom:3px solid var(--line); padding:10px 14px; font-weight:700; font-size:13px; }
.flt.on { border-color:var(--accent); }
#pick-date { margin-left:auto; background:var(--soft); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:6px 8px; color-scheme:dark; }

.lg { margin-bottom:6px; }
.lg-head { margin:10px 0 0; background:var(--group); color:var(--ink); border-radius:10px; padding:10px 12px; font-size:17px; display:flex; align-items:center; gap:10px; }
.fx { display:grid; grid-template-columns:34px 56px 1fr 70px 110px; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.fx:hover { background:var(--hover); }
.star { background:none; border:0; font-size:20px; color:var(--muted); padding:0; }
.star.on { color:#ffc83d; }
.fx-status { font-size:14px; } .is-live { color:var(--live); font-weight:700; }
.team { display:flex; align-items:center; gap:8px; font-size:14px; line-height:1.9; min-width:0; }
.team span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-score { text-align:right; font-size:14px; line-height:1.9; }
.fx-score b { display:inline-block; min-width:12px; } .ht { color:var(--muted); display:inline-block; min-width:26px; text-align:left; }
.fx-links { text-align:right; font-weight:600; }
.fx-links i { color:var(--line); margin:0 6px; font-style:normal; }
.fx-links a:hover { color:var(--accent); }

.mhead { background:var(--card); border-radius:14px; padding:16px; }
.crumb { font-weight:700; display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.crumb img { background:#fff; border-radius:50%; padding:2px; }
.mteams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; text-align:center; }
.mteam { display:flex; flex-direction:column; align-items:center; gap:8px; }
.mteam img { background:#fff; border-radius:10px; padding:6px; object-fit:contain; }
.mdate { font-size:18px; } .mscore { font-size:34px; font-weight:800; margin:6px 0; } .mstatus { min-height:1.2em; }
.tabs { display:flex; gap:10px; margin-top:18px; overflow-x:auto; border-top:1px solid var(--line); padding-top:12px; }
.tab { background:none; border:0; border-bottom:3px solid var(--line); padding:10px 18px; font-weight:700; font-size:13px; white-space:nowrap; }
.tab.on { border-color:var(--accent); }
.tabpanel { display:none; margin-top:16px; } .tabpanel.on { display:block; }
.panel .tabs { margin-top:0; border-top:0; padding-top:0; }
.sec { margin-bottom:22px; }
.sec-h { background:var(--soft); border-radius:10px; padding:12px; font-size:14px; margin:0 0 8px; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:8px 4px; font-size:16px; }
.kv span { color:var(--muted); font-size:15px; }
.pbar { display:flex; height:50px; border-radius:6px; overflow:hidden; font-weight:700; }
.pbar span { color:#fff; display:flex; align-items:center; justify-content:center; min-width:46px; }
.p1 { background:#265c66; } .px { background:#3a7a22; } .p2 { background:#7a3a1c; }
.odds { width:100%; border-collapse:collapse; text-align:center; }
.odds th { padding:8px; color:var(--muted); } .odds td { padding:10px 4px; } .odds td:first-child { text-align:left; }
.odds td span { display:inline-block; min-width:70px; padding:7px 10px; border:1px solid var(--line); border-radius:6px; font-weight:700; }
.events { list-style:none; margin:0; padding:0; }
.ev { display:flex; gap:10px; padding:8px 4px; border-bottom:1px solid var(--line); align-items:baseline; }
.ev-a { flex-direction:row-reverse; text-align:right; }
.ev-min { color:var(--muted); min-width:44px; }

.radar { max-width:520px; margin:0 auto 20px; }
.cmp { margin:12px 0; } .cmp-top { display:flex; justify-content:space-between; font-weight:700; font-size:14px; }
.cmp-bars { display:grid; grid-template-columns:1fr 1fr; gap:2px; height:12px; background:var(--hover); border-radius:6px; overflow:hidden; margin-top:4px; }
.half { display:flex; } .half.l { justify-content:flex-end; } .half i { display:block; height:100%; background:#e8ecf4; border-radius:6px; }
.half i.win { background:var(--win); }

.lineups { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.lu ul { list-style:none; padding:0; margin:0 0 12px; } .lu li { padding:5px 0; border-bottom:1px solid var(--line); }
.lu h4 { margin:0 0 4px; } .lu h5 { margin:12px 0 6px; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.num { display:inline-block; min-width:26px; color:var(--accent); font-weight:700; }

.h2h { display:grid; grid-template-columns:34px 60px 1fr 70px; gap:8px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line); }
.h2h:hover { background:var(--hover); } .h-teams span, .h-score span { display:block; line-height:1.9; } .h-score { text-align:right; }

.st { width:100%; border-collapse:collapse; margin-bottom:18px; font-size:14px; }
.st th { background:var(--soft); padding:10px 6px; text-align:center; font-weight:500; } .st td { padding:8px 6px; text-align:center; border-bottom:1px solid var(--line); }
.st .tl { text-align:left; } .st tr.hl td { background:var(--hl); }
.pos { display:inline-block; min-width:24px; padding:3px 0; border-radius:5px; background:var(--bg); }
.z-cl { background:#1f4b99; } .z-eur { background:#1b7aa8; } .z-conf { background:#2c7a45; } .z-rel { background:#7d1f2a; }
.last { white-space:nowrap; }
.f { display:inline-block; width:24px; margin-left:4px; padding:3px 0; border-radius:5px; font-style:normal; font-size:12px; color:#0a0f1a; }
.f-W { background:#7ee05a; } .f-D { background:#f4c542; } .f-L { background:#e0463c; color:#fff; }

.vtitle { margin:16px 0 8px; } .vwrap { position:relative; padding-top:56.25%; border-radius:10px; overflow:hidden; }
.vwrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.footer { border-top:1px solid var(--line); padding:24px 0 80px; color:var(--muted); font-size:13px; text-align:center; }
.resp { color:var(--text); font-weight:700; }
.chat { position:fixed; right:18px; bottom:18px; display:flex; align-items:center; gap:10px; z-index:30; }
.chat-bubble { background:#fff; color:#111; padding:8px 12px; border-radius:10px; font-size:14px; max-width:160px; }
.chat-btn { width:54px; height:54px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; font-size:26px; }
#toasts { position:fixed; left:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:50; }
.toast { background:var(--accent); color:var(--ink); border-radius:10px; padding:10px 14px; display:flex; flex-direction:column; box-shadow:0 6px 24px rgba(0,0,0,.5); }
.cookie { position:fixed; left:0; right:0; bottom:0; background:#020a10; border-top:1px solid var(--line); padding:12px 16px; display:flex; gap:12px; justify-content:center; align-items:center; z-index:40; font-size:13px; }
.cookie button { background:var(--accent); color:var(--ink); border:0; border-radius:8px; padding:6px 14px; font-weight:700; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:60; display:flex; align-items:flex-start; justify-content:center; padding:40px 12px; overflow:auto; }
.modal-box { background:var(--card); border-radius:12px; padding:22px; width:100%; max-width:600px; position:relative; }
.modal-box h2 { margin-top:0; } .modal-close { position:absolute; top:14px; right:14px; background:none; border:0; font-size:22px; }
.blk { display:block; border:0; border-top:1px solid var(--line); padding:14px 0; margin:0; }
.blk label { display:block; padding:3px 0; } .blk select { margin-top:8px; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:6px; max-width:100%; }

@media (max-width: 860px) {
  .burger { display:block; }
  .menu a { padding:20px 8px 17px; font-size:13px; }
  .wrap.with-side { grid-template-columns:1fr; }
  .side { display:none; } .side.open { display:block; background:var(--card); padding:14px; border-radius:12px; }
  .fx { grid-template-columns:30px 48px 1fr 56px; }
  .fx-links { grid-column:3 / 5; text-align:left; padding-bottom:2px; }
  .lineups { grid-template-columns:1fr; }
  .logo img { height:38px; } .header-in { gap:10px; }
  .st .last { display:none; }
}

.search { position:relative; flex:0 1 300px; min-width:0; }
.search input { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font:inherit; font-size:14px; }
.search input:focus { outline:2px solid var(--accent); border-color:transparent; }
.search-res { position:absolute; top:calc(100% + 6px); left:0; right:0; min-width:340px; max-height:70vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 36px rgba(0,0,0,.6); z-index:40; padding:6px; }
.search-res h4 { margin:8px 8px 4px; font-size:11px; letter-spacing:.08em; color:var(--muted); }
.sr { display:grid; grid-template-columns:56px 1fr; gap:8px; align-items:center; padding:8px; border-radius:8px; }
.sr:hover { background:var(--hover); }
.sr-st { font-size:13px; color:var(--muted); text-align:center; } .sr-st.is-live { color:var(--live); font-weight:700; }
.sr-tx b { display:block; font-size:14px; } .sr-tx small { color:var(--muted); font-size:12px; }
.sr-sc { display:none; } .sr-none { padding:12px; color:var(--muted); margin:0; }
@media (max-width: 860px) { .search { flex:1 1 auto; } .search-res { min-width:0; } .menu a { padding:20px 6px 17px; } .tools button { width:32px; margin-left:3px; } }

.mhead { background:#04131b; } .st th, .sec-h { color:var(--text); }
.f-W { background:#8dc63f; }