:root {
    --bg: #f4f6fb;
    --card: #ffffff;
    --text: #1b2333;
    --muted: #7a869a;
    --border: #e5e9f2;
    --primary: #3b6ef5;
    --primary-dark: #2f59d0;
    --success: #16a34a;
    --success-dark: #128a3e;
    --leads: #3b6ef5;
    --deps: #16a34a;
    --shadow: 0 1px 3px rgba(20, 30, 60, .08), 0 1px 2px rgba(20, 30, 60, .04);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

a { color: var(--primary); text-decoration: none; }

/* ── Верхняя панель ── */
.topbar {
    display: flex; align-items: center; gap: 24px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 0 24px; height: 56px;
    position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; font-size: 17px; color: var(--primary); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
    padding: 8px 14px; border-radius: 8px; color: var(--muted); font-weight: 500;
}
.nav a:hover { background: var(--bg); color: var(--text); }
.nav a.active { background: #eaf0ff; color: var(--primary); }
.userbox { display: flex; align-items: center; gap: 10px; }
.uname { font-weight: 600; }
.logout { color: var(--muted); font-size: 13px; }
.logout:hover { color: var(--text); }

.role { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.role-admin { background: #fff1e0; color: #c2680c; }
.role-manager { background: #f3e8ff; color: #7c3aed; }
.role-processor { background: #e6f4ff; color: #1667b3; }

/* ── Контент ── */
.content { max-width: 1460px; margin: 0 auto; padding: 24px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-head h1 { font-size: 22px; margin: 0; }
.muted { color: var(--muted); font-size: 13px; }
.block-title { font-size: 16px; margin: 22px 0 10px; }

/* ── Аналитика: KPI-плитки ── */
.kpi-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px;
}
.kpi-tile {
    background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--muted);
    border-radius: 10px; box-shadow: var(--shadow); padding: 12px 14px;
    display: flex; flex-direction: column; gap: 6px;
}
.kpi-tile .kpi-label { color: var(--muted); font-size: 12px; }
.kpi-tile .kpi-val { font-size: 22px; font-weight: 700; }
.kpi-num  { border-left-color: #64748b; }
.kpi-money { border-left-color: #0f766e; }
.kpi-pct, .kpi-sub { border-left-color: var(--primary); }
.kpi-pct .kpi-val, .kpi-sub .kpi-val { color: var(--primary); }
.kpi-cost { border-left-color: #ea580c; }
.kpi-cost .kpi-val { color: #ea580c; }

/* ── Аналитика: ряд мини-графиков ── */
.charts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 8px; }
.mini-chart { margin-bottom: 0; }
.chart-title { font-size: 14px; margin: 0 0 8px; }

/* ── Аналитика: таблица по дням ── */
.analytics-table td { vertical-align: middle; }
.analytics-table .a-in { width: 92px; margin: 0; padding: 6px 8px; }
.analytics-table .a-auto::placeholder { color: #b0b8c8; }
.total-row td { font-weight: 700; background: #faf5fb; border-top: 2px solid var(--border); }

/* ── Аналитика: сворачиваемые месяцы ── */
.month { margin-bottom: 12px; }
.month > .card { margin-top: 10px; }
.month-head {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow); padding: 12px 16px;
}
.month-head::-webkit-details-marker { display: none; }
.month-head::before {
    content: "▸"; color: var(--muted); font-size: 12px; transition: transform .15s;
}
.month[open] .month-head::before { transform: rotate(90deg); }
.month-name { font-size: 16px; font-weight: 700; text-transform: capitalize; min-width: 130px; }
.month-summary { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.month-summary b { color: var(--text); font-weight: 700; }
.month-head:hover { border-color: var(--primary); }

@media (max-width: 900px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-row { grid-template-columns: 1fr; }
}

/* ── График динамики конверсии ── */
.chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.conv-chart { width: 100%; height: auto; display: block; }
.conv-chart .grid { stroke: var(--border); stroke-width: 1; }
.conv-chart .axis-y { fill: var(--muted); font-size: 11px; text-anchor: end; }
.conv-chart .axis-x { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.chart-card { position: relative; }
.conv-chart .chart-pt { cursor: pointer; transition: r .1s; }
.conv-chart .chart-pt:hover { r: 6; }
.chart-tip {
    position: absolute; transform: translate(-50%, -140%); pointer-events: none;
    background: var(--text); color: #fff; font-size: 12px; font-weight: 600;
    padding: 5px 9px; border-radius: 7px; white-space: nowrap; z-index: 30;
    box-shadow: 0 4px 12px rgba(20, 30, 60, .2);
}
.chart-tip::after {
    content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--text);
}
.th-note { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }

.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px;
}

/* ── Переключатель Все лиды / Депозиты ── */
.toggle {
    display: inline-flex; background: #eef1f7; border: 1px solid var(--border);
    border-radius: 10px; padding: 3px; gap: 3px;
}
.toggle-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 16px; border-radius: 8px; font-weight: 600; color: var(--muted);
}
.toggle-btn:hover { color: var(--text); }
.toggle-btn.active { background: var(--card); color: var(--primary); box-shadow: var(--shadow); }
.toggle-btn .badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px;
    background: var(--border); color: var(--muted); font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.toggle-btn.active .badge { background: #eaf0ff; color: var(--primary); }

/* ── Таблицы ── */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Кнопка «Депозит» — у правого края; под форму заранее зарезервирована
   ширина колонки, поэтому её раскрытие (влево, к «Обработчик») ничего не сдвигает. */
.table-fit .col-action { min-width: 320px; text-align: right; white-space: nowrap; }
.dep-cancel {
    border: none; background: transparent; cursor: pointer; color: var(--muted);
    font-size: 20px; line-height: 1; padding: 0 4px; border-radius: 6px;
}
.dep-cancel:hover { color: #b42318; background: #fdeaea; }
.btn-del {
    border: none; background: transparent; cursor: pointer; font-size: 15px;
    padding: 4px 6px; border-radius: 6px; opacity: .6;
}
.btn-del:hover { opacity: 1; background: #fdeaea; }
.table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .2px;
    color: var(--muted); padding: 9px 8px; border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.table td { padding: 9px 8px; border-bottom: 1px solid var(--border); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fafbff; }
.empty { text-align: center; color: var(--muted); padding: 28px !important; }
.amount { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Тир-плашка ── */
.tier {
    display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: .3px; vertical-align: middle;
    color: #fff; white-space: nowrap;
}
/* Градиент от красного (Tier 1) к зелёному (Tier 7) */
.tier-1 { background: #dc2626; }
.tier-2 { background: #ea580c; }
.tier-3 { background: #d97706; }
.tier-4 { background: #ca8a04; }
.tier-5 { background: #84a017; }
.tier-6 { background: #4d9e15; }
.tier-7 { background: #15803d; }

/* ── Спред / квалификация ── */
.spread-ok  { color: var(--success); font-weight: 700; }   /* ≥ 40$ */
.spread-low { color: #ea580c; font-weight: 700; }          /* < 40$ */
.qual { text-align: center; }
.qual-yes { color: var(--success); font-size: 18px; font-weight: 700; }
.qual-no { color: var(--muted); }

/* Ручной переключатель квалификации (BullWaves) */
.qual-toggle {
    min-width: 34px; height: 28px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--card); color: var(--muted); font-size: 16px; font-weight: 700;
    cursor: pointer; font-family: inherit; line-height: 1;
}
.qual-toggle:hover { border-color: var(--success); }
.qual-toggle.on { background: var(--success); color: #fff; border-color: var(--success); }

/* ── Источник (Реклама / База) ── */
.src-select {
    width: auto; margin: 0; padding: 5px 8px; font-size: 13px; font-weight: 600;
    border-radius: 8px; cursor: pointer; border: 1px solid transparent;
}
.src-ad   { background: #e7f7ec; color: #12723a; border-color: #b7e4c7; }   /* Реклама — зелёный */
.src-base { background: #fde8e8; color: #b42318; border-color: #f5c2c0; }   /* База — бледно-красный */
.owner-select { background: var(--bg); color: var(--text); border-color: var(--border); }
.owner-select:hover { border-color: var(--primary); }

/* ── Меню действий (⋮) ── */
.col-menu { width: 40px; text-align: right; }
.menu { position: relative; display: inline-block; }
.menu-btn {
    border: none; background: transparent; cursor: pointer; font-size: 20px; line-height: 1;
    color: var(--muted); padding: 4px 8px; border-radius: 8px;
}
.menu-btn:hover { background: var(--bg); color: var(--text); }
.menu-list {
    display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 20;
    min-width: 200px; background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 30, 60, .14); padding: 6px; text-align: left;
}
.menu-list.open { display: block; }
.menu-list form { margin: 0; }
.menu-item {
    display: block; width: 100%; text-align: left; box-sizing: border-box;
    padding: 9px 12px; border: none; background: transparent; border-radius: 7px;
    font-size: 14px; font-family: inherit; font-weight: 500; color: var(--text); cursor: pointer;
}
.menu-item:hover { background: var(--bg); }
.menu-danger { color: #b42318; }
.menu-danger:hover { background: #fdeaea; }

/* ── Форма редактирования лида ── */
.edit-card { max-width: 460px; }
.edit-card label { margin-bottom: 14px; color: var(--text); }
.edit-actions { display: flex; gap: 10px; margin-top: 6px; }
.col-action { text-align: right; white-space: nowrap; }
.row-inactive { opacity: .5; }

/* ── Кнопки ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid transparent; border-radius: 8px; padding: 9px 16px;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
    background: #eef1f7; color: var(--text); transition: .12s;
}
.btn:hover { filter: brightness(.97); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: var(--success-dark); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--bg); }
.btn-fxpro { background: #e11d48; color: #fff; }   /* FxPro — красная */
.btn-fxpro:hover { background: #be123c; }
.btn-bull { background: #2563eb; color: #fff; }    /* BullWaves — синяя */
.btn-bull:hover { background: #1d4ed8; }

/* ── Формы ── */
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
input, select {
    width: 100%; margin-top: 4px; padding: 9px 11px; font-size: 14px; font-family: inherit;
    border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
}
input:focus, select:focus { outline: none; border-color: var(--primary); }
.inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.amount-input { width: 110px; margin: 0; }
.hidden { display: none; }

.add-form .add-grid {
    display: grid; grid-template-columns: 2fr 2fr 1.5fr auto; gap: 12px; align-items: end;
}
.period-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.period-form label { display: flex; flex-direction: column; }
.period-form input { width: 160px; }

/* ── Флеш-сообщения ── */
.flashes { margin-bottom: 16px; }
.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 8px; font-weight: 500; }
.flash-success { background: #e7f7ec; color: #12723a; }
.flash-error { background: #fdeaea; color: #b42318; }

/* ── Вход ── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow); padding: 32px; width: 340px;
}
.login-card h1 { margin: 0; color: var(--primary); text-align: center; }
.login-card .muted { text-align: center; margin: 4px 0 20px; }
.login-card label { margin-bottom: 14px; color: var(--text); }

/* ── KPI ── */
.kpi { color: var(--muted); }
.kpi strong { color: var(--text); font-size: 16px; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi-card { display: flex; flex-direction: column; gap: 6px; }
.kpi-label { color: var(--muted); font-size: 13px; }
.kpi-val { font-size: 28px; font-weight: 700; }

/* ── Конверсия / бары ── */
.conv-cell { display: flex; align-items: center; gap: 8px; }
.conv-bar { flex: 1; height: 8px; background: var(--border); border-radius: 6px; overflow: hidden; max-width: 120px; }
.conv-bar span { display: block; height: 100%; background: var(--success); }

.col-chart { width: 40%; }
.bars { display: flex; flex-direction: column; gap: 4px; }
.bar { height: 9px; border-radius: 4px; min-width: 2px; }
.bar-leads { background: var(--leads); }
.bar-deps { background: var(--deps); }
.legend { display: flex; gap: 18px; color: var(--muted); font-size: 13px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.dot-leads { background: var(--leads); }
.dot-deps { background: var(--deps); }

@media (max-width: 720px) {
    .add-form .add-grid { grid-template-columns: 1fr; }
    .kpi-row { grid-template-columns: 1fr; }
    .nav a { padding: 8px 9px; }
}

/* Авто-сохранение в таблице аналитики */
tr.saved td { background: #ecfdf5; transition: background .3s; }
tr.save-error td { background: #fef2f2; }

/* Обработчики: ручная добавка к числу лидов */
.leads-cell { display: inline-flex; align-items: center; gap: 6px; }
.leads-num { font-variant-numeric: tabular-nums; }
.leads-add-btn {
    border: none; background: transparent; color: var(--muted);
    opacity: 0.35; cursor: pointer; font-size: 16px; line-height: 1;
    padding: 0 5px; border-radius: 4px; transition: opacity .15s, background .15s;
}
.leads-add-btn:hover { opacity: 1; background: #eef1f7; }
.leads-add-form:not(.hidden) { display: inline-flex; gap: 4px; align-items: center; margin-left: 2px; }
.leads-add-input { width: 62px; }
.leads-bonus-hint { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

/* Аналитика: режим просмотра/редактирования ячеек по карандашику */
.a-cell .cell-view { font-variant-numeric: tabular-nums; }
.a-cell .cell-view.is-auto { color: var(--muted); }   /* авто-значение из CRM — тускло */
.a-cell .cell-edit { display: none; }                  /* поле ввода скрыто по умолчанию */
tr.editing .a-cell .cell-view { display: none; }
tr.editing .a-cell .cell-edit { display: inline-block; }
.row-edit-btn {
    border: none; background: transparent; color: var(--muted);
    opacity: 0.3; cursor: pointer; font-size: 14px; line-height: 1;
    padding: 2px 6px; border-radius: 4px; transition: opacity .15s, background .15s;
}
.row-edit-btn:hover, .row-edit-btn.active { opacity: 1; background: #eef1f7; }

/* Группа показателей над таблицей депозитов */
.kpi-group { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; }

/* Дата квалификации под галочкой */
.qual-date { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; }

/* Панель фильтров/сортировки в таблицах лидов */
.filter-row { margin: -6px 0 12px; }
.filter-bar { margin-bottom: 16px; }
.filter-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 14px;
}
.filter-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.filter-grid select, .filter-grid input { font-size: 14px; }
.filter-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Строка действий в таблице «Все лиды»: кнопка «Депозит» + меню ⋮ */
.action-row { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

/* Левая группа шапки: вкладки + кнопка «Подписки» */
.head-left { display: flex; align-items: center; gap: 12px; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 8px; }
.btn-icon svg { display: block; }
.head-right { display: flex; align-items: center; gap: 16px; }

/* Переключатель «Факт / Всего подписчиков» на плашке аналитики */
.subs-toggle {
    border: none; background: transparent; color: var(--muted); opacity: 0.45;
    cursor: pointer; padding: 0 2px; margin-left: 4px; vertical-align: middle;
    display: inline-flex; align-items: center; transition: opacity .15s, color .15s;
}
.subs-toggle:hover, .subs-toggle.active { opacity: 1; color: var(--accent, #3b6ef5); }
.subs-toggle svg { display: block; }

/* ═══════════ Общая математика — воронка проекта ═══════════ */
.fm {
    font-family: 'Manrope', system-ui, sans-serif;
    background: #fff; border: 1px solid #eef0f6; border-radius: 28px;
    padding: 40px 44px 36px; margin-bottom: 22px;
    box-shadow: 0 1px 2px rgba(28, 32, 48, .04), 0 24px 60px -28px rgba(46, 52, 94, .22);
}
.fm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.fm-title { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 800; color: #1b1f2e; letter-spacing: -.01em; }
.fm-spent {
    position: relative; overflow: hidden; min-width: 200px;
    padding: 16px 22px 16px 26px; border-radius: 16px;
    background: linear-gradient(180deg, #f4fbf8 0%, #fff 100%); border: 1px solid #d5efe4;
    display: flex; flex-direction: column; gap: 5px;
}
.fm-spent::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #0e9384; }
.fm-spent-label { font-size: 12.5px; font-weight: 600; color: #7d8598; }
.fm-spent-val { font-family: 'Space Grotesk', monospace; font-size: 26px; font-weight: 700; color: #0b7a6d; letter-spacing: -.01em; }

.fm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 152px 190px; gap: 12px 22px; align-items: center; }
.fm-colh { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a6abbd; padding-bottom: 2px; }
.fm-colh-c { text-align: center; }

.fm-stage { display: flex; align-items: center; gap: 18px; }
.fm-track { flex: 1; min-width: 0; background: #f4f5fa; border-radius: 14px; height: 74px; }
.fm-bar { height: 100%; border-radius: 14px; display: flex; align-items: center; padding: 0 24px; min-width: 160px; transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.fm-bar-info { min-width: 0; }
.fm-bar-label { font-size: 15px; font-weight: 700; white-space: nowrap; }
.fm-bar-sub { font-size: 12px; font-weight: 600; margin-top: 2px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.fm-bar-1 { background: linear-gradient(180deg, #ccd2f5 0%, #bcc4f2 100%); }
.fm-bar-1 .fm-bar-label { color: #2b3080; }
.fm-bar-1 .fm-bar-sub { color: #5a63b0; }
.fm-bar-2 { background: linear-gradient(180deg, #949dec 0%, #808ce7 100%); box-shadow: 0 8px 20px -10px rgba(96, 110, 220, .5); }
.fm-bar-3 { background: linear-gradient(180deg, #616ed8 0%, #5261d3 100%); box-shadow: 0 8px 20px -10px rgba(82, 97, 211, .55); }
.fm-bar-4 { background: linear-gradient(180deg, #3a45b3 0%, #2f3aa0 100%); box-shadow: 0 8px 22px -10px rgba(47, 58, 160, .6); }
.fm-bar-2 .fm-bar-label, .fm-bar-3 .fm-bar-label, .fm-bar-4 .fm-bar-label { color: #fff; }
.fm-bar-2 .fm-bar-sub { color: #e6e9fb; }
.fm-bar-3 .fm-bar-sub { color: #dde1f7; }
.fm-bar-4 .fm-bar-sub { color: #c9cef0; }
.fm-num { width: 68px; flex-shrink: 0; text-align: right; font-family: 'Space Grotesk', monospace; font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.fm-num-1 { color: #262c78; }
.fm-num-2, .fm-num-3 { color: #4753c9; }
.fm-num-4 { color: #2f3aa0; }
.fm-bar .subs-toggle { color: currentColor; opacity: .7; padding: 0; margin: 0; }
.fm-bar .subs-toggle:hover, .fm-bar .subs-toggle.active { opacity: 1; color: currentColor; }

.fm-conv { text-align: center; }
.fm-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #4753c9; padding: 8px 14px; border-radius: 999px; background: #eceffb; border: 1px solid #dde2f8; white-space: nowrap; }
.fm-pill-start { font-size: 12px; color: #8b91a6; background: #f4f5fa; border-color: transparent; padding: 7px 12px; }
.fm-arr { font-size: 13px; }
.fm-conv-cap { font-size: 11px; font-weight: 600; color: #a6abbd; margin-top: 6px; }

.fm-cost { padding: 12px 18px; border-radius: 14px; border: 1px solid #f0e6da; background: #fffaf4; }
.fm-cost-label { font-size: 12.5px; font-weight: 600; color: #8a8272; line-height: 1.25; }
.fm-cost-val { font-family: 'Space Grotesk', monospace; font-size: 21px; font-weight: 700; color: #d0741f; margin-top: 3px; }

.fm-times { margin-top: 30px; padding-top: 26px; border-top: 1px solid #eef0f6; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fm-time { display: flex; align-items: center; gap: 16px; }
.fm-time-ic { width: 44px; height: 44px; border-radius: 12px; background: #eef1f8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fm-time-ic-p { color: #6470c9; }
.fm-time-ic-o { color: #d0741f; }
.fm-time-body { display: flex; flex-direction: column; }
.fm-time-label { font-size: 12.5px; font-weight: 600; color: #8a90a4; }
.fm-time-val { font-family: 'Space Grotesk', monospace; font-size: 22px; font-weight: 700; color: #1c2030; margin-top: 2px; }
.fm-un { font-size: 15px; font-weight: 700; color: #8a90a4; }

@media (max-width: 820px) {
    .fm { padding: 24px 20px; border-radius: 20px; }
    .fm-grid { grid-template-columns: 1fr; gap: 4px 0; }
    .fm-colh { display: none; }
    .fm-conv { text-align: left; margin: 4px 0; }
    .fm-cost { margin-bottom: 10px; }
    .fm-title { font-size: 24px; }
}

/* ═══════════ Обработчики — новый дизайн ═══════════ */
.st { font-family: 'Manrope', system-ui, sans-serif; }
.st-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.st-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9aa0b4; margin-bottom: 9px; }
.st-title { margin: 0; font-size: 32px; line-height: 1.05; font-weight: 800; color: #1b1f2e; letter-spacing: -.015em; }
.st-desc { max-width: 460px; text-align: right; font-size: 13.5px; line-height: 1.5; color: #8a90a4; font-weight: 500; }
.st-hl { color: #4753c9; font-weight: 700; }
.st-desc .st-muted { color: #b9bdcb; }

.st-sec { display: flex; align-items: center; gap: 10px; margin: 30px 4px 12px; }
.st-sec:first-of-type { margin-top: 0; }
.st-dot { width: 8px; height: 8px; border-radius: 3px; background: #4753c9; }
.st-sec h2 { margin: 0; font-size: 17px; font-weight: 800; color: #1b1f2e; letter-spacing: -.01em; }

.st-card {
    background: #fff; border: 1px solid #eef0f6; border-radius: 24px;
    box-shadow: 0 1px 2px rgba(28, 32, 48, .04), 0 24px 60px -30px rgba(46, 52, 94, .2);
}
.st-table { padding: 10px 34px 14px; }
.st-row { display: grid; gap: 16px; align-items: center; padding: 18px 8px; border-bottom: 1px solid #f2f3f8; }
.st-row:last-child { border-bottom: none; }
.st-hrow { align-items: end; padding: 18px 8px 14px; border-bottom: 1px solid #eef0f6; }
.st-h { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #a6abbd; }
.st-hsub { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: #c2c6d3; margin-top: 3px; }

.st-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-ava { width: 38px; height: 38px; border-radius: 11px; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st-nm { font-size: 15px; font-weight: 700; color: #1b1f2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-num { font-family: 'Space Grotesk', monospace; font-size: 17px; font-weight: 700; color: #1b1f2e; }
.st-num .leads-num { font-family: 'Space Grotesk', monospace; font-size: 17px; font-weight: 700; }

.st-conv { display: flex; align-items: center; gap: 12px; }
.st-bar { flex: 1; max-width: 150px; height: 8px; border-radius: 999px; background: #eef0f6; overflow: hidden; }
.st-bar span { display: block; height: 100%; border-radius: 999px; }
.st-pct { font-family: 'Space Grotesk', monospace; font-size: 16px; font-weight: 700; }

.st-money { font-family: 'Space Grotesk', monospace; font-size: 16px; font-weight: 700; color: #d0741f; }
.st-money .st-cur { font-size: 13px; color: #c69a6a; }
.st-proc { font-family: 'Space Grotesk', monospace; font-size: 16px; font-weight: 700; color: #1b1f2e; }
.st-proc .st-un { font-size: 12.5px; color: #a6abbd; }
.st-last { font-family: 'Space Grotesk', monospace; font-size: 15px; font-weight: 600; color: #6b7183; }
.st-empty { padding: 30px 8px; text-align: center; color: var(--muted); }

.st-chart { padding: 26px 30px 22px; }
.st-legend { display: flex; justify-content: flex-end; gap: 22px; margin-bottom: 10px; }
.st-leg { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #4b5163; }
.st-leg i { width: 11px; height: 11px; border-radius: 50%; }
.st-svg { width: 100%; height: auto; display: block; font-family: 'Space Grotesk', monospace; }
.st-grid { stroke: #eef0f6; stroke-width: 1; }
.st-grid-base { stroke: #e3e6ef; stroke-width: 1.5; }
.st-axy { fill: #a6abbd; font-size: 14px; font-weight: 600; text-anchor: end; }
.st-axx { fill: #8a90a4; font-size: 14px; font-weight: 600; text-anchor: middle; }
.st-svg .chart-pt { cursor: pointer; transition: r .1s; }
.st-svg .chart-pt:hover { r: 7; }

.st-week { padding: 22px 30px; display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 0; }
.st-week-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a6abbd; margin-bottom: 8px; }
.st-week-input { font-family: 'Manrope', sans-serif; font-size: 14.5px; font-weight: 600; color: #1b1f2e; padding: 11px 14px; border: 1px solid #e3e6ef; border-radius: 12px; background: #f8f9fc; outline: none; }
.st-week-btn { font-family: 'Manrope', sans-serif; font-size: 14.5px; font-weight: 700; color: #fff; background: #4753c9; border: none; padding: 12px 24px; border-radius: 12px; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(71, 83, 201, .6); }
.st-week-btn:hover { background: #3b46b5; }
.st-range { display: flex; align-items: center; gap: 8px; padding-bottom: 2px; }
.st-range-label { font-size: 12px; font-weight: 600; color: #b9bdcb; }
.st-range-val { font-family: 'Space Grotesk', monospace; font-size: 14px; font-weight: 600; color: #6b7183; padding: 6px 12px; background: #f4f5fa; border-radius: 9px; }

@media (max-width: 900px) {
    .st-desc { text-align: left; }
    .st-table { padding: 6px 16px 10px; }
    .st-row { grid-template-columns: 1fr 1fr !important; gap: 8px 12px; }
    .st-hrow { display: none; }
    .st-title { font-size: 24px; }
}