:root{--brand:#206bc4}.hero{background:linear-gradient(135deg,#e8f2ff,#f6f8fb);border:1px solid #dce7f4}.metric{font-size:1.7rem;font-weight:700}.match-card{transition:transform .15s ease,box-shadow .15s ease}.match-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(24,36,51,.08)}.article-body{max-width:860px;margin:auto;font-size:1.05rem;line-height:1.75}.ad-slot{min-height:90px;background:#f6f8fb;border:1px dashed #cbd5e1;display:flex;align-items:center;justify-content:center}.progress{height:.55rem}
.teams-grid,.detail-teams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;align-items:center}.team-box{text-align:center;min-width:0}.team-box h3,.team-box h2{margin:.65rem 0 .15rem;overflow-wrap:anywhere}.team-logo{width:68px;height:68px;object-fit:contain}.team-logo-xl{width:96px;height:96px;object-fit:contain}.versus{font-size:.8rem;font-weight:700;color:#94a3b8}.total-box{text-align:center;padding:1rem;border-radius:1rem;background:#f6f8fb}@media(max-width:480px){.team-logo{width:54px;height:54px}.team-logo-xl{width:72px;height:72px}.teams-grid,.detail-teams{gap:.5rem}.team-box h3,.team-box h2{font-size:1rem}.total-box{padding:.5rem}}
.match-state{display:inline-flex;align-items:center;gap:.38rem;padding:.25rem .55rem;border-radius:999px;background:#f1f5f9;color:#475569;font-size:.72rem;font-weight:600;line-height:1}.match-state-dot{width:.42rem;height:.42rem;border-radius:50%;background:#94a3b8}.match-state.is-live{background:#fff1f2;color:#be123c}.match-state.is-live .match-state-dot{background:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.12)}.match-state.is-finished{background:#ecfdf5;color:#047857}.match-state.is-finished .match-state-dot{background:#10b981}.match-score{font-size:.86rem;color:currentColor}.match-minute{opacity:.8}.forecast-label{text-align:center;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;font-weight:700;color:#94a3b8}.metric-card{border-top:3px solid #206bc4}.chart-wrap{position:relative;min-height:310px}.indicator-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem}.indicator-grid div{padding:1rem;border:1px solid #e6e8eb;border-radius:.75rem}.indicator-grid p{margin:.35rem 0 0;color:#667085;font-size:.9rem}.readout{display:grid;gap:.25rem}.readout strong{font-size:1.75rem}@media(max-width:767px){.indicator-grid{grid-template-columns:1fr}.chart-wrap{min-height:270px}}
