/* BXH Ngoại hạng Anh — Tramscore Sync.
   Dùng :where() để theme dễ ghi đè; đổi màu qua biến --ts-epl-*. */

:where(.tramscore-epl-standings, .tramscore-epl-mini, .tramscore-epl-cards) {
    --ts-epl-brand: #37003c;
    --ts-epl-brand-2: #5a1a6b;
    --ts-epl-line: rgba(0, 0, 0, .09);
    --ts-epl-soft: rgba(0, 0, 0, .035);
    --ts-epl-muted: #6b6b7b;
    --ts-epl-cl: #2f7cf6;
    --ts-epl-el: #f59e0b;
    --ts-epl-ecl: #10b981;
    --ts-epl-rel: #e5263f;
    font-size: 15px;
    line-height: 1.4;
    margin: 0 0 1.5em;
}

@media (prefers-color-scheme: dark) {
    :where(.tramscore-epl-standings, .tramscore-epl-mini, .tramscore-epl-cards) {
        --ts-epl-line: rgba(255, 255, 255, .12);
        --ts-epl-soft: rgba(255, 255, 255, .05);
        --ts-epl-muted: #a3a3b5;
    }
}

:where(.tramscore-epl-standings, .tramscore-epl-mini, .tramscore-epl-cards) img { display: inline-block; object-fit: contain; vertical-align: middle; margin: 0; }

