/* ТОКЕНЫ (цвета, шрифт, радиусы, тени, поверхности обеих тем) живут в ui.css — единственном источнике оформления. Здесь только раскладка и детали pulse. */ *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} /* плавный переход светлой/тёмной темы: анимируем ТОЛЬКО цветовые свойства (не layout/transform), поэтому дерево «Креативов» не дёргается. Элементы со своим transition (кнопки, чипы) сохраняют его — у них выше специфичность. */ @media (prefers-reduced-motion: no-preference){ *,*::before,*::after{ transition-property: background-color, border-color, color, fill, stroke, box-shadow; transition-duration: .28s; transition-timing-function: ease; } } body{ font-family:var(--font); background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased; overflow:hidden; } /* ambient light: убран — спокойный фон, акцент на данных */ body::before{display:none} svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--paper) 10%, transparent);border-radius:var(--r-sm)} ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--paper) 18%, transparent)} ::-webkit-scrollbar-track{background:transparent} .app{position:relative;z-index:1;display:grid;grid-template-columns:250px 1fr;height:100vh} .hidden{display:none !important} /* ============ SIDEBAR ============ */ .sidebar{ display:flex;flex-direction:column;gap:26px;padding:22px 16px; border-right:1px solid var(--stroke); background: var(--sidebar-bg); backdrop-filter:blur(20px); } .logo{display:flex;align-items:center;gap:12px;padding:4px 6px} .logo-mark{ width:40px;height:40px;flex:none;border-radius:var(--r-md);padding:9px; color:var(--brand);background:var(--brand-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--paper) 6%, transparent); } .logo-text b{display:block;font-size:16px;letter-spacing:-.3px} .logo-text span{font-size:10.5px;color:var(--txt-3);letter-spacing:.2px;line-height:1.32;display:block} .brand-badge{ display:inline-block;background:var(--brand);color:var(--brand-ink); font-size:9.5px;font-weight:800;letter-spacing:.14em; padding:2.5px 7px;border-radius:var(--r-sm);vertical-align:2px;margin-left:6px; } .nav{display:flex;flex-direction:column;gap:3px} .nav-item{ display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md); color:var(--txt-2);font-size:13.5px;font-weight:500;cursor:pointer; transition:.18s;user-select:none; } .nav-item svg{width:17px;height:17px;flex:none;opacity:.75} .nav-item:hover{background:var(--panel);color:var(--txt)} .nav-item.active{ background: var(--nav-active-bg); color: var(--nav-active-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c1) 35%, transparent); } .nav-item.active svg{opacity:1;color:var(--c1)} /* кнопка сворачивания меню + свёрнутое состояние */ .nav-collapse{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md); color:var(--txt-3);font-size:12.5px;font-weight:500;cursor:pointer;background:transparent; border:1px solid var(--stroke);width:100%;transition:.15s;margin-top:auto} .nav-collapse:hover{background:var(--panel);color:var(--txt)} .nav-collapse svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s} .app.nav-collapsed{grid-template-columns:74px 1fr} .nav-collapsed .sidebar{padding:22px 12px;gap:18px} .nav-collapsed .logo-text,.nav-collapsed .nav-item span,.nav-collapsed .nav-collapse span, .nav-collapsed .nav-label,.nav-collapsed .sync-card{display:none} .nav-collapsed .nav-item,.nav-collapsed .nav-collapse{justify-content:center;padding:10px} .nav-collapsed .logo{justify-content:center;padding:4px 0} .nav-collapsed .nav-collapse svg{transform:rotate(180deg)} .sync-card{ margin-top:0;padding:13px;border-radius:var(--r-md); background:var(--panel);border:1px solid var(--stroke); } .sync-row{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500} .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)} .dot.err{background:var(--bad);animation:none} @keyframes pulse{70%{box-shadow:0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent)}} .sync-time{font-size:11px;color:var(--txt-3);margin:5px 0 9px} .sync-src{display:flex;gap:6px} .src{ flex:1;text-align:center;font-size:10px;padding:4px;border-radius:var(--r-sm); background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok);border:1px solid color-mix(in srgb, var(--ok) 22%, transparent); } .src.mock{background:color-mix(in srgb, var(--warn) 12%, transparent);color:var(--warn);border-color:color-mix(in srgb, var(--warn) 25%, transparent)} .src.err{background:color-mix(in srgb, var(--bad) 12%, transparent);color:var(--bad);border-color:color-mix(in srgb, var(--bad) 25%, transparent)} /* ============ TOPBAR ============ */ .main{display:flex;flex-direction:column;min-width:0;overflow:hidden} /* Контролов много (5 пресетов + даты + 2 фильтра): на узком экране они должны переноситься на вторую строку, а не сплющивать заголовок в колонку. */ .topbar{ display:flex;justify-content:space-between;align-items:center; gap:16px;row-gap:12px;flex-wrap:wrap; padding:16px 26px;border-bottom:1px solid var(--stroke); background:color-mix(in srgb, var(--bg) 55%, transparent);backdrop-filter:blur(18px); /* backdrop-filter создаёт контекст наложения: без своего z-index топбар рисуется под .scroll, и поповер дат просвечивает сквозь карточки */ position:relative;z-index:20; } .topbar-title{flex:1 1 240px;min-width:0} .topbar h1{font-size:20px;font-weight:650;letter-spacing:-.4px;white-space:nowrap} .crumb{ font-size:12.5px;color:var(--txt-3);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end} /* кнопки каналов Meta / TikTok (клик — только он, ещё клик — все) */ .ch-seg{display:flex;gap:5px;flex:none} .ch-btn{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:var(--r-md); background:var(--panel);border:1px solid var(--stroke);color:var(--txt-2); font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:.14s} .ch-btn svg{width:15px;height:15px;flex:none;opacity:.75} .ch-btn:hover{background:var(--panel-2);color:var(--txt)} .ch-btn.on{color:var(--on-accent);border-color:transparent;box-shadow:0 3px 12px -2px color-mix(in srgb, var(--shadow-ink) 40%, transparent)} .ch-btn.on svg{opacity:1} .ch-btn[data-ch="meta"].on{background:var(--brand-meta)} .ch-btn[data-ch="tiktok"].on{background:linear-gradient(120deg,var(--brand-tiktok-a),var(--brand-tiktok-b))} .btn-primary:hover{filter:brightness(1.08);background:var(--primary-bg)} /* ---- выбор произвольного периода ---- */ .picker-wrap{position:relative} .picker-btn{display:flex;align-items:center;gap:7px;white-space:nowrap} .picker-btn svg{width:14px;height:14px;flex:none;color:var(--txt-3)} .picker-btn.on{background:color-mix(in srgb, var(--c1) 18%, transparent);border-color:color-mix(in srgb, var(--c1) 45%, transparent);color:var(--on-accent)} .picker-btn.on svg{color:var(--c1)} .picker{ position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:290px; background:linear-gradient(180deg,var(--bg-2),var(--bg)); border:1px solid var(--stroke-2);border-radius:var(--r-lg);padding:14px; box-shadow:0 24px 60px color-mix(in srgb, var(--shadow-ink) 70%, transparent); opacity:0;pointer-events:none;transform:translateY(-6px);transition:.18s; } .picker.on{opacity:1;pointer-events:auto;transform:translateY(0)} .picker-row{display:flex;gap:9px;margin-bottom:11px} .picker-row label{flex:1;font-size:11px;color:var(--txt-3);font-weight:600} .picker-row input{ display:block;width:100%;margin-top:5px;padding:8px 9px;font:inherit;font-size:12.5px; background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r-md);color:var(--txt); color-scheme:dark; } .picker-row input:focus{outline:none;border-color:color-mix(in srgb, var(--c1) 60%, transparent)} /* «Прошлый месяц» не влезает в треть ширины — раскладываем сеткой в 2 строки */ .picker-quick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px} .picker-quick button{ background:var(--panel);border:1px solid var(--stroke);color:var(--txt-2); font:inherit;font-size:11.5px;padding:7px 8px;border-radius:var(--r-md);cursor:pointer;white-space:nowrap; } .picker-quick button:last-child{grid-column:1 / -1} .picker-quick button:hover{background:var(--panel-2);color:var(--txt)} .picker-foot{display:flex;align-items:center;justify-content:space-between;gap:8px} .picker-actions{display:flex;align-items:center;gap:7px;flex:none} #pickerHint{font-size:11px;color:var(--txt-3);flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* обе кнопки: явные цвета, читаемы в тёмной и светлой теме, не обрезаются */ #pickerReset{flex:none;width:auto;height:auto;padding:7px 12px;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer; background:var(--panel);border:1px solid var(--stroke);color:var(--txt-2);border-radius:var(--r-md);transition:.12s} #pickerReset:hover{background:var(--panel-2);color:var(--txt);border-color:var(--stroke-2)} #pickerApply{flex:none;padding:7px 15px;font-size:12px;white-space:nowrap;color: var(--primary-fg)} #pickerApply:disabled{opacity:.45;cursor:not-allowed} /* ---- календарь-диапазон ---- */ .picker{width:300px} .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px} .cal-title{font-size:12.5px;font-weight:700;color:var(--txt);text-transform:capitalize;letter-spacing:.01em} .cal-nav{width:28px;height:28px;display:flex;align-items:center;justify-content:center; background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r-md);color:var(--txt-2); font-size:16px;line-height:1;cursor:pointer;transition:.12s} .cal-nav:hover{background:var(--panel-2);color:var(--txt)} .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px} .cal-dow span{text-align:center;font-size:10px;font-weight:600;color:var(--txt-3);padding:2px 0} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:12px} .cal-d{aspect-ratio:1;display:flex;align-items:center;justify-content:center; background:transparent;border:1px solid transparent;border-radius:var(--r-md); font:inherit;font-size:12px;color:var(--txt-2);cursor:pointer;transition:background .1s,color .1s;position:relative} .cal-d:hover:not(:disabled):not(.cal-sel){background:var(--panel-2);color:var(--txt)} .cal-out{color:var(--txt-3);opacity:.4;pointer-events:none} .cal-fut{color:var(--txt-3);opacity:.3;cursor:not-allowed} .cal-today{font-weight:700;box-shadow:inset 0 0 0 1px var(--stroke-2)} .cal-in{background:color-mix(in srgb, var(--c1) 14%, transparent);border-radius:0;color:var(--txt)} .cal-sel{background:var(--primary-bg)!important;color:var(--primary-fg)!important;font-weight:700;box-shadow:0 2px 8px color-mix(in srgb, var(--primary-bg) 40%, transparent)} .cal-start{border-top-right-radius:0;border-bottom-right-radius:0} .cal-end{border-top-left-radius:0;border-bottom-left-radius:0} /* «мостики», чтобы заливка диапазона была непрерывной от края ячейки */ .cal-in + .cal-in{margin-left:-2px;padding-left:2px} .cal-start{margin-right:-2px;padding-right:2px} .cal-end{margin-left:-2px;padding-left:2px} .chip-wa.on{background:color-mix(in srgb, var(--wa) 18%, transparent);border-color:color-mix(in srgb, var(--wa) 45%, transparent)} .wa-cell{color:var(--wa);font-weight:600} .wa-zero{color:var(--txt-3)} /* ============ LAYOUT ============ */ .scroll{flex:1;overflow-y:auto;padding:22px 26px 40px} .view{display:flex;flex-direction:column;gap:18px} @keyframes rise{from{opacity:0;transform:translateY(8px)}} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:1200px){.grid-2{grid-template-columns:1fr}} .legend{display:flex;gap:12px;font-size:11px;color:var(--txt-2);flex:none} .legend span{display:flex;align-items:center;gap:5px} .legend i{width:9px;height:9px;border-radius:3px;display:inline-block} .chart{width:100%;height:250px;position:relative} .donut-wrap{height:250px} /* Запрос к Meta за месяц идёт десятки секунд — без индикатора экран всё это время выглядит сломанным. */ .loadbar{position:relative;height:2px;background:color-mix(in srgb, var(--paper) 6%, transparent);overflow:hidden;flex:none} .loadbar i{ position:absolute;top:0;left:0;height:100%;width:40%;border-radius:2px; background:linear-gradient(90deg,transparent,var(--c1),var(--c5),transparent); animation:slide-bar 1.1s ease-in-out infinite; } @keyframes slide-bar{from{transform:translateX(-100%)}to{transform:translateX(350%)}} .skeleton{ border-radius:var(--r-lg);border:1px solid var(--stroke);height:104px; background:linear-gradient(90deg,color-mix(in srgb, var(--paper) 3%, transparent),color-mix(in srgb, var(--paper) 7%, transparent),color-mix(in srgb, var(--paper) 3%, transparent)); background-size:200% 100%;animation:shimmer 1.3s linear infinite; } @keyframes shimmer{to{background-position:-200% 0}} /* баннер «нет данных за период» */ .banner{ display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-lg); background:linear-gradient(90deg,color-mix(in srgb, var(--warn) 13%, transparent),color-mix(in srgb, var(--warn) 3%, transparent)); border:1px solid color-mix(in srgb, var(--warn) 28%, transparent); } .banner-err{ background:linear-gradient(90deg,color-mix(in srgb, var(--bad) 14%, transparent),color-mix(in srgb, var(--bad) 3%, transparent)); border-color:color-mix(in srgb, var(--bad) 32%, transparent); } .banner-ico{font-size:22px;flex:none} .banner b{font-size:13.5px;font-weight:600;color:var(--txt)} .banner p{font-size:12.5px;color:var(--txt-2);margin-top:3px;line-height:1.45} /* заглушка вместо графика, для которого нет данных */ .chart-empty{ height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;text-align:center;padding:20px; border:1px dashed var(--stroke-2);border-radius:var(--r-md);background:color-mix(in srgb, var(--paper) 2%, transparent); } .chart-empty b{font-size:13px;font-weight:600;color:var(--txt-2)} .chart-empty span{font-size:11.5px;color:var(--txt-3);max-width:280px} /* ============ TABLE ============ */ .table-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .search{ position:relative;flex:1;min-width:240px;display:flex;align-items:center;gap:9px; background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r-md);padding:0 13px; } .search:focus-within{border-color:color-mix(in srgb, var(--c1) 55%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--c1) 13%, transparent)} .search svg{width:15px;height:15px;flex:none;color:var(--txt-3)} .search input{flex:1;background:none;border:0;outline:none;color:var(--txt);font:inherit;font-size:13px;padding:10px 0} .search input::placeholder{color:var(--txt-3)} .tbl th.sortable{cursor:pointer;user-select:none} .tbl th.sortable:hover{color:var(--txt)} .tbl th.sorted{color:var(--c1)} .tbl th.sorted::after{content:" ↓";font-size:10px} .tbl th.sorted.asc::after{content:" ↑"} .tbl tbody tr{border-bottom:1px solid color-mix(in srgb, var(--paper) 5%, transparent);cursor:pointer;transition:.13s} .tbl tbody tr:hover{background:color-mix(in srgb, var(--c1) 7%, transparent)} .tbl td{padding:12px 14px;font-variant-numeric:tabular-nums;color:var(--txt-2);white-space:nowrap} .tbl td.num{color:var(--txt)} /* ширина первой ячейки идёт от переменной столбца --col-name-w (см. ресайз ниже); 28px = левый+правый padding td (.tbl td{padding:12px 14px}) при box-sizing:border-box */ .ad-cell{display:flex;align-items:center;gap:11px;width:calc(var(--col-name-w,270px) - 28px);min-width:0;overflow:hidden} .thumb{ width:42px;height:42px;flex:none;border-radius:var(--r-md);display:grid;place-items:center; font-size:15px;border:1px solid var(--stroke); } .ad-name{font-weight:550;color:var(--txt);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .ad-meta{font-size:11px;color:var(--txt-3);margin-top:2px;display:flex;align-items:center;gap:6px} .roas-pill{font-weight:650;padding:3px 8px;border-radius:var(--r-sm);font-size:12px} .roas-pill.good{background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok)} .roas-pill.mid{background:color-mix(in srgb, var(--warn) 14%, transparent);color:var(--warn)} .roas-pill.bad{background:color-mix(in srgb, var(--bad) 14%, transparent);color:var(--bad)} .spark{width:76px;height:26px;display:inline-block;vertical-align:middle} /* ============ FEED ============ */ .feed{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 230px);overflow-y:auto} .feed li{ display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-md); background:var(--panel);border:1px solid var(--stroke); } @keyframes slide{from{opacity:0;transform:translateX(-14px)}} .feed .ico{width:32px;height:32px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;font-size:14px} .feed .txt{flex:1;font-size:13px} .feed .txt b{color:var(--txt);font-weight:600} .feed .sub{font-size:11px;color:var(--txt-3);margin-top:2px} .feed .amt{font-size:13px;font-weight:650;color:var(--ok);font-variant-numeric:tabular-nums} .feed .ago{font-size:11px;color:var(--txt-3);flex:none} .pulse-badge{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--bad);letter-spacing:.6px} .pulse-badge i{width:7px;height:7px;border-radius:50%;background:var(--bad)} /* ============ DRAWER ============ */ .d-head{display:flex;gap:14px;align-items:center;margin-bottom:20px;padding-right:40px} .d-thumb{width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;font-size:22px;flex:none;border:1px solid var(--stroke)} .d-head h2{font-size:17px;font-weight:650;letter-spacing:-.3px;line-height:1.3} .d-head p{font-size:12px;color:var(--txt-3);margin-top:4px} .d-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px} .d-stat{padding:12px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--stroke)} .d-stat span{font-size:10.5px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.5px;font-weight:600} .d-stat b{display:block;font-size:17px;font-weight:650;margin-top:5px;font-variant-numeric:tabular-nums} .d-sec{font-size:12px;font-weight:650;color:var(--txt-2);text-transform:uppercase;letter-spacing:.6px;margin:20px 0 10px} .d-chart{height:180px} /* вкладки метрик над графиком в drawer */ .d-metric-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .d-metric-tabs button{background:var(--panel);border:1px solid var(--stroke);color:var(--txt-2); font:inherit;font-size:11.5px;padding:5px 10px;border-radius:var(--r-sm);cursor:pointer;transition:.12s} .d-metric-tabs button:hover{background:var(--panel-2);color:var(--txt)} .d-metric-tabs button.on{background:color-mix(in srgb, var(--c1) 18%, transparent);border-color:color-mix(in srgb, var(--c1) 50%, transparent);color:var(--on-accent)} /* кнопка «динамика по дням» в ячейке имени (кампании/группы) */ .ad-cell .ad-txt{flex:1 1 auto} .cr-graph{flex:none;width:22px;height:22px;display:grid;place-items:center;margin-left:6px; background:transparent;border:1px solid transparent;border-radius:var(--r-sm);color:var(--txt-3); cursor:pointer;opacity:.5;transition:opacity .12s,background .12s,color .12s,border-color .12s} .cr-graph svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .cr-tbl tr:hover .cr-graph{opacity:1} .cr-graph:hover{background:color-mix(in srgb, var(--c1) 16%, transparent);color:var(--c1);border-color:color-mix(in srgb, var(--c1) 40%, transparent)} .d-list{display:flex;flex-direction:column;gap:7px} .d-row{ display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px; border-radius:var(--r-md);background:var(--panel);border:1px solid var(--stroke);font-size:12.5px; } .d-row .l{color:var(--txt-2)} .d-row .r{font-weight:600;font-variant-numeric:tabular-nums} /* ============ CHART PRIMITIVES ============ */ /* Анимации через @keyframes, а не через rAF: если кадры не идут (вкладка неактивна), элемент остаётся в финальном состоянии, а не в нулевом. */ @keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes drawLine{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}} .bar-grow,.line-draw{animation:none} .axis{stroke:color-mix(in srgb, var(--paper) 7%, transparent);stroke-width:1} .axis-txt{fill:var(--txt-3);font-size:10px;stroke:none;font-family:var(--font)} .bar-lbl{fill:var(--txt-2);font-size:10.5px;stroke:none;font-family:var(--font)} .val-lbl{fill:var(--txt);font-size:11px;font-weight:600;stroke:none;font-family:var(--font)} .hit{fill:transparent;stroke:none;cursor:pointer} .chart-tip{ position:absolute;pointer-events:none;z-index:10;opacity:0;transition:opacity .12s; background:var(--tip-bg);border:1px solid var(--stroke-2);border-radius:var(--r-md); padding:8px 11px;font-size:11.5px;white-space:nowrap;box-shadow:0 10px 30px color-mix(in srgb, var(--shadow-ink) 60%, transparent); transform:translate(-50%,-115%); } .chart-tip b{display:block;margin-bottom:4px;font-size:11px;color:var(--txt-3);font-weight:600} .chart-tip .tr{display:flex;align-items:center;gap:6px;margin-top:2px} .chart-tip .tr i{width:7px;height:7px;border-radius:2px} /* квалифицированные заявки — ключевая метрика школы, выделяем */ .qual-cell{color:var(--ok);font-weight:600} /* ============ ПОЛИРОВКА ============ */ /* 16 колонок не влезают в экран: название объявления закрепляем слева, иначе при горизонтальной прокрутке непонятно, чья это строка */ .tbl th:first-child,.tbl td:first-child{ position:sticky;left:0;z-index:1; background:var(--sticky-col); box-shadow:6px 0 12px -6px color-mix(in srgb, var(--shadow-ink) 55%, transparent); } .tbl thead th:first-child{z-index:3;background:var(--th-bg)} .tbl tbody tr:hover td:first-child{background:var(--sticky-col-hover)} /* лёгкая зебра, чтобы глаз не терял строку на широкой таблице */ .tbl tbody tr:nth-child(even) td{background:var(--zebra)} .tbl tbody tr:nth-child(even) td:first-child{background:var(--sticky-col-even)} /* значение KPI — лёгкий градиент вместо плоского белого */ .kpi-val{ background:linear-gradient(180deg,var(--heading) 55%,var(--heading-2)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .kpi-off .kpi-val{background:none;-webkit-text-fill-color:var(--txt-3)} /* карточки чуть глубже и живее */ .card{transition:border-color .3s var(--ease), box-shadow .3s var(--ease)} .card:hover{border-color:color-mix(in srgb, var(--paper) 13%, transparent)} /* ── Плавность: единая мягкая кривая (ease-out, «как в macOS»), чтобы движения были плавными, а не резкими. Меняем только кривую — длительности как были. ── */ /* Высота полосы вкладок: ею же уменьшается .app, поэтому величина одна на всех. */ .nav-item,.nav-collapse,.btn,.btn-ghost,.btn-primary,.picker-btn,.chip,.seg button, .ch-btn,.ch-seg .ch-btn,.select,.kpi,.card,.theme-btn,.theme-btn svg,.switch span, .drawer,.picker,.crcols-pop,.frz-ctl button,.roas-pill,.badge,.nav-collapse svg{ transition-timing-function:var(--ease)} /* клавиатурный фокус — видимый, в цвет бренда */ button:focus-visible,.select:focus-visible,input:focus-visible,.nav-item:focus-visible{ outline:2px solid color-mix(in srgb, var(--focus) 65%, transparent);outline-offset:2px;border-radius:var(--r-md); } /* заголовок раздела — лёгкий градиент, единый стиль с KPI */ .topbar h1{ background:linear-gradient(90deg,var(--heading),var(--heading-2)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* донат: подпись в центре крупнее и мягче */ .donut-wrap svg text{letter-spacing:-.3px} /* плавный скролл к графику при клике на KPI */ .scroll{scroll-behavior:smooth} /* тонкая линия прогресса поверх топбара, а не под ним */ .loadbar{z-index:25} /* группировка креативов по группам/кампаниям */ .grp-row td{background:color-mix(in srgb, var(--c1) 5%, transparent)!important} .grp-row:hover td{background:color-mix(in srgb, var(--c1) 9%, transparent)!important} /* Первый столбец липкий (position:sticky), поэтому его фон обязан быть НЕПРОЗРАЧНЫМ: иначе при горизонтальной прокрутке цифры проезжают сквозь название группы/кампании и читаются как «прозрачное» имя. Кладём тот же фиолетовый оттенок поверх СПЛОШНОЙ подложки, а не полупрозрачным слоем — вид тот же, но ничего не просвечивает. */ .grp-row td:first-child{background:linear-gradient(color-mix(in srgb, var(--c1) 5%, transparent),color-mix(in srgb, var(--c1) 5%, transparent)),var(--sticky-col)!important} .grp-row:hover td:first-child{background:linear-gradient(color-mix(in srgb, var(--c1) 9%, transparent),color-mix(in srgb, var(--c1) 9%, transparent)),var(--sticky-col-hover)!important} .grp-row .ad-name{font-weight:650} /* ============ ЗАМОРОЗКА НЕСКОЛЬКИХ СТОЛБЦОВ (Google Sheets) ============ */ /* left задаётся из JS (накопительные ширины). Фон непрозрачный — иначе при скролле сквозь закреплённые колонки проезжает текст. Повторяем зебру/ховер/ группы для .frz так же, как для первого столбца. */ .cr-tbl th.frz,.cr-tbl td.frz{position:sticky;z-index:1;background:var(--sticky-col)} .cr-tbl thead th.frz{z-index:6;background:var(--th-bg)} .cr-tbl tbody tr:nth-child(even) td.frz{background:var(--sticky-col-even)} .cr-tbl tbody tr:hover td.frz{background:var(--sticky-col-hover)} .cr-tbl .grp-row td.frz{background:linear-gradient(color-mix(in srgb, var(--c1) 5%, transparent),color-mix(in srgb, var(--c1) 5%, transparent)),var(--sticky-col)!important} .cr-tbl .grp-row:hover td.frz{background:linear-gradient(color-mix(in srgb, var(--c1) 9%, transparent),color-mix(in srgb, var(--c1) 9%, transparent)),var(--sticky-col-hover)!important} .cr-tbl tfoot td.frz{background:var(--th-bg)} .cr-tbl tr.sel td.frz{background:var(--sticky-col-hover)} /* правая граница последнего закреплённого столбца — видно, где кончается «заморозка» */ .cr-tbl .frz-edge{box-shadow:inset -1px 0 0 var(--stroke-2),7px 0 13px -9px color-mix(in srgb, var(--shadow-ink) 55%, transparent)} /* контрол «❄ Закрепить N» */ .frz-ctl{display:flex;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--stroke); border-radius:var(--r-md);padding:3px 5px;font-size:11.5px;color:var(--txt-2)} .frz-ctl .frz-lbl{padding:0 4px;white-space:nowrap;color:var(--txt-3)} .frz-ctl button{width:20px;height:20px;display:grid;place-items:center;background:var(--panel-2); border:1px solid var(--stroke);border-radius:var(--r-sm);color:var(--txt-2);font-size:14px;line-height:1;cursor:pointer;transition:.12s} .frz-ctl button:hover{background:var(--primary-bg);color:var(--primary-fg);border-color:var(--primary-bg)} .frz-ctl b{min-width:14px;text-align:center;color:var(--txt);font-weight:650} /* ============ СВОДКА ПО КАБИНЕТАМ (Обзор) ============ */ .acct-card{margin-bottom:18px} .acct-card .table-scroll{max-height:none;overflow-x:auto} .acct-name{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--txt);white-space:nowrap} .acct-tbl tbody tr:hover td{background:color-mix(in srgb, var(--paper) 3%, transparent)} .acct-tbl tfoot td{font-weight:650;border-top:1px solid var(--stroke-2)} /* ============ СВОДНАЯ ПО ДНЯМ ============ */ .sum-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap} .sum-months{display:flex;gap:6px;flex-wrap:wrap} .sum-months button{background:var(--panel);border:1px solid var(--stroke);color:var(--txt-2); font:inherit;font-size:12.5px;padding:7px 14px;border-radius:var(--r-md);cursor:pointer;transition:.12s} .sum-months button:hover{background:var(--panel-2);color:var(--txt)} .sum-months button.on{background:color-mix(in srgb, var(--c1) 18%, transparent);border-color:color-mix(in srgb, var(--c1) 50%, transparent);color:var(--on-accent)} .sum-note{font-size:11px;color:var(--txt-3);max-width:420px;text-align:right} .sum-cols-wrap{margin-right:auto} .sum-cols-wrap .crcols-pop{left:0;right:auto} .sum-colrow .crcol-vis{padding:7px 9px;border-radius:var(--r-md)} .sum-colrow .crcol-vis:hover{background:var(--panel-2)} .sum-tbl th:first-child,.sum-tbl td:first-child{white-space:nowrap;text-align:left} .sum-tbl tbody tr:hover td{background:color-mix(in srgb, var(--paper) 3%, transparent)} .sum-tbl .sum-week td{background:color-mix(in srgb, var(--txt-3) 5%, transparent)!important;font-weight:600;border-top:1px solid var(--stroke)} .sum-tbl .sum-total td{background:var(--th-bg)!important;font-weight:700;font-size:13px} /* липкий первый столбец у итоговых строк — фон непрозрачный, иначе цифры просвечивают */ .sum-tbl .sum-week td:first-child{background:linear-gradient(color-mix(in srgb, var(--txt-3) 5%, transparent),color-mix(in srgb, var(--txt-3) 5%, transparent)),var(--sticky-col)!important} .sum-tbl .sum-total td:first-child{background:var(--th-bg)!important} .sum-tbl td.num,.sum-tbl th.num{min-width:64px} /* Вертикальная сводка менеджеров: метрики — строки, МОПы — колонки */ .mgr-tbl th.mgr-metric,.mgr-tbl td.mgr-metric{position:sticky;left:0;z-index:2;text-align:left;white-space:nowrap;background:var(--sticky-col,var(--panel));font-weight:550;color:var(--txt-2)} .mgr-tbl thead th.mgr-metric{z-index:3;background:var(--th-bg)} .mgr-tbl th.mgr-total,.mgr-tbl td.mgr-total{font-weight:650;color:var(--txt);border-right:2px solid var(--stroke)} .mgr-tbl tr.mgr-sec td{background:var(--th-bg);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3);padding:9px 12px 5px} .mgr-tbl td,.mgr-tbl th{white-space:nowrap} .mgr-tbl th.num,.mgr-tbl td.num{min-width:78px;text-align:right} .mgr-tabs{margin:0 0 12px} /* Менеджеры: вкладки и выбор показателей в одной строке (21.09.2026); на узком экране кнопки переносятся под вкладки */ .mgr-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 12px} .mgr-bar .mgr-tabs{margin:0} .mgr-bar .crcols-wrap{margin-left:auto} .mgr-yes{color:var(--ok);font-weight:600} .mgr-no{color:var(--txt-3)} .mgr-tbl td.mgr-lead{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--txt-2)} #levelSeg{flex:none} /* ============ РЕСАЙЗ ПЕРВОГО СТОЛБЦА «КРЕАТИВОВ» ============ */ /* Ширина всей колонки = одна CSS-переменная --col-name-w на . min/max пинят её в auto table-layout, чтобы содержимое не растягивало столбец. #colName уже position:sticky — этого хватает как containing block для грипа. */ #colName{ width:var(--col-name-w,270px); min-width:var(--col-name-w,270px); max-width:var(--col-name-w,270px); } .col-name-label{ display:inline-block;vertical-align:bottom; max-width:calc(var(--col-name-w,270px) - 44px); /* место грипу + стрелке сортировки */ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .col-resizer{ position:absolute;top:0;right:0;height:100%;width:12px;z-index:4; cursor:col-resize;user-select:none;touch-action:none; /* touch-action: тач тянет, а не скроллит */ } .col-resizer::before{ content:"";position:absolute;top:50%;right:5px;transform:translateY(-50%); height:34%;width:2px;border-radius:2px;background:var(--stroke-2); transition:background .15s,height .15s; } .col-resizer:hover::before,.col-resizer.dragging::before{background:var(--c1);height:60%} /* во время перетаскивания — курсор col-resize на всю страницу, без выделения */ body.col-resizing,body.col-resizing *{cursor:col-resize !important;user-select:none !important} /* вторая строка (кампания/группа) не должна распирать зафиксированный столбец */ .ad-cell>div:last-child{min-width:0;overflow:hidden} .ad-meta{overflow:hidden} .ad-meta>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* ============ ИТОГОВАЯ СТРОКА (закреплена снизу) ============ */ /* Сумма по ВИДИМЫМ строкам. Липнет к низу скролла так же, как thead к верху: position:sticky вешаем на ячейки, а не на (sticky на tr работает не везде). Фон непрозрачный — иначе строки tbody просвечивают сквозь итоги при прокрутке. */ .tbl tfoot td{ position:sticky;bottom:0;z-index:2; padding:13px 14px;white-space:nowrap; font-weight:650;color:var(--txt);font-variant-numeric:tabular-nums; background:var(--th-bg);border-top:2px solid var(--stroke); } /* Первая ячейка — угол «снизу+слева». Тот же приём, что у .grp-row: сплошная подложка #101219, чтобы цифры не проезжали под подписью «Итого» при прокрутке. */ .tbl tfoot td:first-child{ left:0;z-index:3;background:var(--sticky-col); box-shadow:6px 0 12px -6px color-mix(in srgb, var(--shadow-ink) 55%, transparent); } .tbl tfoot .foot-label{font-weight:700;color:var(--txt)} .tbl tfoot .foot-sub{color:var(--txt-3);font-weight:500} /* ============================================================ MOBILE — телефоны (<=640px): нижний таб-бар + контент на всю ширину. Идёт ПОСЛЕДНИМ, чтобы перебить и сетку 250px, и правило @media(max-width:900px) (иконочный рельс) по порядку в файле. ============================================================ */ /* --- совсем узкие телефоны (<=430px): KPI в 1 колонку --- */ /* ============================================================ СВЕТЛАЯ ТЕМА (data-theme="light" на ) Переопределяем токены + точечно поверхности, что заданы белыми оверлеями напрямую (на светлом фоне они были бы невидимы) и элементы с белым текстом на бледно-акцентной подложке (иначе не читаются). ============================================================ */ /* токены светлой темы — в ui.css */ /* свечения и градиенты выключены — плоские белые карточки с тонкой границей */ :root[data-theme="light"] .kpi::before{display:none} :root[data-theme="light"] .kpi{background:var(--panel)} :root[data-theme="light"] .kpi:hover{transform:none;border-color:var(--stroke-2);box-shadow:0 2px 4px color-mix(in srgb, var(--shadow-ink) 5%, transparent),0 14px 32px -22px color-mix(in srgb, var(--shadow-ink) 18%, transparent)} :root[data-theme="light"] .kpi-val{background:none;-webkit-text-fill-color:var(--heading);color:var(--heading)} :root[data-theme="light"] .kpi-off .kpi-val{-webkit-text-fill-color:var(--txt-3)} :root[data-theme="light"] .card:hover{border-color:var(--stroke-2)} /* каркас: белые поверхности, тонкие линии */ :root[data-theme="light"] .sidebar{background: var(--sidebar-bg);backdrop-filter:none} :root[data-theme="light"] .topbar{background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(10px)} :root[data-theme="light"] .drawer{background:var(--panel)} :root[data-theme="light"] .picker{background:var(--panel)} :root[data-theme="light"] .picker-row input{color-scheme:light} :root[data-theme="light"] ::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--ink) 16%, transparent)} :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--ink) 28%, transparent)} :root[data-theme="light"] .switch span{background:var(--overlay-soft)} :root[data-theme="light"] .badge.paused{background:color-mix(in srgb, var(--ink) 7%, transparent);color:var(--txt-3)} :root[data-theme="light"] .axis{stroke:color-mix(in srgb, var(--ink) 9%, transparent)} :root[data-theme="light"] .chart-empty{background:color-mix(in srgb, var(--ink) 2%, transparent)} :root[data-theme="light"] .skeleton{ background:linear-gradient(90deg,color-mix(in srgb, var(--ink) 4%, transparent),color-mix(in srgb, var(--ink) 8%, transparent),color-mix(in srgb, var(--ink) 4%, transparent)); background-size:200% 100%; } :root[data-theme="light"] .loadbar{background:color-mix(in srgb, var(--ink) 7%, transparent)} /* навигация: активный пункт — фирменный жёлтый NETTO */ :root[data-theme="light"] .nav-item.active{ color:var(--brand-ink); background: var(--nav-active-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 28%, transparent); } :root[data-theme="light"] .nav-item.active svg{color: var(--nav-active-fg)} :root[data-theme="light"] .nav-item:hover{background: var(--nav-hover)} /* сегменты и кнопки: белая карточка на серой дорожке (Linear/Vercel) */ :root[data-theme="light"] .seg{background:var(--panel-2);border-color:transparent} :root[data-theme="light"] .seg button.on{color:var(--txt);background: var(--seg-on-bg);box-shadow:0 1px 3px color-mix(in srgb, var(--shadow-ink) 12%, transparent),inset 0 0 0 1px var(--stroke)} :root[data-theme="light"] .select, :root[data-theme="light"] .btn, :root[data-theme="light"] .btn-ghost, :root[data-theme="light"] .chip, :root[data-theme="light"] .ch-btn{background:var(--panel);border-color:var(--stroke)} :root[data-theme="light"] .select:hover, :root[data-theme="light"] .btn:hover, :root[data-theme="light"] .btn-ghost:hover, :root[data-theme="light"] .ch-btn:hover{background:var(--bg);border-color:var(--stroke-2)} :root[data-theme="light"] .btn-primary{background: var(--primary-bg);color: var(--primary-fg)} :root[data-theme="light"] .btn-primary:hover{background: var(--primary-bg);filter:none} :root[data-theme="light"] .picker-btn.on{color:var(--c1);background:color-mix(in srgb, var(--c1) 10%, transparent);border-color:color-mix(in srgb, var(--c1) 25%, transparent)} :root[data-theme="light"] .chip:hover{background:var(--bg)} :root[data-theme="light"] .chip.on{color:var(--c1);background:color-mix(in srgb, var(--c1) 9%, transparent);border-color:color-mix(in srgb, var(--c1) 30%, transparent)} :root[data-theme="light"] .chip-wa.on{color:var(--wa);background:color-mix(in srgb, var(--ok) 10%, transparent);border-color:color-mix(in srgb, var(--ok) 30%, transparent)} :root[data-theme="light"] .ch-btn[data-ch="tiktok"].on{background:var(--brand-tiktok-ink);color:var(--paper)} :root[data-theme="light"] .kpi-active .kpi-label{color:var(--kc,var(--c1))} /* таблицы: спокойный ховер, чёткие линии */ :root[data-theme="light"] .tbl tbody tr{border-bottom:1px solid var(--stroke)} :root[data-theme="light"] .tbl tbody tr:hover{background:var(--sticky-col-hover)} :root[data-theme="light"] .spk-tbl tfoot td:first-child{box-shadow:6px 0 12px -6px color-mix(in srgb, var(--shadow-ink) 10%, transparent)} /* дельты и баннеры — приглушённые фирменные тона */ :root[data-theme="light"] .delta.up{color:var(--ok-fg);background:color-mix(in srgb, var(--ok) 10%, transparent)} :root[data-theme="light"] .delta.down{color:var(--bad-fg);background:color-mix(in srgb, var(--bad) 9%, transparent)} :root[data-theme="light"] .banner{background:linear-gradient(90deg,color-mix(in srgb, var(--brand) 16%, transparent),color-mix(in srgb, var(--brand) 4%, transparent));border-color:color-mix(in srgb, var(--warn) 35%, transparent)} :root[data-theme="light"] .banner-err{background:linear-gradient(90deg,color-mix(in srgb, var(--bad) 10%, transparent),color-mix(in srgb, var(--bad) 2%, transparent));border-color:color-mix(in srgb, var(--bad) 30%, transparent)} /* кнопка переключения темы */ .theme-btn svg{width:100%;height:100%} :root[data-theme="light"] .theme-btn .moon{display:none} :root:not([data-theme="light"]) .theme-btn .sun{display:none} /* ============ СПК 7 ============ */ .spk-meta{font-size:11.5px;color:var(--txt-3);margin-left:auto;align-self:center;text-align:right;line-height:1.4} .spk-tbl{font-size:12.5px} .spk-tbl thead th,.spk-tbl td{padding:10px 12px} .spk-tbl .ad-name{max-width:230px} .spk-basis{color:var(--txt-2)} /* строка итогов внизу — липкая, как в «Креативах» */ .spk-tbl tfoot td{position:sticky;bottom:0;z-index:2;background:var(--th-bg);border-top:2px solid var(--stroke);font-weight:650;color:var(--txt);white-space:nowrap} .spk-tbl tfoot td:first-child{left:0;z-index:3;background:var(--sticky-col);box-shadow:6px 0 12px -6px color-mix(in srgb, var(--shadow-ink) 55%, transparent)} /* раскраска ячеек по спецификации SPK7 (§10). Полупрозрачный фон + токен-цвет текста — читается в обеих темах. !important — чтобы зебра чётных строк (.tbl tr:nth-child(even) td, специфичнее) не перебивала цвет и он не пропадал «через раз». */ /* Тонировка задаётся через background-IMAGE (полупрозрачный слой поверх background-color ячейки). Так у закреплённых столбцов сохраняется НЕПРОЗРАЧНЫЙ фон (--sticky-col), и при горизонтальном скролле сквозь них ничего не «просвечивает». */ .spk-blue{background-image:linear-gradient(color-mix(in srgb, var(--c1) 15%, transparent),color-mix(in srgb, var(--c1) 15%, transparent))!important;color:var(--c5);font-weight:600} .spk-green{background-image:linear-gradient(color-mix(in srgb, var(--ok) 15%, transparent),color-mix(in srgb, var(--ok) 15%, transparent))!important;color:var(--ok);font-weight:600} .spk-yellow{background-image:linear-gradient(color-mix(in srgb, var(--warn) 16%, transparent),color-mix(in srgb, var(--warn) 16%, transparent))!important;color:var(--warn);font-weight:600} .spk-red{background-image:linear-gradient(color-mix(in srgb, var(--bad) 16%, transparent),color-mix(in srgb, var(--bad) 16%, transparent))!important;color:var(--bad);font-weight:600} .spk-grey{color:var(--txt-3)} /* ============ КРЕАТИВЫ — дерево + превью ============ */ #crMeta{margin-left:auto;align-self:center} .cr-grp{cursor:pointer} .tree-chev{display:inline-flex;align-items:center;justify-content:center;width:15px;flex:none;color:var(--txt-3);font-size:10px;transition:transform .15s,color .15s} .tree-chev.open{transform:rotate(90deg);color:var(--c1)} .tree-lead{display:inline-block;width:15px;flex:none} .ad-cell .ad-txt{min-width:0;overflow:hidden} /* превью объявления вместо эмодзи */ .thumb-img{overflow:hidden;padding:0} .thumb-img img{width:100%;height:100%;object-fit:cover;display:block} .thumb-empty{background:var(--panel-2)} .thumb-grp{background:var(--panel);color:var(--txt-3);font-size:15px} /* превью и вердикт в карточке (drawer) */ .d-thumb{overflow:hidden;color:var(--txt-3)} .d-thumb img{width:100%;height:100%;object-fit:cover} .d-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px} .d-action{font-size:11px;font-weight:700;padding:4px 9px;border-radius:var(--r-md)} .d-basis{font-size:12px;color:var(--txt-3)} /* выбор столбцов «Креативов» */ .crcols-wrap{position:relative} .crcols-pop{ position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:330px;max-width:88vw;max-height:72vh;overflow-y:auto; background:var(--bg-2);border:1px solid var(--stroke-2);border-radius:var(--r-lg);padding:14px; box-shadow:0 24px 60px color-mix(in srgb, var(--shadow-ink) 60%, transparent); opacity:0;pointer-events:none;transform:translateY(-6px);transition:.18s; } .crcols-pop.on{opacity:1;pointer-events:auto;transform:translateY(0)} .crcol-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--stroke)} .crcol-grp{margin-bottom:8px} .crcol-gname{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt-3);font-weight:700;margin:8px 0 4px} .crcol-item{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:var(--r-md);font-size:12.5px;color:var(--txt-2);cursor:pointer;user-select:none} .crcol-item:hover{background:var(--panel);color:var(--txt)} .crcol-item input{width:15px;height:15px;flex:none;accent-color:var(--c1);cursor:pointer} /* ============================================================ TABLE LAYOUT CONTROLS / 2026-08 ============================================================ */ .nav-icon{ position:relative;display:grid!important;place-items:center; width:17px;height:17px;flex:0 0 17px; } .nav-icon svg{width:100%!important;height:100%!important} .nav-icon .nav-live-dot{ position:absolute;top:-3px;right:-4px;width:5px;height:5px;margin:0; border:2px solid var(--bg);box-sizing:content-box; } .nav-collapsed .nav-item .nav-icon{display:grid!important} .crcols-wrap{display:flex;align-items:center;gap:6px} .frz-ctl{ min-height:34px;display:flex;align-items:center;gap:7px;padding:7px 10px; border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--panel); color:var(--txt-2);font:600 11.5px/1 var(--font);cursor:pointer; transition:background .18s,border-color .18s,color .18s; } .frz-ctl:hover{background:var(--panel-2);border-color:var(--stroke-2);color:var(--txt)} .frz-ctl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .frz-ctl .frz-lbl{padding:0;color:inherit} .frz-ctl b{min-width:18px;padding:3px 5px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--c1) 12%, transparent);color:var(--c1);font:650 10px/1 var(--font-mono)} .crcols-pop{left:auto;right:0;width:430px;max-height:min(72vh,680px);padding:0;overflow:hidden} .crcol-top{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 10px} .crcol-top b{display:block;color:var(--txt);font-size:13px} .crcol-top span{display:block;margin-top:2px;color:var(--txt-3);font-size:10.5px} .crcol-presets{margin:0;padding:0 16px 12px} .crcol-list{max-height:min(53vh,510px);overflow:auto;padding:5px 8px} .crcol-item{ position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto; gap:7px;min-height:42px;padding:5px 7px;border:1px solid transparent; cursor:default;transition:background .14s,border-color .14s,opacity .14s; } .crcol-item.is-pinned{background:color-mix(in srgb, var(--c1) 6%, transparent)} .crcol-item.is-hidden{opacity:.58} .crcol-item.dragging{opacity:.34} .crcol-item.drop-before::before,.crcol-item.drop-after::after{ content:"";position:absolute;left:7px;right:7px;height:2px;border-radius:2px;background:var(--c1); } .crcol-item.drop-before::before{top:-2px}.crcol-item.drop-after::after{bottom:-2px} .crcol-drag{ width:24px;height:28px;display:grid;place-items:center;align-self:center;padding:0; border:0;background:transparent;color:var(--txt-3);font:700 15px/1 var(--font-mono); cursor:grab;border-radius:var(--r-sm); } .crcol-drag:active{cursor:grabbing}.crcol-drag:hover{color:var(--txt);background:var(--panel-2)} .crcol-vis{display:flex;align-items:center;gap:9px;min-width:0;cursor:pointer} .crcol-vis>span{display:flex;align-items:baseline;gap:8px;min-width:0} .crcol-vis b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-2);font-weight:600} .crcol-vis small{flex:none;color:var(--txt-3);font-size:9px;text-transform:uppercase;letter-spacing:.04em} .crcol-actions{display:flex;align-items:center;gap:2px} .crcol-actions button{ width:25px;height:25px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-sm); background:transparent;color:var(--txt-3);font:600 11px/1 var(--font);cursor:pointer; } .crcol-actions button:hover:not(:disabled){background:var(--panel-2);color:var(--txt)} .crcol-actions button:disabled{opacity:.28;cursor:not-allowed} .crcol-pin svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .crcol-pin.on:not(:disabled){background:color-mix(in srgb, var(--c1) 14%, transparent);color:var(--c1)} .crcol-hint{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid var(--stroke);color:var(--txt-3);font-size:9.5px} .cr-tbl thead th{position:sticky} .cr-tbl thead th .col-drag{ display:inline-grid;width:16px;height:20px;margin:-3px 5px -3px -6px; vertical-align:middle;font-size:11px;opacity:0;transition:opacity .14s,color .14s; } .cr-tbl thead th:hover .col-drag,.cr-tbl thead th.col-dragging .col-drag{opacity:1} .cr-tbl thead th .col-drag.fixed{opacity:.18;cursor:default} .cr-tbl thead th.col-dragging{opacity:.46} .cr-tbl thead th.col-drop-before::before,.cr-tbl thead th.col-drop-after::after{ content:"";position:absolute;top:5px;bottom:5px;width:2px;border-radius:2px;background:var(--c1);z-index:8; } .cr-tbl thead th.col-drop-before::before{left:0}.cr-tbl thead th.col-drop-after::after{right:0} /* Итого остаётся снизу и повторяет горизонтальную фиксацию только выбранных колонок. Раздельные границы не дают закреплённым метрикам сливаться в блок. */ .cr-tbl tfoot td{background:var(--th-bg);box-shadow:none} .cr-tbl tfoot td.frz{ z-index:5;background:var(--th-bg);border-right:1px solid var(--stroke); } .cr-tbl tfoot td.frz:first-child{box-shadow:none} .cr-tbl tfoot td.frz-edge{ box-shadow:inset -1px 0 0 var(--stroke-2),8px 0 15px -10px color-mix(in srgb, var(--shadow-ink) 58%, transparent); } :root[data-theme="light"] .nav-icon .nav-live-dot{border-color:var(--stroke)} :root[data-theme="light"] .crcol-item.is-pinned{background:color-mix(in srgb, var(--c6) 6%, transparent)} /* ============================================================ DESIGN REFRESH / 2026 Спокойный «редакционный» интерфейс вместо неонового glass-dashboard: плоские поверхности, один сигнальный акцент и типографическая иерархия. ============================================================ */ /* палитра живёт в ui.css (12.09.2026) */ body{ background:var(--bg); letter-spacing:-.01em; } body::before{ opacity:1; background:linear-gradient(180deg,color-mix(in srgb, var(--brand) 2%, transparent),transparent 28%); } button,select,input{letter-spacing:inherit} ::selection{background:var(--selection-bg);color:var(--selection-fg)} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--paper) 14%, transparent);border:2px solid var(--bg);border-radius:var(--r-sm)} .app{grid-template-columns:228px 1fr} .sidebar{ gap:0;padding:22px 14px 16px; border-right:1px solid var(--stroke); background: var(--sidebar-bg); backdrop-filter:none; } .logo{gap:11px;padding:0 7px;margin-bottom:30px} .logo-mark{ width:36px;height:36px;padding:8px;border-radius:var(--r-md); color:var(--logo-fg);background:var(--logo-bg);box-shadow:none; transition:transform .35s cubic-bezier(.2,.8,.2,1); } .logo:hover .logo-mark{transform:rotate(-4deg) scale(1.04)} .logo-text b{font-size:15px;font-weight:700;letter-spacing:-.45px} .logo-text span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3)} .nav-label{ padding:0 11px 9px;font-size:9px;font-weight:700;line-height:1; color:var(--txt-3);text-transform:uppercase;letter-spacing:.12em; } .nav{gap:3px} .nav-item{ position:relative;min-height:42px;gap:11px;padding:10px 11px;border-radius:var(--r-md); width:100%;border:0;background:transparent;text-align:left;font-family:var(--font); color: var(--nav-fg);font-size:12.5px;font-weight:600; transition:background-color .18s,color .18s,transform .18s; } .nav-item svg{width:17px;height:17px;opacity:.7;stroke-width:1.8} .nav-item:hover{background: var(--nav-hover);color:var(--txt)} .nav-item.active{ color:var(--nav-active-fg);background:var(--nav-active-bg);box-shadow:none; } .nav-item.active svg{color: var(--nav-active-fg);opacity:1} .nav-live-dot{ width:5px;height:5px;margin-left:auto;border-radius:50%;background:var(--bad); box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 12%, transparent); } @keyframes statusBlink{50%{opacity:.35;transform:scale(.78)}} .sync-card{ margin-top:auto;padding:13px 12px;border-radius:var(--r-md); background:var(--bg-2);border:1px solid var(--stroke);box-shadow:none; } .sync-row{font-size:11.5px;color:var(--txt-2)} .sync-time{margin:5px 0 10px;font:500 10px/1.4 var(--font);color:var(--txt-3)} .dot{width:6px;height:6px;box-shadow:none} .src{ padding:4px 5px;border:0;border-radius:var(--r-sm);background:color-mix(in srgb, var(--ok) 10%, transparent); font:600 9px/1.2 var(--font);letter-spacing:.01em; } .topbar{ gap:18px;padding:17px 28px;border-bottom:1px solid var(--stroke); background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(14px);box-shadow:none; } .topbar-title{flex:1 1 210px} .eyebrow{ display:block;margin-bottom:4px;color:var(--c1); font:600 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase; } .topbar h1{ color:var(--txt);font-size:24px;font-weight:650;line-height:1.15;letter-spacing:-.8px; background:none;-webkit-text-fill-color:currentColor; } .crumb{margin-top:4px;color:var(--txt-3);font-size:11.5px} .controls{gap:7px} .seg{ padding:3px;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--stroke); } .seg button{ padding:6px 9px;border-radius:var(--r-sm);color:var(--txt-3);font-size:10.5px;font-weight:650; transition:background-color .18s,color .18s,transform .18s; } .seg button:hover{color:var(--txt)} .seg button.on{color:var(--seg-on-fg);background:var(--seg-on-bg);box-shadow:none} .select,.btn,.btn-ghost{ min-height:34px;padding:7px 10px;border-radius:var(--r-md); background:var(--bg-2);border:1px solid var(--stroke);color:var(--txt-2);font-size:11px; transition:background-color .18s,border-color .18s,color .18s,transform .18s; } .select:hover,.btn:hover,.btn-ghost:hover{ color:var(--txt);background:var(--panel-2);border-color:var(--stroke-2); } .select{max-width:164px} .btn-ghost{width:34px;height:34px;padding:8px} .btn-primary,.btn-primary:hover{ color:var(--primary-fg);background:var(--primary-bg);border-color:var(--primary-bg);filter:none;font-weight:700; } .picker-btn.on,.chip.on{ color:var(--c1);background:color-mix(in srgb, var(--brand) 9%, transparent);border-color:color-mix(in srgb, var(--brand) 35%, transparent); } .picker-btn.on svg{color:var(--c1)} .picker{ background:var(--bg-2);border-color:var(--stroke-2);border-radius:var(--r-lg); box-shadow:0 26px 80px color-mix(in srgb, var(--shadow-ink) 48%, transparent); transform:translateY(-5px) scale(.985);transform-origin:top right; } .picker.on{transform:translateY(0) scale(1)} .picker-row input,.picker-quick button{background:var(--bg-2)} .switch{width:36px;height:20px} .switch span{background:var(--track)} .switch span::after{width:14px;height:14px;background:var(--txt-3)} .switch input:checked + span{background:color-mix(in srgb, var(--brand) 14%, transparent);border-color:color-mix(in srgb, var(--brand) 40%, transparent)} .switch input:checked + span::after{transform:translateX(16px);background:var(--switch-on);box-shadow:none} .scroll{padding:26px 30px 56px} .view{width:100%;max-width:1640px;margin:0 auto;gap:16px} @keyframes viewEnter{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } .grid-2{gap:16px} #view-overview .grid-2:first-of-type{grid-template-columns:minmax(0,1.3fr) minmax(360px,.7fr)} .card{ padding:19px;background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r); box-shadow:var(--shadow);backdrop-filter:none; transition:border-color .22s,transform .22s,box-shadow .22s; } .card:hover{border-color:var(--stroke-2);box-shadow:0 22px 48px -34px color-mix(in srgb, var(--shadow-ink) 90%, transparent)} @keyframes panelEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} .card-head{margin-bottom:18px} .card-head h3{font-size:14px;font-weight:650;letter-spacing:-.3px} .card-head p{max-width:620px;margin-top:4px;color:var(--txt-3);font-size:10.5px;line-height:1.45} .legend{font-size:10px} .legend i{width:7px;height:7px;border-radius:50%} .chart{height:270px} .donut-wrap{height:270px} .kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px} .kpi{ min-height:128px;padding:17px 17px 15px;border-radius:var(--r-lg); background:var(--panel);border:1px solid var(--stroke);box-shadow:none; transition:border-color .2s,background-color .2s; } @keyframes kpiEnter{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } .kpi:hover,.kpi-click:hover{transform:translateY(-2px);background:var(--panel-2);border-color:var(--stroke-2)} .kpi::before{display:none} .kpi::after{ top:17px;right:17px;left:auto;width:7px;height:7px;border-radius:50%; background:var(--kc,var(--c1));opacity:.9; } .kpi-label{ padding-right:18px;color:var(--txt-3);font-size:10px;font-weight:650; text-transform:none;letter-spacing:.01em; } .kpi-val{ margin:13px 0 8px;color:var(--txt);font:600 29px/1 var(--font-mono); letter-spacing:-1.5px;background:none;-webkit-text-fill-color:currentColor; } .kpi-foot{font-size:10px;line-height:1.35} .delta{padding:2px 5px;border-radius:var(--r-sm);font-family:var(--font-mono);font-size:9px} .kpi-active{ border-color:color-mix(in srgb, var(--brand) 52%, transparent);box-shadow:inset 3px 0 0 var(--kc,var(--c1)); background:var(--panel-2); } .kpi-active::after{height:7px} .banner{border-radius:var(--r-lg);background:color-mix(in srgb, var(--warn) 7%, transparent);border-color:color-mix(in srgb, var(--warn) 24%, transparent)} .banner-err{background:color-mix(in srgb, var(--bad) 7%, transparent);border-color:color-mix(in srgb, var(--bad) 25%, transparent)} .banner-ico{font-size:18px;filter:saturate(.7)} .banner b{font-size:12.5px}.banner p{font-size:11.5px} .chart-empty{background:color-mix(in srgb, var(--paper) 1%, transparent);border-radius:var(--r-md)} .loadbar{background:transparent} .loadbar i{width:32%;background:var(--c1);animation:slide-bar 1s ease-in-out infinite} .table-toolbar{gap:8px} .search{ border-radius:var(--r-md);background:var(--panel);border-color:var(--stroke);padding:0 11px; transition:border-color .18s,box-shadow .18s; } .search:focus-within{border-color:color-mix(in srgb, var(--brand) 45%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 8%, transparent)} .search input{font-size:11.5px;padding:9px 0} .chips{gap:5px} .chip{padding:7px 10px;border-radius:var(--r-md);background:var(--panel);font-size:10.5px} .chip-wa.on{color:var(--wa);background:color-mix(in srgb, var(--ok) 9%, transparent);border-color:color-mix(in srgb, var(--ok) 34%, transparent)} .table-card{padding:0} .tbl{font-size:11.5px} .tbl thead th{ padding:12px 13px;color:var(--txt-3);background:var(--th-bg);border-bottom-color:var(--stroke); font:600 9px/1.2 var(--font);letter-spacing:.04em; } .tbl tbody tr{border-bottom-color:color-mix(in srgb, var(--paper) 6%, transparent)} .tbl tbody tr:hover{background:color-mix(in srgb, var(--brand) 4%, transparent)} .tbl td{padding:11px 13px} .tbl th.sorted{color:var(--c1)} .ad-name{font-size:11.5px;font-weight:650} .ad-meta{font-size:9.5px} .thumb{border-radius:var(--r-md)} .badge,.roas-pill{border-radius:var(--r-sm)} .grp-row td{background:color-mix(in srgb, var(--brand) 2%, transparent)!important} .grp-row:hover td{background:color-mix(in srgb, var(--brand) 5%, transparent)!important} .grp-row td:first-child{background:linear-gradient(color-mix(in srgb, var(--brand) 2%, transparent),color-mix(in srgb, var(--brand) 2%, transparent)),var(--sticky-col)!important} .grp-row:hover td:first-child{background:linear-gradient(color-mix(in srgb, var(--brand) 5%, transparent),color-mix(in srgb, var(--brand) 5%, transparent)),var(--sticky-col-hover)!important} .col-resizer:hover::before,.col-resizer.dragging::before{background:var(--c1)} .feed{gap:6px} .feed li{ border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--stroke); } @keyframes feedIn{from{opacity:0;transform:translateX(-10px)}} .feed .ico{border-radius:var(--r-md)}.feed .txt{font-size:11.5px} .drawer-backdrop{background:color-mix(in srgb, var(--ink) 68%, transparent);backdrop-filter:blur(2px)} .drawer{ background:var(--bg-2);border-left-color:var(--stroke);box-shadow:-32px 0 90px color-mix(in srgb, var(--shadow-ink) 42%, transparent); transition:transform .38s cubic-bezier(.22,.8,.24,1); } .drawer-close{border-radius:var(--r-md);background:var(--panel)} .d-head h2{font-size:16px}.d-stat,.d-row{border-radius:var(--r-md);background:var(--panel)} .d-stat b{font-family:var(--font-mono);letter-spacing:-.5px} .d-sec{font:600 10px/1.2 var(--font);letter-spacing:.05em} .chart-tip{border-radius:var(--r-md);box-shadow:0 16px 44px color-mix(in srgb, var(--shadow-ink) 42%, transparent)} .toast{border-radius:var(--r-md);font-size:11.5px} .bar-grow{animation-duration:.62s;animation-timing-function:cubic-bezier(.25,.8,.25,1)} .line-draw{animation-duration:.9s;animation-timing-function:cubic-bezier(.25,.8,.25,1)} .axis{stroke:color-mix(in srgb, var(--paper) 8%, transparent)} .axis-txt,.bar-lbl{font-size:9px}.val-lbl{font-size:10px;font-family:var(--font-mono)} button:focus-visible,.select:focus-visible,input:focus-visible,.nav-item:focus-visible{ outline:2px solid color-mix(in srgb, var(--brand) 70%, transparent);outline-offset:2px; } /* Светлая версия сохраняет ту же строгую систему, без белого glassmorphism. */ :root[data-theme="light"] body::before{opacity:1;background:linear-gradient(180deg,color-mix(in srgb, var(--brand) 2%, transparent),transparent 28%)} :root[data-theme="light"] .sidebar{background: var(--sidebar-bg)} :root[data-theme="light"] .logo-mark{color: var(--logo-fg);background: var(--logo-bg)} :root[data-theme="light"] .logo-text span,:root[data-theme="light"] .nav-label{color:var(--txt-3)} :root[data-theme="light"] .nav-item{color: var(--nav-fg)} :root[data-theme="light"] .nav-item:hover{color:var(--txt);background: var(--nav-hover)} :root[data-theme="light"] .nav-item.active{color: var(--nav-active-fg);background: var(--nav-active-bg)} :root[data-theme="light"] .nav-item.active svg{color: var(--nav-active-fg)} :root[data-theme="light"] .sync-card,:root[data-theme="light"] .seg, :root[data-theme="light"] .select,:root[data-theme="light"] .btn,:root[data-theme="light"] .btn-ghost, :root[data-theme="light"] .picker-row input,:root[data-theme="light"] .picker-quick button{background:var(--panel-2)} :root[data-theme="light"] .topbar{background:color-mix(in srgb, var(--paper) 92%, transparent)} :root[data-theme="light"] .seg button.on{color: var(--seg-on-fg);background: var(--seg-on-bg)} :root[data-theme="light"] .btn-primary,:root[data-theme="light"] .btn-primary:hover{color: var(--primary-fg);background: var(--primary-bg);border-color: var(--primary-bg)} :root[data-theme="light"] .picker{background:var(--panel)} :root[data-theme="light"] .feed li{background:var(--panel)} :root[data-theme="light"] .drawer{background:var(--panel)} :root[data-theme="light"] .axis{stroke:color-mix(in srgb, var(--ink) 9%, transparent)} :root[data-theme="light"] .tbl tbody tr:hover{background:color-mix(in srgb, var(--brand) 4%, transparent)} :root[data-theme="light"] .kpi-active{background:var(--panel-2)} :root[data-theme="light"] ::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--ink) 16%, transparent);border-color:var(--bg)} @media(max-width:1200px){ #view-overview .grid-2:first-of-type{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important} } /* Feedback pass: нейтральная палитра и KPI без переноса валюты. */ body::before{background:linear-gradient(180deg,color-mix(in srgb, var(--c1) 2%, transparent),transparent 28%)} ::selection{background:var(--selection-bg);color:var(--selection-fg)} ::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--paper) 14%, transparent);border-color:var(--bg)} .sidebar{background: var(--sidebar-bg)} .logo-mark{color: var(--logo-fg)} .nav-item:hover{background: var(--nav-hover)} .nav-item.active,.nav-item.active svg{color: var(--nav-active-fg)} .sync-card,.seg,.select,.btn,.btn-ghost,.picker-row input,.picker-quick button{background:var(--bg-2)} .topbar{background:color-mix(in srgb, var(--bg) 92%, transparent)} .seg button.on,.btn-primary,.btn-primary:hover{color: var(--seg-on-fg)} .picker-btn.on,.chip.on{background:color-mix(in srgb, var(--c1) 9%, transparent);border-color:color-mix(in srgb, var(--c1) 35%, transparent)} .picker{background:var(--bg-2)} .switch span{background:var(--track)} .switch input:checked + span{background:color-mix(in srgb, var(--c1) 14%, transparent);border-color:color-mix(in srgb, var(--c1) 40%, transparent)} .kpi-val{ font-family:var(--font); font-size:clamp(22px,1.45vw,29px); font-weight:650; line-height:1.05; letter-spacing:-1.2px; font-variant-numeric:tabular-nums; white-space:nowrap; } .kpi-active{border-color:color-mix(in srgb, var(--c1) 52%, transparent)} .chart-empty{background:color-mix(in srgb, var(--paper) 1%, transparent)} .search:focus-within{border-color:color-mix(in srgb, var(--c1) 45%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--c1) 8%, transparent)} .tbl tbody tr{border-bottom-color:color-mix(in srgb, var(--paper) 6%, transparent)} .tbl tbody tr:hover{background:color-mix(in srgb, var(--c1) 4%, transparent)} .grp-row td{background:color-mix(in srgb, var(--c1) 2%, transparent)!important} .grp-row:hover td{background:color-mix(in srgb, var(--c1) 5%, transparent)!important} .grp-row td:first-child{background:linear-gradient(color-mix(in srgb, var(--c1) 2%, transparent),color-mix(in srgb, var(--c1) 2%, transparent)),var(--sticky-col)!important} .grp-row:hover td:first-child{background:linear-gradient(color-mix(in srgb, var(--c1) 5%, transparent),color-mix(in srgb, var(--c1) 5%, transparent)),var(--sticky-col-hover)!important} .feed li,.drawer{background:var(--bg-2)} .axis{stroke:color-mix(in srgb, var(--paper) 8%, transparent)} button:focus-visible,.select:focus-visible,input:focus-visible,.nav-item:focus-visible{outline-color:color-mix(in srgb, var(--focus) 70%, transparent)} :root[data-theme="light"] body::before{background:linear-gradient(180deg,color-mix(in srgb, var(--c1) 2%, transparent),transparent 28%)} :root[data-theme="light"] .sidebar{background: var(--sidebar-bg)} :root[data-theme="light"] .logo-mark{color: var(--logo-fg);background: var(--logo-bg)} :root[data-theme="light"] .nav-item:hover{color:var(--txt);background: var(--nav-hover)} :root[data-theme="light"] .nav-item.active{color: var(--nav-active-fg);background: var(--nav-active-bg)} :root[data-theme="light"] .nav-item.active svg{color: var(--nav-active-fg)} :root[data-theme="light"] .sync-card,:root[data-theme="light"] .seg, :root[data-theme="light"] .select,:root[data-theme="light"] .btn,:root[data-theme="light"] .btn-ghost, :root[data-theme="light"] .picker-row input,:root[data-theme="light"] .picker-quick button{background:var(--panel-2)} :root[data-theme="light"] .topbar{background:color-mix(in srgb, var(--paper) 92%, transparent)} :root[data-theme="light"] .seg button.on,:root[data-theme="light"] .btn-primary, :root[data-theme="light"] .btn-primary:hover{color: var(--primary-fg);background: var(--primary-bg);border-color: var(--primary-bg)} :root[data-theme="light"] .picker{background:var(--panel)} :root[data-theme="light"] .feed li,:root[data-theme="light"] .drawer{background:var(--panel)} :root[data-theme="light"] .axis{stroke:color-mix(in srgb, var(--ink) 9%, transparent)} :root[data-theme="light"] .tbl tbody tr:hover{background:color-mix(in srgb, var(--c1) 4%, transparent)} :root[data-theme="light"] .kpi-active{background:var(--panel-2)} /* ============ ДОРАБОТКИ ТАБЛИЦЫ КРЕАТИВОВ ============ */ /* кружок активности рядом с именем (#4) */ .st-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;flex:none} .st-dot.st-on{background:var(--ok);box-shadow:0 0 0 2px color-mix(in srgb, var(--ok) 18%, transparent)} .st-dot.st-off{background:var(--txt-3);opacity:.55} /* легенда цветов (#1) */ .cr-legend{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--txt-3);margin-left:auto;flex-wrap:wrap} .cr-legend span{display:flex;align-items:center;gap:5px;white-space:nowrap} .cr-legend i:not(.st-dot){width:11px;height:11px;border-radius:3px;display:inline-block} .cr-legend .lg-green{background:color-mix(in srgb, var(--ok) 60%, transparent)} .cr-legend .lg-yellow{background:color-mix(in srgb, var(--warn) 60%, transparent)} .cr-legend .lg-red{background:color-mix(in srgb, var(--bad) 60%, transparent)} .cr-legend .lg-blue{background:color-mix(in srgb, var(--c1) 60%, transparent)} .cr-legend .st-dot{margin-right:0} .cr-legend .lg-cap{color:var(--txt-2);font-weight:600} .cr-legend .lg-sep{width:1px;height:12px;background:var(--stroke-2);padding:0} /* подсветка раскрытия и выбранной строки (#3). Первый столбец липкий → нужен НЕПРОЗРАЧНЫЙ фон. Раньше стоял хардкод #171a29/ #1c2032 — в светлой теме он выглядел чёрным. Теперь фиолетовый оттенок поверх тематической подложки (var), поэтому корректно в тёмной и светлой теме. */ .cr-tbl tbody tr.cr-grp.open > td{background:color-mix(in srgb, var(--c1) 9%, transparent)} .cr-tbl tbody tr.cr-grp.open > td:first-child{background:linear-gradient(color-mix(in srgb, var(--c1) 12%, transparent),color-mix(in srgb, var(--c1) 12%, transparent)),var(--sticky-col)!important} /* вложенные строки — левый рельс, чтобы видеть принадлежность к раскрытой ветке */ .cr-tbl tbody tr.cr-child > td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--c1) 45%, transparent),6px 0 12px -6px color-mix(in srgb, var(--shadow-ink) 55%, transparent)} .cr-tbl tbody tr[data-depth="2"] > td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--c1) 45%, transparent),6px 0 12px -6px color-mix(in srgb, var(--shadow-ink) 55%, transparent)} /* строка, на которой стоишь — выделяется, как в Ads Manager */ .cr-tbl tbody tr.sel > td{background:color-mix(in srgb, var(--c1) 15%, transparent) !important} .cr-tbl tbody tr.sel > td:first-child{background:linear-gradient(color-mix(in srgb, var(--c1) 20%, transparent),color-mix(in srgb, var(--c1) 20%, transparent)),var(--sticky-col-hover)!important;box-shadow:inset 3px 0 0 var(--c1),6px 0 12px -6px color-mix(in srgb, var(--shadow-ink) 35%, transparent)} .cr-tbl tbody tr.cr-grp{cursor:pointer} /* ============ Пользователь + выход (низ сайдбара) ============ */ .user-chip{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md); background:var(--panel);border:1px solid var(--stroke)} .user-ava{width:30px;height:30px;flex:none;border-radius:var(--r-md);display:grid;place-items:center; font-weight:700;font-size:13px;color: var(--avatar-fg);background: var(--avatar-bg)} .user-meta{min-width:0;flex:1;line-height:1.2} .user-meta b{display:block;font-size:12.5px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-meta span{font-size:10.5px;color:var(--txt-3)} .user-logout{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:var(--r-md); background:transparent;border:1px solid var(--stroke);color:var(--txt-3);cursor:pointer;transition:.15s var(--ease)} .user-logout svg{width:15px;height:15px} .user-logout:hover{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 40%, transparent);background:color-mix(in srgb, var(--bad) 8%, transparent)} .nav-collapsed .user-chip{padding:8px;justify-content:center} .nav-collapsed .user-meta,.nav-collapsed .user-logout{display:none} /* ============ Админ-панель (Настройки) ============ */ .admin-card .card-head{align-items:center} .admin-tbl th,.admin-tbl td{padding:11px 12px;font-size:13px;vertical-align:middle} .admin-tbl td.acc-cell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-2)} .role-badge{display:inline-block;padding:2px 9px;border-radius:var(--r-sm);font-size:11px;font-weight:600; background:color-mix(in srgb, var(--paper) 6%, transparent);color:var(--txt-2);border:1px solid var(--stroke)} .role-badge.role-admin{background:color-mix(in srgb, var(--c1) 16%, transparent);color:var(--c1);border-color:color-mix(in srgb, var(--c1) 30%, transparent)} .row-actions{white-space:nowrap;text-align:right} .mini-btn{padding:5px 10px;margin-left:6px;border-radius:var(--r-md);border:1px solid var(--stroke); background:var(--panel);color:var(--txt-2);font:inherit;font-size:12px;cursor:pointer;transition:.15s var(--ease)} .mini-btn:hover{background:var(--primary-bg);color:var(--primary-fg);border-color:var(--primary-bg)} .mini-btn.mini-danger:hover{background:var(--bad);border-color:var(--bad)} .admin-form{margin:4px 0 18px;padding:16px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--stroke)} .admin-form.hidden{display:none} .af-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px} .af-grid label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--txt-3);font-weight:500} .af-grid input,.af-grid select{padding:9px 11px;border-radius:var(--r-md);border:1px solid var(--stroke); background:var(--bg);color:var(--txt);font:inherit;font-size:13.5px;transition:border-color .2s var(--ease)} .af-grid input:focus,.af-grid select:focus{outline:none;border-color:var(--c1)} .af-hint{color:var(--txt-3);font-weight:400} .af-acc{margin-bottom:14px} .af-acc b,.af-pages b{font-size:12px;color:var(--txt-3)} .af-acc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .af-all{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt-2);cursor:pointer} .af-acc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 14px; max-height:180px;overflow:auto;padding:10px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--stroke)} .af-acc-list.dim{opacity:.4;pointer-events:none} .af-chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-2);cursor:pointer} .af-pages{display:flex;align-items:center;gap:16px;margin-bottom:16px} .af-actions{display:flex;justify-content:flex-end;gap:10px} /* ============ Переключатель Offline / Online (сайдбар) ============ */ .page-switch{display:flex;gap:4px;padding:4px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--stroke)} .page-switch button{flex:1;padding:8px 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--txt-3); font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.18s var(--ease)} .page-switch button:hover{color:var(--txt)} .page-switch button.on{background: var(--seg-on-bg);color: var(--seg-on-fg);box-shadow:0 6px 16px -8px color-mix(in srgb, var(--c1) 80%, transparent)} .nav-collapsed .page-switch{flex-direction:column;padding:4px} .nav-collapsed .page-switch button{font-size:10px;padding:7px 4px} /* на онлайн-странице канал/кабинет-фильтры не нужны — там один кабинет (Кабинет 9) */ body.page-online #channelSeg,body.page-online #accountFilter{display:none} /* ============ Мини-переключатели: валюта / язык ============ */ .mini-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--stroke)} .mini-seg button{border:0;background:transparent;color:var(--txt-3);font:inherit;font-size:12px;font-weight:600; padding:5px 9px;border-radius:var(--r-sm);cursor:pointer;transition:.15s var(--ease);white-space:nowrap} .mini-seg button:hover{color:var(--txt)} .mini-seg button.on{background:var(--seg-on-bg);color:var(--seg-on-fg)} /* Настройки — секция «Общие» */ .set-card{margin-bottom:16px} .set-rows{display:flex;flex-direction:column} .set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 4px;border-bottom:1px solid var(--stroke)} .set-row:last-child{border-bottom:0} .set-row>span{font-size:13.5px;color:var(--txt-2)} .set-row>b{font-size:14px;color:var(--txt);font-weight:600} /* ============ Закрепление столбцов в пикере (📌) ============ */ .crcol-item{display:flex;align-items:center;justify-content:space-between;gap:6px} .crcol-vis{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer;min-width:0} .crcol-pin{border:0;background:transparent;cursor:pointer;font-size:12px;line-height:1;opacity:.3; padding:3px 5px;border-radius:var(--r-sm);filter:grayscale(1);transition:.15s var(--ease)} .crcol-pin:hover{opacity:.65;background:var(--panel)} .crcol-pin.on{opacity:1;filter:none;background:color-mix(in srgb, var(--c1) 16%, transparent)} .crcol-hint{font-size:10.5px;color:var(--txt-3);padding:9px 4px 2px;line-height:1.4;border-top:1px solid var(--stroke);margin-top:6px} /* ============ Звонобот ============ */ .zv-bud{white-space:nowrap} .zv-edit{margin-left:6px;border:0;background:transparent;color:var(--txt-3);cursor:pointer;font-size:12px; padding:2px 5px;border-radius:var(--r-sm);transition:.15s var(--ease)} .zv-edit:hover{color:var(--c1);background:color-mix(in srgb, var(--c1) 14%, transparent)} .zv-empty{color:var(--txt-3)} .zv-tbl tfoot .zv-total td{background:var(--th-bg);font-weight:700;border-top:2px solid var(--stroke)} /* ============ WhatsApp-карточка (Кабинет 3, Креативы) ============ */ .wa-card{margin-bottom:14px;padding:14px 16px;border-radius:var(--r-lg); background:linear-gradient(180deg,color-mix(in srgb, var(--wa) 10%, transparent),color-mix(in srgb, var(--wa) 3%, transparent));border:1px solid color-mix(in srgb, var(--wa) 28%, transparent)} .wa-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap} .wa-badge{background:color-mix(in srgb, var(--wa) 16%, transparent);color:var(--wa);font-weight:700;font-size:12px;padding:3px 9px;border-radius:var(--r-sm)} .wa-head b{font-size:14px;color:var(--txt)} .wa-camps{font-size:11px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw} .wa-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px} .wa-stat{display:flex;flex-direction:column;gap:3px} .wa-stat span{font-size:11px;color:var(--txt-3)} .wa-stat b{font-size:16px;font-weight:700;color:var(--txt)} .wa-stat.wa-good b{color:var(--ok)} .wa-stat.wa-bad b{color:var(--bad)} /* ============================================================ INTEGRATION PASS — новые экраны и контролы в общей дизайн-системе ============================================================ */ /* Сайдбар: единый вертикальный ритм после добавления страниц и профиля. */ .sidebar{overflow:hidden} .sidebar .logo{margin-bottom:18px} .page-switch{ min-height:38px;margin:0 0 18px;padding:3px;gap:3px;border-radius:var(--r-md); background:var(--bg-2);border-color:var(--stroke); } .page-switch button{ min-width:0;padding:7px 8px;border-radius:var(--r-sm);color:var(--txt-3); font-size:10.5px;font-weight:650;letter-spacing:.01em; } .page-switch button.on{ color:var(--txt);background:var(--panel-2);border:1px solid var(--stroke-2); box-shadow:none; } .nav-label{padding-bottom:8px} .nav{min-height:0;overflow-y:auto;scrollbar-width:none;padding-bottom:4px} .nav::-webkit-scrollbar{display:none} .nav-collapse{ min-height:38px;margin-top:auto;padding:9px 11px;border-radius:var(--r-md); background:transparent;border-color:transparent;font-size:11px; } .nav-collapse:hover{border-color:var(--stroke);background:var(--panel)} .user-chip{ min-height:48px;margin-top:8px;padding:8px;border-radius:var(--r-md); background:var(--bg-2);border-color:var(--stroke); } .user-ava{ width:31px;height:31px;border-radius:var(--r-md);color:var(--avatar-fg);background:var(--avatar-bg); box-shadow:none; } .user-meta b{font-size:11.5px}.user-meta span{font-size:9.5px} .user-logout{border-color:transparent}.user-logout:hover{border-color:color-mix(in srgb, var(--bad) 32%, transparent)} .sync-card{margin-top:8px;padding:10px 11px;border-radius:var(--r-md);background:var(--bg-2)} .sync-time{margin-bottom:7px}.src{font-size:8.5px} /* Верхняя панель: заголовок и многочисленные фильтры держат общие линии. */ .topbar{ display:grid;grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr); align-items:center;column-gap:24px;row-gap:12px;padding:17px 28px; } .topbar-title{min-width:0} .controls{width:100%;gap:7px;align-items:center;justify-content:flex-end} .controls>.seg,.controls>.picker-wrap,.controls>.ch-seg,.controls>.select, .controls>.mini-seg,.controls>.btn-ghost,.controls>.switch{flex:none} .ch-seg{gap:4px} .ch-btn{ position:relative;min-height:34px;padding:7px 10px;border-radius:var(--r-md); background:var(--bg-2);border-color:var(--stroke);font-size:10.5px;font-weight:650; } .ch-btn.on{color:var(--txt);background:var(--panel-2);border-color:var(--stroke-2);box-shadow:none} .ch-btn[data-ch="meta"].on,.ch-btn[data-ch="tiktok"].on{background:var(--panel-2)} .ch-btn[data-ch="meta"].on{box-shadow:inset 0 -2px 0 var(--brand-meta-soft)} .ch-btn[data-ch="tiktok"].on{box-shadow:inset 0 -2px 0 var(--brand-tiktok-soft)} .mini-seg{min-height:34px;padding:3px;border-radius:var(--r-md);background:var(--bg-2)} .mini-seg button{min-width:29px;padding:5px 8px;border-radius:var(--r-sm);font-size:10.5px} .mini-seg button.on{color:var(--seg-on-fg);background:var(--seg-on-bg)} .btn-primary{ min-height:34px;padding:7px 12px;border:1px solid var(--c1);border-radius:var(--r-md); color:var(--primary-fg);background:var(--primary-bg);font:700 11px/1.2 var(--font);cursor:pointer; transition:transform .18s var(--ease),filter .18s var(--ease); } .btn-primary:hover{color:var(--primary-fg);background:var(--primary-bg);filter:brightness(1.06)} /* Календарь: одинаковые размеры ячеек и аккуратная сетка быстрых периодов. */ .picker{width:324px;padding:15px;border-radius:var(--r-lg)} .cal-head{height:30px;margin-bottom:8px} .cal-nav{width:30px;height:30px;border-radius:var(--r-md);background:transparent;border-color:transparent} .cal-dow,.cal-grid{gap:3px} .cal-d{min-width:0;border-radius:var(--r-md);font-size:10.5px} .cal-in{border-radius:var(--r-sm);background:color-mix(in srgb, var(--c1) 10%, transparent)} .cal-sel{color:var(--primary-fg)!important;background:var(--primary-bg)!important;box-shadow:none} .picker-quick{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px} .picker-quick button,.picker-quick button:last-child{grid-column:auto;padding:7px 5px;font-size:9.5px} .picker-foot{padding-top:2px} .picker-actions{gap:6px} #pickerReset,#pickerApply{min-height:32px;padding:7px 10px;border-radius:var(--r-md);font-size:10.5px} /* Контентные сетки и таблицы. */ .grid-2>.card{height:100%} .kpis{grid-template-columns:repeat(6,minmax(0,1fr))} .acct-card,.set-card,.wa-card{margin-bottom:0} .acct-card .card-head{margin-bottom:12px} .tbl th,.tbl td{vertical-align:middle} .tbl td.num{font-family:var(--font-mono);letter-spacing:-.2px} .acct-tbl td,.acct-tbl th{height:42px} .acct-tbl tbody tr:hover td,.sum-tbl tbody tr:hover td{background:color-mix(in srgb, var(--c1) 4%, transparent)} .sum-bar{ margin-bottom:0;padding:10px 12px;border:1px solid var(--stroke);border-radius:var(--r-md); background:var(--panel); } .sum-months{gap:5px} .sum-months button{min-height:32px;padding:6px 11px;border-radius:var(--r-md);font-size:10.5px} .sum-months button.on{color:var(--txt);background:var(--panel-2);border-color:var(--stroke-2)} .sum-note{max-width:520px;font-size:9.5px;line-height:1.45} .sum-tbl td.num,.sum-tbl th.num{min-width:72px} .sum-tbl .sum-week td{background:color-mix(in srgb, var(--txt-3) 5%, transparent)!important} .sum-tbl .sum-week td:first-child{background:linear-gradient(color-mix(in srgb, var(--txt-3) 5%, transparent),color-mix(in srgb, var(--txt-3) 5%, transparent)),var(--sticky-col)!important} /* Панель креативов: управляющие элементы и легенда получают отдельные строки. */ .table-toolbar{row-gap:8px} .table-toolbar .search{min-height:34px} .frz-ctl{min-height:34px;padding:4px 6px;border-radius:var(--r-md);background:var(--panel)} .frz-ctl button{width:23px;height:23px}.frz-ctl button:hover{color:var(--on-accent)} .cr-legend{ flex:1 1 100%;margin:0;padding:8px 10px;gap:11px;border:1px solid var(--stroke); border-radius:var(--r-md);background:color-mix(in srgb, var(--paper) 2%, transparent);font-size:9.5px; } .cr-legend i:not(.st-dot){width:8px;height:8px;border-radius:2px} .cr-tbl tbody tr.cr-grp.open>td{background:color-mix(in srgb, var(--c1) 7%, transparent)} .cr-tbl tbody tr.cr-grp.open>td:first-child{background:linear-gradient(color-mix(in srgb, var(--c1) 9%, transparent),color-mix(in srgb, var(--c1) 9%, transparent)),var(--sticky-col)!important} .cr-tbl tbody tr.cr-child>td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--c1) 42%, transparent),6px 0 12px -6px color-mix(in srgb, var(--shadow-ink) 55%, transparent)} .cr-tbl tbody tr.sel>td{background:color-mix(in srgb, var(--c1) 11%, transparent)!important} .cr-tbl tbody tr.sel>td:first-child{background:linear-gradient(color-mix(in srgb, var(--c1) 14%, transparent),color-mix(in srgb, var(--c1) 14%, transparent)),var(--sticky-col-hover)!important} .crcol-pin.on{background:color-mix(in srgb, var(--c1) 13%, transparent)} /* Настройки: общие параметры и пользователи выровнены в двухколоночный экран. */ #view-settings:not(.hidden){ display:grid;grid-template-columns:minmax(260px,.38fr) minmax(0,1fr); align-items:start;gap:16px; } .set-card{position:static} /* была липкой — при прокрутке ехала поверх «Оформления» и лимита amo */ .set-card .card-head{margin-bottom:8px} .set-row{min-height:52px;padding:10px 0} .set-row>span{font-size:11.5px}.set-row>b{font-size:12px;font-family:var(--font-mono)} .admin-card{min-width:0} #view-settings>.set-card:first-child{grid-column:1;grid-row:1} #view-settings>.admin-card:not(#amoUsageCard){grid-column:2;grid-row:1} #amoUsageCard{grid-column:1/-1;grid-row:3} /* расход лимита amo — во всю ширину, под оформлением */ #appearanceCard{grid-column:1/-1;grid-row:2;position:static;margin-bottom:0} /* оформление — во всю ширину под пользователями, не липнет */ .admin-card .card-head{min-height:35px;margin-bottom:14px} .admin-tbl th,.admin-tbl td{height:44px;padding:10px 12px;font-size:11.5px} .role-badge{padding:3px 8px;border-radius:var(--r-sm);font-size:9.5px} .role-badge.role-admin{color:var(--c1);background:color-mix(in srgb, var(--c1) 10%, transparent);border-color:color-mix(in srgb, var(--c1) 25%, transparent)} .mini-btn{min-height:28px;margin-left:4px;padding:5px 9px;border-radius:var(--r-md);font-size:10.5px} .mini-btn:hover{color:var(--on-accent)} .admin-form{margin:0 0 16px;padding:18px;border-radius:var(--r-lg);background:var(--bg-2)} .af-grid{grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px 14px;margin-bottom:16px} .af-grid label{gap:6px;font-size:10.5px} .af-grid input,.af-grid select{height:40px;padding:0 11px;border-radius:var(--r-md);background:var(--panel);font-size:12px} .af-acc-head{min-height:28px}.af-acc-list{padding:12px;border-radius:var(--r-md);background:var(--panel)} .af-chk,.af-all{font-size:11px}.af-chk input,.af-all input{width:15px;height:15px;accent-color:var(--c1)} .af-pages{min-height:32px;margin-bottom:14px} .af-actions .btn,.af-actions .btn-primary{min-width:92px} /* Звонобот и WhatsApp — спокойные служебные поверхности без градиентов. */ .zv-tbl .zv-bud,.zv-tbl .num{font-variant-numeric:tabular-nums} .zv-edit:hover{background:color-mix(in srgb, var(--c1) 10%, transparent)} .wa-card{padding:14px 16px;border-radius:var(--r-lg);background:color-mix(in srgb, var(--ok) 4%, transparent);border-color:color-mix(in srgb, var(--ok) 20%, transparent)} .wa-badge{padding:3px 8px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--ok) 11%, transparent);color:var(--ok);font-size:10px} .wa-metrics{gap:8px}.wa-stat{padding:0 8px;border-left:1px solid var(--stroke)} .wa-stat:first-child{padding-left:0;border-left:0}.wa-stat b{font-family:var(--font-mono);font-size:14px} /* Светлая тема для новых компонентов. */ :root[data-theme="light"] .page-switch,:root[data-theme="light"] .user-chip, :root[data-theme="light"] .sync-card,:root[data-theme="light"] .ch-btn, :root[data-theme="light"] .mini-seg{background:var(--panel-2)} :root[data-theme="light"] .page-switch button.on,:root[data-theme="light"] .ch-btn.on{background: var(--seg-on-bg)} :root[data-theme="light"] .mini-seg button.on{color: var(--seg-on-fg);background: var(--seg-on-bg)} :root[data-theme="light"] .sum-bar{background:var(--panel)} :root[data-theme="light"] .admin-form{background:var(--panel-2)} :root[data-theme="light"] .af-grid input,:root[data-theme="light"] .af-grid select, :root[data-theme="light"] .af-acc-list{background:var(--panel)} @media(max-width:1250px){ .topbar{grid-template-columns:1fr;align-items:start} .controls{justify-content:flex-start} #view-settings:not(.hidden){grid-template-columns:1fr} .set-card{position:static} #view-settings>*{grid-column:1!important;grid-row:auto!important} } @media(max-width:1490px) and (min-width:761px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} } /* ЦЕНТР BRAND PASS — фирменная гамма netto.school (24.08.2026). Последняя секция файла: финальное слово поверх всех скинов выше. Роли цветов: ЖЁЛТЫЙ #facc15 — «где я» (активный раздел, PULSE, выбранный KPI); ЧЁРНЫЙ #0f0f0f — состояния контролов; СИНИЙ #007aff — основные действия. ============================================================ */ /* логотип: жёлтый чип с чёрной пульс-линией (= favicon), бейдж PULSE рядом с именем */ .logo-mark{color:var(--brand-ink);background:var(--brand);box-shadow:none} .logo:hover .logo-mark{transform:none} .logo-text b{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:15px;font-weight:800;letter-spacing:-.3px} .logo-text span{text-transform:none;font-size:9.5px;letter-spacing:.02em;white-space:nowrap} .brand-badge{ display:inline-block;background:var(--brand);color:var(--brand-ink); font-size:9px;font-weight:800;letter-spacing:.13em; padding:2.5px 6px;border-radius:var(--r-sm);line-height:1; } /* ─── СВЕТЛАЯ ТЕМА (по умолчанию) ─── */ :root[data-theme="light"] body::before{display:none} :root[data-theme="light"] ::selection{background: var(--selection-bg);color: var(--selection-fg)} :root[data-theme="light"] ::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--ink) 18%, transparent);border-color:var(--bg)} /* каркас */ :root[data-theme="light"] .sidebar{background: var(--sidebar-bg);border-right:1px solid var(--stroke)} :root[data-theme="light"] .topbar{background:color-mix(in srgb, var(--paper) 92%, transparent)} :root[data-theme="light"] .logo-mark{color:var(--brand-ink);background:var(--brand)} :root[data-theme="light"] .logo-text b{color:var(--txt)} :root[data-theme="light"] .logo-text span,:root[data-theme="light"] .nav-label{color:var(--txt-3)} :root[data-theme="light"] .eyebrow{color:var(--warn-fg)} /* навигация: активный раздел — фирменный жёлтый */ :root[data-theme="light"] .nav-item{color:var(--txt-2)} :root[data-theme="light"] .nav-item:hover{color:var(--txt);background: var(--nav-hover)} :root[data-theme="light"] .nav-item.active{ color:var(--brand-ink); background: var(--nav-active-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); } :root[data-theme="light"] .nav-item.active svg{color: var(--nav-active-fg)} /* контролы: белые карточки на светлой дорожке, активное состояние — чёрное */ :root[data-theme="light"] .sync-card{background:var(--panel);border-color:var(--stroke)} :root[data-theme="light"] .src{background:color-mix(in srgb, var(--ok) 10%, transparent);color:var(--ok-fg)} :root[data-theme="light"] .src.mock{background:color-mix(in srgb, var(--warn) 10%, transparent);color:var(--warn-fg)} :root[data-theme="light"] .src.err{background:color-mix(in srgb, var(--bad) 10%, transparent);color:var(--bad-fg)} :root[data-theme="light"] .user-ava{background:var(--avatar-bg);color:var(--avatar-fg)} :root[data-theme="light"] .page-switch{background:var(--panel-2);border-color:transparent} :root[data-theme="light"] .page-switch button{color:var(--txt-3)} :root[data-theme="light"] .page-switch button.on{color:var(--seg-on-fg);background:var(--seg-on-bg);border-color:var(--seg-on-bg)} :root[data-theme="light"] .seg,:root[data-theme="light"] .mini-seg{background:var(--panel-2);border-color:transparent} :root[data-theme="light"] .seg button,:root[data-theme="light"] .mini-seg button{color:var(--txt-2)} :root[data-theme="light"] .seg button.on,:root[data-theme="light"] .mini-seg button.on{color:var(--seg-on-fg);background:var(--seg-on-bg);border-color:var(--seg-on-bg);box-shadow:none} :root[data-theme="light"] .select,:root[data-theme="light"] .btn,:root[data-theme="light"] .btn-ghost, :root[data-theme="light"] .picker-row input,:root[data-theme="light"] .picker-quick button, :root[data-theme="light"] .ch-btn,:root[data-theme="light"] .chip{background:var(--panel);border-color:var(--stroke);color:var(--txt-2)} :root[data-theme="light"] .select:hover,:root[data-theme="light"] .btn:hover,:root[data-theme="light"] .btn-ghost:hover, :root[data-theme="light"] .ch-btn:hover,:root[data-theme="light"] .chip:hover{background:var(--bg);border-color:var(--stroke-2);color:var(--txt)} :root[data-theme="light"] .btn-primary,:root[data-theme="light"] .btn-primary:hover{color: var(--primary-fg);background: var(--primary-bg);border-color: var(--primary-bg)} :root[data-theme="light"] .btn-primary:hover{background: var(--primary-bg)} :root[data-theme="light"] .ch-btn.on{color:var(--txt);background:var(--panel);border-color:var(--stroke-2)} :root[data-theme="light"] .ch-btn[data-ch="meta"].on{box-shadow:inset 0 -2px 0 var(--brand-meta)} :root[data-theme="light"] .ch-btn[data-ch="tiktok"].on{box-shadow:inset 0 -2px 0 var(--brand-tiktok-ink)} :root[data-theme="light"] .picker-btn.on{color:var(--c1);background:color-mix(in srgb, var(--c1) 8%, transparent);border-color:color-mix(in srgb, var(--c1) 28%, transparent)} :root[data-theme="light"] .chip.on{color:var(--c1);background:color-mix(in srgb, var(--c1) 8%, transparent);border-color:color-mix(in srgb, var(--c1) 30%, transparent)} :root[data-theme="light"] .chip-wa.on{color:var(--wa);background:color-mix(in srgb, var(--ok) 10%, transparent);border-color:color-mix(in srgb, var(--ok) 30%, transparent)} /* поверхности и карточки */ :root[data-theme="light"] .feed li{background:var(--panel)} :root[data-theme="light"] .drawer,:root[data-theme="light"] .picker{background:var(--panel)} :root[data-theme="light"] .kpi{background:var(--panel)} :root[data-theme="light"] .kpi:hover,:root[data-theme="light"] .kpi-click:hover{background:var(--panel);border-color:var(--stroke-2)} :root[data-theme="light"] .kpi-active{background:var(--panel);border-color:color-mix(in srgb, var(--warn) 45%, transparent)} :root[data-theme="light"] .kpi-val{color:var(--txt);-webkit-text-fill-color:currentColor;background:none} :root[data-theme="light"] .axis{stroke:color-mix(in srgb, var(--ink) 8%, transparent)} :root[data-theme="light"] .tbl tbody tr:hover{background:var(--sticky-col-hover)} :root[data-theme="light"] .tbl tbody tr{border-bottom-color:var(--stroke)} :root[data-theme="light"] .delta.up{color:var(--ok-fg);background:color-mix(in srgb, var(--ok) 10%, transparent)} :root[data-theme="light"] .delta.down{color:var(--bad-fg);background:color-mix(in srgb, var(--bad) 9%, transparent)} :root[data-theme="light"] .banner{background:linear-gradient(90deg,color-mix(in srgb, var(--brand) 18%, transparent),color-mix(in srgb, var(--brand) 5%, transparent));border-color:color-mix(in srgb, var(--warn) 35%, transparent)} :root[data-theme="light"] .banner-err{background:linear-gradient(90deg,color-mix(in srgb, var(--bad) 10%, transparent),color-mix(in srgb, var(--bad) 2%, transparent));border-color:color-mix(in srgb, var(--bad) 30%, transparent)} :root[data-theme="light"] .theme-btn .moon{display:none} :root:not([data-theme="light"]) .theme-btn .sun{display:none} /* ЦЕНТР STRUCTURE PASS — структурный передел (24.08.2026). Принципы Stripe / Vercel / Linear: воздух и единая сетка (8px-ритм), hero-KPI с очень крупными числами, высокие строки таблиц, группы-разделители, чипы вместо крашеного текста. Только вид — логика и данные не тронуты. ============================================================ */ /* ── масштаб и воздух ── */ body{font-size:14px} .scroll{padding:34px 44px 72px} .view{max-width:1560px;gap:28px} .grid-2{gap:20px} .card{padding:24px;border-radius:var(--r-lg);backdrop-filter:none} .card-head{margin-bottom:20px} .card-head h3{font-size:15.5px;font-weight:700;letter-spacing:-.2px} .card-head p{font-size:12.5px;line-height:1.55;margin-top:5px;max-width:760px} .legend{font-size:11px;gap:14px} .chart{height:280px} .donut-wrap{height:280px} .banner{padding:16px 20px;border-radius:var(--r-lg);gap:16px} .banner b{font-size:14px} .banner p{font-size:13px;line-height:1.5;margin-top:4px} .skeleton{height:130px;border-radius:var(--r-lg)} /* ── шапка страницы ── */ .topbar{padding:20px 44px;column-gap:28px} .eyebrow{font-size:9.5px;margin-bottom:6px} .topbar h1{font-size:27px;font-weight:750;letter-spacing:-1.1px} .crumb{font-size:13px;margin-top:5px} .seg button{padding:8px 12px;font-size:12.5px;font-weight:600} .select,.btn{padding:9px 13px;font-size:13px} .btn-ghost{width:38px;height:36px} .ch-btn{min-height:36px;padding:8px 12px;font-size:12px} .mini-seg button{min-width:32px;padding:6px 9px;font-size:11.5px} /* ── сайдбар ── */ .app{grid-template-columns:250px 1fr} .app.nav-collapsed{grid-template-columns:74px 1fr} .sidebar{padding:26px 18px 18px} .sidebar .logo{margin-bottom:24px} .nav-label{font-size:9.5px;padding:0 12px 10px} .nav-item{min-height:44px;font-size:13.5px;border-radius:var(--r-md);gap:12px} .nav-item svg{width:18px;height:18px} .page-switch{min-height:40px;margin-bottom:20px} .page-switch button{font-size:11px} /* ── KPI: hero-ряд (деньги) + компактный второй эшелон ── */ .kpis{grid-template-columns:repeat(12,1fr);gap:16px} .kpi{grid-column:span 3;min-height:118px;padding:18px 20px;border-radius:var(--r-lg)} .kpi::after{display:none} .kpi:hover,.kpi-click:hover{transform:none} .kpi-label{font-size:11px;font-weight:650;letter-spacing:.02em;color:var(--txt-3);padding-right:0} .kpi-val{margin:12px 0 9px;font-size:23px;letter-spacing:-1px} .kpi-foot{font-size:11.5px;line-height:1.45;color:var(--txt-3);white-space:normal} .kpi-hero{order:-1;grid-column:span 3;min-height:172px;padding:24px} .kpi-hero .kpi-label{font-size:12.5px;font-weight:650;color:var(--txt-2)} .kpi-hero .kpi-val{margin:16px 0 12px;font-size:42px;letter-spacing:-2.2px;font-weight:650} .kpi-hero .kpi-foot{font-size:12px} #kpiRow .kpi:not(.kpi-hero){grid-column:span 4;min-height:104px;padding:16px 18px} .kpi-active{box-shadow:inset 0 0 0 2px var(--brand)} .delta{padding:3px 8px;border-radius:var(--r-sm);font-size:10.5px;font-weight:700} @media(max-width:1420px){ .kpi-hero{grid-column:span 6} .kpi{grid-column:span 4} #kpiRow .kpi:not(.kpi-hero){grid-column:span 4} } @media(max-width:1000px){ .kpi,.kpi-hero,#kpiRow .kpi:not(.kpi-hero){grid-column:span 6} } /* ── таблицы: крупнее, выше, с группами ── */ .tbl{font-size:13.5px} .tbl thead th{padding:14px 16px;font-size:10.5px;font-weight:700;letter-spacing:.09em} .tbl td{padding:15px 16px;line-height:1.4} .table-scroll{max-height:calc(100vh - 236px)} .spk-tbl{font-size:13px} .spk-tbl thead th,.spk-tbl td{padding:12px 14px} .acct-tbl td{padding:17px 16px;font-size:13.5px} /* денежные колонки Обзора: Расход · Продажи · Выручка нетто · ROAS */ .acct-tbl td:nth-child(3),.acct-tbl td:nth-child(8), .acct-tbl td:nth-child(9),.acct-tbl td:nth-child(10){font-weight:700;color:var(--txt)} .tbl tfoot td{font-weight:700;border-top:2px solid var(--stroke-2)} /* группы-разделители */ tr.sum-week td,tr.sum-total td{background:var(--th-bg)!important;font-weight:700;color:var(--txt);border-top:1px solid var(--stroke-2);border-bottom:1px solid var(--stroke-2)} tr.cr-grp>td{background:var(--th-bg);font-weight:650} .mgr-tbl tr.mgr-sec td{padding:12px 14px 7px;font-size:10px;letter-spacing:.09em} /* ── чипы значений (вердикты/пороговые метрики) вместо крашеных ячеек ── */ td.spk-blue,td.spk-green,td.spk-yellow,td.spk-red{background-image:none!important;font-weight:inherit} .vchip{ display:inline-block;min-width:46px;text-align:center; padding:4px 10px;border-radius:var(--r-sm); font-family:var(--font-mono);font-size:11.5px;font-weight:700;line-height:1.35; background:var(--panel-2); } /* статусные бейджи (АКТИВНО / НА ПАУЗЕ / ЕСТЬ ПРОБЛЕМЫ) */ .badge{font-size:9.5px;font-weight:750;padding:4px 9px;border-radius:var(--r-sm);letter-spacing:.07em} /* ── светлая тема: цвета чипов и групп ── */ :root[data-theme="light"] .vchip{background:var(--panel-2)} :root[data-theme="light"] td.spk-green .vchip{background:color-mix(in srgb, var(--ok) 13%, transparent);color:var(--ok-fg)} :root[data-theme="light"] td.spk-yellow .vchip{background:color-mix(in srgb, var(--warn) 13%, transparent);color:var(--warn-fg)} :root[data-theme="light"] td.spk-red .vchip{background:color-mix(in srgb, var(--bad) 12%, transparent);color:var(--bad-fg)} :root[data-theme="light"] td.spk-blue .vchip{background:color-mix(in srgb, var(--c1) 11%, transparent);color:var(--c1)} :root[data-theme="light"] td.spk-green{color:var(--ok-fg)} :root[data-theme="light"] td.spk-yellow{color:var(--warn-fg)} :root[data-theme="light"] td.spk-red{color:var(--bad-fg)} :root[data-theme="light"] td.spk-blue{color:var(--c1)} :root[data-theme="light"] tr.sum-week td,:root[data-theme="light"] tr.sum-total td{background:var(--th-bg)!important} :root[data-theme="light"] tr.cr-grp>td{background:var(--panel)} :root[data-theme="light"] .kpi-hero{box-shadow:0 1px 2px color-mix(in srgb, var(--shadow-ink) 4%, transparent),0 16px 40px -30px color-mix(in srgb, var(--shadow-ink) 18%, transparent)} :root[data-theme="light"] .kpi-active{box-shadow:inset 0 0 0 2px var(--brand),0 1px 2px color-mix(in srgb, var(--shadow-ink) 4%, transparent)} /* ЦЕНТР SHEETS PASS — плотная рабочая таблица (24.08.2026). Эталон — Google Sheets: компактные строки ~27–30px, сплошная сетка ячеек (вертикальные и горизонтальные линии), серая шапка, freeze шапки и первого столбца (уже были), условное форматирование вместо пилюль. Максимум данных на экран. Гамма NETTO сохранена. Финальная секция — последнее слово. ============================================================ */ /* ── каркас: минимум воздуха ── */ body{font-size:13px} .scroll{padding:12px 16px 40px} .view{max-width:none;gap:10px} .grid-2{gap:10px} .card{padding:10px 12px;border-radius:var(--r-lg);box-shadow:none} .card-head{margin-bottom:8px} .card-head h3{font-size:13px;font-weight:700} .card-head p{font-size:11px;line-height:1.4;margin-top:2px} .legend{font-size:10px;gap:10px} .chart{height:205px} .donut-wrap{height:205px} .banner{padding:8px 12px;border-radius:var(--r-lg);gap:10px} .banner-ico{font-size:15px} .banner b{font-size:12.5px} .banner p{font-size:11.5px;line-height:1.4;margin-top:2px} .skeleton{height:56px;border-radius:var(--r-lg)} .table-scroll{max-height:calc(100vh - 178px)} /* ── шапка страницы: одна плотная строка ── */ .topbar{padding:8px 16px;column-gap:14px;row-gap:6px} .eyebrow{display:none} .topbar h1{font-size:16px;font-weight:750;letter-spacing:-.3px} .crumb{font-size:11px;margin-top:1px} .seg{padding:2px;border-radius:var(--r-md)} .seg button{padding:5px 9px;font-size:11.5px;border-radius:var(--r-sm)} .select,.btn{padding:6px 10px;font-size:11.5px;border-radius:var(--r-md)} .btn-ghost{width:30px;height:28px;padding:5px;border-radius:var(--r-md)} .ch-btn{min-height:28px;padding:5px 9px;font-size:11px;border-radius:var(--r-md)} .mini-seg{min-height:28px;padding:2px;border-radius:var(--r-md)} .mini-seg button{min-width:26px;padding:4px 7px;font-size:10.5px;border-radius:var(--r-sm)} .frz-ctl{padding:2px 4px;border-radius:var(--r-md);font-size:10.5px} .chip{padding:4px 9px;font-size:11px;border-radius:var(--r-md)} .search input{padding:6px 0;font-size:12px} /* ── сайдбар компактный ── */ .app{grid-template-columns:212px 1fr} .app.nav-collapsed{grid-template-columns:64px 1fr} .sidebar{padding:12px 10px 10px} .sidebar .logo{margin-bottom:10px} .logo{gap:9px;padding:2px 4px} .logo-mark{width:30px;height:30px;padding:7px;border-radius:var(--r-md)} .logo-text b{font-size:13.5px;gap:5px} .logo-text span{font-size:8.5px} .brand-badge{font-size:8px;padding:2px 5px;border-radius:var(--r-sm);letter-spacing:.11em} .page-switch{min-height:32px;margin-bottom:10px} .page-switch button{font-size:10px;padding:5px 7px} .nav-label{font-size:8.5px;padding:0 9px 6px} .nav{gap:2px} .nav-item{min-height:32px;padding:6px 9px;font-size:12.5px;border-radius:var(--r-md);gap:9px} .nav-item svg{width:15px;height:15px} .nav-collapse{min-height:30px;padding:6px 9px;font-size:10.5px} .sync-card{padding:8px 10px;border-radius:var(--r-md)} .user-chip{min-height:40px;padding:6px} /* ── KPI: плотная полоса ячеек с сеткой (не карточки) ── */ .kpis{ display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr)); gap:0;background:var(--panel);border:1px solid var(--grid); border-radius:var(--r-lg);overflow:hidden; } .kpi,.kpi-hero,#kpiRow .kpi:not(.kpi-hero){ grid-column:auto;order:0;min-height:0;padding:6px 10px 5px; border:0;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid); border-radius:0;background:var(--panel);box-shadow:none;animation:none; margin-right:-1px;margin-bottom:-1px; } .kpi:hover,.kpi-click:hover,.kpi-hero:hover{transform:none;background:var(--panel-2)} .kpi-label,.kpi-hero .kpi-label{font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--txt-3)} .kpi-val,.kpi-hero .kpi-val{margin:3px 0 2px;font-size:16.5px;font-weight:700;letter-spacing:-.4px;font-family:var(--font-mono)} .kpi-hero .kpi-val{font-size:19px} .kpi-foot,.kpi-hero .kpi-foot{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:10px;line-height:1.3;color:var(--txt-3);white-space:normal;overflow:hidden} .kpi-foot .delta{margin-right:4px} .delta{padding:0 2px;border-radius:3px;font-size:9.5px;font-weight:750;background:none} .delta.up{background:none} .delta.down{background:none} .kpi-active{box-shadow:inset 0 0 0 2px var(--brand)} .kpi::after{display:none} /* ── ТАБЛИЦЫ: сетка как в Sheets ── */ .tbl{font-size:12.5px} .tbl thead th{ padding:6px 10px;font-size:10px;font-weight:750;letter-spacing:.05em; border-bottom:1px solid var(--grid);border-right:1px solid var(--grid); } .tbl td{ padding:5px 10px;line-height:1.35; border-bottom:1px solid var(--grid);border-right:1px solid var(--grid); } .tbl th:last-child,.tbl td:last-child{border-right:0} .spk-tbl{font-size:12px} .spk-tbl thead th,.spk-tbl td{padding:5px 9px} .acct-tbl td{padding:5px 10px;font-size:12.5px} .sum-tbl td.num,.sum-tbl th.num{min-width:56px} .mgr-tbl th.num,.mgr-tbl td.num{min-width:64px} /* зебру выключаем — вместо неё сетка (первый липкий столбец остаётся непрозрачным) */ .tbl tbody tr:nth-child(even) td{background:transparent} .tbl tbody tr:nth-child(even) td:first-child{background:var(--sticky-col)} .cr-tbl tbody tr:nth-child(even) td.frz{background:var(--sticky-col)} .tbl tbody tr:hover td:first-child{background:var(--sticky-col-hover)} /* итоги и группы — серые полосы как subtotal в Sheets */ .tbl tfoot td{font-weight:750;background:var(--th-bg);border-top:2px solid var(--stroke-2)} tr.sum-week td,tr.sum-total td{padding:5px 10px;background:var(--th-bg)!important;font-weight:750;border-top:1px solid var(--stroke-2);border-bottom:1px solid var(--stroke-2)} tr.cr-grp>td{background:var(--th-bg);font-weight:700} .mgr-tbl tr.mgr-sec td{padding:6px 9px 4px;font-size:9.5px} /* условное форматирование вместо пилюль: цветной жирный текст + лёгкая заливка ячейки */ .vchip{display:inline;min-width:0;padding:0;border-radius:0;background:none!important;font-size:inherit;font-weight:750;font-family:var(--font-mono)} td.spk-blue,td.spk-green,td.spk-yellow,td.spk-red{font-weight:700} td.spk-blue{background-image:linear-gradient(color-mix(in srgb, var(--c1) 10%, transparent),color-mix(in srgb, var(--c1) 10%, transparent))!important} td.spk-green{background-image:linear-gradient(color-mix(in srgb, var(--ok) 10%, transparent),color-mix(in srgb, var(--ok) 10%, transparent))!important} td.spk-yellow{background-image:linear-gradient(color-mix(in srgb, var(--warn) 10%, transparent),color-mix(in srgb, var(--warn) 10%, transparent))!important} td.spk-red{background-image:linear-gradient(color-mix(in srgb, var(--bad) 10%, transparent),color-mix(in srgb, var(--bad) 10%, transparent))!important} :root[data-theme="light"] td.spk-blue{background-image:linear-gradient(color-mix(in srgb, var(--c1) 7%, transparent),color-mix(in srgb, var(--c1) 7%, transparent))!important} :root[data-theme="light"] td.spk-green{background-image:linear-gradient(color-mix(in srgb, var(--ok) 8%, transparent),color-mix(in srgb, var(--ok) 8%, transparent))!important} :root[data-theme="light"] td.spk-yellow{background-image:linear-gradient(color-mix(in srgb, var(--warn) 8%, transparent),color-mix(in srgb, var(--warn) 8%, transparent))!important} :root[data-theme="light"] td.spk-red{background-image:linear-gradient(color-mix(in srgb, var(--bad) 7%, transparent),color-mix(in srgb, var(--bad) 7%, transparent))!important} /* статусные бейджи — маленькие плоские метки */ .badge{font-size:8.5px;font-weight:750;padding:2px 6px;border-radius:var(--r-sm);letter-spacing:.05em} /* превью-миниатюры в «Креативах» компактнее */ .thumb-img,.thumb-empty,.thumb-grp{width:24px;height:24px;border-radius:var(--r-sm)} /* шапка серой заливкой в светлой теме */ :root[data-theme="light"] .tbl thead th{background:var(--th-bg);color:var(--txt-2)} :root[data-theme="light"] .kpis{background:var(--panel)} /* транспонированная «Сводная»: недельные/итоговый столбцы — серые, как subtotal */ .sum-tbl th.sum-wcol,.sum-tbl td.sum-wcol{background:var(--th-bg)!important;font-weight:750;border-left:1px solid var(--stroke-2)} /* ── модалка графика Сводной ── */ .modal-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--ink) 45%, transparent);padding:20px} .modal-ov.hidden{display:none} .modal-box{width:min(960px,100%);background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r-lg);box-shadow:0 24px 70px -30px color-mix(in srgb, var(--shadow-ink) 45%, transparent);padding:14px 16px 16px} .modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .modal-head b{font-size:14px;font-weight:750} .modal-sub{font-size:11px;color:var(--txt-3);margin:2px 0 10px} .sum-metric{cursor:pointer} .sum-metric:hover{color:var(--c1)!important;text-decoration:underline;text-underline-offset:3px} /* свои пресеты столбцов */ .crcol-mine{border-top:1px dashed var(--stroke);margin-top:6px;padding-top:8px} .chip .chip-x{display:inline-block;margin-left:6px;font-style:normal;opacity:.55;cursor:pointer} .chip .chip-x:hover{opacity:1;color:var(--bad)} .chip-add{border-style:dashed} #sumSrcBtn.on{color:var(--c1);background:color-mix(in srgb, var(--c1) 8%, transparent);border-color:color-mix(in srgb, var(--c1) 30%, transparent)} /* ЦЕНТР CHART V2 — контролы наложения, легенда, ховер-тултип (25.08.2026) */ .modal-ctl{display:flex;flex-direction:column;gap:5px;margin:2px 0 10px} .ctl-row{display:flex;align-items:flex-start;gap:8px} .ctl-lbl{flex:none;width:58px;padding-top:4px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3)} .ctl-chips{display:flex;flex-wrap:wrap;gap:4px;max-height:64px;overflow-y:auto} .chip.mini{padding:3px 8px;font-size:10.5px;border-radius:var(--r-sm)} .modal-sub .lg{display:inline-flex;align-items:center;gap:5px;margin-right:10px;font-weight:600;color:var(--txt-2)} .modal-sub .lg i{width:9px;height:9px;border-radius:3px;display:inline-block} #sumChartBody .chart-tip{opacity:1;transition:none;transform:none;min-width:150px;border-radius:var(--r-md);padding:7px 9px;font-size:11px;box-shadow:0 10px 30px -12px color-mix(in srgb, var(--shadow-ink) 35%, transparent)} #sumChartBody .chart-tip.hidden{display:none} .chart-tip .th2{font-weight:750;margin-bottom:4px;font-size:11px} .chart-tip .tr span{color:var(--txt-2);flex:1;white-space:nowrap;margin-right:8px} .chart-tip .tr b{font-family:var(--font-mono);font-weight:700} #sumChartSvg text{font-weight:400} /* ЦЕНТР CHART V3 — тонкие оси, контролы масштаба, строка CTWA в кабинетах (26.08) */ #sumChartSvg text{font-weight:300} /* 26.10.2026: общее svg{stroke:currentColor;stroke-width:1.8} (строка 26, для иконок) наследовали подписи осей и точки графика: цифры выходили жирными и расплывшимися, точки в чёрной рамке. У линий, сетки и заливки обводка задана своя. */ #sumChartSvg{stroke:none;stroke-width:1} .axis-txt{font-size:9.5px;font-weight:300} .ctl-note{font-size:10.5px;color:var(--txt-3);padding-top:4px} .lg-rng{font-size:9.5px;color:var(--txt-3);font-weight:400;margin-left:2px} tr.acct-ctwa td{color:var(--txt-2);font-style:normal;background:color-mix(in srgb, var(--wa) 5%, transparent)!important;border-top:1px dashed var(--stroke)} tr.acct-ctwa td:first-child{padding-left:22px;font-size:11.5px} /* ЦЕНТР DARK PASS — тёмная тема того же качества, что светлая (26.08). Светлый Sheets-вид опирается на --grid/--th-bg/--sticky-col-hover; в тёмной они либо не были определены, либо оставались от старых скинов. Здесь — полный тёмный комплект: глубокий фон, серо-синие служебные полосы, те же акценты. */ :root:not([data-theme="light"]) .tbl thead th{background:var(--th-bg);color:var(--txt-2)} :root:not([data-theme="light"]) tr.sum-week td, :root:not([data-theme="light"]) tr.sum-total td{background:var(--th-bg)!important} :root:not([data-theme="light"]) .tbl tfoot td{background:var(--th-bg)} :root:not([data-theme="light"]) .sum-tbl th.sum-wcol, :root:not([data-theme="light"]) .sum-tbl td.sum-wcol{background:var(--th-bg)!important} :root:not([data-theme="light"]) .kpis{background:var(--grid);border-color:var(--grid)} :root:not([data-theme="light"]) .kpi, :root:not([data-theme="light"]) .kpi-hero{background:var(--panel)} :root:not([data-theme="light"]) .kpi:hover, :root:not([data-theme="light"]) .kpi-click:hover{background:var(--panel-2)} /* условное форматирование: те же оттенки, что в светлой, но глубже — текст не тонет */ :root:not([data-theme="light"]) td.spk-blue{background-image:linear-gradient(color-mix(in srgb, var(--c1) 13%, transparent),color-mix(in srgb, var(--c1) 13%, transparent))!important} :root:not([data-theme="light"]) td.spk-green{background-image:linear-gradient(color-mix(in srgb, var(--ok) 13%, transparent),color-mix(in srgb, var(--ok) 13%, transparent))!important} :root:not([data-theme="light"]) td.spk-yellow{background-image:linear-gradient(color-mix(in srgb, var(--warn) 13%, transparent),color-mix(in srgb, var(--warn) 13%, transparent))!important} :root:not([data-theme="light"]) td.spk-red{background-image:linear-gradient(color-mix(in srgb, var(--bad) 13%, transparent),color-mix(in srgb, var(--bad) 13%, transparent))!important} :root:not([data-theme="light"]) .modal-box{background:var(--panel);border-color:var(--stroke-2)} :root:not([data-theme="light"]) #sumChartBody .chart-tip{background:var(--tip-bg);border-color:var(--stroke-2)} :root:not([data-theme="light"]) tr.acct-ctwa td{background:color-mix(in srgb, var(--wa) 8%, transparent)!important} :root:not([data-theme="light"]) #sumSrcBtn.on{color:var(--c1);background:color-mix(in srgb, var(--c1) 12%, transparent);border-color:color-mix(in srgb, var(--c1) 35%, transparent)} :root:not([data-theme="light"]) .chip.mini.on{background:color-mix(in srgb, var(--c1) 16%, transparent);border-color:color-mix(in srgb, var(--c1) 40%, transparent)} /* конверсии этапов («% Конверсии»): отдельный слой — приглушённый текст + тонированный фон */ .sum-tbl th.sum-conv{color:var(--txt-3);font-weight:600;background-image:linear-gradient(color-mix(in srgb, var(--c1) 5%, transparent),color-mix(in srgb, var(--c1) 5%, transparent))} .sum-tbl td.sum-conv{color:var(--txt-3);background-image:linear-gradient(color-mix(in srgb, var(--c1) 4%, transparent),color-mix(in srgb, var(--c1) 4%, transparent))} :root:not([data-theme="light"]) .sum-tbl th.sum-conv{background-image:linear-gradient(color-mix(in srgb, var(--c1) 9%, transparent),color-mix(in srgb, var(--c1) 9%, transparent))} :root:not([data-theme="light"]) .sum-tbl td.sum-conv{background-image:linear-gradient(color-mix(in srgb, var(--c1) 7%, transparent),color-mix(in srgb, var(--c1) 7%, transparent))} /* список столбцов: раскрывающиеся категории */ .col-grp{border-top:1px solid var(--stroke);margin:2px 0} .col-grp summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:7px 6px;font-size:11.5px;font-weight:750;color:var(--txt-2);user-select:none} .col-grp summary::before{content:'▸';font-size:10px;color:var(--txt-3);transition:transform .12s} .col-grp[open] summary::before{transform:rotate(90deg)} .col-grp summary i{margin-left:auto;font-style:normal;font-size:10px;color:var(--txt-3);font-weight:600} .col-grp .sum-colrow{padding-left:14px} #sumConvBtn.on,#mgrConvBtn.on{color:var(--c1);background:color-mix(in srgb, var(--c1) 8%, transparent);border-color:color-mix(in srgb, var(--c1) 30%, transparent)} :root:not([data-theme="light"]) #sumConvBtn.on,:root:not([data-theme="light"]) #mgrConvBtn.on{background:color-mix(in srgb, var(--c1) 12%, transparent);border-color:color-mix(in srgb, var(--c1) 35%, transparent)} /* ЦЕНТР TABS — единая шапка приложений (pulse / доска / ИИ-агент), 01.09.2026. Такая же полоска вставлена в доску: переходы между приложениями читаются как вкладки одного продукта, а не как разные сайты. */ /* Полоса вкладок соседних приложений. Высота задана явно и вычитается из .app: у приложения height:100vh, поэтому без вычитания страница становится выше экрана ровно на высоту полосы, и шапка с кнопками периода уезжает под неё. Именно это и произошло. z-index ниже выдвижной панели (41) и модалок (120) — они должны накрывать полосу, а не наоборот. Логотипа здесь нет: в pulse он уже есть в боковом меню, два одинаковых подряд выглядели неряшливо. На доске, где бокового меню нет, логотип в полосе остаётся. */ .kt-bar{display:flex;align-items:center;gap:2px;height:var(--kt-h);box-sizing:border-box; padding:0 16px;background:var(--panel);border-bottom:1px solid var(--stroke); font:600 12.5px/1 var(--font);position:relative;z-index:39} .kt-brand{font-weight:800;letter-spacing:-.2px;margin-right:14px;color:var(--txt);font-size:13px;white-space:nowrap} .kt-brand span{color:var(--brand-ink,var(--txt));background:var(--brand,var(--brand));border-radius:var(--r-sm);padding:2px 5px;margin-left:5px;font-size:9px;letter-spacing:.1em} .kt-item{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-md); color:var(--txt-3);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s} .kt-item:hover{background:var(--panel-2);color:var(--txt)} .kt-item.on{background:var(--brand,var(--brand));color:var(--brand-ink,var(--txt))} .app{height:calc(100vh - var(--kt-h))} /* ============================================================ ДОСТУПЫ: панель разового пароля, быстрый выбор кабинетов, отключённые строки. Дописано 01.09.2026 вместе с разделами прав. ============================================================ */ .pw-once{margin:0 0 14px;padding:14px 16px;border:1px solid var(--warn,var(--warn)); border-radius:var(--r-md);background:color-mix(in srgb,var(--warn,var(--warn)) 8%,transparent)} .pw-once.hidden{display:none} .pw-head{font-weight:700;font-size:13px;margin-bottom:8px} .pw-body{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pw-body code{font:600 17px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em;padding:7px 12px;border-radius:var(--r-sm); background:var(--panel,var(--panel));border:1px solid var(--rule,var(--stroke));user-select:all} .pw-note{margin-top:8px;font-size:12px;color:var(--txt-3,var(--txt-3))} .af-pw{display:flex;gap:6px;align-items:center} .af-pw input{flex:1;min-width:0} .af-quick{display:inline-flex;gap:6px;margin-left:12px} .af-quick .mini-btn{font-size:11px} .admin-tbl tr.row-off{opacity:.55} .admin-tbl tr.row-off b{text-decoration:line-through} /* ============================================================ ЗНАМЕНАТЕЛИ (02.09.2026). Процент показываем только когда оба его числа стоят в таблице; иначе — прочерк с объяснением, какой столбец включить. Шапка процентной колонки прямо называет, что на что делится. ============================================================ */ .th-den{display:block;font-weight:500;font-size:9.5px;letter-spacing:.02em; color:var(--txt-3);margin-top:2px;text-transform:none} td.sum-nodiv{color:var(--txt-3);opacity:.65;cursor:help} /* ============================================================ РАСКРЫТИЕ ЧИСЕЛ (03.09.2026): клик по ячейке — список сделок, из которых она собрана. Смысл в доверии: владелец открывает и пересчитывает руками. ============================================================ */ .drill-box{max-width:min(1100px,94vw);width:1100px} .drill-body{max-height:64vh;overflow:auto;margin-top:10px} .drill-tbl{width:100%;border-collapse:collapse;font-size:12px} .drill-tbl th{position:sticky;top:0;background:var(--th-bg,var(--panel));text-align:left; padding:8px 9px;border-bottom:2px solid var(--stroke);font-weight:650;white-space:nowrap;z-index:1} .drill-tbl td{padding:7px 9px;border-bottom:1px solid var(--rule,var(--stroke));vertical-align:top} .drill-tbl tr:hover td{background:var(--panel-2)} .drill-tbl td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .drill-why{color:var(--txt-3);font-size:11px} .drill-tbl a{color: var(--link);text-decoration:none} .drill-tbl a:hover{text-decoration:underline} /* Ячейка, которую можно раскрыть, — подчёркнута пунктиром: приглашение, не украшение */ td.num.drillable{cursor:zoom-in;text-decoration:underline dotted var(--txt-3) 1px;text-underline-offset:3px} .drill-warn{margin:8px 0;padding:9px 11px;border-radius:var(--r-md);font-size:12px; border:1px solid var(--warn,var(--warn));background:color-mix(in srgb,var(--warn,var(--warn)) 9%,transparent)} /* ============================================================ ВОЗВРАТЫ (03.09.2026): продажа была, деньги пришли, сделка позже ушла в отказ. Кассу не уменьшают — видны отдельно, всегда, без переключателя. ============================================================ */ tr.drill-return td{background:color-mix(in srgb,var(--danger,var(--bad)) 6%,transparent)} .drill-return-tag{display:inline-block;padding:1px 6px;border-radius:var(--r-sm);font-size:10px; font-weight:650;letter-spacing:.02em;background:var(--danger,var(--bad));color:var(--on-accent);vertical-align:middle} #returnsBanner .btn-ghost{font-size:12px;padding:5px 10px} /* Соседние приложения (ИИ-агент, доска) внутри рабочего пространства: iframe на всю область прокрутки. Заголовок и подпись раздела остаются сверху, как у остальных. */ /* Бесшовная рамка: без границы и фона, высота — по содержимому (сосед шлёт её postMessage), прокрутка одна — внешняя .scroll. */ .view-embed{gap:14px} .view-embed .embed{display:block;width:100%;min-height:320px;border:0;border-radius:0;background:transparent} #engFrames iframe.hidden{display:none} /* Встречи по менеджерам (из доски онлайн-отдела, 11.09.2026) */ .meet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px} .meet-col{background:linear-gradient(180deg,var(--card-1),var(--card-2));border:1px solid var(--stroke);border-radius:var(--r-lg);padding:10px 12px;min-height:60px} .meet-col h4{font-size:12.5px;font-weight:600;margin-bottom:6px;display:flex;justify-content:space-between;gap:6px} .meet-col h4 span{color:var(--txt-3);font-weight:500;font-variant-numeric:tabular-nums} .meet{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid color-mix(in srgb, var(--c1) 12%, transparent);font-size:12.5px} .meet:first-of-type{border-top:0} .meet .t{font-variant-numeric:tabular-nums;color:var(--txt-2);width:38px;flex:none} .meet .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .meet .n a{color:inherit;text-decoration:none} .meet .n a:hover{text-decoration:underline} .meet .s{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700} .meet.came .s{background:color-mix(in srgb, var(--ok) 18%, transparent);color:var(--ok)} .meet.no .s{background:color-mix(in srgb, var(--bad) 18%, transparent);color:var(--bad)} .meet.wait .s{background:color-mix(in srgb, var(--warn) 18%, transparent);color:var(--warn)} .meet.future .s{background:color-mix(in srgb, var(--c1) 18%, transparent);color:var(--txt-3)} .meet-day{font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.5px;margin:12px 0 6px} .meet-day:first-child{margin-top:0} .eng-list{font-size:12.5px;color:var(--txt-2);line-height:1.6} .eng-list b{color:var(--txt)} /* ---------- доступность (волна 1, 14.09.2026) ---------- Закрытые всплывашки были скрыты только прозрачностью: Tab проходил по 50 кнопкам календаря и списков столбцов. Теперь они и правда скрыты. Фокус на тумблерах виден, кликабельные ячейки/строки (data-kb) показывают фокус, липкие шапки не накрывают сфокусированную строку при прокрутке Tab-ом. */ .picker:not(.on),.crcols-pop:not(.on),.drawer-backdrop:not(.on),.drawer:not(.on){visibility:hidden} .switch:focus-within span{outline:2px solid var(--focus);outline-offset:2px} [data-kb]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .table-scroll{scroll-padding:44px 0 44px 0} /* ---------- волна 2 (14.09.2026): одно состояние «включено» у всех тумблеров тулбара. Раньше: синим у календаря/источника/конверсий, серым у месяцев, а у #sumRangeBtn правила не было. */ .btn.on,.picker-btn.on,#sumSrcBtn.on,#sumConvBtn.on,#sumRangeBtn.on,.sum-months button.on{ background:var(--panel-2);border-color:var(--txt-3);color:var(--txt);font-weight:600;box-shadow:none; } /* ---------- единые диалоги подтверждения и ввода (Dialog в app.js) ---------- */ .dlg-ov{z-index:200;padding:16px} .dlg-box{width:min(420px,100%);padding:20px} .dlg-box .modal-head b{font-size:15px;line-height:1.35} .dlg-text{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--txt-2)} .dlg-text p{margin:0 0 6px} .dlg-field{display:block;margin:14px 0 0} .dlg-field span{display:block;margin-bottom:6px;font-size:11.5px;color:var(--txt-3)} .dlg-input{width:100%;padding:9px 11px;border-radius:var(--r);border:1px solid var(--stroke-2);background:var(--bg-2);color:var(--txt);font:inherit;font-size:13.5px} .dlg-input:focus{outline:2px solid color-mix(in srgb, var(--focus) 70%, transparent);outline-offset:1px} .dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin:18px 0 0} .dlg-actions .btn{min-height:36px;padding:0 14px} /* специфичность выше темовых правил .btn-primary (в т.ч. :root[data-theme] .btn-primary) */ html .dlg-box .btn.dlg-ok.dlg-danger,html .dlg-box .btn.dlg-ok.dlg-danger:hover{background:var(--bad);border-color:var(--bad);color:var(--on-status);box-shadow:none} html .dlg-box .btn.dlg-ok.dlg-danger:hover{filter:brightness(1.06)} /* ---------- ОБЗОР 18.09.2026: одна строка карточек, круговая, воронка-инфографика ---------- */ .kpis-ov{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px} .kpis-ov .kpi{min-width:0;padding:14px 13px} .kpis-ov .kpi-val{font-size:20px;letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kpis-ov .kpi-hero .kpi-val{font-size:20px} .kpis-ov .kpi-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:1560px){.kpis-ov{gap:8px}.kpis-ov .kpi{padding:12px 10px}.kpis-ov .kpi-val,.kpis-ov .kpi-hero .kpi-val{font-size:17px}.kpis-ov .kpi-foot{font-size:9.5px}} @media (max-width:1180px){.kpis-ov{grid-template-columns:repeat(4,minmax(0,1fr))}} .banner-slim{padding:10px 14px;gap:10px;margin-top:14px} .banner-slim .banner-ico{font-size:16px} .banner-slim b{font-size:12.5px}.banner-slim p{font-size:11.5px;margin-top:1px} .link-btn{display:inline;padding:0 0 0 6px;height:auto;border:0;background:none;color:var(--brand-ink,var(--txt));text-decoration:underline;font-size:inherit;cursor:pointer} /* воронка-инфографика: пять столбов, высота — доля от заявок, под шагом — доля от предыдущего */ .funnel-info{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end;padding:6px 4px 0} .fi-step{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center} .fi-conv{font-size:11px;font-weight:650;color:var(--txt-2);margin-bottom:8px;padding:3px 9px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--fc) 12%, transparent);font-variant-numeric:tabular-nums} .fi-conv-first{color:var(--txt-3);background:none} .fi-bar{width:100%;height:150px;display:flex;align-items:flex-end;border-radius:2px;background:var(--track,color-mix(in srgb, var(--txt) 5%, transparent))} .fi-bar i{display:block;width:100%;border-radius:2px;background:var(--fc);transform-origin:bottom;animation:fiGrow .6s cubic-bezier(.2,.75,.2,1) both} @keyframes fiGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}} .fi-val{margin-top:10px;font-size:22px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:var(--txt)} .fi-name{margin-top:2px;font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.06em} .fi-total{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;padding-top:12px;border-top:1px solid var(--stroke);font-size:12px;color:var(--txt-2)} .fi-total b{color:var(--txt);font-variant-numeric:tabular-nums} .fi-note{margin-left:auto;color:var(--txt-3);font-size:10.5px} /* «Источники» в шапке: Meta с кабинетами внутри, TikTok, остальные каналы */ .src-wrap{position:relative} .src-btn.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)} .src-pop{left:0;right:auto;width:320px;padding:6px 0 8px;overflow:auto;z-index:90;max-height:min(72vh,560px)} .src-top{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:10px 14px 8px;border-bottom:1px solid var(--stroke)} .src-top b{font-size:13px;color:var(--txt)} .src-top span{grid-column:1;font-size:10.5px;color:var(--txt-3)} .src-top .btn-ghost{grid-column:2;grid-row:1/3;width:auto;height:30px;padding:0 10px;font-size:12px} .src-list{padding:4px 0} .src-item{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:12.5px;color:var(--txt);cursor:pointer} .src-item:hover{background:var(--panel-2)} .src-item input{width:16px;height:16px;margin:0;accent-color:var(--brand);flex:none} .src-parent{justify-content:space-between;cursor:default} .src-parent label{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;font-weight:600} .src-more{display:inline-flex;align-items:center;gap:4px;flex:none;height:26px;padding:0 9px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--panel);color:var(--txt-2);font:500 11px/1 var(--font);cursor:pointer} .src-more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .15s} .src-more[aria-expanded="true"] svg{transform:rotate(180deg)} .src-kids{margin:0 0 6px 21px;border-left:2px solid var(--stroke)} .src-kid{padding:7px 12px;font-size:12px} .src-kid input:disabled+span{opacity:.45} /* скелетоны: строки-призраки в таблицах и блоках */ .sk-block{display:flex;flex-direction:column;gap:10px;padding:18px 16px;min-height:0} .sk-block i,.sk-row .sk{display:block;height:12px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--txt) 9%, transparent);animation:skPulse 1.2s ease-in-out infinite} .sk-block i:nth-child(1){width:62%}.sk-block i:nth-child(2){width:88%;animation-delay:.12s}.sk-block i:nth-child(3){width:74%;animation-delay:.24s}.sk-block i:nth-child(4){width:46%;animation-delay:.36s} .sk-row td{padding-top:11px;padding-bottom:11px} .sk-row .sk{animation-delay:calc(var(--i, 0) * 70ms)} .sk-inline{display:inline-block;vertical-align:middle;width:260px;max-width:60vw;height:11px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--txt) 9%, transparent);animation:skPulse 1.2s ease-in-out infinite} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @keyframes skPulse{0%,100%{opacity:.45}50%{opacity:1}} /* CAPI: статус одной фразой + живой индикатор */ .capi-hero{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:16px 18px;border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--panel)} .capi-hero.ok{border-color:color-mix(in srgb, var(--ok) 35%, transparent);background:color-mix(in srgb, var(--ok) 6%, var(--panel))} .capi-hero.warn{border-color:color-mix(in srgb, var(--warn) 40%, transparent);background:color-mix(in srgb, var(--warn) 7%, var(--panel))} .capi-hero.bad{border-color:color-mix(in srgb, var(--bad) 40%, transparent);background:color-mix(in srgb, var(--bad) 6%, var(--panel))} .capi-hero-txt{flex:1;min-width:0} .capi-hero b{display:block;font-size:20px;font-weight:700;letter-spacing:-.4px;color:var(--txt)} .capi-hero span{display:block;margin-top:3px;font-size:12px;color:var(--txt-2)} .capi-hero-time{font-size:10.5px;color:var(--txt-3);white-space:nowrap} .capi-live{position:relative;flex:none;width:18px;height:18px;display:grid;place-items:center} .capi-live i{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent);animation:capiPulse 1.6s ease-out infinite} .capi-hero.warn .capi-live i{background:var(--warn);box-shadow:0 0 0 0 color-mix(in srgb, var(--warn) 50%, transparent)} .capi-hero.bad .capi-live i{background:var(--bad);animation:none} @keyframes capiPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent)}100%{box-shadow:0 0 0 12px transparent}} .capi-hero.warn .capi-live i{animation-name:capiPulseWarn} @keyframes capiPulseWarn{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--warn) 55%, transparent)}100%{box-shadow:0 0 0 12px transparent}} /* WhatsApp: рамка переписок во всю ширину */ #view-whatsapp{padding:0} #waFrames iframe.embed{width:100%;border:0;display:block;min-height:360px} /* три числа над разделом (WhatsApp, Процессы, ИИ-агент): одна строка, как карточки Обзора */ .kpis-mini{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px} #waTabs,#engTabs{margin-bottom:12px} /* ---------- 18.09.2026 (вечер): окно сделок, подсветка строк, закреплённый экран ---------- */ /* крестик окна — иконка нормального размера, а не символ 11 px */ .modal-x{width:36px;height:36px;padding:9px;flex:none;display:grid;place-items:center} .modal-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} /* Креативы: наведённая строка подсвечивается целиком тем же тоном, что и закреплённая ячейка. Строки кампаний и групп залиты фоном панели — без этого подсвечивалась только первая ячейка. */ .cr-tbl tbody tr:hover>td, .cr-tbl tbody tr.cr-grp:hover>td, :root[data-theme="light"] .cr-tbl tbody tr.cr-grp:hover>td{background:var(--sticky-col-hover)} /* внутренняя прокрутка таблиц никогда не передаётся странице */ .table-scroll{overscroll-behavior:contain} /* закреплённый экран: страница не листается, таблица занимает оставшуюся высоту */ /* overflow:auto, а не hidden: если всё помещается — листать нечего; если экран слишком мал — страница всё-таки прокрутится, и ничего не обрежется */ .scroll.fit{overflow-y:auto;display:flex;flex-direction:column;padding-bottom:16px} .scroll.fit>.view:not(.hidden){flex:1 1 auto;min-height:0;display:flex;flex-direction:column} .scroll.fit>.view:not(.hidden)>*{flex:none} .scroll.fit>.view:not(.hidden)>.table-card{flex:1 1 auto;min-height:180px;display:flex;flex-direction:column;margin-bottom:0} .scroll.fit>.view:not(.hidden)>.table-card>.table-scroll{flex:1 1 auto;min-height:0;max-height:none;overflow:auto} /* ---------- ОБЗОР, 18.09.2026 (2): восемь карточек крупнее и спокойнее ---------- Было: плотная полоса ячеек (шрифт 17–20 px, нулевые поля), «герои» устроены иначе — числа прыгали по высоте. Стало: одинаковые карточки с воздухом, цветная точка у подписи, крупное число; в один ряд, когда ширины хватает (контейнерный запрос), иначе 4×2. Телефон — в адаптивном слое ниже. */ #view-overview .kpis-wrap{container-type:inline-size;margin-bottom:18px} @media (min-width:901px){ #view-overview #kpiRow.kpis-ov{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0; background:none;border:0;border-radius:0;overflow:visible;box-shadow:none; } @container (min-width:1180px){ #view-overview #kpiRow.kpis-ov{grid-template-columns:repeat(8,minmax(0,1fr))} } #view-overview #kpiRow .kpi{ /* компактнее (владелец: «пропорция шрифта к квадрату маленькая — блок уменьшить»): высоту задаёт содержимое, поля и промежутки меньше, шрифт тот же */ position:relative;order:0;display:flex;flex-direction:column;justify-content:flex-start;gap:5px; min-width:0;min-height:0;margin:0;padding:10px 13px 9px;cursor:pointer; border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--panel); box-shadow:0 1px 2px color-mix(in srgb, var(--shadow-ink) 5%, transparent),0 14px 30px -24px color-mix(in srgb, var(--shadow-ink) 40%, transparent); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;animation:none; } #view-overview #kpiRow .kpi-click:hover{transform:translateY(-2px);background:var(--panel);border-color:color-mix(in srgb, var(--kc) 45%, var(--stroke)); box-shadow:0 1px 2px color-mix(in srgb, var(--shadow-ink) 6%, transparent),0 18px 34px -22px color-mix(in srgb, var(--shadow-ink) 45%, transparent)} #view-overview #kpiRow .kpi-active{border-color:var(--kc);box-shadow:inset 0 0 0 1px var(--kc),0 14px 30px -24px color-mix(in srgb, var(--shadow-ink) 40%, transparent)} #view-overview #kpiRow .kpi-label{display:flex;align-items:center;gap:6px;margin:0;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-overview #kpiRow .kpi-label::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--kc,var(--brand))} /* 24.09.2026: карточки меньше (владелец) — число 18–24px вместо 24–34, поля уже, восемь в ряд уже с 1180px */ #view-overview #kpiRow .kpi-val{margin:0;font-size:clamp(18px,1.9cqi,24px);font-weight:700;letter-spacing:-.6px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} @container (min-width:1180px){ #view-overview #kpiRow .kpi-val{font-size:clamp(17px,1.35cqi,23px)} } /* число — сразу под подписью у всех карточек на одной высоте; пояснение прижато к низу */ #view-overview #kpiRow .kpi-foot{margin:auto 0 0;padding-top:1px;font-size:10.5px;line-height:1.3;color:var(--txt-3);-webkit-line-clamp:2} #view-overview #kpiRow .skeleton{height:84px;border-radius:var(--r-lg)} /* темы сохраняют характер */ html[data-skin="copper"] #view-overview #kpiRow .kpi{border-top:2px solid color-mix(in srgb, var(--brand) 55%, transparent)} html[data-skin="ember"] #view-overview #kpiRow .kpi{border-radius:6px 0 0 0;box-shadow:none} html[data-skin="stone"] #view-overview #kpiRow .kpi-val{font-weight:500} html[data-skin="ember"] #view-overview #kpiRow .kpi-val{font-weight:400} } /* ── ДИНАМИКА (02.10.2026): графики по дням, общий график сверху, сетка карточек ── Графики — SVG в своей системе координат (charts.js → Charts.days), ширину подстраивает браузер. */ .dyn-bar{margin-bottom:10px} .dyn-note{margin:0 0 12px;font-size:11.5px;line-height:1.5;color:var(--txt-3);max-width:120ch} .dyn-ov{margin-bottom:14px;padding:14px 16px 10px} .dyn-ov-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px} .dyn-ov-ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .dyn-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;min-height:28px;align-items:center} .dyn-lg{display:inline-flex;align-items:center;gap:6px;cursor:pointer} .dyn-lg i{width:10px;height:10px;border-radius:2px;display:inline-block;flex:none} .dyn-lg small{color:var(--txt-3);font-size:9.5px} .dyn-empty{font-size:11.5px;color:var(--txt-3)} .dyn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:12px} .dyn-card{padding:12px 14px 8px;min-width:0} .dyn-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px} .dyn-t{margin:0;font-size:13px;font-weight:650;color:var(--txt);letter-spacing:-.2px} .dyn-d{margin:2px 0 0;font-size:11px;color:var(--txt-3);line-height:1.4} .dyn-add{white-space:nowrap;flex:none;cursor:pointer} .dyn-chart{position:relative;touch-action:pan-y} .dyn-tip{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .1s;z-index:5; background:var(--tip-bg);border:1px solid var(--stroke-2);border-radius:var(--r-md);padding:7px 10px;font-size:11.5px;white-space:nowrap; box-shadow:0 10px 30px color-mix(in srgb, var(--shadow-ink) 50%, transparent);color:var(--txt);display:flex;flex-direction:column;gap:2px} .dyn-tip .th2{font-size:11px;color:var(--txt-3);font-weight:600} .dyn-tip .dyn-tv{font-size:13px;font-family:var(--mono)} .dyn-tip .dyn-tx{color:var(--txt-2);font-family:var(--mono);font-size:11px} .dyn-tip em{font-style:normal;color:var(--warn);font-size:10.5px} .dyn-tip .tr{display:flex;align-items:center;gap:6px} .dyn-tip .tr i{width:8px;height:8px;border-radius:2px;flex:none} .dyn-tip .tr b{margin-left:auto;padding-left:12px;font-family:var(--mono)} .dyn-tip .tr em{margin-left:6px} /* ── РЕВИЗИЯ ДИЗАЙНА 08.10.2026: группы меню, вкладки раздела «Реклама» ── */ .nav-member{display:none!important} .nav-grp{margin-top:14px} .nav > .nav-grp:first-child{margin-top:0} .view-tabs{display:flex;gap:4px;margin:-6px 0 12px;border-bottom:1px solid var(--stroke);overflow-x:auto} .view-tabs button{padding:7px 12px 8px;margin-bottom:-1px;font-size:13px;font-weight:600;color:var(--txt-3);background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap} .view-tabs button:hover{color:var(--txt)} .view-tabs button.on{color:var(--txt);border-bottom-color:var(--c1)} /* Менеджеры: воронка каждого менеджера */ #chartManagers.mgr-fun-host{height:auto;display:flex;flex-direction:column;gap:7px;padding:2px 0 4px} .mgr-fun-leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--txt-3);margin-bottom:3px} .mgr-fun-leg span{display:inline-flex;align-items:center;gap:5px} .mgr-fun-leg i{width:10px;height:10px;border-radius:2px;display:inline-block} .mgr-fun-leg .mgr-fun-r{margin-left:auto} .mgr-fun-row{display:grid;grid-template-columns:120px minmax(0,1fr) 170px 64px;align-items:center;gap:12px;font-size:12px} .mgr-fun-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt-2)} .mgr-fun-bars{position:relative;height:16px;border-radius:3px;background:var(--panel-2)} .mgr-fun-bars i{position:absolute;left:0;top:0;bottom:0;border-radius:3px} .mgr-fun-v{font-family:var(--font-mono);font-size:11.5px;color:var(--txt-3);text-align:right;white-space:nowrap} .mgr-fun-row .mgr-fun-r{text-align:right;font-family:var(--font-mono);font-size:13px;color:var(--txt);font-variant-numeric:tabular-nums} .today-split{padding:12px 16px;margin:0 0 8px} .ts-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px;font-size:12px;color:var(--txt-3)} .ts-h b{font-size:13.5px;color:var(--txt)} .ts-bar{display:flex;gap:2px;height:14px;border-radius:var(--r-sm);overflow:hidden;background:var(--panel-2)} .ts-bar i{display:block;height:100%} /* ИИ-агент: решения полосой, причины молчания полосами; вкладки по группам */ .ai-vbar{display:flex;gap:2px;height:18px;border-radius:var(--r-sm);overflow:hidden;background:var(--panel-2);margin-top:4px} .ai-vbar i{display:block;height:100%} .ai-vleg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:12.5px;color:var(--txt-2)} .ai-vleg span{display:inline-flex;align-items:center;gap:6px} .ai-vleg i{width:10px;height:10px;border-radius:2px;display:inline-block} .ai-vleg b{color:var(--txt)} .ai-vleg small{color:var(--txt-3)} .ai-reasons{display:flex;flex-direction:column;gap:9px;margin-top:2px} .ai-r-t{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--txt-2);margin-bottom:3px} .ai-r-t b{font-family:var(--font-mono);color:var(--txt);font-variant-numeric:tabular-nums} .ai-r-bar{height:8px;border-radius:2px;background:var(--panel-2)} .ai-r-bar i{display:block;height:100%;border-radius:2px;background:color-mix(in srgb, var(--txt-3) 70%, transparent)} .seg .seg-sep{flex:none;align-self:stretch;width:1px;margin:6px 5px;background:var(--stroke)} /* Шапка на 901–1280 px: все кнопки в одну строку. Было: тема, обновление и автообновление съезжали отдельной строкой. «Свой период» без подписи, пока период не выбран (подсказка на кнопке), промежутки плотнее. */ @media (min-width:901px) and (max-width:1280px){ .picker-btn:not(.on) #pickerLabel{display:none} .topbar .controls{gap:5px} #rangeSeg button{padding-left:7px;padding-right:7px} } /* Настройки: разделы пользователя квадратиками */ .sec-dots{display:inline-flex;gap:2px;vertical-align:-1px;margin-right:4px} .sec-dots i{width:7px;height:7px;border-radius:1.5px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--stroke)} .sec-dots i.on{background:var(--c1);box-shadow:none} /* Сигналы в Meta: события за сутки слева, техника справа */ .capi-main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:start;margin-bottom:12px} .capi-main:has(#capiEvents.hidden){grid-template-columns:1fr} .capi-main>.card{margin:0} .capi-main>.kpis{margin:0} .capi-ev{display:flex;flex-direction:column;gap:8px} .capi-ev-row{display:grid;grid-template-columns:150px minmax(0,1fr) 120px;align-items:center;gap:12px;font-size:12.5px} .capi-ev-n{color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .capi-ev-bar{display:flex;height:14px;border-radius:3px;background:var(--panel-2);overflow:hidden} .capi-ev-bar i{display:block;height:100%;background:var(--ok)} .capi-ev-bar s{display:block;height:100%;background:var(--bad)} .capi-ev-row b{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums} .capi-ev-row em{font-style:normal;font-size:11px;color:var(--bad)} /* Звонобот: что дал каждый запуск (классы воронки менеджеров) */ #zvViz{margin-bottom:12px} .zv-fun{display:flex;flex-direction:column;gap:7px} .zv-fun .mgr-fun-row{grid-template-columns:150px minmax(0,1fr) 130px 92px} .zv-roas{justify-self:end;padding:2px 8px;border-radius:var(--r-sm);font-size:12px;font-family:var(--font-mono);white-space:nowrap} .zv-roas.ok{color:var(--ok);background:color-mix(in srgb, var(--ok) 13%, transparent)} .zv-roas.bad{color:var(--bad);background:color-mix(in srgb, var(--bad) 13%, transparent)} .zv-roas.none{color:var(--txt-3);background:var(--panel-2);font-family:inherit;font-weight:500;font-size:11px} /* Креативы: «Что делать с рекламой» одной строкой; списки объявлений — в выпадающих кнопках */ .cr-sum{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 10px;padding:9px 14px} .cs-t{font-size:13px;font-weight:650;white-space:nowrap} .cr-sum-bar{flex:0 1 160px;min-width:100px;display:flex;gap:2px;height:10px;border-radius:3px;overflow:hidden;background:var(--panel-2)} .cr-sum-bar i{display:block;height:100%} .cr-sum-leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--txt-2)} .cr-sum-leg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .cr-sum-leg i{width:8px;height:8px;border-radius:2px;display:inline-block} .cr-sum-leg b{color:var(--txt)} .cr-sum-leg small{color:var(--txt-3);font-size:11px} .cs-pops{display:flex;gap:6px;margin-left:auto} .cs-pop{position:relative} .cs-pop summary{list-style:none;cursor:pointer;padding:5px 10px;border:1px solid var(--stroke);border-radius:var(--r-md);font-size:12px;color:var(--txt-2);white-space:nowrap;background:var(--panel)} .cs-pop summary::-webkit-details-marker{display:none} .cs-pop summary:hover{color:var(--txt)} .cs-pop summary b{margin-left:3px;color:var(--txt)} .cs-pop[open] summary{border-color:var(--c1);color:var(--txt)} .cs-pop-b{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:380px;max-width:86vw;padding:6px 10px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--panel);box-shadow:0 18px 40px -18px color-mix(in srgb, var(--shadow-ink, #000) 45%, transparent)} .cr-sum-ad{display:flex;justify-content:space-between;gap:10px;width:100%;padding:5px 6px;margin:0 -6px;border:0;border-radius:var(--r-sm);background:transparent;font:inherit;font-size:12.5px;color:var(--txt);text-align:left;cursor:pointer} .cr-sum-ad:hover{background:var(--panel-2)} .cr-sum-ad span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cr-sum-ad b{flex:none;font-weight:600;color:var(--txt-2);font-variant-numeric:tabular-nums} /* Динамика: вердикт по каждому графику словами */ .dyn-vds{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin:0 0 12px} .dyn-vd{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:7px 10px;border-radius:var(--r-md);border:1px solid var(--stroke);background:var(--panel);font:inherit;text-align:left;cursor:pointer;min-width:0} .dyn-vd span{font-size:11px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .dyn-vd b{font-size:13px;font-weight:700;color:var(--txt-2)} .dyn-vd:hover{background:var(--panel-2)} .dyn-vd.vd-good{border-color:color-mix(in srgb, var(--ok) 45%, var(--stroke))} .dyn-vd.vd-good b{color:var(--ok)} .dyn-vd.vd-bad{border-color:color-mix(in srgb, var(--bad) 45%, var(--stroke))} .dyn-vd.vd-bad b{color:var(--bad)} .dyn-vd.vd-wait b{color:var(--txt-3);font-weight:600} .dyn-vd-mini{margin-left:6px;padding:1px 7px;border-radius:var(--r-sm);font-size:10.5px;font-weight:700;background:var(--panel-2);color:var(--txt-2);white-space:nowrap} .dyn-vd-mini.vd-good{color:var(--ok);background:color-mix(in srgb, var(--ok) 12%, transparent)} .dyn-vd-mini.vd-bad{color:var(--bad);background:color-mix(in srgb, var(--bad) 12%, transparent)} /* Сводная: «чей взгляд» — главные наборы кнопками и как считает выбранный */ .sum-roles-bar{display:flex;flex-direction:column;gap:7px;margin:0 0 12px} .sum-roles-bar .sum-months{width:max-content;max-width:100%;overflow-x:auto} .sum-role-desc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--txt-2)} .srd-tag{padding:2px 8px;border-radius:var(--r-sm);font-size:11px;font-weight:600;color:var(--txt);background:var(--panel-2);border:1px solid var(--stroke);white-space:nowrap} .srd-t{margin-left:2px} /* Обзор: пять карточек и одна «Окупаемость рекламы» с тремя полосами (вместо трёх одинаковых карточек ROAS) */ @media (min-width:901px){ #view-overview #kpiRow .kpi-roas{grid-column:span 3;cursor:default} @container (min-width:1180px){ #view-overview #kpiRow.kpis-ov{grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,2.4fr)} #view-overview #kpiRow .kpi-roas{grid-column:auto} } } .kpi-roas .rr-sub{font-weight:500;color:var(--txt-3);font-size:10.5px;overflow:hidden;text-overflow:ellipsis} .kpi-roas .rr-rows{display:flex;flex-direction:column;gap:0;margin:0} .roas-row{display:grid;grid-template-columns:minmax(84px,auto) minmax(50px,1fr) 48px;align-items:center;gap:10px;width:auto;margin:0 -5px;padding:1px 5px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--txt-2);font:inherit;font-size:11.5px;line-height:1.35;text-align:left;cursor:pointer} .roas-row:hover:not([disabled]){background:var(--panel-2)} .roas-row[disabled]{cursor:default} .roas-row .rr-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .roas-row .rr-bar{position:relative;height:8px;border-radius:2px;background:var(--panel-2)} .roas-row .rr-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--kc)} .roas-row .rr-bar s{position:absolute;top:-3px;bottom:-3px;width:0;border-left:1px dashed var(--txt-3)} .roas-row b{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--txt);text-align:right;font-variant-numeric:tabular-nums} .roas-row.roas-main b{font-size:16px} .roas-row.roas-main .rr-name{color:var(--txt);font-weight:600} /* ── РЕВИЗИЯ ДИЗАЙНА №2, 08.10.2026 ── */ /* Строка состояния раздела: точка-статус, одно предложение, крупные числа справа (WhatsApp, Процессы, ИИ-агент, Установка) */ .sl-wrap:empty{display:none} .statline{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;margin:0 0 12px;padding:12px 18px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--panel)} .sl-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 16%, transparent)} .statline.sl-warn .sl-dot{background:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent)} .statline.sl-bad .sl-dot{background:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb, var(--bad) 18%, transparent)} .sl-text{flex:1 1 340px;min-width:0;font-size:13.5px;line-height:1.45;color:var(--txt-2)} .sl-text b{color:var(--txt);font-weight:650} .sl-nums{display:flex;flex-wrap:wrap;gap:8px 24px} .sl-num{display:flex;flex-direction:column;min-width:56px} .sl-num b{font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.15;color:var(--txt);font-variant-numeric:tabular-nums} .sl-num span{font-size:11px;color:var(--txt-3);white-space:nowrap} .sl-num.sl-bad b{color:var(--bad)} .sl-num.sl-warn b{color:var(--warn)} .sl-link{padding:0;border:0;background:none;font:inherit;color:var(--warn);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer} /* Менеджеры: путь заявки шагами + скорость справа */ .mgr-flow{display:flex;align-items:stretch;margin:0 0 10px;padding:0;overflow:hidden} .mf-steps{flex:1 1 auto;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)} .mf-step{display:flex;flex-direction:column;gap:1px;min-width:0;padding:12px 16px 13px;border-right:1px solid var(--stroke)} .mf-step:last-child{border-right:0} .mf-step b{font-size:22px;font-weight:700;letter-spacing:-.5px;line-height:1.1;color:var(--txt);font-variant-numeric:tabular-nums} .mf-step span{font-size:12.5px;font-weight:600;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mf-step em{font-style:normal;font-size:11px;color:var(--txt-3)} .mf-bar{display:block;height:4px;margin-top:8px;border-radius:2px;background:var(--panel-2)} .mf-bar i{display:block;height:100%;border-radius:2px;background:var(--c1)} .mf-speed{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:12px 18px;border-left:1px solid var(--stroke);background:color-mix(in srgb, var(--panel-2) 55%, transparent)} .mf-speed div{display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:baseline} .mf-speed span{font-size:12px;color:var(--txt-2)} .mf-speed b{font-size:15px;font-weight:700;text-align:right;color:var(--txt);font-variant-numeric:tabular-nums} .mf-speed small{grid-column:1/-1;font-size:11px;color:var(--txt-3)} .mf-warn{margin:0 0 10px;padding:9px 14px;border-radius:var(--r-md);font-size:12.5px;line-height:1.45;color:var(--txt);background:color-mix(in srgb, var(--warn) 11%, transparent);border:1px solid color-mix(in srgb, var(--warn) 32%, transparent)} /* Менеджеры рядом: таблица-полосы, у каждой колонки свой цвет и свой масштаб */ .mgr-bt{width:100%;border-collapse:collapse;font-size:12.5px} .mgr-bt th{padding:0 10px 8px;font-size:11px;font-weight:600;text-align:left;color:var(--txt-3);border-bottom:1px solid var(--stroke)} .mgr-bt th.num,.mgr-bt td.num{text-align:right} .mgr-bt td{padding:7px 10px;vertical-align:middle;border-bottom:1px solid color-mix(in srgb, var(--stroke) 55%, transparent)} .mgr-bt tbody tr:last-child td{border-bottom:0} .mgr-bt tbody tr:hover td{background:color-mix(in srgb, var(--panel-2) 60%, transparent)} .bt-name{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--txt)} .bt-cell{display:flex;align-items:center;gap:8px;min-width:90px} .bt-cell b{min-width:28px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums} .bt-bar{flex:1;min-width:36px;height:6px;border-radius:3px;background:var(--panel-2)} .bt-bar i{display:block;height:100%;border-radius:3px} .bt-pct{font-weight:700;font-variant-numeric:tabular-nums} .bt-pct.bt-zero{font-weight:500;color:var(--txt-3)} /* ИИ-агент: четыре исхода с объяснением под полосой */ .ai-ov-card{display:flex;flex-direction:column;margin:0} .ai-vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:16px;margin-top:16px} .ai-v{display:flex;flex-direction:column;gap:1px;padding-left:11px;border-left:3px solid var(--vc)} .ai-v-n{font-size:12.5px;font-weight:600;color:var(--txt-2)} .ai-v b{font-size:24px;font-weight:700;letter-spacing:-.5px;line-height:1.15;color:var(--txt)} .ai-v small{font-size:11.5px;color:var(--txt-3)} .ai-v em{margin-top:5px;font-style:normal;font-size:12px;line-height:1.35;color:var(--txt-2)} #aiOverviewCards{align-items:stretch} /* Настройки: пользователи во всю ширину, ниже оформление и общие рядом, ещё ниже лимит amo */ #view-settings:not(.hidden){grid-template-columns:minmax(0,1fr) minmax(260px,.36fr)} #view-settings>.admin-card:not(#amoUsageCard){grid-column:1/-1;grid-row:1} #view-settings>#appearanceCard{grid-column:1;grid-row:2} #view-settings>.set-card:first-child{grid-column:2;grid-row:2;align-self:stretch} #view-settings>#amoUsageCard{grid-column:1/-1;grid-row:3} #appearanceCard .card-head{align-items:flex-start;gap:16px} #appearanceCard .skin-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr);gap:10px;margin:2px 0 0;padding-bottom:4px;overflow-x:auto} #appearanceCard .skin-tile{position:relative} #appearanceCard .skin-tile.on::after{content:"✓ выбрана";position:absolute;top:8px;right:8px;padding:2px 7px;border-radius:var(--r-sm);font-size:10.5px;font-weight:700;color:#141414;background:var(--c1)} .admin-tbl .row-actions{white-space:nowrap} /* Установка: подключения с иконками сервисов, проверки по важности */ .conn-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px} .conn-chip{display:inline-flex;padding:0;border:0;background:none;border-radius:var(--r-md);cursor:pointer} .conn-chip.off{opacity:.35;filter:grayscale(1)} .conn-count{margin-left:8px;font-size:13px;color:var(--txt-2)} .conn-count b{color:var(--txt)} .conn-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:var(--r-md)} .conn-ico svg{width:24px;height:24px} .conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px} .conn-card{display:flex;flex-direction:column;gap:8px;margin:0;padding:14px 16px} .conn-card.off .conn-ico{opacity:.45;filter:grayscale(1)} .conn-h{display:flex;align-items:center;gap:12px} .conn-t{display:flex;flex:1;flex-direction:column;min-width:0} .conn-t b{font-size:14.5px;color:var(--txt)} .conn-t span{font-size:12px;line-height:1.35;color:var(--txt-3)} .conn-sum{padding-left:48px;font-size:13px;font-weight:600;color:var(--txt)} .conn-card.off .conn-sum{color:var(--txt-3);font-weight:500} .conn-more{padding-left:48px} .conn-more summary{cursor:pointer;font-size:12px;color:var(--txt-3)} .conn-more summary:hover{color:var(--txt)} .conn-more[open] summary{margin-bottom:8px} .conn-more .kv{font-size:12px} .chk-list{margin:0 0 12px;padding:2px 18px} .chk{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--stroke)} .chk:last-child{border-bottom:0} .chk-dot{width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--ok)} .chk-bad .chk-dot{background:var(--bad)} .chk-warn .chk-dot{background:var(--warn)} .chk b{font-size:13.5px;color:var(--txt)} .chk p{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--txt-2)} .chk p.chk-hint{color:var(--txt-3)} .chk-ok>summary{padding:12px 0;cursor:pointer;font-size:13px;font-weight:600;color:var(--txt-2)} /* ── РЕВИЗИЯ ДИЗАЙНА №3, 08.10.2026 ── */ /* Креативы: выключенные объявления светлой штриховкой в конце полосы */ .cr-sum-bar i.cs-off{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--txt-3) 28%, transparent) 0 3px, transparent 3px 6px)} .cs-leg-off{color:var(--txt-3)} .cs-leg-off i{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--txt-3) 45%, transparent) 0 2px, transparent 2px 4px)} /* Сводная: шапка одним блоком, две строки */ .sum-head{display:flex;flex-direction:column;gap:9px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--panel)} .sh-row{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap} .sh-right{display:flex;align-items:center;gap:8px;margin-left:auto} .seg.sh-roles{flex-wrap:wrap} .seg.sh-roles button{white-space:nowrap} .sum-mstep{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--stroke);border-radius:var(--r-md)} .sum-mstep button{width:28px;height:28px;border:0;border-radius:var(--r-sm);background:none;color:var(--txt-2);font-size:16px;line-height:1;cursor:pointer} .sum-mstep button:hover:not([disabled]){background:var(--panel-2);color:var(--txt)} .sum-mstep button[disabled]{opacity:.3;cursor:default} .sum-mstep .sm-cur{min-width:118px;padding:0 6px;text-align:center;font-size:13px;font-weight:650;color:var(--txt);white-space:nowrap} .sh-row2{padding-top:9px;border-top:1px solid var(--stroke)} .sh-row2 .sum-role-desc{flex:1 1 380px;min-width:0} .sh-row2 .srd-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .sh-row2 .sum-note{display:flex;gap:6px;max-width:none;text-align:left;font-size:inherit} .sh-row2 .sum-cols-wrap{margin:0 0 0 auto;display:flex;gap:6px} .sh-btn{min-height:30px;padding:5px 10px;font-size:12px} .srd-tag.srd-info{cursor:help;color:var(--txt-2);background:transparent;border-style:dashed} .srd-tag.srd-warn{color:var(--txt);background:color-mix(in srgb, var(--warn) 14%, transparent);border-color:color-mix(in srgb, var(--warn) 40%, transparent)} /* Процессы: доска процессов */ .proc-board{margin:0 0 12px;padding:14px 18px} .pb-list{display:flex;flex-direction:column} .pb-row{display:grid;grid-template-columns:minmax(160px,1.1fr) minmax(120px,2fr) 110px 100px;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid color-mix(in srgb, var(--stroke) 60%, transparent)} .pb-row:last-child{border-bottom:0} .pb-row.pb-nowait{grid-template-columns:minmax(160px,1.1fr) minmax(120px,2fr) 110px} .pb-name{display:flex;align-items:center;gap:8px;min-width:0} .pb-name b{font-size:13.5px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pb-chip{flex:none;padding:1px 7px;border-radius:var(--r-sm);font-size:10.5px;font-weight:600;color:var(--txt-3);background:var(--panel-2)} .pb-bar{display:flex;height:10px;border-radius:3px;overflow:hidden;background:var(--panel-2)} .pb-bar i{display:block;height:100%;background:var(--c1)} .pb-bar s{display:block;height:100%;background:var(--bad)} .pb-n{display:flex;flex-direction:column;text-align:right} .pb-n b{font-size:16px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums;line-height:1.15} .pb-n span{font-size:11px;color:var(--txt-3)} .pb-n em{font-style:normal;color:var(--bad);font-weight:600} .pb-paused .pb-name b{color:var(--txt-2)} .pb-paused .pb-bar i{background:color-mix(in srgb, var(--txt-3) 45%, transparent)} .pb-quiet{margin:8px 0 0;font-size:12px;color:var(--txt-3)} /* ИИ-агент: режим меткой, диалоги сейчас и направления */ .sl-mode{margin-right:6px;padding:2px 9px;border:0;border-radius:var(--r-sm);font:inherit;font-size:12px;font-weight:650;cursor:pointer} .sl-mode-ok{color:var(--ok);background:color-mix(in srgb, var(--ok) 13%, transparent)} .sl-mode-warn{color:var(--txt);background:color-mix(in srgb, var(--warn) 18%, transparent)} .sl-mode-muted{color:var(--txt-2);background:var(--panel-2)} #aiOverviewCards>.ai-now{grid-column:1/-1} .ai-now{display:flex;gap:28px;align-items:stretch;margin:0} .ai-now-l{flex:1 1 auto;min-width:0} .ai-now-leg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12.5px;color:var(--txt-2)} .ai-now-leg span{display:inline-flex;align-items:center;gap:6px} .ai-now-leg i{width:10px;height:10px;border-radius:2px;display:inline-block} .ai-now-leg b{color:var(--txt)} .ai-now-r{flex:0 0 260px;padding-left:24px;border-left:1px solid var(--stroke)} .ai-now-r>p{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--txt-2)} .ai-dir{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:5px 0;font-size:13px} .ai-dir-dot{width:8px;height:8px;border-radius:50%;background:var(--ok)} .ai-dir.off .ai-dir-dot{background:var(--txt-3)} .ai-dir.off b{color:var(--txt-3);font-weight:500} .ai-dir small{font-size:11.5px;color:var(--txt-3)} /* ============================================================ АДАПТИВНЫЙ СЛОЙ — ВСЕГДА ПОСЛЕДНИМ (17.09.2026). Сюда собраны все @media (max-width ≤ 900px) из файла, в исходном порядке. Раньше они стояли посреди файла, и каждый следующий слой редизайна (сетка .app 250px → 228px → 212px, размеры .nav-item и т.п.) перебивал их безусловными правилами: на телефоне контент жил в колонке 212px. Новое правило для телефона/планшета — только сюда, в конец. ============================================================ */ @media(max-width:900px){.app{grid-template-columns:74px}.logo-text,.nav-item span,.sync-card{display:none}.nav-item{justify-content:center}} @media (max-width:640px){ /* --- каркас: одна колонка, dynamic vh под мобильный хром --- */ .app{grid-template-columns:1fr;height:100dvh} /* ---------- 1. САЙДБАР -> ФИКС. НИЖНИЙ ТАБ-БАР ---------- */ .sidebar{ position:fixed;left:0;right:0;bottom:0;top:auto; flex-direction:row;gap:0; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); border-right:0;border-top:1px solid var(--stroke); background: var(--sidebar-bg);backdrop-filter:blur(20px); z-index:50; } .logo,.sync-card{display:none} /* освобождаем строку под табы */ .nav{flex:1;flex-direction:row;justify-content:space-around;gap:2px} .nav-item{ flex:1;flex-direction:column;justify-content:center;align-items:center; gap:3px;padding:6px 2px;min-height:50px;border-radius:var(--r-md); font-size:9.5px;line-height:1.1;text-align:center;font-weight:600; } .nav-item svg{width:21px;height:21px;opacity:.8} .nav-item.active{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c1) 35%, transparent)} /* контент отступает от фикс. бара (скроллится только .scroll) */ .scroll{padding:16px 14px calc(80px + env(safe-area-inset-bottom));scroll-behavior:smooth} /* ---------- 2. ТОПБАР: заголовок + контролы в столбик ---------- */ .topbar{padding:12px 14px;gap:10px;row-gap:10px} .topbar-title{flex:1 1 100%} .topbar h1{font-size:18px} .controls{width:100%;gap:8px;justify-content:flex-start} /* #rangeSeg: горизонтальный скролл вместо сжатия 5 пресетов */ #rangeSeg{flex:1 1 100%;overflow-x:auto;scrollbar-width:none} #rangeSeg::-webkit-scrollbar{display:none} .seg button{padding:9px 12px} /* тач-таргет >=40px */ /* кнопка периода — на всю ширину */ .picker-wrap{flex:1 1 100%} .picker-btn{width:100%;justify-content:center} /* поповер дат: во всю ширину, не вылезает за правый край */ .picker{left:0;right:0;width:auto} /* селекты — по два в ряд, но крупные */ .select{flex:1 1 calc(50% - 5px);max-width:none;min-width:0;padding:9px 12px} .btn-ghost{width:40px;height:40px} /* ---------- 3. KPI: 2 колонки, мельче шрифт ---------- */ .kpis{grid-template-columns:repeat(2,1fr);gap:10px} .kpi{padding:13px} .kpi-val{font-size:22px;letter-spacing:-.6px} .kpi-label{font-size:10.5px} /* ---------- 4. КАРТОЧКИ / ГРАФИКИ ---------- */ .grid-2{gap:14px} /* уже 1 колонка ниже 1200px */ .card{padding:14px} /* держим узкие поля: защищает ширину графика */ .card-head{flex-wrap:wrap;gap:8px;margin-bottom:12px} .chart{height:200px} .donut-wrap{height:220px} /* ---------- 5. ТАБЛИЦА КРЕАТИВОВ ---------- */ .table-toolbar{gap:8px} .search{flex:1 1 100%;min-width:0} /* поиск во всю ширину */ .chip{padding:10px 14px} /* тач-таргет */ #exportBtn{padding:9px 14px} /* вертикаль — на .scroll; у таблицы остаётся свой горизонт. скролл + липкие столбцы */ .table-scroll{max-height:none;-webkit-overflow-scrolling:touch} /* ---------- 6. DRAWER: на весь экран ---------- */ /* z-index выше нижнего таб-бара (.sidebar=50), иначе бар перекрывает лист снизу и торчит поверх карточки. Бэкдроп тоже поднимаем — он закрывает бар. */ .drawer{width:100vw;max-width:100vw;border-left:0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));z-index:55} .drawer-backdrop{z-index:54} .drawer-close{top:14px;right:14px;width:36px;height:36px} .d-grid{grid-template-columns:repeat(2,1fr)} /* ---------- 7. прочие тач-таргеты / оверлеи ---------- */ .btn{padding:9px 14px} .toast{bottom:calc(88px + env(safe-area-inset-bottom));left:14px;right:14px;transform:translateY(80px)} .toast.on{transform:translateY(0)} } @media (max-width:430px){ .kpis{grid-template-columns:1fr} .kpi-val{font-size:24px} .chart{height:190px} .donut-wrap{height:210px} .nav-item{font-size:9px} .topbar h1{font-size:17px} .d-grid{grid-template-columns:1fr 1fr} /* ужимаем поля, чтобы даже на 320px диаграммы каналов проходили по мин. ширине frame() (иначе карточка пустая) */ .scroll{padding-left:10px;padding-right:10px} .card{padding:14px 12px} } @media(max-width:900px){ .nav-item .nav-icon{display:grid!important} .nav-icon .nav-live-dot{top:-3px;right:-4px} } /* ОБНОВЛЕНИЕ НА ВИДУ (21.09.2026): плашка у заголовка, бегущая полоска над таблицами и карточками, числа чуть гаснут, изменившиеся после обновления — вспыхивают */ .refresh-pill{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:3px 9px 3px 7px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--c1) 12%, transparent);color:var(--c1);font-size:11.5px;font-weight:650;line-height:1.4;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .refresh-pill::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--c1);animation:refresh-dot 1s ease-in-out infinite} @keyframes refresh-dot{50%{opacity:.25}} .main.refreshing .table-card,.main.refreshing .kpis{position:relative} .main.refreshing .table-card::before,.main.refreshing .kpis::before{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:2px;z-index:6;pointer-events:none;background:linear-gradient(90deg,transparent,var(--c1),transparent) no-repeat;background-size:40% 100%;animation:refresh-line 1.2s ease-in-out infinite} @keyframes refresh-line{from{background-position:-60% 0}to{background-position:160% 0}} .main.refreshing .kpi-val,.main.refreshing td.num,.main.refreshing .fi-val{opacity:.6;transition:opacity .25s} .val-chg{animation:val-flash 2.2s ease-out} @keyframes val-flash{0%{background-color:color-mix(in srgb, var(--c1) 45%, transparent);border-radius:var(--r-sm)}60%{background-color:color-mix(in srgb, var(--c1) 22%, transparent)}100%{background-color:transparent}} .kpi-val.val-chg{display:inline-block;padding:0 4px;margin:0 -4px} .refresh-pill.upd{border:0;cursor:pointer;font-family:inherit;background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok)} .refresh-pill.upd::before{animation:none;background:var(--ok)} .refresh-pill.upd:hover{background:color-mix(in srgb, var(--ok) 22%, transparent)} @media(max-width:640px){ .nav-icon{width:21px;height:21px;flex-basis:21px} .nav-icon .nav-live-dot{top:-2px;right:-3px;border-color:var(--sidebar-bg)} :root[data-theme="light"] .nav-icon .nav-live-dot{border-color:color-mix(in srgb, var(--paper) 96%, transparent)} .crcols-pop{position:fixed;left:12px;right:12px;top:auto;bottom:76px;width:auto;max-width:none;max-height:72vh} .frz-ctl .frz-lbl{display:none} .crcol-hint{flex-direction:column;gap:2px} } @media(max-width:900px){ .app{grid-template-columns:72px 1fr} .sidebar{padding-left:10px;padding-right:10px} .logo{justify-content:center;padding:0}.nav-label{display:none} .nav-item{justify-content:center;padding:10px}.nav-item:hover{transform:none} .nav-live-dot{position:absolute;top:8px;right:8px} .scroll{padding-left:22px;padding-right:22px} } @media(max-width:640px){ .app{grid-template-columns:1fr} .sidebar{padding:6px 6px calc(6px + env(safe-area-inset-bottom));background: var(--sidebar-bg)} .nav-item span{display:block} .nav-item{padding:6px 2px;min-height:50px;font-size:9px;color: var(--nav-fg)} .nav-item.active{color:var(--nav-active-fg);background:var(--nav-active-bg)} .nav-item.active svg{color: var(--nav-active-fg)} .nav-live-dot{top:6px;right:calc(50% - 15px)} .topbar{padding:13px 14px}.eyebrow{font-size:8px}.topbar h1{font-size:20px} .scroll{padding:16px 12px calc(80px + env(safe-area-inset-bottom))} .kpis{gap:8px}.kpi{min-height:116px;padding:14px}.kpi-val{font-size:24px} .card{padding:15px}.chart{height:215px}.donut-wrap{height:225px} :root[data-theme="light"] .sidebar{background: var(--sidebar-bg)} :root[data-theme="light"] .nav-item{color: var(--nav-fg)} :root[data-theme="light"] .nav-item.active{color: var(--nav-active-fg);background: var(--nav-active-bg)} :root[data-theme="light"] .nav-item.active svg{color: var(--nav-active-fg)} } @media(max-width:430px){ .kpis{grid-template-columns:1fr 1fr} .kpi{min-width:0}.kpi-val{font-size:21px;letter-spacing:-1px} .kpi-foot{align-items:flex-start;flex-direction:column;gap:4px} } @media(max-width:360px){ .kpis{grid-template-columns:1fr} .kpi-val{font-size:24px} } @media(max-width:640px){ .sidebar{background: var(--sidebar-bg)} .nav-item.active,.nav-item.active svg{color: var(--nav-active-fg)} :root[data-theme="light"] .sidebar{background: var(--sidebar-bg)} :root[data-theme="light"] .nav-item.active{color: var(--nav-active-fg);background: var(--nav-active-bg)} :root[data-theme="light"] .nav-item.active svg{color: var(--nav-active-fg)} } @media(max-width:900px) and (min-width:641px){ .page-switch{flex-direction:column;margin-bottom:12px;padding:3px} .page-switch button{padding:6px 1px;font-size:8px} .user-chip{justify-content:center;padding:7px} .user-meta,.user-logout{display:none} .nav-collapse{justify-content:center;padding:9px}.nav-collapse span{display:none} } @media(max-width:720px){ .af-grid{grid-template-columns:1fr} .admin-card .card-head{align-items:flex-start;flex-direction:column} .admin-card .card-head .btn-primary{width:100%} .sum-note{max-width:none;text-align:left} } @media(max-width:760px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:640px){ .sidebar .page-switch,.sidebar .nav-collapse,.sidebar .user-chip{display:none!important} .sidebar .nav{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none} .sidebar .nav-item{flex:0 0 68px} .controls>.ch-seg{flex:1 1 auto} .ch-btn{flex:1;justify-content:center} .controls>.mini-seg{flex:1 1 auto;justify-content:center} .picker{width:min(324px,calc(100vw - 28px))} .sum-bar{align-items:flex-start;padding:9px} .sum-months{width:100%;flex-wrap:nowrap;overflow-x:auto} .sum-months button{flex:none} .cr-legend{overflow-x:auto;flex-wrap:nowrap} .af-pages{align-items:flex-start;flex-wrap:wrap} } @media(max-width:360px){ .kpis{grid-template-columns:1fr} } @media (max-width:640px){.kt-bar{overflow-x:auto;padding:0 10px}} /* УСТАНОВКА → ВОРОНКА: конструктор правил (23.09.2026) */ .sf-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:12px 16px} .sf-bar>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .sf-errors{border-color:color-mix(in srgb, var(--bad) 40%, transparent);margin-bottom:14px} .sf-errors ul{margin:6px 0 0 18px;color:var(--txt-2);font-size:12.5px} .sf-steps{display:grid;gap:14px;margin-bottom:14px} .sf-step .card-head{align-items:flex-start} .sf-key{font-size:11px;color:var(--txt-3);font-weight:500;font-family:var(--mono)} .sf-group{border:1px dashed var(--stroke);border-radius:var(--r-md);padding:10px 12px;margin-top:10px} .sf-group-h{display:flex;align-items:center;gap:10px;margin-bottom:4px} .sf-group-h .sf-x{margin-left:auto} .sf-or{font-weight:800;color:var(--c1);font-size:11.5px;letter-spacing:.06em} .sf-cond{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 0} .sf-not{font-size:12px;color:var(--txt-3);display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .sf-sel{max-width:none} .sf-inp{height:34px;padding:0 10px;border-radius:var(--r-md);border:1px solid var(--stroke);background:var(--panel-2);color:var(--txt);font:inherit;font-size:12.5px;min-width:200px} .sf-inp.mono,.sf-json{font-family:var(--mono)} .sf-json{width:100%;min-height:170px;padding:10px;border-radius:var(--r-md);border:1px solid var(--stroke);background:var(--panel-2);color:var(--txt);font-size:12px;line-height:1.45;resize:vertical} .sf-x{width:28px;height:28px;padding:0;font-size:16px;line-height:1;flex:none} .sf-add{margin-top:8px} .sf-head-btns{display:flex;gap:6px} .sf-pick summary{cursor:pointer;list-style:none;display:inline-block;padding:7px 10px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--panel-2);font-size:12.5px;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle} .sf-pick summary::-webkit-details-marker{display:none} .sf-pick[open] summary{border-color:var(--c1)} .sf-pick-body{margin-top:6px;max-height:280px;overflow:auto;border:1px solid var(--stroke);border-radius:var(--r-md);padding:8px 10px;background:var(--panel);min-width:280px} .sf-pipe{margin-bottom:8px} .sf-pipe b{display:block;font-size:12px;margin-bottom:3px} .sf-pick-body label{display:flex;gap:6px;align-items:center;font-size:12.5px;padding:2px 0;color:var(--txt-2);cursor:pointer} .sf-pick-body label i{font-style:normal;color:var(--txt-3);font-size:11px;font-family:var(--mono);margin-left:auto} .sf-row{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:center;padding:6px 0;font-size:12.5px} .sf-row>span{color:var(--txt-2)} .sf-err{color:var(--bad);font-size:11.5px;margin-top:3px} .sf-tbl td{white-space:normal;vertical-align:top} .sf-tbl tbody tr{cursor:default} .sf-tbl tbody tr:hover{background:transparent} /* ОКНО КАРТОЧКИ ОБЗОРА (24.09.2026): карточка крупно + график по дням */ .kpi-box{width:min(860px,100%)} .kpi-ov-card .kpi-big{display:flex;flex-direction:column;gap:6px;padding:14px 18px;border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--panel-2);margin-bottom:12px} .kpi-ov-card .kpi-big .kpi-label{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--txt-2)} .kpi-ov-card .kpi-big .kpi-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kc,var(--brand))} .kpi-ov-card .kpi-big .kpi-val{font-size:38px;font-weight:700;letter-spacing:-1.4px;line-height:1.05;font-variant-numeric:tabular-nums} .kpi-ov-card .kpi-big .kpi-foot{font-size:12px;color:var(--txt-3);white-space:normal} .kpi-ov-chart{position:relative;height:260px} .kpi-ov-chart .chart-empty{height:100%} #kpiOvNote{margin-top:8px} /* ── СВОДНАЯ: РАЗДЕЛЫ (30.09.2026) ────────────────────────────────────────── Над названиями столбцов — строка разделов («Реклама», «Заявки за день», «По дате заявки», «День в день»): по ней видно, по какой дате посчитан каждый блок столбцов. Первая строка шапки прилипает к верху, вторая — под ней (её отступ --sum-grp-h выставляет app.js по факту высоты). Перед первым столбцом раздела — вертикальная черта на всю высоту таблицы. В перевёрнутом виде (показатели в строках) раздел — строка-разделитель. Цвет раздела — полоска над названием. */ .sum-tbl thead tr.sum-grp-row th{top:0;z-index:2;padding:5px 10px 4px;text-align:left;white-space:nowrap; font-size:9.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2); background:var(--th-bg);border-bottom:1px solid var(--grid,var(--stroke));cursor:help} .sum-tbl thead tr.sum-grp-row th.sum-grp-corner{z-index:4;cursor:default} .sum-tbl thead tr.sum-grp-row th span{position:sticky;left:104px;display:inline-block} .sum-tbl thead tr.sum-grp-row.hidden{display:none} .sum-tbl thead tr.sum-grp-row + tr th{top:var(--sum-grp-h,24px)} .sum-tbl th.sum-g-first,.sum-tbl td.sum-g-first{border-left:2px solid var(--stroke-2)} .sum-tbl th.sum-grp[data-g="ads"],.sum-tbl tr.sum-sec[data-g="ads"] td{box-shadow:inset 0 2px 0 var(--c3)} .sum-tbl th.sum-grp[data-g="leads"],.sum-tbl tr.sum-sec[data-g="leads"] td{box-shadow:inset 0 2px 0 var(--c5)} .sum-tbl th.sum-grp[data-g="cohort"],.sum-tbl tr.sum-sec[data-g="cohort"] td{box-shadow:inset 0 2px 0 var(--c1)} .sum-tbl th.sum-grp[data-g="meta"],.sum-tbl tr.sum-sec[data-g="meta"] td{box-shadow:inset 0 2px 0 var(--c4)} .sum-tbl th.sum-grp[data-g="day"],.sum-tbl tr.sum-sec[data-g="day"] td{box-shadow:inset 0 2px 0 var(--c2)} .sum-tbl tr.sum-sec td{background:var(--th-bg)!important;padding:7px 10px 4px;text-align:left; font-size:9.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2)} .sum-tbl tr.sum-sec td span{position:sticky;left:10px;display:inline-block} .sum-tbl td.sum-metric .th-den{font-size:9px;margin-top:1px} /* «Менеджеры»: строка «кто есть кто» под таблицей — имя ← номер и метка Sipuni */ .mgr-who{margin:0;padding:8px 12px 10px;font-size:11.5px;line-height:1.55;color:var(--txt-3)} .mgr-who b{font-weight:600;color:var(--txt-2)} .mgr-who .mono{font-family:var(--mono);font-size:11px} .mgr-who .no{color:var(--warn)} /* ---------- ТЕЛЕФОН, слой 17.09.2026: шапка в две строки, страницы и выход наверху ---------- */ @media (max-width:640px){ /* одна колонка без оговорок: свёрнутое меню на телефоне не имеет смысла */ .app,.app.nav-collapsed{grid-template-columns:minmax(0,1fr);height:calc(100dvh - var(--kt-h))} /* --kt-h: верхняя полоса (в демо — выход на сайт) */ .main{min-width:0} /* шапка: заголовок, под ним ОДНА строка фильтров, листается пальцем (было 5 строк = 328px) */ .topbar{padding:10px 14px 8px;gap:8px;row-gap:8px} .topbar-title{min-width:0;padding-right:132px} /* место под Offline/Online и выход */ .topbar h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .controls{ flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch; width:auto;margin:0 -14px;padding:0 14px 2px;gap:8px; } /* выпадающий календарь живёт внутри листаемой строки — на телефоне показываем его фиксированным листом поверх экрана, иначе overflow строки его обрезает (маску-затухание на .controls по той же причине не ставим) */ .controls .picker.on,.sum-bar .picker.on{ position:fixed;z-index:80;left:12px;right:12px;top:calc(var(--kt-h) + 112px);width:auto;max-width:none; max-height:calc(100dvh - var(--kt-h) - 200px);overflow:auto; } .controls::-webkit-scrollbar{display:none} .controls>*{flex:0 0 auto} #rangeSeg{flex:0 0 auto;overflow:visible} .controls .select{max-width:200px} /* нижнее меню: листается, у правого края — затухание как подсказка «дальше есть ещё» */ .sidebar{backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible} .nav{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%); scrollbar-width:none;scroll-snap-type:x proximity; } .nav::-webkit-scrollbar{display:none} .nav-item{flex:0 0 68px;scroll-snap-align:start;min-height:52px} /* Offline/Online и выход живут в сайдбаре — на телефоне выносим их в правый верхний угол. Инлайновый display:none (одна страница у пользователя / не вошёл) уважаем. */ .sidebar .page-switch:not([style*="none"]){ display:flex!important;flex-direction:row;position:fixed;z-index:60;top:calc(10px + var(--kt-h));right:52px; width:auto;min-height:0;margin:0;padding:2px;gap:0; } .sidebar .page-switch button{padding:6px 8px;font-size:10.5px;min-height:28px} .sidebar .user-chip:not([style*="none"]){ display:flex!important;position:fixed;z-index:60;top:calc(9px + var(--kt-h));right:12px; padding:0;margin:0;border:0;background:none;box-shadow:none;width:auto;min-height:0; } .sidebar .user-chip .user-ava,.sidebar .user-chip .user-meta{display:none} .sidebar .user-chip .user-logout{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--stroke);border-radius:var(--r);background:var(--bg-2);color:var(--txt-2)} /* вкладки разделов и чипы фильтров: листаются внутри своей строки; контент вбок не ездит никогда */ .scroll{overflow-x:hidden} .mgr-tabs,.chips,.seg.mgr-tabs{ max-width:100%;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch; } .mgr-tabs::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none} .mgr-tabs>*,.chips>*{flex:0 0 auto} /* закреплённая первая колонка не должна съедать экран: цифры важнее названия */ .sum-tbl th:first-child,.sum-tbl td:first-child{min-width:88px;max-width:96px;width:92px;white-space:normal;line-height:1.2} .cr-tbl th#colName,.cr-tbl td.frz-edge,.cr-tbl td.frz{min-width:176px!important;max-width:176px!important;width:176px!important} .cr-tbl .thumb{display:none} /* миниатюра — только на широком экране; кнопка графика остаётся */ .cr-tbl .cr-graph{flex:0 0 26px;width:26px;height:26px;padding:4px} .cr-tbl td.frz,.cr-tbl th#colName{overflow:hidden} .cr-tbl .ad-cell{gap:6px;min-width:0;max-width:100%} .cr-tbl .ad-txt{min-width:0;flex:1 1 auto} .cr-tbl .ad-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;font-size:12px} .table-card{padding:10px} .tbl th,.tbl td{padding-left:8px;padding-right:8px} /* панель Сводной: компактные кнопки в перенос (не листаемая строка — иначе выпадающие списки столбцов и периода обрежутся) */ .sum-bar{flex-wrap:wrap;overflow:visible;gap:6px;padding:10px;align-items:center} .sum-bar>*{flex:0 0 auto;width:auto;max-width:100%} .sum-bar .sum-cols-wrap,.sum-bar .crcols-wrap{display:flex;flex-wrap:wrap;gap:6px} .sum-bar .btn{white-space:nowrap;padding:7px 10px;font-size:12px;min-height:34px} .sum-note{display:none} /* таблицы: всегда листаются внутри своей карточки, страница вбок не едет */ .card{min-width:0;max-width:100%} .tbl-wrap,.table-wrap,.sum-scroll,.spk-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} } /* ---------- ТЕЛЕФОН, слой 18.09.2026: одинаковые квадраты KPI, воронка столбиком ---------- */ @media (max-width:900px){ .kpis-ov{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px} /* карточки одного размера независимо от длины числа: ряд тянется по самой высокой, число ужимается */ .kpis-ov .kpi{min-height:108px;height:100%;padding:12px 12px 10px;display:flex;flex-direction:column;justify-content:space-between} .kpis-ov .kpi-val,.kpis-ov .kpi-hero .kpi-val{font-size:clamp(17px,5.6vw,22px);letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:clip} .kpis-ov .kpi-foot{-webkit-line-clamp:2} .funnel-info{gap:6px} .fi-bar{height:96px;border-radius:2px} .fi-bar i{border-radius:2px} .fi-val{font-size:16px;margin-top:7px} .fi-name{font-size:9px;letter-spacing:.03em} .fi-conv{font-size:10px;padding:2px 6px;margin-bottom:6px} .fi-total{gap:6px 14px;font-size:11px} .capi-hero{align-items:flex-start;flex-wrap:wrap;padding:14px} .capi-hero b{font-size:17px} .capi-hero-time{flex:1 1 100%;padding-left:32px} } @media (max-width:360px){ .kpis-ov{grid-template-columns:repeat(2,minmax(0,1fr))} .kpis-ov .kpi-val,.kpis-ov .kpi-hero .kpi-val{font-size:16px} } /* ---------- ТЕЛЕФОН, слой 18.09.2026 (2): три числа разделов компактно, чаты во весь экран ---------- */ @media (max-width:900px){ .kpis.kpis-mini{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px} .kpis-mini .kpi{min-height:0;padding:10px 9px} .kpis-mini .kpi-label{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kpis-mini .kpi-val,.kpis-mini .kpi-hero .kpi-val{font-size:clamp(13px,4vw,17px);letter-spacing:-.3px;white-space:normal;overflow-wrap:anywhere;line-height:1.2} /* длинное число переносится, а не режется */ .kpis-mini .kpi-foot{display:none} #view-whatsapp .mgr-tabs{margin-bottom:8px} } /* закреплённый экран поверх телефонного слоя (там у таблиц max-height:none) */ @media (max-width:900px){ .scroll.fit>.view:not(.hidden)>.table-card>.table-scroll{max-height:none;overflow:auto;-webkit-overflow-scrolling:touch} .scroll.fit{padding-bottom:calc(80px + env(safe-area-inset-bottom))} /* над нижним меню */ /* CAPI: пять карточек компактно, чтобы журнал поместился на экран */ #capiKpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #capiKpis .kpi{min-height:0;padding:9px} #capiKpis .kpi-label{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #capiKpis .kpi-val{font-size:clamp(12px,3.6vw,15px);white-space:normal;overflow-wrap:anywhere;line-height:1.2} #capiKpis .kpi-foot{display:none} .capi-hero{margin-bottom:10px} } /* Обзор на телефоне: те же спокойные карточки, по две в ряд, одного размера */ @media (max-width:900px){ #view-overview #kpiRow.kpis-ov{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:10px;margin:0;padding:0;background:none;border:0;border-radius:0;overflow:visible;box-shadow:none} #view-overview #kpiRow .kpi{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;order:0;min-width:0;min-height:0;height:100%;margin:0;padding:11px 12px 10px;border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--panel);box-shadow:0 10px 24px -20px color-mix(in srgb, var(--shadow-ink) 40%, transparent)} #view-overview #kpiRow .kpi-label{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-overview #kpiRow .kpi-label::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--kc,var(--brand))} #view-overview #kpiRow .kpi-val{margin:0;font-size:clamp(19px,6vw,26px);font-weight:700;letter-spacing:-.6px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:clip} #view-overview #kpiRow .kpi-foot{margin:auto 0 0;font-size:10.5px;line-height:1.35;-webkit-line-clamp:2} #view-overview #kpiRow .skeleton{height:100px;border-radius:var(--r-lg)} } /* ---------- ТЕЛЕФОН, слой 24.09.2026: шапка помещается ---------- Владелец: «в моб версии не всё на экран помещается». Было: кнопки периодов с полями 9/12 px не оставляли места календарю (он уезжал за край в прокрутку), а подпись под заголовком уходила под фиксированный переключатель страниц (Offline/Online — в демо «Продукт 1/Продукт 2», шире). */ @media (max-width:640px){ #rangeSeg button{padding:8px 8px;font-size:11px;letter-spacing:-.1px} .controls .picker-btn{padding:0 10px;min-height:34px} .controls .picker-btn #pickerLabel{display:none} /* календарь — только значок: подпись периода уже в заголовке */ .sidebar .page-switch button{white-space:nowrap} body:has(.sidebar .page-switch:not([style*="none"])) .topbar-title{padding-right:206px} } /* 08.10.2026: карточка «Окупаемость рекламы» на телефоне — во всю ширину */ @media (max-width:900px){ #view-overview #kpiRow .kpi-roas{grid-column:1/-1} } @media (max-width:900px){ .cs-pops{margin-left:0;flex-wrap:wrap} .cr-sum-bar{flex-basis:100%} } @media (max-width:900px){ .mgr-fun-row{grid-template-columns:84px minmax(0,1fr) 52px;gap:8px} .mgr-fun-v{display:none} } @media (max-width:900px){ .zv-fun .mgr-fun-row{grid-template-columns:84px minmax(0,1fr) 74px} } @media (max-width:900px){ .capi-main{grid-template-columns:1fr} .capi-ev-row{grid-template-columns:110px minmax(0,1fr) 64px;gap:8px} } /* 08.10.2026, ревизия №2: телефон */ @media (max-width:900px){ .mgr-flow{flex-direction:column} .mf-steps{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))} .mf-step{border-bottom:1px solid var(--stroke)} .mf-step span{white-space:normal} .mf-speed{border-left:0} .statline{gap:10px 16px;padding:12px 14px} .sl-nums{gap:8px 16px} .conn-grid{grid-template-columns:1fr} .mgr-bt .bt-bar{display:none} #appearanceCard .skin-grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))} } /* 08.10.2026, ревизия №3: телефон */ @media (max-width:900px){ .sh-right{margin-left:0;width:100%;justify-content:space-between} .seg.sh-roles{flex-wrap:nowrap;overflow-x:auto;max-width:100%} .sh-row2 .sum-cols-wrap{margin-left:0} .pb-row{grid-template-columns:minmax(0,1fr) 70px 70px} .pb-bar{grid-column:1/-1;grid-row:2} .ai-now{flex-direction:column;gap:14px} .ai-now-r{flex:none;padding:12px 0 0;border-left:0;border-top:1px solid var(--stroke)} } /* ===== Доска задач менеджера (15.10.2026): Менеджеры → Задачи ===== */ /* ===== Доска МОПа и РОПа (16.10.2026): очередь с таймером, карточки, таблица РОПа, формы ===== */ .bd-card-wrap{padding:0} .bd-stat{display:flex;gap:16px 24px;align-items:flex-end;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--stroke)} .bd-stat>div{display:flex;flex-direction:column;gap:2px} .bd-stat b{font-size:24px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums;color:var(--txt)} .bd-stat b i{font-style:normal;font-size:12px;font-weight:500;color:var(--txt-3);margin-left:6px} .bd-stat b.bad{color:var(--bad)} .bd-stat b.ok{color:var(--ok)} .bd-stat b.warn{color:var(--warn)} .bd-stat span{font-size:12px;color:var(--txt-3)} .bd-stat .bd-tools{flex-direction:row;gap:8px;align-items:center;margin-left:auto} .bd-q{min-width:190px;padding:7px 10px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--panel);color:var(--txt);font:inherit;font-size:13px} .bd-group{padding:4px 0} .bd-group h4{display:flex;align-items:center;gap:8px;margin:12px 18px 6px;font-size:13px;font-weight:600;color:var(--txt-2)} .bd-group h4 span{color:var(--txt-3);font-weight:500} .bd-fold{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;font-weight:600} .bd-g-overdue h4 .bd-fold{font-weight:500;color:var(--txt-3);margin-left:auto;font-size:12px} @keyframes bdFlash{0%{background:color-mix(in srgb, var(--c1) 22%, transparent)}100%{background:transparent}} @keyframes bdPulse{50%{opacity:.45}} .bd-done{display:flex;justify-content:space-between;gap:12px;padding:7px 18px;border-top:1px solid var(--stroke);font-size:12.5px;color:var(--txt-2)} .bd-done span:last-child{color:var(--txt-3);white-space:nowrap} .bd-done a{color:var(--txt-3)} .bd-quiet{margin:4px 18px 10px;font-size:12.5px;color:var(--txt-3)} .bd-empty{padding:8px 18px} .bd-note{margin:0;padding:12px 18px 16px;font-size:12px;color:var(--txt-3);border-top:1px solid var(--stroke)} .bd-rop{margin-bottom:12px;padding:14px 18px 10px} .bd-rop-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px} .bd-rop-head b{font-size:14px} .bd-rop-head span{font-size:12px;color:var(--txt-3)} .bd-table-wrap{overflow:auto} .bd-table{width:100%;border-collapse:collapse;font-size:13px} .bd-table th{font-weight:600;color:var(--txt-3);font-size:11.5px;text-align:left;padding:6px 8px;border-bottom:1px solid var(--stroke);white-space:nowrap} .bd-table td{padding:7px 8px;border-bottom:1px solid var(--stroke);white-space:nowrap} .bd-table .num{text-align:right;font-variant-numeric:tabular-nums} .bd-table td.bad{color:var(--bad);font-weight:600} .bd-table tbody tr{cursor:pointer} .bd-table tbody tr:hover{background:var(--panel-2)} .bd-table tbody tr.on{background:color-mix(in srgb, var(--c1) 12%, transparent)} .bd-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--stroke-2);margin-right:8px;vertical-align:1px} .bd-dot.ok{background:var(--ok)} .bd-dot.warn{background:var(--warn)} .bd-dot.bad{background:var(--bad)} .bd-alerts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .bd-alert{border:1px solid var(--stroke);background:var(--panel);color:var(--txt-2);border-radius:var(--r-md);padding:6px 10px;font:inherit;font-size:12.5px;cursor:pointer;text-align:left} .bd-alert.no_call{border-color:color-mix(in srgb, var(--bad) 60%, var(--stroke));color:var(--bad)} .bd-alert.idle{border-color:color-mix(in srgb, var(--warn) 60%, var(--stroke));color:var(--warn)} .bd-alert:hover{background:var(--panel-2)} .bd-ov{z-index:130} .bd-form{width:min(440px,100%)} .bd-form .modal-ctl span{font-size:12px;color:var(--txt-3)} .bd-form input,.bd-form select,.bd-form textarea{padding:8px 10px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--panel);color:var(--txt);font:inherit;font-size:13px;width:100%;box-sizing:border-box} .bd-form .bad{border-color:var(--bad)} .bd-quick{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px} .bd-quick .mini-btn{margin-left:0} .bd-form-foot{display:flex;justify-content:flex-end;margin-top:6px} /* ===== Доска, вторая версия (16.10.2026): «сейчас», день, обзор РОПа, прозвон ===== */ .bd-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px} .bd-head b{font-size:16px;font-weight:700} .bd-live{font-size:12px;padding:3px 9px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok);font-weight:600} .bd-hero{padding:16px 18px 6px;border-bottom:1px solid var(--stroke)} .bd-hero-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px} .bd-hero-head b{font-size:15px;font-weight:700} .bd-hero-head span{font-size:12.5px;color:var(--txt-3)} .bd-hero-head .bd-start{margin-left:auto;min-height:38px;padding:0 18px;font-weight:650} .bd-day{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 20px;padding:14px 18px;border-bottom:1px solid var(--stroke)} .bd-goal{display:flex;flex-direction:column;gap:3px;min-width:0} .bd-goal b{font-size:22px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums;color:var(--txt)} .bd-goal b i{font-style:normal;font-size:12px;font-weight:500;color:var(--txt-3);margin-left:6px} .bd-goal b.bad{color:var(--bad)} .bd-goal b.ok{color:var(--ok)} .bd-goal b.warn{color:var(--warn)} .bd-goal span{font-size:12px;color:var(--txt-3)} .bd-bar{height:4px;border-radius:2px;background:var(--panel-2);overflow:hidden;margin-top:3px} .bd-bar i{display:block;height:100%;background:var(--c1);border-radius:2px;transition:width .4s var(--ease)} .bd-bar.good i{background:var(--ok)} .bd-queue-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px 4px} .bd-queue-head b{font-size:15px;font-weight:700} .bd-queue-head .bd-tools{margin-left:auto;display:flex;gap:8px;align-items:center} .bd-rop-head .bd-tools{display:flex;gap:8px;align-items:center} .bd-rop-head>div:first-child{display:flex;flex-direction:column;gap:2px} .bd-rop-head>div:first-child span{font-size:12.5px;color:var(--txt-3)} .bd-rop-note{font-size:12px;color:var(--txt-3)} .bd-lb{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:4px 0 6px} .bd-lb-card{display:flex;flex-direction:column;gap:8px;text-align:left;padding:12px 14px;border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--panel);color:var(--txt);font:inherit;cursor:pointer;transition:border-color .15s var(--ease)} .bd-lb-card:hover{border-color:var(--c1)} .bd-lb-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .bd-lb-top b{font-size:14px;font-weight:700} .bd-lb-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px} .bd-lb-nums div{display:flex;flex-direction:column} .bd-lb-nums b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1} .bd-lb-nums b.bad{color:var(--bad)} .bd-lb-nums b.ok{color:var(--ok)} .bd-lb-nums span{font-size:11px;color:var(--txt-3)} .bd-lb-foot{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--txt-3)} .bd-lb-foot span{color:var(--c1);font-weight:600} /* прозвон: режим одной задачи поверх всего */ .pz{position:fixed;inset:0;z-index:125;background:var(--paper);overflow:auto;padding:16px} body.pz-open{overflow:hidden} .pz-box{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:14px;min-height:calc(100vh - 32px)} .pz-body{display:flex;flex-direction:column;justify-content:center;flex:1;padding:12px 0 40px} .pz-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--stroke)} .pz-title{display:flex;align-items:baseline;gap:12px} .pz-title b{font-size:20px;font-weight:800} .pz-clock{font-size:16px;font-variant-numeric:tabular-nums;color:var(--txt-2)} .pz-clock.over{color:var(--bad)} .pz-stats{display:flex;align-items:baseline;gap:6px 14px;margin-left:auto;font-size:12px;color:var(--txt-3)} .pz-stats b{font-size:20px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums;margin-right:-8px} .pz-nav{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12.5px;color:var(--txt-3)} .pz-sum{padding:40px 20px;text-align:center} .pz-sum h3{font-size:22px;margin:0 0 8px} .pz-sum p{color:var(--txt-2);margin:0 0 12px} .pz-sum ul{list-style:none;padding:0;margin:0 0 16px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;color:var(--txt-2)} .pz-sum-acts{display:flex;gap:10px;justify-content:center} /* ===== Доска как игра (16.10.2026): оболочка поверх токенов pulse ===== Один шрифт для цифр и заголовков (Space Grotesk), спокойные поверхности, одно золото. Внутри .bd-game переопределены токены, поэтому кнопки, карточки и формы pulse сами берут палитру. Светлая тема ниже переопределяет только цвета. */ .bd-game,.pz.bd-game,.bd-ov.bd-game .modal-box,.g-levelup{--font-display:"Space Grotesk","Inter Tight","Inter",sans-serif;--g-acc:var(--brand, var(--c1));color:var(--txt);font-variant-numeric:tabular-nums} .bd-game{background:var(--bg-2);border-radius:var(--r-lg);padding:16px;margin:-2px 0 0} .bd-game .card{background:var(--panel);border:1px solid var(--stroke);box-shadow:none;color:var(--txt);border-radius:var(--r-lg)} .bd-game .btn,.bd-game .mini-btn{background:var(--panel-2);color:var(--txt);border:1px solid var(--stroke-2);border-radius:var(--r-md);min-height:36px;padding:0 14px;font-size:13px;font-weight:600;margin:0;display:inline-flex;align-items:center;gap:6px;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)} .bd-game .btn:hover,.bd-game .mini-btn:hover{border-color:var(--c1);background:var(--panel-2);color:var(--heading)} .bd-game .btn.on{background:color-mix(in srgb, var(--g-acc) 22%, var(--panel-2));border-color:color-mix(in srgb, var(--g-acc) 60%, var(--stroke-2));color:var(--heading)} .bd-game .btn.ghost{background:transparent;border-color:transparent;color:var(--txt-3)} .bd-game .btn-primary,.bd-game .btn-primary:hover{background:var(--primary-bg);color:var(--primary-fg);border-color:var(--primary-bg);font-weight:700} .bd-game input,.bd-game select,.bd-game textarea{background:var(--panel-2);color:var(--txt);border-color:var(--stroke-2);accent-color:var(--g-acc)} .bd-game input:focus,.bd-game select:focus,.bd-game textarea:focus{outline:2px solid color-mix(in srgb, var(--g-acc) 70%, transparent);outline-offset:1px} .bd-game ::placeholder{color:var(--txt-3)} .bd-game .ui-state{color:var(--txt-2)} .bd-game .bd-tools{display:flex;gap:8px;align-items:center} /* верхняя панель */ .g-top{display:grid;grid-template-columns:minmax(260px,1.5fr) auto auto;gap:16px 28px;align-items:center;padding:18px 22px;border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--panel)} .g-top-id{display:flex;align-items:center;gap:16px;min-width:0} .g-top-txt{display:flex;flex-direction:column;gap:4px;min-width:0} .g-top-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .g-top-name b{font:700 22px/1.1 var(--font-display);letter-spacing:-.01em;color:var(--heading)} .g-top-rank{font-size:12px;color:var(--c1);font-weight:600} .g-top-sub{font-size:12.5px;color:var(--txt-3);display:flex;gap:10px;flex-wrap:wrap} .g-back{min-height:30px;padding:0 10px;font-size:12px} .g-event{color:var(--txt-3)} .g-event.on{color:var(--c1);font-weight:600} .g-elo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--stroke-2);color:var(--txt)} .g-elo i{font-style:normal;font-size:11px;color:var(--txt-3)} .g-elo i.up{color:var(--ok)} .g-top-stats{display:flex;gap:26px} .g-top-stats div{display:flex;flex-direction:column;gap:2px;min-width:52px} .g-top-stats b{font:700 24px/1.05 var(--font-display);color:var(--heading)} .g-top-stats b i{font-style:normal;font-size:13px;font-weight:600;color:var(--txt-3)} .g-top-stats span{font-size:12px;color:var(--txt-3)} .g-top-act{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-left:auto} .g-top .bd-start{min-height:40px;padding:0 20px;font-size:14px} .g-lvl{position:relative;flex:none} .g-lvl .g-ring{position:absolute;inset:0} .g-lvl .g-ring-bg{stroke:var(--panel-2)} .g-lvl b{position:absolute;inset:7px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--panel-2);font:700 22px/1 var(--font-display);color:var(--heading)} .g-lvl.l5 b{background:color-mix(in srgb, var(--g-acc) 28%, var(--panel-2))} /* подтверждение из amo */ .g-last{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 14px;border:1px solid color-mix(in srgb, var(--ok) 45%, var(--stroke));border-radius:var(--r-lg);background:color-mix(in srgb, var(--ok) 8%, var(--panel))} .g-last.warn{border-color:color-mix(in srgb, var(--warn) 55%, var(--stroke));background:color-mix(in srgb, var(--warn) 8%, var(--panel))} .g-last-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none} .g-last.warn .g-last-dot{background:var(--warn)} .g-last-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .g-last-txt b{font-size:13px;color:var(--heading)} .g-last-txt span{font-size:12.5px;color:var(--txt-2)} .g-last .btn.ghost{min-height:28px;padding:0 8px;font-size:16px} /* кольца */ .g-ring{transform:rotate(-90deg);flex:none} .g-ring-bg{fill:none;stroke:var(--panel-2)} .g-ring-fg{fill:none;stroke:var(--g-acc);stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease),stroke .3s} .g-ring.done .g-ring-fg{stroke:var(--ok)} .g-ring.warn .g-ring-fg{stroke:var(--warn)} .g-ring.bad .g-ring-fg{stroke:var(--bad)} .g-ring-wrap{position:relative;width:104px;height:104px;flex:none} .g-ring-wrap.small{width:60px;height:60px} .g-ring-wrap.small .pz-clock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 14px var(--font-display)} /* текущая задача и задания */ .g-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:16px;margin-top:16px} .g-main h3,.g-rating h3,.g-feed h3,.g-h3{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font:700 15px var(--font-display);color:var(--heading)} .g-main h3 span,.g-rating h3 span,.g-feed h3 span,.g-h3 span{font:500 12px var(--font);color:var(--txt-3)} .g-mission,.g-side,.g-rating,.g-feed{padding:18px 20px;border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--panel);min-width:0} .g-side{display:flex;flex-direction:column;gap:14px} .g-qlist,.g-wlist{display:flex;flex-direction:column} .g-q{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--stroke)} .g-q:first-child{border-top:0;padding-top:0} .g-q-ring{width:30px;height:30px;display:flex;align-items:center;justify-content:center} .g-check{width:26px;height:26px;border-radius:50%;background:var(--ok);position:relative} .g-check::after{content:'';position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)} .g-q-txt{display:flex;flex-direction:column;gap:1px;min-width:0} .g-q-txt b{font-size:13.5px;font-weight:600;color:var(--heading)} .g-q-txt span{font-size:12px;color:var(--txt-3)} .g-q em{font:600 13px var(--font-display);font-style:normal;color:var(--txt-3)} .g-q.done .g-q-txt b{color:var(--txt-2)} .g-q.done em{color:var(--ok)} .g-q.all,.g-q.team{border-top:1px dashed var(--stroke-2)} .g-q.just{animation:gJust 1.6s ease-out} @keyframes gJust{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent)}100%{box-shadow:0 0 0 12px transparent}} .g-w{display:flex;flex-direction:column;gap:6px;padding:9px 0;border-top:1px solid var(--stroke)} .g-wlist .g-w:first-child{border-top:0} .g-w-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline} .g-w-top b{font-size:13px;font-weight:600;color:var(--heading)} .g-w-top span{font-size:12px;color:var(--txt-3);white-space:nowrap} .g-tiers{display:flex;gap:4px} .g-tiers i{flex:1;height:5px;border-radius:2px;background:var(--panel-2);position:relative;overflow:hidden} .g-tiers i::after{content:'';position:absolute;inset:0;width:var(--p,0%);background:var(--g-acc);border-radius:2px;transition:width .6s var(--ease)} .g-tiers i.done::after{background:var(--ok);width:100%} .g-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .g-badges-h{font-size:12px;color:var(--txt-3);margin-right:4px} .g-badge{font-size:11.5px;padding:3px 9px;border-radius:var(--r-sm);border:1px solid color-mix(in srgb, var(--g-acc) 50%, var(--stroke));color:var(--txt);background:color-mix(in srgb, var(--g-acc) 8%, transparent)} /* карточки задач: тревога на краях, текст спокойный */ .bd-game .bd-card-wrap{margin-top:16px;padding:6px 20px 16px} .bd-game .bd-queue-head{padding:12px 0 4px} .bd-game .bd-queue-head b{font:700 15px var(--font-display);color:var(--heading)} .bd-game .bd-queue-head .bd-q{margin-left:auto;min-width:220px;min-height:36px;border-radius:var(--r-md)} .bd-game .bd-group h4{margin:14px 0 4px;color:var(--txt-2);font-size:13px} .bd-game .bd-done{padding:8px 0;border-top:1px solid var(--stroke)} .bd-game .bd-note{padding:14px 0 4px;border-top:1px solid var(--stroke)} .bd-game .bd-alerts{margin-top:14px} .bd-game .bd-alert{color:var(--txt-2);background:var(--panel-2);border-radius:var(--r-md)} .bd-game .bd-alert.no_call{border-color:color-mix(in srgb, var(--bad) 50%, var(--stroke))} .bd-game .bd-alert.idle{border-color:color-mix(in srgb, var(--warn) 50%, var(--stroke))} .bd-game .bd-alert.pile{border-color:color-mix(in srgb, var(--bad) 28%, var(--stroke))} /* всплывающие очки, уход карточки, новый уровень */ .g-float{position:fixed;z-index:200;transform:translate(-50%,0);font:700 24px var(--font-display);color:var(--ok);text-shadow:0 2px 12px color-mix(in srgb, var(--bg) 60%, transparent);pointer-events:none;animation:gFloat 1.3s ease-out forwards} @keyframes gFloat{0%{opacity:0;transform:translate(-50%,8px)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-72px)}} .g-out{animation:gOut .34s ease-in forwards} @keyframes gOut{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(36px) scale(.98)}} .g-levelup{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--bg) 78%, transparent);animation:gLvl 2.6s ease-in-out forwards} .g-levelup-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 40px;border-radius:var(--r-lg);background:var(--panel);border:1px solid color-mix(in srgb, var(--g-acc) 60%, var(--stroke));box-shadow:0 30px 80px -30px rgba(0,0,0,.6)} .g-levelup-box span{font-size:12px;color:var(--txt-3);margin-top:8px} .g-levelup-box b{font:700 26px var(--font-display);color:var(--heading)} @keyframes gLvl{0%{opacity:0}10%{opacity:1}85%{opacity:1}100%{opacity:0}} @media (prefers-reduced-motion:reduce){.g-float,.g-out,.g-quest.just,.g-levelup,.g-q.just{animation:none}.g-out{opacity:0}} /* обзор РОПа: подиум и строки */ .g-rating{margin-top:16px} .g-podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px} .g-pod{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 12px 14px;border-radius:var(--r-lg);background:var(--panel-2);border:1px solid var(--stroke);color:var(--txt);font:inherit;cursor:pointer;position:relative;transition:border-color .15s var(--ease)} .g-pod:hover{border-color:var(--c1)} .g-pod.p1{order:2;border-color:color-mix(in srgb, var(--g-acc) 60%, var(--stroke))} .g-pod.p2{order:1} .g-pod.p3{order:3} .g-pod-place{position:absolute;left:12px;top:10px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 12px var(--font-display);color:#161616;background:#cfd4dc} .g-pod.p1 .g-pod-place{background:var(--g-acc)} .g-pod.p3 .g-pod-place{background:#d9a067} .g-pod b{font-size:15px;font-weight:700;color:var(--heading);margin-top:6px} .g-pod-rank{font-size:11.5px;color:var(--txt-3)} .g-pod em{font:700 22px/1.1 var(--font-display);font-style:normal;color:var(--heading);margin-top:4px} .g-pod-sub{font-size:11.5px;color:var(--txt-3)} .g-rows{display:flex;flex-direction:column} .g-row{display:grid;grid-template-columns:28px minmax(120px,1.4fr) repeat(6,minmax(64px,.8fr)) auto;gap:10px;align-items:center;padding:10px 6px;border-top:1px solid var(--stroke);background:transparent;color:var(--txt);font:inherit;text-align:left;cursor:pointer;border-left:0;border-right:0;border-bottom:0;border-radius:0} .g-row:hover{background:var(--panel-2)} .g-row.live .g-row-name b::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-left:8px;vertical-align:2px} .g-row-pos{font:700 13px var(--font-display);color:var(--txt-3)} .g-row-name{display:flex;flex-direction:column;min-width:0} .g-row-name b{font-size:13.5px;font-weight:700;color:var(--heading)} .g-row-name span{font-size:11.5px;color:var(--txt-3)} .g-row-n{display:flex;flex-direction:column} .g-row-n b{font:700 15px var(--font-display);color:var(--heading)} .g-row-n b.bad{color:var(--heading)} .g-row-n span{font-size:11px;color:var(--txt-3)} .g-row-open{font-size:12px;color:var(--c1);font-weight:600} /* события */ .g-feed{margin-top:16px} .g-ev{display:grid;grid-template-columns:48px 120px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--stroke);font-size:12.5px} .g-ev-t{color:var(--txt-3)} .g-ev-who{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)} .g-ev-txt{color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .g-ev b{color:var(--ok);font-family:var(--font-display)} /* прозвон */ .pz.bd-game{background:var(--bg);border-radius:0;padding:16px} .pz-box{max-width:1040px} .pz-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--stroke)} .pz-session{display:flex;align-items:center;gap:12px} .pz-title{display:flex;flex-direction:column} .pz-title b{font:700 20px var(--font-display);color:var(--heading)} .pz-title span{font-size:12px;color:var(--txt-3)} .pz-clock.over{color:var(--bad)} .pz-stats{display:flex;gap:22px;margin-left:auto} .pz-stats div{display:flex;flex-direction:column;gap:1px} .pz-stats b{font:700 20px/1.05 var(--font-display);color:var(--heading);margin:0} .pz-stats span{font-size:11.5px;color:var(--txt-3)} .pz-stats .gm-xp{color:var(--ok)} .pz-body{display:flex;flex-direction:column;justify-content:center;flex:1;padding:12px 0 40px} .pz-nav{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12.5px;color:var(--txt-3)} .pz-sum{padding:40px 20px;text-align:center} .pz-sum h3{font:700 22px var(--font-display);color:var(--heading);margin:0 0 14px} .pz-sum p{color:var(--txt-2);margin:0 0 12px} .pz-sum ul{list-style:none;padding:0;margin:0 0 16px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;color:var(--txt-2)} .pz-sum-grid{display:grid;grid-template-columns:repeat(4,minmax(90px,120px));gap:12px;justify-content:center;margin:0 0 14px} .pz-sum-grid div{display:flex;flex-direction:column;align-items:center;padding:12px 10px;border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--panel)} .pz-sum-grid b{font:700 22px var(--font-display);color:var(--heading)} .pz-sum-grid span{font-size:12px;color:var(--txt-3)} .pz-sum-acts{display:flex;gap:10px;justify-content:center} .bd-ov.bd-game .modal-box{background:var(--panel);color:var(--txt);border-color:var(--stroke-2)} .g-switch{display:inline-flex;gap:4px;padding:3px;border-radius:var(--r-md);background:var(--panel-2);margin-right:6px} .g-switch .btn{min-height:30px;padding:0 12px;font-size:12.5px;border-color:transparent;background:transparent} .g-switch .btn.on{background:var(--panel);border-color:var(--stroke-2);color:var(--heading)} .g-row.plain{cursor:default} .g-row.plain:hover{background:transparent} .g-pod:not([data-who]){cursor:default} .g-pod:not([data-who]):hover{border-color:var(--stroke)} .g-pod.p1:not([data-who]):hover{border-color:color-mix(in srgb, var(--c1) 60%, var(--stroke))} /* Доска на телефоне: карточки в столбец, кнопки под палец (в конце файла, как остальная мобильная вёрстка) */ @media (max-width:900px){ .bd-stat{gap:14px 18px} .bd-stat b{font-size:20px} .bd-stat .bd-tools{margin-left:0;width:100%} .bd-q{flex:1;min-width:0} .bd-rop{padding:12px 14px 8px} .bd-done{flex-direction:column;gap:2px} } /* ---- карточка задачи v4 (19.10.2026, владелец: «что за бред, некрасиво, сделай удобно») ---- Одна разметка, две плотности. Строка очереди: срок · имя и задача · номер, раскрывается по клику. Полная карточка (текущая задача, прозвон, раскрытая строка): кольцо срока справа от имени, что сделать, последний контакт, одна строка действий. Цвет только на левом ребре и кольце. */ .tk{position:relative;min-width:0} .tk.flash{animation:bdFlash 1.6s ease-out} .tk-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:10px 12px 10px 16px;border-top:1px solid var(--stroke);cursor:pointer;transition:background-color .15s ease-out} .tk-row:hover{background:color-mix(in srgb, var(--txt) 4%, transparent)} .tk-row.tk-burning{box-shadow:inset 3px 0 0 var(--bad)} .tk-row.tk-overdue{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--bad) 55%, transparent)} .tk-row.tk-today{box-shadow:inset 3px 0 0 var(--warn)} .tk-row.tk-closed{opacity:.65} .tk-due{display:flex;flex-direction:column;gap:1px;min-width:0;font-variant-numeric:tabular-nums} .tk-due > b{font:700 15px/1.15 var(--font-display);color:var(--heading);white-space:nowrap} .tk-due > span{font-size:11.5px;line-height:1.2;color:var(--txt-3);white-space:nowrap} .tk-due.t-burn > b,.tk-due.t-red > b{color:var(--bad)} .tk-lead{min-width:0} .tk-name-row{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap} .tk-name{font-size:14.5px;font-weight:650;color:var(--heading);text-decoration:none} .tk-name:hover{text-decoration:underline} .tk-meta{font-size:12px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .tk-marks{display:inline-flex;gap:8px;font-size:12px;color:var(--txt-3)} .tk-marks i{font-style:normal;white-space:nowrap} .tk-marks i.ok{color:var(--ok-fg)} .tk-marks i.off{text-decoration:line-through} .tk-line{margin-top:2px;font-size:12.5px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-line .dim,.tk-ctx .dim{color:var(--txt-3)} .tk-line .bad::before,.tk-ctx .bad::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bad);margin-right:6px;vertical-align:1px} .tk-line em,.tk-ctx em{font-style:normal;color:var(--txt-3)} .tk-sep{margin:0 6px;color:var(--txt-3)} .tk-right{display:flex;align-items:center;gap:4px} .tk-num{font-size:13.5px;font-weight:600;color:var(--txt);text-decoration:none;white-space:nowrap;padding:6px 10px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--panel);font-variant-numeric:tabular-nums;transition:border-color .15s ease-out,color .15s ease-out} .tk-num:hover{border-color:var(--stroke-2);color:var(--heading)} .tk-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--txt-3);cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out} .tk-icon:hover{background:var(--panel-2);color:var(--heading);border-color:var(--stroke)} .tk-icon:active{transform:scale(.96)} .tk-icon svg,.tk-call svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .tk-full{display:flex;flex-direction:column;gap:14px;min-width:0} .tk-full.tk-inq{padding:14px 16px 16px;border-top:1px solid var(--stroke);background:color-mix(in srgb, var(--txt) 3%, transparent)} .tk-full.tk-inq.tk-burning{box-shadow:inset 3px 0 0 var(--bad)} .tk-full.tk-inq.tk-overdue{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--bad) 55%, transparent)} .tk-full.tk-inq.tk-today{box-shadow:inset 3px 0 0 var(--warn)} .tk-head{display:flex;align-items:flex-start;gap:16px;min-width:0} .tk-head .tk-lead{flex:1} .tk-full .tk-name{font-size:18px;font-weight:700;text-wrap:balance} .tk-amo{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--txt-2);text-decoration:none;padding:2px 8px;border:1px solid var(--stroke);border-radius:var(--r-sm);transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out} .tk-amo:hover{color:var(--heading);border-color:var(--stroke-2);background:var(--panel-2)} .tk-meta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:12.5px;color:var(--txt-3)} .tk-meta-row .tk-meta{white-space:normal} .tk-full .tk-due{flex-direction:row;align-items:center;gap:10px;margin-left:auto;flex:none} .tk-ring{position:relative;width:64px;height:64px;flex:none} .tk-ring svg{position:absolute;inset:0;width:100%;height:100%} .tk-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 6px;font:700 14px/1 var(--font-display);color:var(--heading);text-align:center;font-variant-numeric:tabular-nums} .tk-due-txt{display:flex;flex-direction:column;gap:2px} .tk-due-txt b{font:650 13.5px/1.2 var(--font);color:var(--txt);white-space:nowrap} .tk-due-txt span{font-size:12px;color:var(--txt-3);white-space:nowrap} .tk-due.t-burn .tk-due-txt b,.tk-due.t-red .tk-due-txt b{color:var(--bad)} .tk-body{display:flex;flex-direction:column;gap:6px;min-width:0} .tk-what{font-size:15px;font-weight:650;color:var(--heading);text-wrap:pretty} .tk-text{font-size:13px;color:var(--txt-2);text-wrap:pretty} .tk-ctx{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--txt-2)} .tk-ctx span{display:block;min-width:0;overflow-wrap:anywhere} .tk-wa[data-clamp]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer} .tk-wa[data-clamp].open{display:block;-webkit-line-clamp:unset} .tk-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--stroke)} .tk-phone{display:inline-flex;align-items:center;gap:4px} .tk-phone .tk-icon{width:40px;height:40px;border-color:var(--stroke);color:var(--txt-2)} .tk-call{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--stroke-2);border-radius:var(--r-md);background:var(--panel);color:var(--heading);font-size:15px;font-weight:650;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background-color .15s ease-out,border-color .15s ease-out} .tk-call:hover{background:var(--panel-2)} .tk-acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto} .tk-acts .btn{min-height:38px;padding:0 14px;font-size:13px;font-weight:600} .tk-acts .btn:disabled,.tk-link:disabled{opacity:.5;cursor:default} .tk-link{background:none;border:0;padding:0 4px;min-height:38px;font:inherit;font-size:13px;color:var(--txt-3);cursor:pointer} .tk-link:hover{color:var(--heading);text-decoration:underline} /* «Дальше»: следующие задачи одной строкой под текущей */ .tk-next{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px dashed var(--stroke);font-size:12.5px;color:var(--txt-3)} .tk-next > span{margin-right:4px} .tk-next button{display:inline-flex;align-items:center;gap:6px;max-width:220px;min-height:30px;padding:0 10px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--panel);color:var(--txt-2);font:inherit;font-size:12.5px;cursor:pointer;transition:border-color .15s ease-out,color .15s ease-out} .tk-next button:hover{border-color:var(--stroke-2);color:var(--heading)} .tk-next button b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .tk-next button i{font-style:normal;color:var(--txt-3);font-variant-numeric:tabular-nums;flex:none} .tk-next em{font-style:normal} /* где лежит карточка */ .g-mission .tk-full{padding:0} .pz-body .tk-full{padding:22px 24px;border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--panel)} .pz-body .tk-full.tk-burning{box-shadow:inset 4px 0 0 var(--bad)} .pz-body .tk-full.tk-overdue{box-shadow:inset 4px 0 0 color-mix(in srgb, var(--bad) 55%, transparent)} .pz-body .tk-ring{width:80px;height:80px} .pz-body .tk-ring b{font-size:17px} .pz-body .tk-acts .btn,.pz-body .tk-call{min-height:44px;font-size:14px} .pz-body .tk-what{font-size:17px} .pz-body .tk-ctx,.pz-body .tk-text{font-size:14px} @media (prefers-reduced-motion:reduce){.tk.flash{animation:none}.tk-row,.tk-icon,.tk-num,.tk-call,.tk-amo{transition:none}} /* Доска v2 на телефоне: «сейчас» и прозвон в один столбец, кнопки под палец */ @media (max-width:900px){ .tk-row{grid-template-columns:60px minmax(0,1fr);padding:10px 12px 10px 14px} .tk-right{grid-column:1/-1;justify-content:flex-start} .tk-num{flex:1;min-height:40px;display:inline-flex;align-items:center;justify-content:center} .tk-head{flex-wrap:wrap} .tk-full .tk-due{margin-left:0;width:100%} .tk-phone{width:100%} .tk-call{flex:1;min-height:44px;justify-content:center} .tk-acts{margin-left:0;width:100%} .tk-acts .btn{flex:1 1 45%;min-height:44px} .bd-hero{padding:14px 14px 4px} .bd-hero-head .bd-start{margin-left:0;width:100%} .bd-day{padding:12px 14px;grid-template-columns:repeat(2,1fr)} .bd-queue-head{padding:10px 14px 4px} .bd-queue-head .bd-tools{margin-left:0;width:100%} .bd-lb{grid-template-columns:1fr} .pz{padding:10px} .pz-stats{margin-left:0;width:100%} .bd-game{padding:10px;border-radius:var(--r-lg)} .g-top{grid-template-columns:1fr;gap:12px;padding:14px} .g-top-stats{gap:18px} .g-top-act{margin-left:0;justify-content:stretch} .g-top .bd-start{flex:1} .g-main{grid-template-columns:1fr} .g-last{flex-wrap:wrap} .g-podium{grid-template-columns:1fr} .g-pod.p1,.g-pod.p2,.g-pod.p3{order:0} .g-row{grid-template-columns:24px minmax(0,1fr) repeat(3,minmax(50px,.7fr));row-gap:4px} .g-row .g-row-n:nth-child(n+6){display:none} .g-row-open{display:none} .g-ev{grid-template-columns:44px minmax(0,1fr) auto} .g-ev-who{display:none} .pz-stats{margin-left:0;width:100%;flex-wrap:wrap;gap:12px} .pz-sum-grid{grid-template-columns:1fr 1fr} } /* ============ БЫСТРЫЙ ОТКЛИК (26.10.2026) ============ Владелец: отклик как в приложении Claude. Подсветка при наведении и выбор без плавных переходов; под меню и верхней панелью без размытия (оно перерисовывается при каждой прокрутке и наведении); при автообновлении цифры не приглушаются. Анимации графиков остаются. */ *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; } .sidebar { backdrop-filter: none; } .topbar { backdrop-filter: none; background: var(--bg); } :root[data-theme="light"] .topbar { backdrop-filter: none; background: var(--paper); } .main.refreshing .kpi-val, .main.refreshing td.num, .main.refreshing .fi-val { opacity: 1; } /* Органика (26.10.2026): та же таблица, что «Креативы»; подпись поста ведёт в Instagram, строка открывает пост */ .org-tbl tbody tr[data-ourl]:not([data-ourl=""]){cursor:pointer} .org-tbl .ad-name a{color:inherit;text-decoration:none} .org-tbl .ad-name a:hover{text-decoration:underline} .org-tbl th[data-osort]{cursor:pointer;white-space:nowrap} #orgMeta{flex:1 1 280px;min-width:0;white-space:normal} #orgMeta .linklike{background:none;border:0;padding:0;color:var(--c1);cursor:pointer;font:inherit;text-decoration:underline} /* «Установка и ключи» внутри «Настроек» (26.10.2026): блок со своими вкладками между «Общими» и «Пользователями» */ .set-locked{display:none!important} .set-setup{margin:6px 0 18px} #view-settings>#setupSec{grid-column:1/-1;grid-row:3;min-width:0} #view-settings>#amoUsageCard{grid-row:4} .set-setup .set-sec-head{margin:0 0 10px} .set-setup .set-sec-head h3{margin:0;font-size:15px;font-weight:650;color:var(--txt)} .set-setup .set-sec-head p{margin:2px 0 0;font-size:12px;color:var(--txt-3)}