/* ────────────────────────────────────────────────────────────────
   BetLinePro — style.css   (dark analytics theme, BLA-faithful)
   ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Prevent horizontal overflow / viewport width lock ────────── */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

:root {
    --bg:        #0d1117;
    --bg-card:   #161b22;
    --bg-input:  #1c2128;
    --border:    #30363d;
    --text:      #e6edf3;
    --muted:     #7d8590;
    --accent:    #2f81f7;
    --accent-h:  #388bfd;
    --green:     #3fb950;
    --red:       #f85149;
    --orange:    #d29922;
    --live:      #ff7b54;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;   /* belt-and-suspenders: no horizontal scroll */
    max-width: 100%;      /* never exceed viewport width */
    position: relative;   /* stacking context — contain positioned children */
}

input, select, button { font-family: inherit; font-size: 14px; }
a { text-decoration: none; }

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-card); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─── Utils ──────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   AUTH SCREEN
   ═══════════════════════════════════════════════════════════════ */
.auth-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse 80% 40% at 50% -10%, rgba(47,129,247,.12) 0%, transparent 70%);
}

.auth-box {
    width: 100%;
    max-width: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 40px 36px;
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}
.logo-text { font-size: 22px; font-weight: 700; color: var(--text); }
.logo-text span { color: var(--accent); }

.auth-subtitle {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 28px;
}

/* Tab bar */
.tab-bar {
    display: flex;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 24px;
}
.tab {
    flex: 1;
    padding: 7px 0;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    color: var(--muted);
    transition: all .15s;
}
.tab.active { background: var(--accent); color: #fff; }
.tab:not(.active):hover { color: var(--text); }

/* Auth Form */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
    font-size: 12px; font-weight: 500; color: var(--muted);
    text-transform: uppercase; letter-spacing: .4px;
}
.field input {
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}
.field input:focus { border-color: var(--accent); }

.form-msg { font-size: 12px; border-radius: 6px; padding: 8px 12px; min-height: 0; }
.form-msg:empty { display: none; }
.form-msg.error:not(:empty) { display: block; color: var(--red); background: rgba(248,81,73,.08); border: 1px solid rgba(248,81,73,.25); }
.form-msg.success:not(:empty) { display: block; color: var(--green); background: rgba(63,185,80,.08); border: 1px solid rgba(63,185,80,.25); }

