/* Detail pages share the quieter type, borders and blue accents of the match lists. */
.detail-refresh {
    --detail-font: ui-sans-serif, "Segoe UI", Roboto, Arial, sans-serif;
    --ob-font-sans: var(--detail-font);
    --detail-text: #243449;
    --detail-muted: #64748b;
    --detail-surface: #fff;
    --detail-soft: #f4f7fb;
    --detail-line: #e5ecf4;
    --detail-blue: #0a4ea3;
    --detail-blue-soft: #edf4ff;
    --detail-chart-a: #275e9b;
    --detail-chart-b: #bd8b22;
    --teamA-light: #275e9b;
    --teamB-light: #dfb858;
    --teamLose-light: #cb6d6d;
    --draw-light: #cbd5e1;
    max-width: 1040px;
    margin: 24px auto 32px;
    padding: 0 20px;
    font-family: ui-sans-serif, "Segoe UI", Roboto, Arial, sans-serif;
}

.detail-refresh .dp-main { padding: 0 !important; gap: 20px; min-width: 0; }
.detail-refresh .dp-card {
    min-width: 0;
    padding: 22px 24px;
    border: 1px solid var(--detail-line) !important;
    border-radius: 12px;
    background: var(--detail-surface) !important;
    box-shadow: 0 3px 14px rgba(15, 35, 60, .04) !important;
}

/* Labeled section links stay near the header, leaving the content column clear. */
.detail-refresh .dp-snav {
    position: sticky;
    inset: var(--detail-nav-top, 96px) auto auto;
    transform: none;
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 5px;
    border-radius: 12px;
    background: var(--detail-surface) !important;
    border: 1px solid var(--detail-line) !important;
    box-shadow: 0 2px 10px rgba(15, 35, 60, .04) !important;
    backdrop-filter: none;
    z-index: 60;
}
.detail-refresh .dp-snav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}
.detail-refresh .dp-snav-item {
    flex: 0 0 auto;
    min-height: 40px;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--detail-muted) !important;
    font-size: 14px;
    font-weight: 600;
}
.detail-refresh .dp-snav-label {
    display: block !important;
    max-width: 170px;
}
.detail-refresh .dp-snav-dot,
.detail-refresh .dp-snav-current { display: none !important; }
.detail-refresh .dp-snav-item:hover { background: var(--detail-soft); }
.detail-refresh .dp-snav-item.active { background: var(--detail-blue); color: #fff !important; }
.detail-refresh :is(a, button):focus-visible { outline: 2px solid #7ca7d8; outline-offset: 3px; }
.detail-refresh :is(#section-match, #section-stats, #section-pred, #section-h2h, #section-teamA, #section-teamB) { scroll-margin-top: var(--detail-anchor-offset, 170px); }

.detail-refresh .dp-league-bar {
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom-color: var(--detail-line);
}
.detail-refresh .dp-league-bar > img { width: 24px; height: 24px !important; flex-shrink: 0; }
.detail-refresh .dp-league-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--detail-text) !important;
}
.detail-refresh .dp-back-link {
    flex-shrink: 0;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 32px;
    color: var(--detail-muted);
    font-size: 12px;
    text-decoration: none;
}
.detail-refresh .dp-back-link:hover { color: var(--detail-blue); }
.detail-refresh .dp-teams-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 4px 0 10px;
}
.detail-refresh .dp-team { gap: 12px; align-self: start; }
.detail-refresh .dp-team-logo { width: 64px !important; height: 64px !important; }
.detail-refresh .dp-team-name {
    color: var(--detail-text) !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: normal;
}
.detail-refresh .dp-match-center { min-width: 0; gap: 10px; }
.detail-refresh .dp-match-center .col-score { order: 0; font-size: 24px !important; font-weight: 600; color: var(--detail-muted); }
.detail-refresh .dp-match-center .ScoreBox {
    background: var(--detail-blue-soft);
    color: var(--detail-blue) !important;
    border: 0;
    border-radius: 8px;
    padding: 8px 16px !important;
    font-size: 30px !important;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: none;
    text-shadow: none;
}
.detail-refresh .dp-match-center :is(time.local-time, .live-minute) {
    order: 1;
    margin: 0;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--detail-muted);
    text-align: center;
}

