:root { color-scheme: dark; --bg:#08110f; --panel:#111d19; --panel-2:#16251f; --line:#294038; --text:#f1f7f3; --muted:#91a89e; --accent:#b8ff38; --accent-soft:#243d1d; --danger:#ff7a7a; --amber:#ffd166; }
* { box-sizing:border-box; }
html { max-width:100%; overflow-x:hidden; }
body { width:100%; max-width:100%; margin:0; min-height:100vh; overflow-x:hidden; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; color:var(--text); background:radial-gradient(circle at 15% 0%,#153026 0,transparent 34rem),var(--bg); }
a { color:inherit; text-decoration:none; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--line); background:rgba(8,17,15,.86); backdrop-filter:blur(14px); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#0a120f; background:var(--accent); font-weight:900; font-size:20px; transform:rotate(-5deg); }
.brand strong,.brand small { display:block; }.brand small { color:var(--muted); font-size:11px; margin-top:2px; }
nav { display:flex; gap:8px; } nav a { padding:9px 13px; border-radius:10px; color:var(--muted); font-size:14px; } nav a:hover { color:var(--text); background:var(--panel-2); }
.page-shell { max-width:1240px; margin:0 auto; padding:42px 24px 70px; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }.eyebrow { margin:0 0 7px; color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:800; }.page-heading h1 { margin:0; font-size:clamp(28px,4vw,46px); line-height:1.05; letter-spacing:-.04em; }
.page-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:14px; }
.tips-trigger { appearance:none; border:1px solid var(--accent); border-radius:999px; padding:10px 16px; color:#0a120f; background:var(--accent); font:inherit; font-size:13px; font-weight:900; cursor:pointer; }.tips-trigger:hover { background:#d1ff7a; }.tips-trigger:focus-visible,.tips-modal-close:focus-visible { outline:3px solid var(--text); outline-offset:3px; }
.refresh-indicator { color:var(--muted); font-size:12px; white-space:nowrap; }.refresh-indicator span { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.panel { min-width:0; background:linear-gradient(145deg,rgba(22,37,31,.98),rgba(13,25,21,.98)); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.15); }
.match-hero { padding:26px 32px 30px; margin-bottom:18px; overflow:hidden; position:relative; }.match-hero::after { content:""; position:absolute; width:260px; height:260px; right:-90px; top:-140px; border-radius:50%; background:rgba(184,255,56,.08); }.match-hero.is-live { border-color:#5e8a38; }
.match-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }.status-badge { color:var(--accent); background:var(--accent-soft); padding:6px 10px; border-radius:999px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.scoreboard { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px; margin:30px auto 22px; max-width:820px; }.team { display:flex; flex-direction:column; }.team-home { text-align:right; }.team-away { text-align:left; }.team strong { font-size:clamp(34px,6vw,68px); letter-spacing:-.06em; line-height:1; }.team span { color:var(--muted); margin-top:8px; }.score { font-size:clamp(38px,6vw,70px); font-weight:900; letter-spacing:-.08em; color:var(--accent); }
.probabilities { display:grid; grid-template-columns:repeat(3,1fr); max-width:620px; margin:0 auto; padding-top:18px; border-top:1px solid var(--line); text-align:center; }.probabilities div { display:flex; flex-direction:column; gap:4px; }.probabilities span,.probabilities small { color:var(--muted); font-size:11px; }.probabilities strong { font-size:18px; }.probabilities small { grid-column:1/-1; margin-top:12px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }.dashboard-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:18px; }.wide-panel { grid-row:span 2; }
.compact-panel,.table-panel { padding:22px; }.section-title { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }.section-title h2 { margin:0; font-size:17px; }.section-title span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; }.table-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }table { width:100%; border-collapse:collapse; font-size:13px; }th { color:var(--muted); font-size:10px; text-align:left; text-transform:uppercase; letter-spacing:.09em; font-weight:700; }th,td { padding:12px 10px; border-bottom:1px solid rgba(41,64,56,.65); }tbody tr:last-child td { border-bottom:0; }.position { color:var(--accent); width:52px; font-weight:800; }.align-right { text-align:right; }.points { color:var(--accent); font-weight:800; }.projected { color:var(--amber); }
.event-list,.simple-list,.result-list { list-style:none; margin:0; padding:0; }.event-list li { display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }.event-list time { color:var(--accent); font-weight:800; min-width:34px; }.event-list div,.simple-list li { display:flex; flex-direction:column; }.event-list span,.simple-list span { color:var(--muted); font-size:12px; margin-top:3px; }.result-list li { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }.result-list li span:last-child { text-align:right; }.result-list strong { color:var(--accent); }
.scorer-summary { display:flex; flex-wrap:wrap; gap:7px; margin:-4px 0 10px; }.scorer-summary span { padding:6px 9px; border-radius:999px; color:var(--muted); background:rgba(184,255,56,.08); font-size:11px; }.scorer-summary strong { color:var(--accent); margin-right:3px; }
.status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }.metric { padding:18px; }.metric span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }.metric strong { display:block; margin-top:10px; font-size:14px; overflow-wrap:anywhere; }.error-panel { border-color:#743a3a; padding:20px; margin-bottom:18px; }.error-panel h2 { margin-top:0; }.error-panel p,.error-text { color:var(--danger); }
.message-status { display:inline-flex; padding:5px 8px; border-radius:999px; text-transform:uppercase; font-size:9px; font-weight:900; letter-spacing:.08em; }.status-sent { background:var(--accent-soft); color:var(--accent); }.status-failed { background:#432626; color:var(--danger); }.status-pending { background:#4a3d1e; color:var(--amber); }.message-table details { min-width:280px; }.message-table summary { cursor:pointer; font-weight:700; }.message-table pre { white-space:pre-wrap; color:var(--muted); font:12px/1.5 ui-monospace,monospace; }
.muted,.updated-at { color:var(--muted); }.updated-at { text-align:right; font-size:11px; margin:14px 4px 0; }.empty-state { padding:48px; text-align:center; }.empty-state h2 { margin:6px 0; }
body.tips-modal-open { overflow:hidden; }
.tips-modal { width:min(760px,calc(100vw - 28px)); max-width:none; max-height:calc(100vh - 28px); margin:auto; padding:0; overflow:visible; border:0; color:var(--text); background:transparent; opacity:0; transform:translateY(32px) scale(.98); transition:opacity .22s ease,transform .22s ease; }.tips-modal.is-open { opacity:1; transform:translateY(0) scale(1); }.tips-modal::backdrop { background:rgba(3,8,6,.82); backdrop-filter:blur(8px); }
.tips-modal-card { max-height:calc(100vh - 28px); overflow:auto; border:1px solid var(--line); border-radius:20px; background:var(--panel); box-shadow:0 28px 80px rgba(0,0,0,.5); }.tips-modal-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 14px 12px 22px; }.tips-modal-header h2 { margin:0; font-size:19px; }.tips-modal-close { appearance:none; display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; color:var(--text); background:var(--panel-2); font:700 30px/1 sans-serif; cursor:pointer; }.tips-modal-close:hover { color:#0a120f; background:var(--accent); }.tips-modal-media { padding:0 14px 14px; }.tips-modal-media img { display:block; width:100%; height:auto; max-height:calc(100vh - 112px); margin:auto; border-radius:14px; object-fit:contain; }
@media (max-width:800px) { .page-shell { padding:28px 14px 50px; }.site-header { padding:0 14px; }.brand small { display:none; }.page-heading { align-items:flex-start; flex-direction:column; }.page-actions { align-items:flex-start; justify-content:flex-start; }.scoreboard { gap:12px; }.team strong { font-size:34px; }.team span { font-size:11px; }.score { font-size:36px; }.detail-grid,.dashboard-grid,.status-grid { grid-template-columns:minmax(0,1fr); }.wide-panel { grid-row:auto; }.match-hero { padding:20px 14px; }.compact-panel,.table-panel { padding:16px 12px; }.table-scroll-predictions table { min-width:620px; } nav a { padding:8px; } }
@media (prefers-reduced-motion:reduce) { .tips-modal { opacity:1; transform:none; transition:none; } }