:root {
    --font-ui: system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --font-mono: "Cascadia Mono", Consolas,
        "Liberation Mono", monospace;

    --text-main: #c7cdd4;
    --text-title: #d7dce2;
    --text-muted: #98a0a9;
}

/* Единый шрифт на всех страницах */
html,
body,
button,
input,
select,
textarea,
table,
thead,
tbody,
tr,
th,
td,
nav,
header,
footer,
section,
article,
main,
div,
span,
p,
a,
label,
small,
strong,
b,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-ui) !important;
    font-synthesis: none !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-shadow: none !important;
}

html,
body {
    color: var(--text-main) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-title) !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}

h1 { font-size: 24px !important; }
h2 { font-size: 20px !important; }
h3 { font-size: 17px !important; }
h4,
h5,
h6 { font-size: 15px !important; }

.site-brand {
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: 0.15px !important;
}

.site-nav-links > a,
.logout-button {
    font-size: 12px !important;
    font-weight: 550 !important;
    letter-spacing: 0.08px !important;
}

/* Список матчей */
#datatable {
    font-size: 13px !important;
}

#datatable thead th {
    font-size: 12px !important;
    font-weight: 650 !important;
}

#datatable .match-team-name,
#datatable span.team {
    font-size: 15px !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
}

#datatable .date-start {
    font-size: 12px !important;
    font-weight: 450 !important;
}

#datatable .match-vs {
    font-size: 12px !important;
    font-weight: 500 !important;
}

#datatable .odd-col-cell,
#datatable .odd-number {
    font-size: 16px !important;
    font-weight: 600 !important;
}

#datatable .country-name {
    font-size: 10px !important;
    font-weight: 550 !important;
}

#datatable .round-compact {
    font-size: 10px !important;
    font-weight: 450 !important;
}

/* Live, ML Quality и остальные карточки */
.metric-card,
.stat-card,
.state-card,
.stack-card,
.final-card,
.strategy-card,
[class*="metric"],
[class*="state"],
[class*="stack"] {
    font-family: var(--font-ui) !important;
}

.badge,
[class*="badge"],
[class*="-badge"],
.xgb-main,
.xgb-low,
.bg-action-badge,
.ml-mini-badge {
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.score,
.live-score,
.live-date-score,
.score-value {
    font-family: var(--font-ui) !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
}

/* Технические значения */
code,
pre,
.game-id,
.state-time,
.monospace {
    font-family: var(--font-mono) !important;
    font-weight: 400 !important;
}

/* Не ломаем иконочные шрифты */
.fa,
.fas,
.far,
.fab,
.material-icons {
    font-family: inherit;
}

@media (max-width: 768px), (pointer: coarse) {
    html,
    body {
        font-size: 13px !important;
    }

    h1 { font-size: 20px !important; }
    h2 { font-size: 17px !important; }
    h3 { font-size: 15px !important; }

    .site-brand {
        font-size: 12px !important;
    }

    .site-nav-links > a,
    .logout-button {
        font-size: 10px !important;
    }

    #datatable .match-team-name,
    #datatable span.team {
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    #datatable .odd-col-cell,
    #datatable .odd-number {
        font-size: 13px !important;
    }

    #datatable .date-start,
    #datatable .country-name,
    #datatable .round-compact {
        font-size: 9px !important;
    }
}

/* PAGE TEXT TONE START */

/* =========================================================
   ML QUALITY — спокойные заголовки и значения
   ========================================================= */

.mlq-title {
    color: #c9cfd6 !important;
    font-size: 19px !important;
    font-weight: 620 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.22 !important;
}

.mlq-subtitle {
    color: #b6bec7 !important;
    font-size: 14px !important;
    font-weight: 580 !important;
    letter-spacing: 0 !important;
}

.mlq-muted {
    color: #919aa4 !important;
    font-weight: 400 !important;
}

.mlq-metric .label {
    color: #929ba5 !important;
    font-size: 11px !important;
    font-weight: 450 !important;
}