.detail-refresh :is(.dp-section-title, .dp-forecast-card > .block-title) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--detail-line) !important;
    font-size: 15px;
    font-weight: 650;
    color: var(--detail-text) !important;
    font-family: var(--detail-font) !important;
}
.detail-refresh .block-title::after { display: none; }
.detail-refresh .dp-section-logo { width: 24px; height: 24px; }
.detail-refresh .dp-stats-inner {
    display: grid;
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1.4fr);
    gap: 28px;
    align-items: center;
}
.detail-refresh .dp-radar-wrap {
    width: 100% !important;
    max-width: 320px !important;
    height: 290px !important;
    margin: 0 auto !important;
    min-width: 0;
}
.detail-refresh .dp-radar-wrap canvas { width: 100% !important; height: 100% !important; max-width: 100% !important; }
.detail-refresh .dp-stabs,
.detail-refresh .left-col { min-width: 0; }
.detail-refresh :is(.state-menu, .h2h-menu, .fc-tabs) { gap: 6px; flex-wrap: wrap; }
.detail-refresh .dp-stabs .state-menu {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 14px;
}
.detail-refresh .dp-stabs .state-btn {
    min-width: 0;
    width: 100% !important;
    height: auto;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.detail-refresh :is(.state-btn, .h2h-btn, .fc-tab) {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--detail-line) !important;
    background: var(--detail-soft) !important;
    color: var(--detail-muted) !important;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none !important;
    transform: none !important;
    white-space: normal;
    font-family: inherit;
}
.detail-refresh :is(.state-btn, .h2h-btn, .fc-tab).active {
    background: var(--detail-blue) !important;
    border-color: var(--detail-blue) !important;
    color: #fff !important;
}
.detail-refresh .state-menu .state-btn.active {
    background: var(--detail-blue) !important;
    color: #fff !important;
    border-color: var(--detail-blue) !important;
}
.detail-refresh .state-btn::after { display: none; }
.detail-refresh .dp-stats-card :is(.bi-b, .bi-a2) .bi-val { color: #263445 !important; }
.detail-refresh .tab-section > div[data-tr] {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    color: var(--detail-muted);
}
.detail-refresh .tab-section > div[data-tr]::after { display: none; }
.detail-refresh .bi-bar { margin-bottom: 12px; }
.detail-refresh :is(.bi-total, .bi-totalleft) { font-size: 10px; color: var(--detail-muted); }
.detail-refresh .dp-stats-card .bi-bar :is(.bi-total, .bi-totalleft) { color: var(--detail-muted) !important; opacity: 1; }
.detail-refresh .fc-gate__overlayCard {
    max-width: 480px;
    border-radius: 12px;
    background: var(--detail-surface) !important;
    border: 1px solid var(--detail-line);
    box-shadow: 0 6px 20px rgba(15, 35, 60, .08);
}
.detail-refresh .fc-gate__btn {
    background: var(--detail-blue);
    color: #fff;
    border: 1px solid var(--detail-blue);
    border-radius: 8px;
    box-shadow: none;
    font-weight: 600;
}
.detail-refresh .fc-gate__btn:hover { background: #154f91; transform: none; box-shadow: none; filter: none; }
.detail-refresh .dp-forecast-card .fc-card,
.detail-refresh .dp-forecast-card .fc-panel[data-view="bet"] {
    background: var(--detail-surface) !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 10px;
    box-shadow: none !important;
}
.detail-refresh .lastmatches-table tbody tr { height: 42px; }
.detail-refresh .lastmatches-table th {
    background: var(--detail-soft) !important;
    color: var(--detail-muted) !important;
    text-transform: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
}
.detail-refresh .lastmatches-table td { font-size: 15px; border-bottom-color: var(--detail-line); }
.detail-refresh .lastmatches-table .ScoreBox { box-shadow: none; text-shadow: none; font-weight: 600; }

html[data-theme="dark"] .detail-refresh {
    --detail-text: #e2eaf4;
    --detail-muted: #a4b3c7;
    --detail-surface: #0f1a2d;
    --detail-soft: #192a40;
    --detail-line: #293b52;
    --detail-blue: #75aceb;
    --detail-blue-soft: #203854;
    --detail-chart-a: #8dbbef;
    --detail-chart-b: #e7be6f;
    background: transparent !important;
}
html[data-theme="dark"] .detail-refresh .dp-team .dp-team-name { color: var(--detail-text) !important; }
html[data-theme="dark"] .detail-refresh .dp-snav .dp-snav-item { color: var(--detail-muted) !important; }
html[data-theme="dark"] .detail-refresh .dp-snav .dp-snav-item.active { color: #fff !important; }
html[data-theme="dark"] .detail-refresh :is(.bi-bar, .bar-row, .bar-rowlastmatch) { background: var(--detail-soft) !important; }
html[data-theme="dark"] .detail-refresh .dp-stats-card :is(.bi-a, .bi-a1) { background: #3f76b3 !important; }
html[data-theme="dark"] .detail-refresh .dp-stats-card :is(.bi-b, .bi-a2) { background: #d7af55 !important; }
html[data-theme="dark"] .detail-refresh .fc-bestline .fc-badge {
    background: var(--detail-blue-soft) !important;
    color: var(--detail-text) !important;
    border-color: var(--detail-line) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .detail-refresh :is(.state-menu, .h2h-menu, .fc-tabs) :is(.state-btn, .h2h-btn, .fc-tab) {
    background: var(--detail-soft) !important;
    color: var(--detail-muted) !important;
}
html[data-theme="dark"] .detail-refresh :is(.state-menu, .h2h-menu, .fc-tabs) :is(.state-btn, .h2h-btn, .fc-tab).active {
    background: #21578b !important;
    border-color: #21578b !important;
    color: #fff !important;
}
html[data-theme="dark"] .detail-refresh .dp-snav-item.active,
html[data-theme="dark"] .detail-refresh :is(.state-btn, .h2h-btn, .fc-tab).active,
html[data-theme="dark"] .detail-refresh .fc-gate__btn { background: #21578b !important; border-color: #21578b !important; color: #fff !important; }

@media (max-width: 768px) {
    .detail-refresh { margin-top: 14px; padding: 0 12px !important; }
    .detail-refresh .dp-snav { top: var(--detail-nav-top, 0px); margin-bottom: 12px; }
    .detail-refresh .dp-main { gap: 14px; }
    .detail-refresh .dp-card { padding: 18px 16px; }
    .detail-refresh .dp-stats-inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .detail-refresh .dp-radar-wrap { max-width: 300px !important; height: 260px !important; }
    .detail-refresh .dp-snav-item { padding: 10px 12px; }
    .detail-refresh .dp-stabs .state-btn { flex: 1 1 auto; width: auto; max-width: 100%; }
    .detail-refresh :is(#section-match, #section-stats, #section-pred, #section-h2h, #section-teamA, #section-teamB) { scroll-margin-top: var(--detail-anchor-offset, 194px); }
    .detail-refresh .table-scroll-wrap { overflow-x: auto; }
    .detail-refresh .lastmatches-table { min-width: 660px; }
    .detail-refresh .lastmatches-table col.col-league { display: table-column !important; }
    .detail-refresh .lastmatches-table :is(th, td):nth-child(2) { display: table-cell !important; }
}

@media (max-width: 480px) {
    .detail-refresh .dp-card { padding: 16px 14px; }
    .detail-refresh .dp-league-name { font-size: 12px; }
    .detail-refresh .dp-teams-row { grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 8px; }
    .detail-refresh .dp-team-logo { width: 48px !important; height: 48px !important; }
    .detail-refresh .dp-team-name { font-size: 13px !important; line-height: 1.45; }
    .detail-refresh .dp-match-center .ScoreBox { font-size: 25px !important; padding: 8px 12px !important; }
    .detail-refresh .dp-back-link { font-size: 11px; gap: 4px; }
}