:root { --bg: #05060A; --sidebar: #0A0B10; --card: #16171F; --card-2: #1C1E28; --primary: #0A84FF; --primary-dark: #0066CC; --success: #30D158; --danger: #FF453A; --warning: #FF9F0A; --text: #F5F5F7; --muted: #98989F; --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.16); --row-alt: #1A1C26; --total-bg: #17233C; --returns-bg: #33150E; --neg: #FF6961; --sku-bg: #121319; --radius: 18px; --radius-sm: 12px; --radius-pill: 999px; --ease: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 10px 30px -10px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px -16px rgba(0,0,0,.65); --shadow-primary: 0 8px 24px -6px rgba(10,132,255,.5); --chart-text: #94A3B8; --chart-grid: #334155; } /* ── Светлая тема — включается через data-theme="light" на , переключатель в /settings (static/js/app.js) ────────────────── */ :root[data-theme="light"] { --bg: #EEF0F4; --sidebar: #F7F8FA; --card: #FFFFFF; --card-2: #F4F5F8; --primary: #0A84FF; --primary-dark: #0066CC; --success: #1F9D4B; --danger: #E0342B; --warning: #A85D00; --text: #1A1B22; --muted: #6B6D76; --border: rgba(0,0,0,0.09); --border-strong: rgba(0,0,0,0.16); --row-alt: #F6F7FA; --total-bg: #E4ECFB; --returns-bg: #FDE9E6; --neg: #C22E22; --sku-bg: #F0F1F5; --shadow-sm: 0 1px 3px rgba(0,0,0,.10); --shadow-md: 0 10px 30px -10px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08); --shadow-lg: 0 24px 60px -16px rgba(0,0,0,.22); --chart-text: #6B6D76; --chart-grid: #D8DCE3; } /* Точечные переопределения — там, где цвет захардкожен в селекторе, а не читается из CSS-переменной (нужно продублировать под светлую тему). */ :root[data-theme="light"] .sidebar { background: rgba(255,255,255,.85); } :root[data-theme="light"] .nav a:hover { background: rgba(0,0,0,.045); } :root[data-theme="light"] .btn-secondary:hover { background: #E4E6EC; } :root[data-theme="light"] .nav-section:hover { background: #E4E6EC; } :root[data-theme="light"] .flash-error { color: #B3261E; } :root[data-theme="light"] .flash-success { color: #1B7F3A; } :root[data-theme="light"] .locked-badge { color: #B3261E; } :root[data-theme="light"] table.data-table tbody tr:hover { background: rgba(0,0,0,.035); } :root[data-theme="light"] tr.row-group:hover { background: #E7E9EF; } :root[data-theme="light"] tr.detail-income td { color: #1B7F3A; } :root[data-theme="light"] tr.detail-expense td { color: #C22E22; } :root[data-theme="light"] .rec-box { color: #1B7F3A; } :root[data-theme="light"] .rec-box--opportunity { color: #93590A; } :root[data-theme="light"] .rec-box--star { color: #1B7F3A; } :root[data-theme="light"] .rec-box--warning { color: #7A3FA0; } :root[data-theme="light"] .rec-box--critical { color: #B3261E; } * { box-sizing: border-box; } /* Базовый размер для всех font-size в rem по файлу — именно эту величину меняет переключатель «Размер шрифта» в /settings, см. html[data-font=...] ниже. Раньше настройка шрифта была реализована через zoom на .shell, что масштабировало вообще всё (отступы, картинки, разметку), а не только текст — так делать было ошибкой. */ html { font-size: 14px; } html, body { height: 100%; } body { margin: 0; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; background: radial-gradient(900px 520px at 14% -10%, rgba(10,132,255,.14), transparent 60%), radial-gradient(820px 560px at 100% 0%, rgba(191,90,242,.18), transparent 60%), radial-gradient(760px 520px at 100% 100%, rgba(139,92,246,.10), transparent 55%), var(--bg); background-attachment: fixed; } a { color: inherit; text-decoration: none; } @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } .shell { display: flex; min-height: 100vh; } /* ── Sidebar ─────────────────────────────────────────────────────── */ .sidebar { width: 232px; flex-shrink: 0; background: rgba(10,11,16,.85); backdrop-filter: blur(20px) saturate(160%); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 22px 14px; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; padding: 6px 8px 24px; } .brand-logo { width: 100%; height: auto; display: block; transition: transform .3s var(--ease-spring); } .sidebar:hover .brand-logo { transform: scale(1.03); } .brand-logo-light { display: none; } :root[data-theme="light"] .brand-logo-dark { display: none; } :root[data-theme="light"] .brand-logo-light { display: block; } .brand-login { justify-content: center; margin-bottom: 22px; padding: 0; } .brand-login .brand-logo { width: 220px; } .nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .nav-group { margin-bottom: 4px; } .nav-group-body { display: flex; flex-direction: column; gap: 2px; overflow: hidden; margin-top: 6px; } .nav-group.collapsed .nav-group-body { display: none; } .nav-section { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; cursor: pointer; text-align: left; padding: 9px 12px; font-size: 0.7857rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text); transition: background .2s var(--ease), border-color .2s var(--ease), transform .18s var(--ease-spring); } .nav-section:hover { background: #23262F; border-color: var(--border-strong); transform: translateY(-1px); } .nav-section:active { transform: translateY(0) scale(.98); } /* Разные акцентные цвета по разделам — одна тональная семья (холодные сине-бирюзовые оттенки + нейтральный slate для админки), а не вразнобой, чтобы разделы смотрелись частью одной системы, а не отдельными плашками. */ .nav-section[data-toggle-group="marketplaces"], .dash-section-header[data-toggle-group="marketplaces"] { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.4); /* синий — основной бренд-акцент */ } .nav-section[data-toggle-group="marketplaces"]:hover, .dash-section-header[data-toggle-group="marketplaces"]:hover { background: rgba(59,130,246,.22); } .nav-section[data-toggle-group="tools"], .dash-section-header[data-toggle-group="tools"] { background: rgba(20,184,166,.14); border-color: rgba(20,184,166,.4); /* бирюзовый */ } .nav-section[data-toggle-group="tools"]:hover, .dash-section-header[data-toggle-group="tools"]:hover { background: rgba(20,184,166,.22); } .nav-section[data-toggle-group="documents"], .dash-section-header[data-toggle-group="documents"] { background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.4); /* индиго */ } .nav-section[data-toggle-group="documents"]:hover, .dash-section-header[data-toggle-group="documents"]:hover { background: rgba(99,102,241,.22); } .nav-section[data-toggle-group="admin"], .dash-section-header[data-toggle-group="admin"] { background: rgba(100,116,139,.16); border-color: rgba(100,116,139,.4); /* нейтральный slate */ } .nav-section[data-toggle-group="admin"]:hover, .dash-section-header[data-toggle-group="admin"]:hover { background: rgba(100,116,139,.24); } .nav-section-arrow { display: inline-block; font-size: 0.8571rem; line-height: 1; color: var(--muted); transition: transform .2s var(--ease-spring); } .nav-group.collapsed .nav-section-arrow { transform: rotate(-90deg); } .nav a { padding: 10px 12px; border-radius: var(--radius-sm); color: var(--muted); font-size: 0.9643rem; font-weight: 500; display: block; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .nav a:hover { background: rgba(255,255,255,0.06); color: var(--text); transform: translateX(2px); } .nav a.active { background: var(--primary); color: white; box-shadow: 0 4px 14px -4px rgba(10,132,255,.6); } .nav .locked { padding: 10px 12px; border-radius: var(--radius-sm); color: #5b5b60; font-size: 0.9643rem; font-weight: 500; display: flex; align-items: center; gap: 6px; cursor: not-allowed; } .sidebar-footer { margin-top: auto; color: #5b5b60; font-size: 0.7857rem; padding: 8px; } /* ── Main ────────────────────────────────────────────────────────── */ .main { flex: 1; min-width: 0; padding: 26px 32px 60px; } .page-header { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; animation: fade-up .3s var(--ease) both; } .page-header h1 { margin: 0 0 4px; font-size: 1.6429rem; font-weight: 700; letter-spacing: -.02em; } .page-header .muted { margin: 0; } .muted { color: var(--muted); font-size: 0.9286rem; } .flash-stack { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; } .flash { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 0.9643rem; border: 1px solid var(--border); animation: fade-up .3s var(--ease-spring) both; } .flash-error { background: rgba(255,69,58,.12); border-color: rgba(255,69,58,.4); color: #FF8781; } .flash-success { background: rgba(48,209,88,.12); border-color: rgba(48,209,88,.4); color: #7EE8A0; } /* ── Cards / grid ────────────────────────────────────────────────── */ .card { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--card); border: 1px solid var(--border); border-top-color: var(--border-strong); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-md); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); animation: fade-up .35s var(--ease) both; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .upload-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .dash-section { margin-bottom: 24px; } .dash-section:last-child { margin-bottom: 0; } .dash-section-header { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; cursor: pointer; text-align: left; padding: 12px 16px; margin-bottom: 14px; font-size: 1.1429rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); transition: background .2s var(--ease), border-color .2s var(--ease), transform .18s var(--ease-spring); } .dash-section-header:hover { background: #23262F; border-color: var(--border-strong); transform: translateY(-1px); } .dash-section-header:active { transform: translateY(0) scale(.99); } .dash-section-header .nav-section-arrow { font-size: 1rem; color: var(--muted); } .dash-section.collapsed .dash-section-body { display: none; } .dash-section.collapsed .nav-section-arrow { transform: rotate(-90deg); } :root[data-theme="light"] .dash-section-header:hover { background: #E4E6EC; } .upload-card { display: flex; flex-direction: column; height: 230px; } .upload-card h2 { margin: 0 0 6px; font-size: 1.0714rem; } .upload-card p { margin: 0 0 14px; } .upload-card p.muted { flex: 1; } .upload-card form { display: flex; flex-direction: column; gap: 10px; } .upload-card > .btn { align-self: flex-start; } .upload-card-muted { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 40%), var(--card-2); } .upload-card-locked { opacity: .55; } .upload-card-locked:hover { transform: none; box-shadow: var(--shadow-md); } .locked-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,69,58,.12); border: 1px solid rgba(255,69,58,.4); color: #FF8781; font-size: 0.8571rem; font-weight: 600; margin-bottom: 10px; } /* ── Кастомный пикер файла (замена нативного "Choose File") ──────── */ .file-picker { position: relative; } .file-picker-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .file-picker-label { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.8929rem; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease-spring); } .file-picker-label:hover { border-color: var(--primary); color: var(--text); background: var(--card-2); transform: translateY(-1px); } .file-picker-label:active { transform: translateY(0) scale(.98); } .file-picker-icon { font-size: 1.0714rem; line-height: 1; flex-shrink: 0; } .file-picker-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-picker-input:focus-visible + .file-picker-label { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(10,132,255,.18); } .file-picker.has-file .file-picker-label { border-style: solid; border-color: var(--border-strong); color: var(--text); background: var(--card-2); } /* ── Buttons ─────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 0.9286rem; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: transform .18s var(--ease-spring), box-shadow .2s var(--ease), background .2s var(--ease), filter .2s var(--ease); } .btn:hover { transform: translateY(-1px); filter: brightness(1.08); } .btn:active { transform: translateY(0) scale(.96); transition-duration: .1s; } .btn-primary { background: linear-gradient(180deg, #2597FF, var(--primary)); color: white; box-shadow: var(--shadow-primary); } .btn-primary:hover { box-shadow: 0 10px 28px -6px rgba(10,132,255,.65); } .btn-secondary { background: var(--card-2); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: #23262F; border-color: var(--border-strong); } .btn-danger { background: transparent; color: var(--danger); border-color: rgba(255,69,58,.35); } .btn-danger:hover { background: rgba(255,69,58,.1); } .btn-sm { padding: 6px 12px; font-size: 0.8571rem; border-radius: 9px; } /* ── Topbar (report pages) ──────────────────────────────────────── */ .report-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; animation: fade-up .3s var(--ease) both; } .report-topbar .title { font-size: 1.0714rem; font-weight: 600; } .report-topbar .title .muted { font-weight: 400; margin-left: 8px; } .report-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .search-input { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 9px 13px; border-radius: var(--radius-sm); font-size: 0.9286rem; min-width: 220px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .search-input::placeholder { color: var(--muted); } .search-input:focus { outline: none; border-color: var(--primary); background: var(--card-2); box-shadow: 0 0 0 4px rgba(10,132,255,.18); } /* Поле внутри подписи-обёртки () тянется на всю ширину обёртки — чтобы карточки/формы полноценно занимали освободившееся место, а не оставались узкими внутри уже широкой карточки. Чекбоксы/радио исключены — им нельзя растягиваться на 100% ширины. */ label.muted > input:not([type="checkbox"]):not([type="radio"]), label.muted > select, label.muted > textarea { width: 100%; } /* ── Tabs ────────────────────────────────────────────────────────── */ .tabbar { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .tabbar button { position: relative; z-index: 1; background: none; border: none; color: var(--muted); font-size: 0.9643rem; font-weight: 600; letter-spacing: -.01em; padding: 10px 16px; cursor: pointer; transition: color .2s var(--ease); } .tabbar button:hover { color: var(--text); } .tabbar button.active { color: var(--text); } .tabbar-indicator { position: absolute; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--primary), #64B5FF); box-shadow: 0 0 12px rgba(10,132,255,.7); transition: transform .35s var(--ease-spring), width .35s var(--ease-spring); will-change: transform, width; pointer-events: none; } .tabpanel { display: none; } .tabpanel.active { display: block; animation: fade-up .3s var(--ease) both; } /* ── KPI cards ───────────────────────────────────────────────────── */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; } .kpi-card { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 45%), var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); animation: fade-up .35s var(--ease) both; } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .kpi-card .kpi-label { color: var(--muted); font-size: 0.8571rem; margin-bottom: 6px; letter-spacing: -.01em; } .kpi-card .kpi-value { font-size: 1.7143rem; font-weight: 700; letter-spacing: -.02em; } .kpi-value.pos { color: var(--success); } .kpi-value.neg { color: var(--danger); } /* ── Segmented control / metric buttons ─────────────────────────── */ .segmented { position: relative; display: inline-flex; background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; overflow: hidden; } .segmented button { position: relative; z-index: 1; background: none; border: none; color: var(--muted); font-weight: 500; padding: 7px 14px; font-size: 0.8929rem; border-radius: var(--radius-pill); cursor: pointer; transition: color .25s var(--ease); } .segmented button.active { color: white; font-weight: 600; } .segmented-indicator { position: absolute; top: 3px; bottom: 3px; left: 0; background: var(--primary); border-radius: var(--radius-pill); box-shadow: 0 2px 10px rgba(10,132,255,.5); transition: transform .3s var(--ease-spring), width .3s var(--ease-spring); will-change: transform, width; pointer-events: none; } /* ── Tables ──────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* Закреплённая шапка таблицы (например, «Сводка» в начислениях) — обычный .table-wrap не задаёт свою высоту, поэтому "position: sticky; top: 0" на th технически прилипает к самому .table-wrap (он неявно становится скролл-контейнером из-за overflow-x: auto — так уже устроен CSS), а не к странице, и визуально не работает, пока обёртка не листается сама. Даём ей реальную ограниченную высоту — тогда шапка закрепляется по-настоящему. */ .table-wrap-scroll { max-height: 65vh; overflow-y: auto; } table.data-table { width: 100%; border-collapse: collapse; font-size: 0.9286rem; white-space: nowrap; } table.data-table th { background: var(--sidebar); color: var(--muted); text-align: right; font-weight: 600; padding: 11px 14px; position: sticky; top: 0; font-size: 0.7857rem; text-transform: uppercase; letter-spacing: .04em; } table.data-table td { padding: 10px 14px; text-align: right; border-top: 1px solid var(--border); transition: background .15s var(--ease); } table.data-table th.col-left, table.data-table td.col-left { text-align: left; white-space: normal; } table.data-table tbody tr { transition: background .15s var(--ease); } table.data-table tbody tr:hover { background: rgba(255,255,255,0.035); } table.data-table a.sortable { color: var(--muted); } table.data-table a.sortable:hover { color: var(--text); } tr.row-group { background: var(--sku-bg); font-weight: 700; cursor: pointer; } tr.row-group:hover { background: #191b24; } tr.row-group.neg td { color: var(--neg); } tr.row-group td:first-child { display: flex; align-items: center; gap: 6px; } tr.row-group .arrow { display: inline-block; transition: transform .2s var(--ease-spring); font-size: 0.7143rem; color: var(--muted); } tr.row-group.expanded .arrow { transform: rotate(90deg); } tr.row-group.row-flash td { animation: row-flash 1.8s ease-out; } @keyframes row-flash { 0%, 15% { background: rgba(10,132,255,.35); } 100% { background: transparent; } } tr.row-child td { color: var(--muted); } tr.row-child.neg td { color: var(--neg); } tr.row-child td:first-child { padding-left: 30px; } tr.row-total { background: var(--total-bg); font-weight: 700; } tr.row-returns { background: var(--returns-bg); font-weight: 700; } tr.row-returns td { color: var(--warning); } tr.detail-income td { color: #4ADE80; } tr.detail-expense td { color: #FF6961; } tr.detail-penalty td { color: var(--warning); } .count-badge { color: var(--muted); font-size: 0.8571rem; } /* ── Detail panel ────────────────────────────────────────────────── */ .detail-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .detail-toolbar select { background: var(--card); color: var(--text); border: 1px solid var(--border); padding: 7px 10px; border-radius: var(--radius-sm); font-size: 0.8929rem; } #detail-empty { color: var(--muted); padding: 30px 0; text-align: center; } /* ── Returns form ────────────────────────────────────────────────── */ .returns-form { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .returns-form select, .returns-form input[type="number"] { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 6px 8px; border-radius: 8px; font-size: 0.8571rem; } .returns-form input[type="number"] { width: 90px; } /* ── Charts ──────────────────────────────────────────────────────── */ .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .chart-card { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-md); transition: transform .25s var(--ease), box-shadow .25s var(--ease); animation: fade-up .35s var(--ease) both; min-width: 0; /* иначе грид не может сузить колонку меньше ширины, которую Chart.js один раз выставил canvas'у в HTML-атрибуте */ } .chart-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .chart-card h3 { margin: 0 0 10px; font-size: 0.9286rem; color: var(--muted); font-weight: 600; } .chart-card canvas { max-height: 300px; max-width: 100%; } @media (max-width: 1000px) { .chart-grid { grid-template-columns: 1fr; } } /* ── Insight cards ───────────────────────────────────────────────── */ .insight-card { display: flex; gap: 12px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 45%), var(--card); border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); animation: fade-up .35s var(--ease) both; } .insight-card:hover { transform: translateY(-2px) translateX(1px); box-shadow: var(--shadow-md); } .insight-card .name { font-weight: 700; letter-spacing: -.01em; margin-bottom: 2px; } .insight-card .sku { color: var(--muted); font-size: 0.8571rem; margin-bottom: 10px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .chip { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 13px; text-align: center; transition: transform .18s var(--ease-spring), border-color .2s var(--ease); } .chip:hover { transform: translateY(-1px) scale(1.03); border-color: var(--border-strong); } .chip .chip-label { font-size: 0.7143rem; color: var(--muted); display: block; letter-spacing: .01em; } .chip .chip-value { font-size: 0.9286rem; font-weight: 700; } .rec-box { background: rgba(48,209,88,.1); border: 1px solid rgba(48,209,88,.35); border-radius: var(--radius-sm); padding: 9px 13px; font-size: 0.8929rem; color: #7EE8A0; line-height: 1.45; } .rec-box--opportunity { background: rgba(255,159,10,.1); border-color: rgba(255,159,10,.35); color: #FFC26A; } .rec-box--star { background: rgba(48,209,88,.1); border-color: rgba(48,209,88,.35); color: #7EE8A0; } .rec-box--warning { background: rgba(191,90,242,.1); border-color: rgba(191,90,242,.35); color: #E2AFFA; } .rec-box--critical { background: rgba(255,69,58,.1); border-color: rgba(255,69,58,.35); color: #FF8781; } .empty-state { text-align: center; padding: 56px 0; color: var(--muted); animation: fade-in .4s var(--ease) both; } .empty-state .icon { font-size: 2.4286rem; margin-bottom: 12px; animation: pop-in .4s var(--ease-spring) both .05s; } /* ── ИИ-анализ ───────────────────────────────────────────────────── */ .ai-advice-card { background: linear-gradient(135deg, rgba(191,90,242,.10), rgba(10,132,255,.07)), var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); animation: fade-up .35s var(--ease) both; } .ai-advice-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ai-advice-title { font-weight: 700; letter-spacing: -.01em; font-size: 1rem; } .ai-advice-body { font-size: 0.9643rem; line-height: 1.6; } .ai-advice-body ul { margin: 0; padding-left: 20px; } .ai-advice-body li { margin-bottom: 6px; } .ai-advice-loading { color: var(--muted); display: flex; align-items: center; gap: 8px; } .ai-advice-loading::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--primary); animation: ai-spin .7s linear infinite; flex-shrink: 0; } @keyframes ai-spin { to { transform: rotate(360deg); } } .ai-advice-error { color: var(--danger); } .tenders-spinner { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; border: 3px solid var(--border-strong); border-top-color: var(--primary); animation: ai-spin .8s linear infinite; } .ai-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; } .ai-items-grid .insight-card { margin-bottom: 0; } /* ── Costs page ──────────────────────────────────────────────────── */ .costs-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; } .costs-layout form.stack { display: flex; flex-direction: column; gap: 10px; } .costs-layout label { font-size: 0.8929rem; color: var(--muted); } .costs-layout input[type="text"], .costs-layout input[type="number"] { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: var(--radius-sm); font-size: 0.9286rem; width: 100%; transition: border-color .2s var(--ease); } .costs-layout input[type="text"]:focus, .costs-layout input[type="number"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(10,132,255,.18); } @media (max-width: 800px) { .costs-layout { grid-template-columns: 1fr; } } /* ── Калькулятор цен ─────────────────────────────────────────────── */ .pos-text { color: var(--success); } .neg-text { color: var(--danger); } tr.neg td { color: var(--neg); } .calc-table .calc-input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 8px; font-size: 0.8929rem; width: 76px; text-align: right; transition: border-color .2s var(--ease); } .calc-table .calc-input-name { width: 200px; text-align: left; } .calc-table .calc-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10,132,255,.18); } .calc-table td { vertical-align: middle; } .mass-fill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .mass-fill-row { display: flex; flex-direction: column; gap: 5px; } .mass-fill-row .calc-input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 8px; font-size: 0.8929rem; text-align: right; transition: border-color .2s var(--ease); } .mass-fill-row .calc-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10,132,255,.18); } /* ── Парсер цен конкурентов ──────────────────────────────────────── */ .parser-sheets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; max-height: 220px; overflow-y: auto; padding-right: 4px; } .parser-check { display: flex; align-items: center; gap: 8px; font-size: 0.9286rem; color: var(--text); cursor: pointer; } .parser-check input { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; } .parser-speed-toggle { cursor: pointer; color: var(--muted); font-size: 0.9643rem; font-weight: 600; user-select: none; } .parser-speed-toggle:hover { color: var(--text); } .parser-speed-body { margin-top: 14px; } .parser-speed-globals { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; } .parser-speed-globals label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8571rem; color: var(--muted); } .parser-speed-globals input { width: 110px; } .parser-speed-table { width: 100%; border-collapse: collapse; font-size: 0.9286rem; } .parser-speed-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.8214rem; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--border); } .parser-speed-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); } .parser-speed-table input { width: 90px; } .parser-terminal { background: #0a0a0a; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; height: 420px; overflow-y: auto; font-family: "SF Mono", Menlo, monospace; font-size: 0.8929rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .pterm-line { color: #d4d4d4; } .pterm-ok { color: #50fa7b; } .pterm-error { color: #ff5555; } .pterm-warn { color: #f1fa8c; } .pterm-noprice { color: #bd93f9; } .pterm-header { color: #8be9fd; font-weight: 700; } /* ── ИИ-ассистент ────────────────────────────────────────────────── */ .assistant-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .assistant-card { display: flex; flex-direction: column; padding: 16px; } .assistant-log { height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 10px; } .assistant-msg { display: flex; } .assistant-msg-user { justify-content: flex-end; } .assistant-msg-bot { justify-content: flex-start; } .assistant-bubble { max-width: 78%; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.9643rem; line-height: 1.5; word-break: break-word; } .assistant-msg-user .assistant-bubble { background: var(--primary); color: white; border-bottom-right-radius: 4px; white-space: pre-wrap; } .assistant-msg-bot .assistant-bubble { background: var(--card-2); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; max-width: 92%; } .assistant-bubble p { margin: 0 0 8px; } .assistant-bubble p:last-child { margin-bottom: 0; } .assistant-table-wrap { overflow-x: auto; margin: 4px 0 8px; } .assistant-table-wrap:last-child { margin-bottom: 0; } .assistant-table { border-collapse: collapse; width: 100%; font-size: 0.8929rem; } .assistant-table th, .assistant-table td { padding: 6px 10px; border: 1px solid var(--border); text-align: left; white-space: nowrap; } .assistant-table th { background: var(--bg); color: var(--muted); font-weight: 600; } .assistant-table td { color: var(--text); } .assistant-input-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; } .assistant-textarea { flex: 1; resize: none; min-height: 42px; max-height: 160px; line-height: 1.4; font-family: inherit; } .assistant-send { min-width: 48px; } /* ── Логин ───────────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; } .login-label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8929rem; color: var(--muted); } /* ── Сертификат дилера ──────────────────────────────────────────── */ .cert-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .cert-card { display: flex; flex-direction: column; gap: 4px; } .cert-form { display: flex; flex-direction: column; gap: 12px; } .cert-form .field { display: flex; flex-direction: column; gap: 5px; } .cert-form-subhead { font-size: 0.7857rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .cert-form label { font-size: 0.8929rem; color: var(--muted); } .cert-form input[type="text"] { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: var(--radius-sm); font-size: 0.9286rem; width: 100%; transition: border-color .2s var(--ease); } .cert-form input[type="text"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(10,132,255,.18); } .seg-radio { display: flex; gap: 14px; } .seg-radio label { display: flex; align-items: center; gap: 6px; font-size: 0.9286rem; color: var(--text); cursor: pointer; } .seg-radio input { accent-color: var(--primary); } .stamp-preview { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .stamp-preview img { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 900px) { .cert-layout { grid-template-columns: 1fr; } } /* ── Print ───────────────────────────────────────────────────────── */ .print-only { display: none; } @media print { .sidebar, .no-print { display: none !important; } body { background: white; color: black; } .print-only { display: block; } } /* ── Версия для слабовидящих ─────────────────────────────────────── */ html.a11y-large .shell { zoom: 1.5; } #a11y-toggle { margin-bottom: 10px; } /* ── Внешний вид: размер шрифта / плотность таблиц (см. /settings) ── zoom, а не font-size — большинство компонентов задают свой font-size в px (кнопки, таблицы, .muted и т.д.), значение на body почти никуда не наследуется. zoom масштабирует всё сразу, как и a11y-large выше. */ html[data-font="small"] { font-size: 12px; } html[data-font="large"] { font-size: 16px; } html[data-density="compact"] table.data-table th, html[data-density="compact"] table.data-table td { padding: 6px 10px; } html[data-density="spacious"] table.data-table th, html[data-density="spacious"] table.data-table td { padding: 16px 18px; }