/* GOAL LIVE — Design System v6: compact, editorial, mobile-first. */
:root{--gl-bg:#f4f5f7;--gl-card:#fff;--gl-text:#18212b;--gl-muted:#6c7785;--gl-line:#e4e8ec;--gl-accent:#237d70;--gl-surface:#eef1f3;--gl-radius:14px;color-scheme:light dark}
body{background:var(--gl-bg);color:var(--gl-text)}
.shell{max-width:620px;padding:18px 15px calc(96px + env(safe-area-inset-bottom))}
.top{padding:8px 0 12px;border-bottom:1px solid var(--gl-line)}
.brand{font-size:25px;letter-spacing:-1.3px;color:var(--gl-text)}
.brand b{color:var(--gl-text)}
.sub{margin:10px 0 16px;font-size:10px;font-weight:700;letter-spacing:1.6px;color:var(--gl-muted)}
.notice{font-size:11px;border:0;border-radius:9px;background:var(--gl-surface);color:var(--gl-muted);padding:9px 11px}
.days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:16px 0}
.day{border:1px solid var(--gl-line);background:var(--gl-card);padding:12px 8px;border-radius:10px;font-size:12px;color:var(--gl-muted)}
.day.active{background:var(--gl-text)!important;border-color:var(--gl-text)!important;color:var(--gl-card)!important}
.filterrow{margin:5px 0 8px;padding:0 0 7px;gap:7px}
.filterchip{padding:11px 13px;border-radius:20px;font-size:12px;min-height:42px}
.filterchip.picked{background:var(--gl-text);border-color:var(--gl-text);color:var(--gl-card)}
.league-filter-label{font-size:11px;margin-top:8px}
.league-select{min-height:44px;border-color:var(--gl-line);border-radius:10px;background:var(--gl-card);color:var(--gl-text)}
.sectiontitle{font-size:18px;margin:22px 0 12px;letter-spacing:-.5px;color:var(--gl-text)}
.card{border-color:var(--gl-line);background:var(--gl-card);border-radius:var(--gl-radius);box-shadow:none}
.match-card{margin:9px 0;border-radius:12px}
.match-card .league{padding:12px 14px 10px;font-size:11px}
.match-card .score{padding:13px 12px 6px;gap:6px}
.match-card .team{font-size:12px;gap:6px}
.match-card .crest{width:38px;height:38px;border:0;background:var(--gl-surface)}
.team-logo{width:29px;height:29px;object-fit:contain}
.match-card .num{font-size:23px;font-variant-numeric:tabular-nums}
.match-card .status{margin:6px 0 9px;font-size:10px}
.match-card .actions{padding:0 12px 12px}
.match-card .action{padding:10px;font-size:11px}
.favorite-toggle{min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--gl-muted)}
.favorite-toggle[aria-pressed=true]{color:var(--gl-accent)}
.nav{background:var(--gl-card);border-top:1px solid var(--gl-line)}
.nav button{min-height:62px;color:var(--gl-muted)}
.nav button.sel{color:var(--gl-text)}
.nav button.sel:before{background:var(--gl-accent);height:3px}
.counter{background:var(--gl-surface);color:var(--gl-muted)}
.searchbox{border-color:var(--gl-line);background:var(--gl-card)}
.searchbox input{color:var(--gl-text)}
.action{min-height:40px}
.match-event{padding:13px 16px;border-bottom:1px solid var(--gl-line);font-size:13px;line-height:1.5}
.match-event:last-child{border-bottom:0}
.match-event strong{color:var(--gl-accent);margin-right:7px}
@media(prefers-color-scheme:dark){
:root{--gl-bg:#11161d;--gl-card:#1d2530;--gl-text:#f4f6f8;--gl-muted:#a3adb9;--gl-line:#303b48;--gl-accent:#58b4a2;--gl-surface:#27313c}
body{background:var(--gl-bg);color:var(--gl-text)}
.day.active,.filterchip.picked{color:#11161d!important;background:#f4f6f8!important;border-color:#f4f6f8!important}
.brand,.sectiontitle,.match-card .num{color:var(--gl-text)}
.nav button.sel{color:var(--gl-text)}
.favorite-toggle[aria-pressed=true]{color:var(--gl-accent)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}


/* V7: visibly different compact scores layout */
.compact-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:23px 0 14px}
.compact-heading h1{font-size:21px;font-weight:800;letter-spacing:-.7px;margin:0;color:var(--gl-text)}
.compact-heading>span{font-size:11px;color:var(--gl-muted);white-space:nowrap}
.compact-league{margin:0 0 17px;background:var(--gl-card);border:1px solid var(--gl-line);border-radius:13px;overflow:hidden}
.compact-league-title{display:flex;align-items:center;gap:9px;padding:13px 13px;background:var(--gl-surface);border-bottom:1px solid var(--gl-line)}
.compact-league-title h2{margin:0;flex:1;min-width:0;font-size:12px;font-weight:750;letter-spacing:0;color:var(--gl-text)}
.compact-league-dot{height:7px;width:7px;flex:none;border-radius:50%;background:var(--gl-accent)}
.compact-league-count{font-size:11px;color:var(--gl-muted);font-variant-numeric:tabular-nums}
.compact-match{display:flex;align-items:stretch;min-height:81px;border-bottom:1px solid var(--gl-line);background:var(--gl-card)}
.compact-match:last-child{border-bottom:0}
.compact-open{display:flex;align-items:center;justify-content:space-between;gap:9px;min-width:0;flex:1;border:0;background:transparent;color:var(--gl-text);text-align:left;padding:10px 0 10px 13px}
.compact-open:active{background:var(--gl-surface)}
.compact-teams{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.compact-team{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650;min-width:0}
.compact-team>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compact-crest{height:22px;width:22px;display:grid;place-items:center;flex:none;font-size:8px;font-weight:800;color:var(--gl-muted);border-radius:50%;background:var(--gl-surface)}
.compact-crest .team-logo{width:21px;height:21px;object-fit:contain}
.compact-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;max-width:128px}
.compact-score{font-size:17px;font-weight:800;letter-spacing:-.6px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--gl-text)}
.compact-status{font-size:9px;font-weight:650;color:var(--gl-muted);white-space:nowrap;max-width:128px;overflow:hidden;text-overflow:ellipsis}
.compact-live .compact-status{color:var(--gl-accent)}
.compact-fav{flex:none;align-self:center;width:44px;min-width:44px;min-height:48px;padding:0}
.compact-fav svg{width:19px;height:19px}
.compact-match:focus-within{outline:2px solid var(--gl-accent);outline-offset:-2px}
@media(min-width:600px){.compact-match{min-height:76px}.compact-team{font-size:13px}}


/* V8 homepage redesign */
.home-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0 18px}
.home-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--gl-accent)}
.home-hero h1{font-size:clamp(28px,7vw,36px);line-height:1.1;letter-spacing:-1.6px;margin:8px 0 7px;color:var(--gl-text);font-weight:850}
.home-accent{color:var(--gl-accent)}
.home-hero p{margin:0;font-size:13px;color:var(--gl-muted);text-transform:capitalize}
.home-refresh{height:46px;width:46px;flex:none;display:grid;place-items:center;border-radius:14px;border:1px solid var(--gl-line);background:var(--gl-card);color:var(--gl-text);font-size:29px;line-height:1}
.home-refresh:active{background:var(--gl-surface)}
.home-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 24px}
.summary-stat{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:14px 10px;min-width:0;min-height:78px;background:var(--gl-card);border:1px solid var(--gl-line);border-radius:12px;color:var(--gl-text);text-align:left}
.summary-stat strong{font-size:24px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1}
.summary-stat span{font-size:10px;font-weight:650;color:var(--gl-muted)}
.summary-live strong{color:var(--gl-accent)}
.home-date-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.home-date-label span:first-child{font-size:14px;font-weight:800;color:var(--gl-text)}
.home-date-label span:last-child{font-size:11px;color:var(--gl-muted)}
.home-date-label+.days{margin:0 0 17px}
.home-date-label+.days .day{min-height:47px}
.home-hero~.notice{margin:10px 0}
@media(max-width:355px){.summary-stat{padding:12px 7px}.summary-stat strong{font-size:21px}.summary-stat span{font-size:9px}}


