:root { --bg: #F5F7FA; --surface: #FFFFFF; --surface-2: #F9FAFB; --surface-3: #F3F4F6; --text: #0F172A; --text-2: #334155; --muted: #64748B; --mutex: #94A3B8; --border: #E5E7EB; --border-2: #EEF0F4; --accent: #2B4EFF; --accent-soft: rgba(43, 78, 255, 0.08); --accent-soft-2: rgba(43, 78, 255, 0.14); --purple: #8B5CF6; --purple-soft: rgba(139, 92, 246, 0.10); --brand-gradient: linear-gradient(135deg, #2B4EFF, #8B5CF6); --success: #10B981; --success-soft: rgba(16, 185, 129, 0.10); --blue: #0EA5E9; --blue-soft: rgba(14, 165, 233, 0.10); --danger: #F43F5E; --danger-soft: rgba(244, 63, 94, 0.08); --warn: #F59E0B; --warn-soft: rgba(245, 158, 11, 0.10); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 4px 20px rgba(15, 23, 42, 0.06); --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08); --r: 20px; --r-sm: 12px; /* стенд-специфичные (нет в макете, используются кодом) */ --ok: var(--success); --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* Тёмная тема: переопределяем те же переменные — вся вёрстка через var(--…) перекрашивается автоматически. Включается атрибутом data-theme="dark" на . */ [data-theme="dark"] { --bg: #15171C; --surface: #1C1F25; --surface-2: #22262D; --surface-3: #2A2F37; --text: #E8EAED; --text-2: #B8BDC7; --muted: #7F8594; --mutex: #5E6472; --border: #2F343D; --border-2: #272B32; --accent: #7C8CFF; --accent-soft: rgba(124, 140, 255, 0.10); --accent-soft-2: rgba(124, 140, 255, 0.18); --purple: #B4A0FF; --purple-soft: rgba(180, 160, 255, 0.12); --brand-gradient: linear-gradient(135deg, #7C8CFF, #A78BFA); --success: #4ADE80; --success-soft: rgba(74, 222, 128, 0.10); --blue: #38BDF8; --blue-soft: rgba(56, 189, 248, 0.12); --danger: #F87171; --danger-soft: rgba(248, 113, 113, 0.10); --warn: #FBBF24; --warn-soft: rgba(251, 191, 36, 0.10); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow: 0 4px 18px rgba(0, 0, 0, 0.32); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.42); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); font-weight: 500; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; transition: background-color 0.35s ease, color 0.35s ease; } a { color: inherit; text-decoration: none; } svg { display: block; } .app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 24px 16px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar nav { display: flex; flex-direction: column; gap: 8px; } .logo { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; cursor: pointer; color: var(--text); } .logo-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-gradient); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.02em; flex-shrink: 0; box-shadow: 0 4px 14px rgba(43, 78, 255, 0.20); } .logo-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; } .logo-text-main { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .logo-text-sub { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0.01em; } .sb-group-label { font-size: 10px; color: var(--muted); font-weight: 700; padding: 14px 12px 6px; letter-spacing: 0.08em; text-transform: uppercase; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--text-2); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background 0.15s, color 0.15s; } .nav-item:hover { background: var(--surface-3); color: var(--text); } .nav-item.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(43, 78, 255, 0.25); } .nav-item .ic { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; color: currentColor; } .nav-item[data-page="operative"] .ic { color: var(--success); } .nav-item[data-page="tasks"] .ic { color: var(--danger); } .nav-item.active .ic { color: #fff; } /* «В разработке» — пункт сайдбара с замком: кликабелен, но визуально приглушён */ .nav-item.--wip { color: var(--muted); } .nav-item.--wip .ic { opacity: 0.5; } .nav-item.--muted { color: var(--muted); font-weight: 500; } .nav-item .nav-lock { margin-left: auto; font-size: 13px; line-height: 1; opacity: 0.7; } /* Нижний блок сайдбара: переключатель темы + «Выйти», прижат к низу */ .sb-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .theme-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { background: var(--surface-3); } .theme-toggle-ic { font-size: 14px; line-height: 1; } .theme-toggle-label { font-size: 13px; font-weight: 600; color: var(--text-2); flex: 1; } .theme-toggle-track { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--border); transition: background 0.2s ease; flex-shrink: 0; } .theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2); transition: transform 0.2s ease; } [data-theme="dark"] .theme-toggle-track { background: var(--accent); } [data-theme="dark"] .theme-toggle-thumb { transform: translateX(14px); } .nav-suffix { color: var(--muted); font-weight: 500; margin-left: 4px; } .nav-item.active .nav-suffix { color: rgba(255, 255, 255, 0.75); } @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } } .live-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(34, 197, 94, 0.18); color: #22C55E; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; line-height: 1; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25), 0 0 10px rgba(34, 197, 94, 0.6); animation: pulse 1.6s infinite; } .nav-item.active .live-chip { background: rgba(255, 255, 255, 0.22); color: #fff; } .nav-item.active .live-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 10px rgba(255, 255, 255, 0.6); } .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; align-items: center; gap: 24px; position: sticky; top: 0; z-index: 5; } .topbar-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .topbar-title h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .topbar-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .topbar-links a { cursor: pointer; font-size: 13px; color: var(--text-2); font-weight: 600; transition: color 0.15s; } .topbar-links a:hover { color: var(--accent); } .topbar-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; } .topbar-made { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 500; } .topbar-made-brand { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; background: var(--success-soft); color: var(--success); font-weight: 800; font-size: 12px; letter-spacing: -0.01em; cursor: pointer; } .topbar-made-brand::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); animation: pulse 1.6s infinite; } .main { display: flex; flex-direction: column; min-width: 0; } .screen-wrap { padding: 36px 40px 48px; } .screen-wrap p { color: var(--muted); font-size: 14px; } /* ── Login (шаг 0) ───────────────────────────────────────────────── */ body.is-login .sidebar, body.is-login .topbar { display: none; } body.is-login .app { grid-template-columns: 1fr; } .login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: var(--bg); } .login-card { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 360px; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); } .login-card h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); font-weight: 600; } .login-card input { font-family: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s ease; } .login-card input:focus { border-color: var(--accent); } .login-card button { margin-top: 4px; font-family: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--brand-gradient); border: 0; border-radius: 10px; padding: 11px 16px; cursor: pointer; } .login-error { font-size: 13px; color: var(--danger); } /* ── Operative — структурный CSS (шаг 7.1, минимум до 7.2) ─────── */ .op-screen { display: flex; flex-direction: column; gap: 28px; padding: 16px 0; } /* .op-block — контейнер блока БЕЗ рамки/фона (1:1 vb-103: рамка только у внутренних карточек-графиков, не у всего блока) */ .op-block { display: block; } .op-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .op-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; position: relative; } /* I2 (Codex iter-1): единый error-state на любом блоке-карточке */ .op-card[data-error="1"]::before { content: 'Не удалось загрузить'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--danger-soft); color: var(--danger); font-weight: 700; border-radius: inherit; pointer-events: none; z-index: 2; } .op-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .op-section-head h2 { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } /* — section-head 1:1 vb-103 (заголовок блока + кнопка агента) — */ .section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .section-head h2 { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.015em; margin: 0; } .section-head .btn-ai { padding: 6px 12px; font-size: 12px; } .section-head--stacked { align-items: flex-start; flex-direction: column; gap: 4px; } .section-head--stacked .section-desc { font-size: 12.5px; color: var(--muted); font-weight: 500; } /* — Кнопка агента «✦ Обсудить» (фиолетовая пилюля) 1:1 vb-103 — */ .btn-ai { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--ai-grad, linear-gradient(135deg, #8B5CF6, #EC4899)); color: #fff; border: 1px solid transparent; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .15s; } .btn-ai:hover { filter: brightness(1.05); } .op-defaults-mark { margin-top: 10px; font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; } .op-groups-nodate { margin-top: 8px; font-size: 12px; color: var(--muted); opacity: 0.85; } /* ── Блок 1 · KPI «Сегодня» ─────────────────────────────────────── */ .op-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .kpi-card { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: .15s; } .kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.3; min-height: 32px; display: flex; align-items: flex-start; } .kpi-value { font-size: 32px; font-weight: 800; color: var(--text); line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; } .kpi-value small { font-size: 22px; font-weight: 700; opacity: .85; margin-left: 4px; } .kpi-sub { font-size: 11px; color: var(--muted); font-weight: 500; min-height: 14px; } @media (max-width: 980px) { .op-kpi-row { grid-template-columns: repeat(2, 1fr); } } /* ── Блок 2 · RR-чарт ──────────────────────────────────────────── */ .op-rr-svg { width: 100%; height: 240px; display: block; } .op-rr-axis-x, .op-rr-axis-y { font-size: 10.5px; fill: var(--muted); font-weight: 600; } .op-rr-bar-pos { fill: #14B8A6; transition: filter 0.12s; } .op-rr-bar-neg { fill: #EF4444; transition: filter 0.12s; } .op-rr-bar-current { fill: #9CA3AF; opacity: 0.5; transition: filter 0.12s; } .op-rr-bar-forecast { fill: #9CA3AF; opacity: 0.32; transition: filter 0.12s; } .op-rr-bar-pos:hover, .op-rr-bar-neg:hover, .op-rr-bar-current:hover, .op-rr-bar-forecast:hover { filter: brightness(1.1); } .op-rr-marker-now { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.7; } .op-rr-marker-cap { fill: var(--accent); } .op-rr-marker-text { font-size: 11px; font-weight: 700; fill: #fff; } /* ── Блок 3 · Состояние сети ──────────────────────────────────── */ .op-network-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .op-network-cell { background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-align: left; } .op-network-cell.is-warn { border-color: var(--warn); background: var(--warn-soft); } .op-network-cell.is-danger { border-color: var(--danger); background: var(--danger-soft); } .op-network-num { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.05; font-variant-numeric: tabular-nums; } .op-network-cell.is-danger .op-network-num { color: var(--danger); } .op-network-cell.is-warn .op-network-num { color: var(--warn); } .op-network-lbl { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: -0.005em; } @media (max-width: 980px) { .op-network-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Блок 4 · Группы 🟢/🔵/🔴 ──────────────────────────────────── */ .op-groups-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .op-group-chip { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--border-2); } .op-group-chip--green { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.32); } .op-group-chip--blue { background: rgba(43, 78, 255, 0.07); border-color: rgba(43, 78, 255, 0.28); } .op-group-chip--red { background: var(--danger-soft); border-color: rgba(244, 63, 94, 0.32); } .op-group-chip.is-blocked { background: var(--surface-3); border-color: var(--border-2); color: var(--muted); } .op-group-emoji { font-size: 28px; line-height: 1; } .op-group-body { display: flex; flex-direction: column; gap: 2px; } .op-group-num { font-size: 28px; font-weight: 800; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; } .op-group-chip.is-blocked .op-group-num { color: var(--muted); } .op-group-lbl { font-size: 12.5px; color: var(--muted); font-weight: 600; } @media (max-width: 980px) { .op-groups-grid { grid-template-columns: 1fr; } } /* ── Блок 5 · Топ точек ────────────────────────────────────────── */ .op-toppoints-mode-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .op-mode-chip { font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .op-mode-chip:hover { background: var(--surface-3); color: var(--text); } .op-mode-chip.is-active { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 700; } .op-toppoints-list { display: flex; flex-direction: column; gap: 6px; } .op-toppoints-empty { padding: 18px; text-align: center; color: var(--muted); font-weight: 600; background: var(--surface-3); border-radius: 10px; } .op-toppoints-row { display: grid; grid-template-columns: 44px 1fr 160px 64px auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface); } .op-toppoint-actions { display: flex; gap: 8px; } .op-toppoint-actions .btn-s, .op-toppoint-actions .btn-ai { padding: 6px 10px; font-size: 11.5px; white-space: nowrap; } .op-toppoint-rank { font-size: 22px; font-weight: 800; color: var(--accent); text-align: center; font-variant-numeric: tabular-nums; } .op-toppoint-name { font-size: 13.5px; font-weight: 700; color: var(--text); } .op-toppoint-meta { font-size: 11.5px; color: var(--muted); font-weight: 500; } .op-toppoint-main { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .op-toppoint-main-val { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .op-toppoint-main-sub { font-size: 11px; color: var(--muted); font-weight: 500; } .op-toppoint-delta { font-size: 12px; font-weight: 700; text-align: right; color: var(--muted); } .op-toppoint-delta.is-up { color: var(--success); } .op-toppoint-delta.is-down { color: var(--danger); } .op-toppoint-delta.is-flat { color: var(--muted); } @media (max-width: 980px) { .op-toppoints-row { grid-template-columns: 36px 1fr 110px; } .op-toppoint-delta, .op-toppoint-actions { display: none; } } /* ── Блок 6 · Ошибки · сегодня ────────────────────────────────── */ .op-errors-loss { font-size: 13px; font-weight: 700; color: var(--danger); background: var(--danger-soft); padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; align-self: flex-start; } /* — Ошибки: обёртка-карточка + список точек 1:1 vb-103 — */ .op-errors-card { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .op-errors-toolbar { margin-left: 0; flex-direction: column; align-items: flex-start; gap: 12px; } .op-errors-grp-lbl { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; } .op-errors-pts { margin-top: 4px; padding: 14px 16px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px; } .op-errors-pts-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .op-errors-pts-title { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .op-errors-pts-sum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 12.5px; color: var(--text-2); } .op-errors-svg { width: 100%; height: 180px; display: block; } .op-errors-list-head { font-size: 13px; font-weight: 700; color: var(--text); padding: 6px 0 8px; border-top: 1px solid var(--border); margin-top: 8px; } .op-errors-list { display: flex; flex-direction: column; gap: 4px; } .op-errors-empty { padding: 14px; text-align: center; color: var(--muted); font-weight: 600; background: var(--surface-3); border-radius: 8px; } .op-errors-row { display: grid; grid-template-columns: 12px 112px 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 10px; margin-bottom: 8px; background: var(--surface); font-size: 13px; } .op-errors-row:hover { border-color: var(--accent); } .op-errors-addr { font-weight: 700; color: var(--text); } .op-errors-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .op-errors-id { font-family: var(--font-mono); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .op-errors-addr { color: var(--text-2); font-weight: 500; } .op-errors-type { font-weight: 700; } .op-errors-since { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; } .op-errors-row-loss { color: var(--danger); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 980px) { .op-errors-row { grid-template-columns: 12px 80px 1fr 110px; } .op-errors-since, .op-errors-row-loss { display: none; } } /* ═══════════════════════════════════════════════════════════════════ v2 (2026-05-27) — расширение «Оперативки» до полного прототипа 11 блоков, плейсхолдеры для блоков без endpoint'а ═══════════════════════════════════════════════════════════════════ */ /* — Декоративный плейсхолдер из прототипа (Задачи, Внимание) — */ .op-placeholder { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 14px; color: var(--muted); margin-bottom: 14px; } .op-placeholder-ic { font-size: 22px; line-height: 1; opacity: .7; flex-shrink: 0; } .op-placeholder-body { display: flex; flex-direction: column; gap: 2px; } .op-placeholder-title { font-weight: 800; font-size: 14px; color: var(--text-2); } .op-placeholder-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; } /* — Универсальный «Данных нет» (Партнёры, Типы локации, Heatmap, Средняя) — */ .op-no-data { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--surface-2); border-radius: 10px; color: var(--muted); } .op-no-data-ic { font-size: 26px; line-height: 1; flex-shrink: 0; opacity: 0.7; } .op-no-data-body { display: flex; flex-direction: column; gap: 2px; } .op-no-data-title { font-weight: 600; color: var(--text-2); } .op-no-data-sub { font-size: 13px; } /* — KPI grid 1:1 vb-103 (hero 1.6fr + 5 карточек в ряд) — */ .kpi-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); } .funnel-grid { grid-template-columns: 1.6fr repeat(5, 1fr); } @media (max-width: 1280px) { .funnel-grid { grid-template-columns: 1.6fr repeat(2, 1fr); } } @media (max-width: 760px) { .kpi-grid, .funnel-grid { grid-template-columns: 1fr 1fr; } .funnel-grid .kpi-hero { grid-column: span 2; } } .kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; } .kpi-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 60%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--accent) 8%, transparent); flex-shrink: 0; transition: .2s; } .kpi-ic.--muted { color: var(--muted); background: linear-gradient(135deg, var(--surface-3), color-mix(in srgb, var(--surface-3) 50%, #fff)); box-shadow: inset 0 0 0 1px var(--border-2); } .kpi-ic.--danger { color: var(--danger); background: linear-gradient(135deg, var(--danger-soft), color-mix(in srgb, var(--danger-soft) 60%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 12%, transparent); } .kpi-ic.--success { color: var(--success); background: linear-gradient(135deg, var(--success-soft), color-mix(in srgb, var(--success-soft) 60%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 12%, transparent); } .kpi-hint { font-size: 12px; color: var(--muted); line-height: 1.4; font-weight: 500; min-height: 30px; } .kpi-delta { font-size: 11.5px; font-weight: 700; line-height: 1.2; } .kpi-delta.--pos { color: var(--success); } .kpi-delta.--neg { color: var(--danger); } .kpi-delta.--neu { color: var(--muted); } .kpi-rr-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; } .kpi-rr-chip.--ok { background: var(--success-soft); color: var(--success); } .kpi-rr-chip.--warn { background: var(--warn-soft); color: var(--warn); } .kpi-rr-chip.--danger { background: var(--danger-soft); color: var(--danger); } /* — KPI hero «Активность сети» (оранжевый/красный по состоянию) — */ .kpi-hero { background: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%); border-color: transparent; color: #fff; padding: 18px 20px; position: relative; overflow: hidden; } .kpi-hero::before { content: ''; position: absolute; top: -30%; right: -12%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 65%); pointer-events: none; } .kpi-hero > * { position: relative; z-index: 1; } .kpi-hero .kpi-ic { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; } .kpi-hero .kpi-label, .kpi-hero .kpi-hint { color: rgba(255,255,255,.92); } .kpi-hero .kpi-value { color: #fff; } .kpi-hero.is-calm, .kpi-hero.is-ok { background: linear-gradient(135deg, var(--success) 0%, #34D399 100%); } .kpi-hero.is-warn { background: linear-gradient(135deg, #D97706 0%, #FBBF24 100%); } .kpi-hero.is-danger { background: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%); } .kpi-hero-errchip { color: #fff; background: rgba(255,255,255,.18); padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .kpi-hero .btn-action { margin-top: 8px; align-self: flex-start; background: #fff; color: #9F1239; border: none; border-radius: 10px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .15s; box-shadow: 0 2px 10px rgba(0,0,0,.12); display: inline-flex; align-items: center; gap: 6px; } .kpi-hero.is-warn .btn-action { color: #B45309; } .kpi-hero.is-ok .btn-action, .kpi-hero.is-calm .btn-action { color: var(--success); } .kpi-hero .btn-action:hover { background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.18); transform: translateY(-1px); } .kpi-hero.is-calm .btn-action { display: none; } /* — chip (универсальный) для disabled-переключателей в Ошибках/RR/Топе — */ .chip { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 13px; font-weight: 500; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .chip:hover:not([disabled]) { background: var(--surface-3); color: var(--text); } .chip.is-active { background: var(--accent, var(--text)); color: var(--surface); border-color: transparent; } .chip[disabled] { opacity: 0.5; cursor: not-allowed; } /* — Toolbar Ошибок (Количество/Потери + Сеть/Партнёры) — */ /* .op-errors-toolbar — определён выше (колонка, прижат влево, 1:1 vb-103) */ .op-errors-grp { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* — RR chips «Авто / Рабочий / Выходной» — */ .op-rr-bench-chips { display: inline-flex; gap: 6px; margin: 8px 0 12px; } /* — RR полная легенда (5 элементов) — */ /* Подложка-карточка RR-графика (была забыта — SVG лежал голым) 1:1 vb-103 */ .op-rr-card { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .op-rr-legend { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 14px 0; font-size: 12px; color: var(--muted); } .op-rr-leg-item { display: inline-flex; align-items: center; gap: 8px; } .op-rr-leg-item em { font-style: italic; color: var(--muted); } .op-rr-leg-swatch { display: inline-block; width: 18px; height: 8px; border-radius: 2px; background: var(--muted); } .op-rr-leg-avg { background: var(--text-2); } .op-rr-leg-pos { background: #14B8A6; } .op-rr-leg-neg { background: #EF4444; } .op-rr-leg-fct { background: #9CA3AF; opacity: 0.32; } .op-rr-leg-summ { margin-left: auto; font-weight: 600; color: var(--text); } /* — Группы v2: большие карточки (count + revenue), без прогресс-баров — */ .op-groups-grid { /* уже определено выше; добавляем выравнивание для карточек */ } .op-group-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; min-height: 140px; } .op-group-card--green { border-left: 4px solid var(--success); } .op-group-card--blue { border-left: 4px solid #3B82F6; } .op-group-card--red { border-left: 4px solid var(--danger); } .op-group-card.is-blocked, .op-group-card--blocked { opacity: 0.7; } .op-group-head { display: flex; align-items: center; gap: 8px; } .op-group-emoji { font-size: 18px; line-height: 1; } .op-group-title { font-weight: 600; color: var(--text); font-size: 14px; } .op-group-rule { color: var(--muted); font-weight: 400; font-size: 12.5px; } /* .op-group-num уже определён в v1 — переопределяем для card-варианта */ .op-group-card .op-group-num { font-size: 60px; font-weight: 800; line-height: 1; letter-spacing: -0.025em; margin-top: 6px; color: var(--text); font-variant-numeric: tabular-nums; } .op-group-num-lbl { font-size: 12.5px; color: var(--muted); margin-top: -6px; } .op-group-num-lbl--blocked { color: var(--warn, var(--muted)); font-style: italic; } .op-group-money { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; border-top: 1px solid var(--border); margin-top: auto; } .op-group-money-lbl { color: var(--muted); font-size: 12.5px; } .op-group-money-val { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } /* — Переключатели (режим/направление) — в section-head, прижаты вправо 1:1 vb-103 — */ .op-topfilter { display: flex; align-items: center; gap: 8px; } .section-head .op-topfilter:first-of-type { margin-left: auto; } .op-topfilter--dir, .op-topfilter-dir { margin-left: 0; } /* — Топ точек: «Показать ещё / Свернуть» — */ .op-expand-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; } .op-expand-btn, .op-collapse-btn { padding: 6px 14px; font-size: 13px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.12s, color 0.12s; } .op-expand-btn:hover:not([disabled]), .op-collapse-btn:hover { background: var(--surface-3); color: var(--text); } .op-expand-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ════════════════════════════════════════════════════════════════════ v3 «Оперативка» — порт стилей блоков из vb-103 (Шаги 2–8) ════════════════════════════════════════════════════════════════════ */ :root { /* Цвета типов локации (= оттенки vb-103) для карточек/баров/линий. --blue и --success-soft теперь в базовом :root по значениям макета. */ --op-loc-tc: #14B8A6; --op-loc-office: #F59E0B; --op-loc-street: #8B5CF6; --op-loc-tradez: #EF4444; --op-loc-unclassified: #94A3B8; } /* — RR: средняя линия 30д + линия прогноза (Шаг 6) — */ .op-rr-line-avg-hour { fill: none; stroke: #6B7280; stroke-width: 2; stroke-dasharray: 5 4; opacity: .9; stroke-linecap: round; stroke-linejoin: round; } .op-rr-line-forecast { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 4; opacity: .7; stroke-linecap: round; stroke-linejoin: round; } /* — Блок «Партнёры» (team-card 1:1, Шаг 2) — */ .op-partners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 900px) { .op-partners-grid { grid-template-columns: 1fr; } } .team-card { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .team-card.is-ok { border-color: var(--success); border-width: 1.5px; } .team-card.is-warn { border-color: var(--warn); border-width: 1.5px; } .team-card.is-danger { border-color: var(--danger); border-width: 1.5px; } .team-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .team-top .team-groups { margin-left: auto; } .team-av { width: 36px; height: 36px; border-radius: 9px; background: var(--brand-gradient); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(43, 78, 255, .20); } .team-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .team-name { font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.1; } .team-meta { font-size: 11px; color: var(--muted); font-weight: 500; } .team-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); } .team-kpis > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; } .team-kpi-val { font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .team-kpi-lbl { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-groups { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .team-groups .tg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .team-groups .tg-chip.--g { background: var(--success-soft); color: var(--success); } .team-groups .tg-chip.--y { background: var(--warn-soft); color: var(--warn); } .team-groups .tg-chip.--r { background: var(--danger-soft); color: var(--danger); } .team-groups .tg-chip.is-zero { opacity: .45; } .team-spark { display: flex; flex-direction: column; gap: 6px; } .op-sparkline-lbl { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .partner-sparkline { display: block; width: 100%; height: 56px; } /* team-actions: кнопки «Метрешка» + «Обсудить» в карточке партнёра 1:1 vb-103 */ .team-actions { display: flex; gap: 8px; justify-content: space-between; } .team-actions .btn-s, .team-actions .btn-ai { flex: 1; justify-content: center; padding: 7px 8px; font-size: 11.5px; } .btn-s { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; transition: .15s; } .btn-s:hover { border-color: var(--accent); color: var(--accent); } .section-desc { font-size: 12.5px; color: var(--muted); font-weight: 500; } /* — Блок «Точки по группам» — обогащение (Шаг 8b) — */ .op-group-row-num { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .op-group-bar-wrap { flex: 1; min-width: 140px; } .op-group-bar-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .op-group-rule-inline { font-size: 11.5px; color: var(--muted); font-weight: 500; } .op-group-bar { flex: 1; min-width: 120px; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; } .op-group-bar-fill { height: 100%; border-radius: 4px; width: 0; transition: width .4s ease; } .op-group-bar-fill--green { background: var(--brand-gradient); } .op-group-bar-fill--blue { background: var(--blue); } .op-group-bar-fill--red { background: var(--danger); opacity: .6; } .op-group-bar-lbl { font-size: 11px; color: var(--muted); font-weight: 700; white-space: nowrap; } .op-group-spark-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .op-group-spark-spacer { min-height: 76px; } .op-group-money-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; } .op-group-money-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .op-group-money-share { font-size: 11.5px; color: var(--muted); font-weight: 700; } /* override v2: .op-group-money теперь инлайн-значение (как в vb-103) */ .op-group-card .op-group-money { display: inline; font-size: 15.5px; font-weight: 800; color: var(--text); } .op-group-link { margin-top: auto; padding-top: 8px; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--accent); border: none; background: none; text-align: left; cursor: pointer; } .op-group-link:hover { text-decoration: underline; } .op-group-card.is-blocked { opacity: .7; } /* — Блок «Точки по типу локации» (карточки, Шаг 3) — */ /* 5 типов локации (с «Не классифицировано») → 5 в ряд; адаптив вниз. auto-fit с min даёт ровные равные карточки без растягивания первой. */ .op-loctypes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } @media (max-width: 1200px) { .op-loctypes-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .op-loctypes-grid { grid-template-columns: repeat(2, 1fr); } } .op-loctype-card { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; align-items: center; } .op-loctype-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .op-loctype-name { font-weight: 800; font-size: 18px; color: var(--text); line-height: 1.15; letter-spacing: -.01em; } .op-loctype-sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; min-height: 13px; } /* числа в столбик, без переноса внутри строки (5 узких карточек) */ .op-loctype-stats { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; } .op-loctype-stats > span { white-space: nowrap; } .op-loctype-stats b { color: var(--text); font-weight: 800; font-size: 16px; } .op-loctype-stats .op-loctype-stat-rev { color: var(--text); font-weight: 800; font-size: 17px; } .op-loctype-pct { font-size: 30px; font-weight: 800; color: #14B8A6; line-height: 1; text-align: right; white-space: nowrap; } .op-loctype-pct small { font-size: 11px; } .op-loctype-pct small { font-size: 13px; color: var(--muted); font-weight: 600; display: block; margin-top: 6px; } .op-loctype-empty { color: var(--muted); font-size: 13px; padding: 8px 0; } /* — Блок «Активность по типу локации» (stacked-бары, Шаг 4) — */ .op-locbars-card { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 12px; } .op-locbars-svg { width: 100%; height: 260px; display: block; } .op-locbars-grid { stroke: var(--border); stroke-width: 1; opacity: .45; stroke-dasharray: 2 3; } .op-locbars-axis { font: 11px var(--font-mono); fill: var(--muted); } .op-locbars-now { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; } .op-locbars-now-lbl { font: 10.5px var(--font-mono); fill: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .op-locbars-bar { cursor: default; } .op-locbars-legend { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; font-size: 12px; color: var(--muted); } .op-locbars-legend-item { display: inline-flex; align-items: center; gap: 6px; } .op-locbars-legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } /* — Блок «Средняя выручка на точку» (линии, Шаг 5) — */ .op-loctypes-chart-modes { margin-left: auto; } .op-loctypes-chart-card { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 12px; } .op-loctypes-chart-svg { width: 100%; height: 240px; display: block; } .op-loctypes-chart-grid { stroke: var(--border); stroke-width: 1; opacity: .45; stroke-dasharray: 2 3; } .op-loctypes-chart-axis-y, .op-loctypes-chart-axis-x { font: 11px var(--font-mono); fill: var(--muted); } .op-loctypes-chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .op-loctypes-chart-now { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; } .op-loctypes-chart-now-lbl { font: 10.5px var(--font-mono); fill: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .op-loctypes-chart-now-val { font: 11.5px var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; } .op-loctypes-chart-dot { stroke-width: 2; fill: var(--surface); } .op-loctypes-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; font-size: 12px; color: var(--muted); } .op-loctypes-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; } .op-loctypes-chart-legend-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } /* — Модалка «Список точек» (плейсхолдер, Шаг 8b) — */ .op-modal[hidden] { display: none; } .op-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; } .op-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); } .op-modal-card { position: relative; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; width: min(460px, 92vw); max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(15, 23, 42, .25); } .op-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-2); } .op-modal-head h3 { font-size: 15px; font-weight: 800; color: var(--text); } .op-modal-x { border: none; background: none; font-size: 16px; color: var(--muted); cursor: pointer; line-height: 1; } .op-modal-body { padding: 12px 18px 18px; overflow-y: auto; } .op-modal-row { display: block; padding: 8px 0; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--border-2); text-decoration: none; cursor: pointer; } .op-modal-row:last-child { border-bottom: none; } .op-modal-row:hover { color: var(--text-1); text-decoration: underline; } .op-modal-empty { padding: 12px 0; color: var(--muted); font-size: 13px; } /* ═══════════════════════════════════════════════════════════════════ */ /* Вкладка «Прибыль» (#screen-profit) — каркас an2-* + модули pf/m2/m3/m4. */ /* Источник: макет vb-103.html #screen-profit (дословно). Переменные, */ /* которых нет в общих стилях, определены ниже на #screen-profit. */ /* ═══════════════════════════════════════════════════════════════════ */ #screen-profit{ --success-text:#047857; --danger-text:#E11D48; --warn-text:#B45309; --watch:#38BDF8; --watch-soft:rgba(56,189,248,.12); } [data-theme="dark"] #screen-profit{ --success-text:#6EE7A5; --danger-text:#FCA5A5; --warn-text:#FCD34D; --watch:#38BDF8; --watch-soft:rgba(56,189,248,.16); } /* ── Канон an2-* (страница, блок, период-бар, чипы, модалка, календарь) ── */ #screen-profit .an2-page{display:flex;flex-direction:column;gap:24px;padding-top:20px} #screen-profit .an2-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px 22px;display:flex;flex-direction:column;gap:14px} #screen-profit .an2-block__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap} #screen-profit .an2-block__title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em;margin:0} #screen-profit .an2-block__sub{font-size:12px;color:var(--muted);font-weight:500;margin-top:3px} #screen-profit .an2-block__actions{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap} #screen-profit .an2-mod-period-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap} #screen-profit .an2-period-chip{font-family:inherit;font-size:13px;font-weight:600;color:var(--text-2);background:transparent;border:1px solid var(--border);border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap} #screen-profit .an2-period-chip.--sm{font-size:12px;font-weight:600;padding:5px 11px} #screen-profit .an2-period-chip:hover{border-color:var(--accent);color:var(--accent)} #screen-profit .an2-period-chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff} #screen-profit .an2-period-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px} #screen-profit .an2-modal[hidden]{display:none} #screen-profit .an2-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px} #screen-profit .an2-modal__overlay{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px)} [data-theme="dark"] #screen-profit .an2-modal__overlay{background:rgba(0,0,0,.55)} #screen-profit .an2-modal__dialog{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);width:min(720px,100%);max-height:90vh;display:flex;flex-direction:column} #screen-profit .an2-modal__head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border-2)} #screen-profit .an2-modal__title{font-size:16px;font-weight:700;color:var(--text);margin:0} #screen-profit .an2-modal__close{font-size:18px;color:var(--muted);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;transition:background .15s;cursor:pointer;border:none;background:transparent} #screen-profit .an2-modal__close:hover{background:var(--surface-3);color:var(--text)} #screen-profit .an2-modal__body{padding:18px 22px;overflow:auto;flex:1} #screen-profit .an2-modal__foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--border-2)} #screen-profit .an2-rp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} #screen-profit .an2-rp__cal{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:14px;min-height:280px} #screen-profit .an2-rp__cal-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px} #screen-profit .an2-rp__cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} #screen-profit .an2-rp__dow{font-size:11px;color:var(--muted);text-align:center;padding:4px 0} #screen-profit .an2-rp__day{font-size:12.5px;font-weight:500;height:30px;display:grid;place-items:center;border-radius:8px;cursor:pointer;transition:background .12s;color:var(--text)} #screen-profit .an2-rp__day:hover:not(.is-disabled){background:var(--surface-3)} #screen-profit .an2-rp__day.is-other-month{color:var(--mutex)} #screen-profit .an2-rp__day.is-disabled{color:var(--mutex);cursor:not-allowed;opacity:.5} #screen-profit .an2-rp__day.is-from,#screen-profit .an2-rp__day.is-to{background:var(--accent);color:#fff;font-weight:700} #screen-profit .an2-rp__day.is-in-range{background:var(--accent-soft);color:var(--accent)} #screen-profit .an2-rp__inputs{display:flex;gap:14px;align-items:center} #screen-profit .an2-rp__field{flex:1;display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase} #screen-profit .an2-rp__field input{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;outline:none;transition:border-color .15s} #screen-profit .an2-rp__field input:focus{border-color:var(--accent)} #screen-profit .an2-rp__hint{font-size:12px;color:var(--muted);margin-top:10px} @media(max-width:640px){#screen-profit .an2-rp{grid-template-columns:1fr}} #screen-profit .btn-s{font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer} #screen-profit .btn-primary{font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:10px;border:none;background:var(--accent);color:#fff;cursor:pointer} /* ── «Скоро будет» — единый плейсхолдер blocked-поля (бэк отдаёт status:blocked) ── */ #screen-profit .pf-soon{color:var(--mutex);font-weight:700} #screen-profit .pf-soon-cap{font-size:10.5px;color:var(--mutex);font-weight:700} #screen-profit .tabnum{font-variant-numeric:tabular-nums} /* ── M1 · Оценка прибыли (профиль, pf-m1). НЕ sticky — отказ от залипания (приёмка 2026-05-25). Подсветка вердиктом СРАЗУ: фон-заливка соответствующим soft-токеном + рамка (не «пустая рамочка»). ── */ #screen-profit .an2-block.pf-m1{transition:border-color .25s ease,background-color .25s ease} #screen-profit .pf-m1.is-verdict-green{border-color:var(--success);background:linear-gradient(0deg,var(--success-soft),var(--success-soft)),var(--surface)} #screen-profit .pf-m1.is-verdict-yellow{border-color:var(--warn);background:linear-gradient(0deg,var(--warn-soft),var(--warn-soft)),var(--surface)} #screen-profit .pf-m1.is-verdict-red{border-color:var(--danger);background:linear-gradient(0deg,var(--danger-soft),var(--danger-soft)),var(--surface)} #screen-profit .pf-m1__grid{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:stretch} @media(max-width:880px){#screen-profit .pf-m1__grid{grid-template-columns:1fr}} #screen-profit .pf-m1-hero{display:flex;flex-direction:column;gap:10px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:18px} #screen-profit .pf-m1-hero__num{font-size:54px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} #screen-profit .pf-m1-hero__num small{font-size:24px;font-weight:700;color:var(--muted)} #screen-profit .pf-m1-hero__cap{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.35;margin-top:-3px} #screen-profit .pf-m1-verdict{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:5px 12px;width:max-content;margin-top:2px} #screen-profit .pf-m1-verdict--green{background:var(--success-soft);color:var(--success)} #screen-profit .pf-m1-verdict--yellow{background:var(--warn-soft);color:var(--warn)} #screen-profit .pf-m1-verdict--red{background:var(--danger-soft);color:var(--danger)} #screen-profit .pf-m1__right{display:flex;flex-direction:column;gap:14px;min-width:0;justify-content:center} #screen-profit .pf-m1-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} #screen-profit .pf-m1-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px 15px} #screen-profit .pf-m1-stat__l{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em} #screen-profit .pf-m1-stat__v{font-size:21px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:4px} #screen-profit .pf-m1-stat__sub{font-size:11px;color:var(--mutex);font-weight:700;margin-top:2px} #screen-profit .pf-m1-points{font-size:13px;font-weight:600;color:var(--text);border-top:1px solid var(--border-2);padding-top:11px} #screen-profit .pf-m1-points b{font-weight:800;font-size:15px} #screen-profit .pf-m1-points b.--ok{color:var(--success-text)} #screen-profit .acts-sep{align-self:center;width:1px;height:20px;background:var(--border);margin:0 4px} /* ── M2 · Прибыль в разрезе ── */ #screen-profit .m2-head-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap} #screen-profit .m2-tbl-wrap{overflow-x:auto;margin-top:10px} #screen-profit .m2-tbl{display:flex;flex-direction:column;gap:6px;min-width:1040px} /* 10 колонок: сущность + Стаканы + Ср.чек + Прибыль/Рентаб/На точку/План месяц/Ранрейт мес + Прибыльных + Доля */ #screen-profit .m2-row{display:grid;grid-template-columns:minmax(160px,1.8fr) repeat(8,minmax(72px,1fr)) minmax(80px,1.1fr);gap:10px;align-items:center;padding:9px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2)} #screen-profit .m2-row.--head{background:transparent;border:none;padding:0 14px 2px} #screen-profit .m2-row.--head span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mutex)} #screen-profit .m2-ent{display:flex;align-items:center;gap:10px;min-width:0} #screen-profit .m2-mark{width:30px;height:30px;border-radius:8px;background:var(--brand-gradient);color:#fff;display:grid;place-items:center;font-weight:800;font-size:11px;flex-shrink:0} #screen-profit .m2-ent b{font-size:13.5px;font-weight:800;display:block;line-height:1.2} #screen-profit .m2-ent small{font-size:11px;color:var(--muted);font-weight:600} #screen-profit .m2-v{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right} #screen-profit .m2-v small{display:block;font-size:10px;color:var(--mutex);font-weight:700;margin-top:1px} #screen-profit .m2-v.--pos{color:var(--success-text)} #screen-profit .m2-v.--neg{color:var(--danger-text)} #screen-profit .m2-nm{font-size:13px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} #screen-profit .m2-nm b{color:var(--success-text)} #screen-profit .m2-nm s{color:var(--danger-text);text-decoration:none} #screen-profit .m2-head-num{text-align:right} /* ── M3 · Точки по прибыли ── */ #screen-profit .m3-filters{display:flex;flex-direction:column;gap:9px;margin-bottom:4px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm)} #screen-profit .fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #screen-profit .fgroup>.flabel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mutex);width:74px;flex-shrink:0} #screen-profit .fchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap} #screen-profit .fchip{font-family:inherit;font-size:12px;font-weight:600;color:var(--text-2);background:transparent;border:1px solid var(--border);border-radius:999px;padding:5px 12px;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap} #screen-profit .fchip:hover{border-color:var(--accent);color:var(--accent)} #screen-profit .fchip.is-active{background:var(--accent-soft-2);border-color:var(--accent);color:var(--accent);font-weight:700} #screen-profit .fchip.--primary.is-active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700} #screen-profit .m3-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px} #screen-profit .pt{border:1px solid var(--border);border-radius:15px;padding:15px 16px;background:var(--surface-2);display:flex;flex-direction:column;gap:11px} #screen-profit .pt.--neg{border-color:var(--danger);background:var(--danger-soft)} #screen-profit .pt__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} #screen-profit .pt__rank{font-size:13px;font-weight:800;color:var(--mutex);font-variant-numeric:tabular-nums} #screen-profit .pt__loc{flex:1;padding:0 8px} #screen-profit .pt__loc b{font-size:14px;font-weight:800;display:block;line-height:1.2} #screen-profit .pt__loc small{font-size:11px;color:var(--muted);font-weight:600} #screen-profit .pt__status{font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px} #screen-profit .pt__status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor} #screen-profit .pt__status.--stable{color:var(--success-text);background:var(--success-soft)} #screen-profit .pt__status.--watch{color:var(--watch);background:var(--watch-soft)} #screen-profit .pt__status.--warn{color:var(--warn-text);background:var(--warn-soft)} #screen-profit .pt__main{display:flex;align-items:baseline;gap:10px} #screen-profit .pt__profit{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums} #screen-profit .pt__profit.--pos{color:var(--success-text)} #screen-profit .pt__profit.--neg{color:var(--danger-text)} #screen-profit .pt__rent{font-size:13px;font-weight:800;color:var(--text-2)} #screen-profit .pt__meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:11.5px;color:var(--muted);font-weight:600} #screen-profit .pt__meta b{color:var(--text-2);font-weight:800} #screen-profit .pt__pf{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--muted)} #screen-profit .pt__pfbar{flex:1;height:6px;background:var(--surface-3);border-radius:4px;overflow:hidden} #screen-profit .pt__pfbar i{display:block;height:100%;border-radius:4px} #screen-profit .pt__rr{font-size:11.5px;font-weight:700;color:var(--text-2)} #screen-profit .pt__rr b{font-variant-numeric:tabular-nums} #screen-profit .pt__err{font-size:11.5px;font-weight:700;color:var(--warn-text);display:flex;align-items:center;gap:5px} #screen-profit .pt__foot{display:flex;gap:8px;margin-top:2px} #screen-profit .pt__foot button:not(.btn-ai){font-size:11px;font-weight:700;padding:6px 10px;border-radius:8px;border:1px solid var(--border);color:var(--text-2);background:var(--surface);cursor:pointer} #screen-profit .pt__foot .btn-ai{padding:6px 12px;font-size:11px} #screen-profit .m3-foot{display:flex;gap:10px;justify-content:center;margin-top:16px} #screen-profit .m3-more,#screen-profit .m3-less{font-size:12.5px;font-weight:700;padding:9px 18px;border-radius:10px;cursor:pointer} #screen-profit .m3-more{color:var(--accent);background:var(--accent-soft);border:none} #screen-profit .m3-more:disabled{opacity:.45;cursor:default} #screen-profit .m3-less{color:var(--text-2);background:var(--surface);border:1px solid var(--border)} /* M3 · вид-режим «таблица» (смарт-таблица; та же логика/данные, что плитки) */ #screen-profit .m3-view{gap:4px} #screen-profit .m3-tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-sm);margin-top:2px} #screen-profit .pt-tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:1150px} #screen-profit .pt-tbl th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mutex);text-align:left;padding:10px 11px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2)} #screen-profit .pt-tbl th[data-sort]{cursor:pointer;user-select:none} #screen-profit .pt-tbl th[data-sort]:hover{color:var(--accent)} #screen-profit .pt-tbl th[aria-sort]{color:var(--accent)} #screen-profit .pt-tbl th.--num,#screen-profit .pt-tbl td.--num{text-align:right;font-variant-numeric:tabular-nums} #screen-profit .pt-tbl td{padding:9px 11px;border-bottom:1px solid var(--border-2);vertical-align:middle;color:var(--text)} #screen-profit .pt-tbl tbody tr:last-child td{border-bottom:none} #screen-profit .pt-tbl tbody tr:hover td{background:var(--surface-2)} #screen-profit .pt-tbl tr.--neg td{background:var(--danger-soft)} #screen-profit .pt-tr__rank{color:var(--mutex);font-weight:800;font-variant-numeric:tabular-nums;width:34px} #screen-profit .pt-tr__loc{display:flex;align-items:center;gap:9px;min-width:0} #screen-profit .pt-tr__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} #screen-profit .pt-tr__dot.--stable{background:var(--success)} #screen-profit .pt-tr__dot.--watch{background:var(--watch)} #screen-profit .pt-tr__dot.--warn{background:var(--warn)} #screen-profit .pt-tr__locn b{font-weight:800} #screen-profit .pt-tr__locn small{color:var(--muted);font-weight:600} #screen-profit .pt-tr__err{color:var(--warn-text);font-weight:800;margin-left:5px;cursor:help} #screen-profit .pt-tbl td.pt-tr--pos{color:var(--success-text);font-weight:800} #screen-profit .pt-tbl td.pt-tr--neg{color:var(--danger-text);font-weight:800} #screen-profit .pt-pf{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end} #screen-profit .pt-pf__bar{width:46px;height:5px;background:var(--surface-3);border-radius:3px;overflow:hidden;flex-shrink:0} #screen-profit .pt-pf__bar i{display:block;height:100%;border-radius:3px} #screen-profit .pt-act{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap} #screen-profit .pt-act button:not(.btn-ai){font-size:11px;font-weight:700;padding:5px 9px;border-radius:7px;border:1px solid var(--border);color:var(--text-2);background:var(--surface);cursor:pointer} #screen-profit .pt-act .btn-ai{padding:5px 10px;font-size:11px} /* ── M4 · Как складывается прибыль (водопад + donut) ── */ #screen-profit .m4-sub2{display:flex;gap:8px;margin-bottom:2px;flex-wrap:wrap} #screen-profit .m4-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:28px} #screen-profit .pf-pt-select-wrap{display:flex;gap:6px;align-items:center;flex-wrap:wrap} #screen-profit .pf-pt-search{font-family:inherit;font-size:12px;border:1px solid var(--border);border-radius:8px;padding:4px 8px;background:var(--surface-2);color:var(--text);width:160px;outline:none} #screen-profit .pf-pt-search:focus{border-color:var(--accent)} #screen-profit .pf-pt-select{font-family:inherit;font-size:12px;font-weight:600;border:1px solid var(--border);border-radius:8px;padding:4px 8px;background:var(--surface-2);color:var(--text);cursor:pointer;max-width:260px} @media(max-width:880px){#screen-profit .m4-grid{grid-template-columns:1fr}} #screen-profit .wf{display:flex;flex-direction:column;gap:6px} #screen-profit .wf-row{display:grid;grid-template-columns:140px 1fr 168px;gap:10px;align-items:center;font-size:12.5px} #screen-profit .wf-row b{font-weight:700;color:var(--text-2)} #screen-profit .wf-track{height:24px;background:var(--surface-3);border-radius:6px;position:relative;overflow:hidden} #screen-profit .wf-fill{position:absolute;top:0;bottom:0;border-radius:5px} #screen-profit .wf-fill.--rev{background:var(--accent)} #screen-profit .wf-fill.--cost{background:var(--danger);opacity:.8} #screen-profit .wf-fill.--ebit{background:var(--success)} #screen-profit .wf-fill.--gross{background:var(--blue);opacity:.85} #screen-profit .wf-amt{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap} #screen-profit .wf-amt small{color:var(--mutex);font-weight:700} #screen-profit .wf-row.--total b,#screen-profit .wf-row.--total .wf-amt{font-weight:800} #screen-profit .wf-row.--total{padding:5px 0;border-top:1px dashed var(--border);margin-top:2px} #screen-profit .donut-wrap{display:flex;flex-direction:column;align-items:center;gap:14px} #screen-profit .donut-legend{display:flex;flex-direction:column;gap:7px;width:100%} #screen-profit .dl{display:flex;align-items:center;gap:9px;font-size:12.5px} #screen-profit .dl i{width:11px;height:11px;border-radius:3px;flex-shrink:0} #screen-profit .dl span{color:var(--text-2);font-weight:600} #screen-profit .dl b{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums} #screen-profit .dl small{color:var(--muted);font-weight:700;width:40px;text-align:right;font-variant-numeric:tabular-nums} #screen-profit .note{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:6px;padding:10px 13px;background:var(--surface-2);border-radius:10px;border:1px solid var(--border)} /* «Свой период» — инлайн-поля дат в баре периода (как в iKomek, без модалки). */ #screen-profit .pf-cp-input{font-family:inherit;font-size:12px;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 10px;outline:none;cursor:pointer} #screen-profit .pf-cp-input:focus{border-color:var(--accent)} #screen-profit .pf-cp-dash{color:var(--muted);font-weight:700;align-self:center;padding:0 2px} /* ============================================================ * * Главное (#home) + онбординг — перенос из vb-103.html 207–396 * * ============================================================ */ /* Корень вкладки: вертикальные отступы между модулями даёт контейнер (в макете это .screen{gap:32px}). Без него блоки слипаются впритык. --r:20px — радиус скругления карточек как в макете (в приложении глобально 16px; переопределяем scoped, чтобы «Главная» совпадала 1:1, не трогая др. вкладки). */ .home-screen{display:flex; flex-direction:column; gap:32px; --r:20px} /* Базовая кнопка тура: в макете .btn-primary глобальный (синий, стр.56), но он вне перенесённого диапазона 207-396; в приложении общего .btn-primary нет (только #screen-profit-scoped) → на «Главной» кнопки были голые (браузерный дефолт). Перебиваем scoped под .home-screen — логин/профит не затрагиваются. Позиционные правила .start-hero-actions/.start-cta-row .btn-primary дополняют паддинги поверх. */ .home-screen .btn-primary{ display:inline-flex; align-items:center; gap:6px; padding:10px 18px; font-size:13px; font-weight:700; background:var(--accent); color:#fff; border:none; border-radius:10px; cursor:pointer; transition:.15s; box-shadow:0 2px 8px rgba(43,78,255,.25); } .home-screen .btn-primary:hover{background:#1E3FE0; transform:translateY(-1px); box-shadow:0 4px 12px rgba(43,78,255,.3)} .home-hero-top{display:flex; align-items:center; gap:16px; margin-bottom:6px} .home-hero-logo{ width:60px; height:60px; border-radius:14px; flex-shrink:0; background:var(--brand-gradient); display:grid; place-items:center; color:#fff; font-weight:800; font-size:22px; letter-spacing:.02em; box-shadow:0 6px 20px rgba(43,78,255,.25); } /* ─── Panel + dept-card ─── */ .panel{ background:var(--surface); border-radius:var(--r); padding:28px; box-shadow:var(--shadow-lg); border:1px solid var(--border-2); display:flex; flex-direction:column; gap:14px; } .panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; } .panel-head .pt{font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.01em} .panel-head .pd{font-size:12px; color:var(--muted); font-weight:500; margin-top:3px} .section-grid{display:grid; gap:14px} .sg-1{grid-template-columns:1fr} .sg-2{grid-template-columns:repeat(2,1fr)} .sg-3{grid-template-columns:repeat(3,1fr)} .sg-4{grid-template-columns:repeat(4,1fr)} .sg-5{grid-template-columns:repeat(5,1fr)} .dept-card{ background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r); padding:18px 20px; display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:.15s; box-shadow:var(--shadow-sm); } .dept-card:hover{border-color:var(--accent); box-shadow:var(--shadow-lg)} .dept-card.--locked{opacity:.5; cursor:not-allowed} .dept-card.--locked:hover{border-color:var(--border-2); box-shadow:var(--shadow-sm)} .dept-top{display:flex; align-items:center; justify-content:space-between; gap:10px} .dept-name{font-size:16px; font-weight:700; color:var(--text); letter-spacing:-.01em; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .dept-live{ font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:8px; background:var(--success-soft); color:var(--success); letter-spacing:.05em; display:inline-flex; align-items:center; gap:5px; flex-shrink:0; } .dept-live::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(16,185,129,.2); animation:pulse 1.6s infinite; } .dept-lock{font-size:16px; flex-shrink:0} .dept-sub{font-size:12.5px; color:var(--text-2); font-weight:500} .dept-agents{font-size:11.5px; color:var(--muted)} /* ═══════════════════════════════════════════════════════════════ НАЧАЛО РАБОТЫ — стили (V100 1:1, строки 877–1114 + 1548–1556) Все CSS-переменные уже объявлены в :root и [data-theme="dark"] спеком 1. ═══════════════════════════════════════════════════════════════ */ .sg-2{grid-template-columns:repeat(2,1fr)} .start-hero{ background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%); border:1px solid var(--border-2); border-radius:var(--r); padding:28px 32px; box-shadow:var(--shadow-lg); display:grid;grid-template-columns:1fr auto;gap:24px;align-items:flex-start; position:relative;overflow:hidden; } .start-hero::before{ content:'';position:absolute;top:-50%;right:-12%;width:520px;height:520px; background:radial-gradient(circle,var(--accent-soft) 0%,transparent 60%); pointer-events:none; } .start-hero-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;min-width:0} .start-hero-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .start-hero-kicker{ display:inline-flex;align-items:center;gap:8px; padding:5px 11px;border-radius:999px; background:var(--accent-soft);color:var(--accent); font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; } .start-hero-kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft-2)} .start-hero h2{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.025em;line-height:1.1} .start-hero-lead{font-size:14px;color:var(--text-2);line-height:1.65;max-width:640px} .start-hero-actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;align-items:center;flex-shrink:0} .start-hero-actions .btn-primary{padding:12px 22px;font-size:13.5px;line-height:1.2;white-space:nowrap} .start-hero-hint{font-size:11.5px;color:var(--muted);font-weight:500;text-align:center;max-width:200px;line-height:1.4} .start-play{ display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:50%; background:rgba(255,255,255,.18); font-size:9px;line-height:1; padding-left:1.5px;flex-shrink:0; } .start-mini{ background:var(--surface-2); border:1px solid var(--border-2); border-radius:14px; padding:18px; display:flex;flex-direction:column;gap:10px; text-align:left; transition:.15s; position:relative; } .start-mini-ic{ font-size:22px;line-height:1; width:42px;height:42px;border-radius:12px; display:grid;place-items:center; background:var(--accent-soft); } .start-mini-ic.--success{background:var(--success-soft)} .start-mini-ic.--purple{background:var(--purple-soft)} .start-mini-ic.--muted{background:var(--surface-3)} .start-mini-num{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase} .start-mini-title{font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.005em} .start-mini-desc{font-size:12.5px;color:var(--muted);line-height:1.6} /* Кнопка-пресет прижата к низу карточки — выравнивает «✦ Обсудить с агентом» по одной линии при заголовках разной высоты (карточки sg-* равной высоты). */ .start-mini .btn-ai{margin-top:auto;align-self:flex-start} .start-mini-live{font-size:10px;font-weight:800;color:var(--success);letter-spacing:.06em;margin-left:6px} .start-mini.--clickable{cursor:pointer} .start-mini.--clickable:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-1px)} .start-mini.--locked{opacity:.55;cursor:not-allowed} .start-mini.--locked .start-mini-title{color:var(--muted)} .start-mini-lock-ic{font-size:13px;margin-left:6px;color:var(--muted)} .start-source{ background:var(--surface-2); border:1px solid var(--border-2); border-radius:14px; padding:14px 16px; display:flex;flex-direction:column;gap:8px; position:relative; } .start-source-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .start-source-ic{font-size:22px;line-height:1} .start-source-dot{ width:8px;height:8px;border-radius:50%;flex-shrink:0; background:var(--success); box-shadow:0 0 0 3px var(--success-soft); } .start-source-dot.--off{background:var(--muted);box-shadow:0 0 0 3px var(--surface-3)} .start-source-dot.--err{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)} .start-source-name{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.005em} .start-source-status{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .start-source-status.--ok{color:var(--success)} .start-source-status.--off{color:var(--muted)} .start-source-status.--err{color:var(--danger)} .start-legend{ display:flex;gap:20px;flex-wrap:wrap; margin-top:4px;padding:10px 14px; background:var(--surface-2);border:1px solid var(--border-2);border-radius:10px; font-size:11.5px;color:var(--muted);font-weight:500; } .start-legend-item{display:inline-flex;align-items:center;gap:8px} .start-legend-item .d{width:7px;height:7px;border-radius:50%} .start-legend-item .d.--ok{background:var(--success);box-shadow:0 0 0 2px var(--success-soft)} .start-legend-item .d.--err{background:var(--danger);box-shadow:0 0 0 2px var(--danger-soft)} .start-legend-item .d.--off{background:var(--muted);box-shadow:0 0 0 2px var(--surface-3)} .start-cta{ background:linear-gradient(135deg,var(--accent-soft) 0%,var(--purple-soft) 100%); border:1px solid var(--accent-soft-2); border-radius:var(--r); padding:32px 28px; display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center; } .start-cta-kicker{ display:inline-flex;align-items:center;gap:8px; padding:4px 11px;border-radius:999px; background:var(--surface);color:var(--accent); font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; border:1px solid var(--accent-soft-2); } .start-cta-title{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1.15} .start-cta-desc{font-size:13px;color:var(--text-2);max-width:540px;line-height:1.6} .start-cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px} .start-cta-row .btn-primary{padding:12px 18px;font-size:13.5px;flex:1 1 0;min-width:150px;justify-content:center} /* ───── Spotlight-онбординг (V100 1:1, строки 1548–1556) ───── */ .onb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:9998;display:none;backdrop-filter:blur(2px)} .onb-overlay.active{display:block} /* Прожектор = только синяя рамка вокруг «дырки» в оверлее (затемнение делает clip-path оверлея равномерно; прежний box-shadow убран — он обрезался контейнером и давал неравномерную тень). */ .onb-spotlight{position:fixed;border:2px solid var(--accent,#7C8CFF);border-radius:14px;z-index:9999;pointer-events:none;transition:all .25s cubic-bezier(.2,.8,.2,1)} .onb-tip{position:fixed;z-index:10000;background:var(--bg,#15171C);color:var(--text,#E8EAED);border:1px solid var(--border,#2F343D);border-radius:12px;padding:14px 18px;max-width:420px;box-shadow:0 16px 48px rgba(0,0,0,.5)} .onb-tip-title{font-size:13px;font-weight:700;margin-bottom:6px;color:var(--text)} .onb-tip-text{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:12px} .onb-tip-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center} .onb-tip .btn-s,.onb-tip .btn-primary{font-size:12px;padding:6px 14px} /* Кнопка «Далее/Готово» в подсказке тура — синяя залитая (в макете .btn-primary глобально синий; подсказка вне .home-screen, поэтому стилизуем отдельно). */ .onb-tip .btn-primary{background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer} .onb-tip .btn-primary:hover{background:#1E3FE0}