/* Đầy đủ & gọn */
:where(.tramscore-epl-standings) { border: 1px solid var(--ts-epl-line); border-radius: 12px; overflow: hidden; }
:where(.tramscore-epl-standings .epl-head) { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; color: #fff; background: linear-gradient(120deg, var(--ts-epl-brand), var(--ts-epl-brand-2)); }
:where(.tramscore-epl-standings .epl-head span) { font-size: 12px; opacity: .75; }
:where(.tramscore-epl-standings .epl-head h3) { margin: 4px 0 0; font-size: 20px; color: inherit; }
:where(.tramscore-epl-standings .epl-head strong) { font-size: 18px; padding: 6px 10px; border-radius: 8px; background: #00ff85; color: var(--ts-epl-brand); }
:where(.tramscore-epl-standings .epl-table-wrap) { overflow-x: auto; }
:where(.tramscore-epl-standings table) { width: 100%; border-collapse: collapse; margin: 0; border: 0; font-variant-numeric: tabular-nums; }
:where(.tramscore-epl--full table) { min-width: 600px; }
:where(.tramscore-epl-standings th, .tramscore-epl-standings td) { padding: 10px 8px; text-align: center; border: 0; border-bottom: 1px solid var(--ts-epl-line); white-space: nowrap; }
:where(.tramscore-epl-standings th) { font-size: 12px; font-weight: 600; color: var(--ts-epl-muted); background: var(--ts-epl-soft); }
:where(.tramscore-epl-standings .team) { text-align: left; width: 100%; }
:where(.tramscore-epl-standings td.team) { display: flex; align-items: center; gap: 10px; font-weight: 600; }
:where(.tramscore-epl-standings td.team img) { width: 22px; height: 22px; }
:where(.tramscore-epl-standings tbody tr:hover) { background: var(--ts-epl-soft); }
:where(.tramscore-epl-standings tbody tr:last-child td) { border-bottom: 0; }
:where(.tramscore-epl-standings.has-zones tbody td:first-child) { box-shadow: inset 4px 0 0 transparent; font-weight: 700; }
:where(.tramscore-epl-standings.has-zones tr.zone-cl td:first-child) { box-shadow: inset 4px 0 0 var(--ts-epl-cl); }
:where(.tramscore-epl-standings.has-zones tr.zone-el td:first-child) { box-shadow: inset 4px 0 0 var(--ts-epl-el); }
:where(.tramscore-epl-standings.has-zones tr.zone-ecl td:first-child) { box-shadow: inset 4px 0 0 var(--ts-epl-ecl); }
:where(.tramscore-epl-standings.has-zones tr.zone-rel td:first-child) { box-shadow: inset 4px 0 0 var(--ts-epl-rel); }

:where(.epl-form) { display: inline-flex; gap: 3px; }
:where(.epl-form i) { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; }
:where(.epl-form .epl-form-w) { background: #16a34a; }
:where(.epl-form .epl-form-d) { background: #9ca3af; }
:where(.epl-form .epl-form-l) { background: #dc2626; }

:where(.epl-legend) { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 12px 16px; list-style: none; font-size: 12px; color: var(--ts-epl-muted); border-top: 1px solid var(--ts-epl-line); }
:where(.epl-legend li) { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
:where(.epl-legend li)::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
:where(.epl-legend .zone-cl)::before { background: var(--ts-epl-cl); }
:where(.epl-legend .zone-el)::before { background: var(--ts-epl-el); }
:where(.epl-legend .zone-ecl)::before { background: var(--ts-epl-ecl); }
:where(.epl-legend .zone-rel)::before { background: var(--ts-epl-rel); }

/* Mini (sidebar) */
:where(.tramscore-epl-mini .epl-mini-head) { display: flex; justify-content: space-between; padding: 0 6px 8px; font-size: 12px; font-weight: 600; color: var(--ts-epl-muted); }
:where(.tramscore-epl-mini .epl-mini-row) { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 6px; border-top: 1px solid var(--ts-epl-line); }
:where(.tramscore-epl-mini .rank) { text-align: center; font-weight: 700; color: var(--ts-epl-muted); font-variant-numeric: tabular-nums; }
:where(.tramscore-epl-mini .club) { display: flex; align-items: center; gap: 8px; min-width: 0; }
:where(.tramscore-epl-mini .club img) { width: 20px; height: 20px; flex: none; }
:where(.tramscore-epl-mini .club span) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
:where(.tramscore-epl-mini .points) { font-weight: 800; font-variant-numeric: tabular-nums; }
:where(.tramscore-epl-mini.has-zones .zone-cl) { box-shadow: inset 3px 0 0 var(--ts-epl-cl); }
:where(.tramscore-epl-mini.has-zones .zone-el) { box-shadow: inset 3px 0 0 var(--ts-epl-el); }
:where(.tramscore-epl-mini.has-zones .zone-ecl) { box-shadow: inset 3px 0 0 var(--ts-epl-ecl); }
:where(.tramscore-epl-mini.has-zones .zone-rel) { box-shadow: inset 3px 0 0 var(--ts-epl-rel); }

/* Thẻ top đội */
:where(.tramscore-epl-cards .epl-cards-head) { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
:where(.tramscore-epl-cards .epl-cards-head strong) { font-size: 18px; }
:where(.tramscore-epl-cards .epl-cards-head span) { font-size: 13px; color: var(--ts-epl-muted); }
:where(.tramscore-epl-cards .epl-cards-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
:where(.tramscore-epl-cards .epl-card) { position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 12px 14px; border: 1px solid var(--ts-epl-line); border-radius: 14px; text-align: center; border-top: 4px solid var(--ts-epl-brand); }
:where(.tramscore-epl-cards .epl-card.zone-cl) { border-top-color: var(--ts-epl-cl); }
:where(.tramscore-epl-cards .epl-card.zone-el) { border-top-color: var(--ts-epl-el); }
:where(.tramscore-epl-cards .epl-card.zone-ecl) { border-top-color: var(--ts-epl-ecl); }
:where(.tramscore-epl-cards .epl-card.zone-rel) { border-top-color: var(--ts-epl-rel); }
:where(.tramscore-epl-cards .epl-card img) { width: 44px; height: 44px; }
:where(.tramscore-epl-cards .epl-card-rank) { position: absolute; top: 8px; left: 10px; font-size: 13px; font-weight: 800; color: var(--ts-epl-muted); }
:where(.tramscore-epl-cards .epl-card-name) { font-weight: 700; }
:where(.tramscore-epl-cards .epl-card-pts) { font-size: 22px; font-weight: 800; line-height: 1; }
:where(.tramscore-epl-cards .epl-card-pts small) { font-size: 12px; font-weight: 600; color: var(--ts-epl-muted); }
:where(.tramscore-epl-cards .epl-card-rec) { font-size: 12px; color: var(--ts-epl-muted); }

:where(.tramscore-epl-error) { padding: 10px 12px; border: 1px dashed #e5263f; border-radius: 8px; font-size: 14px; }