/* ======================================================== app.css — извлечено из templates/index.html (Блок 2.3) FIX [2.3]: вынесено для удобства редактирования. ======================================================== */ /* FIX [cycle67]: дизайн-система Premium SaaS. Имена токенов сохранены (JS/классы на них завязаны) — изменены только значения под тёмную тему по умолчанию. */ :root, [data-theme='dark'] { /* — Поверхности — */ --color-ink: #101317; /* фон приложения */ --color-slate: #181C23; /* карточки */ --color-slate-2: #1E2430; /* hover карточек */ --color-slate-3: #232A36; --color-divider: rgba(255,255,255,0.06); --color-border: rgba(255,255,255,0.10); --color-sidebar: #151920; /* сайдбар / шапка */ /* — Текст — */ --color-text: #E5E7EB; --color-text-muted: #94A3B8; --color-text-faint: #64748B; /* — Акценты (primary синий) — */ --color-ice: #60A5FA; --color-steel: #3B82F6; --color-steel-hover: #60A5FA; --color-accent-highlight: rgba(59,130,246,0.12); --grad-accent: linear-gradient(135deg,#60A5FA 0%,#3B82F6 100%); --grad-accent-hover: linear-gradient(135deg,#7DB3FB 0%,#4F90F7 100%); /* — Семантика — */ --color-success: #22C55E; --color-success-bg: rgba(34,197,94,0.12); --color-warning: #F59E0B; --color-warning-bg: rgba(245,158,11,0.14); --color-danger: #EF4444; --color-danger-bg: rgba(239,68,68,0.14); --color-info: #3B82F6; --color-info-bg: rgba(59,130,246,0.12); --color-purple: #7C3AED; /* — Type — */ --font-display: 'Inter Tight','Inter',system-ui,sans-serif; --font-body: 'Inter',system-ui,sans-serif; --font-mono: 'JetBrains Mono',ui-monospace,monospace; /* — Radius — */ --radius-sm: 8px; --radius-md: 12px; /* кнопки */ --radius-lg: 16px; /* карточки */ --radius-pill: 9999px; /* — Shadow — */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.25); --shadow-md: 0 6px 24px rgba(0,0,0,0.18), inset 0 1px rgba(255,255,255,0.02); --shadow-lg: 0 20px 48px rgba(0,0,0,0.40); --shadow-glow: 0 0 0 3px rgba(59,130,246,0.25); /* — Motion — */ --ease-out: cubic-bezier(0.16,1,0.3,1); --transition: 180ms var(--ease-out); /* — Type scale — */ --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); --text-sm: clamp(0.8125rem, 0.78rem + 0.25vw, 0.9375rem); --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem); --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); /* — Spacing scale (sync) — */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* — Графики (читаются из getComputedStyle в app.js) — */ --chart-revenue: #38BDF8; --chart-profit: #4ADE80; --chart-ink: #94A3B8; --chart-grid: rgba(255,255,255,0.06); --chart-tip-bg: rgba(24,28,35,0.96); --chart-fill: 0.08; --color-log-bg: #06090d; /* — Legacy aliases (backward compat) — */ --bg: #101317; --surface: #181C23; --surface2: #1E2430; --border: rgba(255,255,255,0.06); --accent: #60A5FA; --accent2: #3B82F6; --red: #EF4444; --yellow: #F59E0B; --green: #22C55E; --text: #E5E7EB; --muted: #94A3B8; --r: 12px; --ink: #101317; --ice: #60A5FA; --steel: #3B82F6; --snow: #FFFFFF; --slate: #181C23; --chart1: #38BDF8; --chart2: #4ADE80; --chart3: #F59E0B; --chart4: #7C3AED; } /* FIX [cycle67]: светлая тема — переопределение тех же токенов на */ [data-theme='light'] { /* — Поверхности — */ --color-ink: #F6F8FB; --color-slate: #FFFFFF; --color-slate-2: #FCFCFD; --color-slate-3: #F1F5F9; --color-divider: #E5E7EB; --color-border: #E5E7EB; --color-sidebar: #FFFFFF; /* — Текст — */ --color-text: #1E293B; --color-text-muted: #64748B; --color-text-faint: #94A3B8; /* — Акценты — */ --color-ice: #3B82F6; --color-steel: #2563EB; --color-steel-hover: #1D4ED8; --color-accent-highlight: rgba(37,99,235,0.08); --grad-accent: linear-gradient(135deg,#3B82F6 0%,#2563EB 100%); --grad-accent-hover: linear-gradient(135deg,#2563EB 0%,#1D4ED8 100%); /* — Семантика — */ --color-success: #16A34A; --color-success-bg: rgba(22,163,74,0.10); --color-warning: #D97706; --color-warning-bg: rgba(217,119,6,0.12); --color-danger: #DC2626; --color-danger-bg: rgba(220,38,38,0.10); --color-info: #2563EB; --color-info-bg: rgba(37,99,235,0.08); --color-purple: #7C3AED; /* — Shadow — */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.04); --shadow-md: 0 2px 8px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06); --shadow-lg: 0 12px 32px rgba(15,23,42,0.10); --shadow-glow: 0 0 0 3px rgba(37,99,235,0.18); /* — Графики — */ --chart-revenue: #3B82F6; --chart-profit: #22C55E; --chart-ink: #64748B; --chart-grid: rgba(15,23,42,0.06); --chart-tip-bg: #FFFFFF; --chart-fill: 0.10; --color-log-bg: #0F172A; /* — Legacy aliases — */ --bg: #F6F8FB; --surface: #FFFFFF; --surface2: #FCFCFD; --border: #E5E7EB; --accent: #3B82F6; --accent2: #2563EB; --red: #DC2626; --yellow: #D97706; --green: #16A34A; --text: #1E293B; --muted: #64748B; --ink: #F6F8FB; --ice: #3B82F6; --steel: #2563EB; --snow: #FFFFFF; --slate: #FFFFFF; --chart1: #3B82F6; --chart2: #22C55E; --chart3: #D97706; --chart4: #7C3AED; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;color-scheme:dark} /* FIX [cycle67]: color-scheme следует за темой */ html[data-theme='light']{color-scheme:light} body{background:var(--color-ink);color:var(--color-text);font-family:var(--font-body);font-size:14px;margin:0;padding:0;height:100vh;overflow:hidden} ::selection{background:var(--color-accent-highlight);color:var(--color-text)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--color-ink)} ::-webkit-scrollbar-thumb{background:var(--color-slate-3);border-radius:10px} ::-webkit-scrollbar-thumb:hover{background:var(--color-border)} /* ── SIDEBAR LAYOUT ── */ #app-layout{display:flex;height:100vh;overflow:hidden} #sidebar{width:240px;min-width:240px;background:var(--color-sidebar);border-right:1px solid var(--color-divider);display:flex;flex-direction:column;height:100vh;overflow-y:auto;flex-shrink:0} #main-content{flex:1;overflow-y:auto;display:flex;flex-direction:column} /* Лого-блок */ .sidebar-logo{padding:28px 20px 20px;border-bottom:1px solid var(--color-divider)} .sidebar-logo-title{font-size:20px;font-weight:900;letter-spacing:1px;color:var(--color-text);line-height:1.2;margin-top:10px} .sidebar-logo-title span{color:var(--color-steel)} .sidebar-logo-tagline{font-size:9px;letter-spacing:3px;color:var(--color-steel);text-transform:uppercase;margin-top:3px} .sidebar-logo-slogan{font-size:11px;color:var(--color-text-muted);margin-top:8px;line-height:1.5;font-style:italic} /* Пункты меню */ .sidebar-nav{padding:12px 0;flex:1} .sidebar-section{font-size:9px;letter-spacing:2px;color:var(--color-steel);text-transform:uppercase;padding:16px 20px 6px;font-weight:600} .tab{display:flex;align-items:center;gap:10px;width:100%;padding:10px 20px;border-radius:0;cursor:pointer;font-size:13px;color:var(--muted);border:none;background:none;transition:all .15s;text-align:left;border-left:3px solid transparent} .tab:hover{color:var(--color-text);background:var(--color-accent-highlight)} .tab.active{background:var(--color-accent-highlight);color:var(--color-ice);font-weight:600;border-left:3px solid var(--color-ice)} .tab .tab-icon{font-size:15px;flex-shrink:0;width:18px;text-align:center} /* Версия внизу */ .sidebar-footer{padding:16px 20px;border-top:1px solid var(--color-divider);font-size:10px;color:var(--color-text-faint);letter-spacing:1px} .accordion{border-bottom:1px solid var(--color-divider)} .accordion-header{display:flex;align-items:center;gap:8px;padding:10px 20px;cursor:pointer;font-size:9px;letter-spacing:2px;font-weight:700;color:var(--color-text-faint);text-transform:uppercase;user-select:none;transition:var(--transition)} .accordion-header:hover{background:var(--color-accent-highlight)} .acc-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .acc-icon img,.acc-icon svg{width:22px;height:22px;border-radius:5px} .tab-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle} .tab-icon svg{width:15px;height:15px} .acc-title{flex:1} .acc-arrow{font-size:11px;transition:transform 0.2s} .accordion-body{overflow:hidden;transition:max-height 0.25s ease} .accordion-body.collapsed{max-height:0 !important} /* Убираем старый nav */ nav{display:none} /* CONTENT */ .page{display:none;padding:24px;min-height:0;width:100%} .page.active{display:block} /* CARDS */ /* FIX [cycle63.45]: единый стиль карточек — чуть больше воздуха и мягкая тень, чтобы блоки дашборда смотрелись как аккуратные контейнеры, а не плоские рамки */ /* FIX [cycle67]: карточки — радиус 16px, padding 24px, мягкая тень дизайн-системы */ .card{background:var(--color-slate);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:24px;margin-bottom:16px;box-shadow:var(--shadow-md);transition:var(--transition)} .card:hover{border-color:var(--color-border)} /* FIX [cycle63.45]: заголовки блоков тише — без сплошного капса, спокойный кегль и лёгкий трекинг; единый вид для всех блоков дашборда */ .card h2{font-size:14px;font-weight:600;color:var(--color-text-muted);text-transform:none;letter-spacing:-0.01em;margin-bottom:16px;font-family:var(--font-display)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} /* KPI */ /* FIX [cycle67]: KPI-карточка — padding 20px, цветная верхняя полоска 3px (--kpi-accent) */ .kpi{position:relative;overflow:hidden;background:var(--color-slate);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:6px;transition:var(--transition);box-shadow:var(--shadow-md)} .kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--kpi-accent,var(--color-steel));border-radius:var(--radius-lg) var(--radius-lg) 0 0} .kpi:hover{border-color:var(--color-steel);transform:translateY(-1px);box-shadow:var(--shadow-lg)} .kpi.clickable{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none} .kpi.clickable:hover{border-color:var(--color-ice)} .kpi.clickable:focus-visible{outline:none;box-shadow:var(--shadow-glow)} .kpi.clickable.active{border-color:var(--color-ice);background:var(--color-accent-highlight);box-shadow:var(--shadow-glow)} .kpi .lbl{font-size:11px;color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.08em;font-weight:600} /* FIX [cycle63.45]: значение KPI не должно переноситься на 2 строки (напр. «2,64 млн ₽»). nowrap + адаптивный clamp вместо --text-2xl (2.5rem), чтобы длинные значения влезали в карточку на десктопной сетке из 5 колонок. */ .kpi .val{font-family:var(--font-display);font-size:clamp(1.25rem,0.9rem + 0.9vw,1.6rem);font-weight:800;color:var(--color-text);letter-spacing:-0.03em;line-height:1.1;margin-top:2px;white-space:nowrap} .kpi .sub{font-size:11px;color:var(--color-text-muted);margin-top:2px} /* FIX [cycle89.17]: плашки упущенных продаж — акцент в палитре кабинета (жёлтый = потери в штуках, красный = потери в деньгах) + tabular-nums, чтобы цифры не «плясали» при пересчёте по фильтрам. */ .kpi.kpi-miss{--kpi-accent:var(--color-warning)} .kpi.kpi-miss .val{color:var(--color-warning);font-variant-numeric:tabular-nums lining-nums} .kpi.kpi-miss.money{--kpi-accent:var(--color-danger)} .kpi.kpi-miss.money .val{color:var(--color-danger)} .green{color:var(--color-success)}.red{color:var(--color-danger)}.yellow{color:var(--color-warning)} /* FORM */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .form-group{display:flex;flex-direction:column;gap:4px} .form-group label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px} .form-group input,.form-group select,.form-group textarea{ background:var(--color-slate);border:1px solid var(--color-border);color:var(--color-text); padding:8px 12px;border-radius:var(--radius-md);font-size:13px;outline:none; transition:var(--transition);font-family:var(--font-body)} .form-group input:hover,.form-group select:hover{border-color:var(--color-steel)} .form-group input:focus,.form-group select:focus{border-color:var(--color-ice);box-shadow:var(--shadow-glow);background:var(--color-slate-2)} .form-section{font-size:12px;font-weight:700;color:var(--color-ice);text-transform:uppercase; letter-spacing:.5px;margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--color-divider)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 20px;border-radius:var(--radius-md);font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:0.01em;line-height:1;white-space:nowrap;transition:var(--transition);border:1px solid transparent;cursor:pointer;user-select:none} .btn svg{width:15px;height:15px;flex-shrink:0} .btn:disabled{opacity:.45;cursor:not-allowed} .btn:focus-visible{box-shadow:var(--shadow-glow);outline:none} @keyframes spin{to{transform:rotate(360deg)}} /* FIX [cycle67]: primary — белый текст на синем градиенте (читаемо в обеих темах) */ .btn-primary{background:var(--grad-accent);color:#fff;box-shadow:0 4px 14px rgba(59,130,246,0.30)} .btn-primary:hover:not(:disabled){background:var(--grad-accent-hover);transform:translateY(-1px);box-shadow:0 8px 22px rgba(59,130,246,0.40)} .btn-primary:active{transform:translateY(0)} .btn-success{background:var(--grad-accent);color:#fff} .btn-secondary{background:var(--color-accent-highlight);color:var(--color-text);border-color:var(--color-border)} .btn-secondary:hover:not(:disabled){background:var(--color-accent-highlight);border-color:var(--color-ice);color:var(--color-ice)} .btn-ghost{background:transparent;color:var(--color-text-muted)} .btn-ghost:hover:not(:disabled){background:var(--color-slate-3);color:var(--color-text)} .btn-danger{background:var(--color-danger);color:#fff} .btn-danger:hover:not(:disabled){filter:brightness(1.1)} .btn-sm{padding:5px 12px;font-size:12px} .btn-sm svg{width:13px;height:13px} /* FIX [cycle67]: переключатель темы — ghost-кнопка высотой 40px, иконка солнце/луна */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 10px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:transparent;color:var(--color-text-muted);cursor:pointer;transition:var(--transition);flex-shrink:0;-webkit-tap-highlight-color:transparent} .theme-toggle:hover{background:var(--color-accent-highlight);color:var(--color-text);border-color:var(--color-ice)} .theme-toggle:focus-visible{outline:none;box-shadow:var(--shadow-glow)} .theme-toggle svg{width:18px;height:18px} .theme-toggle-label{font-size:12px;font-weight:600;letter-spacing:.02em} .theme-toggle--sidebar{width:100%;margin-top:14px;justify-content:flex-start;padding:0 12px} /* Показываем иконку текущей темы */ html[data-theme='dark'] .theme-icon-moon{display:none} html[data-theme='light'] .theme-icon-sun{display:none} .toggle-wrap{display:flex;align-items:center;gap:10px} /* FIX [cycle63.47]: тумблер (DRY-RUN и пр.) — чётче трек/бегунок, скруглён в пилюлю, акцентная заливка во включённом состоянии и фокус-обводка для доступности */ .toggle{position:relative;width:46px;height:26px} .toggle input{opacity:0;width:0;height:0} .slider{position:absolute;inset:0;background:var(--surface2);border-radius:var(--radius-pill);border:1px solid var(--border);cursor:pointer;transition:.2s} .slider:before{content:'';position:absolute;width:20px;height:20px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:.2s;box-shadow:var(--shadow-sm)} input:checked+.slider{background:var(--accent);border-color:var(--accent)} input:checked+.slider:before{transform:translateX(20px);background:#fff} .toggle input:focus-visible+.slider{box-shadow:var(--shadow-glow)} /* RUN BUTTON */ .run-btn{width:100%;padding:14px;font-size:15px;font-weight:700;border-radius:var(--radius-md);border:none; background:var(--grad-accent);color:#fff;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:10px; box-shadow:0 4px 14px rgba(59,130,246,0.30);font-family:var(--font-display)} .run-btn:hover:not(:disabled){background:var(--grad-accent-hover);transform:translateY(-1px);box-shadow:0 8px 22px rgba(59,130,246,0.40)} .run-btn:disabled{background:var(--color-slate-3);color:var(--color-text-muted);cursor:not-allowed;box-shadow:none} .run-btn.running{background:linear-gradient(135deg,#F59E0B,#D97706);color:#1a1200} /* cycle61: автопилот включён — зелёное состояние; во время прогона — янтарное (.running выше) */ .run-btn.auto-on{background:linear-gradient(135deg,#16A34A,#22C55E);color:#EAFFF2;box-shadow:0 4px 14px rgba(34,197,94,0.30)} .run-btn.auto-on:hover:not(:disabled):not(.running){background:linear-gradient(135deg,#22C55E,#4ADE80);box-shadow:0 8px 22px rgba(34,197,94,0.40)} .run-btn.auto-on.running{background:linear-gradient(135deg,#F59E0B,#D97706);color:#1a1200} .status-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex-shrink:0} .status-dot.ok{background:var(--green)} .status-dot.err{background:var(--red)} .status-dot.running{background:var(--yellow);animation:pulse 1s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} /* STAGES [cycle79.2] — плашки этапов прогона: статус-чипы, прогресс-бар, мягкие состояния вместо топорных боковых полос */ .stage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px} .stage{position:relative;overflow:hidden; background:linear-gradient(180deg,var(--color-slate-2),var(--color-slate)); border:1px solid var(--color-divider);border-radius:var(--radius-lg); padding:14px 14px 17px;display:flex;flex-direction:column;gap:8px;transition:var(--transition)} .stage:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--color-border)} .stage-top{display:flex;align-items:flex-start;gap:10px} .stage-icon{width:36px;height:36px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center; font-size:17px;line-height:1;background:var(--color-slate-3);border:1px solid var(--color-divider); transition:var(--transition)} .stage-meta{min-width:0;flex:1} .stage-title{font-size:13px;font-weight:700;color:var(--color-text);line-height:1.25;letter-spacing:.01em} .stage-state{margin-top:3px;font-size:11.5px;font-weight:600;color:var(--color-text-muted);line-height:1.4} .stage-state .stage-sub{display:block;font-weight:500;color:var(--color-text-muted)} .stage-glyph{width:20px;height:20px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:800;background:var(--color-slate-3);color:var(--color-text-faint); border:1px solid var(--color-divider);transition:var(--transition)} .stage-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--color-divider)} .stage-bar i{display:block;height:100%;width:0;border-radius:0 2px 2px 0; background:var(--color-text-faint);transition:width .6s var(--ease-out)} .stage-badge{align-self:flex-start;font-size:10px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill); background:var(--color-warning-bg);color:var(--color-warning)} .stage-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(96,165,250,.30); border-top-color:var(--color-ice);animation:spin .8s linear infinite;flex-shrink:0} /* — состояния — */ .stage.pending{opacity:.55} .stage.pending .stage-state{color:var(--color-text-faint)} .stage.skipped{opacity:.65} .stage.ok .stage-icon{background:var(--color-success-bg);border-color:transparent} .stage.ok .stage-glyph{background:var(--color-success-bg);color:var(--color-success);border-color:transparent} .stage.ok .stage-state{color:var(--color-success)} .stage.ok .stage-bar i{background:var(--color-success)} .stage.warn .stage-icon{background:var(--color-warning-bg);border-color:transparent} .stage.warn .stage-glyph{background:var(--color-warning-bg);color:var(--color-warning);border-color:transparent} .stage.warn .stage-state{color:var(--color-warning)} .stage.warn .stage-bar i{background:var(--color-warning)} .stage.error .stage-icon{background:var(--color-danger-bg);border-color:transparent} .stage.error .stage-glyph{background:var(--color-danger-bg);color:var(--color-danger);border-color:transparent} .stage.error .stage-state{color:var(--color-danger)} .stage.error .stage-bar i{background:var(--color-danger)} /* FIX [cycle79.5]: прогон остановлен кнопкой — нейтрально-серое состояние */ .stage.stopped{opacity:.75} .stage.stopped .stage-glyph{background:var(--color-slate-3);color:var(--color-text-muted);border-color:transparent} .stage.stopped .stage-state{color:var(--color-text-muted)} .stage.stopped .stage-bar i{background:var(--color-text-faint)} .stage.running{border-color:rgba(96,165,250,.40);box-shadow:0 0 0 3px rgba(59,130,246,.10)} .stage.running .stage-icon{background:var(--color-info-bg);border-color:transparent} .stage.running .stage-glyph{background:var(--color-info-bg);border-color:transparent} .stage.running .stage-state{color:var(--color-ice)} .stage.running .stage-bar i{background:var(--grad-accent);animation:stageBarPulse 1.6s ease-in-out infinite} @keyframes stageBarPulse{0%,100%{opacity:1}50%{opacity:.55}} /* — сводка над плашками — */ .stages-summary{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600; color:var(--color-text-muted);margin-bottom:14px} .stages-summary .dot{width:8px;height:8px;border-radius:50%;background:var(--color-text-faint);flex-shrink:0} .stages-summary.ok{color:var(--color-text)} .stages-summary.ok .dot{background:var(--color-success);box-shadow:0 0 10px rgba(34,197,94,.55)} .stages-summary.err{color:var(--color-text)} .stages-summary.err .dot{background:var(--color-danger);box-shadow:0 0 10px rgba(239,68,68,.55)} .stages-summary.run{color:var(--color-text)} .stages-summary.run .dot{background:var(--color-ice);box-shadow:0 0 10px rgba(96,165,250,.55); animation:pulse 1.2s infinite} /* LOG */ .log-box{background:var(--color-log-bg);border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:12px 14px; font-family:var(--font-mono);font-size:12px;line-height:1.6; height:320px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;color:var(--color-text-faint)} .log-box .info{color:#60a5fa} .log-box .ok{color:#34d399} .log-box .err{color:#f87171} .log-box .warn{color:#fbbf24} /* TABLE */ .tbl-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .tf{background:var(--color-slate);border:1px solid var(--color-border);color:var(--color-text); padding:6px 10px;border-radius:var(--radius-md);font-size:12px;outline:none;transition:var(--transition)} .tf:focus{border-color:var(--color-ice);box-shadow:var(--shadow-glow)} .tbl-wrap{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:13px;font-family:var(--font-body)} th{background:var(--color-slate-2);color:var(--color-text-faint);font-size:11px;text-transform:uppercase; letter-spacing:.08em;padding:9px 12px;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;font-weight:600} th:hover{color:var(--color-text)} td{padding:8px 12px;border-bottom:1px solid var(--color-divider);white-space:nowrap;color:var(--color-text)} tr:hover td{background:rgba(158,197,232,0.04)} .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;line-height:1.4;border:1px solid transparent} .badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0} .badge-A{background:var(--color-success-bg);color:var(--color-success)} .badge-B{background:var(--color-info-bg);color:var(--color-info)} .badge-C{background:var(--color-warning-bg);color:var(--color-warning)} .badge-D{background:var(--color-danger-bg);color:var(--color-danger)} /* cycle63.2: плашка участия в акции на карточке товара */ .badge-promo{background:rgba(199,158,232,0.16);color:#C79EE8;white-space:nowrap;flex-shrink:0} .badge-nopromo{background:var(--color-slate-2);color:var(--color-text-faint);white-space:nowrap;flex-shrink:0} .badge-F{background:var(--color-success-bg);color:var(--color-success)} .badge-M{background:var(--color-warning-bg);color:var(--color-warning)} .badge-R{background:rgba(240,166,100,0.14);color:#F0A664} .badge-Z{background:var(--color-danger-bg);color:var(--color-danger)} /* FIX [cycle70]: .ml-pill/.pc-block.pc-ml удалены как мёртвый код — ML-блок больше не рендерится в сетке карточки. .ml-conf-* оставлены: используются в попапе «ML-рекомендации» (mlr-conf-pill). */ .ml-conf-high{background:var(--color-success-bg);color:var(--color-success)} .ml-conf-medium{background:var(--color-warning-bg);color:var(--color-warning)} .ml-conf-low{background:var(--color-slate-2);color:var(--color-text-faint)} .cell-green{background:var(--color-success-bg)!important}.cell-yellow{background:var(--color-warning-bg)!important}.cell-red{background:var(--color-danger-bg)!important} .num{text-align:right} .pg{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:10px} .pg-btn{background:var(--color-slate);border:1px solid var(--color-border);color:var(--color-text); padding:5px 11px;border-radius:var(--radius-md);font-size:12px;cursor:pointer;transition:var(--transition)} .pg-btn:hover{border-color:var(--color-ice);color:var(--color-ice)} .pg-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none} .pg-info{font-size:12px;color:var(--color-text-muted)} /* CHARTS */ .chart-wrap{position:relative;height:220px} /* LOADING OVERLAY */ .loading-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--muted);font-size:13px} .spinner{width:18px;height:18px;border:2px solid var(--color-divider);border-top-color:var(--color-ice);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0} /* TOAST */ .toast{position:fixed;bottom:24px;right:24px;background:var(--color-slate-2); border:1px solid var(--color-border);border-left:3px solid var(--color-ice); border-radius:var(--radius-md);padding:12px 20px;font-size:13px; z-index:999;opacity:0;transition:opacity .3s;pointer-events:none; box-shadow:var(--shadow-lg);min-width:240px} .toast.show{opacity:1} .toast.ok{border-left-color:var(--color-success);color:var(--color-success)} .toast.err{border-left-color:var(--color-danger);color:var(--color-danger)} .toast.warn{border-left-color:#E8A84A;color:#E8A84A} /* === Block 2 === */ .api-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .api-section-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .api-section-icon.ozon { background: #005BFF; } .api-section-icon.perf { background: #1a3a6e; } .api-section-icon.wb { background: #A855F7; } .api-section-icon.giga { background: var(--surface2); border: 1px solid var(--border); } .api-section-meta { flex: 1; } .api-section-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; } .api-section-desc { font-size: 11px; color: var(--muted); margin-top: 2px; } .api-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background 0.2s; margin-right: 5px; vertical-align: middle; position: relative; top: -1px; } .api-status-dot.filled { background: #22c55e; } .api-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; } @media (max-width: 640px) { .api-grid-2 { grid-template-columns: 1fr; } } .settings-section-title { font-size: 20px; font-weight: 700; color: var(--text); } .settings-section-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } /* FIX [cycle63.47]: заголовки-разделители групп настроек — спокойный стиль как в дашборде/карточках (cycle63.45): без сплошного капса, мягкий кегль, тонкая линия */ .settings-group-label { font-size: 13px; color: var(--color-text-muted); font-weight: 600; text-transform: none; letter-spacing: -0.01em; margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-divider); } .settings-group-label:first-child { margin-top: 0; } /* ═══════ FIX [cycle63.47]: раздел «Настройки» под дизайн-систему cycle63.45/46 ═══════ */ /* ограничиваем ширину формы, чтобы карточки не растягивались на весь экран */ #page-settings { max-width: 920px; } /* метки полей — без капса, в один ряд, со статус-пилюлей у правого края */ #page-settings .form-group label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; } /* статус ключа → компактная тонированная пилюля: серый «не задан» / зелёный «ок» (в стиле пилюль скорости в карточках; управляется тем же классом .filled из JS) */ #page-settings .api-status-dot { order: 2; margin-left: auto; width: auto; height: auto; top: 0; border-radius: var(--radius-pill); padding: 2px 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; font-family: var(--font-body); background: var(--color-slate-2); color: var(--color-text-faint); } #page-settings .api-status-dot::after { content: 'не задан'; } #page-settings .api-status-dot.filled { background: var(--color-success-bg); color: var(--color-success); } #page-settings .api-status-dot.filled::after { content: 'ок'; } /* API-ключи и маскированные значения — моноширинный шрифт для читаемости */ #page-settings .api-grid-2 input, #page-settings #cfg_GIGACHAT_AUTH_KEY { font-family: var(--font-mono); letter-spacing: 0.02em; } #page-settings .api-grid-2 input::placeholder, #page-settings #cfg_GIGACHAT_AUTH_KEY::placeholder { color: var(--color-text-faint); } /* адаптив: параметры расчёта в колонку на узких экранах */ @media (max-width: 640px) { #page-settings .form-grid { grid-template-columns: 1fr; } } /* FIX [cycle63.48]: секция «AI-провайдер» в «Пользователях» — тот же стиль, что и ключи в «Настройках» (cycle63.47): метка без капса, статус-пилюля, моноширинное значение. Дублируем правила под #gigachatAdminCard, т.к. исходные скоупились на #page-settings. */ #gigachatAdminCard .form-group label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; } #gigachatAdminCard .api-status-dot { order: 2; margin-left: auto; width: auto; height: auto; top: 0; border-radius: var(--radius-pill); padding: 2px 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; font-family: var(--font-body); background: var(--color-slate-2); color: var(--color-text-faint); } #gigachatAdminCard .api-status-dot::after { content: 'не задан'; } #gigachatAdminCard .api-status-dot.filled { background: var(--color-success-bg); color: var(--color-success); } #gigachatAdminCard .api-status-dot.filled::after { content: 'ок'; } #gigachatAdminCard .api-grid-2 input { font-family: var(--font-mono); letter-spacing: 0.02em; } #gigachatAdminCard .api-grid-2 input::placeholder { color: var(--color-text-faint); } /* ═══════════════════ REVIEWS EMBED (seamless iframe) ═══════════════════ */ /* Контейнер вкладки отзывов растягивается на всю доступную область main */ .reviews-embed { padding: 0 !important; margin: 0 !important; height: calc(100vh - 0px); min-height: calc(100vh - 0px); display: none; } .reviews-embed.active { display: block; height: calc(100vh - 0px); } /* Ровный seamless iframe на всю высоту content-области */ .reviews-iframe { width: 100%; height: 100%; min-height: 100vh; border: 0; background: transparent; display: block; } /* ───── Cycle 46: унификация заголовков страниц ───── */ .page-title-row { margin-bottom: 16px; } .page-title-row .page-h1 { font-family: var(--font-display); font-size: var(--text-xl, clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem)); font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); line-height: 1.15; } .page-title-row .page-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; } /* ═══════════ Cycle57: сетка карточек товара (раздел Репрайсер) ═══════════ */ .cards-grid { display: grid; grid-template-columns: 1fr; /* cycle57.1: 1 карточка на ряд (full-width) */ gap: 10px; margin-top: 8px; } .prod-card { display: grid; /* FIX [cycle70]: колонка фото = фикс. 110px (миниатюра), тело — 1fr. Обратных связей нет: ширина колонки не выводится из высоты контента (см. .pc-photo ниже). */ grid-template-columns: 110px 1fr; /* FIX [cycle64.8.1]: компактнее поля карточки и зазор фото↔контент (было 12px/10px) */ gap: 10px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s, transform .15s; /* FIX [cycle65.8.7.2]: контейнер запросов — САМА карточка, а не .pc-body. Контейнер на .pc-body (65.8.7.1) вместе с фото height:100%+aspect-ratio давал циклический расчёт: высота ряда фиксировалась ДО срабатывания @container, тело становилось выше карточки и наезжало на следующую. Ширина карточки задаётся родительской сеткой (1fr) — обратной связи нет. */ container: pccard / inline-size; } .prod-card:hover { border-color: var(--accent2); } /* FIX [cycle70]: фото — маленькая фиксированная миниатюра 110×146 (~3:4), align-self:start. Убрана вся история циклических расчётов (align-self:stretch + height:100% + вывод ширины из высоты контента/брейкпоинтов, см. cycle64.8.x / 65.8.7.x): размеры жёсткие и не зависят от высоты правой колонки, поэтому ничего не съезжает при любом зуме и ширине экрана. img остаётся absolute + object-fit:cover — миниатюра заполняется без искажения. */ .prod-card .pc-photo { position: relative; align-self: start; width: 110px; height: 146px; border-radius: 10px; /* как у панелей */ background: var(--surface2); border: 1px solid var(--border); overflow: hidden; } /* FIX [cycle64.8.4]: blur-подложка ([cycle64.8.3]) убрана — по решению пользователя боковые blur-полосы не нужны, из-за них строки были слишком широкими. FIX [cycle64.8.2]: img — absolute (не навязывает свою высоту grid-строке, высоту диктует правая колонка). FIX [cycle64.8.4]: object-fit:cover — фото заполняет контейнер целиком без полей, лишнее по краям обрезается (колонка сужена под 3:4, обрезка мягкая). */ .prod-card .pc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .prod-card .pc-photo.empty { border-style: dashed; color: var(--muted); font-size: 10px; text-align: center; line-height: 1.2; /* FIX [cycle64.8.2]: центрируем «нет фото» — раньше это давал flex контейнера, который теперь снят (картинка позиционируется абсолютно). */ display: flex; align-items: center; justify-content: center; } .prod-card .pc-body { display: flex; flex-direction: column; /* FIX [cycle63.46.1]: плотнее вертикальные отступы тела карточки (было 8px) */ gap: 6px; min-width: 0; } .prod-card .pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; /* FIX [cycle64.7]: перенос по строкам — пилюли групп и «Акция» уходят под имя на узких экранах, не ломая раскладку. */ flex-wrap: wrap; } /* FIX [cycle64.7]: пилюли групп ABCD/FMR/Динамика в шапке карточки — тонированные, в тон значения (совпадает с прежними бейджами). Прижаты вправо, перед «Акция». */ .prod-card .pc-groups { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .prod-card .pc-group { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-pill); line-height: 1.4; white-space: nowrap; border: 1px solid transparent; } .prod-card .pc-group .g-lbl { font-size: 9px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--color-text-faint); } .prod-card .pc-group .g-val { font-size: 11px; font-weight: 700; } .prod-card .pc-group.tone-success { background: var(--color-success-bg); } .prod-card .pc-group.tone-success .g-val { color: var(--color-success); } .prod-card .pc-group.tone-info { background: var(--color-info-bg); } .prod-card .pc-group.tone-info .g-val { color: var(--color-info); } .prod-card .pc-group.tone-warning { background: var(--color-warning-bg); } .prod-card .pc-group.tone-warning .g-val { color: var(--color-warning); } .prod-card .pc-group.tone-danger { background: var(--color-danger-bg); } .prod-card .pc-group.tone-danger .g-val { color: var(--color-danger); } .prod-card .pc-group.tone-orange { background: rgba(240, 166, 100, 0.14); } .prod-card .pc-group.tone-orange .g-val { color: #F0A664; } .prod-card .pc-group.tone-slate { background: var(--surface2); } .prod-card .pc-group.tone-slate .g-val { color: var(--muted); } .prod-card .pc-offer { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* cycle63.5: стрелка внешней ссылки на Ozon у артикула */ .prod-card .pc-ozon-arrow { font-size: 10px; margin-left: 3px; text-decoration: none; display: inline-block; } /* cycle63.5: кнопка «история цен» рядом с артикулом */ .prod-card .pc-hist-link { font-size: 10px; color: var(--muted); cursor: pointer; white-space: nowrap; flex-shrink: 0; } .prod-card .pc-hist-link:hover { color: var(--accent); } .prod-card .pc-name { font-size: 12px; color: var(--muted); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } .prod-card .pc-grid { display: grid; /* FIX [cycle64.9]: 6 блоков (Цены · Диапазон цен · Юнит-экономика · 30 · 60 · 90). По умолчанию 3 колонки → ровные ряды 3+3. */ grid-template-columns: repeat(3, minmax(0, 1fr)); /* FIX [cycle63.46.1]: плотнее сетка панелей (было 8px) */ gap: 6px; } /* FIX [cycle70]: fallback-сетка ТОЛЬКО для браузеров без @container. Обёрнута в @supports not(container-type) — иначе эти @media (идут ниже @container pccard по исходнику, равная специфичность) перекрывали бы контейнерные пороги в Chrome/Safari на узких окнах (баг: карточка 744px давала 2 колонки вместо 3). Пороги по окну: ≥1400 = 6 в ряд, база (481–1399) = 3, ≤900 = 2, ≤480 = 1. has-ml удалён (ML-блока нет). */ @supports not (container-type: inline-size) { @media (min-width: 1400px) { .prod-card .pc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .prod-card .pc-block { padding: 6px 8px; } } @media (max-width: 900px) { .prod-card .pc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .prod-card .pc-grid { grid-template-columns: 1fr; } } } /* FIX [cycle63.46]: единый стиль панелей как на дашборде — общий радиус, тонкая полупрозрачная рамка, чуть больше воздуха, выравнивание по сетке */ .prod-card .pc-block { background: var(--surface2); border: 1px solid var(--color-divider); border-radius: 10px; /* FIX [cycle63.46.1]: уплотнены паддинги и межстрочный gap панелей (было 10px 12px / gap 5px) */ padding: 7px 9px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* FIX [cycle63.46]: заголовки блоков тише — без сплошного капса, мелкий приглушённый с лёгким трекингом (единый вид с заголовками карточек дашборда cycle63.45) */ .prod-card .pc-block-title { font-size: 11px; letter-spacing: 0.01em; text-transform: none; color: var(--color-text-faint); font-weight: 600; /* FIX [cycle63.46.1]: меньше отбивка под заголовком блока (было 3px) */ margin-bottom: 2px; } .prod-card .pc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; white-space: nowrap; } /* FIX [cycle70]: при узкой колонке (~150px в ряду 6) подпись/значение не должны вылезать за блок — обрезаем многоточием (min-width:0 разрешает flex-элементам сжиматься ниже content-size). */ .prod-card .pc-row .lbl { color: var(--muted); font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .prod-card .pc-row .val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* cycle63.25: полоса скорости заказов с тепловой шкалой (усл. форматирование как в Excel) */ .prod-card .pc-vel-strip { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; /* FIX [cycle63.46.1]: плотнее отступ полосы скорости (было 8px) */ margin-top: 6px; } /* FIX [cycle63.46]: подпись «Скорость» в том же тихом стиле, что и заголовки блоков */ .prod-card .pc-vel-title { align-self: center; flex: 0 0 auto; font-size: 11px; letter-spacing: 0.01em; text-transform: none; color: var(--color-text-faint); font-weight: 600; padding-right: 4px; cursor: help; } /* FIX [cycle63.46]: компактные пилюли скорости вместо тяжёлых рамочных плашек — мягкий тонированный фон + цветной текст, без толстых рамок (цвет задаётся инлайн) */ .prod-card .pc-vel-seg { flex: 1 1 0; min-width: 56px; display: flex; align-items: baseline; justify-content: center; gap: 5px; /* FIX [cycle63.46.1]: чуть компактнее пилюли скорости (было 4px 10px) */ padding: 3px 9px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--surface2); font-size: 12px; white-space: nowrap; } .prod-card .pc-vel-seg .lbl { color: var(--muted); font-size: 11px; } .prod-card .pc-vel-seg b { font-weight: 700; font-variant-numeric: tabular-nums lining-nums; } .prod-card .pc-vel-seg.is-empty b { color: var(--muted); font-weight: 600; } /* cycle63.10: инлайн-поле себестоимости в блоке «Цены» */ /* FIX [cycle63.46]: поле себестоимости — аккуратный инпут в стиле приложения (фон surface + рамка divider, скругление как у инпутов «Диапазона»), а не чёрный провал */ .prod-card .pc-cost-input { width: 78px; padding: 3px 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; text-align: right; color: var(--text); background: var(--surface); /* FIX [cycle63.46]: видимая рамка как у активных инпутов «Диапазона» (та же высота/радиус/фон), чтобы поле читалось как аккуратный инпут, а не тёмный провал на панели */ border: 1px solid var(--color-border); border-radius: 6px; outline: none; transition: border-color .15s; -moz-appearance: textfield; } .prod-card .pc-cost-input::-webkit-outer-spin-button, .prod-card .pc-cost-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .prod-card .pc-cost-input:hover { border-color: var(--color-border); } .prod-card .pc-cost-input:focus { border-color: var(--accent, #4a9eff); } .prod-card .pc-cost-input:disabled { opacity: 0.5; } .prod-card .pc-cost-input::placeholder { color: var(--color-text-faint); } .prod-card .pc-row .val.green { color: var(--green); } .prod-card .pc-row .val.red { color: var(--red); } .prod-card .pc-row .val.yellow { color: var(--yellow);} .prod-card .pc-row .val.muted { color: var(--muted); } .prod-card .pc-badges { display: flex; flex-direction: column; gap: 4px; } .prod-card .pc-badges .badge { width: fit-content; } /* Блок Диапазон: две независимые строки ₽ и % */ .prod-card .pc-bounds-row { display: grid; grid-template-columns: 18px 1fr 1fr 14px; gap: 4px; align-items: center; margin-top: 2px; } .prod-card .pc-bounds-row .unit { font-size: 11px; color: var(--muted); font-weight: 700; text-align: center; } .prod-card .pc-bounds-row.active .unit { color: var(--accent); } /* FIX [cycle63.46]: инпуты «Диапазона» в едином стиле с полем себестоимости — тонкая рамка divider, приглушённый плейсхолдер, ховер-подсветка */ .prod-card .pc-bounds-row input { background: var(--surface); border: 1px solid var(--color-divider); border-radius: 6px; color: var(--text); font-size: 11px; padding: 3px 6px; width: 100%; min-width: 0; text-align: right; font-variant-numeric: tabular-nums lining-nums; transition: border-color .15s; /* убираем нативные спиннеры чтобы не ломали вёрстку в узкой карточке */ appearance: textfield; -moz-appearance: textfield; } .prod-card .pc-bounds-row input::-webkit-outer-spin-button, .prod-card .pc-bounds-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .prod-card .pc-bounds-row input::placeholder { color: var(--color-text-faint); } .prod-card .pc-bounds-row input:hover { border-color: var(--color-border); } .prod-card .pc-bounds-row input:focus { outline: none; border-color: var(--accent); } .prod-card .pc-bounds-row.active input { border-color: var(--accent); } .prod-card .pc-bounds-row .status { font-size: 12px; text-align: center; min-width: 14px; color: var(--muted); } .prod-card .pc-bounds-priority { font-size: 10px; color: var(--muted); margin-top: 4px; letter-spacing: 0.02em; } .prod-card .pc-bounds-priority.pri-margin, .prod-card .pc-bounds-priority.pri-price { color: var(--accent); font-weight: 600; } .prod-card .pc-bounds-priority.pri-none { color: var(--muted); opacity: 0.7; } /* FIX [cycle63.46]: нижняя строка — метаданные с разделителями-точками + кнопки справа. Единый вид: приглушённый текст, точки-разделители между блоками, кнопки в стиле приложения */ .prod-card .pc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--color-divider); /* FIX [cycle63.46.1]: плотнее отбивка строки метаданных (было 8px) */ padding-top: 6px; margin-top: 2px; } .prod-card .pc-meta > .pc-meta-item + .pc-meta-item::before { content: '·'; color: var(--color-text-faint); margin-right: 10px; } .prod-card .pc-meta .pc-meta-btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* внутри контейнера кнопок собственный margin-left:auto не нужен (иначе разъезжаются) */ .prod-card .pc-meta-btns .pc-clusters, .prod-card .pc-meta-btns .pc-analytics, .prod-card .pc-meta-btns .pc-history, .prod-card .pc-meta-btns .pc-mlrec { margin-left: 0; } /* FIX [cycle65.8.7.2]: брейкпоинты — по ширине КАРТОЧКИ (@container pccard: фото+тело), а не окна и не тела. Идёт ПОСЛЕ @media выше → при поддержке @container перекрывает их, иначе (старые браузеры) работают медиазапросы-fallback. auto-fit НЕ используем (урок cycle65.8.7, реверт); контейнер на .pc-body НЕ используем (урок 65.8.7.1: ломался расчёт высоты ряда, тело вылезало за карточку). Проверено Playwright-аудитом на реальной разметке (фото, инпуты диапазона, 4 кнопки) на ширинах 360–1920. */ /* FIX [cycle70]: правила ширины фото по @container удалены — фото теперь фикс. 110×146. Пороги сетки по ширине КАРТОЧКИ: <640 → 2 колонки, 640–1099 → 3 (ряды 3+3), ≥1100 → все 6 блоков одним рядом (десктоп). auto-fit НЕ используем (урок 65.8.7); контейнер остаётся на .prod-card, а не .pc-body (урок 65.8.7.1). */ @container pccard (max-width: 639px) { .prod-card .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container pccard (min-width: 640px) { .prod-card .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container pccard (min-width: 1100px) { .prod-card .pc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* компактные паддинги панелей в одном ряду (перенесено с прежнего порога ≥1340) */ .prod-card .pc-block { padding: 6px 8px; } } /* FIX [cycle65.8.7.2]: при узкой карточке ряд кнопок уходит ЦЕЛИКОМ на свою строку (flex-basis:100%) и остаётся прижат вправо — кнопки flex-shrink:0 больше не выдавливаются на строку остатков и не наезжают на неё. */ @container pccard (max-width: 1039px) { .prod-card .pc-meta .pc-meta-btns { flex-basis: 100%; justify-content: flex-end; } } /* FIX [cycle64.7]: на узких экранах пилюли групп уходят на отдельную строку под именем товара (flex-basis:100%), «Акция» остаётся справа сверху у артикула. */ @media (max-width: 600px) { .prod-card .pc-head-info { order: 1; } .prod-card .pc-promo { order: 2; } .prod-card .pc-groups { order: 3; flex-basis: 100%; justify-content: flex-start; margin-top: 2px; } } /* ═══════════ Mobile layout ═══════════ */ .mobile-topbar { display: none; position: sticky; top: 0; z-index: 80; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); background: var(--color-sidebar); border-bottom: 1px solid var(--color-divider); flex-shrink: 0; } .mobile-topbar-brand { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; color: var(--color-text); line-height: 1.2; } .mobile-topbar-brand span { color: var(--color-ice); } .mobile-topbar-sub { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-steel); margin-top: 2px; } .mobile-menu-btn { width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-slate); color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .mobile-menu-btn:active { background: var(--color-slate-2); } .mobile-menu-btn svg { width: 20px; height: 20px; } .mobile-nav-overlay { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(5, 10, 18, 0.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease-out); } .mobile-nav-overlay.open { opacity: 1; pointer-events: auto; } @media (max-width: 900px) { html, body { height: auto; min-height: 100%; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } body { background-attachment: scroll; } #app-layout { height: auto; min-height: 100dvh; flex-direction: column; overflow: visible; } .mobile-topbar { display: flex; } .mobile-nav-overlay { display: block; } #sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: min(300px, 86vw); min-width: 0; max-width: 300px; height: 100dvh; transform: translateX(-105%); transition: transform 220ms var(--ease-out); box-shadow: none; padding-bottom: env(safe-area-inset-bottom); } body.nav-open #sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); } body.nav-open { overflow: hidden; } #main-content { flex: 1; min-width: 0; width: 100%; overflow: visible; } #content { overflow: visible !important; -webkit-overflow-scrolling: touch; } .page { padding: 14px 12px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); } .page-title-row .page-h1, .page > div[style*="font-family:var(--font-display)"] { font-size: 1.25rem !important; } .grid2, .grid3, .grid4, .grid5, .form-grid { grid-template-columns: 1fr !important; } .card { padding: 14px; margin-bottom: 12px; } .kpi .val { font-size: 1.45rem; } .log-box { height: 240px; font-size: 11px; } .tbl-filters .tf, .tbl-filters input.tf, .tbl-filters select.tf { width: 100% !important; min-width: 0; flex: 1 1 140px; } .tbl-wrap { margin: 0 -4px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } table { font-size: 12px; } th, td { padding: 8px 8px; } .btn, .run-btn, .tab, .mobile-menu-btn, .pg-btn { min-height: 44px; } .btn-sm { min-height: 36px; } .toast { left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); min-width: 0; } /* Product cards: stack photo above metrics */ .prod-card { grid-template-columns: 1fr; gap: 10px; } /* FIX [cycle70]: мобилка — та же фикс. миниатюра 110×146 (без stretch/aspect-ratio), по центру над контентом. Карточка в одну колонку (grid-template-columns:1fr выше). */ .prod-card .pc-photo { align-self: auto; margin: 0 auto; } /* Named responsive grids (dashboard / sku detail) */ .resp-grid-2, .resp-grid-3, .resp-grid-4, .dash-split, .sku-split, .sku-mix-grid, .sku-kpi-grid { grid-template-columns: 1fr !important; } #setupBanner, #impersonateBanner { padding-left: 12px; padding-right: 12px; font-size: 12px; line-height: 1.4; } .reviews-embed, .reviews-embed.active { height: calc(100dvh - 52px); min-height: 60vh; } .reviews-iframe { min-height: calc(100dvh - 52px); } /* Prevent iOS zoom on focus */ .form-group input, .form-group select, .form-group textarea, .tf, .login-card input { font-size: 16px !important; } } @media (max-width: 480px) { .sidebar-logo { padding: 20px 16px 14px; } .sidebar-logo > div[style*="width:64px"] { width: 48px !important; height: 48px !important; } .sidebar-logo > div[style*="width:64px"] svg { width: 48px !important; height: 48px !important; } } /* cycle63.6 → cycle63.33: кнопка «Аналитика карточки» — крупнее, акцентная, с иконкой графика */ .prod-card .pc-analytics { margin-left: auto; flex-shrink: 0; font-size: 12.5px; font-weight: 600; padding: 8px 16px; gap: 7px; color: var(--accent); background: rgba(158, 197, 232, 0.10); border: 1px solid rgba(158, 197, 232, 0.35); } .prod-card .pc-analytics svg { width: 15px; height: 15px; } .prod-card .pc-analytics:hover { background: rgba(158, 197, 232, 0.20); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74, 123, 168, 0.30); } .prod-card .pc-analytics:active { transform: translateY(0); } /* [cycle63.36] кнопка «Кластеры» — в паре с «Аналитикой карточки», прижаты вправо */ .prod-card .pc-clusters { margin-left: auto; flex-shrink: 0; font-size: 12.5px; font-weight: 600; padding: 8px 16px; gap: 7px; color: var(--accent); background: rgba(158, 197, 232, 0.10); border: 1px solid rgba(158, 197, 232, 0.35); } .prod-card .pc-clusters svg { width: 15px; height: 15px; } .prod-card .pc-clusters:hover { filter: brightness(1.18); transform: translateY(-1px); } .prod-card .pc-clusters:active { transform: translateY(0); } .prod-card .pc-clusters + .pc-analytics { margin-left: 0; } /* FIX [cycle70]: «История цен» — акцентная кнопка как остальные в ряду карточки (pc-clusters/pc-analytics/pc-mlrec). После cycle67 у них нет отдельных токенов — тот же хардкод rgba(158,197,232,…), что работает в обеих темах (light/dark) на var(--accent). Раньше кнопка была нейтральной (muted/surface2) и выбивалась из ряда. Hover — как у pc-analytics/pc-mlrec (фон 0.20, рамка accent, подъём, тень). */ .prod-card .pc-history { flex-shrink: 0; font-size: 12.5px; font-weight: 600; padding: 8px 16px; gap: 7px; color: var(--accent); background: rgba(158, 197, 232, 0.10); border: 1px solid rgba(158, 197, 232, 0.35); } .prod-card .pc-history svg { width: 15px; height: 15px; } .prod-card .pc-history:hover { background: rgba(158, 197, 232, 0.20); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74, 123, 168, 0.30); } .prod-card .pc-history:active { transform: translateY(0); } /* FIX [cycle64.8]: «ML-рекомендации» — акцентная кнопка (главная новая фича) */ .prod-card .pc-mlrec { flex-shrink: 0; font-size: 12.5px; font-weight: 600; padding: 8px 16px; gap: 7px; color: var(--accent); background: rgba(158, 197, 232, 0.10); border: 1px solid rgba(158, 197, 232, 0.35); } .prod-card .pc-mlrec svg { width: 15px; height: 15px; } .prod-card .pc-mlrec:hover { background: rgba(158, 197, 232, 0.20); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74, 123, 168, 0.30); } .prod-card .pc-mlrec:active { transform: translateY(0); } /* FIX [cycle64.8]: попап «ML-рекомендации» — KPI-плитки, кривая прибыли, объяснение */ .mlr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .mlr-kpis .kpi { padding: 12px 14px; } .mlr-kpis .kpi .val.accent { color: var(--accent); } .mlr-kpis .kpi .val.green { color: var(--color-success, #6DAA45); } .mlr-chart-wrap { height: 260px; margin-bottom: 12px; } .mlr-explain { font-size: 12px; color: var(--muted); line-height: 1.6; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .mlr-conf-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; text-transform: uppercase; letter-spacing: .04em; } .mlr-empty { text-align: center; color: var(--muted); padding: 28px 16px; line-height: 1.6; } .mlr-empty .t { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; } /* FIX [cycle65.9]: баннер причины уверенности + сводка модели в попапе ML. */ .mlr-reason { font-size: 12.5px; line-height: 1.55; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border); } .mlr-reason b { color: var(--text); } .mlr-reason-low { background: rgba(214, 92, 92, .1); border-color: rgba(214, 92, 92, .35); color: var(--text); } .mlr-reason-medium { background: rgba(214, 170, 66, .1); border-color: rgba(214, 170, 66, .35); color: var(--text); } .mlr-model { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } .mlr-model b { color: var(--text); } @media (max-width: 560px) { .mlr-kpis { grid-template-columns: 1fr; } .mlr-chart-wrap { height: 220px; } } /* [cycle63.44] Попап «Кластеры» — донат распределения остатков + сводный блок метрик. Только представление; данные и логика попапа не меняются. */ .cl-donut-wrap { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .cl-donut-canvas { position: relative; width: 180px; height: 180px; flex-shrink: 0; } .cl-legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; } .cl-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; } .cl-legend-item .dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; } .cl-legend-item .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-legend-item .qt { flex-shrink: 0; } .cl-legend-item .pc { flex-shrink: 0; font-weight: 700; color: var(--text); min-width: 46px; text-align: right; } .cl-donut-empty { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 14px; } .cl-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; } .cl-metric { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .cl-metric .l { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; } .cl-metric .v { font-family: var(--font-display, inherit); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; } @media (max-width: 560px) { .cl-summary { grid-template-columns: repeat(2, 1fr); } .cl-donut-wrap { justify-content: center; } .cl-donut-canvas { margin: 0 auto; } .cl-legend { min-width: 100%; } } /* ═══════════ P&L (Cycle65.3.1) ═══════════ */ /* Пресеты диапазона: активный подсвечен */ .pnl-preset.active { background: var(--accent); color: var(--color-ink); border-color: var(--accent); } /* FIX [cycle65.8.3]: индикатор загрузки P&L — пока запрос в полёте, фильтры недоступны и подсвечены курсором ожидания (клики не накладываются). */ .pnl-busy { cursor: progress; } .pnl-busy .tf, .pnl-busy .pnl-preset { opacity: .6; pointer-events: none; } /* FIX [cycle82.12]: сводная пересчитывается на сервере под фильтр разреза по SKU — лёгкое затемнение вместо спиннера (таблица остаётся читаемой) и пометка над ней о том, по скольким товарам и из какого источника посчитано. */ .pnl-sum-busy { opacity: .55; transition: opacity .15s; cursor: progress; } .pnl-sum-note { font-size: 11px; color: var(--muted); margin: 0 0 6px; } /* Область скролла: горизонтальный скролл только по периодам, тонкий видимый скроллбар */ .pnl-table-scroll { position: relative; overflow-x: auto; overflow-y: auto; max-height: 70vh; scrollbar-width: thin; scrollbar-color: var(--color-slate-3) transparent; } .pnl-table-scroll::-webkit-scrollbar { height: 10px; width: 10px; } .pnl-table-scroll::-webkit-scrollbar-thumb { background: var(--color-slate-3); border-radius: 8px; } .pnl-table-scroll::-webkit-scrollbar-track { background: transparent; } /* Строгая сетка таблицы статей */ /* FIX [cycle89.9]: шрифт задан явно — тот же, что во всём приложении (var(--font-body)), размер 13px как у остальных таблиц. Раньше опирались на общее правило для table, и любой локальный шрифт в родителе сбивал типографику блока. */ .pnl-table { border-collapse: separate; border-spacing: 0; width: 100%; font-family: var(--font-body); font-size: 13px; font-variant-numeric: tabular-nums; } .pnl-table th, .pnl-table td { padding: 11px 15px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; } .pnl-table thead th { border-top: 1px solid var(--border); } /* Числовые ячейки: правое выравнивание, табличные цифры, равная ширина колонок */ .pnl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pnl-table .pnl-num { min-width: 150px; } .pnl-val { font-size: 13px; font-weight: 600; color: var(--text); } /* FIX [cycle65.3.2]: ОДНА вспомогательная строка под суммой — «дельта · доля», мелким приглушённым. Дельта окрашена (рост/снижение), доля и разделитель — muted. */ .pnl-sub { font-size: 11px; margin-top: 3px; color: var(--muted); font-weight: 500; } .pnl-delta { font-weight: 600; } .pnl-delta.up { color: var(--green); } .pnl-delta.down { color: var(--red); } .pnl-share { color: var(--muted); } /* Закреплённая колонка «Статья» */ /* FIX [cycle89.9]: русские названия начислений («Обработка отменённых и невостребованных товаров») длиннее прежних кодов API, поэтому колонка статей шире и переносит текст по словам, а не растягивает таблицу в бесконечность. */ .pnl-sticky { position: sticky; left: 0; z-index: 2; background: var(--color-slate); text-align: left; min-width: 240px; max-width: 340px; box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.55); } .pnl-row-head { font-weight: 600; color: var(--text); white-space: normal; line-height: 1.35; } /* Угловая ячейка и шапка периодов — sticky сверху */ .pnl-col-head, .pnl-corner { position: sticky; top: 0; z-index: 3; background: var(--color-slate-2); color: var(--muted); font-weight: 600; text-align: right; white-space: nowrap; } .pnl-corner { left: 0; z-index: 4; text-align: left; } /* Текущий незавершённый период */ .pnl-col-cur { color: var(--accent); } .pnl-cur { font-size: 11px; font-weight: 500; color: var(--accent); } .pnl-table tbody .pnl-col-cur, .pnl-table td.pnl-col-cur { background: rgba(158, 197, 232, 0.05); } /* Иерархия строк */ /* FIX [cycle89.9]: три уровня различаются насыщенностью и отступом, а приглушённым цветом — только второстепенное (детали 3-го уровня и подписи под суммами). Статья («Логистика», «Продвижение») — полноценная строка отчёта, её название больше не выглядит серой сноской. */ .pnl-parent > .pnl-row-head { font-weight: 700; cursor: pointer; } .pnl-parent { cursor: pointer; } .pnl-child > .pnl-row-head { padding-left: 30px; font-weight: 500; color: var(--text); } .pnl-child .pnl-val { font-weight: 500; } /* FIX [cycle88]: 3-й уровень — состав «Прочего»/«Нераспределённых» по типам начислений Ozon. Отступ больше, чем у .pnl-child, чтобы вложенность читалась. */ .pnl-child2 > .pnl-row-head { padding-left: 48px; font-weight: 400; color: var(--muted); font-size: 12px; white-space: normal; } .pnl-child2 .pnl-val { font-weight: 400; color: var(--muted); } /* Итоговые строки отделены линией сверху */ .pnl-total-row > th, .pnl-total-row > td { border-top: 2px solid var(--border); } .pnl-total-row .pnl-val { font-weight: 700; } /* Hover строки (sticky-ячейка тоже подсвечивается) */ .pnl-table tbody tr:hover > td, .pnl-table tbody tr:hover > .pnl-sticky { background: var(--color-slate-2); } /* FIX [cycle71]: единый визуальный язык таблиц товаров — ТОП-10 дашборда и «Разрез по SKU» P&L. Один базовый блок + модификаторы, обе темы через переменные (--surface2/--border/--muted/--green/--red), без копипаста CSS. */ /* Базовые стили обеих таблиц: сетка, разделители, hover, шапка */ .top10-table, .pnl-sku-table { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; } .top10-table th, .top10-table td, .pnl-sku-table th, .pnl-sku-table td { /* FIX [cycle71.1]: паддинг 14→10px по горизонтали — на 1440px таблица ТОП-10 не влезала (1160 > 1102) */ padding: 10px 10px; border-bottom: 1px solid var(--border); text-align: left; } .top10-table thead th, .pnl-sku-table thead th { color: var(--muted); font-weight: 600; font-size: 12px; } .pnl-sku-table thead th { border-top: 1px solid var(--border); } .top10-table tbody tr:hover > td, .pnl-sku-table tbody tr:hover > td { background: var(--surface2); } .top10-table .t10-num, .pnl-sku-table .pnl-num { text-align: right; white-space: nowrap; } /* Товарная ячейка: фото 44×44 + название (bold, ellipsis) + артикул (muted) */ .tt-cell { display: flex; align-items: center; gap: 10px; min-width: 220px; } .tt-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--surface2); border: 1px solid var(--border); } .tt-noimg { border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1.1; text-align: center; color: var(--muted); } .tt-txt { min-width: 0; } .tt-name { font-size: 13px; font-weight: 700; color: var(--text); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-art { font-size: 11px; color: var(--muted); font-family: var(--font-mono, monospace); } /* Числовая ячейка: значение жирным + мелкая цветная доля под ним */ .tt-val { font-size: 13px; font-weight: 700; color: var(--text); } .tt-val.green, .tt-sub.green { color: var(--green); } .tt-val.red, .tt-sub.red { color: var(--red); } .tt-sub { font-size: 10px; font-weight: 600; margin-top: 2px; line-height: 1.1; } .tt-sub.muted { color: var(--muted); } /* ТОП-10 дашборда: обёртка со скроллом, группированная шапка 30/60/90 */ .top10-wrap { width: 100%; overflow-x: auto; } .top10-table { min-width: 880px; } .top10-table tbody tr { cursor: pointer; } .top10-table .t10-gsep { border-left: 1px solid var(--border); } .top10-table thead .t10-grp th { text-align: center; font-size: 11px; padding-bottom: 4px; } .top10-empty { text-align: center; color: var(--muted); padding: 28px; } /* FIX [cycle89.14]: мультивыбор групп ABCD/FMR в «Поставках». Группа чипов выглядит как поле .tf (та же подложка, рамка и радиус — стоит в одном ряду с поиском и кластером), внутри — переключатели-пилюли в размер .badge. */ .sup-chips { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; background: var(--color-slate); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .sup-chips-lbl { font-size: 11px; font-weight: 600; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; } .sup-chip { background: transparent; border: 1px solid transparent; color: var(--color-text-muted); padding: 2px 8px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1.4; cursor: pointer; transition: var(--transition); } .sup-chip:hover { background: var(--color-slate-3); color: var(--color-text); } .sup-chip.active { background: var(--color-accent-highlight); border-color: var(--color-ice); color: var(--color-ice); } /* FIX [cycle73]: матрица «Поставки» SKU × кластеры — тот же визуальный язык, что таблицы cycle71 (.top10-table/.tt-*): паддинги 10px, tabular-nums, var(--border)/ var(--muted). Двухстрочная sticky-шапка + sticky-колонка «Товар»; группы по кластерам (4 подколонки) с разделителем border-left. */ .sup-matrix-wrap { overflow: auto; max-height: 70vh; } .sup-matrix-table { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; } .sup-matrix-table th, .sup-matrix-table td { padding: 10px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; } .sup-matrix-table .sm-num { text-align: right; } .sup-matrix-table .sm-gsep { border-left: 1px solid var(--border); } .sup-matrix-table .sm-dot { color: var(--color-text-faint); } .sup-matrix-table .sm-total { font-weight: 800; } /* Sticky двухстрочная шапка (row1 top:0 высотой 34px, row2 top:34px). Фон непрозрачный в обеих темах через var(--color-slate-2). */ .sup-matrix-table thead th { position: sticky; background: var(--color-slate-2); color: var(--muted); font-weight: 600; z-index: 2; } .sup-matrix-table thead tr.sm-grp th { top: 0; height: 34px; text-align: center; } .sup-matrix-table thead tr.sm-sub th { top: 34px; height: 34px; } /* Sticky колонка «Товар» (мин. ширина, фото 32×32 + название + артикул) */ .sup-matrix-table .sm-prod { position: sticky; left: 0; background: var(--color-slate); z-index: 1; min-width: 240px; } /* Угловые ячейки (пересечение sticky шапки и sticky колонки) — поверх всего */ .sup-matrix-table thead .sm-prod { background: var(--color-slate-2); z-index: 4; } .sup-matrix-table tbody tr { cursor: pointer; } .sup-matrix-table tbody tr:hover > td { background: var(--surface2); } .sup-matrix-table tbody tr:hover > .sm-prod { background: var(--surface2); } .sup-matrix-table .tt-img { width: 32px; height: 32px; } .sup-matrix-table .tt-name { max-width: 200px; } /* Минимальная ширина группы кластера (горизонтальный скролл — норма) */ .sup-matrix-table thead tr.sm-grp th[colspan] { min-width: 260px; } /* ═══════════ P&L: остатки и типографика цифр (Cycle86) ═══════════ */ /* FIX [cycle86]: остатки — плотная строка метрик на всю ширину карточки. Раньше это была узкая (280px) правая колонка грида рядом с высокой сводной, из-за чего под блоком оставалась пустая область во всю её высоту. */ .pnl-stock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; font-size: 13px; } .pnl-stock-item { display: flex; align-items: baseline; gap: 8px; } .pnl-stock-item .k { color: var(--muted); } .pnl-stock-item .v { font-weight: 700; color: var(--text); } .pnl-stock-sep { width: 1px; align-self: stretch; min-height: 16px; background: var(--border); } /* FIX [cycle86]: цифры во всём блоке P&L — табличные (одной ширины) и одной высоты (tabular-nums lining-nums), чтобы разряды выстраивались в столбик и суммы читались с одного взгляда. Шрифт интерфейса НЕ меняется: моноширинность только у цифр. font-feature-settings — подстраховка для шрифтов без поддержки font-variant-numeric. */ #page-pnl { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* Числовые ячейки обеих таблиц (сводная и разрез по SKU) — по правому краю, без переноса разрядов; значение и подпись под ним выравниваются так же. */ #page-pnl .pnl-num, #page-pnl .pnl-num .pnl-val, #page-pnl .pnl-num .pnl-sub, #page-pnl .pnl-num .tt-val, #page-pnl .pnl-num .tt-sub { text-align: right; font-variant-numeric: tabular-nums lining-nums; } #page-pnl .pnl-num .tt-val, #page-pnl .pnl-stock .v { white-space: nowrap; } /* Мобильная версия: таблицы скроллятся, чипы переносятся */ @media (max-width: 900px) { .pnl-table-scroll { max-height: none; } .pnl-table th, .pnl-table td { padding: 9px 11px; } .pnl-sticky { min-width: 150px; max-width: 200px; } .pnl-table .pnl-num { min-width: 120px; } .tt-name { max-width: 150px; } } /* ═══ [cycle82.10] Календарь flatpickr под тему приложения ═══ Библиотека приходит со своей светлой палитрой — перекрашиваем её на токены темы, чтобы попап не выглядел чужеродным и работал в dark и light. */ .flatpickr-calendar { background: var(--color-slate); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); color: var(--color-text); font-family: var(--font-body); font-size: 13px; } /* Стрелка-указатель попапа */ .flatpickr-calendar.arrowTop::before { border-bottom-color: var(--color-border); } .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--color-slate); } .flatpickr-calendar.arrowBottom::before { border-top-color: var(--color-border); } .flatpickr-calendar.arrowBottom::after { border-top-color: var(--color-slate); } /* Шапка: месяц/год и стрелки переключения */ .flatpickr-months { padding: 4px 0 2px; } .flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; color: var(--color-text); } .flatpickr-current-month { font-size: 14px; font-weight: 600; } .flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--color-slate); color: var(--color-text); } .flatpickr-current-month input.cur-year { color: var(--color-text); font-weight: 600; } .numInputWrapper span.arrowUp, .numInputWrapper span.arrowDown { border-color: var(--color-border); } .numInputWrapper:hover { background: var(--color-slate-2); } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: var(--color-text-muted); padding: 8px 10px; border-radius: var(--radius-sm); transition: var(--transition); } .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--color-slate-2); } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--color-ice); } /* Названия дней недели */ span.flatpickr-weekday { background: transparent; color: var(--color-text-faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .flatpickr-weekdays { background: transparent; } /* Сетка дней */ .flatpickr-day { color: var(--color-text); border-radius: var(--radius-sm); border-color: transparent; } .flatpickr-day:hover, .flatpickr-day:focus { background: var(--color-accent-highlight); border-color: transparent; color: var(--color-text); } .flatpickr-day.today { border-color: var(--color-ice); font-weight: 600; } .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--color-steel); border-color: var(--color-steel); color: #fff; font-weight: 600; } .flatpickr-day.inRange { background: var(--color-accent-highlight); border-color: transparent; box-shadow: none; } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--color-text-faint); } /* Даты вне разрешённого диапазона пары «с — по» */ .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { background: transparent; color: var(--color-text-faint); opacity: .35; } /* Видимое поле, которое flatpickr создаёт вместо нативного (altInputClass "tf tf-date"): задаём ширину под d.m.Y, иначе текстовый input растягивается по дефолтному size и блок фильтров разъезжается. Ширина в em, а не в px: на мобильных .tf принудительно уходит в 16px (анти-зум iOS), и фиксированные пиксели обрезали бы «05.03.2026». */ input.tf-date { width: 8.5em; text-align: center; cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════ AI-аналитик: форматированный ответ (cycle89.11) Раньше ответ модели выводился плоским текстом (white-space:pre-wrap). Теперь renderAnalysisMarkdown() отдаёт HTML, а разметка живёт здесь. ═══════════════════════════════════════════════════════════════════════ */ .ai-md{ white-space: normal; font-size: 13px; line-height: 1.65; color: var(--text); font-variant-numeric: tabular-nums lining-nums; } .ai-md strong{ font-weight: 700; color: var(--text); } .ai-md > *:first-child{ margin-top: 0; } .ai-md > *:last-child{ margin-bottom: 0; } .ai-p{ margin: 7px 0; } .ai-hr{ border: 0; border-top: 1px solid var(--border); margin: 18px 0; } /* — Заголовки секций — */ .ai-h{ font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .ai-h1{ font-size: 19px; margin: 20px 0 10px; } .ai-h2{ font-size: 17px; margin: 18px 0 9px; } .ai-h3{ font-size: 15px; margin: 15px 0 7px; } .ai-h4{ font-size: 13.5px; margin: 12px 0 6px; } .ai-h--red{ color: #FCA5A5; } .ai-h--yellow{ color: #FCD34D; } .ai-h--orange{ color: #FDBA74; } .ai-h--green{ color: #86EFAC; } .ai-h--blue{ color: #93C5FD; } .ai-h--gold{ color: #FDE68A; } .ai-h--cyan{ color: #7DD3FC; } .ai-h--key{ border-left: 3px solid var(--accent); padding-left: 9px; } /* — Карточка секции с эмодзи-маркером: цветной левый бордер + подложка — */ .ai-card{ margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--border); border-radius: 0 8px 8px 0; background: rgba(148,163,184,0.06); } .ai-card-t{ font-weight: 700; font-size: 13.5px; margin-bottom: 5px; } .ai-card > *:last-child{ margin-bottom: 0; } .ai-card--red{ border-left-color: #EF4444; background: rgba(239,68,68,0.09); } .ai-card--yellow{ border-left-color: #F59E0B; background: rgba(245,158,11,0.09); } .ai-card--orange{ border-left-color: #FB923C; background: rgba(251,146,60,0.09); } .ai-card--green{ border-left-color: #22C55E; background: rgba(34,197,94,0.09); } .ai-card--blue{ border-left-color: #60A5FA; background: rgba(96,165,250,0.09); } .ai-card--gold{ border-left-color: #EAB308; background: rgba(234,179,8,0.09); } .ai-card--cyan{ border-left-color: #38BDF8; background: rgba(56,189,248,0.09); } .ai-card--red .ai-card-t{ color: #FCA5A5; } .ai-card--yellow .ai-card-t{ color: #FCD34D; } .ai-card--orange .ai-card-t{ color: #FDBA74; } .ai-card--green .ai-card-t{ color: #86EFAC; } .ai-card--blue .ai-card-t{ color: #93C5FD; } .ai-card--gold .ai-card-t{ color: #FDE68A; } .ai-card--cyan .ai-card-t{ color: #7DD3FC; } /* — Списки — */ .ai-list{ margin: 6px 0 10px; padding-left: 20px; } .ai-list li{ margin: 3px 0; line-height: 1.6; } .ai-list li::marker{ color: var(--muted); } .ai-li--red::marker{ color: #EF4444; } .ai-li--yellow::marker{ color: #F59E0B; } .ai-li--orange::marker{ color: #FB923C; } .ai-li--green::marker{ color: #22C55E; } .ai-li--blue::marker{ color: #60A5FA; } .ai-li--gold::marker{ color: #EAB308; } .ai-li--cyan::marker{ color: #38BDF8; } /* — Ключевые блоки: «Вердикт», «Проблемы», «Рекомендации» — */ .ai-key{ margin: 11px 0; padding: 9px 13px; background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; } .ai-key-l{ display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; } .ai-key-v{ color: var(--text); } /* — Артикулы SKU — */ .ai-sku{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.92em; padding: 1px 5px; border-radius: 4px; background: rgba(148,163,184,0.15); border: 1px solid rgba(148,163,184,0.18); color: var(--text); white-space: nowrap; } /* — Числовые акценты: убыток красным, высокая маржа зелёной — */ .ai-neg{ color: #F87171; font-weight: 600; } .ai-pos{ color: #4ADE80; font-weight: 600; } /* — Чип рекомендации после «→» — */ .ai-chip{ display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: rgba(96,165,250,0.14); border: 1px solid rgba(96,165,250,0.30); color: #93C5FD; font-size: 11.5px; font-weight: 600; white-space: nowrap; } /* — Светлая тема: те же тона, но читаемые на белом — */ [data-theme='light'] .ai-h--red{ color: #B91C1C; } [data-theme='light'] .ai-h--yellow{ color: #B45309; } [data-theme='light'] .ai-h--orange{ color: #C2410C; } [data-theme='light'] .ai-h--green{ color: #15803D; } [data-theme='light'] .ai-h--blue{ color: #1D4ED8; } [data-theme='light'] .ai-h--gold{ color: #A16207; } [data-theme='light'] .ai-h--cyan{ color: #0369A1; } [data-theme='light'] .ai-card--red .ai-card-t{ color: #B91C1C; } [data-theme='light'] .ai-card--yellow .ai-card-t{ color: #B45309; } [data-theme='light'] .ai-card--orange .ai-card-t{ color: #C2410C; } [data-theme='light'] .ai-card--green .ai-card-t{ color: #15803D; } [data-theme='light'] .ai-card--blue .ai-card-t{ color: #1D4ED8; } [data-theme='light'] .ai-card--gold .ai-card-t{ color: #A16207; } [data-theme='light'] .ai-card--cyan .ai-card-t{ color: #0369A1; } [data-theme='light'] .ai-neg{ color: #DC2626; } [data-theme='light'] .ai-pos{ color: #16A34A; } [data-theme='light'] .ai-sku{ background: rgba(15,23,42,0.05); border-color: rgba(15,23,42,0.10); } [data-theme='light'] .ai-chip{ background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.28); color: #1D4ED8; }