/* ═══════════════════════════════════════════════════════════════════
   Rolgi SStats — дизайн-система v3.0 «Emerald & Gold»
   Премиальная тёмная тема: глубокий графит, приглушённый изумруд,
   шампань-золото для акцентов престижа, матовые поверхности,
   сдержанные тени, спокойная типографика.

   Подключение: <link rel="stylesheet" href="/assets/theme.css">
   Порядок: font-awesome → theme.css → app.css → app-mobile.css → <style> страницы.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Палитра ── */
    --primary-color: #34d399;      /* изумруд — главный акцент */
    --primary-dark: #059669;
    --primary-ink: #06281c;        /* текст на изумрудных кнопках */
    --secondary-color: #7dd3fc;    /* пыльно-голубой — второй акцент */
    --accent-color: #8b7cf6;       /* приглушённый фиолет — аналитика */
    --gold: #d4af6a;               /* шампань-золото — престиж, hero, награды */
    --gold-soft: rgba(212, 175, 106, 0.14);

    --bg-color: #0c0f16;           /* графит */
    --bg-soft: #121724;            /* панели */
    --card-bg: #161c2c;            /* карточки */
    --card-bg-2: #1c2338;          /* вложенные */
    --overlay-bg: rgba(12, 15, 22, 0.78);

    --text-color: #eceff4;
    --text-muted: #9aa3b5;
    --text-faint: #646d82;

    --border-color: #262f47;
    --border-soft: #1c2438;

    --success-color: #34d399;
    --danger-color: #f87171;
    --warning-color: #fbbf24;
    --info-color: #7dd3fc;
    --live-color: #fb4d6d;

    --odds-home: #7dd3fc;
    --odds-draw: #9aa3b5;
    --odds-away: #fca38b;
    --goal-color: #34d399;
    --card-yellow: #fbbf24;
    --card-red: #f87171;

    /* ── Типографика ── */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-num: 'Inter', 'SF Mono', 'Roboto Mono', ui-monospace, monospace;

    /* ── Радиусы и тени (матовые, сдержанные) ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.38);
    --glow-primary: 0 0 0 1px rgba(52, 211, 153, 0.25), 0 4px 16px rgba(52, 211, 153, 0.12);
    --container-w: 1400px;
}

/* ─── База ─── */
html { color-scheme: dark; }

body {
    font-family: var(--font-main);
    background: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--secondary-color); }
a:hover { color: var(--primary-color); }

::selection { background: rgba(0, 230, 118, 0.35); }

/* Скроллбары в стиле темы */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: #2a3553; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #354165; }

/* ─── Шапка ─── */
.r-header,
.header {
    background: rgba(11, 15, 26, 0.85) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.r-logo span,
.logo {
    letter-spacing: 0.5px;
}

.nav-links a.active,
.r-nav a.active {
    background: rgba(52, 211, 153, 0.12) !important;
    color: var(--primary-color) !important;
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35);
}

/* ─── Карточки ─── */
.r-card,
.filters-bar,
.sidebar,
.stat-card,
.preset-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 40%), var(--card-bg) !important;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.r-card-padded { padding: 20px; }

