.og-match-tools {
    grid-template-columns: minmax(220px, 1fr) auto minmax(210px, .75fr);
    gap: 14px;
    margin-bottom: 12px;
}

.og-competition-filter select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--og-line);
    border-radius: 10px;
    background: #fff;
    color: var(--og-ink);
    font: inherit;
}

.og-competition-filter select:focus {
    border-color: var(--og-green);
    outline: 3px solid rgba(8, 127, 91, .13);
}

.og-status-filters {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    overflow-x: auto;
    padding: 2px;
}

.og-day-match-heading{margin:18px 0 8px}.og-day-match-heading h2{margin:0;color:var(--og-ink);font-size:clamp(20px,3vw,27px)}.og-day-match-heading p{margin:5px 0 0;color:var(--og-muted);font-size:13px}
.og-status-filters button[data-og-status-filter="live"]{border-color:rgba(217,72,95,.28);background:#fff5f6;color:#b92f46}.og-status-filters button[data-og-status-filter="upcoming"]{border-color:rgba(37,99,235,.22);background:#f3f7ff;color:#2456a6}.og-status-filters button[data-og-status-filter="finished"]{background:#f5f6f6;color:#59635f}.og-status-filters button[data-og-status-filter="favorite"]{background:#faf6ff;color:#72509a}.og-status-filters button.is-active{border-color:var(--og-green);background:var(--og-green);color:#fff}.og-status-filters button[data-og-status-filter="live"].is-active{border-color:#c93d55;background:#c93d55}.og-home-match[data-og-state="upcoming"]{border-inline-start:3px solid #7aa7e8}.og-home-match[data-og-state="finished"]{border-inline-start:3px solid #c7cfcc}.og-home-match[data-og-state="live"]{border-inline-start:3px solid #d9485f}

.og-match-competition {
    border-inline-start: 5px solid var(--og-competition-accent, var(--og-green));
    box-shadow: 0 7px 20px color-mix(in srgb, var(--og-competition-accent, var(--og-green)) 9%, transparent);
}

.og-match-competition > header {
    background: linear-gradient(110deg, var(--og-competition-tint, #f4f8f6), #fff);
}

.og-match-competition > header strong,
.og-match-competition > header > a {
    color: var(--og-competition-accent, var(--og-green));
}

.og-status-filters button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--og-line);
    border-radius: 999px;
    background: #fff;
    color: var(--og-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.og-status-filters button:hover,
.og-status-filters button:focus {
    border-color: var(--og-green);
}

.og-status-filters button.is-active {
    border-color: var(--og-green);
    background: var(--og-green);
    color: #fff;
}

.og-status-filters span {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(104, 116, 111, .12);
    font-size: 11px;
}

.og-status-filters button.is-active span {
    background: rgba(255, 255, 255, .2);
}

.og-important-matches{margin:0 0 18px;padding:16px;border:1px solid rgba(8,127,91,.25);border-radius:17px;background:linear-gradient(145deg,#f1faf6,#fff)}
.og-important-matches>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.og-important-matches h2{margin:0;font-size:21px}.og-important-matches>header .og-action-button{width:auto;margin:0;padding:9px 13px}
.og-important-matches>div{overflow:hidden;border:1px solid var(--og-line);border-radius:13px;background:#fff}
.og-important-matches .og-home-match:first-child{border-top:0}
@media(max-width:520px){.og-important-matches{padding:12px}.og-important-matches h2{font-size:18px}.og-important-matches>header .og-action-button{font-size:12px}}

@media (max-width: 980px) {
    .og-match-tools { grid-template-columns: 1fr 1fr; }
    .og-timezone-note { text-align: start; }
}

@media (max-width: 820px) {
    .og-match-tools { grid-template-columns: 1fr; }
    .og-timezone-note { text-align: center; }
}
