/* Палитра берётся из темы Telegram, поэтому приложение выглядит родным и в светлой, и в тёмной. Фолбэки нужны для открытия в обычном браузере. */ :root { /* Сила стекла выбранных кнопок 0-1, ставит ползунок в настройках (applyGlass). */ --glass: 0.5; --bg: var(--tg-theme-secondary-bg-color, #f2f2f7); --surface: var(--tg-theme-bg-color, #ffffff); --text: var(--tg-theme-text-color, #14161a); --muted: var(--tg-theme-hint-color, #7d8894); --accent: var(--tg-theme-button-color, #2f7cf6); --accent-text: var(--tg-theme-button-text-color, #ffffff); --link: var(--tg-theme-link-color, #2f7cf6); --positive: #1fa971; --negative: #e0503a; /* Фиолетовый Wildberries: плашка «Участвую» в акциях. */ --wb: #9a2bd6; --line: color-mix(in srgb, var(--muted) 22%, transparent); --radius: 14px; --gap: 12px; } /* Если Telegram цвета не передал (открыли в браузере), опираемся на системную тему - иначе в тёмном клиенте страница слепила бы белым. */ @media (prefers-color-scheme: dark) { :root { --bg: var(--tg-theme-secondary-bg-color, #0e1116); --surface: var(--tg-theme-bg-color, #171d24); --text: var(--tg-theme-text-color, #eaeff5); --muted: var(--tg-theme-hint-color, #8b97a5); --accent: var(--tg-theme-button-color, #4a90f0); --positive: #35c48b; --negative: #ef6a52; --wb: #c27cf2; } } /* Ручные схемы. Ставятся атрибутом data-palette на и перебивают цвета Telegram, потому что заданы значением, а не var(--tg-...). */ :root[data-palette="sand"] { --bg: #EFE6D8; --surface: #FAF4EA; --text: #3A3128; --muted: #8A7B68; --accent: #A9713C; --accent-text: #FFFFFF; --link: #8F5B2C; --positive: #4B7A46; --negative: #B24A34; --wb: #8E36B8; } :root[data-palette="sand-dark"] { --bg: #1C1712; --surface: #26201A; --text: #EDE3D5; --muted: #A2917C; --accent: #C98F52; --accent-text: #1C1712; --link: #D9A96E; --positive: #6FA765; --negative: #D4715A; --wb: #C88AEA; } :root[data-palette="graphite"] { --bg: #101315; --surface: #191E22; --text: #E6EBEF; --muted: #8C99A4; --accent: #5B9BD5; --accent-text: #0B0E10; --link: #7FB3E3; --positive: #46B08B; --negative: #DD6E5C; --wb: #BE86F0; } :root[data-palette="paper"] { --bg: #F1F2F4; --surface: #FFFFFF; --text: #16191D; --muted: #6B7580; --accent: #2F6FE0; --accent-text: #FFFFFF; --link: #2F6FE0; --positive: #1E9E6A; --negative: #D2503A; --wb: #9A2BD6; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Экраны и шторка скрываются атрибутом hidden, а собственный display их правил перебивает браузерное [hidden]{display:none} - без этой строки скрытые блоки остаются на экране и перехватывают нажатия. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; padding-bottom: calc(64px + env(safe-area-inset-bottom)); } h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; } /* -- загрузка и фатальная ошибка ---------------------------------------- */ .boot, .fatal { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; } .boot-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .boot-text, .fatal-text { color: var(--muted); margin: 0; max-width: 34ch; } .fatal-title { font-size: 19px; } /* -- шапка --------------------------------------------------------------- */ /* Полноэкранный Telegram рисует часы, камеру и свои кнопки поверх страницы: шапка опускает название кабинета и шестерёнку на их высоту (--safe-top ставит app.js из отступов Telegram). --topbar-h - настоящая высота шапки для панелей, которые держатся под ней. */ :root { --safe-top: 0px; --topbar-h: 52px; --nav-h: 0px; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + var(--safe-top)) 14px 10px; background: var(--surface); border-bottom: 1px solid var(--line); } .cabinet-switch { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; color: var(--text); font-size: 17px; font-weight: 650; letter-spacing: -0.01em; /* Сжимается первым: место логотипа не отдаётся длинному названию кабинета. Но не в ноль - 56 px остаётся на превью названия. */ cursor: pointer; min-width: 56px; flex: 0 1 auto; } .cabinet-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Логотип PICK SMART стоит в шапке между кабинетом и правыми кнопками, и место под него закреплено: сжимается название кабинета, а не логотип, поэтому логотип виден целиком при любом названии. Графит логотипа - цвет текста схемы, поэтому на тёмных схемах карточки и PICK светлые, как в утверждённой версии для тёмного фона; красный фирменный, на тёмных схемах утверждённый #FF5A45. */ :root { --logo-ink: var(--text); --logo-red: #F2412D; } @media (prefers-color-scheme: dark) { :root { --logo-red: #FF5A45; } } :root[data-scheme="light"] { --logo-red: #F2412D; } :root[data-scheme="dark"] { --logo-red: #FF5A45; } :root[data-palette="sand"], :root[data-palette="paper"] { --logo-red: #F2412D; } :root[data-palette="sand-dark"], :root[data-palette="graphite"] { --logo-red: #FF5A45; } .brand-logo { flex: 0 0 auto; width: clamp(140px, 36vw, 180px); display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; -webkit-user-select: none; } .brand-logo .ink { fill: var(--logo-ink); } .brand-logo .red { fill: var(--logo-red); } /* Утверждённая композиция одной картинкой, пропорции мастер-файла: в ширине 14,89 высоты букв, то есть буквы от 9,4 px на узком экране до 12,8 px. */ .brand-lockup { display: block; width: 100%; height: auto; aspect-ratio: 1489.07 / 142.66; } .chevron { color: var(--muted); font-size: 12px; flex: 0 0 auto; } .sub-badge { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); /* В тесной шапке плашка укорачивается вместе с названием, логотип не трогаем. */ white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; } .sub-badge.is-warning { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); } /* Сжимается вместе с плашкой доступа: без min-width: 0 плашка «Доступ 30 дней» не укорачивалась и выталкивала шестерёнку за край экрана 390 px (найдено 17.09.2026, когда у владельца впервые появился срок подписки после оплаты). */ .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; } /* Шестерёнка в шапке нарисована той же линией, что значки нижнего меню, и не спорит с ними подложкой. */ .icon-btn { border: 0; background: none; color: var(--muted); cursor: pointer; width: 36px; height: 36px; border-radius: 10px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .icon-btn:active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .line-icon, .tab-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .line-icon { width: 22px; height: 22px; } /* -- настройки приложения ------------------------------------------------ */ .subhead { font-size: 13px; font-weight: 600; margin: 20px 0 2px; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; } .cabinets { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .cabinet-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .cabinet-row.is-current { box-shadow: inset 3px 0 0 var(--accent); } .cabinet-row .name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; } .cabinet-row .meta { color: var(--muted); font-size: 12px; } .cabinet-row .actions { display: flex; gap: 6px; flex-wrap: wrap; } .themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; } .theme-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: none; cursor: pointer; font: inherit; color: var(--text); text-align: left; display: flex; flex-direction: column; gap: 8px; } .theme-card.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .theme-card .theme-name { font-size: 13.5px; font-weight: 600; } .theme-swatches { display: flex; gap: 5px; } .theme-swatches i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line); } .cost-row.is-tappable { cursor: pointer; align-items: center; } .cost-row .cost-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cost-row .cost-title { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cost-row .amount.is-empty { color: var(--muted); } /* -- сотрудники ---------------------------------------------------------- */ .staff-chips { display: flex; gap: 6px; flex-wrap: wrap; } .field-block { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; } .field-label { color: var(--muted); font-size: 12.5px; } .role-list, .check-list { display: flex; flex-direction: column; gap: 6px; } .role-option, .check-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; } .role-option.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .check-row { margin-bottom: 13px; } .check-list .check-row, .field-block .check-row { margin-bottom: 0; } .check-row.is-locked { opacity: 0.7; cursor: default; } /* Общее правило «input в шторке во всю ширину» радиокнопкам и галочкам не подходит. */ .sheet input[type="radio"], .sheet input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); } .check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .check-text b { font-size: 14px; font-weight: 600; color: var(--text); } .check-text small { font-size: 12px; color: var(--muted); line-height: 1.35; } .invite-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } /* -- периоды ------------------------------------------------------------- */ .periods { padding: 11px 14px 0; } .period-btn { width: 100%; border: 0; cursor: pointer; font: inherit; background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 11px 14px; display: flex; align-items: center; gap: 8px; } .period-label { font-weight: 600; font-size: 14.5px; } .period-dates { color: var(--muted); font-size: 12.5px; margin-left: auto; font-variant-numeric: tabular-nums; } .period-btn .chevron { color: var(--muted); font-size: 12px; flex: 0 0 auto; } .range-fields { display: flex; gap: 8px; align-items: flex-end; margin: 4px 0 12px; } .range-fields label { flex: 1; display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12.5px; } .range-fields input { border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 9px; padding: 9px 10px; font-size: 15px; font-family: inherit; width: 100%; } /* -- экраны и карточки --------------------------------------------------- */ .screen { padding: 14px; display: flex; flex-direction: column; gap: var(--gap); } .freshness { color: var(--muted); font-size: 12.5px; min-height: 16px; } /* На экране отзывов, заказов и возвратов строка свежести часто пустая: без текста она не занимает место. */ #reviews-freshness:empty { display: none; } .freshness button { background: none; border: 0; color: var(--link); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0 0 0 6px; text-decoration: underline; } .card { background: var(--surface); border-radius: var(--radius); padding: 14px; } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .card-title { font-size: 15px; } .card-note { color: var(--muted); font-size: 12px; text-align: right; } .hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 10px; } /* -- KPI ----------------------------------------------------------------- */ .kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .kpi { background: var(--surface); border-radius: var(--radius); padding: 13px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kpi-primary, .kpi-wide { grid-column: 1 / -1; } .kpi-label { color: var(--muted); font-size: 12.5px; } .kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .kpi-primary .kpi-value { font-size: 30px; } .kpi-value.is-negative { color: var(--negative); } .kpi-value.is-positive { color: var(--positive); } .kpi-delta, .kpi-sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .kpi-delta.up { color: var(--positive); } .kpi-delta.down { color: var(--negative); } /* -- график -------------------------------------------------------------- */ .chart-wrap { margin-top: 10px; } .chart { width: 100%; height: 152px; display: block; overflow: visible; } .bar { fill: var(--accent); opacity: 0.85; } .bar.is-negative { fill: var(--negative); } .axis-label { fill: var(--muted); font-size: 9.5px; } .zero-line { stroke: var(--line); stroke-width: 1; } /* График «По дням»: касание показывает день, вид меняется на самом виджете. */ .chart-head { align-items: center; } .chart-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .chart-switch { flex: 0 0 auto; background: var(--bg); padding: 2px; gap: 2px; border-radius: 9px; } .chart-switch .seg-btn { flex: 0 0 auto; padding: 5px 9px; border-radius: 7px; display: flex; align-items: center; justify-content: center; } .chart-side svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chart-compare { flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; background: var(--bg); color: var(--muted); border-radius: 9px; padding: 7px 9px; display: flex; align-items: center; justify-content: center; } .chart-compare.is-active { background: var(--accent); color: var(--accent-text); } .icon-dashed { stroke-dasharray: 2 2.6; } /* Второй ряд шапки графика: выручка или прибыль и свой период графика. */ /* container-type: число дней видно только на широком экране. На 390 px оно обрезало само название («Прошлая нед…»), а название важнее. */ .chart-tools { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; container-type: inline-size; } /* Двойной класс: общее .segmented { flex: 1 } стоит ниже в файле и иначе перебивает. */ .segmented.chart-metric { flex: 0 0 auto; background: var(--bg); padding: 2px; gap: 2px; border-radius: 9px; } .chart-metric .seg-btn { flex: 0 0 auto; padding: 5px 9px; border-radius: 7px; font-size: 12.5px; } .chart-period { margin-left: auto; flex: 0 1 auto; min-width: 0; border: 0; cursor: pointer; font: inherit; background: var(--bg); color: var(--text); border-radius: 9px; padding: 6px 9px; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; } @container (max-width: 360px) { .chart-period-days { display: none; } } .chart-period-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .chart-period-days { color: var(--muted); font-weight: 400; white-space: nowrap; } .chart-period .chevron { color: var(--muted); font-size: 11px; } .chart-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 48px 8px; margin: 0; } .chart-note { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: 6px 0 0; } .day-chart { position: relative; } .day-chart .chart { height: 176px; touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .chart .bar { transition: opacity 0.12s; } .chart.has-active .bar { opacity: 0.3; } .chart.has-active .bar.is-active { opacity: 1; } .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; } .avg-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.75; } .line-area { fill: var(--accent); opacity: 0.14; } .line-path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .line-point { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; } .line-point.is-negative { stroke: var(--negative); } .chart-cross { stroke: var(--muted); stroke-width: 1; opacity: 0.5; } .chart-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; } .chart-tip { position: absolute; top: 0; transform: translateX(-50%); max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; white-space: nowrap; background: var(--text); color: var(--surface); font-size: 12px; font-variant-numeric: tabular-nums; padding: 5px 9px; border-radius: 8px; pointer-events: none; } .chart-tip[hidden] { display: none; } .chart-tip b { font-size: 13px; font-weight: 700; } .chart-tip span { opacity: 0.8; } .chart-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .chart-stats:empty { display: none; } .chart-stat { display: inline-flex; align-items: center; gap: 6px; } .avg-mark { display: inline-block; width: 14px; border-top: 1.5px dashed var(--muted); } /* Сравнение с прошлым периодом: прошлое серым, текущее цветом. */ .bar.bar-prev { fill: var(--muted); opacity: 0.4; } .chart.has-active .bar.bar-prev { opacity: 0.15; } .chart.has-active .bar.bar-prev.is-active { opacity: 0.6; } .line-prev { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 4 3; stroke-linejoin: round; opacity: 0.85; } .chart-dot-prev { fill: var(--muted); stroke: var(--surface); stroke-width: 2; } .tip-row { display: flex; align-items: baseline; gap: 6px; } .tip-row.is-prev { font-size: 11.5px; } .chart-tip .tip-delta { opacity: 1; font-weight: 700; } .tip-delta.up, .chart-delta.up { color: var(--positive); } .tip-delta.down, .chart-delta.down { color: var(--negative); } .chart-delta { font-weight: 600; } .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); } .swatch.is-prev { background: var(--muted); opacity: 0.55; } /* -- разбивка расходов --------------------------------------------------- */ .breakdown { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; } .breakdown > li { border-bottom: 1px solid var(--line); font-size: 14px; } .breakdown > li:last-child { border-bottom: 0; } .breakdown li.is-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; padding: 12px 0 2px; } .breakdown .name { color: var(--muted); min-width: 0; } .breakdown li.is-total .name { color: var(--text); } .breakdown .value { font-variant-numeric: tabular-nums; white-space: nowrap; } .breakdown .value.is-negative { color: var(--negative); } .breakdown .value.is-info { color: var(--muted); } .bd-hint { color: var(--muted); font-size: 12px; margin: 3px 0 0; } /* Строка разбивки - кнопка: нажал, под ней раскрылось, из чего она сложилась. */ .bd-head { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; } button.bd-head { cursor: pointer; } .bd-head .name { display: flex; flex-direction: column; gap: 1px; } .bd-name-line { display: inline-flex; align-items: center; gap: 7px; } .bd-chevron { display: inline-block; width: 8px; color: var(--accent); font-size: 17px; line-height: 1; transition: transform 0.18s ease; } .bd-row.is-open .bd-chevron { transform: rotate(90deg); } .bd-row.is-open .bd-head .name { color: var(--text); } .bd-caption { font-size: 11.5px; line-height: 1.3; } .bd-details { margin: -2px 0 10px 15px; padding: 6px 12px 8px; border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; animation: rise 0.18s ease-out; } .bd-details.is-flat { margin: 8px 0 4px; animation: none; } .bd-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--line); } .bd-line:last-child { border-bottom: 0; } .bd-line-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; } .bd-line-sub { color: var(--muted); font-size: 11.5px; line-height: 1.35; } .bd-line-value { font-variant-numeric: tabular-nums; white-space: nowrap; } .bd-line.is-bad .bd-line-sub, .bd-line.is-bad .bd-line-value { color: var(--negative); } .bd-line.is-good .bd-line-sub, .bd-line.is-good .bd-line-value { color: var(--positive); } .bd-line.is-muted { color: var(--muted); } .bd-line.is-sum { font-weight: 650; } .bd-line.is-sum .bd-line-sub { font-weight: 400; } .bd-subhead { font-size: 12px; font-weight: 650; color: var(--muted); margin: 10px 0 0; } .bd-note { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: 7px 0 0; } .bd-link { align-self: flex-start; margin-top: 4px; padding-left: 0; font-size: 13px; } .warnings { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .warnings li { font-size: 13px; color: var(--muted); padding-left: 16px; position: relative; } .warnings li::before { content: "•"; position: absolute; left: 4px; color: var(--negative); } /* -- товары -------------------------------------------------------------- */ .list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .products { display: flex; flex-direction: column; gap: 8px; } .product { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; } .product-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .product-article { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; } .product-revenue { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; } .product-meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 10px; flex-wrap: wrap; } .product-margin.up { color: var(--positive); } /* Вкладка «Товары → Акции». Карточка акции - кнопка на всю ширину, товар акции - галочка слева и расчёт справа. */ .promo-list, .promo-items { display: flex; flex-direction: column; gap: 8px; } .product.promo-card { border: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; width: 100%; } .promo-card.is-declined { opacity: 0.65; } .promo-open { color: var(--muted); font-size: 20px; line-height: 1; } /* Акция, в которой уже есть товары кабинета: фиолетовая полоса слева видна при прокрутке списка. */ .promo-card.is-participating, .promo-participants { box-shadow: inset 3px 0 0 var(--wb); } .promo-participant-list { display: flex; flex-direction: column; margin-top: 2px; } .promo-participant + .promo-participant { border-top: 1px solid var(--line); } .promo-participant-top { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 0; margin: 0; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; } /* min-width: 0 - иначе длинный артикул WB выталкивает прибыль за край карточки. */ .promo-participant-name { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; } .promo-participant-name .product-article { overflow-wrap: break-word; word-break: break-word; } .promo-participant-top .product-revenue { flex: 0 0 auto; } .promo-participant-details { display: flex; flex-direction: column; gap: 4px; padding: 0 0 10px; } .promo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; } .promo-advantages { margin: 2px 0 0; } .promo-back { align-self: flex-start; } .promo-section { margin-top: 6px; } .promo-about { margin: 8px 0 2px; } .promo-about summary { cursor: pointer; color: var(--link); font-size: 13px; font-weight: 600; } .promo-about .review-text { margin: 6px 0 0; font-size: 13px; line-height: 1.45; } .promo-upload.is-bad { color: var(--negative); } /* Двойной класс: общее .segmented { flex: 1 } стоит ниже в файле и иначе перебивает. */ .segmented.promo-filter { flex: 0 0 auto; } /* Панель выбора держится под шапкой, пока листаешь список. */ .promo-toolbar { position: sticky; top: calc(var(--topbar-h) + var(--nav-h)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surface); border-radius: var(--radius); padding: 8px 12px; box-shadow: 0 1px 0 var(--line); } .promo-select-all { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; } .promo-select-all input, .promo-check input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; } .promo-row { display: flex; gap: 10px; align-items: flex-start; } /* Галочка с запасом по площади касания: палец не должен промахиваться. */ .promo-check { display: flex; align-items: center; justify-content: center; padding: 2px 4px 10px 0; cursor: pointer; } .promo-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } /* Артикул WB бывает одним словом через подчёркивания на 40+ букв. Без min-width: 0 flex не сжимает его уже этого слова, и прибыль справа уезжает за край экрана. Основа 12em не даёт артикулу схлопнуться в столбик по одной букве. */ /* История себестоимости: плашка последней загрузки и раскрываемый список записей. */ .costs-last-upload { margin: 12px 0 6px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, transparent); overflow-wrap: break-word; } .cost-history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .cost-history-item { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; } .cost-history-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; } .cost-history-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .cost-history-title { min-width: 0; overflow-wrap: break-word; word-break: break-word; } .cost-history-sign { color: var(--muted); flex: 0 0 auto; } .cost-history-meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; overflow-wrap: break-word; } .cost-history-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 13px; } .cost-history-row { display: flex; justify-content: space-between; gap: 10px; } .cost-history-row > span:first-child { min-width: 0; overflow-wrap: break-word; word-break: break-word; } .cost-history-row > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; } .cost-article-history { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; } .promo-body .product-top { flex-wrap: wrap; } .promo-body .product-article { flex: 1 1 12em; min-width: 0; overflow-wrap: break-word; word-break: break-word; } .promo-body .product-revenue { margin-left: auto; } .promo-sub { margin: 0; } .promo-item.is-selected { box-shadow: inset 0 0 0 2px var(--accent); } .promo-item.is-loss .product-article { color: var(--text); } .product-revenue.up, .promo-potential.up { color: var(--positive); } .product-revenue.down, .promo-potential.down, .promo-warning { color: var(--negative); } .promo-potential { margin: 0; font-size: 13px; font-weight: 600; } .promo-why { align-self: flex-start; border: 0; background: none; padding: 2px 0; cursor: pointer; color: var(--link); font: inherit; font-size: 12.5px; font-weight: 600; } .promo-breakdown { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 4px; } .promo-line { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; } .promo-line span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .promo-line.is-head { color: var(--muted); font-size: 11.5px; } .promo-line.is-total { font-weight: 650; border-bottom: 0; } /* Кнопка вступления прилипает над нижним меню, чтобы не искать её под сотней товаров. */ .promo-join { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border-radius: var(--radius); padding: 10px 12px; box-shadow: 0 4px 18px color-mix(in srgb, var(--text) 16%, transparent); } .promo-join-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .promo-join-text b { font-size: 14px; } .promo-join-text small { color: var(--muted); font-size: 12px; line-height: 1.35; } .promo-join-btn { flex: 0 0 auto; } .product-margin.down { color: var(--negative); } /* Вкладка «Товары»: топ, ABC-анализ и товары без заказов. */ /* Четыре разреза: кнопки по ширине текста, чтобы названия не обрезались. На узком экране строка прокручивается вбок, а не режет слова. */ .products-nav { flex: 0 0 auto; overflow-x: auto; scrollbar-width: none; } .products-nav::-webkit-scrollbar { display: none; } .products-nav .seg-btn { flex: 0 0 auto; font-size: 12.5px; padding: 8px 7px; } /* Лента своих категорий над разбором ABC: названия у людей длинные, поэтому кнопки идут по ширине текста с прокруткой вбок, как разрезы товаров. */ .groups-nav { margin-bottom: 2px; } .groups-nav .seg-btn { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .group-actions { display: flex; gap: 8px; margin-top: 10px; } /* «Финансы → Прибыль». Шапка товара - кнопка раскрытия, поэтому сброс вида кнопки; артикулу min-width: 0, иначе длинный артикул выталкивает прибыль за край. */ .tax-big.is-negative { color: var(--negative); } .profit-item-head { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; } .profit-item-head .product-article { min-width: 0; flex: 1 1 auto; } .profit-item-head .product-revenue { flex: 0 0 auto; } .profit-item .bd-details { margin-top: 4px; } .bd-line.is-link { cursor: pointer; } .bd-line.is-link .bd-line-name > span:first-child { color: var(--accent); } .bd-line.is-negative .bd-line-value { color: var(--negative); } .bd-line.is-total { font-weight: 650; } .profit-sort { margin: 8px 0 4px; } /* План прибыли: строка под цифрой виджета, блок под итогом вкладки, окно по месяцам. */ .kpi-plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .profit-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .profit-plan .bd-details { align-self: stretch; margin: 0; } .plan-month { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .plan-month-title { font-size: 16px; } .plan-input { font-variant-numeric: tabular-nums; } /* Переключатель режима ответов: три равные кнопки в ряд, под ними пояснение выбранного. Названия короткие, поэтому помещаются без прокрутки. */ .mode-switch .seg-btn { flex: 1 1 0; font-size: 13px; padding: 9px 6px; } /* Состояние автопродления: подключено или нет видно с первого взгляда - цветная точка, заголовок и одна строка с суммой. */ .state-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .state-card.is-on { border-color: color-mix(in srgb, var(--positive) 45%, var(--line)); background: color-mix(in srgb, var(--positive) 8%, transparent); } .state-card.is-off { background: var(--bg); } .state-head { display: flex; align-items: center; gap: 9px; } .state-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; } .state-card.is-on .state-dot { background: var(--positive); } .state-title { font-weight: 650; font-size: 15px; } .state-text { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; } .manage-actions { flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; } .manage-actions .btn-primary { flex: 1 1 100%; } .sheet .field .mode-switch + .hint { margin: 2px 0 0; } /* Списки брендов и предметов бывают длинными, поэтому они прокручиваются внутри рамки: рамка и есть подсказка, что ниже есть ещё названия. */ .facet-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 172px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 8px; } .facet-chip { border: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 12.5px; background: var(--bg); color: var(--muted); border-radius: 999px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; } /* Выбранный чип: белый текст на синем. Селектор с .sheet .field неспроста - общее правило «.sheet .field span { color: muted }» стоит ниже в файле и с такой же специфичностью перебило бы цвет, оставив серую надпись на синем. */ .facet-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; } .sheet .field .facet-chip.is-on span { color: #fff; } .facet-count, .sheet .field .facet-count { opacity: 0.7; font-size: 11px; } .products-view { display: flex; flex-direction: column; gap: var(--gap); } .product-name-line { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } .product-sub { color: var(--muted); font-size: 12px; margin-top: -2px; overflow-wrap: anywhere; } .abc-insight { font-weight: 650; font-size: 14px; margin: 8px 0 0; line-height: 1.35; } .abc-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .abc-group { border: 0; cursor: pointer; font: inherit; color: var(--text); text-align: left; background: var(--bg); border-radius: 11px; padding: 9px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .abc-group.is-active { box-shadow: inset 0 0 0 2px var(--accent); } .abc-letter { font-weight: 750; font-size: 18px; line-height: 1.1; } .abc-group.abc-a .abc-letter { color: var(--positive); } .abc-group.abc-b .abc-letter { color: var(--accent); } .abc-group.abc-c .abc-letter { color: var(--muted); } .abc-count { font-size: 12.5px; font-weight: 600; } .abc-share { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; } .chip.abc-a { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); } .chip.abc-b { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } /* График ABC: цвет столбика и линии - класс товара. */ .bar.is-a, .line-point.is-a { fill: var(--positive); } .bar.is-b, .line-point.is-b { fill: var(--accent); } .bar.is-c, .line-point.is-c { fill: var(--muted); } .line-path.is-a { stroke: var(--positive); } .line-path.is-b { stroke: var(--accent); } .line-path.is-c { stroke: var(--muted); } .line-point.is-a { stroke: var(--positive); } .line-point.is-b { stroke: var(--accent); } .line-point.is-c { stroke: var(--muted); } .axis-label.is-a { fill: var(--positive); font-weight: 700; } .axis-label.is-b { fill: var(--accent); font-weight: 700; } .axis-label.is-c { fill: var(--muted); font-weight: 700; } /* Диаграмма Парето: кривая накопленной доли идёт поверх столбиков, поэтому она контрастнее их, а пороги классов - тонкий пунктир под ней. */ .pareto-line { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: 0.75; } .pareto-point { fill: var(--text); opacity: 0.75; } .pareto-threshold { stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.6; } .pareto-threshold.is-a { stroke: var(--positive); } .pareto-threshold.is-b { stroke: var(--accent); } .axis-label.is-right { fill: var(--muted); font-size: 9px; } .swatch.is-a { background: var(--positive); } .swatch.is-b { background: var(--accent); } .swatch.is-c { background: var(--muted); } .abc-series { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .abc-pill { border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; background: var(--bg); color: var(--muted); border-radius: 999px; padding: 6px 11px; display: inline-flex; align-items: center; gap: 6px; opacity: 0.5; } .abc-pill.is-on { opacity: 1; color: var(--text); } .abc-pill.abc-a .swatch { background: var(--positive); } .abc-pill.abc-b .swatch { background: var(--accent); } .abc-pill.abc-c .swatch { background: var(--muted); } .idle-days { background: var(--bg); margin-top: 10px; } .idle-days .seg-btn { font-size: 12.5px; padding: 6px 4px; } .more-btn { align-self: center; } /* -- расходы ------------------------------------------------------------- */ .expenses { display: flex; flex-direction: column; gap: 8px; } /* Названия расходов бывают длинными, поэтому строка складывается в два яруса: название сверху во всю ширину, сумма и действия под ним. */ .expense { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .expense-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .expense-main { min-width: 0; } .expense-name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; } .expense-meta { color: var(--muted); font-size: 12px; } .expense-amount { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; } .expense-actions { display: flex; gap: 6px; } /* -- себестоимость и факты ---------------------------------------------- */ .costs { display: flex; flex-direction: column; margin-top: 8px; max-height: 320px; overflow-y: auto; } .cost-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .cost-row:last-child { border-bottom: 0; } .cost-row .article { color: var(--muted); overflow-wrap: anywhere; } .cost-row .amount { font-variant-numeric: tabular-nums; white-space: nowrap; } .facts { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13.5px; } .facts dt { color: var(--muted); } .facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* -- элементы управления -------------------------------------------------- */ .row { display: flex; align-items: center; gap: 8px; } .row input[type="number"] { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 9px; padding: 9px 11px; font-size: 15px; font-family: inherit; } .suffix { color: var(--muted); } input[type="search"], .sheet input, .sheet select { width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 9px; padding: 10px 12px; font-size: 15px; font-family: inherit; } .btn { border: 0; border-radius: 10px; padding: 11px 16px; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; background: var(--bg); color: var(--text); } .btn-primary { background: var(--accent); color: var(--accent-text); } .btn-small { padding: 7px 12px; font-size: 13.5px; border-radius: 9px; } .btn-ghost { background: none; color: var(--link); padding: 6px 8px; } .btn-danger { background: none; color: var(--negative); padding: 6px 8px; } /* Выход из подписки не должен спорить по весу с продлением: он самый тихий. Правило стоит здесь, а не в блоке подписки: базовый .btn ниже по файлу перебил бы фон, и «тихая» кнопка выглядела бы обычной серой плашкой. */ .btn-quiet { background: none; color: var(--muted); padding: 6px 8px; } .btn[disabled] { opacity: 0.5; cursor: default; } .empty { color: var(--muted); font-size: 13.5px; text-align: center; padding: 26px 14px; } /* -- нижняя навигация ---------------------------------------------------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .tab { border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; /* Пять вкладок в одну строку: на 360px подпись должна умещаться без переноса. */ padding: 8px 2px 9px; color: var(--muted); font-size: 10.5px; font-weight: 550; font-family: inherit; min-width: 0; white-space: nowrap; } .tab-icon { width: 23px; height: 23px; display: block; } .tab.is-active { color: var(--accent); } /* -- шторка -------------------------------------------------------------- */ .sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; } .sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .sheet-body { position: relative; width: 100%; background: var(--surface); border-radius: 18px 18px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; animation: rise 0.22s ease-out; } @keyframes rise { from { transform: translateY(14px); opacity: 0.6; } } /* Шапка прилипает к верху шторки: крестик виден и в длинном окне с прокруткой. top равен минус верхнему отступу шторки, иначе над шапкой просвечивает текст. */ .sheet-head { position: sticky; top: -18px; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -18px -16px 0; padding: 18px 16px 0; background: var(--surface); } .sheet-title { flex: 1; min-width: 0; font-size: 17px; margin: 0 0 14px; padding-top: 5px; overflow-wrap: anywhere; } .sheet-close { position: relative; flex: 0 0 auto; width: 32px; height: 32px; margin-right: -4px; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Зона касания шире самого кружка, чтобы попадать пальцем с первого раза. */ .sheet-close::after { content: ""; position: absolute; inset: -7px; } .sheet-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .sheet-close:active { color: var(--text); } .sheet-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sheet .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; } .sheet .field span { color: var(--muted); font-size: 12.5px; } .sheet-actions { display: flex; gap: 8px; margin-top: 6px; } .sheet-actions .btn { flex: 1; } .sheet-error { color: var(--negative); font-size: 13px; margin: 0 0 10px; } .sheet-list { display: flex; flex-direction: column; gap: 2px; } .sheet-option { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 4px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-bottom: 1px solid var(--line); } .sheet-option:last-child { border-bottom: 0; } .sheet-option.is-active { color: var(--accent); font-weight: 600; } .dim-small { color: var(--muted); font-size: 12px; } .sheet-option.is-stacked { flex-direction: column; align-items: flex-start; gap: 2px; } /* -- виджеты сводки ------------------------------------------------------ */ .widgets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .widget { position: relative; min-width: 0; overflow: hidden; /* Вертикальная прокрутка сводки жива, а долгий тап по карточке не поднимает системное меню выделения текста. */ touch-action: pan-y; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .widget-full { grid-column: 1 / -1; } .widget-half { grid-column: span 1; } .widgets.is-editing .widget { outline: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; } /* В режиме настройки содержимое не нажимается и приглушено - в фокусе кнопки и уголок размера. */ .widgets.is-editing .widget > :not(.widget-tools):not(.widget-grip) { pointer-events: none; opacity: 0.55; } .widget-tools { display: flex; align-items: center; gap: 5px; margin: -4px -4px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .widget-tools-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 650; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tool-btn { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: var(--accent-text); font-size: 14px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } .tool-btn.is-danger { background: var(--negative); color: #fff; } .tool-btn[disabled] { opacity: 0.35; cursor: default; } .dash-edit { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 0 6px; } .dash-edit .hint { text-align: center; margin: 0; max-width: 36ch; } .dash-edit .btn-row { justify-content: center; margin: 0; } /* -- язык и валюта ------------------------------------------------------- */ /* Стили карточки выбора языка и валюты убраны 16.09.2026 вместе с самой карточкой: язык один, валюта одна. Плашка пересчёта ниже осталась - она понадобится, если валюты вернут. */ /* Строка про пересчёт по курсу: заметная плашка, а не сноска мелким шрифтом. */ .fx-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); font-size: 12.5px; line-height: 1.4; } .fx-note::before { content: "⇄"; flex: 0 0 auto; color: var(--accent); font-weight: 700; } /* -- вкладка «Инфо» ------------------------------------------------------ */ /* Ряд кнопок 1-5 в калькуляторе: цифры узкие, поэтому колонки равные. */ .keys-nav { margin: 10px 0 4px; } .keys-nav .seg-btn { font-variant-numeric: tabular-nums; } #sub-status { display: flex; flex-direction: column; gap: 3px; } #sub-status .kpi-value { font-size: 24px; } #sub-calc .mini-stats { margin-top: 12px; } #sub-manage .facts { margin-bottom: 12px; } #sub-manage .btn-row { flex-wrap: wrap; } .faq-item { padding: 0; overflow: hidden; } .faq-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; } .faq-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 650; } .faq-sign { flex: 0 0 auto; color: var(--muted); font-size: 17px; line-height: 1; transition: transform 0.15s; } .faq-sign.is-open { transform: rotate(90deg); color: var(--accent); } .faq-body { padding: 0 14px 14px; border-top: 1px solid var(--line); } .faq-body p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); } /* «Инфо → Поддержка» (21.09.2026): тема - крупная строка-кнопка, палец попадает без прицеливания. Карточки строятся как в списках приложения, не как ссылки. */ .support-list { display: flex; flex-direction: column; gap: 10px; } .support-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; cursor: pointer; } /* Значок темы - та же плитка, что у блоков настроек: один язык на всё приложение. */ .support-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); } .support-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .support-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .support-row b { font-size: 15px; font-weight: 650; color: var(--text); } .support-text > span { font-size: 13px; color: var(--muted); line-height: 1.4; } .support-row:active { background: var(--bg); } #support-foot { margin-top: 12px; } /* «Инфо → Документы»: длинные номера счетов и адреса не должны распирать экран. */ .doc-body p { overflow-wrap: anywhere; } .doc-body p.dim-small { color: var(--muted); font-size: 12px; } .doc-heading { font-size: 13.5px; font-weight: 650; margin: 18px 0 0; } .doc-link { margin-top: 16px; } /* -- размер виджета ------------------------------------------------------- Блок идёт после правил .widgets.is-editing: общее правило ниже по файлу перебивает одноклассовое выше, и порядок здесь имеет значение. Обычная ступень h1 - натуральная высота карточки, ровно как было до появления жеста. Высоту добавляют только h2 и h3: min-height поднимает карточку, а span по строкам не даёт вытянуть соседа по строке за собой. */ .widget-h2 { grid-row: span 2; min-height: 200px; } .widget-h3 { grid-row: span 3; min-height: 280px; } /* Выше карточка - крупнее главная цифра: за этим её и растягивают. */ .widget-h2.kpi, .widget-h3.kpi { justify-content: space-between; } .widget-h2 .kpi-value { font-size: 30px; } .widget-h3 .kpi-value { font-size: 38px; } /* Редкая обрезка снизу должна выглядеть намеренной, а не сломанной. */ .widget-h2, .widget-h3 { mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent); } /* Захват пальцем: карточка приподнимается и на время жеста забирает себе все касания, иначе страница уезжает под пальцем. */ .widget.is-resizing { touch-action: none; outline: 2px solid var(--accent); outline-offset: 2px; transform: scale(0.98); transition: transform 0.12s; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); z-index: 2; } body.is-resizing { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: contain; } .widget-grip { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); border-bottom-right-radius: 5px; opacity: 0.85; pointer-events: none; } /* Подпись стоит внизу, а не поверх заголовка: во время жеста надо видеть, какую именно карточку тянешь. Две строки разрешены - на половинной карточке «½ ширины · самая высокая» в одну строку не влезает и обрезается краем. */ .widget-size-badge { position: absolute; left: 8px; bottom: 8px; z-index: 3; max-width: calc(100% - 42px); background: var(--accent); color: var(--accent-text); font-size: 11.5px; font-weight: 650; line-height: 1.25; text-align: center; padding: 5px 9px; border-radius: 10px; pointer-events: none; } /* В режиме настройки уголок стоит на каждой карточке - иначе о жесте никто не узнает. Касания он пропускает сквозь себя: тянут всю карточку, и палец, попавший в уголок, начинает тот же жест. */ .widgets.is-editing .widget > .widget-grip { opacity: 0.5; } .mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 6px; } .mini-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mini-label { color: var(--muted); font-size: 11.5px; line-height: 1.25; } .mini-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; overflow-wrap: anywhere; } .mini-value.is-bad { color: var(--negative); } .mini-value.is-good { color: var(--positive); } .ads-alert { font-size: 13px; margin: 6px 0 0; } .ads-alert.is-good, .insight-title.is-good { color: var(--positive); } /* -- реклама ------------------------------------------------------------- */ .ads-body { display: flex; flex-direction: column; gap: var(--gap); } .insight-title { font-weight: 650; font-size: 14.5px; margin: 0; } .ads-toolbar { display: flex; gap: 8px; align-items: stretch; } .segmented { display: flex; flex: 1; min-width: 0; gap: 3px; padding: 3px; background: var(--surface); border-radius: 11px; } .seg-btn { flex: 1; min-width: 0; border: 0; border-radius: 8px; padding: 8px 6px; cursor: pointer; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .seg-btn.is-active { background: var(--accent); color: var(--accent-text); } .ads-sort { flex: 0 0 auto; border: 0; background: var(--surface); color: var(--text); border-radius: 11px; padding: 0 10px; font: inherit; font-size: 13.5px; } .ads-list { display: flex; flex-direction: column; gap: 8px; } .ad-item { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .ad-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .ad-name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; min-width: 0; } .ad-spend { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; } .ad-sub { color: var(--muted); font-size: 12px; margin-top: -2px; overflow-wrap: anywhere; } .ad-meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; } .ads-footnote { margin: 0; } .chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 650; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); } .chip.is-good { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); } .chip.is-bad { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); } .chip.is-accent { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .chip.is-wb { background: color-mix(in srgb, var(--wb) 15%, transparent); color: var(--wb); } /* Подсветка по цели ДРР: полоса слева и лёгкая заливка - видно при прокрутке, не читая цифры. Появляется только после того, как цель установлена. */ .ad-item.is-over, .kpi.is-over { box-shadow: inset 4px 0 0 var(--negative); background: color-mix(in srgb, var(--negative) 6%, var(--surface)); } .ad-item.is-ok, .kpi.is-ok { box-shadow: inset 4px 0 0 var(--positive); background: color-mix(in srgb, var(--positive) 6%, var(--surface)); } .target-card { display: flex; flex-direction: column; gap: 10px; } .target-card.is-set { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } .target-row { display: flex; align-items: center; gap: 8px; } .target-input { width: 112px; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; } .target-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .target-row .btn { margin-left: auto; } .target-status { margin: 0; } .target-status.is-done { color: var(--positive); } .target-status.is-error { color: var(--negative); } .ads-filter .seg-btn.filter-over.is-active { --pill: var(--negative); color: #fff; } .ads-filter .seg-btn.filter-ok.is-active { --pill: var(--positive); color: #fff; } /* -- раздел «Финансы» и налог ------------------------------------------- */ /* Строка вкладок раздела нижнего меню: кнопки по ширине текста, прокрутка вбок. */ /* Закреплена под шапкой на каждой вкладке (просьба владельца 16.09.2026): фон полосы закрывает то, что уезжает под строку при прокрутке. */ .section-nav { padding: 10px 14px 8px; position: sticky; top: var(--topbar-h); z-index: 15; background: var(--bg); } .periods { padding-top: 3px; } .screen > .sticky-nav { position: sticky; top: var(--topbar-h); z-index: 15; background: var(--bg); margin: -14px -14px 0; padding: 10px 14px 8px; } /* Шесть вкладок «Продаж» по-русски помещаются на телефоне в 390px целиком: без этого последняя уходила за край. На длинных языках строка прокручивается. */ .section-nav .segmented.products-nav { gap: 1px; } .section-nav .products-nav .seg-btn { padding: 8px 6px; } /* Барабан вкладок (16.09.2026, правка владельца): объёмная строка, прокрутку показывают только тени - глубокая тень встаёт у того края, за которым есть ещё вкладки. Текст и плашка ровные. Цвета теней заданы отдельно для светлых и тёмных схем: на тёмном фоне затемнения не видно, объём там дают блик и чёрная глубина. */ :root { --wheel-top: rgba(255, 255, 255, 1); --wheel-bottom: rgba(30, 38, 52, 0.1); --wheel-rim-light: rgba(255, 255, 255, 1); --wheel-rim-dark: rgba(30, 38, 52, 0.16); --wheel-drop: rgba(30, 38, 52, 0.16); --wheel-edge: rgba(22, 28, 40, 0.34); --wheel-glint: rgba(255, 255, 255, 0); --wheel-hint-bg: rgba(20, 22, 26, 0.9); --wheel-hint-text: #ffffff; } @media (prefers-color-scheme: dark) { :root { --wheel-top: rgba(255, 255, 255, 0.1); --wheel-bottom: rgba(0, 0, 0, 0.42); --wheel-rim-light: rgba(255, 255, 255, 0.16); --wheel-rim-dark: rgba(0, 0, 0, 0.6); --wheel-drop: rgba(0, 0, 0, 0.6); --wheel-edge: rgba(0, 0, 0, 0.95); --wheel-glint: rgba(255, 255, 255, 0.13); --wheel-hint-bg: rgba(238, 242, 246, 0.94); --wheel-hint-text: #111418; } } :root[data-scheme="light"], :root[data-palette="paper"] { --wheel-top: rgba(255, 255, 255, 1); --wheel-bottom: rgba(30, 38, 52, 0.1); --wheel-rim-light: rgba(255, 255, 255, 1); --wheel-rim-dark: rgba(30, 38, 52, 0.16); --wheel-drop: rgba(30, 38, 52, 0.16); --wheel-edge: rgba(22, 28, 40, 0.34); --wheel-glint: rgba(255, 255, 255, 0); --wheel-hint-bg: rgba(20, 22, 26, 0.9); --wheel-hint-text: #ffffff; } :root[data-scheme="dark"], :root[data-palette="sand-dark"], :root[data-palette="graphite"] { --wheel-top: rgba(255, 255, 255, 0.1); --wheel-bottom: rgba(0, 0, 0, 0.42); --wheel-rim-light: rgba(255, 255, 255, 0.16); --wheel-rim-dark: rgba(0, 0, 0, 0.6); --wheel-drop: rgba(0, 0, 0, 0.6); --wheel-edge: rgba(0, 0, 0, 0.95); --wheel-glint: rgba(255, 255, 255, 0.13); --wheel-hint-bg: rgba(238, 242, 246, 0.94); --wheel-hint-text: #111418; } :root[data-palette="sand"] { --wheel-top: rgba(255, 252, 245, 1); --wheel-bottom: rgba(74, 52, 30, 0.12); --wheel-rim-light: rgba(255, 252, 245, 1); --wheel-rim-dark: rgba(74, 52, 30, 0.2); --wheel-drop: rgba(74, 52, 30, 0.2); --wheel-edge: rgba(74, 52, 30, 0.4); --wheel-glint: rgba(255, 255, 255, 0); --wheel-hint-bg: rgba(58, 49, 40, 0.92); --wheel-hint-text: #FAF4EA; } :root[data-palette="sand-dark"] { --wheel-top: rgba(255, 236, 210, 0.1); --wheel-rim-light: rgba(255, 236, 210, 0.16); --wheel-glint: rgba(255, 236, 210, 0.13); } .wheel { position: relative; border-radius: 11px; isolation: isolate; /* Объём цилиндра: блик сверху, тень снизу, светлый и тёмный кант, тень под строкой. */ background: linear-gradient(180deg, var(--wheel-top) 0%, transparent 42%, transparent 58%, var(--wheel-bottom) 100%), var(--surface); box-shadow: inset 0 1px 0 var(--wheel-rim-light), inset 0 -1px 0 var(--wheel-rim-dark), 0 2px 5px var(--wheel-drop); } /* Глубокая тень края: видна только там, куда ещё можно крутить. */ .wheel::before, .wheel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 72px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.2s ease; } .wheel::before { left: 0; border-radius: 11px 0 0 11px; background: linear-gradient(90deg, var(--wheel-edge) 0, color-mix(in srgb, var(--wheel-edge) 60%, transparent) 20%, color-mix(in srgb, var(--wheel-edge) 22%, transparent) 42%, var(--wheel-glint) 66%, transparent 100%); } .wheel::after { right: 0; border-radius: 0 11px 11px 0; background: linear-gradient(270deg, var(--wheel-edge) 0, color-mix(in srgb, var(--wheel-edge) 60%, transparent) 20%, color-mix(in srgb, var(--wheel-edge) 22%, transparent) 42%, var(--wheel-glint) 66%, transparent 100%); } .wheel.can-left::before, .wheel.can-right::after { opacity: 1; } /* Двойной класс: общее .segmented с фоном стоит выше, фон даёт сам барабан. */ .wheel .segmented.products-nav { background: transparent; position: relative; } .wheel-hint { position: absolute; right: 10px; top: 50%; z-index: 3; transform: translateY(-50%); font-size: 11px; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--wheel-hint-bg); color: var(--wheel-hint-text); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .wheel-hint::after { content: " \203A"; } .wheel.is-peeking .wheel-hint { opacity: 1; } @media (prefers-reduced-motion: reduce) { .wheel::before, .wheel::after, .wheel-hint { transition: none; } } /* Свайп вкладок: новая вкладка въезжает с той стороны, куда вёл палец. transform живёт только 180 мс и стоит на экране, внутри которого панели sticky, а не fixed. */ @keyframes swipe-from-right { from { transform: translateX(28px); opacity: 0.55; } } @keyframes swipe-from-left { from { transform: translateX(-28px); opacity: 0.55; } } .swipe-next { animation: swipe-from-right 180ms ease-out; } .swipe-prev { animation: swipe-from-left 180ms ease-out; } @media (prefers-reduced-motion: reduce) { .swipe-next, .swipe-prev { animation: none; } } .tax-body { display: flex; flex-direction: column; gap: var(--gap); } .tax-card { display: flex; flex-direction: column; gap: 8px; } .tax-card.is-due { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } .tax-big { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .tax-formula { margin: -2px 0 2px; } .rate-label { color: var(--muted); font-size: 13.5px; } .progress { height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; } .progress > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); } .tax-lines { display: flex; flex-direction: column; } .tax-chart { position: relative; margin-top: 4px; } .tax-svg { height: 150px; touch-action: pan-y; } .tax-area { fill: var(--accent); opacity: 0.14; } .tax-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .tax-proj { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; } .tax-end { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; } .tax-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; } .tax-cross { stroke: var(--muted); stroke-width: 1; opacity: 0.5; } .tax-label { fill: var(--text); font-weight: 600; } .tax-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); white-space: nowrap; background: var(--text); color: var(--surface); font-size: 12px; font-variant-numeric: tabular-nums; padding: 5px 8px; border-radius: 8px; pointer-events: none; } .mini-stats.is-two { grid-template-columns: repeat(2, 1fr); } .ads-alert.is-urgent { color: var(--negative); font-weight: 600; } .loading-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; padding: 18px 4px; } .loading-line .boot-spinner { width: 18px; height: 18px; border-width: 2px; flex: 0 0 auto; } /* -- отзывы и вопросы ----------------------------------------------------- */ .review-card .card-title { font-variant-numeric: normal; letter-spacing: 0.06em; color: var(--accent); } .review-text { font-size: 14px; line-height: 1.45; margin: 6px 0; overflow-wrap: anywhere; } .review-photos { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; } .review-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); } .review-answer { margin: 10px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2, rgba(127, 127, 127, 0.08)); border-left: 3px solid var(--accent); } .review-answer p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; } /* Крупная цифра в половинном виджете: столько отзывов ждут ответа. */ .big-value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 2px; } #screen-reviews textarea, .sheet-body textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical; min-height: 96px; } /* -- что открывает ключ продавца ------------------------------------------ */ .scope-list { margin: 2px 0 10px; padding-left: 18px; color: var(--muted); font-size: 12.5px; line-height: 1.5; } .scope-list b { color: var(--text); font-weight: 600; } .scope-check { margin: 2px 0 10px; } .scope-state { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; } .scope-state .is-on { color: var(--positive); } .scope-state .is-off { color: var(--negative); } .scope-warn { color: var(--negative); font-size: 12.5px; margin: 6px 0 0; } /* -- внешняя аналитика ---------------------------------------------------- */ .niche-form { align-items: center; gap: 8px; } .niche-input { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; } .niche-verdict { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; } .niche-verdict li { margin-bottom: 6px; } /* Название товара и цифры - друг под другом. В одну строку их ставить нельзя: на узком экране колонка с ценой не сжимается, и длинное название WB ломается по одной букве в столбик. */ .niche-row { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .niche-row:first-of-type { border-top: 0; } .niche-name { overflow-wrap: break-word; line-height: 1.4; } .niche-value { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; } .niche-ranges { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .niche-range { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .niche-range-label { width: 108px; color: var(--muted); font-variant-numeric: tabular-nums; } .niche-range-value { width: 28px; text-align: right; font-variant-numeric: tabular-nums; } .niche-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; } .niche-bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; } /* -- лента заказов -------------------------------------------------------- */ .order-row { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-top: 1px solid var(--line); } .order-row:first-of-type { border-top: 0; } .order-top { display: flex; align-items: baseline; gap: 10px; } .order-name { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; overflow-wrap: break-word; } .order-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .order-meta { color: var(--muted); font-size: 12px; overflow-wrap: break-word; } .order-chip { align-self: flex-start; margin-top: 2px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--line); color: var(--muted); } .order-chip.is-new { background: rgba(220, 78, 65, 0.14); color: var(--negative); } .order-chip.is-work { background: rgba(47, 111, 235, 0.14); color: var(--accent); } .order-chip.is-done { background: rgba(23, 134, 74, 0.14); color: var(--positive); } /* Остатки: товар на пороге - красная полоса слева и лёгкая заливка, как у рекламы выше цели. Плашка на сводке - тем же языком, чтобы читалась сразу. */ .stock-item.is-low { box-shadow: inset 4px 0 0 var(--negative); background: color-mix(in srgb, var(--negative) 6%, var(--surface)); } .stock-item .product-article { min-width: 0; overflow-wrap: break-word; } .stock-qty { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .stock-qty.down { color: var(--negative); } .stock-edit { align-self: flex-start; } .stock-toolbar { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; } .stock-search { width: 100%; } .stock-alert { display: flex; flex-direction: column; gap: 4px; box-shadow: inset 4px 0 0 var(--negative); background: color-mix(in srgb, var(--negative) 9%, var(--surface)); } .stock-alert .card-title, .insight-title.is-bad { color: var(--negative); } .stock-alert .hint { margin: 0; } /* Пустой виджет вне настройки не занимает клетку сводки. Классом, а не атрибутом hidden: у .widget свой display, и hidden он бы перебил. */ .widget.widget-quiet { display: none; } /* Виджет-переход: нажатие на карточку открывает свою вкладку. */ .widget-link { cursor: pointer; } .widget-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .returns-nav { margin-bottom: var(--gap); } .promos-nav { margin-bottom: var(--gap); } /* «Анализ → Рекомендации по карточкам»: фото слева, под ним цифры и список советов. Полоса слева у совета - важность: красная срочно, акцентная планово, серая по возможности. */ .advice-list { display: flex; flex-direction: column; gap: 8px; } .advice-top { display: flex; gap: 10px; align-items: flex-start; } .advice-photo { width: 54px; height: 72px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--bg); } .advice-about { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 0; } .advice-title { font-size: 13px; overflow-wrap: break-word; } .advice-facts { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; overflow-wrap: break-word; } .advice-problems { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .advice-problem { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 2px 10px; border-left: 3px solid var(--line); } .advice-problem.is-high { border-left-color: var(--negative); } .advice-problem.is-medium { border-left-color: var(--accent); } .advice-problem-title { font-weight: 650; font-size: 13.5px; } .advice-problem-text { font-size: 13px; overflow-wrap: break-word; } .advice-draft-text { white-space: pre-wrap; font: inherit; font-size: 12.5px; margin: 6px 0; overflow-wrap: break-word; } .advice-open { align-self: flex-start; margin-top: 4px; } .advice-more { display: flex; flex-direction: column; align-items: center; gap: 6px; } /* «Инфо → Оповещения»: строка = галочка в квадратике и описание. Вся строка - метка, поэтому тап по тексту тоже ставит галочку. */ .notify-card { display: flex; flex-direction: column; gap: 0; padding-top: 4px; padding-bottom: 4px; } .notify-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; } .notify-row + .notify-row { border-top: 1px solid var(--line); } .notify-row input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; } .notify-row.is-off { cursor: default; } .notify-row.is-off .notify-title, .notify-row.is-off .notify-text { color: var(--muted); } .notify-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 0; } .notify-title { font-weight: 650; font-size: 14.5px; } .notify-text { font-size: 13px; color: var(--muted); overflow-wrap: break-word; } .notify-note { font-size: 12.5px; color: var(--muted); } /* -- колокольчик и журнал оповещений ------------------------------------------ Число непрочитанных - красный кружок на углу колокольчика с обводкой цвета шапки, чтобы не сливался с линией значка. Непрочитанная запись - жирный заголовок и точка цвета акцента слева. */ .bell-btn { position: relative; } .bell-btn.has-unread { color: var(--text); } .bell-count { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--negative); color: #fff; box-shadow: 0 0 0 2px var(--surface); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; pointer-events: none; } .inbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .inbox-bar .hint { margin: 0; min-width: 0; } .inbox-read-all { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .inbox-read-all .line-icon { width: 16px; height: 16px; stroke-width: 2.4; } .inbox-list { display: flex; flex-direction: column; gap: 8px; } .inbox-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: var(--surface); border: 0; border-radius: var(--radius); padding: 12px 14px 12px 10px; color: var(--text); font: inherit; cursor: pointer; } .inbox-row:active { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .inbox-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .inbox-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; background: transparent; } .inbox-row.is-unread .inbox-dot { background: var(--accent); } .inbox-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 0; } .inbox-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); } .inbox-kind { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .inbox-when { white-space: nowrap; flex: 0 0 auto; } .inbox-title { font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; } .inbox-row.is-unread .inbox-title { font-weight: 700; } .inbox-lines { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; } .inbox-line { display: block; } .inbox-sheet-when { margin: 0 0 8px; } .inbox-sheet-lines { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; max-height: 55vh; overflow-y: auto; } .inbox-sheet-lines p { margin: 0; font-size: 14px; overflow-wrap: anywhere; } .notify-note.is-warn { color: var(--negative); } .returns-group.is-urgent { box-shadow: inset 4px 0 0 var(--negative); } .return-chip.is-ready { color: var(--negative); background: color-mix(in srgb, var(--negative) 12%, transparent); } .stock-alert-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } .stock-alert-kind { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--negative) 30%, transparent); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; } .stock-alert-kind:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .stock-alert-kind-name { font-weight: 600; } .stock-alert-kind-count { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--negative); } .big-value.is-bad { color: var(--negative); } .sheet-form { display: flex; flex-direction: column; gap: 10px; } /* -- «Инфо → Отчёты»: отчёты в бота по расписанию ------------------------- */ .schedule-card .card-head { align-items: center; } .schedule-when { margin: 6px 0 0; font-weight: 600; font-size: 15px; } .schedule-period { margin: 2px 0 6px; } .schedule-card .dim-small { margin: 2px 0; } .schedule-card .target-status { margin: 4px 0; font-size: 13px; } .schedule-card .btn-row { margin-top: 10px; } .schedule-card.is-off .schedule-when, .schedule-card.is-off .schedule-period { color: var(--muted); } .report-form .field-block, .report-form .field { margin-bottom: 0; } .report-form input[type="time"] { min-height: 42px; } /* -- «Продажи → Управление рекламой»: платный модуль ---------------------- */ .adsmanage-body { display: flex; flex-direction: column; gap: var(--gap); } .am-freshness { margin: 4px 0 0; } .am-picker { display: flex; flex-direction: column; gap: 6px; } /* WebKit на длинных названиях кампаний раздувал страницу на 1px вбок (замер на бою 15.09.2026): выпадающий список пересчитывал ширину не сразу. Карточка не отдаёт наружу то, что вылезает изнутри. */ .card.am-picker { overflow: hidden; } .am-select { width: 100%; max-width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 16px; } .am-select:disabled { opacity: 0.55; } .am-chips { display: flex; flex-wrap: wrap; gap: 6px; } .product.am-row, .product.am-cluster { border: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; width: 100%; } .am-row .product-top, .am-cluster .product-top { flex-wrap: wrap; } .am-row .product-article, .am-cluster .product-article { flex: 1 1 12em; min-width: 0; overflow-wrap: break-word; word-break: break-word; } .am-row .product-revenue, .am-cluster .product-revenue { margin-left: auto; } .am-cluster.is-excluded { box-shadow: inset 3px 0 0 var(--negative); } .am-cluster.is-excluded .product-article { color: var(--muted); } .am-cover { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; } .am-cover span { display: block; height: 100%; background: var(--wb); border-radius: 999px; } .am-toolbar { display: flex; flex-direction: column; gap: 8px; } .am-toolbar-row { display: flex; gap: 8px; align-items: stretch; } .am-search { flex: 1 1 auto; min-width: 0; } .am-group-chip { align-self: flex-start; border: 0; cursor: pointer; font: inherit; } .am-locked { display: flex; flex-direction: column; gap: 8px; box-shadow: inset 3px 0 0 var(--wb); } .am-locked .chip { align-self: flex-start; } .am-locked .btn { align-self: flex-start; } .am-features { margin: 2px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; line-height: 1.4; } .am-price { font-weight: 700; font-size: 17px; margin: 4px 0 0; } .am-minus-nav { margin: 4px 0 8px; } .am-phrase { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; } .am-phrase:first-child { border-top: 0; } .am-phrase input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); } .am-phrase-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .am-phrase-name { font-size: 14px; overflow-wrap: break-word; word-break: break-word; } /* Действия с отмеченными кластерами держатся над нижним меню, пока листается список. */ .am-actions { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14); } .am-actions .dim-small { flex: 1 0 100%; } .am-journal .bd-line { align-items: center; } .am-journal-side { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .am-change-list { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; color: var(--muted); overflow-wrap: break-word; } .am-bid { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); } .am-bid:first-child { border-top: 0; } .am-bid .target-row { flex-wrap: wrap; } .am-bid .target-input { width: 104px; } .am-bid .target-row .btn { margin-left: 0; } .am-bid-name { font-size: 14px; font-weight: 600; overflow-wrap: break-word; word-break: break-word; } .am-chart { width: 100%; height: auto; display: block; margin: 8px 0 2px; } .am-chart .am-line { fill: none; stroke: var(--accent); stroke-width: 2; } .am-chart .am-dot { fill: var(--accent); } .am-chart .am-grid { stroke: var(--line); stroke-width: 1; } .am-chart text { fill: var(--muted); font-size: 10px; } /* «Управление рекламой → Кампании» (15.09.2026). Правила в конце файла нарочно: общие .btn, .sheet input и .segmented стоят выше и не перебивают эти. */ .amc-list { display: flex; flex-direction: column; gap: var(--gap); } .amc-card .product-top { align-items: flex-start; gap: 8px; } .amc-name { font-weight: 600; font-size: 15px; min-width: 0; overflow-wrap: break-word; word-break: break-word; } .amc-status { flex: 0 0 auto; } .amc-budget { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; } .amc-budget-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; } .amc-budget-value.is-bad { color: var(--negative); } .amc-bids { flex: 1 1 auto; text-align: right; } .amc-autopay-note { margin: 4px 0 0; } .amc-autopay-note.is-on { color: var(--positive); } .amc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .amc-actions .btn { width: 100%; margin: 0; } /* Бюджет на карточке кампании (15.09.2026): галочки оповещения и автопополнения, ручное пополнение. Поля стоят на карточке, а не в окне: общие правила .sheet input их не красят. 16px - iOS не увеличивает страницу. */ .amc-budget-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .amc-budget-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .amc-check { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 12em; min-width: 0; min-height: 32px; font-size: 14px; cursor: pointer; } .amc-check input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); } .amc-inline-input, .amc-inline-select { min-width: 0; max-width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 16px; } .amc-inline-input { flex: 0 1 7.5em; width: 7.5em; } .amc-inline-select { flex: 1 1 8em; width: auto; } .amc-budget-box > .btn { align-self: flex-start; margin: 0; } .amc-manual .dim-small { flex: 1 0 100%; } .amc-manual .btn { margin: 0; } /* Перенос минус-фраз и ключи кластера (15.09.2026). */ .am-copy-open { margin-top: 8px; } .am-key { align-items: center; } .am-key .chip { flex: 0 0 auto; } .am-key.is-excluded .am-phrase-name { color: var(--muted); } div.am-phrase.am-key { cursor: default; } .am-keys #am-keys-restore, .am-keys .more-btn { margin-top: 8px; } .am-phrase-result { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* Автопополнение: цвета приложения, когда выключено, зелёная, когда включено (просьба владельца). */ .btn.amc-autopay { --pill: var(--accent); color: var(--accent-text); } .btn.amc-autopay.is-on { --pill: var(--positive); color: #fff; } .amc-switches { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; } .amc-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; min-height: 30px; } .amc-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; } .amc-switch-track { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 13px; background: var(--line); transition: background 0.15s; } .amc-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; } .amc-switch input:checked + .amc-switch-track { background: var(--accent); } .amc-switch input:checked + .amc-switch-track::after { transform: translateX(18px); } .amc-switch input:disabled + .amc-switch-track { opacity: 0.5; } .amc-switch input:focus-visible + .amc-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } .amc-alert-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .amc-alert-line .btn { flex: 0 0 auto; } .amc-sheet .amc-switch { margin-bottom: 10px; } .amc-bid-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .amc-bid-row .bd-line-name { flex: 1 1 auto; min-width: 0; } .sheet input.amc-bid-input { width: 96px; flex: 0 0 auto; } .amc-bid-all { display: flex; gap: 8px; margin: 10px 0 4px; } .amc-bid-all input { flex: 1 1 auto; min-width: 0; } .amc-sheet .mode-switch { margin-bottom: 8px; } .amc-product { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; } .amc-product-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .amc-product-name { font-size: 14px; overflow-wrap: break-word; word-break: break-word; } .amc-product-list { max-height: 42vh; overflow-y: auto; margin-bottom: 8px; } .amc-create input[type="search"] { width: 100%; margin-bottom: 6px; } /* -- мастер подключения нового пользователя (16.09.2026) --------------------- Слой поверх приложения, но под шторкой (z-index 40): окно сотрудника и увеличенный снимок открываются над ним. Своего display у .wizard нет - иначе атрибут hidden перестанет прятать слой и тот съест клики. */ .wizard { position: fixed; inset: 0; z-index: 30; background: var(--bg); color: var(--text); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(var(--safe-top) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 28px); } body.wizard-open { overflow: hidden; } .wizard-body { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .wz-head { display: flex; align-items: center; gap: 10px; min-height: 32px; } .wz-count { color: var(--muted); font-size: 12.5px; white-space: nowrap; } .wz-dots { display: flex; gap: 5px; flex: 1; min-width: 0; } .wz-dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); } .wz-dots i.is-done { background: var(--accent); } .wz-close { flex: 0 0 auto; } .wz-title { font-size: 22px; line-height: 1.25; margin: 4px 0 0; overflow-wrap: anywhere; } .wz-text { margin: 0; font-size: 15px; line-height: 1.5; } .wz-lead { margin: 2px 0 0; font-weight: 650; font-size: 15px; } .wz-plan { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; font-size: 15px; line-height: 1.45; } .wz-chip-paid { align-self: flex-start; } .wz-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .wz-actions .btn { width: 100%; min-height: 46px; font-size: 15.5px; justify-content: center; } .wz-shot { padding: 0; overflow: hidden; } .wz-image { display: block; width: 100%; padding: 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); background: #fff; cursor: zoom-in; } .wz-image img { display: block; width: 100%; height: auto; } .wz-steps { margin: 0; padding: 12px 14px 14px 36px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.45; } .wz-steps li::marker { color: #ff3b30; font-weight: 700; } .wz-note { margin: -4px 14px 14px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; background: color-mix(in srgb, var(--accent) 10%, transparent); } .wz-form { display: flex; flex-direction: column; } .wz-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .wz-label { font-weight: 650; font-size: 14.5px; } .wz-help { color: var(--muted); font-size: 12.5px; line-height: 1.4; } /* Строка «Напишите в поддержку» внизу каждого шага мастера и на первом экране настроек. */ .wz-support { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); } .wz-form input, .wz-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; } .wz-form textarea { resize: vertical; min-height: 84px; word-break: break-all; } .wz-form input:focus, .wz-form textarea:focus { outline: none; border-color: var(--accent); } .wz-paste { align-self: flex-start; margin: -6px 0 12px; } .wz-form .scope-check { margin: -4px 0 14px; } .wz-done .wz-cabinet { margin: 6px 0 0; font-size: 15px; } .wz-staff-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); } .wz-staff-row:last-child { border-bottom: 0; } .wz-staff-row span { color: var(--muted); font-size: 13px; } .wz-ads { display: flex; flex-direction: column; gap: 6px; } .wz-check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 12px auto 0; font-size: 34px; font-weight: 700; color: var(--accent-text); background: var(--positive); } .wz-zoom img { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; } .faq-wizard { align-self: flex-start; margin: 0 0 10px; } /* -- «Заказы → Сборка / Сверка» (17.09.2026) ------------------------------------ «Сборка» - задания WB только для просмотра, «Сверка» - наш учёт переданного. Всё на токенах схемы: галочка выбранная - тем же стеклом, что выбранные кнопки. */ .orders-nav, .inner-nav, .move-filter { flex: 0 0 auto; } #orders-body { display: flex; flex-direction: column; gap: var(--gap); } .inner-nav .seg-btn, .move-filter .seg-btn { font-size: 13px; padding: 7px 4px; } /* Фильтры журнала и движения - по ширине подписи, лишнее прокручивается вбок, а не режется многоточием. */ .move-filter { overflow-x: auto; scrollbar-width: none; } .move-filter::-webkit-scrollbar { display: none; } .move-filter .seg-btn { flex: 1 0 auto; padding: 7px 9px; text-overflow: clip; } .ro-note { margin: 4px 0 2px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); } .btn-block { width: 100%; } .hint.center { text-align: center; margin-top: -4px; } .recon-weeks .seg-btn { flex: 0 0 auto; padding: 8px 10px; } .wheel:has(.recon-weeks) { overflow-x: auto; scrollbar-width: none; } .rc-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); } .rc-row:first-child { border-top: 0; padding-top: 2px; } .rc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rc-main .chip { align-self: flex-start; margin-top: 3px; font-size: 11.5px; white-space: normal; } .rc-action { align-self: flex-start; margin: 2px 0 0 -8px; } .rc-box { width: 24px; height: 24px; border-radius: 8px; margin-top: 1px; padding: 0; border: 0; cursor: pointer; position: relative; background: none; box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--muted) 70%, transparent); } .rc-box[disabled] { cursor: default; opacity: 0.55; } .rc-box.is-on { background: radial-gradient(120% 75% at 50% -8%, rgb(255 255 255 / calc(0.22 + 0.3 * var(--glass))) 0%, rgb(255 255 255 / 0) 62%), var(--accent); box-shadow: inset 0 1px 0.5px rgb(255 255 255 / 0.6), inset 0 -1px 1px rgb(0 0 0 / 0.15), 0 3px 9px -3px color-mix(in srgb, var(--accent) 60%, transparent); } .rc-box.is-on::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid var(--accent-text); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); } .rc-box:focus-visible, .mv-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rc-row.is-off .order-name, .rc-row.is-off .order-price { text-decoration: line-through; color: var(--muted); } .mv-row { display: flex; flex-direction: column; gap: 5px; padding: 11px 0; border-top: 1px solid var(--line); } .mv-row:first-child { border-top: 0; padding-top: 2px; } .mv-row .btn-row { margin: 4px 0 0; } .mv-open { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; } .mv-path { display: flex; flex-wrap: wrap; gap: 4px; } .mv-path span { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--line); color: var(--muted); } .mv-path .is-done { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .mv-path .is-now { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); } .mv-path .is-good { background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive); } .mv-path .is-bad { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); } .lg-group { color: var(--muted); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; margin: 12px 0 2px; } .lg-group:first-child { margin-top: 2px; } .card > .lg-group:nth-child(2) { margin-top: 8px; } .lg-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .lg-row > span:first-child { min-width: 0; overflow-wrap: anywhere; } .lg-row > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 550; } .lg-row.is-strong { font-weight: 650; } .lg-row.is-muted { color: var(--muted); } .lg-row.is-bad > span:last-child { color: var(--negative); } .lg-row.is-good > span:last-child { color: var(--positive); } .lg-row.is-total { font-size: 16px; font-weight: 700; border-top: 1.5px solid var(--text); margin-top: 4px; padding-top: 9px; } .lg-row.is-total > span:last-child { color: var(--positive); font-weight: 700; } .lg-row.is-total.is-negative > span:last-child { color: var(--negative); } .lg-actor { display: block; color: var(--muted); font-size: 11.5px; } .lg-box { margin-top: 10px; } .cmp { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 14px; margin: 10px 0 2px; font-size: 13.5px; font-variant-numeric: tabular-nums; } .cmp span:nth-child(3n+2), .cmp span:nth-child(3n) { text-align: right; } .cmp .cmp-h { color: var(--muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; } .cmp .is-bad { color: var(--negative); font-weight: 650; } .tl { display: flex; flex-direction: column; margin: 2px 0 4px; } .tl-step { position: relative; display: flex; flex-direction: column; padding: 0 0 12px 22px; } .tl-step::before { content: ""; position: absolute; left: 4px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .tl-step::after { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1.5px; background: var(--line); } .tl-step:last-child::after { display: none; } .tl-step.is-good::before { background: var(--positive); } .tl-step.is-bad::before { background: var(--negative); } .tl-step b { font-size: 14px; font-weight: 650; } .tl-step span { color: var(--muted); font-size: 12.5px; } .recon-candidates { display: flex; flex-direction: column; margin: 4px 0 8px; max-height: 260px; overflow-y: auto; } .recon-candidate { display: flex; justify-content: space-between; gap: 10px; text-align: left; } /* -- жидкое стекло: кнопки и выбранные элементы (16.09.2026) --------------- Одна рецептура для кнопок действий и всего, что заливается цветом при выборе. Цвет - --pill: акцент у синих кнопок и выборов, нейтральный у тёмных кнопок, свой у фильтров и автопополнения. Стекло (--glass 0-1, ползунок в настройках): прозрачнее заливка, блик-линза сверху, отражённый свет снизу, светлый край сверху-слева и тёмный снизу-справа, как у толстого стекла. Размытие фона только у выборов: у кнопок в длинных списках под ними сплошная карточка, а десятки размытий тормозят прокрутку на телефоне. Блок стоит в конце файла: у тех же селекторов выше заданы плоские заливки. Тёмные кнопки через :where() - иначе их длинный селектор сильнее .btn.btn-primary и синие кнопки становились тёмными. */ :root { --pill-neutral: color-mix(in srgb, var(--text) 9%, var(--surface)); } .btn:where(:not(.btn-ghost, .btn-danger, .btn-quiet)) { --pill: var(--pill-neutral); --pill-glow: rgb(0 0 0 / 0.22); } .btn.btn-primary, .btn.amc-autopay, .seg-btn.is-active, .chart-compare.is-active, .facet-chip.is-on, .amc-switch input:checked + .amc-switch-track, .nt-check:checked + .nt-box, .rp-day.is-start, .rp-day.is-end { --pill: var(--accent); --pill-glow: color-mix(in srgb, var(--accent) 60%, transparent); } .ads-filter .seg-btn.filter-over.is-active { --pill: var(--negative); --pill-glow: color-mix(in srgb, var(--negative) 60%, transparent); } .ads-filter .seg-btn.filter-ok.is-active, .btn.amc-autopay.is-on { --pill: var(--positive); --pill-glow: color-mix(in srgb, var(--positive) 60%, transparent); } /* Необратимое действие в окне подтверждения: то же стекло, но красное. */ .btn.btn-primary.btn-destroy { --pill: var(--negative); --pill-glow: color-mix(in srgb, var(--negative) 60%, transparent); color: #ffffff; } .btn:where(:not(.btn-ghost, .btn-danger, .btn-quiet)), .seg-btn.is-active, .chart-compare.is-active, .facet-chip.is-on, .amc-switch input:checked + .amc-switch-track, .nt-check:checked + .nt-box, .rp-day.is-start, .rp-day.is-end { background: var(--pill); background: radial-gradient(120% 75% at 50% -8%, rgb(255 255 255 / calc(0.22 + 0.3 * var(--glass))) 0%, rgb(255 255 255 / calc(0.04 + 0.08 * var(--glass))) 55%, rgb(255 255 255 / 0) 62%), radial-gradient(95% 60% at 50% 118%, rgb(255 255 255 / calc(0.04 + 0.22 * var(--glass))) 0%, rgb(255 255 255 / 0) 70%), linear-gradient(180deg, rgb(255 255 255 / 0) 55%, rgb(0 0 0 / calc(0.06 + 0.06 * var(--glass))) 100%), color-mix(in srgb, var(--pill) calc(100% - 44% * var(--glass)), transparent); border-color: transparent; box-shadow: inset 0 1px 0.5px rgb(255 255 255 / calc(0.35 + 0.45 * var(--glass))), inset 1px 0 0.5px rgb(255 255 255 / calc(0.08 + 0.22 * var(--glass))), inset 0 -1px 1px rgb(0 0 0 / calc(0.1 + 0.1 * var(--glass))), inset -1px 0 0.5px rgb(0 0 0 / calc(0.04 + 0.08 * var(--glass))), inset 0 0 0 0.5px rgb(255 255 255 / calc(0.1 + 0.35 * var(--glass))), 0 4px 12px -3px var(--pill-glow), 0 1px 2px rgb(0 0 0 / 0.16); text-shadow: 0 1px 2px rgb(0 0 0 / calc(0.14 + 0.26 * var(--glass))); } .btn:where(:not(.btn-ghost, .btn-danger, .btn-quiet)) { text-shadow: 0 1px 1px rgb(0 0 0 / calc(0.06 + 0.14 * var(--glass))); } .btn.btn-primary, .btn.amc-autopay { text-shadow: 0 1px 2px rgb(0 0 0 / calc(0.14 + 0.26 * var(--glass))); } .btn:where(:not(.btn-ghost, .btn-danger, .btn-quiet)):active { transform: translateY(1px) scale(0.985); filter: brightness(0.97); } .btn[disabled]:active { transform: none; filter: none; } .seg-btn.is-active, .chart-compare.is-active, .facet-chip.is-on { -webkit-backdrop-filter: blur(calc(4px + 16px * var(--glass))) saturate(calc(1.1 + 0.9 * var(--glass))); backdrop-filter: blur(calc(4px + 16px * var(--glass))) saturate(calc(1.1 + 0.9 * var(--glass))); } .sheet .field .facet-chip.is-on span { text-shadow: none; } @media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } } /* У «Графита» и «Песочной тёмной» текст на заливке тёмный - на стекле он тонет. */ :root[data-palette="graphite"] :is(.seg-btn.is-active, .chart-compare.is-active, .btn.btn-primary, .btn.amc-autopay), :root[data-palette="sand-dark"] :is(.seg-btn.is-active, .chart-compare.is-active, .btn.btn-primary, .btn.amc-autopay) { color: #ffffff; text-shadow: 0 1px 2px rgb(0 0 0 / calc(0.35 + 0.25 * var(--glass))); } /* Выбор-рамка (тема, роль сотрудника): стеклянная подложка и мягкое свечение. */ .theme-card.is-active, .role-option.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) calc(7% + 9% * var(--glass)), transparent); box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 0 rgb(255 255 255 / calc(0.25 + 0.35 * var(--glass))), 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); } /* Нижнее меню: активный раздел в стеклянной капле. Отступы поменяны местами с внутренними, чтобы высота меню не изменилась. */ .tab.is-active { margin: 3px 4px; padding: 5px 2px 6px; border-radius: 14px; background: radial-gradient(120% 70% at 50% -10%, rgb(255 255 255 / calc(0.16 + 0.26 * var(--glass))), rgb(255 255 255 / 0) 62%), radial-gradient(90% 55% at 50% 120%, rgb(255 255 255 / calc(0.03 + 0.16 * var(--glass))), rgb(255 255 255 / 0) 70%), color-mix(in srgb, var(--accent) calc(8% + 8% * var(--glass)), transparent); box-shadow: inset 0 1px 0.5px rgb(255 255 255 / calc(0.3 + 0.45 * var(--glass))), inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 -1px 1px rgb(0 0 0 / calc(0.05 + 0.08 * var(--glass))), 0 4px 12px -6px color-mix(in srgb, var(--accent) 60%, transparent); -webkit-backdrop-filter: blur(calc(6px * var(--glass))) saturate(calc(1 + 0.6 * var(--glass))); backdrop-filter: blur(calc(6px * var(--glass))) saturate(calc(1 + 0.6 * var(--glass))); } /* Ползунок стекла в настройках. */ .glass-setting { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .glass-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .glass-head label { font-size: 14px; font-weight: 600; } .glass-head output { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .glass-setting .hint { margin: 0; } .glass-preview { flex: 0 0 auto; background: var(--bg); } .glass-preview .seg-btn { cursor: default; } #glass-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; --fill: calc(var(--glass) * 100%); } #glass-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) 0 var(--fill), color-mix(in srgb, var(--muted) 28%, transparent) var(--fill) 100%); } #glass-range::-moz-range-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 28%, transparent); } #glass-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); } #glass-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: linear-gradient(180deg, #ffffff, #eef1f5); border: 0.5px solid rgb(0 0 0 / 0.08); box-shadow: 0 2px 6px rgb(0 0 0 / 0.22), inset 0 1px 0 #ffffff; } #glass-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 0.5px solid rgb(0 0 0 / 0.08); background: linear-gradient(180deg, #ffffff, #eef1f5); box-shadow: 0 2px 6px rgb(0 0 0 / 0.22); } #glass-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* -- настройки: сворачиваемые блоки (17.09.2026) ------------------------------ Вся шапка блока - одна кнопка: значок, название, итог строкой и стрелка в кружке. Тело прячется атрибутом hidden - правило ниже держит его выше любого display. */ .card.acc { padding: 0; overflow: hidden; } .acc-head { width: 100%; border: 0; background: none; font: inherit; color: var(--text); text-align: left; display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .acc-head:active { background: color-mix(in srgb, var(--muted) 8%, transparent); } .acc-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); } .acc-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .acc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .acc-title { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .acc-sum { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-sum:empty { display: none; } .acc-arrow { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); color: var(--muted); display: grid; place-items: center; transition: transform 0.2s ease; } .acc-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .acc.is-open .acc-arrow { transform: rotate(180deg); color: var(--accent); } .acc-body { padding: 0 14px 14px; border-top: 1px solid var(--line); } .acc-body[hidden], #hidden-cabinets-card[hidden] { display: none !important; } .acc-body > .hint:first-child { margin-top: 12px; } .acc-sub { font-size: 13px; font-weight: 650; color: var(--muted); margin: 16px 0 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .acc-body > .acc-sub:first-child { margin-top: 14px; } .acc-subtitle { font-size: 14px; font-weight: 650; margin: 16px 0 0; } .acc-subtitle + .hint { margin-top: 3px; } .acc-body .cabinets + #hidden-cabinets-card .acc-sub { margin-top: 18px; } .bonus { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive); } .bonus-note { margin: 12px 0 4px; padding: 10px 12px; border-radius: 11px; font-size: 13px; line-height: 1.4; background: color-mix(in srgb, var(--positive) 11%, transparent); color: var(--text); display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; } .bonus-note b { color: var(--positive); } .bonus-note svg { width: 20px; height: 20px; fill: none; stroke: var(--positive); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .guide { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12.5px; margin: 0 0 4px; padding: 10px 12px; border-radius: 11px; background: var(--bg); } .guide dt { font-weight: 650; color: var(--text); } .guide dd { margin: 0; color: var(--muted); } .guide .guide-foot { grid-column: 1 / -1; color: var(--text); font-weight: 600; margin-top: 2px; } .staff-row + .staff-row { margin-top: 8px; } .app-version { text-align: center; color: var(--muted); font-size: 12.5px; margin: 0 0 6px; font-variant-numeric: tabular-nums; } /* -- карточка сотрудника: роль, рекомендация и права в два столбца ------------- */ .staff-select { font-weight: 600; } .role-advice { margin: 0 0 12px; padding: 10px 12px; border-radius: 11px; font-size: 12.5px; line-height: 1.45; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); display: flex; flex-direction: column; gap: 4px; } .role-advice[hidden], .perm-block[hidden] { display: none !important; } .role-advice b { font-size: 13px; } .role-advice .dim { color: var(--muted); } .perm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px; } .perm-head .btn-ghost { font-size: 12.5px; padding: 2px 0; } .perm-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .perm-col { border: 1px solid var(--line); border-radius: 11px; padding: 8px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .perm-col h4 { margin: 0 0 4px; font-size: 12px; color: var(--muted); font-weight: 650; } .perm { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px; align-items: start; padding: 5px 0; font-size: 12.5px; line-height: 1.3; cursor: pointer; } .sheet .perm input[type="checkbox"] { margin: 0; } .perm.is-locked { cursor: default; } .perm small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; } .perm.is-idle > span { color: var(--muted); } .rec-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--positive); margin-left: 4px; vertical-align: middle; } .perm-legend { font-size: 11.5px; color: var(--muted); margin: 6px 0 12px; display: flex; align-items: center; gap: 5px; } .perm-legend .rec-dot { margin: 0; } .perm-changed { font-size: 12px; color: var(--muted); margin: -4px 0 12px; } .perm-changed b { color: var(--text); } /* Платный модуль в карточке сотрудника (21.09.2026): отдельная строка с ползунком, а не галочка в общем ряду - доступ даёт владелец, а оплачивает модуль он же. */ .perm-module { border: 1px solid var(--line); border-radius: 11px; padding: 9px 10px; margin: 0 0 13px; } .perm-module[hidden] { display: none !important; } .perm-module-head { margin-bottom: 6px; } .perm-module .amc-switch { font-size: 13px; } .perm-module-note { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.35; } .owner-only { font-size: 12px; color: var(--muted); margin: 10px 0 0; } /* Системный вид списка в WebKit узкий и без отступов - рисуем поле как остальные, стрелка своя. */ .sheet select.staff-select { -webkit-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px 15px; } /* Окно оплаты ЮKassa (17.09.2026): переключатель режима и галочка оферты. */ .pay-options .pay-mode { margin: 4px 0 8px; } .pay-consent { border-top: 1px solid var(--line); margin-top: 8px; } .pay-consent .pay-offer { align-self: flex-start; margin-top: 6px; padding-left: 0; } .pay-consent .notify-body { display: flex; flex-direction: column; } .pay-email { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; } .pay-email.is-error input { border-color: var(--negative); } /* -- Реферальная система, инфлюенсеры, суперадмин и кабинет партнёра (17.09.2026) -------------- Перенесено из утверждённых макетов docs/referral/mock.css, только токены приложения. */ .ref-rule { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; } .ref-rule > div { border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--positive) 11%, transparent); } .ref-rule b { display: block; font-size: 22px; color: var(--positive); font-variant-numeric: tabular-nums; line-height: 1.15; } .ref-rule span { font-size: 12px; color: var(--text); line-height: 1.35; display: block; margin-top: 2px; } .ref-link { margin: 12px 0 0; display: grid; gap: 8px; } .ref-link code { display: block; padding: 10px 12px; border-radius: 11px; background: var(--bg); font: 600 13px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); overflow-wrap: anywhere; } .ref-link .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ref-link .row .btn { width: 100%; } .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .stat { border-radius: 11px; background: var(--bg); padding: 9px 10px; } .stat b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1.2; } .stat span { font-size: 11.5px; color: var(--muted); line-height: 1.25; display: block; } .stat.is-good b { color: var(--positive); } .stat.is-accent b { color: var(--accent); } .ref-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 7px; } .ref-row + .ref-row { margin-top: 8px; } .ref-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ref-top .name { font-weight: 650; font-size: 14px; } .ref-top .when { font-size: 12px; color: var(--muted); white-space: nowrap; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .steps i { height: 4px; border-radius: 3px; background: var(--line); display: block; } .steps i.on { background: var(--positive); } .steps i.wait { background: color-mix(in srgb, var(--accent) 55%, transparent); } .steps i.bad { background: var(--negative); } .steps-label { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 10.5px; color: var(--muted); margin-top: -3px; } .ref-days { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; } .ref-days .left { color: var(--muted); } .ref-days b { font-variant-numeric: tabular-nums; } .ref-bar { height: 6px; border-radius: 4px; background: var(--bg); overflow: hidden; } .ref-bar > i { display: block; height: 100%; background: var(--positive); border-radius: 4px; } .timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; } .timeline li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 13px; padding-bottom: 12px; position: relative; } .timeline li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--positive); margin-top: 5px; } .timeline li::after { content: ""; position: absolute; left: 4px; top: 17px; bottom: 0; width: 2px; background: var(--line); } .timeline li:last-child::after { display: none; } .timeline li.wait::before { background: var(--accent); } .timeline li.next::before { background: var(--line); } .timeline small { display: block; color: var(--muted); font-size: 11.5px; } .gift-note { margin: 10px 0 4px; padding: 10px 12px; border-radius: 11px; font-size: 13px; line-height: 1.4; background: color-mix(in srgb, var(--positive) 11%, transparent); color: var(--text); } .gift-note b { color: var(--positive); } .muted-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; } .mini-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; } .mini-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px; padding: 4px 4px 6px; border-bottom: 1px solid var(--line); } .mini-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: top; } .mini-table td.r, .mini-table th.r { text-align: right; } .mini-table tr.total td { font-weight: 700; border-bottom: 0; } .admin-badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--negative) 13%, transparent); color: var(--negative); } .ref-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .ref-btns .btn { width: 100%; } .req { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12.5px; margin: 8px 0 0; } .req dt { color: var(--muted); } .req dd { margin: 0; text-align: right; overflow-wrap: anywhere; } .inner-nav { margin: 0 0 10px; } .mini-table .sm { color: var(--muted); font-size: 10.5px; font-weight: 400; } .card .field input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 11px; background: var(--bg); color: var(--text); font: 600 14px/1.3 inherit; font-family: inherit; } .ref-row { width: 100%; font: inherit; color: var(--text); text-align: left; background: none; } button.ref-row { cursor: pointer; } button.ref-row:active, .ref-list-row:active { background: color-mix(in srgb, var(--accent) 8%, transparent); } .ref-list-row { width: 100%; font: inherit; color: var(--text); text-align: left; cursor: pointer; } .ref-list-row + .ref-list-row { margin-top: 8px; } .ref-filter { margin: 10px 0 12px; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .btn-inline { padding: 2px 0; font-size: 12px; } .receipt-photo { width: 100%; height: auto; border-radius: 12px; display: block; margin-bottom: 10px; } .ref-inbox { margin-bottom: 10px; } .partner-erid { margin: 10px 0 0; } #ref-nav { margin-bottom: 10px; } /* Договор с партнёром: главное коротко и зона ответственности в кабинете партнёра (17.09.2026). */ .partner-duty-card { margin: 12px 0 4px; padding: 10px 12px; border-radius: 11px; background: color-mix(in srgb, var(--negative) 9%, transparent); font-size: 13px; line-height: 1.4; } .partner-duty-card > b { color: var(--negative); display: block; margin-bottom: 4px; } .partner-duties { margin: 0; padding-left: 18px; display: grid; gap: 4px; } .legal-doc .subhead { margin: 16px 0 2px; } .legal-p { font-size: 13.5px; line-height: 1.45; margin: 6px 0 0; overflow-wrap: anywhere; } /* -- оповещения по разделам (17.09.2026) --------------------------------------- Колокольчик: строка вкладок разделов листается вбок и растворяется у правого края, число на вкладке - непрочитанные раздела. Настройки: разделы группами, у вида две галочки - «Приложение» и «Telegram». Включённая галочка - синее стекло, та же рецептура, что у кнопок (блок жидкого стекла выше). Блок в конце файла: общие .segmented и .seg-btn выше не перебивают эти правила. */ .inbox-tabs-wrap { position: relative; } .inbox-tabs-wrap[hidden] { display: none !important; } .segmented.inbox-tabs { flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 14px; margin-bottom: -8px; background: transparent; border-radius: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } .segmented.inbox-tabs::-webkit-scrollbar { display: none; } .inbox-tabs .seg-btn { flex: 0 0 auto; overflow: visible; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; } .inbox-tabs .seg-btn:not(.is-active) { background: var(--surface); color: var(--text); } /* Размытие фона внутри прокручиваемой строки с маской рисует квадратный ореол вокруг пилюли: у вкладок колокольчика стекло без размытия, под ними всё равно однотонный фон. */ .inbox-tabs .seg-btn.is-active { color: var(--accent-text); -webkit-backdrop-filter: none; backdrop-filter: none; } .inbox-tabs .seg-btn:last-child { margin-right: 28px; } .tab-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; background: var(--negative); color: #fff; text-shadow: none; } .seg-btn.is-active .tab-count { background: rgb(255 255 255 / 0.28); } .inbox-kind-chip { display: inline-flex; align-items: center; gap: 5px; } .inbox-kind-chip i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--c, var(--muted)); } .inbox-off { padding: 10px 12px; border-radius: 11px; font-size: 13px; line-height: 1.4; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; } .inbox-off svg { width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .inbox-off b { font-weight: 650; } .link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--link); cursor: pointer; } .nt-quick { display: flex; gap: 8px; margin: 12px 0 2px; } .nt-quick .btn { flex: 1 1 0; } .nt-cols, .nt-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 64px; gap: 0 4px; } .nt-cols { align-items: end; font-size: 10.5px; font-weight: 650; color: var(--muted); text-align: center; white-space: nowrap; margin: 14px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--line); } .nt-cols span:first-child { text-align: left; font-size: 12.5px; } .nt-group { margin-top: 12px; } .nt-group-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 2px; } .nt-group-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--muted)); } .nt-group-head small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); } .nt-row { align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); } .nt-group .nt-row:last-child { border-bottom: 0; } .nt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .nt-title { font-size: 14px; font-weight: 650; line-height: 1.3; } .nt-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; overflow-wrap: break-word; } .nt-note { font-size: 12px; color: var(--muted); } .nt-note.is-warn { color: var(--negative); } .nt-cell { position: relative; display: grid; place-items: center; min-height: 34px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nt-check { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; } .nt-box { position: relative; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1.7px color-mix(in srgb, var(--muted) 70%, transparent); transition: transform 0.12s ease; } .nt-cell:active .nt-box { transform: scale(0.94); } .nt-check:checked + .nt-box::after { content: ""; position: absolute; left: 9.5px; top: 5px; width: 6px; height: 12px; border: solid var(--accent-text); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25)); } .nt-check:focus-visible + .nt-box { outline: 2px solid var(--accent); outline-offset: 2px; } .nt-check:disabled + .nt-box { cursor: default; } .nt-check:disabled:not(.is-lock) + .nt-box { opacity: 0.55; } /* Ключ продавца в приложении: галочка закреплена - серое стекло без выбора. */ .nt-check.is-lock:checked + .nt-box { --pill: var(--muted); --pill-glow: transparent; opacity: 0.6; } .nt-night { margin-top: 14px; padding: 10px 12px; border-radius: 11px; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 8px; align-items: center; } .nt-legend { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; } /* -- выбор периода «с даты по дату» (18.09.2026) -------------------------------- Два поля-кнопки и календарь приложения под ними. Поле, для которого открыт календарь, обведено акцентом. Начало и конец периода - синее стекло, как у кнопок (рецептура в блоке жидкого стекла выше), дни между ними - лёгкая заливка. */ .rp { margin: 4px 0 12px; } .rp .rp-fields { margin: 0; align-items: stretch; } .rp-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 11px; padding: 8px 10px; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .rp-field .rp-label { color: var(--muted); font-size: 12px; } .rp-field .rp-value { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-field.is-empty .rp-value { color: var(--muted); font-weight: 500; } .rp-field.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .rp-field:disabled { cursor: default; opacity: 0.7; } .rp-cal { margin-top: 10px; padding: 10px 8px 8px; border-radius: 14px; background: var(--bg); } .rp-cal[hidden] { display: none !important; } .rp-hint { margin: 0 4px 6px; font-size: 13px; font-weight: 600; color: var(--accent); } .rp-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; } .rp-month { font-size: 15px; font-weight: 650; } .rp-nav { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; } .rp-nav:disabled { opacity: 0.35; cursor: default; } .rp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px 0; } .rp-weekday { text-align: center; font-size: 11.5px; color: var(--muted); padding: 2px 0 4px; } .rp-day { height: 38px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; border-radius: 10px; cursor: pointer; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; } .rp-day.is-today { font-weight: 700; color: var(--accent); } .rp-day.is-in { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 0; } .rp-day.is-start, .rp-day.is-end { color: var(--accent-text); font-weight: 700; } .rp-day:disabled { color: color-mix(in srgb, var(--muted) 55%, transparent); cursor: default; } .rp-day:not(:disabled):active { transform: scale(0.94); }