:root{
--pwa-primary:#125ab7;
--pwa-primary-dark:#0c3f83;
--pwa-primary-soft:#eaf2fc;
font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
color:#19212c;
background:#f5f6f8;
font-synthesis:none}
*{
box-sizing:border-box}
body{
margin:0}
a{
color:inherit;
text-decoration:none}
button,input{
font:inherit}
button,a,input{
touch-action:manipulation}
:focus-visible{
outline:3px solid #e5a400;
outline-offset:3px}
.topbar{
height:65px;
padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
border-bottom:1px solid #e7e9ee;
position:sticky;
top:0;
z-index:20}
.brand{
display:flex;
align-items:center;
gap:9px;
font-weight:900;
line-height:1.05;
color:var(--pwa-primary)}
.brand img{
object-fit:contain}
.brand small{
display:block;
font-size:10px;
color:#687384;
font-weight:600;
letter-spacing:.06em;
text-transform:uppercase}
.icon-button{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:15px;
background:var(--pwa-primary-soft);
font-size:19px}
.app-main{
max-width:760px;
margin:auto;
padding:20px 16px calc(105px + env(safe-area-inset-bottom));
min-height:calc(100dvh - 65px)}
.app-main section{
margin-bottom:28px}
.page-title{
margin:12px 0 26px}
.page-title p{
color:#687384}
.page-title h1,h1{
font-size:clamp(1.9rem,8vw,2.7rem);
line-height:1.12;
letter-spacing:-.04em;
margin:7px 0 10px}
.eyebrow{
font-size:.72rem;
font-weight:850;
letter-spacing:.12em;
color:var(--pwa-primary);
text-transform:uppercase}
.eyebrow.light{
color:#dbeafe}
.hero,.match-hero{
background:linear-gradient(135deg,var(--pwa-primary),var(--pwa-primary-dark));
border-radius:25px;
color:#fff;
padding:29px 23px;
box-shadow:0 13px 30px #125ab740}
.hero p:last-child{
color:#eaf2ff;
margin:8px 0 0}
.card{
display:block;
background:#fff;
border:1px solid #e9ebef;
border-radius:19px;
box-shadow:0 4px 14px #22263a0a;
margin:10px 0;
padding:18px}
.card h2,.card h3{
margin:5px 0}
.section-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin:0 2px 10px}
.section-head h2,h2{
font-size:1.15rem;
letter-spacing:-.025em;
margin:0}
.section-head a,.back{
font-size:.9rem;
font-weight:700;
color:var(--pwa-primary)}
.back{
display:inline-block;
margin:5px 0 20px}
.onboarding{
padding:23px}
.onboarding p,.install-card p{
color:#647082}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
border:0;
background:var(--pwa-primary);
color:#fff;
font-weight:750;
border-radius:13px;
padding:11px 18px;
cursor:pointer;
margin:8px 0}
.button.secondary{
background:#fff;
color:var(--pwa-primary);
border:1px solid #aec9ea}
.chips{
display:flex;
gap:8px;
flex-wrap:wrap}
.chip{
border-radius:50px;
background:#fff;
border:1px solid #e4e6ea;
padding:9px 14px;
font-size:.9rem;
font-weight:700;
min-height:42px}
.chip.chosen{
background:var(--pwa-primary);
color:#fff;
border-color:var(--pwa-primary)}
.filters{
margin-bottom:18px}
.match-card{
transition:transform .16s,box-shadow .16s}
.match-card:active,.news-card:active{
transform:scale(.985)}
.card-top,.score-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px}
.pill{
border-radius:50px;
background:#f4f5f7;
color:#606b7a;
font-size:.75rem;
padding:5px 9px;
font-weight:700}
.score-row{
margin:17px 0 15px;
text-align:center}
.score-row strong{
flex:1;
font-size:.96rem;
line-height:1.25}
.score{
font-size:1.35rem;
font-weight:900;
white-space:nowrap;
color:var(--pwa-primary)}
.meta,.subtle{
font-size:.84rem;
color:#586577}
.subtle{
font-size:.78rem;
margin-top:5px}
.empty{
color:#657083;
text-align:center;
padding:29px}
.segmented{
display:grid;
grid-template-columns:1fr 1fr;
background:#e9ebef;
border-radius:14px;
padding:4px;
margin-bottom:18px}
.segmented a{
text-align:center;
padding:10px;
border-radius:11px;
font-weight:750;
color:#566172}
.segmented a.selected{
background:#fff;
color:var(--pwa-primary);
box-shadow:0 2px 7px #0001}
.team-card{
display:flex;
align-items:center;
gap:13px;
min-height:78px}
.team-card small{
display:block;
color:#637083;
margin-top:3px}
.team-avatar{
display:grid;
place-items:center;
width:44px;
height:44px;
flex:none;
border-radius:12px;
color:var(--pwa-primary);
background:var(--pwa-primary-soft);
font-weight:900}
.team-arrow{
margin-left:auto;
color:var(--pwa-primary);
font-size:1.45rem}
.ranking{
padding:0;
overflow-x:auto}
.ranking table{
width:100%;
border-collapse:collapse;
min-width:530px;
font-size:.82rem}
.ranking th,.ranking td{
padding:12px 7px;
text-align:center;
border-bottom:1px solid #eef0f2}
.ranking th:nth-child(2){
text-align:left;
min-width:120px}
.ranking thead{
color:#617084}
.ranking tr.own{
background:#edf5ff;
color:#174c91}
.news-card{
overflow:hidden;
padding:0}
.news-card img{
width:100%;
height:155px;
object-fit:cover}
.news-card div{
padding:17px}
.news-card h3{
font-size:1.08rem}
.news-card small,.news-card p{
color:#647083}
.news-card p{
font-size:.9rem;
line-height:1.45;
margin:6px 0}
.article-cover{
width:100%;
max-height:290px;
object-fit:cover;
border-radius:18px}
.prose{
line-height:1.7;
overflow-wrap:anywhere}
.prose img{
max-width:100%;
height:auto}
.prose a{
text-decoration:underline;
color:var(--pwa-primary)}
.pagination{
display:flex;
justify-content:space-between;
margin:20px 0;
color:var(--pwa-primary);
font-weight:700}
.match-hero{
text-align:center;
margin-bottom:18px}
.big-score{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:10px;
margin:30px 0}
.big-score strong{
font-size:2rem;
white-space:nowrap}
.big-score span{
font-weight:700;
line-height:1.25}
.match-hero>p:last-child{
color:#dbeafe}
.detail-list div,.stat-list div{
display:flex;
justify-content:space-between;
gap:15px;
padding:11px 0;
border-bottom:1px solid #edf0f2}
.detail-list div:last-child,.stat-list div:last-child{
border-bottom:0}
.detail-list span,.stat-list span{
color:#657083}
.detail-list strong,.stat-list strong{
text-align:right}
.favorites label{
display:flex;
gap:12px;
align-items:center;
min-height:49px;
border-bottom:1px solid #eef0f2}
.favorites label:last-child{
border:0}
.favorites input{
width:22px;
height:22px;
accent-color:var(--pwa-primary)}
.more-links .card{
display:flex;
justify-content:space-between;
font-weight:750}
.bottom-nav{
position:fixed;
bottom:0;
left:0;
right:0;
height:calc(70px + env(safe-area-inset-bottom));
padding-bottom:env(safe-area-inset-bottom);
display:flex;
justify-content:space-around;
background:#fff;
border-top:1px solid #e4e7eb;
box-shadow:0 -4px 20px #1118270d;
z-index:30}
.bottom-nav a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
min-width:58px;
font-size:.68rem;
font-weight:700;
color:#687384}
.bottom-nav a span{
font-size:1.45rem;
line-height:1}
.bottom-nav a.active{
color:var(--pwa-primary)}
.offline-banner{
background:#fff1cb;
color:#624a00;
text-align:center;
padding:10px;
font-size:.85rem}
.install-card{
margin-top:22px}
@media(min-width:760px){
.app-main{
padding-top:34px}
.bottom-nav{
max-width:760px;
margin:auto;
border-left:1px solid #e4e7eb;
border-right:1px solid #e4e7eb}
}

.page-skeleton{
position:fixed;
inset:65px 0 calc(70px + env(safe-area-inset-bottom));
z-index:19;
background:#f5f6f8;
padding:26px max(16px,calc((100vw - 720px)/2));
display:flex;
flex-direction:column;
gap:16px}
.page-skeleton span{
height:90px;
border-radius:18px;
background:linear-gradient(100deg,#e9ebef 20%,#f8f9fb 40%,#e9ebef 60%);
background-size:220% 100%;
animation:pwa-shimmer 1.2s linear infinite}
.page-skeleton span:first-child{
height:44px;
width:62%}
@media(max-width:420px){
.score-row strong{min-width:0;overflow-wrap:anywhere}
.big-score{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.big-score span{overflow-wrap:anywhere;font-size:.88rem}
.detail-list div,.stat-list div{flex-wrap:wrap}
.detail-list strong,.stat-list strong{text-align:left}
}
@keyframes pwa-shimmer{
to{
background-position-x:-220%}
}
@media(prefers-reduced-motion:reduce){
.page-skeleton span{
animation:none}
}