.mlq-metric .value {
    color: #c4cad1 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* Семантические цвета оставляем, но делаем мягче */
.mlq-metric .value.mlq-good,
.mlq-good {
    color: #9bd48d !important;
}

.mlq-metric .value.mlq-warn,
.mlq-warn {
    color: #d7c472 !important;
}

.mlq-metric .value.mlq-bad,
.mlq-bad {
    color: #d88983 !important;
}

.mlq-table th {
    color: #bdc4cc !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.mlq-table td {
    color: #aeb6bf !important;
    font-weight: 430 !important;
}

.mlq-note {
    color: #aab2bb !important;
}

.mlq-note b {
    color: #c3c9d0 !important;
    font-weight: 600 !important;
}


/* =========================================================
   LIVE PAGE — спокойные заголовки и значения
   ========================================================= */

.live-title {
    color: #cbd1d8 !important;
    font-size: 20px !important;
    font-weight: 620 !important;
    letter-spacing: -0.012em !important;
    line-height: 1.22 !important;
}

.live-score {
    color: #cfd5db !important;
    font-size: 20px !important;
    font-weight: 620 !important;
    letter-spacing: -0.015em !important;
}

.betguard-title,
.finalstate-title,
.control-title {
    color: #c8ced5 !important;
    font-size: 17px !important;
    font-weight: 620 !important;
    letter-spacing: -0.008em !important;
}

.layer-flow-title,
.live-card h4 {
    color: #c2c9d0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* Перебиваем inline style="color:#fff" */
.live-card h4[style] {
    color: #c2c9d0 !important;
}

.live-muted {
    color: #929aa4 !important;
    font-weight: 400 !important;
}

.live-metric .label,
.betguard-metric .label,
.finalstate-metric .label,
.mlguard-metric .label {
    color: #919aa4 !important;
    font-size: 11px !important;
    font-weight: 450 !important;
}

.betguard-metric .value,
.finalstate-metric .value,
.mlguard-metric .value {
    color: #c5cbd2 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.006em !important;
}

.live-metric .value {
    color: #9bd48d !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Описание под карточками */
.betguard-explanation,
.finalstate-reason,
.mlguard-explanation {
    color: #b2bac3 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

/* Статусные кнопки и бейджи */
.finalstate-action,
.entryguard-action,
.strategy-action,
.control-action,
.betguard-action {
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* Стрелки decision stack */
.layer-arrow {
    color: #858e98 !important;
    font-weight: 550 !important;
}

.layer-note {
    color: #929aa4 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px), (pointer: coarse) {
    .mlq-title {
        font-size: 17px !important;
    }

    .mlq-subtitle {
        font-size: 13px !important;
    }

    .mlq-metric .value {
        font-size: 16px !important;
    }

    .live-title {
        font-size: 18px !important;
    }

    .live-score {
        font-size: 18px !important;
    }

    .betguard-title,
    .finalstate-title,
    .control-title {
        font-size: 16px !important;
    }

    .betguard-metric .value,
    .finalstate-metric .value,
    .mlguard-metric .value {
        font-size: 15px !important;
    }
}

/* PAGE TEXT TONE END */


/* LIVE TABLE TONE START */

/* Заголовки секций Entries / Exits, Live snapshots */
.live-card h4,
.live-card h4[style] {
    color: #bcc4cc !important;
    font-family: var(--font-ui) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

/* Поясняющий текст под заголовками */
.live-card .live-muted {
    color: #8f98a2 !important;
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Вся таблица использует единый шрифт */
.live-table,
.live-table thead,
.live-table tbody,
.live-table tr,
.live-table th,
.live-table td {
    font-family: var(--font-ui) !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

/* Заголовки колонок — больше не ярко-белые */
.live-table th {
    color: #b6bec7 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
}

/* Обычные значения таблицы */
.live-table td {
    color: #9fa8b2 !important;
    font-size: 11px !important;
    font-weight: 430 !important;
    line-height: 1.3 !important;
}

/* Важные значения без чрезмерной белизны */
.live-table td strong,
.live-table td b {
    color: #bdc5cd !important;
    font-weight: 600 !important;
}

/* Нейтральные прочерки и вторичные данные */
.live-table .live-muted,
.live-table .muted,
.live-table .text-muted {
    color: #79828c !important;
}

/* Бейджи Pressure, Control, ML Action */
.live-table .live-badge,
.live-table [class*="badge"],
.live-table [class*="-badge"] {
    font-family: var(--font-ui) !important;
    font-size: 10px !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

/* Смысловые цвета сохраняем, но делаем мягче */
.live-table .live-good {
    color: #91ca83 !important;
}

.live-table .live-warn {
    color: #d4be68 !important;
}

.live-table .live-bad {
    color: #d27d78 !important;
}

/* Текст пустой таблицы Entries / Exits */
.live-table td[colspan] {
    color: #8d96a0 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-align: center !important;
}

/* Более спокойный фон заголовка таблицы */
.live-table thead th {
    background: #1d1f21 !important;
    border-color: #34383c !important;
}

.live-table tbody td {
    border-color: #34383c !important;
}

@media (max-width: 768px), (pointer: coarse) {
    .live-card h4,
    .live-card h4[style] {
        font-size: 13px !important;
    }

    .live-card .live-muted {
        font-size: 10px !important;
    }

    .live-table th {
        font-size: 9px !important;
    }

    .live-table td {
        font-size: 10px !important;
    }

    .live-table .live-badge,
    .live-table [class*="badge"],
    .live-table [class*="-badge"] {
        font-size: 9px !important;
    }
}

/* LIVE TABLE TONE END */


/* MOBILE COMPACT TABLE V5 START */

@media (max-width: 768px), (pointer: coarse) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /*
       Заголовок таблицы на телефоне не нужен.
       Подписи 1/X/2 будут показаны возле коэффициентов.
    */
    body #datatable thead {
        display: none !important;
    }

    body #datatable,
    body #datatable tbody {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        table-layout: auto !important;
    }

    /*
       Две компактные строки:

       TIME | MATCH-----------------| TIPS
       TIME | 1       X       2     | TIPS
    */
    body #datatable tbody tr {
        display: grid !important;

        grid-template-columns:
            62px
            repeat(3, minmax(0, 1fr))
            55px !important;

        grid-template-areas:
            "time match match match tips"
            "time odd1 oddx odd2 tips" !important;

        grid-auto-rows: min-content !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 78px !important;

        margin: 0 !important;
        padding: 8px 4px !important;

        column-gap: 5px !important;
        row-gap: 5px !important;

        align-items: center !important;

        background: #252729 !important;
        border: 0 !important;
        border-bottom: 1px solid #373a3e !important;
        border-radius: 0 !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body #datatable tbody tr:hover {
        background: #282a2d !important;
    }

    body #datatable tbody td {
        display: block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Сбрасываем псевдоэлементы старых вариантов. */
    body #datatable tbody td::before {
        display: none !important;
        content: none !important;
    }

    /* TIME */
    body #datatable tbody td:nth-child(1) {
        grid-area: time !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        align-self: stretch !important;

        padding-right: 5px !important;
        border-right: 1px solid #36393d !important;
    }

    /* MATCH */
    body #datatable tbody td:nth-child(2) {
        grid-area: match !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        padding: 0 3px !important;
    }

    /* 1 */
    body #datatable tbody td:nth-child(3) {
        grid-area: odd1 !important;
    }

    /* X */
    body #datatable tbody td:nth-child(4) {
        grid-area: oddx !important;
    }

    /* 2 */
    body #datatable tbody td:nth-child(5) {
        grid-area: odd2 !important;
    }

    /* TIPS */
    body #datatable tbody td:nth-child(6) {
        grid-area: tips !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        align-self: stretch !important;

        padding-left: 4px !important;
        border-left: 1px solid #36393d !important;

        text-align: center !important;
        overflow: hidden !important;
    }

    /*
       Команды.
    */
    body #datatable .match-cell {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            17px
            minmax(0, 1fr) !important;

        align-items: center !important;

        width: 100% !important;
        min-width: 0 !important;

        gap: 4px !important;
    }

    body #datatable .match-team {
        width: 100% !important;
        min-width: 0 !important;
    }

    body #datatable .match-team-name,
    body #datatable span.team {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        color: #c8ced5 !important;

        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    body #datatable .match-vs {
        width: 17px !important;
        min-width: 17px !important;

        color: #7f8790 !important;

        font-size: 8px !important;
        font-weight: 500 !important;
        text-align: center !important;
    }

    /*
       XGB-показатели.
    */
    body #datatable .xgb-main,
    body #datatable .xgb-low {
        display: inline-block !important;

        margin-top: 2px !important;
        padding: 1px 3px !important;

        font-size: 7px !important;
        font-weight: 550 !important;
        line-height: 1.1 !important;
    }

    /*
       Страна и номер тура.
    */
    body #datatable .match-meta-line {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 4px 0 0 !important;
        padding: 0 !important;

        gap: 4px !important;
        white-space: nowrap !important;
    }

    body #datatable .country-with-flag {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;

        gap: 3px !important;
    }

    body #datatable .match-meta-line .team-flag img,
    body #datatable .match-meta-line .country-flag-img {
        display: block !important;

        width: 16px !important;
        height: 10px !important;

        object-fit: cover !important;
    }

    body #datatable .country-name {
        color: #9ea6af !important;

        font-size: 7px !important;
        font-weight: 550 !important;
        line-height: 10px !important;
    }

    body #datatable .round-compact {
        color: #7f8892 !important;

        font-size: 7px !important;
        font-weight: 450 !important;
        line-height: 10px !important;
    }

    /*
       Коэффициенты: плоские, без кубиков.
    */
    body #datatable tbody td:nth-child(3),
    body #datatable tbody td:nth-child(4),
    body #datatable tbody td:nth-child(5) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 25px !important;

        padding: 1px 2px !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body #datatable tbody td:nth-child(3)::before,
    body #datatable tbody td:nth-child(4)::before,
    body #datatable tbody td:nth-child(5)::before {
        display: block !important;

        margin-bottom: 2px !important;

        color: #707984 !important;

        font-size: 6px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    body #datatable tbody td:nth-child(3)::before {
        content: "1" !important;
    }

    body #datatable tbody td:nth-child(4)::before {
        content: "X" !important;
    }

    body #datatable tbody td:nth-child(5)::before {
        content: "2" !important;
    }

    body #datatable .odd-col-cell,
    body #datatable .odd-number {
        margin: 0 !important;

        color: #bdc5cd !important;

        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /*
       Tips.
    */
    body #datatable tbody td:nth-child(6)::before {
        display: block !important;
        content: "TIPS" !important;

        margin-bottom: 4px !important;

        color: #707984 !important;

        font-size: 6px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    body #datatable .tips,
    body #datatable .tips1 {
        display: block !important;

        width: 100% !important;

        color: #aeb6bf !important;

        font-size: 7px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /*
       Время и счёт.
    */
    body #datatable .date-start {
        margin: 0 0 3px !important;

        color: #9ca5ae !important;

        font-size: 7px !important;
        font-weight: 450 !important;
        line-height: 1.15 !important;

        text-align: center !important;
        white-space: normal !important;
    }

    body #datatable .score {
        padding: 3px 5px !important;

        font-size: 14px !important;
        line-height: 1 !important;
    }

    body #datatable .live-date-box {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;

        margin: 0 auto !important;
        padding: 4px 2px !important;

        border-radius: 5px !important;
        box-sizing: border-box !important;
    }

    body #datatable .live-date-time {
        font-size: 7px !important;
    }

    body #datatable .live-date-score {
        font-size: 16px !important;
    }

    body #datatable .live-btn {
        min-width: 38px !important;

        padding: 3px !important;

        font-size: 7px !important;
    }

    body #datatable .bg-action-badge {
        max-width: 48px !important;

        padding: 2px 3px !important;

        font-size: 6px !important;
        line-height: 1.1 !important;

        white-space: normal !important;
    }

    /*
       Пагинация.
    */
    body #datatable_wrapper .datatable-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        padding: 15px 4px !important;
    }

    body #datatable_wrapper .dataTables_paginate {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;

        gap: 3px !important;
    }
}


@media (max-width: 380px) {

    body #datatable tbody tr {
        grid-template-columns:
            57px
            repeat(3, minmax(0, 1fr))
            49px !important;

        padding-left: 3px !important;
        padding-right: 3px !important;

        column-gap: 3px !important;
    }

    body #datatable .match-team-name,
    body #datatable span.team {
        font-size: 9px !important;
    }

    body #datatable .odd-col-cell,
    body #datatable .odd-number {
        font-size: 10px !important;
    }
}

/* MOBILE COMPACT TABLE V5 END */