.btn-submit {
    width: 100%;
    padding: 11px;
    margin-top: 4px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-submit:hover { background: var(--accent-h); }
.btn-submit:disabled { opacity: .55; cursor: not-allowed; }

.auth-footer { margin-top: 24px; font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   APP LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.app-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ─── Header ─────────────────────────────────────────────────── */
.header {
    height: 48px;
    min-height: 48px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    z-index: 100;
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}
.brand-text { font-size: 16px; font-weight: 700; color: var(--text); }
.brand-text span { color: var(--accent); }

/* Toolbar buttons */
.header-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.toolbar-btn {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.toolbar-btn:hover { color: var(--text); border-color: var(--muted); }
.toolbar-btn.btn-danger { color: var(--orange); border-color: rgba(210,153,34,.35); }
.toolbar-btn.btn-danger:hover { background: rgba(210,153,34,.12); }
.toolbar-btn .badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 3px;
    min-width: 16px;
    text-align: center;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-pill {
    font-size: 12px;
    color: var(--muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 12px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-logout {
    padding: 4px 12px;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.btn-logout:hover { border-color: var(--red); color: var(--red); }

/* ─── Loading Overlay ────────────────────────────────────────── */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13,17,23,.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.loading-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 14px; color: var(--muted); }
.progress-bar {
    width: 200px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width .3s ease;
    width: 0;
}

/* ─── Table area ─────────────────────────────────────────────── */
.table-area {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.table-scroll-wrap {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN TABLE — BLA-faithful
   ═══════════════════════════════════════════════════════════════ */
.main-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

/* Group header row */
.main-table thead tr:first-child th {
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-align: center;
    background: var(--bg-card);
    border-bottom: 2px solid var(--accent);
    border-right: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 12;
}
.main-table thead tr:first-child th.group-header { color: var(--text); }

/* Column headers */
.col-header {
    padding: 4px 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: center;
    color: var(--muted);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid rgba(48,54,61,.5);
    white-space: nowrap;
    position: sticky;
    top: 27px;
    z-index: 11;
    cursor: default;
    user-select: none;
    min-width: 40px;
    max-width: 60px;
}
.col-header.sortable { cursor: pointer; }
.col-header.sortable:hover { color: var(--text); }

/* Strategy header (odds columns) */
.col-header.strategy-header { cursor: pointer; transition: background .15s; }
/* Solid фоны — без прозрачности, иначе прокрученные данные просвечивают сквозь sticky-header */
.col-header.strategy-header:hover { background: #19273b; }
.col-header.strategy-active {
    background: #1a2d48 !important;
    color: var(--accent) !important;
    box-shadow: inset 0 -2px 0 var(--accent);
}
.col-header.strategy-filtered {
    background: #1c3128 !important;
    color: var(--green) !important;
    box-shadow: inset 0 -2px 0 var(--green);
}

/* Filter row */
.filter-row th {
    padding: 2px 2px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid rgba(48,54,61,.5);
    position: sticky;
    top: 50px;
    z-index: 10;
    min-width: 40px;
    max-width: 60px;
}
.filter-row th.filter-cell { vertical-align: middle; }

/* Filter wrapper (BLA pattern: input + clear button) */
.filter-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.filter-input {
    width: 100%;
    height: 22px;
    padding: 0 16px 0 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    font-size: 11px;
    outline: none;
    transition: border-color .15s;
    color-scheme: dark;
}
.filter-input:focus { border-color: var(--accent); }
.filter-input::placeholder { color: rgba(125,133,144,.5); }

.filter-clear {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    color: var(--muted);
    cursor: pointer;
    display: none;
    border-radius: 3px;
}
.filter-clear:hover { color: var(--red); background: rgba(248,81,73,.12); }
.filter-wrapper.has-value .filter-clear { display: block; }
.filter-wrapper.has-value .filter-input { border-color: var(--accent); background: rgba(47,129,247,.06); }

/* ── Data rows ── */
.main-table tbody tr {
    transition: background .1s;
}
.main-table tbody tr:last-child td { border-bottom: none; }
.main-table tbody tr:hover td { background: #1a2028; }
.main-table tbody tr:hover td.sticky-left { background: #1a2028; }

.main-table tbody td {
    padding: 3px 5px;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    color: var(--text);
    font-size: 12px;
    border-right: 1px solid rgba(48,54,61,.4);
    border-bottom: 1px solid rgba(48,54,61,.6);
    background: var(--bg);
    min-width: 40px;
    max-width: 60px;
}
.main-table tbody td:last-child { border-right: none; }

/* ── Column size classes (BLA-faithful) ── */
td.wide, th.wide       { min-width: 170px; max-width: 170px; }
td.medium, th.medium    { min-width: 145px; max-width: 145px; }
td.small, th.small      { min-width: 90px;  max-width: 90px;  }
td.font-bold            { font-weight: 700; }

/* ── Sticky left columns ── */
.sticky-left {
    position: sticky !important;
    background-color: var(--bg-card);
    z-index: 3;
}
.col-header.sticky-left,
.filter-row th.sticky-left { z-index: 20 !important; }
.group-header.sticky-left   { z-index: 21 !important; }

/* Cell types */
.td-date { color: var(--muted); font-size: 11px; }
.td-time { color: var(--muted); font-size: 11px; text-align: center; }
.td-day  { color: var(--muted); font-size: 10px; text-align: center; }
.td-country { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.td-league  { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.td-team {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.td-score {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    min-width: 50px;
}
.td-ht {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--muted);
    min-width: 44px;
}
/* Структура ячейки счёта */
.match-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}
.mc-minute {
    font-size: 10px;
    color: var(--muted);
    font-family: inherit;
    font-weight: 400;
}
.mc-score {
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: .5px;
}
.mc-win  { color: #3fb950; }
.mc-loss { color: #f85149; }
.mc-draw { color: var(--text); }
.td-num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; min-width: 44px; }
.td-num.has-val { color: #c9d1d9; }
.td-bold { font-weight: 700; }

/* Cell clickability */
.main-table tbody td[data-field] { cursor: pointer; }
.main-table tbody td[data-field]:hover { background: rgba(47,129,247,.06); }

/* Strategy highlights on odds cells */
.winning-bet { background: rgba(63,185,80,.18) !important; color: var(--green) !important; }
.losing-bet  { background: rgba(248,81,73,.06) !important; color: var(--muted) !important; }
.push-bet    { background: rgba(125,133,144,.10) !important; color: var(--muted) !important; }

/* Odds movement highlighting (opening → closing) */
.odds-down { background: rgba(63,185,80,.12) !important; color: var(--green) !important; }
.odds-up   { background: rgba(248,81,73,.10) !important; color: var(--red) !important; }

/* Movement toggle button active state */
.toolbar-btn.movement-active {
    background: rgba(47,129,247,.18);
    color: var(--accent) !important;
    border-color: var(--accent);
}

/* Server search active state */
.toolbar-btn.search-active {
    background: rgba(63,185,80,.22);
    color: var(--green) !important;
    border-color: var(--green);
}

/* Score cell combo highlight */
.strategy-win  { background: rgba(63,185,80,.22) !important; color: var(--green) !important; }
.strategy-push { background: rgba(125,133,144,.15) !important; }

/* Row highlighting */
.highlighted-row td { background: #192235 !important; }
.highlighted-row td.sticky-left { background: #192235 !important; }
.bookmarked { border-left: 3px solid var(--orange) !important; }

/* ── Sticky opaque override ──
   Должно идти ПОСЛЕ всех rgba-подсветок (strategy-win, winning-bet и т.д.),
   чтобы sticky-ячейки никогда не просвечивали при горизонтальной прокрутке.
   Более специфичный селектор + !important гарантирует победу над любым rgba-фоном. */
.main-table tbody td.sticky-left {
    background-color: var(--bg-card) !important;
}
.main-table tbody tr:hover td.sticky-left {
    background-color: #1a2028 !important;
}
.main-table tbody .highlighted-row td.sticky-left {
    background-color: #192235 !important;
}

/* Sort arrow */
.sort-arrow {
    display: inline-block;
    margin-left: 3px;
    font-size: 9px;
    opacity: .7;
    vertical-align: middle;
}
.sort-arrow.sort-idle {
    opacity: .2;
    font-size: 8px;
}
.col-header.sortable:hover .sort-arrow.sort-idle { opacity: .5; }

/* Countdown timer in time cell */
.countdown {
    font-size: 9px;
    line-height: 1.1;
    color: #3fb950;
    opacity: .85;
    margin-top: 1px;
    letter-spacing: .1px;
}
.countdown.countdown-soon {
    color: var(--orange);
    opacity: 1;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   FILTER STATS PANEL (BLA port)
   ═══════════════════════════════════════════════════════════════ */
.filter-stats-panel {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 8px 16px;
    overflow-x: auto;
}
.filter-stats-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}
.filter-stats-content {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.stat-item {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    min-width: 120px;
    font-size: 11px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.stat-item:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.stat-item.success:hover { border-color: rgba(63,185,80,.8); }
.stat-item.warning:hover { border-color: rgba(210,153,34,.8); }
.stat-item.danger:hover  { border-color: rgba(248,81,73,.6); }
.stat-item .stat-bet-hint {
    text-align: center;
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px;
    opacity: 0;
    transition: opacity .15s;
}
.stat-item:hover .stat-bet-hint {
    opacity: 1;
}
.stat-item.success { border-color: rgba(63,185,80,.4); }
.stat-item.warning { border-color: rgba(210,153,34,.4); }
.stat-item.danger  { border-color: rgba(248,81,73,.3); }
.stat-header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.stat-market { font-weight: 600; color: var(--text); }
.stat-odds   { color: var(--muted); }
.stat-footer { display: flex; justify-content: space-between; gap: 8px; }
.stat-result { color: var(--muted); }
.stat-percentage { font-weight: 700; }
.stat-item.success .stat-percentage { color: var(--green); }
.stat-item.warning .stat-percentage { color: var(--orange); }
.stat-item.danger  .stat-percentage { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   PROFIT PANEL (BLA port)
   ═══════════════════════════════════════════════════════════════ */
.profit-panel {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 6px 16px;
}
.profit-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 4px;
}
.profit-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.profit-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.profit-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: .3px;
}
.profit-value {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.profit-value.positive { color: var(--green); }
.profit-value.negative { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.footer-bar {
    height: 36px;
    min-height: 36px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    justify-content: space-between;
    gap: 12px;
    z-index: 10;
}
.footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}
.fstat b { color: var(--text); }
.fstat-sep { color: var(--border); }

.footer-center {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pg-btn {
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
}
.pg-btn:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.pg-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.pg-dots { color: var(--muted); font-size: 11px; padding: 0 2px; }
.pg-info { font-size: 11px; color: var(--muted); margin-left: 8px; }

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(3px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
}
.modal-close {
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 5px;
    cursor: pointer;
    transition: all .15s;
}
.modal-close:hover { border-color: var(--red); color: var(--red); }
.modal-body {
    overflow-y: auto;
    padding: 12px;
}

/* My Leagues modal */
.league-country { margin-bottom: 6px; }
.league-country-head {
    font-weight: 600; font-size: 13px; color: var(--accent);
    padding: 6px 4px 2px; border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}
.league-country-cnt { font-weight: 400; color: var(--muted); font-size: 11px; }
.league-item {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 8px; cursor: pointer; font-size: 13px;
    border-radius: 4px; transition: background .1s;
}
.league-item:hover { background: rgba(255,255,255,.05); }
.league-item input[type="checkbox"] {
    accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer;
}

/* Bookmark items (shared for match & filter bookmarks) */
.bm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}
.bm-item:last-child { border-bottom: none; }
.bm-item:hover { background: rgba(255,255,255,.03); }
.bm-info {
    flex: 1;
    cursor: pointer;
    min-width: 0;
}
.bm-name { font-size: 13px; font-weight: 600; color: var(--text); }
.bm-desc { font-size: 11px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-date { font-size: 10px; color: var(--border); margin-top: 2px; }
.bm-del {
    width: 24px; height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 0;
}
.bm-del:hover { border-color: var(--red); color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   MATCH DETAIL POPUP
   ═══════════════════════════════════════════════════════════════ */
.md-popup {
    width: 560px; max-width: 96vw; max-height: 90vh;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.md-header {
    padding: 12px 16px; display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--border); position: relative;
}
.md-header-info { flex: 1; }
.md-header-teams { font-size: 15px; font-weight: 700; color: var(--text); }
.md-header-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.md-header-score { font-size: 20px; font-weight: 800; color: var(--accent); letter-spacing: 1px; margin-right: 32px; }
.md-header-score.no-score { font-size: 16px; color: var(--muted); }
.md-close { position: absolute; top: 8px; right: 8px; }

.md-tabs {
    display: flex; border-bottom: 2px solid var(--border); background: var(--bg-card);
}
.md-tab {
    flex: 1; padding: 8px 0; text-align: center; font-size: 12px; font-weight: 700;
    cursor: pointer; color: var(--muted); border: none; background: transparent;
    border-bottom: 3px solid transparent; transition: all .15s;
    text-transform: uppercase; letter-spacing: .5px;
}
.md-tab:hover { color: var(--text); background: rgba(47,129,247,.05); }
.md-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.md-body { flex: 1; overflow-y: auto; }
.md-panel { display: none; padding: 14px 16px; }
.md-panel.active { display: block; }

/* Sub-tabs inside panels */
.md-subtabs {
    display: flex; gap: 0; margin-bottom: 12px;
    border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.md-subtab {
    flex: 1; padding: 6px 4px; text-align: center; font-size: 11px; font-weight: 600;
    cursor: pointer; color: var(--muted); background: var(--bg-card);
    border: none; border-right: 1px solid var(--border); transition: all .15s;
}
.md-subtab:last-child { border-right: none; }
.md-subtab:hover { color: var(--text); }
.md-subtab.active { background: var(--accent); color: #fff; }
.md-subpanel { display: none; }
.md-subpanel.active { display: block; }

/* Form badges */
.md-form-block { margin-bottom: 14px; }
.md-form-row {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px;
    border-bottom: 1px solid rgba(48,54,61,.4);
}
.md-form-name {
    width: 130px; font-weight: 700; font-size: 11px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}
.md-form-badges { display: flex; gap: 3px; flex: 1; }
.md-form-badge {
    width: 22px; height: 22px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.md-form-badge.W { background: var(--green); }
.md-form-badge.D { background: var(--orange); }
.md-form-badge.L { background: var(--red); }
.md-form-summary { font-size: 10px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.md-form-summary .fw { color: var(--green); font-weight: 700; }
.md-form-summary .fd { color: var(--orange); font-weight: 700; }

/* Form rows — card style (md-form-row2) */
.md-form-row2 { margin-bottom: 10px; }
.md-form-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.md-form-name2 {
    font-weight: 700; font-size: 12px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.md-form-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.md-form-wr { font-weight: 700; color: var(--text); }
.md-form-meta .fw { color: var(--green); font-weight: 700; }
.md-form-meta .fd { color: var(--orange); font-weight: 700; }
.md-form-meta .fl { color: var(--red); font-weight: 700; }
.md-form-fatigue { font-size: 10px; color: var(--orange); font-weight: 700; }
.md-form-cards { display: flex; gap: 5px; }
.md-form-card {
    flex: 1; min-width: 42px; border-radius: 6px; padding: 4px 3px; text-align: center;
    border: 1px solid var(--border); background: var(--bg-card); font-size: 10px; line-height: 1.3;
}
.md-form-card.W { border-color: rgba(63,185,80,.4); background: rgba(63,185,80,.07); }
.md-form-card.D { border-color: rgba(210,153,34,.4); background: rgba(210,153,34,.07); }
.md-form-card.L { border-color: rgba(248,81,73,.4); background: rgba(248,81,73,.07); }
.md-form-card.empty { opacity: .3; }
.md-form-card-res { font-weight: 800; font-size: 11px; }
.md-form-card.W .md-form-card-res { color: var(--green); }
.md-form-card.D .md-form-card-res { color: var(--orange); }
.md-form-card.L .md-form-card-res { color: var(--red); }
.md-form-card-score { font-weight: 700; color: var(--text); }
.md-form-card-opp { color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-form-card-date { color: var(--muted); font-size: 9px; }
.md-form-summary .fl { color: var(--red); font-weight: 700; }

/* Analytics comparison block (ml features) */
.md-ana-block {
    background: rgba(47,129,247,.04); border: 1px solid rgba(47,129,247,.12);
    border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.md-ana-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(47,129,247,.15);
}
.md-ana-team-label {
    font-size: 11px; font-weight: 700; color: var(--accent); max-width: 140px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-ana-team-label.right { text-align: right; }
.md-ana-center-label { font-size: 11px; font-weight: 800; color: var(--text); letter-spacing: .3px; }
.md-ana-row {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 4px; padding: 3px 0;
    border-bottom: 1px solid rgba(48,54,61,.3);
}
.md-ana-row:last-child { border-bottom: none; }
.md-ana-row.coach-h2h { grid-template-columns: 1fr; }
.md-ana-val {
    font-size: 11px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-ana-val.right { text-align: right; }
.md-ana-win { color: var(--green) !important; }
.md-ana-tired { color: var(--orange) !important; }
.md-ana-label {
    font-size: 10px; color: var(--muted); text-align: center;
    white-space: nowrap; padding: 0 4px;
}
.md-ana-label.full { grid-column: 1 / -1; text-align: left; color: var(--muted); font-size: 10px; }
.md-ana-bar {
    display: flex; height: 3px; border-radius: 2px; overflow: hidden;
    margin: 1px 0 3px;
}
.md-ana-bar-h { background: var(--accent); height: 100%; transition: width .3s; }
.md-ana-bar-a { background: var(--red); height: 100%; transition: width .3s; }
.md-ana-bar-h.winner { background: var(--green); }
.md-ana-bar-a.winner { background: var(--green); }
.md-ana-row.coach-h2h .fw { color: var(--green); font-weight: 700; }
.md-ana-row.coach-h2h .fd { color: var(--orange); font-weight: 700; }
.md-ana-row.coach-h2h .fl { color: var(--red); font-weight: 700; }


/* H2H visual bar */
.md-h2h-bar-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.md-h2h-bar-team { font-size: 10px; font-weight: 700; color: var(--text); text-align: center; min-width: 50px; line-height: 1.3; }
.md-h2h-bar-team.home { color: var(--accent); }
.md-h2h-bar-team.away { color: var(--red); }
.md-h2h-bar-pct { font-size: 12px; font-weight: 900; }
.md-h2h-bar-track { flex: 1; display: flex; border-radius: 6px; overflow: hidden; height: 28px; }
.md-h2h-bar-seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; transition: width .3s; }
.md-h2h-bar-seg.home { background: var(--accent); }
.md-h2h-bar-seg.draw { background: var(--orange); }
.md-h2h-bar-seg.away { background: var(--red); }

/* H2H pills */
.md-h2h-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.md-h2h-pill {
    display: flex; flex-direction: column; align-items: center; padding: 4px 8px;
    border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card);
    font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px;
}
.md-h2h-pill span { font-size: 13px; font-weight: 900; color: var(--text); margin-top: 1px; }
.md-h2h-pill.btts { border-color: rgba(63,185,80,.3); }
.md-h2h-pill.btts span { color: var(--green); }
.md-h2h-pill.o25 { border-color: rgba(210,153,34,.3); }
.md-h2h-pill.o25 span { color: var(--orange); }

/* H2H trend bubbles */
.md-h2h-trend { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.md-h2h-trend-label { font-size: 10px; color: var(--muted); font-weight: 600; }
.md-h2h-trend-bubble {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff; cursor: default;
}
.md-h2h-trend-bubble.W { background: var(--green); }
.md-h2h-trend-bubble.D { background: var(--orange); }
.md-h2h-trend-bubble.L { background: var(--red); }

/* Form duo (two team summaries side by side) */
.md-form-duo { display: flex; gap: 10px; margin-bottom: 10px; }
.md-form-duo > * { flex: 1; min-width: 0; }

/* Form summary card */
.md-form-summary { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.md-form-summary-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 8px; }

/* Prediction tab — recommendation block */
.md-an-rec {
    border-radius: 8px; padding: 10px 14px; margin-bottom: 12px;
}
.md-an-rec-neutral { background: rgba(125,133,144,.08); border: 1px solid rgba(125,133,144,.2); color: var(--muted); font-size: 12px; }
.md-an-rec-value { background: rgba(63,185,80,.08); border: 1px solid rgba(63,185,80,.3); }
.md-an-rec-label { font-size: 10px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.md-an-rec-main { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.md-an-rec-outcome { font-size: 22px; font-weight: 900; color: var(--text); }
.md-an-rec-odds { font-size: 18px; font-weight: 700; color: var(--accent); }
.md-an-rec-edge { font-size: 13px; font-weight: 700; color: var(--green); }
.md-an-rec-sub { font-size: 11px; color: var(--muted); }
.md-an-agree { font-size: 11px; font-weight: 700; color: var(--green); }

/* Prediction — score tiles */
.md-an-scores { }
.md-an-scores-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.md-an-score-tile {
    display: flex; flex-direction: column; align-items: center;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 10px; min-width: 52px;
}
.md-an-score-tile.top { border-color: var(--orange); background: rgba(210,153,34,.08); }
.md-an-score-rank { color: var(--orange); font-size: 12px; font-weight: 900; }
.md-an-score-rank-num { color: var(--muted); font-size: 10px; font-weight: 700; }
.md-an-score-digits { font-size: 16px; font-weight: 900; color: var(--text); }
.md-an-score-prob { font-size: 10px; color: var(--muted); }

/* Prediction — value bets table row highlight */
.md-an-vb-row td:first-child { color: var(--green) !important; }
.md-an-vb-row { background: rgba(63,185,80,.05); }
/* Odds movement spark-line block */
.md-odds-mov {
    background: rgba(255,255,255,.03); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
}
.md-odds-mov-title {
    font-size: 10px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .5px;
    padding-bottom: 6px; margin-bottom: 6px;
    border-bottom: 1px solid rgba(48,54,61,.5);
}
.md-odds-mov-row {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 0; border-bottom: 1px solid rgba(48,54,61,.3);
}
.md-odds-mov-row:last-child { border-bottom: none; }
.md-odds-mov-lbl { font-weight: 700; font-size: 12px; width: 22px; flex-shrink: 0; }
.md-odds-mov-nums {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; width: 116px; flex-shrink: 0;
}
.md-odds-mov-op  { color: var(--muted); font-size: 11px; }
.md-odds-mov-arr { color: var(--border); font-size: 11px; }
.md-odds-mov-cl  { font-size: 12px; }
.md-odds-mov-svg { flex: 1; display: flex; align-items: center; }
.odds-spark      { display: block; overflow: visible; }
.md-odds-mov-pct { font-size: 11px; font-weight: 700; width: 46px; text-align: right; flex-shrink: 0; }

/* Comparison table */
.md-cmp-section { margin-bottom: 12px; }
.md-cmp-title {
    font-size: 11px; font-weight: 700; color: var(--muted);
    margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px;
    padding-bottom: 3px; border-bottom: 1px solid rgba(48,54,61,.5);
}
.md-cmp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.md-cmp-table th {
    padding: 4px 5px; font-size: 9px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .3px;
    border-bottom: 1px solid var(--border);
}
.md-cmp-table th:first-child { text-align: left; width: 45%; }
.md-cmp-table th:nth-child(2),
.md-cmp-table th:nth-child(3) { text-align: center; width: 27.5%; }
.md-cmp-table td {
    padding: 4px 5px; color: var(--text);
    border-bottom: 1px solid rgba(48,54,61,.4);
}
.md-cmp-table td:first-child { color: var(--muted); font-size: 10px; }
.md-cmp-table td:nth-child(2),
.md-cmp-table td:nth-child(3) { text-align: center; font-weight: 600; }
.md-cmp-table tr:last-child td { border-bottom: none; }
.md-cmp-table tr:hover td { background: rgba(47,129,247,.06); }
.md-cmp-better { color: #3fb950 !important; border: 1px solid rgba(63,185,80,.45); border-radius: 4px; padding: 1px 6px; }
.md-cmp-worse { color: #f85149 !important; border: 1px solid rgba(248,81,73,.45); border-radius: 4px; padding: 1px 6px; }

/* Recent matches list */
.md-recent-title {
    font-size: 10px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .5px; padding: 6px 0 4px; margin-top: 4px;
}
.md-recent {
    display: flex; align-items: center; gap: 5px; padding: 5px 6px;
    border-bottom: 1px solid rgba(48,54,61,.4); font-size: 11px; color: var(--text);
}
.md-recent:last-child { border-bottom: none; }
.md-recent:hover { background: rgba(47,129,247,.06); }
.md-rm-date { width: 64px; color: var(--muted); font-size: 10px; flex-shrink: 0; }
.md-rm-league { width: 28px; flex-shrink: 0; font-size: 12px; text-align: center; }
.md-rm-teams { flex: 1; min-width: 0; }
.md-rm-team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 0; font-size: 11px; }
.md-rm-team.is-subject { font-weight: 700; }
.md-rm-team.clr-home { color: var(--green); }
.md-rm-team.clr-away { color: var(--accent); }
.md-rm-score { width: 22px; text-align: center; font-weight: 700; flex-shrink: 0; font-size: 11px; }
.md-rm-result {
    width: 26px; height: 20px; display: flex; align-items: center; justify-content: center;
    border-radius: 4px; font-weight: 800; font-size: 10px; flex-shrink: 0; color: #fff;
}
.md-rm-result.W { background: var(--green); }
.md-rm-result.D { background: var(--orange); }
.md-rm-result.L { background: var(--red); }

/* Standings */
.md-standings-panel {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; overflow: hidden; margin-bottom: 8px;
}
.md-standings-header {
    padding: 7px 10px; font-weight: 700; font-size: 12px; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.md-standings-header small { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 10px; }
.md-st-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.md-st-table th {
    padding: 4px 4px; text-align: center; font-weight: 600; color: var(--muted);
    border-bottom: 1px solid var(--border); font-size: 9px; text-transform: uppercase;
    white-space: nowrap;
}
.md-st-table th:nth-child(2) { text-align: left; }
.md-st-table td {
    padding: 3px 4px; text-align: center; color: var(--text);
    border-bottom: 1px solid rgba(48,54,61,.4); white-space: nowrap;
}
.md-st-table td:nth-child(1) { font-weight: 700; color: var(--muted); width: 22px; }
.md-st-table td:nth-child(2) {
    text-align: left; font-weight: 500;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}
.md-st-table td:last-child { font-weight: 700; }
.md-st-table tr:last-child td { border-bottom: none; }
.md-st-table tr:hover td { background: rgba(47,129,247,.08); }
.md-st-hl-home td { background: rgba(63,185,80,.2) !important; font-weight: 700 !important; color: var(--green) !important; }
.md-st-hl-home td:nth-child(1) { border-left: 3px solid var(--green); }
.md-st-hl-away td { background: rgba(47,129,247,.2) !important; font-weight: 700 !important; color: var(--accent) !important; }
.md-st-hl-away td:nth-child(1) { border-left: 3px solid var(--accent); }

/* H2H stats block */
.md-h2h-stats { display: flex; gap: 6px; margin-bottom: 10px; text-align: center; }
.md-h2h-stat-card {
    flex: 1; padding: 6px; border-radius: 6px;
}
.md-h2h-stat-card.home { background: rgba(63,185,80,.12); border: 1px solid rgba(63,185,80,.35); }
.md-h2h-stat-card.draw { background: rgba(210,153,34,.12); border: 1px solid rgba(210,153,34,.35); }
.md-h2h-stat-card.away { background: rgba(47,129,247,.12); border: 1px solid rgba(47,129,247,.35); }
.md-h2h-stat-num { font-size: 18px; font-weight: 800; }
.md-h2h-stat-card.home .md-h2h-stat-num { color: var(--green); }
.md-h2h-stat-card.draw .md-h2h-stat-num { color: var(--orange); }
.md-h2h-stat-card.away .md-h2h-stat-num { color: var(--accent); }
.md-h2h-stat-label { font-size: 9px; color: var(--muted); margin-top: 2px; }

.md-loading { padding: 20px; text-align: center; color: var(--muted); font-size: 12px; }

/* Lineups */
.md-lu-predicted {
    background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 12px;
    color: var(--orange); text-align: center;
}
.md-lu-predicted-title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.md-lu-predicted-sub { color: var(--muted); font-size: 11px; }
.md-lu-header {
    display: flex; gap: 12px; align-items: stretch; margin-bottom: 12px; justify-content: center;
}
.md-lu-form-card {
    flex: 1; min-width: 100px; max-width: 200px; text-align: center; padding: 12px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card);
}
.md-lu-form-name { font-size: 22px; font-weight: 900; color: var(--accent); font-family: monospace; letter-spacing: 2px; }
.md-lu-form-team { font-size: 11px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-lu-form-coach { font-size: 10px; color: var(--muted); margin-top: 2px; }
.md-lu-form-rating { font-size: 14px; font-weight: 800; margin-top: 6px; }
.md-lu-vs { font-size: 22px; font-weight: 900; color: var(--muted); display: flex; align-items: center; justify-content: center; min-width: 50px; }
.md-lu-team-hdr {
    padding: 6px 10px; font-weight: 700; font-size: 11px; display: flex; justify-content: space-between;
    border-radius: 6px 6px 0 0;
}
.md-lu-team-hdr.home { background: rgba(63,185,80,.15); color: var(--green); }
.md-lu-team-hdr.away { background: rgba(47,129,247,.15); color: var(--accent); }
.md-lu-player {
    display: flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-bottom: 1px solid rgba(48,54,61,.3); font-size: 11px;
}
.md-lu-player:last-child { border-bottom: none; }
.md-lu-num { width: 22px; text-align: center; font-weight: 700; color: var(--muted); font-size: 10px; }
.md-lu-pos {
    width: 30px; text-align: center; font-weight: 700; font-size: 9px; padding: 2px 4px;
    border-radius: 3px; color: #fff;
}
.md-lu-pos-GK { background: #e67e22; }
.md-lu-pos-DEF { background: #3498db; }
.md-lu-pos-MID { background: #2ecc71; }
.md-lu-pos-FWD { background: #e74c3c; }
.md-lu-name { flex: 1; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-lu-rating {
    font-weight: 800; font-size: 11px; padding: 1px 6px; border-radius: 4px; min-width: 30px; text-align: center;
}
.md-lu-rating.high { background: rgba(46,204,113,.2); color: #2ecc71; }
.md-lu-rating.mid { background: rgba(241,196,15,.2); color: #f1c40f; }
.md-lu-rating.low { background: rgba(231,76,60,.2); color: #e74c3c; }
.md-lu-icons { display: flex; gap: 3px; font-size: 10px; }
.md-lu-subs-label { font-size: 10px; color: var(--muted); padding: 6px 10px; font-weight: 600; border-top: 1px dashed var(--border); }
.md-lu-injuries { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 5px 10px; background: rgba(231,76,60,.07); border-top: 1px solid rgba(231,76,60,.2); border-bottom: 1px solid rgba(231,76,60,.2); }
.md-lu-inj-label { font-size: 10px; font-weight: 700; color: #e74c3c; flex-shrink: 0; }
.md-lu-inj-player { font-size: 10px; color: var(--text); opacity: .8; }
.md-lu-inj-reason { color: var(--muted); font-style: italic; }
.md-lu-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.md-lu-events { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 10px; }
.md-lu-event { display: flex; gap: 6px; align-items: center; padding: 4px 8px; font-size: 11px; border-radius: 4px; margin-bottom: 2px; }
.md-lu-event.ev-home { background: rgba(63,185,80,.08); border-left: 3px solid var(--green); }
.md-lu-event.ev-away { background: rgba(47,129,247,.08); border-right: 3px solid var(--accent); flex-direction: row-reverse; text-align: right; }
.md-lu-event-min { width: 28px; text-align: center; font-weight: 700; color: var(--muted); font-size: 10px; flex-shrink: 0; }
.md-lu-event-icon { font-size: 13px; flex-shrink: 0; }
.md-lu-event-name { flex: 1; color: var(--text); }
.md-lu-event-team { font-size: 9px; color: var(--muted); flex-shrink: 0; }
.md-lu-stat-row { display: flex; align-items: center; padding: 4px 8px; font-size: 11px; }
.md-lu-stat-val { width: 40px; text-align: center; font-weight: 700; }
.md-lu-stat-label { flex: 1; text-align: center; color: var(--muted); font-size: 10px; }
.md-lu-stat-bar { flex: 3; display: flex; align-items: center; height: 6px; gap: 2px; }
.md-lu-stat-bar-h { height: 100%; background: var(--green); border-radius: 3px 0 0 3px; }
.md-lu-stat-bar-a { height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .header { padding: 0 10px; gap: 8px; }
    .header-brand { display: none; }
    .header-user .user-pill { display: none; }
    .filter-stats-content { flex-wrap: nowrap; overflow-x: auto; }
}

/* ─── Player Profile Modal ────────────────────────────────────── */
.md-lu-name-link { cursor: pointer; color: var(--accent); text-decoration: underline dotted; transition: color .15s; }
.md-lu-name-link:hover { color: #79c0ff; }
.pp-popup { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; width: min(700px, 96vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.pp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pp-title { font-size: 16px; font-weight: 700; color: var(--text); }
.pp-body { overflow-y: auto; padding: 14px 16px; flex: 1; }
.pp-bio { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; padding: 10px 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 6px; }
.pp-bio-row { display: flex; gap: 10px; font-size: 12px; }
.pp-bio-label { color: var(--muted); width: 130px; flex-shrink: 0; }
.pp-bio-val { color: var(--text); }
.pp-section-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.pp-career-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.pp-stat { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; text-align: center; min-width: 60px; }
.pp-stat-val { font-size: 18px; font-weight: 800; color: var(--text); }
.pp-stat-label { font-size: 9px; color: var(--muted); margin-top: 2px; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.pp-table th { color: var(--muted); font-weight: 600; padding: 5px 6px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pp-table td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text); white-space: nowrap; }
.pp-table tbody tr:hover { background: rgba(255,255,255,.04); }
.pp-scroll { max-height: 280px; overflow-y: auto; }
.pp-transfers { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.pp-transfer { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 8px; background: rgba(255,255,255,.03); border-radius: 5px; }
.pp-tr-from { color: var(--muted); flex: 1; }
.pp-tr-arrow { color: var(--accent); font-size: 14px; }
.pp-tr-to { color: var(--text); flex: 1; font-weight: 600; }
.pp-tr-date { color: var(--muted); font-size: 10px; flex-shrink: 0; }

/* ── Venue & Weather block (Match Detail popup) ───────────────── */
.md-venue-block {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    background: rgba(255,255,255,.03); border: 1px solid var(--border);
    border-radius: 7px; padding: 8px 12px; margin-bottom: 12px; font-size: 11px; color: var(--text);
}
.md-venue-item { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.md-venue-item b { color: var(--text); }
.md-weather-row {
    width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding-top: 6px; border-top: 1px solid var(--border); margin-top: 2px;
}
.md-weather-icon { font-size: 18px; }
.md-weather-desc { font-weight: 600; color: var(--text); }
.md-weather-val { color: var(--muted); font-size: 11px; }
.md-weather-tag {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    padding: 2px 6px; border-radius: 4px;
}
.md-weather-tag.forecast { background: rgba(47,129,247,.15); color: #5ba7ff; }
.md-weather-tag.archive  { background: rgba(46,213,115,.12); color: #2ed573; }

/* ML Features block */
.md-features-block { background: rgba(47,129,247,.04); border: 1px solid rgba(47,129,247,.12); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.md-feat-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.md-feat-row:last-child { border-bottom: none; }
.md-feat-label { flex: 0 0 140px; font-size: 11px; color: #8b949e; white-space: nowrap; }
.md-feat-val { flex: 1; font-size: 12px; color: #e6edf3; text-align: center; }
.md-f-w { color: #2ed573; font-weight: 700; }
.md-f-d { color: #ffa502; font-weight: 700; }
.md-f-l { color: #ff4757; font-weight: 700; }
/* ═══════════════════════════════════════════════════════════════
   MODERN ANALYTICS DASHBOARD
   ═══════════════════════════════════════════════════════════════ */
.md-analytics-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.md-an-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.md-an-card {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
}
.md-an-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.md-an-confidence {
    grid-column: span 1;
    align-items: center;
}
.md-an-gauge {
    position: relative;
    width: 60px;
    height: 60px;
    margin: auto;
}
.md-an-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.md-an-gauge path.circle {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
}
.md-an-gauge.low path.circle { stroke: var(--red); }
.md-an-gauge.med path.circle { stroke: var(--orange); }
.md-an-gauge.high path.circle { stroke: var(--green); }
.md-an-gauge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3.5px solid rgba(255,255,255,0.05);
}
.md-an-gauge-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
}

.md-an-goals {
    grid-column: span 1;
}
.md-an-total-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    text-align: center;
    margin-bottom: 4px;
}
.md-an-lam-mu {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.md-an-extra-probs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.md-an-ep-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.md-an-ep-item span { color: var(--muted); }
.md-an-ep-item strong { color: var(--text); }

.md-an-1x2 {
    grid-column: span 2;
}
.md-an-bar-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.md-an-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.md-an-bar-lbl {
    font-weight: 700;
    font-size: 13px;
    width: 20px;
    color: var(--text);
}
.md-an-bar-track {
    flex: 1;
    height: 12px;
    background: var(--bg);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.04);
}
.md-an-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease-out;
}
.md-an-bar-pct {
    font-weight: 700;
    font-size: 12px;
    width: 45px;
    text-align: right;
    color: var(--text);
}

.md-an-table-card {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}
.md-an-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.md-an-table th, .md-an-table td {
    padding: 8px 4px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.md-an-table th {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.md-an-table tr:last-child td {
    border-bottom: none;
}
.md-an-badge-value {
    background: rgba(63,185,80,0.15);
    color: var(--green);
    border: 1px solid rgba(63,185,80,0.3);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Score prediction chips ─────────────────────────────────── */
.md-score-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.md-score-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: default;
    transition: background 0.15s;
    min-width: 52px;
}
.md-score-chip:first-child {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.4);
}
.md-score-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.md-score-pct {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
}

/* ── Prediction tab: signal rows + narrative ─────────────────── */
.md-pred-signal {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 13px;
    line-height: 1.4;
}
.md-pred-signal:last-child { border-bottom: none; }
.md-pred-signal.hl {
    background: rgba(63,185,80,0.06);
    border-radius: 6px;
    padding: 7px 8px;
    margin: 2px -8px;
}
.md-pred-sig-icon {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    font-size: 15px;
}
.md-pred-sig-text {
    flex: 1;
    color: var(--text);
}
.md-pred-narrative {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
}
.md-pred-narrative-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}
.md-pred-verdict {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    font-style: italic;
}

/* ── Popup countdown ─────────────────────────────────────────── */
.md-countdown {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.2px;
}
.md-countdown.soon {
    color: var(--orange, #f39c12);
}
.md-countdown.now {
    color: #e74c3c;
    animation: cdPulse 1.5s ease-in-out infinite;
}
@keyframes cdPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* ── Rus Strategy Tab ────────────────────────────────────────── */
.rus-panel { padding: 14px 14px 4px; display: flex; flex-direction: column; gap: 10px; }

/* Verdict */
.rus-verdict-wrap {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 10px; border-left: 4px solid;
}
.rus-v-strong  { background: rgba(46,213,115,.1);  border-color: #2ed573; color: #2ed573; }
.rus-v-moderate{ background: rgba(255,165,2,.1);   border-color: #ffa502; color: #ffa502; }
.rus-v-caution { background: rgba(255,71,87,.1);   border-color: #ff4757; color: #ff4757; }
.rus-v-weak    { background: rgba(130,130,140,.08); border-color: #747487; color: #747487; }
.rus-verdict-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.rus-verdict-text { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.rus-verdict-sub  { font-size: 11px; opacity: .7; margin-top: 1px; }

/* Ruslan comment bubble */
.rus-bubble {
    display: flex; align-items: flex-start; gap: 10px;
}
.rus-bubble-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .3px;
    box-shadow: 0 2px 8px rgba(108,92,231,.35);
}
.rus-bubble-body {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    border-radius: 4px 12px 12px 12px; padding: 10px 14px;
    flex: 1; position: relative;
}
.rus-bubble-name {
    font-size: 11px; font-weight: 700; color: #a29bfe;
    margin-bottom: 5px; letter-spacing: .3px;
}
.rus-bubble-text {
    font-size: 13px; line-height: 1.6; color: #dfe6e9;
}

/* Block title */
.rus-block-title {
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--muted, #666);
    margin-bottom: -4px;
}

/* Signal card */
.rus-card {
    display: flex; align-items: stretch; gap: 0;
    background: rgba(255,255,255,.04); border-radius: 10px;
    border: 1px solid rgba(255,255,255,.07); overflow: hidden;
}
.rus-card-warn { border-color: rgba(255,165,2,.3); }
.rus-card-left {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 12px 14px; background: rgba(255,255,255,.03); gap: 4px;
    border-right: 1px solid rgba(255,255,255,.06); min-width: 62px;
}
.rus-badge {
    font-size: 13px; font-weight: 800; padding: 4px 8px;
    border-radius: 6px; letter-spacing: .5px;
}
.rus-badge-home { background: rgba(52,152,219,.2); color: #3498db; }
.rus-badge-draw { background: rgba(149,165,166,.2); color: #b2bec3; }
.rus-badge-away { background: rgba(231,76,60,.2);   color: #e74c3c; }
.rus-badge-ou   { background: rgba(155,89,182,.2);  color: #a29bfe; }
.rus-card-odds  { font-size: 17px; font-weight: 700; color: #ecf0f1; }
.rus-card-mid   { flex: 1; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.rus-card-desc  { font-size: 12px; color: var(--muted, #888); }
.rus-card-row   { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Pills */
.rus-val-pill {
    font-size: 12px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; background: rgba(46,213,115,.15); color: #2ed573;
    border: 1px solid rgba(46,213,115,.25);
}
.rus-drift-pill {
    font-size: 12px; font-weight: 600; padding: 2px 8px;
    border-radius: 20px; border: 1px solid;
}
.rus-drift-ok  { background: rgba(52,152,219,.12); color: #3498db; border-color: rgba(52,152,219,.25); }
.rus-drift-up  { background: rgba(255,165,2,.12);  color: #ffa502; border-color: rgba(255,165,2,.25);  }
.rus-warn-pill {
    font-size: 11px; padding: 2px 7px; border-radius: 20px;
    background: rgba(255,165,2,.12); color: #ffa502; border: 1px solid rgba(255,165,2,.25);
}

/* Strength dots */
.rus-dots { display: flex; align-items: center; gap: 4px; }
.rus-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15);
}
.rus-dot.rus-dot-on { background: #ffa502; border-color: #ffa502; box-shadow: 0 0 4px rgba(255,165,2,.5); }
.rus-dots-label { font-size: 11px; color: var(--muted, #888); }
.rus-model-tag {
    margin-left: auto; font-size: 10px; padding: 1px 7px;
    border-radius: 20px; background: rgba(255,255,255,.07); color: var(--muted, #888);
    border: 1px solid rgba(255,255,255,.1); letter-spacing: .2px;
}

/* Trap card */
.rus-trap-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; border-radius: 10px;
    background: rgba(255,71,87,.07); border: 1px solid rgba(255,71,87,.2);
    font-size: 13px; color: #ff6b81;
}
.rus-trap-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* Context grid */
.rus-ctx-grid { display: flex; flex-direction: column; gap: 1px; }
.rus-ctx-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; border-radius: 8px;
    background: rgba(255,255,255,.03);
    font-size: 13px;
}
.rus-ctx-row:nth-child(even) { background: rgba(255,255,255,.02); }
.rus-ctx-icon  { font-size: 13px; flex-shrink: 0; width: 18px; text-align: center; }
.rus-ctx-label { flex: 1; color: var(--muted, #888); }
.rus-ctx-val   { font-weight: 600; color: #ecf0f1; text-align: right; }
.rus-ctx-muted { color: var(--muted, #888); font-weight: 400; font-size: 11px; }
.rus-ctx-good  { color: #2ed573; }
.rus-ctx-ok    { color: #ffa502; }
.rus-ctx-bad   { color: #ff4757; }

/* Empty state */
.rus-empty { text-align: center; padding: 28px 16px 12px; }
.rus-empty-icon  { font-size: 28px; margin-bottom: 8px; }
.rus-empty-title { font-size: 14px; font-weight: 600; color: #ecf0f1; margin-bottom: 4px; }
.rus-empty-sub   { font-size: 12px; color: var(--muted, #888); }

/* Footer */
.rus-footer { font-size: 10px; color: var(--muted, #555); text-align: center; padding: 6px 0 2px; }

/* ═══════════════════════════════════════════════════════════════
   SYNTHESIS BLOCK — мета-нейросеть итогового прогноза
   ═══════════════════════════════════════════════════════════════ */
.md-synthesis-wrap { margin-top: 4px; }

/* Loading spinner */
.md-syn-loading {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px;
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 10px;
    font-size: 12px; color: var(--muted);
}
.md-syn-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(99,102,241,0.3);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: syn-spin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes syn-spin { to { transform: rotate(360deg); } }

/* Флаги */
.syn-flag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px; font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}
.syn-flag-green  { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); color: #4ade80; }
.syn-flag-blue   { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.35); color: #818cf8; }
.syn-flag-yellow { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.35); color: #fbbf24; }
.syn-flag-red    { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.4); color: #f87171; }

/* Карточка рекомендованной ставки */
.syn-rec-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 4px;
}

/* Альтернативные ставки */
.syn-alt-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text);
    cursor: default;
}

/* Консенсус таблица */
.syn-consensus-grid { display: flex; flex-direction: column; gap: 4px; }
.syn-con-row {
    display: grid;
    grid-template-columns: 60px 1fr 36px 28px;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 6px;
    transition: background .15s;
}
.syn-con-highlight {
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.3);
}
.syn-con-market { font-size: 11px; font-weight: 700; color: var(--text); }
.syn-con-bar-wrap {
    background: rgba(255,255,255,0.07);
    border-radius: 4px; height: 6px; overflow: hidden;
}
.syn-con-bar { height: 100%; border-radius: 4px; transition: width .3s; }
.syn-con-pct { font-size: 11px; font-weight: 600; color: var(--text); text-align: right; }
.syn-con-src { font-size: 9px; color: var(--muted); text-align: right; }

/* Текстовый анализ */
.syn-text-block {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 10px;
}
.syn-text-avatar {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #818cf8, #6366f1);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff;
}
.syn-text-body { flex: 1; min-width: 0; }
.syn-text-title { font-size: 11px; font-weight: 700; color: #818cf8; margin-bottom: 4px; }
.syn-text-content { font-size: 12px; color: var(--text); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════
   PREDICTION PAGE v2
   ═══════════════════════════════════════════════════════════ */
.pred-page { display: flex; flex-direction: column; gap: 12px; }

/* ── Outcome bar ─────────────────────────────────────── */
.pred-outcome-bar-wrap { padding: 0 2px; }
.pred-outcome-labels {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 600; margin-bottom: 5px;
}
.pred-outcome-bar {
    display: flex; height: 28px; border-radius: 8px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}
.pred-ob-seg {
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; min-width: 24px;
    transition: width .4s ease;
}
.pred-ob-seg span { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.pred-ob-home { background: linear-gradient(135deg, #6366f1, #818cf8); }
.pred-ob-draw { background: rgba(107,114,128,0.5); }
.pred-ob-away { background: linear-gradient(135deg, #ef4444, #f87171); }

/* ── Mini cards ──────────────────────────────────────── */
.pred-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.pred-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    transition: border-color .2s;
}
.pred-card:hover { border-color: rgba(255,255,255,0.18); }
.pred-card-icon { font-size: 22px; flex-shrink: 0; }
.pred-card-body { min-width: 0; }
.pred-card-title { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.pred-card-value { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.2; }
.pred-card-hint  { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* ── Verdict (synthesis) ─────────────────────────────── */
.pred-synthesis-wrap { min-height: 60px; }
.pred-verdict {
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 12px;
    padding: 14px 16px;
}
.pred-verdict-header {
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text); margin-bottom: 12px;
}

/* Recommendation card */
.pred-rec-card {
    display: flex; align-items: stretch; gap: 16px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    flex-wrap: wrap;
}
.pred-rec-left {
    text-align: center; min-width: 90px;
    border-left: 3px solid #818cf8;
    padding-left: 12px;
    display: flex; flex-direction: column; justify-content: center;
}
.pred-rec-market { font-size: 22px; font-weight: 900; line-height: 1.1; }
.pred-rec-label  { font-size: 11px; color: var(--muted); margin-top: 2px; }

.pred-rec-stats {
    flex: 1; display: flex; gap: 20px; flex-wrap: wrap;
    align-items: center; min-width: 140px;
}
.pred-rec-stat { }
.pred-rec-stat-val { font-size: 18px; font-weight: 800; color: var(--text); }
.pred-rec-stat-lbl { font-size: 10px; color: var(--muted); }

.pred-no-rec {
    font-size: 12px; color: var(--muted); padding: 6px 0;
    font-style: italic;
}

/* Alternatives */
.pred-alts {
    display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;
}
.pred-alt-chip {
    font-size: 11px; font-weight: 600; padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
}
.pred-alt-meta { color: var(--muted); font-weight: 400; }

/* Consensus */
.pred-consensus { margin-top: 14px; }
.pred-section-title {
    font-size: 10px; color: var(--muted); text-transform: uppercase;
    letter-spacing: .5px; margin-bottom: 6px; font-weight: 600;
}
.pred-con-grid { display: flex; flex-direction: column; gap: 4px; }
.pred-con-row {
    display: grid; grid-template-columns: 80px 1fr 36px 22px;
    align-items: center; gap: 6px;
    padding: 3px 0;
}
.pred-con-active { background: rgba(99,102,241,0.08); border-radius: 4px; padding: 3px 6px; margin: 0 -6px; }
.pred-con-name   { font-size: 11px; font-weight: 600; color: var(--text); }
.pred-con-bar-wrap { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.pred-con-bar    { height: 100%; border-radius: 3px; transition: width .3s; }
.pred-con-pct    { font-size: 11px; font-weight: 600; color: var(--text); text-align: right; }
.pred-con-models { font-size: 9px; color: var(--muted); text-align: right; }

/* AI text */
.pred-ai-text {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(99,102,241,0.05);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 10px;
}
.pred-ai-avatar {
    flex-shrink: 0; width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #818cf8, #6366f1);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff;
}
.pred-ai-body {
    flex: 1; min-width: 0;
    font-size: 12px; color: var(--text); line-height: 1.65;
}

/* Toggle + raw details */
.pred-toggle-btn {
    width: 100%; text-align: left;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 6px 12px;
    color: var(--muted); font-size: 11px; cursor: pointer;
    letter-spacing: .3px;
}
.pred-toggle-btn:hover { border-color: rgba(255,255,255,0.18); }
.pred-raw-details {
    margin-top: 4px; padding: 10px 12px;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
}
.pred-raw-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px; font-size: 11px; line-height: 1.5; color: var(--text);
}
.pred-raw-label {
    font-size: 10px; color: var(--muted); text-transform: uppercase;
    letter-spacing: .3px; margin-bottom: 2px;
}
.pred-quick-bet-btn {
    width: 100%; margin-top: 11px; padding: 10px 16px;
    background: linear-gradient(135deg, #1f6feb 0%, #6e40c9 100%);
    color: #fff; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: opacity .18s, transform .18s;
    letter-spacing: .2px;
}
.pred-quick-bet-btn:hover { opacity: .85; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════
   SUBSCRIPTION / PAYWALL SYSTEM
   ══════════════════════════════════════════════════════════════ */

/* Tier badge в шапке */
.tier-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    vertical-align: middle; margin-left: 6px;
}
.tier-free  { background: #30363d; color: #8b949e; }
.tier-pro   { background: linear-gradient(135deg,#7c3aed,#4f46e5); color: #fff; box-shadow: 0 1px 6px rgba(124,58,237,.4); }
.tier-admin { background: linear-gradient(135deg,#f85149,#c0392b); color: #fff; }

/* Заблокированный контейнер */
.feature-locked {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.feature-locked * { filter: blur(3px); }

/* Оверлей блокировки (добавляется JS) */
.feature-lock-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(13,17,23,0.75);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    cursor: pointer;
    pointer-events: all;
    z-index: 10;
    gap: 4px;
    transition: background .2s;
}
.feature-lock-overlay:hover { background: rgba(13,17,23,0.85); }
.flo-lock  { font-size: 22px; line-height: 1; }
.flo-label { font-size: 11px; font-weight: 700; color: #7c3aed; letter-spacing: 1px; }

/* Карточка-заглушка для целых секций */
.feature-gate-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 28px 20px; text-align: center;
    border: 1px dashed rgba(124,58,237,.35);
    border-radius: 10px;
    background: rgba(124,58,237,.05);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    margin: 8px 0;
}
.feature-gate-card:hover {
    border-color: rgba(124,58,237,.6);
    background: rgba(124,58,237,.10);
}
.feature-gate-icon  { font-size: 28px; }
.feature-gate-title { font-size: 14px; font-weight: 700; color: var(--text,#e6edf3); }
.feature-gate-desc  { font-size: 12px; color: var(--muted,#7d8590); }

/* Кнопка "Подробнее" */
.upgrade-btn {
    background: linear-gradient(135deg,#7c3aed,#6d28d9);
    color: #fff; border: none; border-radius: 6px;
    padding: 7px 18px; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: opacity .15s; pointer-events: all;
}
.upgrade-btn:hover { opacity: .85; }

/* Инлайн-заглушка для цифровых ячеек */
.pro-teaser {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; color: #7c3aed;
    cursor: pointer; padding: 1px 5px;
    border: 1px solid rgba(124,58,237,.4);
    border-radius: 4px; background: rgba(124,58,237,.07);
    transition: background .15s;
    white-space: nowrap;
}
.pro-teaser:hover { background: rgba(124,58,237,.15); }

/* ── Upgrade Modal ─────────────────────────────────────── */
.upgrade-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: none; /* shown via JS */
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    padding: 16px;
}
.upgrade-modal {
    background: var(--surface,#161b22);
    border: 1px solid rgba(124,58,237,.4);
    border-radius: 16px;
    padding: 32px 28px 24px;
    max-width: 420px; width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 8px 40px rgba(124,58,237,.25), 0 2px 12px rgba(0,0,0,.5);
    animation: um-in .22s ease;
}
@keyframes um-in {
    from { transform: scale(.94) translateY(8px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);   opacity: 1; }
}
.upgrade-modal-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; color: var(--muted,#7d8590);
    font-size: 16px; cursor: pointer; padding: 4px;
    transition: color .15s;
}
.upgrade-modal-close:hover { color: var(--text,#e6edf3); }
.upgrade-modal-icon    { font-size: 40px; margin-bottom: 8px; }
.upgrade-modal-title   { font-size: 20px; font-weight: 700; color: var(--text,#e6edf3); }
.upgrade-modal-feature {
    display: inline-block; margin: 6px 0 14px;
    padding: 3px 12px; border-radius: 20px;
    background: rgba(124,58,237,.12);
    color: #a78bfa; font-size: 13px; font-weight: 600;
}
.upgrade-modal-desc {
    font-size: 13px; color: var(--muted,#7d8590);
    line-height: 1.6; margin: 0 0 20px; text-align: left;
}
.upgrade-modal-desc strong { color: var(--text,#e6edf3); }
.upgrade-modal-actions { display: flex; gap: 10px; justify-content: center; }
.upgrade-btn-primary {
    flex: 1; padding: 10px 16px;
    background: linear-gradient(135deg,#7c3aed,#6d28d9);
    color: #fff; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: opacity .15s;
}
.upgrade-btn-primary:hover { opacity: .85; }
.upgrade-btn-secondary {
    flex: 0 0 auto; padding: 10px 16px;
    background: none; border: 1px solid var(--border,#30363d);
    color: var(--muted,#7d8590); border-radius: 8px;
    font-size: 13px; cursor: pointer; transition: color .15s, border-color .15s;
}
.upgrade-btn-secondary:hover { color: var(--text,#e6edf3); border-color: var(--text,#e6edf3); }

/* ── Limit bar (для отображения "X дней из Y") ──────── */
.limit-bar-wrap { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted,#7d8590); }
.limit-bar { flex:1; height:4px; border-radius:2px; background:var(--border,#30363d); overflow:hidden; }
.limit-bar-fill { height:100%; border-radius:2px; background:var(--accent,#7c3aed); transition:width .3s; }
/* ═══════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE SYSTEM — BetLinePro
   Breakpoints: 1200 / 992 / 768 (main) / 576
   ═══════════════════════════════════════════════════════════════ */

/* ─── Utility classes ───────────────────────────────────────── */
.mob-only  { display: none !important; }
.desk-only { }

/* ─── Bottom navigation bar ──────────────────────────────────── */
#mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 58px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    z-index: 900;
    flex-direction: row;
    align-items: stretch;
}
#mobile-bottom-nav .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    color: var(--muted);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    transition: color .15s;
    min-width: 44px;
    padding: 6px 2px 4px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
#mobile-bottom-nav .mbn-item:hover,
#mobile-bottom-nav .mbn-item.active { color: var(--accent); }
#mobile-bottom-nav .mbn-icon  { font-size: 20px; line-height: 1; }
#mobile-bottom-nav .mbn-label { font-size: 10px; font-weight: 600; letter-spacing: .2px; }
#mobile-bottom-nav .mbn-badge {
    position: absolute;
    top: 4px; right: calc(50% - 20px);
    min-width: 16px; height: 16px;
    background: var(--red);
    color: #fff; font-size: 9px; font-weight: 700;
    border-radius: 8px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
}

/* ─── Mobile match cards ─────────────────────────────────────── */
.mob-cards-wrap {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.mob-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.mob-card:active { background: #1a2028; }
.mob-card.bookmarked { border-left: 3px solid var(--orange); }

.mob-card-hdr {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 7px;
    gap: 6px;
}
.mob-card-league {
    font-size: 11px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.mob-card-time  { font-size: 11px; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.mob-card-badges { display: flex; gap: 4px; flex-shrink: 0; }

.mob-card-teams {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 9px;
}
.mob-card-vs    { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.mob-card-team  {
    font-size: 14px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mob-card-score { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 52px; }
.mob-card-score-main {
    font-size: 22px; font-weight: 800; color: var(--accent);
    font-family: 'Courier New', monospace; letter-spacing: 1px; line-height: 1.1;
}
.mob-card-score-main.mc-win  { color: var(--green); }
.mob-card-score-main.mc-loss { color: var(--red); }
.mob-card-score-main.mc-draw { color: var(--text); }
.mob-card-score.no-score .mob-card-score-main { font-size: 14px; font-weight: 400; color: var(--muted); }
.mob-card-score-ht { font-size: 10px; color: var(--muted); margin-top: 1px; }
.mob-card-countdown {
    font-size: 9px; font-weight: 700; color: var(--green);
    margin-top: 2px; letter-spacing: .2px;
}
.mob-card-countdown.soon { color: var(--orange); }

.mob-card-odds { display: flex; gap: 6px; }
.mob-card-odds-cell {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 6px; padding: 5px 4px;
    min-width: 44px;
}
.mob-card-odds-lbl { font-size: 9px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.mob-card-odds-val { font-size: 14px; font-weight: 700; color: var(--text); }
.mob-card-odds-cell.odds-down { border-color: rgba(63,185,80,.4); background: rgba(63,185,80,.08); }
.mob-card-odds-cell.odds-down .mob-card-odds-val { color: var(--green); }
.mob-card-odds-cell.odds-up   { border-color: rgba(248,81,73,.35); background: rgba(248,81,73,.07); }
.mob-card-odds-cell.odds-up .mob-card-odds-val   { color: var(--red); }
.mob-card-odds-cell.winning-bet { border-color: rgba(63,185,80,.5); background: rgba(63,185,80,.12); }
.mob-card-odds-cell.losing-bet  { opacity: .5; }

/* status badges */
.mob-badge {
    font-size: 10px; font-weight: 700; padding: 2px 7px;
    border-radius: 4px; white-space: nowrap;
}
.mob-badge-live  { background: rgba(255,123,84,.2); color: var(--live); border: 1px solid rgba(255,123,84,.4); }
.mob-badge-soon  { background: rgba(210,153,34,.15); color: var(--orange); border: 1px solid rgba(210,153,34,.3); }
.mob-badge-done  { background: rgba(125,133,144,.12); color: var(--muted); border: 1px solid var(--border); }
.mob-badge-value { background: rgba(63,185,80,.18); color: var(--green); border: 1px solid rgba(63,185,80,.4); }
.mob-badge-move  { background: rgba(47,129,247,.15); color: var(--accent); border: 1px solid rgba(47,129,247,.3); }

/* load-more button */
#mob-load-more {
    width: 100%; padding: 13px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 8px; color: var(--muted);
    font-size: 13px; font-weight: 600; cursor: pointer;
    margin-top: 4px; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
    display: none;
}
#mob-load-more:hover { background: rgba(47,129,247,.1); color: var(--text); }

/* ─── Mobile filter FAB ───────────────────────────────────────── */
#btn-mob-filters {
    display: none;
}

/* ─── Filter drawer ──────────────────────────────────────────── */
#filter-drawer-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    z-index: 850;
}
#filter-drawer-overlay.open { display: block; }

#filter-drawer {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: min(320px, 90vw);
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    z-index: 860;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    overflow: hidden;
}
#filter-drawer.open { transform: translateX(0); }

.fd-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.fd-title { font-size: 15px; font-weight: 700; color: var(--text); }
.fd-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--muted);
    background: none; border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer;
    transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.fd-close:hover { color: var(--red); border-color: var(--red); }

.fd-body {
    flex: 1; overflow-y: auto; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 10px;
    -webkit-overflow-scrolling: touch;
}
.fd-section-title {
    font-size: 10px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px;
}
.fd-input {
    width: 100%; height: 42px; padding: 0 12px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); font-size: 16px; /* 16px prevents iOS zoom */
    outline: none; transition: border-color .15s;
    -webkit-appearance: none;
}
.fd-input:focus { border-color: var(--accent); }
.fd-row { display: flex; gap: 8px; }
.fd-row .fd-input { flex: 1; min-width: 0; }

.fd-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    display: flex; gap: 8px; flex-shrink: 0;
}
.fd-btn {
    flex: 1; height: 46px;
    border: none; border-radius: 8px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .15s;
}
.fd-btn:hover { opacity: .85; }
.fd-btn:active { opacity: .75; }
.fd-btn-apply { background: var(--accent); color: #fff; }
.fd-btn-reset { background: var(--bg-input); color: var(--muted); border: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

/* ── 1200px — hide some toolbar items ─────────────────────── */
@media (max-width: 1200px) {
    .header-user #parserLink,
    .header-user #retroLink,
    .header-user #dbeditLink { display: none !important; }
}

/* ── 992px — compact toolbar ───────────────────────────────── */
@media (max-width: 992px) {
    .header-toolbar #btn-save-filter,
    .header-toolbar #btn-show-filter-bookmarks { display: none; }
    .toolbar-btn { padding: 4px 8px; font-size: 11px; }
}

/* ── 768px — main mobile breakpoint ──────────────────────── */
@media (max-width: 768px) {
    /* utilities */
    .mob-only  { display: initial !important; }
    .desk-only { display: none !important; }

    /* body offset for bottom nav */
    body { padding-bottom: 58px; }

    /* header compact */
    .header { height: 46px; min-height: 46px; padding: 0 12px; gap: 8px; }
    .header-toolbar { display: none; }
    .header-brand svg { width: 20px; height: 20px; }
    .brand-text { font-size: 15px; }
    .header-user #tierBadge { display: none !important; }
    .header-user #valueLink,
    .header-user #adminLink,
    .header-user #parserLink,
    .header-user #retroLink,
    .header-user #dbeditLink { display: none !important; }
    .header-user #userPill { font-size: 11px; padding: 3px 10px; max-width: 100px; }
    .header-user .btn-logout { display: none; }

    /* ── MOBILE APP LAYOUT ─────────────────────────────── */
    /*
     * Full-height flex column:
     *   header (46px) | mob-cards-wrap (flex:1, scrolls) | footer-bar (~30px)
     * padding-bottom reserves space for the fixed 58px bottom nav
     * so footer-bar always lands just above the nav, no overlap.
     */
    .app-screen {
        height: 100vh;    /* safe fallback (old browsers) */
        height: 100dvh;   /* dynamic viewport — accounts for browser chrome on mobile */
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    /* show bottom nav */
    #mobile-bottom-nav { display: flex; }

    /* ── VIEW MODE SYSTEM ─────────────────────────────────────────────
     * data-mob-view="terminal" (default) — full scrollable betting terminal
     * data-mob-view="cards"    — compact mobile match cards feed
     * Set via inline <script> in HTML (localStorage) to avoid FOUC.
     * ───────────────────────────────────────────── */

    /* ── TERMINAL mode ─────────────────────────────────── */
    body[data-mob-view="terminal"] .table-area        { display: flex; }
    body[data-mob-view="terminal"] .table-scroll-wrap {
        display: block !important;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        cursor: default;
    }
    body[data-mob-view="terminal"] .mob-cards-wrap { display: none !important; }
    body[data-mob-view="terminal"] #mob-load-more  { display: none !important; }

    /* Terminal: compact row density (≈ desktop BLA feel) */
    body[data-mob-view="terminal"] .filter-row     { display: none; } /* use FAB drawer */
    body[data-mob-view="terminal"] .main-table tbody td { padding: 3px 4px; font-size: 11px; }
    body[data-mob-view="terminal"] td.wide,
    body[data-mob-view="terminal"] th.wide   { min-width: 110px; max-width: 110px; }
    body[data-mob-view="terminal"] td.medium,
    body[data-mob-view="terminal"] th.medium { min-width: 80px;  max-width: 80px;  }
    body[data-mob-view="terminal"] td.small,
    body[data-mob-view="terminal"] th.small  { min-width: 56px;  max-width: 56px;  }

    /* ── CARDS mode ────────────────────────────────────── */
    body[data-mob-view="cards"] .table-area        { display: none; }
    body[data-mob-view="cards"] .table-scroll-wrap { display: none !important; }
    body[data-mob-view="cards"] .mob-cards-wrap {
        display: flex;
        overscroll-behavior-y: contain;
    }
    body[data-mob-view="cards"] #mob-load-more {
        display: block;
        margin: 4px 10px 10px;
        width: calc(100% - 20px);
        flex-shrink: 0;
    }
    body[data-mob-view="cards"] .footer-center { display: none; } /* use load-more, not pagination */

    /* show filter FAB */
    #btn-mob-filters {
        display: flex;
        align-items: center; justify-content: center; gap: 6px;
        position: fixed;
        bottom: 70px; right: 14px;
        height: 46px; padding: 0 18px;
        background: var(--accent);
        color: #fff; border: none; border-radius: 23px;
        font-size: 13px; font-weight: 700;
        box-shadow: 0 4px 16px rgba(47,129,247,.5);
        cursor: pointer; z-index: 800;
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s;
    }
    #btn-mob-filters:active { transform: scale(.96); }

    /* footer */
    .footer-bar {
        height: auto; min-height: 30px;
        padding: 4px 10px; flex-wrap: wrap; gap: 4px;
        margin-bottom: 0;
    }
    .footer-left { font-size: 11px; gap: 6px; }

    /* modals → bottom sheet */
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal-card {
        max-width: 100%; width: 100%; max-height: 85vh;
        border-radius: 16px 16px 0 0;
    }
    .md-popup {
        width: 100%; max-width: 100%; max-height: 92vh;
        border-radius: 16px 16px 0 0;
        animation: mobSlideUp .26s cubic-bezier(.4,0,.2,1);
    }
    @keyframes mobSlideUp {
        from { transform: translateY(24px); opacity: .2; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    .md-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
    .md-tab  { font-size: 11px; padding: 9px 8px; min-width: 56px; flex: none; scroll-snap-align: start; }
    .md-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .modal-backdrop { overscroll-behavior: contain; }

    /* filter stats panel — horizontal scroll */
    .filter-stats-content { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .filter-stats-panel { padding: 6px 10px; }

    /* profit panel compact */
    .profit-panel { padding: 5px 10px; }
    .profit-grid  { gap: 8px; }

    /* bet slip */
    #bet-slip {
        right: 10px; bottom: 68px;
        width: calc(100vw - 20px); max-width: 380px;
    }

    /* auth screen */
    .auth-box { padding: 28px 20px; margin: 0 12px; }
    .field input { height: 46px; font-size: 16px; }
}

/* ── 576px — extra small ────────────────────────────────────── */
@media (max-width: 576px) {
    .footer-center .pg-dots { display: none; }
    .pg-info { display: none; }
    .mob-card-odds-cell { min-width: 38px; }
    .mob-card-odds-val  { font-size: 13px; }
    .mob-card-team      { font-size: 13px; }
    .mob-card-score-main { font-size: 20px; }
    #btn-mob-filters { padding: 0 14px; font-size: 12px; }
}