/* Общий стиль страниц salo. Подключается в <head> до стилей страницы: <link rel="stylesheet" href="/salo-ui.css">.
   Уровни: страница (--c-bg) → секция (--c-panel, радиус 12) → карточка внутри секции (--c-bg, радиус 10)
   → чип/бейдж (радиус 6). Цвет — у текста, цифр и бейджей, не у рамок блоков.
   Стили страниц берут цвета и радиусы только из переменных ниже. */
:root {
    /* Палитра шапки сайта (salo-nav.js) и раздела «Исследования»: графит + салатовый акцент */
    --c-bg: #14161b;          /* фон страницы и карточек внутри секций */
    --c-panel: #1b1e24;       /* секции, панели, таблицы */
    --c-panel-hover: #22262e; /* строка таблицы под курсором */
    --c-line: #2c3038;        /* рамки секций, полей, чипов */
    --c-line-soft: #22262e;   /* рамки карточек на фоне --c-bg, разделители строк */
    --c-text: #e4e6ea;
    --c-text-strong: #f1f3f7;
    --c-text-body: #c9ccd2;
    --c-muted: #9aa0aa;
    --c-label: #7d838e;
    --c-faint: #4a4f59;
    --c-accent: #a3e635;      /* основная кнопка, фокус, активный пункт — текст на нём --c-on-accent */
    --c-accent-hover: #bef264;
    --c-accent-soft: rgba(163,230,53,0.1);
    --c-on-accent: #0b0d12;
    --c-link: #8fb6f5;
    --c-ok: #4ade80;   --c-ok-bg: rgba(34,197,94,0.14);
    --c-warn: #fbbf24; --c-warn-bg: rgba(245,158,11,0.14);
    --c-bad: #f87171;  --c-bad-bg: rgba(239,68,68,0.14);
    --c-info: #8fb6f5; --c-info-bg: rgba(143,182,245,0.14);
    --c-violet: #a78bfa; --c-violet-bg: rgba(139,92,246,0.14);
    --r-section: 12px; --r-card: 10px; --r-ctl: 8px; --r-chip: 6px;
    --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --f-head: 'Unbounded', 'Manrope', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--f-body); background: var(--c-bg); color: var(--c-text);
    min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--c-link); }
h1 { font-family: var(--f-head); font-weight: 600; letter-spacing: -0.01em; }

/* Заголовок служебной страницы: слева, в ширину контента; крошка — только у вложенных страниц (лидерборд → ecom).
   Ссылки «← Назад / На главную» не нужны — навигация в шапке. Главная сканера — центрированный экран поиска, без него. */
.ui-page-head { padding: 28px 0 20px; text-align: left; }
.ui-page-head h1 { font-family: var(--f-head); font-weight: 600; font-size: 1.6rem; line-height: 1.2; color: var(--c-text-strong); margin: 0; letter-spacing: -0.01em; }
.ui-page-head .subtitle { color: var(--c-muted); font-size: 0.95rem; margin: 8px 0 0; text-align: left; }
.ui-crumb { display: inline-block; margin-bottom: 8px; color: var(--c-muted); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.ui-crumb:hover { color: var(--c-accent); }

/* Секция */
.ui-section {
    background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-section);
    padding: 20px 24px; margin-bottom: 16px;
}
.ui-section-title, .section-title {
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-label);
    font-weight: 600; margin-bottom: 12px;
}
/* Карточка внутри секции */
.ui-card { background: var(--c-bg); border: 1px solid var(--c-line-soft); border-radius: var(--r-card); padding: 14px 16px; }
/* Подпись над значением */
.ui-label { color: var(--c-label); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

/* Цифровая карточка */
.ui-stat { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 14px 18px; text-align: center; }
.ui-stat .ui-stat-val { color: var(--c-text-strong); font-size: 1.4rem; font-weight: 800; }
.ui-stat .ui-stat-label { color: var(--c-label); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* Чип и бейдж */
.ui-chip {
    display: inline-block; padding: 4px 10px; border-radius: var(--r-chip); border: 1px solid var(--c-line);
    background: var(--c-bg); color: var(--c-text-body); font-size: 0.82rem; font-weight: 500;
}
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-badge {
    display: inline-block; padding: 2px 8px; border-radius: var(--r-chip); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle;
    background: var(--c-line); color: var(--c-muted);
}
.ui-badge.ok { background: var(--c-ok-bg); color: var(--c-ok); }
.ui-badge.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.ui-badge.bad { background: var(--c-bad-bg); color: var(--c-bad); }
.ui-badge.info { background: var(--c-info-bg); color: var(--c-info); }
.ui-badge.violet, .ui-badge.leader { background: var(--c-violet-bg); color: var(--c-violet); }

/* Кнопки: основная — синяя, второго плана — контурная */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px; border-radius: var(--r-card); border: 1px solid var(--c-accent);
    background: var(--c-accent); color: var(--c-on-accent); font-size: 0.9rem; font-weight: 600; cursor: pointer;
    text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ui-btn:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.ui-btn.ghost { background: transparent; color: var(--c-muted); border-color: var(--c-line); }
.ui-btn.ghost:hover { color: var(--c-text-strong); border-color: var(--c-accent); background: var(--c-accent-soft); }
.ui-btn.danger { background: transparent; color: var(--c-bad); border-color: var(--c-line); }
.ui-btn.danger:hover { border-color: var(--c-bad); background: var(--c-bad-bg); }
.ui-btn.small { padding: 6px 12px; font-size: 0.8rem; border-radius: var(--r-ctl); }
.ui-btn:disabled { background: var(--c-faint); border-color: var(--c-faint); color: var(--c-muted); cursor: not-allowed; }

/* Поля ввода */
.ui-input {
    padding: 10px 14px; border: 1px solid var(--c-line); border-radius: var(--r-card);
    background: var(--c-panel); color: var(--c-text-strong); font-size: 0.9rem; outline: none; transition: border-color 0.15s;
}
.ui-input:focus { border-color: var(--c-accent); }
.ui-input::placeholder { color: var(--c-label); }

/* Таблица */
.ui-table-wrap { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-section); overflow: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ui-table th {
    background: var(--c-bg); color: var(--c-label); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-line); white-space: nowrap;
}
.ui-table td { padding: 10px 12px; border-bottom: 1px solid var(--c-line-soft); vertical-align: top; color: var(--c-text); }
.ui-table tbody tr:hover { background: var(--c-panel-hover); }

/* Пустое состояние */
.ui-empty { text-align: center; padding: 48px 20px; color: var(--c-label); }

@media (max-width: 480px) {
    .ui-page-head { padding: 20px 0 14px; }
    .ui-page-head h1 { font-size: 1.3rem; }
    .ui-section { padding: 14px 12px; }
}
@media print {
    body { background: #fff; color: #1e293b; }
}