/* ─── Кнопки ─── */
.r-btn,
.btn-primary,
.filter-btn.active {
    background: linear-gradient(180deg, #3dd598, #25b577) !important;
    color: var(--primary-ink) !important;
    font-weight: 700;
    border: 1px solid rgba(52, 211, 153, 0.5) !important;
    box-shadow: var(--glow-primary);
}

.r-btn:hover,
.btn-primary:hover,
.filter-btn.active:hover {
    filter: brightness(1.07);
    color: var(--primary-ink) !important;
}

.btn-secondary,
.r-btn-secondary,
.filter-btn {
    background: var(--card-bg-2) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-secondary:hover,
.r-btn-secondary:hover,
.filter-btn:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.r-btn-ghost { border: 1px solid var(--border-color); color: var(--text-color); }
.r-btn-ghost:hover { background: rgba(255, 255, 255, 0.04); }

/* ─── Формы ─── */
input, select, textarea,
.r-search-row input,
.r-search-row select,
.filter-select,
.date-picker,
.search-box input {
    background: #0d1322 !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: var(--radius-sm);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15) !important;
}

input::placeholder { color: var(--text-faint); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); }

/* ─── Таблицы ─── */
table { border-color: var(--border-soft); }
th {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    font-size: 0.72em;
    letter-spacing: 0.08em;
}
td { border-color: var(--border-soft) !important; }
tr:hover td { background: rgba(0, 230, 118, 0.04) !important; }

/* ─── Табы ─── */
.r-tabs, .tabs, .g-tabs {
    border-bottom-color: var(--border-color) !important;
}
.r-tab.active, .tab.active, .g-tab.active {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
}

/* ─── Матч-строка ─── */
.r-match {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
}
.r-match:hover {
    background: var(--card-bg-2) !important;
    border-color: var(--border-color) !important;
    box-shadow: inset 2px 0 0 var(--primary-color);
}
.r-match-score { background: rgba(255, 255, 255, 0.06) !important; font-family: var(--font-num); }
.r-match-score-live { background: var(--live-color) !important; color: #fff !important; }
.r-match-date { color: var(--text-muted); }

/* ─── Статусы ─── */
.r-status-live, .status-live {
    background: linear-gradient(180deg, #fb5e7a, #e63a5c) !important;
    box-shadow: 0 0 0 1px rgba(251, 77, 109, 0.4), 0 2px 10px rgba(251, 77, 109, 0.25);
}
.r-status-finished, .status-finished { background: rgba(52, 211, 153, 0.12) !important; color: var(--primary-color) !important; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35); }
.r-status-scheduled, .status-scheduled { background: rgba(125, 211, 252, 0.10) !important; color: var(--secondary-color) !important; box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.3); }

/* ─── Бейджи коэффициентов и исходов ─── */
.odd, .odd-tag, .rec-pred-actual {
    font-family: var(--font-num);
}
.pred-home { color: var(--odds-home) !important; }
.pred-draw { color: var(--odds-draw) !important; }
.pred-away { color: var(--odds-away) !important; }

/* ─── Прогноз-карточка (game.html) ─── */
.prediction-hero {
    background: linear-gradient(180deg, rgba(212, 175, 106, 0.08), rgba(212, 175, 106, 0.02)),
                linear-gradient(180deg, var(--card-bg), var(--bg-soft)) !important;
    border: 1px solid rgba(212, 175, 106, 0.35) !important;
    box-shadow: var(--shadow-md);
}
.conf-bar { background: rgba(255, 255, 255, 0.08) !important; }
.conf-fill { background: linear-gradient(90deg, var(--gold), var(--primary-color)) !important; }

/* ─── Скелетон под тёмную тему ─── */
.r-skeleton {
    background: linear-gradient(90deg, #1a2338 0%, #232e4d 50%, #1a2338 100%) !important;
    background-size: 200% 100% !important;
}

/* ─── Модалки ─── */
.r-modal { background: var(--bg-soft) !important; border: 1px solid var(--border-color); }
.r-modal-header { border-bottom-color: var(--border-color) !important; }
.r-modal-overlay { background: var(--overlay-bg) !important; backdrop-filter: blur(4px); }

/* ─── Список ─── */
.r-list-item {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
}
.r-list-item:hover {
    background: var(--card-bg-2) !important;
    border-color: var(--primary-color) !important;
}

/* ─── Тосты ─── */
.toast, .r-goal-toast { box-shadow: var(--shadow-lg); }

/* ─── Утилиты ─── */
.text-muted, .r-text-muted { color: var(--text-muted) !important; }
.divider, hr { border-color: var(--border-soft) !important; }
.league-count { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-muted) !important; }

/* Жёстко светлые остатки (хардкод white/#fff без var) — гасим точечно */
.sidebar-item:hover { background: rgba(52, 211, 153, 0.08) !important; }
.sidebar-item.active { background: rgba(52, 211, 153, 0.12) !important; color: var(--primary-color) !important; }
.date-nav button { background: var(--card-bg-2) !important; border-color: var(--border-color) !important; color: var(--text-color) !important; }
.modal-tab { color: var(--text-muted) !important; }
.modal-tab.active { color: var(--primary-color) !important; border-bottom-color: var(--primary-color) !important; }
.stats-card { background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 40%), var(--card-bg) !important; border: 1px solid var(--border-color); }

/* ─── Золото — только для престижа: hero матча, трофеи, рекорды ─── */
.gold-text { color: var(--gold); }
.gold-frame { border: 1px solid rgba(212, 175, 106, 0.4) !important; }
.gold-soft-bg { background: var(--gold-soft) !important; }