/* V9 interaction and visual hierarchy */
.summary-stat{position:relative;transition:border-color .16s,transform .16s}
.summary-stat:active{transform:scale(.97)}
.summary-stat.summary-selected{border-color:var(--gl-accent);box-shadow:inset 0 0 0 1px var(--gl-accent)}
.summary-stat.summary-selected:after{content:"";position:absolute;top:9px;right:9px;width:5px;height:5px;background:var(--gl-accent);border-radius:50%}
.home-refresh svg{display:block}
.home-refresh:focus-visible,.summary-stat:focus-visible,.compact-open:focus-visible,.day:focus-visible{outline:2px solid var(--gl-accent);outline-offset:2px}
.compact-league-title{padding:15px 14px}
.compact-league-title h2{font-size:12px;line-height:1.4}
.compact-league{box-shadow:0 2px 10px rgba(18,31,41,.025)}
.compact-match{transition:background .15s}
.compact-match:hover{background:var(--gl-surface)}
.compact-match:hover .compact-open{background:transparent}
.home-hero{margin-top:22px}
@media(prefers-reduced-motion:reduce){.summary-stat,.compact-match{transition:none}}


/* V10 calendar and filters */
.date-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 19px!important}
.date-strip .date-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:90px;padding:11px 6px;border-radius:13px;transition:background .15s,border-color .15s}
.date-day-week{font-size:11px;font-weight:650;text-transform:capitalize;opacity:.8}
.date-day strong{font-size:24px;font-weight:800;letter-spacing:-.8px;line-height:1;font-variant-numeric:tabular-nums}
.date-day-label{font-size:10px;font-weight:650;opacity:.85}
.home-competition-filter{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0 7px;border-top:1px solid var(--gl-line)}
.home-competition-filter label{font-size:12px;font-weight:750;color:var(--gl-text)}
.home-competition-filter .league-select{width:min(63%,290px);font-size:12px;min-height:42px;padding:8px 12px}
.compact-heading{margin-top:14px}
.compact-heading h1{font-size:18px}
@media(prefers-color-scheme:dark){.date-strip .date-day.active{background:#f4f6f8!important;color:#11161d!important}}
@media(prefers-reduced-motion:reduce){.date-strip .date-day{transition:none}}