:root { --bg:#f7f9fc; --panel:#ffffff; --muted:#6b778c; --accent:#2a7df7; --border:#e5eaf0; --text:#0c1520; --red:#ff6b6b; --blue:#2a7df7; --orange:#ff7a00; }
* { box-sizing: border-box }
html,body { height: 100% }
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none }
img { max-width: 100%; height: auto; display: block }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px }
.btn { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; font-weight:700; background: var(--accent); color:#fff; border: 1px solid transparent }
.btn.secondary { background:#f4f7fb; color: var(--text); border:1px solid var(--border) }
.btn.warn { background: var(--orange); color:#fff }
.topbar { position: sticky; top:0; z-index: 40; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 4px 10px rgba(17,24,39,.06) }
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: 10px 20px; display:flex; align-items:center; justify-content:space-between }
.menu-btn { display:none }
.brand { font-weight: 800; letter-spacing: 0.2px }
.announcement { max-width: 1280px; margin: 10px auto; background: var(--blue); color: #fff; padding: 8px 16px; border-radius: 8px; font-weight: 600; }
.app-grid { max-width: 1280px; margin: 0 auto; display:grid; grid-template-columns: 240px 1fr 340px; gap: 16px; padding: 16px 20px }
@media (max-width: 1024px){ .app-grid { grid-template-columns: 200px 1fr } }
@media (max-width: 860px){
  .app-grid { grid-template-columns: 1fr }
  .rightbar { display: none }
  .topbar-inner { padding: 8px 12px }
  .menu-btn { display:inline-flex }
  .tb-right .btn:not(.menu-btn) { display:none }
}
.sidebar .side-group { background: #fff; border:1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px }
.side-btn { display:block; width:100%; text-align:left; padding:12px 14px; border:1px solid var(--border); border-radius: 10px; margin-bottom:8px; background:#fff; font-weight:700 }
.side-btn.active { border-color: var(--blue); color: var(--blue); }
.side-title { font-weight:700; margin: 4px 0 8px; }
.side-list { display:grid; gap:8px }
.side-item { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius: 10px; background:#f7f9fc; border:1px solid var(--border); }
.side-item.active { background:#e9f2ff; border-color:#cfe2ff }
.side-item .icon { margin-right:8px }
.side-item .count { background:#fff; border:1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-size: .85rem }
.content { display:block }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(12,21,32,.35); display:none }
.sidebar { position: relative }
@media (max-width: 860px){
  .sidebar { position: fixed; top: 56px; left: 0; height: calc(100vh - 56px); width: 82%; max-width: 320px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 10px 30px rgba(17,24,39,.15); z-index: 60; overflow-y: auto }
  .sidebar.open { transform: translateX(0) }
  .sidebar-backdrop.show { display:block }
}
.filters { display:grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 8px }
.search { height: 38px; border:1px solid var(--border); border-radius: 10px; padding: 0 12px; background:#fff; width:100% }
.tabs { display:flex; gap:8px; align-items:center }
.tabs { flex-wrap: wrap }
.tab { padding:8px 12px; border:1px solid var(--border); border-radius: 999px; background:#fff; font-weight:600; display:inline-block }
.tab.active { background:#e9f2ff; border-color:#cfe2ff; color: var(--blue) }
.subtabs { display:flex; gap:8px; margin-top:6px; flex-wrap: wrap }
.chip { padding:6px 10px; border:1px solid var(--border); border-radius: 999px; background:#fff; display:inline-block }
.chip.active { background:#e9f2ff; border-color:#cfe2ff; color: var(--blue) }
.today .section-head { display:flex; align-items:center; justify-content:space-between; margin: 6px 0 10px }
.match-card { background:#fff; border:1px solid var(--border); border-radius: 12px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(17,24,39,.06) }
.m-head { display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; border-bottom:1px solid var(--border); color: var(--muted); }
.m-league { font-weight:700; color: var(--text) }
.m-row { display:grid; grid-template-columns: 1.2fr 1.8fr .6fr; gap: 12px; padding: 12px }
@media (max-width: 860px){
  .m-row { grid-template-columns: 1fr }
  .m-odds { grid-template-columns: repeat(3, 1fr) }
}
.m-teams .team { display:flex; align-items:center; gap:8px; padding: 8px 0; font-weight:600 }
.m-odds { display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 48px; gap: 8px }
.cell { display:flex; align-items:center; justify-content:center; border-radius: 10px; border:1px solid var(--border); font-weight:700 }
.cell.back { background:#e9f2ff; color: var(--blue); border-color:#cfe2ff }
.cell.lay { background:#ffe9ec; color:#b4232a; border-color:#ffd1d6 }
.cell.suspended { background:#ffe9ec; color:#b4232a; border-color:#ffd1d6 }
.m-runs { display:grid; grid-template-columns: 1fr; align-content:center; gap:8px; color: var(--muted) }
.rightbar .detail { background:#fff; border:1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(17,24,39,.06) }
.detail-head { display:flex; align-items:center; justify-content:space-between; font-weight:700; margin-bottom: 8px }
.score { display:grid; gap:8px; margin: 8px 0 }
.s-row { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:#f7f9fc; border:1px solid var(--border); border-radius: 10px }
.actions { display:grid; gap:10px; margin-top: 10px }
.pill-switch { display:flex; gap:6px }
.pill { padding:8px 12px; border:1px solid var(--border); border-radius: 999px; background:#fff; font-weight:600 }
.pill.active { background:#e9f2ff; border-color:#cfe2ff; color: var(--blue) }
.site-footer { background:#eef2f7; border-top: 1px solid var(--border); margin-top: 8px }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 36px 20px }
.footer-brand { display:flex; align-items:center; justify-content:center; gap:10px; font-weight:800; color: var(--muted); margin-bottom: 24px }
.footer-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-bottom: 24px }
@media (max-width: 1024px){ .footer-grid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 640px){ .footer-grid { grid-template-columns: 1fr } }
.footer-col { }
.footer-title { font-weight:700; color:#818fa3; margin-bottom: 10px }
.footer-list { display:grid; gap:8px }
.footer-list a { color: var(--text) }
.footer-badges { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom: 18px }
.footer-badges img { height: 56px; width:auto }
.footer-badges .btn { padding:6px 10px; font-size:.85rem }
.footer-badges { gap:8px }
.badge { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; background:#fff; border:1px solid var(--border); font-weight:700 }
.socials { display:flex; align-items:center; justify-content:center; gap:10px }
.social { width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border); color:#4b5565; font-weight:700 }