/* glass.css — дизайн Liquid Glass для телефона и веб-приложения (≤768px). Task 6.37, 18.09.2026. * Эталон — утверждённые владельцем рендеры: docs/design/liquid-glass/*.png (+ mock.html). * Принципы: живая градиентная подложка в палитре CRM → три уровня стекла: * 1) парящие панели (шапка, нижняя капсула) — почти прозрачные, с размытием; * 2) контентное стекло (карточки, плитки) — плотнее, текст тёмный; в длинных списках БЕЗ backdrop-filter (производительность); * 3) листы снизу (меню, «О сделке», фильтры) — плотное стекло + затемнение. * Подключается последним в на всех страницах. Десктоп не затрагивается. * Точка возврата: git-тег design-before-liquid-glass-2026-09-18, архивы frontend-before-liquid-glass-2026-09-18.tar.gz. */ @media (max-width: 768px) { :root { --lg-text: #12211d; --lg-text-2: #4d615b; --lg-text-3: #8a9a95; --lg-green: #208272; --lg-green-dark: #14594c; --lg-green-pale: rgba(32, 130, 114, .14); --lg-accent: linear-gradient(180deg, #2a917c 0%, #1b6f5e 100%); --lg-accent-shadow: 0 4px 12px rgba(20, 100, 84, .35), inset 0 1px 0 rgba(255, 255, 255, .35); --lg-glass: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .44) 100%); --lg-glass-solid: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .64) 100%); --lg-glass-thin: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .16) 100%); --lg-edge: rgba(255, 255, 255, .78); --lg-shadow: 0 10px 30px rgba(20, 60, 50, .11), 0 1px 2px rgba(20, 60, 50, .07); --lg-inset: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(20, 60, 50, .05); --lg-blur: blur(22px) saturate(180%); --lg-r-card: 22px; --lg-r-pill: 20px; --lg-r-bar: 26px; --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Inter, Roboto, Arial, sans-serif; /* страницы берут цвета из своих переменных — переопределяем их под стекло */ --bg: transparent; --text: #12211d; --text-secondary: #4d615b; --text-muted: #8a9a95; } /* ── 1. Подложка: фиксированный градиент, который «преломляет» стекло ── */ html { background: #eef3f1; } html body { background: transparent !important; color: var(--lg-text); font-family: var(--lg-font); } html body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(130vw 50vh at 8% 2%, #bfead9 0%, transparent 62%), radial-gradient(110vw 48vh at 100% 22%, #cfe3f7 0%, transparent 60%), radial-gradient(125vw 54vh at 0% 68%, #f6ead2 0%, transparent 60%), radial-gradient(125vw 56vh at 100% 100%, #bfe6dc 0%, transparent 62%), #eef3f1; } html body .main, html body .main-wrapper, html body .content, html body .right-col, html body .tab-content, html body .real-content, html body .page, html body .container { background: transparent !important; } html body, html body button, html body input, html body select, html body textarea { font-family: var(--lg-font); } /* ── 2. Шапка — парящая стеклянная капсула ── */ html body .topbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 40; margin: 6px 12px 8px !important; padding: 6px 8px !important; min-height: 50px; height: auto !important; border-radius: var(--lg-r-bar) !important; border: 1px solid var(--lg-edge) !important; background: var(--lg-glass) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-shadow), var(--lg-inset) !important; gap: 6px !important; align-items: center; flex-direction: row !important; } html body .topbar h1, html body .topbar .page-title { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.2px; color: var(--lg-text); padding: 0 4px; } html body .topbar .crm-sidebar-open-btn, html body .topbar .back-btn, html body .topbar .topbar-back { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--lg-green-dark); background: transparent; border: 0; font-size: 19px; flex-shrink: 0; } html body .topbar .btn-primary, html body .topbar .btn.btn-primary, html body .topbar .btn-green { height: 38px; min-height: 38px; padding: 0 14px !important; border-radius: 19px !important; border: 0 !important; background: var(--lg-accent) !important; color: #fff !important; font-size: 14px; font-weight: 600; box-shadow: var(--lg-accent-shadow); } html body .topbar .btn-outline, html body .topbar .btn:not(.btn-primary) { height: 38px; min-height: 38px; padding: 0 12px; border-radius: 19px !important; border: 1px solid rgba(255, 255, 255, .8) !important; background: rgba(255, 255, 255, .5) !important; color: var(--lg-green-dark) !important; font-size: 13px; font-weight: 600; } /* ── 3. Контентное стекло: общие карточки и плитки ── */ html body .card, html body .section-card, html body .summary-card, html body .stat-card, html body .kpi-card, html body .db-card, html body .widget, html body .panel, html body .table-wrap, html body .ev-item, html body .lg-card { background: var(--lg-glass) !important; border: 1px solid var(--lg-edge) !important; border-radius: var(--lg-r-card) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; } html body .card-header, html body .section-header { background: transparent !important; border-color: rgba(18, 33, 29, .07) !important; } /* поля ввода и поиск — стеклянные пилюли */ html body .search-input, html body .search-box, html body .toolbar input[type=search], html body .toolbar input[type=text], html body .toolbar input:not([type]), html body .filters input[type=search], html body .lg-search { border-radius: 22px !important; border: 1px solid var(--lg-edge) !important; background: var(--lg-glass) !important; box-shadow: var(--lg-shadow), var(--lg-inset); min-height: 44px; font-size: 16px; color: var(--lg-text); } html body .search-input input, html body .search-box input { background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 16px; } html body select, html body .filter-pill, html body .filter-select { border-radius: 16px !important; border: 1px solid var(--lg-edge) !important; background-color: rgba(255, 255, 255, .55) !important; color: var(--lg-text); font-weight: 600; min-height: 34px; } html body .filter-pill.active, html body .filter-pill.is-active, html body .chip.active { background: var(--lg-accent) !important; color: #fff !important; border-color: transparent !important; } /* метки статусов — полупрозрачные, как на рендерах */ html body .status-badge, html body .dir-badge, html body .badge, html body .tag-pill { border-radius: 11px !important; font-weight: 600; } /* ── 4. Листы снизу: меню «Ещё» — светлое стекло, плитка 2×N, тёмный текст ── */ html body .sidebar, html body .sidebar.collapsed { left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important; border-radius: 38px !important; background: var(--lg-glass-solid) !important; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--lg-edge) !important; color: var(--lg-text) !important; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px) * .5) !important; } html body .sidebar.mobile-open { box-shadow: 0 -10px 40px rgba(10, 40, 32, .28), var(--lg-inset) !important; } html body .sidebar::before { background: rgba(18, 33, 29, .22) !important; width: 40px; height: 5px; margin: 10px 0 6px; } html body .sidebar .sidebar-logo { border-bottom: 0 !important; padding: 4px 20px 10px !important; color: var(--lg-text) !important; } html body .sidebar .sidebar-logo-text { color: var(--lg-text) !important; font-weight: 700; font-size: 16px; } html body .sidebar .logo-icon { background: var(--lg-accent) !important; color: #fff !important; border-radius: 50%; width: 38px !important; height: 38px !important; box-shadow: var(--lg-accent-shadow); } html body .sidebar .sidebar-nav { padding: 4px 14px 8px !important; } html body .sidebar .nav-section { gap: 8px !important; margin-bottom: 8px !important; } html body .sidebar .nav-section > .nav-item { min-height: 52px !important; border-radius: 18px !important; padding: 0 14px !important; font-size: 15px !important; font-weight: 600; background: rgba(255, 255, 255, .55) !important; border: 1px solid rgba(255, 255, 255, .8) !important; color: var(--lg-text) !important; } html body .sidebar .nav-section > .nav-item .nav-text { color: inherit !important; } html body .sidebar .nav-item .nav-icon-svg, html body .sidebar .nav-subitem .nav-icon-svg { color: var(--lg-green) !important; stroke: var(--lg-green) !important; } html body .sidebar .nav-item .nav-caret { stroke: var(--lg-text-3) !important; } html body .sidebar .nav-section > .nav-item.class-active, html body .sidebar .nav-section > .nav-item.active, html body .sidebar .nav-group-toggle.panel-open { background: rgba(32, 130, 114, .16) !important; color: var(--lg-green-dark) !important; border-color: rgba(32, 130, 114, .18) !important; } html body .sidebar .nav-panel-inline { background: rgba(255, 255, 255, .42) !important; border: 1px solid rgba(255, 255, 255, .7) !important; border-radius: 18px !important; } html body .sidebar .nav-panel-inline .nav-subitem { color: var(--lg-text) !important; font-size: 15px; font-weight: 500; } html body .sidebar .nav-panel-inline .nav-subitem.class-active { background: rgba(32, 130, 114, .14) !important; color: var(--lg-green-dark) !important; } html body .sidebar .nav-section-subtitle { color: var(--lg-text-3) !important; } html body .sidebar .user-footer, html body .sidebar .sb-notif-wrap { border-top: 1px solid rgba(18, 33, 29, .07) !important; color: var(--lg-text) !important; background: transparent !important; } html body .sidebar .user-footer *, html body .sidebar .sb-notif-wrap * { color: var(--lg-text) !important; } html body .sidebar .user-footer .uf-avatar, html body .sidebar #ufAvatar { background: var(--lg-accent) !important; color: #fff !important; } html body .crm-drawer-overlay { background: rgba(10, 30, 25, .30) !important; } /* общие листы: модальные окна → лист снизу со скруглением */ html body .modal-overlay { background: rgba(10, 30, 25, .30) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } html body .modal, html body .modal-card { border-radius: 30px !important; background: var(--lg-glass-solid) !important; border: 1px solid var(--lg-edge) !important; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: 0 -10px 40px rgba(10, 40, 32, .25), var(--lg-inset) !important; } /* акцентные кнопки по всему приложению */ html body .btn-primary, html body .btn.btn-primary, html body .btn-apply { background: var(--lg-accent) !important; color: #fff !important; border: 0 !important; border-radius: 19px !important; box-shadow: var(--lg-accent-shadow); } } /* ═════════ Экраны ═════════ */ @media (max-width: 768px) { /* ── Канбан сделок (рендер 1-kanban) ── */ html body .topbar .pipeline-tabs { gap: 6px !important; } html body .topbar .pipeline-tabs > * { border-radius: 17px !important; min-height: 34px; font-weight: 600; } html body .topbar .filter-trigger { border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, .85) !important; background: rgba(255, 255, 255, .55) !important; min-height: 40px; box-shadow: none !important; } html body .topbar .filter-trigger input { background: transparent !important; border: 0 !important; } html body .topbar .topbar-settings-menu > .btn-outline { height: 34px; min-height: 34px; font-size: 12px; } html body .kb-dots { background: transparent !important; padding: 2px 12px 10px !important; } html body .kb-dots button { background: rgba(18, 33, 29, .18) !important; } html body .kb-dots button.is-active { background: var(--lg-green) !important; width: 20px !important; } html body .kanban-column { background: transparent !important; } html body .col-m-head { background: transparent !important; border-bottom: 0 !important; padding: 0 18px 12px !important; position: relative; } html body .col-m-name { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.4px !important; line-height: 1.1; } html body .col-m-sum { font-size: 14px !important; color: var(--lg-text-2) !important; margin-top: 4px !important; } /* полоса этапа — цвет этапа приходит в border-bottom-color, рисуем им тонкую линию под шапкой */ html body .col-m-head::after { content: ''; display: block; height: 6px; border-radius: 3px; margin-top: 10px; background: linear-gradient(90deg, currentColor 34%, rgba(18, 33, 29, .08) 34%); color: var(--lg-green); } html body .kanban-cards { background: transparent !important; padding: 0 14px calc(var(--crm-bn-h, 96px) + 12px) !important; } html body .deal-card { margin: 0 0 10px !important; padding: 14px 16px !important; border-radius: var(--lg-r-card) !important; background: var(--lg-glass) !important; border: 1px solid var(--lg-edge) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; } html body .card-m-date { font-size: 13px !important; color: var(--lg-text-3) !important; } html body .card-m-title { font-size: 17px !important; font-weight: 600 !important; margin-top: 2px; } html body .card-m-resp { font-size: 15px !important; color: var(--lg-text-2) !important; margin-top: 2px; } html body .card-m-contact { font-size: 15px !important; margin-top: 2px; } html body .card-m-foot { margin-top: 10px !important; } html body .card-m-price { font-size: 14px !important; font-weight: 600 !important; color: var(--lg-text) !important; } html body .card-m-task { font-size: 13.5px !important; } html body .deal-card .lead-score-badge { top: 14px !important; right: 16px !important; height: 22px; line-height: 18px; border-radius: 11px !important; background: rgba(227, 154, 43, .16) !important; color: #a66a0d !important; font-weight: 600; } html body .deal-card .lead-score-badge.hot { background: rgba(224, 82, 79, .13) !important; color: #c23a37 !important; } html body .deal-card .badge { border-radius: 11px !important; padding: 2px 9px !important; background: var(--lg-green-pale) !important; color: var(--lg-green-dark) !important; font-weight: 600; } html body .kanban-sentinel { color: var(--lg-text-3); background: transparent !important; } html body .kb-stage-box { border-radius: 38px 38px 0 0 !important; background: var(--lg-glass-solid) !important; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--lg-edge); } html body #kbStageList button { border-radius: 16px; margin: 0 10px 4px; width: calc(100% - 20px) !important; } /* лист фильтра канбана */ /* 18.09.2026 (скрин владельца): лист был прозрачным — канбан просвечивал, а прокрутка уходила ленте под ним */ html body .filter-panel { background: var(--lg-glass-solid) !important; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } html body.kbn-sheet-open { overflow: hidden !important; } html body.kbn-sheet-open .main, html body.kbn-sheet-open .kanban-board, html body.kbn-sheet-open .kanban-col { overflow: hidden !important; touch-action: none; } html body .fp-m-title { background: var(--lg-glass-solid) !important; border-bottom: 1px solid rgba(18, 33, 29, .07) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); } html body .filter-panel .fp-col { background: var(--lg-glass) !important; border: 1px solid var(--lg-edge) !important; border-radius: var(--lg-r-card) !important; margin: 10px 12px 0 !important; overflow: hidden !important; box-shadow: var(--lg-shadow); } html body .filter-panel .fp-col h4 { background: transparent !important; border-bottom: 1px solid rgba(18, 33, 29, .07) !important; } html body .filter-panel .fp-list li { border-bottom: 1px solid rgba(18, 33, 29, .06) !important; } html body .filter-panel .fp-list li.active { background: var(--lg-green-pale) !important; color: var(--lg-green-dark) !important; font-weight: 600; } html body .filter-panel .fp-list li.fp-divider { background: transparent !important; height: 1px !important; } html body .fp-m-bar { left: 12px !important; right: 12px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px) * .5) !important; border-radius: 28px; overflow: hidden; padding: 0 !important; background: var(--lg-glass-solid) !important; border: 1px solid var(--lg-edge); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-shadow); } html body .fp-m-bar button { color: var(--lg-text-2) !important; font-weight: 600; } html body .fp-m-bar button + button { border-left: 1px solid rgba(18, 33, 29, .08) !important; } html body .fp-m-bar button.is-primary { color: #fff !important; background: var(--lg-accent) !important; } /* ── Задачи (рендер 3-tasks) ── */ html body .filters-bar { background: transparent !important; border: 0 !important; padding: 2px 12px 8px !important; } html body .filters-bar .filter-pill { height: 36px; border-radius: 18px !important; box-shadow: var(--lg-shadow); } html body .task-dots { padding: 2px 12px 10px !important; } html body .task-dots button { background: rgba(18, 33, 29, .18) !important; } html body .task-dots button.is-alert { background: #f0a5a5 !important; } html body .task-dots button.is-active { background: var(--lg-green) !important; width: 20px !important; } html body .task-dots button.is-active.is-alert { background: var(--lg-red, #e0524f) !important; } html body .kanban-board .kanban-column { background: transparent !important; } html body .tcol-m-head { background: transparent !important; border-bottom: 0 !important; padding: 0 18px 14px !important; } html body .tcol-m-name { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.4px; } html body .tcol-m-sub { font-size: 14px !important; color: var(--lg-text-2) !important; margin-top: 4px !important; } html body .kanban-column.overdue .tcol-m-name { color: #c23a37; } html body .kanban-col-list { padding: 0 14px calc(var(--crm-bn-h, 96px) + 12px) !important; background: transparent !important; } html body .task-card { border-radius: var(--lg-r-card) !important; padding: 14px 16px !important; margin-bottom: 10px !important; border: 1px solid var(--lg-edge) !important; background: var(--lg-glass) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; border-left-width: 1px !important; } html body .task-card .task-card-title, html body .task-card .task-text { font-size: 16px !important; font-weight: 600 !important; } html body .kanban-add { border-radius: var(--lg-r-card) !important; border: 1px dashed rgba(18, 33, 29, .18) !important; background: rgba(255, 255, 255, .22) !important; color: var(--lg-text-2) !important; font-weight: 600; min-height: 50px; font-size: 15px; } html body .kanban-col-empty { color: var(--lg-text-3); } } @media (max-width: 768px) { /* ── Карточка сделки (рендер 2-deal-card) ── */ html body #topbarSettingsMenu { display: none !important; } /* канбан: настройки воронки есть в меню «Ещё» */ html body .topbar h1.deal-title { font-size: 17px !important; } html body .topbar .btn-ai-menu { width: 38px; height: 38px; min-width: 38px; padding: 0 !important; border-radius: 50% !important; justify-content: center; } html body .topbar .btn-fixate { height: 38px; min-height: 38px; border-radius: 19px !important; padding: 0 13px !important; border: 0 !important; background: var(--lg-accent) !important; color: #fff !important; box-shadow: var(--lg-accent-shadow); } /* этап + квалификация — стеклянная плашка под шапкой */ html body .mobile-stage-strip { top: calc(var(--dc-topbar-h, 56px) + env(safe-area-inset-top, 0px) + 14px) !important; margin: 0 12px 10px !important; padding: 12px 14px !important; border-radius: 24px !important; border: 1px solid var(--lg-edge) !important; background: var(--lg-glass) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-shadow), var(--lg-inset) !important; font-size: 15.5px !important; } html body .mobile-stage-strip > b { font-weight: 600; color: var(--lg-green-dark); font-size: 15.5px; } html body .mobile-stage-strip .dot { width: 9px !important; height: 9px !important; } html body .mobile-stage-strip #qualBar .qual-btn { border-radius: 12px !important; min-width: 28px !important; min-height: 24px !important; height: 24px; padding: 0 9px !important; border: 0 !important; background: rgba(255, 255, 255, .45) !important; color: var(--lg-text-3); font-size: 11.5px !important; font-weight: 600; } html body .mobile-stage-strip #qualBar .qual-btn[class*="active-"] { background: rgba(255, 255, 255, .85) !important; color: var(--lg-text) !important; box-shadow: 0 1px 3px rgba(20, 60, 50, .12); } /* три равные кнопки: О сделке · Инсайты AI · Активность */ html body .feed-strip:not(.expanded) { gap: 8px !important; margin: 0 0 12px !important; padding: 0 !important; } /* 18.09.2026: ряд кнопок вынесен из ленты под строку этапа (JS, класс in-header) и закреплён — с лентой не движется */ html body .feed-strip.in-header { position: sticky; z-index: 28; margin: 0 12px 10px !important; top: calc(var(--dc-topbar-h, 56px) + env(safe-area-inset-top, 0px) + 14px + var(--dc-stage-h, 50px) + 10px); } html body .feed-strip.in-header.expanded { max-height: calc(100dvh - var(--dc-topbar-h, 56px) - var(--dc-stage-h, 50px) - var(--crm-bn-h, 84px) - 130px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 22px; } html body .feed-strip:not(.expanded) > .ai-insights, html body .feed-strip:not(.expanded) > .activity-spark, html body .feed-strip > .left-col-collapsed-handle { flex: 1 1 0 !important; width: auto !important; min-width: 0; height: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 0 8px !important; border-radius: 20px !important; border: 1px solid var(--lg-edge) !important; background: var(--lg-glass) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; display: flex !important; align-items: center; justify-content: center; gap: 6px; font-size: 13px !important; font-weight: 600; color: var(--lg-text) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); } /* закреплённые кнопки плотнее: под ними проезжает лента */ html body .feed-strip:not(.expanded) > .ai-insights.collapsed, html body .feed-strip:not(.expanded) > .activity-spark.collapsed, html body .feed-strip:not(.expanded) > .left-col-collapsed-handle { background: rgba(255, 255, 255, .74) !important; } html body .feed-strip > .left-col-collapsed-handle .left-col-chevron { display: none; } html body .feed-strip > .left-col-collapsed-handle svg:first-child { width: 16px; height: 16px; color: var(--lg-green); } html body .feed-strip.expanded > .left-col-collapsed-handle { flex: none !important; width: 100% !important; } html body .feed-strip.expanded > .ai-insights, html body .feed-strip.expanded > .activity-spark { background: var(--lg-glass) !important; border: 1px solid var(--lg-edge) !important; border-radius: var(--lg-r-card) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; } html body .feed-strip.expanded .spark-kpi, html body .feed-strip.expanded .spark-pill { background: rgba(255, 255, 255, .5) !important; } /* лента: события — стеклянные карточки, примечание — пузырь */ html body .real-content { padding: 0 12px !important; } html body #dealTimeline { background: transparent !important; } html body .tl-item { border-bottom: 0 !important; } html body .tl-item[data-tl-type="task"], html body .tl-item[data-tl-type="call"] { border-radius: var(--lg-r-card) !important; padding: 12px 14px !important; margin: 0 0 10px !important; border: 1px solid var(--lg-edge) !important; background: var(--lg-glass) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; } html body .tl-item[data-tl-type="task"]:not(.tl-item-done) { border-color: rgba(32, 130, 114, .35) !important; } html body .tl-item-overdue[data-tl-type="task"] { border-color: rgba(224, 82, 79, .45) !important; border-left-width: 1px !important; } html body .tl-icon { width: 36px !important; height: 36px !important; border-radius: 50%; background: linear-gradient(135deg, #d5f0e8, #cfe3f7) !important; font-size: 13px; } html body .tl-call-missed .tl-icon.call { background: linear-gradient(135deg, #fde2e1, #fbeedd) !important; color: #c23a37 !important; } html body .tl-call-row .tl-title { font-size: 15.5px !important; } html body .tl-call-status { border-radius: 11px !important; height: 22px; padding: 0 9px !important; display: inline-flex; align-items: center; font-size: 11.5px !important; background: rgba(224, 82, 79, .13) !important; color: #c23a37 !important; } html body .tl-call-attempts { border-radius: 11px !important; border: 0 !important; background: rgba(18, 33, 29, .07) !important; } html body .tl-call-play, html body .tl-call-dl { border-radius: 12px !important; padding: 0 10px !important; background: rgba(255, 255, 255, .6) !important; border: 1px solid var(--lg-edge) !important; text-decoration: none !important; font-weight: 600; } html body .tl-note-bubble .tl-body { border-radius: 6px 22px 22px 22px !important; padding: 12px 14px 8px !important; border: 1px solid var(--lg-edge) !important; background: var(--lg-glass) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; } html body .tl-note-text { font-size: 15.5px !important; line-height: 1.4 !important; } html body .tl-note-author { font-size: 13px !important; } html body .tl-btn, html body .tl-item .btn-green { border-radius: 17px !important; min-height: 34px; padding: 0 13px !important; background: var(--lg-accent) !important; color: #fff !important; border: 0 !important; box-shadow: var(--lg-accent-shadow); font-weight: 600; } /* поле ввода — отдельная парящая капсула над нижней панелью */ html body .tl-bottom-dock { left: 12px !important; right: 12px !important; bottom: calc(var(--crm-bn-h, 96px) + 2px) !important; padding: 0 !important; border-radius: 27px !important; border: 1px solid var(--lg-edge) !important; background: var(--lg-glass-solid) !important; -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--lg-shadow), var(--lg-inset) !important; overflow: visible !important; } html body .tl-bottom-dock .tl-composer, html body .tl-bottom-dock .tl-compose-card { background: transparent !important; border: 0 !important; box-shadow: none !important; } html body .tl-bottom-dock .tl-compose-card { padding: 6px 6px 6px 8px !important; min-height: 54px; align-items: center; } html body .tl-bottom-dock .tl-pinned { background: transparent !important; border-bottom: 1px solid rgba(18, 33, 29, .07); border-radius: 27px 27px 0 0; padding: 4px 10px; } html body .tl-mode-icons { flex-direction: row !important; gap: 2px !important; border-right: 0 !important; padding-right: 2px !important; } html body .tl-mode-ico { width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 50% !important; } html body .tl-mode-ico.active { background: var(--lg-green-pale) !important; color: var(--lg-green-dark) !important; } html body .tl-compose-input { font-size: 16px !important; background: transparent !important; } html body .tl-compose-submit { width: 42px !important; height: 42px !important; border-radius: 50% !important; background: var(--lg-accent) !important; box-shadow: var(--lg-accent-shadow); } html body .tl-compose-submit:disabled { background: linear-gradient(180deg, #9fcfc3, #86bdb0) !important; box-shadow: none; } html body .tl-composer[data-mode="task"] .tl-compose-card { border-top: 0 !important; } html body .tl-composer[data-mode="task"] ~ *, html body .tl-bottom-dock:has(.tl-composer[data-mode="task"]) { border-color: rgba(32, 130, 114, .45) !important; } /* лист «О сделке» — плотное стекло */ /* 18.09.2026 (слово владельца): не лист снизу, а стеклянная панель, раскрывающаяся из кнопки «О сделке» — как меню этапов */ html body .left-col { background: rgba(255, 255, 255, .74) !important; -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); border: 1px solid var(--lg-edge); left: 12px !important; right: 12px !important; width: auto !important; border-radius: 26px !important; top: var(--dc-info-top, 190px) !important; bottom: auto !important; max-height: calc(100dvh - var(--dc-info-top, 190px) - var(--crm-bn-h, 84px) - 16px) !important; box-shadow: 0 18px 50px rgba(20, 60, 50, .24), inset 0 1px 0 rgba(255, 255, 255, .9) !important; transform-origin: 16% 0; transform: translateY(-14px) scale(.9, .3) !important; opacity: 0; filter: blur(6px); transition: transform .2s ease-in, opacity .16s ease-in, filter .16s ease-in, visibility 0s linear .2s !important; } html body .left-col.open-mobile { z-index: 9600 !important; transform: none !important; opacity: 1; filter: none; transition: transform .44s cubic-bezier(.22, 1.28, .36, 1), opacity .18s ease, filter .25s ease, visibility 0s !important; } html body .dc-info-overlay, html body .dc-info-overlay.open { background: transparent !important; } /* без затемнения экрана — панель и так отделена стеклом и тенью; слой лишь ловит тап «мимо» */ html body .dc-info-head { padding: 14px 52px 10px !important; font-size: 15px !important; } html body .dc-info-head::before { display: none !important; } html body .dc-info-close { top: 4px !important; } /* 18.09.2026: блоки не сжимаются (overflow:hidden делал их flex-сжимаемыми — содержимое обрезалось, прокручивать было нечего) */ html body .dc-info-body > * { flex: 0 0 auto !important; } html body .dc-info-body { touch-action: pan-y; } /* поля ввода в панели — в общей стилистике; 16px — чтобы iOS не увеличивал страницу при фокусе */ html body .dc-info-body input:not([type=checkbox]):not([type=radio]):not([type=file]), html body .dc-info-body textarea, html body .dc-info-body select { font-size: 16px !important; min-height: 40px; padding: 8px 12px !important; border-radius: 14px !important; border: 1px solid rgba(47, 125, 104, .45) !important; background: rgba(255, 255, 255, .85) !important; color: var(--lg-text) !important; box-shadow: 0 0 0 3px rgba(47, 125, 104, .10) !important; outline: none !important; } html body .dc-info-body > .pipeline-card { display: none !important; } /* этап меняется в строке этапа над лентой */ html body .dc-info-body > * { opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .32s cubic-bezier(.22, 1.2, .36, 1); } html body .left-col.open-mobile .dc-info-body > * { opacity: 1; transform: none; transition-delay: .08s; } html body .left-col-collapsed-handle[aria-expanded="true"] { background: rgba(255, 255, 255, .95) !important; } @media (prefers-reduced-motion: reduce) { html body .left-col, html body .left-col.open-mobile { transition: opacity .15s ease, visibility 0s !important; transform: none !important; filter: none; } } html body .dc-info-head { background: transparent !important; border-bottom: 1px solid rgba(18, 33, 29, .07) !important; } html body .dc-info-body > * { background: rgba(255, 255, 255, .55) !important; border: 1px solid rgba(255, 255, 255, .85) !important; border-radius: 20px !important; box-shadow: none !important; overflow: hidden; } html body .dc-info-body .pipeline-card .section-header, html body .dc-info-body .section-header { background: transparent !important; color: var(--lg-text-2) !important; } } @media (max-width: 768px) { /* ── Звонки (рендер 5-calls) ── */ html body .topbar a[href="/calls-settings"] { display: none !important; } html body .summary-row { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; margin: 0 12px 10px !important; } html body .summary-row .summary-card { padding: 10px 10px !important; border-radius: 18px !important; min-width: 0; } html body .summary-label { font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--lg-text-2) !important; order: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body .summary-card { display: flex; flex-direction: column; } html body .summary-value { font-size: 21px !important; font-weight: 800 !important; letter-spacing: -.4px; order: 1; } html body .content > .card { margin: 0 12px 12px !important; overflow: hidden; } html body .filters-toggle { border-radius: 17px !important; border: 1px solid var(--lg-edge) !important; background: rgba(255, 255, 255, .55) !important; font-weight: 600; } html body .filters { background: transparent !important; border-color: rgba(18, 33, 29, .07) !important; } html body .filters input, html body .filters select { border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, .85) !important; background: rgba(255, 255, 255, .6) !important; font-size: 16px; min-height: 40px; } html body #tableBody tr { background: transparent !important; border-bottom: 1px solid rgba(18, 33, 29, .07) !important; } html body .status-badge.answered { background: rgba(32, 130, 114, .14) !important; color: var(--lg-green-dark) !important; } html body .status-badge.missed { background: rgba(224, 82, 79, .13) !important; color: #c23a37 !important; } html body .dir-badge.in { background: rgba(47, 111, 219, .12) !important; color: #2459b8 !important; } html body .dir-badge.out { background: rgba(227, 154, 43, .17) !important; color: #a66a0d !important; } html body .recording-link { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(255, 255, 255, .6); border: 1px solid var(--lg-edge); color: var(--lg-green-dark) !important; font-weight: 600; } html body .calls-more button, html body .customers-more button { border-radius: 17px !important; border: 1px solid var(--lg-edge) !important; background: rgba(255, 255, 255, .55) !important; font-weight: 600; min-height: 34px; } /* ── Контакты (рендер 6-menu, фон) ── */ html body .toolbar { padding: 0 12px 10px !important; gap: 8px !important; background: transparent !important; border: 0 !important; } html body .toolbar .btn-primary { height: 44px; border-radius: 22px !important; padding: 0 16px !important; } html body .content > .table-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 12px !important; border-radius: 0 !important; overflow: visible !important; } html body #customersList tr, html body #leadsList tr, html body #usersList tr { background: var(--lg-glass) !important; border: 1px solid var(--lg-edge) !important; border-radius: var(--lg-r-card) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; margin: 0 0 10px !important; padding: 14px 16px !important; } html body #customersList .contact-avatar { background: linear-gradient(135deg, #d5f0e8, #cfe3f7) !important; color: var(--lg-green-dark) !important; width: 36px; height: 36px; } html body #customersList td.c-phone a { color: #2f6fdb !important; font-weight: 500 !important; } html body #customersList td.c-resp select { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0; font-weight: 500; color: var(--lg-text-2); } html body #customersList td.c-name { font-size: 16px !important; } /* ── Список событий ── */ html body .af-bar { background: transparent !important; border-bottom: 0 !important; } html body .af-open-mobile { border-radius: 20px !important; border: 1px solid var(--lg-edge) !important; background: var(--lg-glass) !important; box-shadow: var(--lg-shadow); font-weight: 600; } html body .ev-feed { background: transparent !important; padding: 0 12px; } html body .ev-feed .ev-item { margin-bottom: 10px; padding: 14px 16px !important; border-bottom: 1px solid var(--lg-edge) !important; } } @media (max-width: 768px) { /* ── Дашборд (рендер 4-dashboard) ── */ html body .hero { padding: 4px 18px 10px !important; } html body .hero-greeting { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.4px; line-height: 1.15; } html body .hero-subtitle { font-size: 14px !important; color: var(--lg-text-2) !important; } html body .db-hero, html body .kpi, html body .insight-card, html body .db-insight, html body .amo-row > *, html body .grid-adaptive > *, html body .db-action-btn { background: var(--lg-glass) !important; border: 1px solid var(--lg-edge) !important; border-radius: var(--lg-r-card) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; border-left-width: 1px !important; } html body .db-hero { border-radius: 28px !important; margin-left: 12px !important; margin-right: 12px !important; } html body .db-hero-tab { border-radius: 17px !important; font-weight: 600; } html body .db-hero-tab.active { background: var(--lg-accent) !important; color: #fff !important; box-shadow: var(--lg-accent-shadow); } html body .db-actions, html body .kpi-grid, html body .scope-bar, html body .grid-adaptive, html body .amo-row { margin-left: 12px !important; margin-right: 12px !important; } html body .db-action-btn { min-height: 48px; border-radius: 18px !important; font-weight: 600; } html body .db-insight { color: var(--lg-green-dark) !important; margin-left: 12px !important; margin-right: 12px !important; } html body .kpi { padding: 13px 14px !important; } html body .kpi-label { font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--lg-text-2) !important; } html body .kpi-value { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.5px; color: var(--lg-green-dark) !important; } html body .kpi-icon { border-radius: 12px !important; } html body .kpi-delta { border-radius: 11px !important; font-weight: 600; } html body .scope-bar button, html body .scope-bar .scope-btn { border-radius: 17px !important; font-weight: 600; } html body .scope-bar button.active, html body .scope-bar .scope-btn.active { background: var(--lg-accent) !important; color: #fff !important; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ * ДЕСКТОП (≥769px) — этап 3, утверждён владельцем 18.09.2026 («делай дизайн как на рендерах»). * Эталон: docs/design/liquid-glass/desktop-1…4.png. Парящие стеклянные сайдбар и шапка, колонки и панели — стекло, * карточки и таблицы плотнее (читаемость). * ═══════════════════════════════════════════════════════════════════════════════════════════ */ @media (min-width: 769px) { :root { --lg-text: #12211d; --lg-text-2: #4d615b; --lg-text-3: #8a9a95; --lg-green: #208272; --lg-green-dark: #14594c; --lg-green-pale: rgba(32, 130, 114, .14); --lg-accent: linear-gradient(180deg, #2a917c 0%, #1b6f5e 100%); --lg-accent-shadow: 0 4px 12px rgba(20, 100, 84, .35), inset 0 1px 0 rgba(255, 255, 255, .35); --lg-glass: linear-gradient(180deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .40) 100%); --lg-glass-solid: linear-gradient(180deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .66) 100%); --lg-glass-thin: linear-gradient(180deg, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .18) 100%); --lg-dense: rgba(255, 255, 255, .68); --lg-edge: rgba(255, 255, 255, .78); --lg-shadow: 0 12px 34px rgba(20, 60, 50, .12), 0 1px 2px rgba(20, 60, 50, .07); --lg-inset: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(20, 60, 50, .05); --lg-blur: blur(24px) saturate(180%); --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Inter, Roboto, Arial, sans-serif; --bg: transparent; --text: #12211d; --text-secondary: #4d615b; --text-muted: #8a9a95; --sidebar-w: 256px; --sidebar-w-collapsed: 88px; } html { background: #eef3f1; } html body { background: transparent !important; color: var(--lg-text); font-family: var(--lg-font); } html body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(62vw 68vh at 6% 0%, #bfead9 0%, transparent 60%), radial-gradient(57vw 66vh at 100% 12%, #cfe3f7 0%, transparent 60%), radial-gradient(62vw 78vh at 22% 100%, #f6ead2 0%, transparent 60%), radial-gradient(62vw 78vh at 100% 100%, #bfe6dc 0%, transparent 62%), #eef3f1; } html body .main, html body .main-wrapper, html body .content, html body .tab-content, html body .real-content, html body .page, html body .container, html body .kanban { background: transparent !important; } html body, html body button, html body input, html body select, html body textarea { font-family: var(--lg-font); } /* ── Сайдбар — парящая стеклянная колонка, тёмный текст, зелёные иконки ── */ html body .sidebar { width: calc(var(--sidebar-w) - 24px) !important; height: calc(100vh - 24px) !important; margin: 12px 0 12px 12px; border-radius: 26px !important; background: var(--lg-glass) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; color: var(--lg-text) !important; } html body .sidebar.collapsed { width: calc(var(--sidebar-w-collapsed) - 24px) !important; } html body .sidebar-logo { background: transparent !important; border-bottom: 0 !important; color: var(--lg-text) !important; padding: 18px 16px 14px !important; } html body .sidebar-logo::after { display: none; } html body .sidebar-logo .logo-icon { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: var(--lg-accent) !important; color: #fff !important; box-shadow: var(--lg-accent-shadow) !important; } html body .sidebar-logo-text { color: var(--lg-text) !important; font-weight: 700 !important; font-size: 15px !important; } html body .sidebar-toggle { color: var(--lg-text-3) !important; background: transparent !important; border-color: transparent !important; } html body .sidebar .nav-section-title { color: var(--lg-text-3) !important; letter-spacing: .6px; } html body .sidebar .nav-item, html body .sidebar .nav-settings-toggle { color: #2c423c !important; border-radius: 14px !important; margin: 1px 10px !important; min-height: 40px; font-size: 14.5px !important; font-weight: 500; border-left: 0 !important; } html body .sidebar .nav-item .nav-text { color: inherit !important; } html body .sidebar .nav-item .nav-icon-svg, html body .sidebar .nav-settings-toggle .nav-icon-svg { stroke: var(--lg-green) !important; opacity: 1 !important; } html body .sidebar .nav-item:hover, html body .sidebar .nav-settings-toggle:hover { background: rgba(255, 255, 255, .55) !important; color: var(--lg-text) !important; } html body .sidebar .nav-item.active, html body .sidebar .nav-item.class-active, html body .sidebar .nav-group-toggle.panel-open { background: rgba(32, 130, 114, .15) !important; color: var(--lg-green-dark) !important; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6) !important; } html body .sidebar .nav-item.active::before, html body .sidebar .nav-item.class-active::before { display: none !important; } html body .sidebar .nav-group-toggle .nav-caret { stroke: var(--lg-text-3) !important; } html body .sidebar .nav-subitem { color: var(--lg-text-2) !important; } html body .sidebar .sb-notif-wrap { border-top: 1px solid rgba(18, 33, 29, .07) !important; } html body .sidebar .sb-notif-wrap, html body .sidebar .sb-notif-wrap * { color: var(--lg-text) !important; } html body .sidebar .user-footer { margin: 8px 10px 10px !important; border-radius: 18px !important; border: 1px solid rgba(255, 255, 255, .8) !important; background: rgba(255, 255, 255, .5) !important; color: var(--lg-text) !important; } html body .sidebar .user-footer::before { display: none; } html body .sidebar .user-footer * { color: var(--lg-text) !important; } html body .sidebar .user-footer .uf-avatar { background: var(--lg-accent) !important; color: #fff !important; border-radius: 50% !important; } html body .sidebar .user-footer .uf-avatar * { color: #fff !important; } html body .sidebar::-webkit-scrollbar-thumb { background: rgba(18, 33, 29, .12); } /* выезжающая колонка группы — тоже стекло */ html body .nav-panel { top: 12px !important; height: calc(100vh - 24px) !important; left: calc(var(--sidebar-w) + 0px) !important; border-radius: 26px !important; margin-left: 8px; background: var(--lg-glass-solid) !important; -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--lg-edge); box-shadow: var(--lg-shadow), var(--lg-inset) !important; color: var(--lg-text) !important; } html body .sidebar.collapsed ~ .nav-panel, html body .nav-panel.at-collapsed { left: var(--sidebar-w-collapsed) !important; } html body .nav-panel-head { color: var(--lg-text-3) !important; } html body .nav-panel-close { color: var(--lg-text-3) !important; } html body .nav-panel .nav-subitem { color: #2c423c !important; border-radius: 12px !important; font-size: 14px !important; border-left: 0 !important; } html body .nav-panel .nav-subitem .nav-icon-svg { stroke: var(--lg-green) !important; } html body .nav-panel .nav-subitem:hover { background: rgba(255, 255, 255, .6) !important; } html body .nav-panel .nav-subitem.class-active { background: rgba(32, 130, 114, .15) !important; color: var(--lg-green-dark) !important; font-weight: 600; } html body .nav-panel .nav-section-subtitle { color: var(--lg-text-3) !important; } /* ── Шапка — парящая стеклянная панель ── */ html body .topbar { margin: 12px 12px 0 12px !important; min-height: 56px; height: auto !important; border-radius: 28px !important; padding: 8px 10px 8px 22px !important; background: var(--lg-glass) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; position: relative; z-index: 30; } html body .topbar h1, html body .topbar .page-title { font-size: 18px !important; font-weight: 700 !important; letter-spacing: -.2px; color: var(--lg-text) !important; } html body .content { padding: 12px !important; } /* кнопки, поля, чипы */ html body .btn-primary, html body .btn.btn-primary, html body .btn-green, html body .btn-apply, html body .tl-compose-submit { background: var(--lg-accent) !important; color: #fff !important; border: 0 !important; border-radius: 20px !important; box-shadow: var(--lg-accent-shadow) !important; font-weight: 600; min-height: 36px; } html body .btn-outline, html body .btn:not(.btn-primary):not(.btn-danger), html body .filter-pill, html body .filter-select, html body .topbar-more, html body .view-toggle { border-radius: 18px !important; border: 1px solid rgba(255, 255, 255, .85) !important; background: rgba(255, 255, 255, .55) !important; color: var(--lg-text) !important; font-weight: 600; } html body .filter-pill.active, html body .pipeline-tab.active, html body .db-hero-tab.active { background: var(--lg-accent) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--lg-accent-shadow); } html body .search-input, html body .search-box, html body .filter-trigger, html body .af-field { border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, .85) !important; background: rgba(255, 255, 255, .55) !important; box-shadow: none !important; min-height: 40px; } html body .search-input input, html body .search-box input, html body .filter-trigger input { background: transparent !important; border: 0 !important; box-shadow: none !important; } html body select, html body input[type=text], html body input[type=search], html body input[type=date], html body input[type=number], html body input[type=tel], html body input[type=email], html body textarea { border-radius: 14px; border-color: rgba(255, 255, 255, .85); background-color: rgba(255, 255, 255, .6); } html body .status-badge, html body .dir-badge, html body .badge, html body .tag-pill, html body .tl-call-status { border-radius: 11px !important; font-weight: 600; } /* ── Панели и карточки ── */ html body .card, html body .section-card, html body .summary-card, html body .stat-card, html body .kpi, html body .kpi-card, html body .db-hero, html body .db-card, html body .insight-card, html body .db-insight, html body .widget, html body .panel, html body .table-wrap, html body .ev-card, html body .grid-adaptive > *, html body .amo-row > *, html body .acc-card { background: var(--lg-glass) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge) !important; border-radius: 24px !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; border-left-width: 1px !important; } html body .card-header, html body .section-header { background: transparent !important; border-color: rgba(18, 33, 29, .07) !important; color: var(--lg-text) !important; } html body .pipeline-card .section-header { background: transparent !important; color: var(--lg-text-2) !important; } html body .kpi-value, html body .summary-value { font-weight: 800 !important; letter-spacing: -.5px; } html body .kpi-label, html body .summary-label { text-transform: none !important; letter-spacing: 0 !important; color: var(--lg-text-2) !important; font-size: 13px !important; } html body .db-action-btn { background: var(--lg-glass) !important; border: 1px solid var(--lg-edge) !important; border-radius: 18px !important; box-shadow: var(--lg-shadow) !important; border-left-width: 1px !important; font-weight: 600; } /* таблицы — на одной стеклянной панели */ html body table { background: transparent !important; border: 0 !important; } html body thead th, html body .ev-table th { background: transparent !important; color: var(--lg-text-3) !important; border-bottom: 1px solid rgba(18, 33, 29, .08) !important; } html body tbody td { border-color: rgba(18, 33, 29, .07) !important; background: transparent !important; } html body tbody tr:hover td { background: rgba(255, 255, 255, .45) !important; } html body .pagination, html body .ev-foot { background: transparent !important; border-color: rgba(18, 33, 29, .07) !important; } /* ── Канбан сделок и задач: колонки — тонкое стекло, карточки плотнее ── */ html body .kanban, html body .kanban-board { padding: 12px !important; gap: 12px !important; } html body .kanban-column { background: var(--lg-glass-thin) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge) !important; border-radius: 24px !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; overflow: hidden; } html body .kanban-column:last-child { border-right: 1px solid var(--lg-edge) !important; } html body .kanban-col-header { background: transparent !important; border-top: 0 !important; padding: 14px 16px 8px !important; } html body .kanban-col-header:hover { background: transparent !important; } html body .col-name, html body .kanban-col-title { font-size: 13px !important; font-weight: 800 !important; letter-spacing: .3px; text-transform: uppercase; color: var(--lg-text) !important; } html body .col-count, html body .kanban-col-count { border-radius: 10px !important; background: rgba(18, 33, 29, .07) !important; border: 0 !important; color: var(--lg-text-2) !important; } html body .kanban-column.overdue .kanban-col-header, html body .kanban-column.today .kanban-col-header { background: transparent !important; } html body .kanban-cards, html body .kanban-col-list { padding: 4px 10px 10px !important; background: transparent !important; } html body .deal-card, html body .task-card { border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, .9) !important; background: var(--lg-dense) !important; box-shadow: 0 2px 8px rgba(20, 60, 50, .06) !important; margin-bottom: 9px !important; } html body .deal-card:hover, html body .task-card:hover { background: rgba(255, 255, 255, .88) !important; box-shadow: 0 6px 18px rgba(20, 60, 50, .12) !important; } html body .kanban-add { border-radius: 16px !important; border: 1px dashed rgba(18, 33, 29, .18) !important; background: rgba(255, 255, 255, .25) !important; color: var(--lg-text-2) !important; font-weight: 600; } html body .filter-panel { border-radius: 24px !important; background: var(--lg-glass-solid) !important; -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--lg-edge) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; } html body .fp-list li { border-radius: 12px; } html body .fp-list li.active { background: var(--lg-green-pale) !important; color: var(--lg-green-dark) !important; } /* ── Карточка сделки ── */ html body .left-col { padding: 12px 0 12px 12px !important; gap: 12px !important; background: transparent !important; } html body .right-col { margin: 12px !important; border-radius: 24px !important; border: 1px solid var(--lg-edge) !important; background: var(--lg-glass) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-shadow), var(--lg-inset) !important; overflow: hidden; } html body .tl-filter { border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, .85) !important; background: rgba(255, 255, 255, .55) !important; font-weight: 600; padding: 6px 13px !important; color: var(--lg-text) !important; } html body .tl-filter.active { background: var(--lg-accent) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--lg-accent-shadow); } html body .feed-strip > .ai-insights.collapsed, html body .feed-strip > .activity-spark.collapsed { border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, .85) !important; background: rgba(255, 255, 255, .55) !important; color: var(--lg-text) !important; box-shadow: none !important; } html body .feed-strip .ai-insights.collapsed .ai-insights-title, html body .feed-strip .activity-spark.collapsed .spark-title-text { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600; color: var(--lg-text) !important; } html body .feed-strip .ai-insights-header svg, html body .feed-strip .spark-icon { color: var(--lg-green) !important; } html body .feed-strip.expanded > .ai-insights, html body .feed-strip.expanded > .activity-spark { background: var(--lg-dense) !important; color: var(--lg-text) !important; border: 1px solid rgba(255, 255, 255, .9) !important; border-radius: 18px !important; } html body .feed-strip.expanded .ai-insights::before { display: none; } html body .feed-strip.expanded .ai-insight-bullet { background: var(--lg-green-pale) !important; color: var(--lg-green-dark) !important; } html body .feed-strip.expanded .ai-insights-toggle { background: rgba(18, 33, 29, .06) !important; color: var(--lg-text-2) !important; } html body .tl-item { border-bottom: 0 !important; } html body .tl-item:hover { background: transparent !important; } html body .tl-item[data-tl-type="task"], html body .tl-item[data-tl-type="call"], html body .tl-note-bubble .tl-body { border-radius: 18px !important; border: 1px solid rgba(255, 255, 255, .9) !important; background: var(--lg-dense) !important; box-shadow: 0 2px 8px rgba(20, 60, 50, .06) !important; } html body .tl-note-bubble .tl-body { border-radius: 6px 18px 18px 18px !important; } html body .tl-item[data-tl-type="task"]:not(.tl-item-done) { border-color: rgba(32, 130, 114, .4) !important; } html body .tl-icon { border-radius: 50% !important; background: linear-gradient(135deg, #d5f0e8, #cfe3f7) !important; } html body .tl-call-missed .tl-icon.call { background: linear-gradient(135deg, #fde2e1, #fbeedd) !important; color: #c23a37 !important; } html body .tl-composer { background: transparent !important; border-top: 0 !important; box-shadow: none !important; padding: 0 14px 14px !important; } html body .tl-compose-card { border-radius: 22px !important; border: 1px solid rgba(255, 255, 255, .9) !important; background: var(--lg-glass-solid) !important; box-shadow: var(--lg-shadow) !important; } html body .tl-pinned { background: transparent !important; } /* модальные окна и выпадающие меню */ html body .modal-overlay, html body .modal-back { background: rgba(10, 30, 25, .30) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } html body .modal, html body .modal-card { border-radius: 28px !important; background: var(--lg-glass-solid) !important; -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--lg-edge) !important; box-shadow: 0 24px 70px rgba(10, 40, 32, .28), var(--lg-inset) !important; } html body .dropdown-menu, html body .topbar-dropdown, html body .sort-menu, html body .tl-task-pop, html body .af-panel { border-radius: 18px !important; background: var(--lg-glass-solid) !important; -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--lg-edge) !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; } } @media (min-width: 769px) { html body .sidebar { overflow-x: hidden !important; scrollbar-width: none; } html body .sidebar::-webkit-scrollbar { display: none; } html body .main { min-width: 0; } /* метка давности активности — аккуратный язычок сверху карточки, не перекрывает название */ html body .deal-card { padding-top: 16px !important; } html body .deal-card .lead-score-badge { top: 0 !important; left: 14px !important; border-radius: 0 0 8px 8px !important; padding: 1px 7px !important; font-size: 9.5px !important; letter-spacing: 0 !important; text-transform: none !important; background: rgba(227, 154, 43, .20) !important; color: #a66a0d !important; } html body .deal-card .lead-score-badge.hot { background: rgba(224, 82, 79, .16) !important; color: #c23a37 !important; } html body .deal-card .lead-score-badge:empty { display: none; } } @media (min-width: 769px) { html body .filters-bar, html body .toolbar, html body .filters, html body .af-bar { background: transparent !important; border-color: rgba(18, 33, 29, .07) !important; } html body .filters-bar { border: 0 !important; padding: 12px 12px 0 !important; } } /* ═════════ Остальные страницы (аудит 18.09.2026: все 53 страницы, десктоп и телефон) ═════════ * Общие блоки, которые на второстепенных страницах оставались с непрозрачным старым фоном. * Переменные --lg-* заданы в обоих медиа-блоках выше, поэтому правила действуют на любой ширине. */ html body .section, html body .settings-section, html body .info-box, html body .picker, html body .table-card, html body .filter-bar, html body .calendar, html body .left-panel, html body .right-panel, html body .notif-detail, html body .notif-list, html body .empty-state, html body .role-card, html body .stage-col, html body .feature-card, html body .transaction-list, html body .templates, html body .template-card, html body .mgr-picker, html body .plan-card, html body .int-card, html body .integration-card, html body .user-card, html body .kb-card, html body .article-card, html body .report-card, html body .chart-card, html body .goal-card, html body .trigger-card, html body .source-card, html body .schedule-card, html body .form-card, html body .login-card, html body .auth-card, html body .box, html body .block, html body .tile { background: var(--lg-glass) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge) !important; border-radius: 24px !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; border-left-width: 1px !important; } html body .empty { background: transparent !important; color: var(--lg-text-3); } html body .section h2, html body .section h3, html body .transaction-list h3, html body .table-card h3 { background: transparent !important; border-color: rgba(18, 33, 29, .07) !important; } html body .tl-filters, html body .pipeline-tabs-bar, html body .tabs, html body .tab-bar, html body .logout-section, html body .widgets-col-header, html body .cal-filters, html body .cal-head { background: transparent !important; border-color: rgba(18, 33, 29, .07) !important; } html body .widgets-col { background: var(--lg-glass) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge) !important; border-radius: 24px !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; } html body .webhook-url, html body #lastSyncResult, html body .code-box, html body pre { background: rgba(255, 255, 255, .5) !important; border: 1px solid rgba(255, 255, 255, .85) !important; border-radius: 14px !important; } /* поля ввода — полупрозрачные, со скруглением */ html body input[type=text], html body input[type=search], html body input[type=email], html body input[type=tel], html body input[type=password], html body input[type=number], html body input[type=date], html body input[type=datetime-local], html body input[type=time], html body input[type=url], html body input:not([type]), html body select, html body textarea { background-color: rgba(255, 255, 255, .6) !important; border: 1px solid rgba(255, 255, 255, .9) !important; border-radius: 14px !important; color: var(--lg-text) !important; box-shadow: inset 0 1px 2px rgba(20, 60, 50, .05); } html body input:focus, html body select:focus, html body textarea:focus { outline: none; border-color: rgba(32, 130, 114, .55) !important; box-shadow: 0 0 0 3px rgba(32, 130, 114, .14) !important; } html body .search-input input, html body .search-box input, html body .filter-trigger input, html body .tl-compose-input { background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* вкладки и переключатели */ html body .tabs .tab, html body .tab-bar .tab, html body .pipeline-tabs-bar > *, html body .tab-btn { border-radius: 16px !important; font-weight: 600; } html body .tabs .tab.active, html body .tab-bar .tab.active, html body .tab-btn.active, html body .pipeline-tabs-bar > .active { background: var(--lg-accent) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--lg-accent-shadow); } /* календарь */ html body .cal-cell { background: rgba(255, 255, 255, .34) !important; border-color: rgba(255, 255, 255, .7) !important; } html body .cal-cell.other-month { background: rgba(255, 255, 255, .14) !important; color: var(--lg-text-3); } html body .cal-cell.today { background: rgba(32, 130, 114, .14) !important; box-shadow: inset 0 0 0 1.5px rgba(32, 130, 114, .45); } /* страницы входа и регистрации */ html body .btn-login, html body .btn-submit, html body button[type=submit] { background: var(--lg-accent) !important; color: #fff !important; border: 0 !important; border-radius: 20px !important; box-shadow: var(--lg-accent-shadow) !important; font-weight: 600; } html body .alert { border-radius: 16px !important; } html body .alert-error { background: rgba(224, 82, 79, .12) !important; border: 1px solid rgba(224, 82, 79, .3) !important; color: #a5302d !important; } html body .alert-success { background: rgba(32, 130, 114, .12) !important; border: 1px solid rgba(32, 130, 114, .3) !important; color: var(--lg-green-dark) !important; } html body .cal-legend { background: var(--lg-glass) !important; border: 1px solid var(--lg-edge) !important; border-radius: 18px !important; box-shadow: var(--lg-shadow) !important; } html body .tl-composer { background: transparent !important; } html body .tl-compose-card { background: var(--lg-glass-solid) !important; border: 1px solid var(--lg-edge) !important; } /* пьедестал менеджеров: стекло с лёгким оттенком медали */ html body .podium-card { border: 1px solid var(--lg-edge) !important; border-radius: 24px !important; box-shadow: var(--lg-shadow), var(--lg-inset) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); } html body .podium-card.first { background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(253, 236, 170, .38)) !important; } html body .podium-card.second { background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(214, 224, 236, .40)) !important; } html body .podium-card.third { background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(253, 205, 160, .36)) !important; } html body .help-banner, html body .hint-banner, html body .notice { background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(207, 227, 247, .40)) !important; border: 1px solid var(--lg-edge) !important; border-radius: 18px !important; color: var(--lg-text) !important; } html body .btn-save, html body .save-btn, html body .btn-success { background: var(--lg-accent) !important; color: #fff !important; border: 0 !important; border-radius: 20px !important; box-shadow: var(--lg-accent-shadow) !important; font-weight: 600; } html body .btn-edit, html body .btn-secondary, html body .btn-cancel { border-radius: 18px !important; border: 1px solid rgba(255, 255, 255, .9) !important; background: rgba(255, 255, 255, .6) !important; color: var(--lg-green-dark) !important; font-weight: 600; } html body .btn-danger, html body .btn-delete { border-radius: 18px !important; } /* страница входа: фирменная панель остаётся зелёной (акцент бренда), но со скруглением и кромкой стекла */ html body .brand-panel { border-radius: 0 34px 34px 0; box-shadow: 12px 0 40px rgba(10, 40, 32, .18), inset -1px 0 0 rgba(255, 255, 255, .25); } /* ═════════ Иконки-«пузырьки» (запрос владельца 18.09.2026: иконки виджетов дашборда — в стиле Liquid Glass) ═════════ * Стеклянная капля: светлый блик сверху-слева, цветной отсвет снизу-справа, кромка, мягкая цветная тень. Цвет — переменная --ico. */ html body .kpi-icon, html body .lg-ico, html body .insight-icon, html body .main h3 > svg:first-child, html body .card h3 > svg, html body .section-card h3 > svg, html body .grid-adaptive h3 > svg, html body .amo-row h3 > svg, html body .insight-card h3 > svg { --ico: var(--kpi-color, #208272); box-sizing: border-box; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50% !important; color: var(--ico) !important; font-size: 15px; background: linear-gradient(145deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .50) 58%, rgba(32, 130, 114, .16) 100%) !important; background: linear-gradient(145deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .50) 58%, color-mix(in srgb, var(--ico) 20%, transparent) 100%) !important; border: 1px solid rgba(255, 255, 255, .95) !important; box-shadow: 0 4px 10px rgba(20, 60, 50, .12), inset 0 1px 0 #fff, inset 0 -2px 5px rgba(20, 60, 50, .06) !important; box-shadow: 0 4px 10px color-mix(in srgb, var(--ico) 24%, transparent), inset 0 1px 0 #fff, inset 0 -2px 5px color-mix(in srgb, var(--ico) 14%, transparent) !important; -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); } html body .kpi-icon svg, html body .lg-ico svg, html body .insight-icon svg { width: 19px !important; height: 19px !important; stroke-width: 1.9; display: block; } html body .kpi:hover .kpi-icon { transform: scale(1.06) !important; } /* заголовки виджетов: сам svg становится каплей */ html body .main h3 > svg:first-child, html body .card h3 > svg, html body .section-card h3 > svg, html body .grid-adaptive h3 > svg, html body .amo-row h3 > svg, html body .insight-card h3 > svg { width: 32px !important; height: 32px !important; padding: 7px; margin-right: 8px; vertical-align: middle; stroke: var(--ico); } html body .lg-ico.lg-ico-lg { width: 60px; height: 60px; } html body .lg-ico.lg-ico-lg svg { width: 30px !important; height: 30px !important; } html body .lg-ico.lg-ico-plain { width: 36px; height: 36px; } html body .db-notif-btn { padding: 0 !important; background: transparent !important; } /* быстрые действия: цвет капли по смыслу, цветная полоса слева убрана */ html body .db-action-btn { gap: 10px !important; border-left-width: 1px !important; } html body .db-action-btn .lg-ico { width: 34px; height: 34px; } html body .db-action-btn .lg-ico svg { width: 17px !important; height: 17px !important; } html body .db-action-lead .lg-ico { --ico: #2f6fdb; } html body .db-action-task .lg-ico { --ico: #208272; } html body .db-action-call .lg-ico { --ico: #d9822b; } html body .db-action-contact .lg-ico { --ico: #7c5ce0; } /* инсайты: цвет по типу, вместо заливки — стеклянная капля */ html body .insight-icon.waiting { --ico: #e0524f; } html body .insight-icon.overdue { --ico: #e0782b; } html body .insight-icon.stalled { --ico: #d99a1f; } html body .insight-icon.risk { --ico: #d6478f; } html body .insight-icon.hot { --ico: #2fa36f; } /* мини-графики и метки динамики в плитках — в палитру стекла */ html body .kpi-delta.up { background: rgba(32, 130, 114, .14) !important; color: var(--lg-green-dark) !important; } html body .kpi-delta.down { background: rgba(224, 82, 79, .13) !important; color: #c23a37 !important; } html body .kpi-delta.neutral { background: rgba(18, 33, 29, .07) !important; color: var(--lg-text-2) !important; } html body .timeline-dot.lg-ico { width: 30px; height: 30px; font-size: 13px; } html body .timeline-dot.lg-ico span { filter: saturate(.85); line-height: 1; } html body .empty-state { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body .card .empty-state, html body .section .empty-state { padding: 18px 12px; } html body .empty-state-icon { opacity: 1 !important; margin-bottom: 12px; display: flex; justify-content: center; } html body .empty-state-title { font-weight: 700; color: var(--lg-text); } html body .empty-state-sub { color: var(--lg-text-2); } /* ── Выпадающие списки (glass-select.js) — 18.09.2026: стеклянное меню вместо системного на всех страницах ── */ .lg-sel-overlay { position: fixed; inset: 0; z-index: 10060; background: transparent; } .lg-sel { position: fixed; display: flex; flex-direction: column; box-sizing: border-box; padding: 6px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: 0 18px 50px rgba(20, 60, 50, .24), 0 2px 8px rgba(20, 60, 50, .08), inset 0 1px 0 rgba(255, 255, 255, .9); font-family: var(--lg-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); color: var(--lg-text, #12211d); transform: translateY(-8px) scale(.94, .5); opacity: 0; filter: blur(5px); transition: transform .36s cubic-bezier(.22, 1.28, .36, 1), opacity .16s ease, filter .22s ease; } .lg-sel-overlay.open .lg-sel { transform: none; opacity: 1; filter: none; } .lg-sel-overlay.closing .lg-sel { transform: translateY(-6px) scale(.96, .6); opacity: 0; transition: transform .18s ease-in, opacity .14s ease-in; } .lg-sel-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; position: relative; } .lg-sel-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: 13px; font-size: 14px; font-weight: 500; cursor: pointer; user-select: none; -webkit-user-select: none; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1.2, .36, 1), background .1s ease; transition-delay: calc(var(--i, 0) * 12ms + 40ms); } .lg-sel-overlay.open .lg-sel-item { opacity: 1; transform: none; } .lg-sel-item .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lg-sel-item .ck { color: var(--lg-green, #2f7d68); font-weight: 700; flex-shrink: 0; } .lg-sel-item:hover, .lg-sel-item.active { background: rgba(47, 125, 104, .10); transition-delay: 0s; } .lg-sel-item:active { background: rgba(47, 125, 104, .18); } .lg-sel-item.current { background: rgba(255, 255, 255, .75); font-weight: 700; color: var(--lg-green-dark, #1d5a4a); box-shadow: 0 1px 4px rgba(20, 60, 50, .10); } .lg-sel-item.disabled { opacity: .4 !important; cursor: default; pointer-events: none; } .lg-sel-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--lg-text-3, #7b8a86); } .lg-sel-empty { padding: 14px 12px; font-size: 13px; color: var(--lg-text-3, #7b8a86); text-align: center; } .lg-sel-search { flex: 0 0 auto; padding: 2px 2px 6px; } html body .lg-sel-search input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px !important; border-radius: 12px !important; border: 1px solid rgba(18, 33, 29, .10) !important; background: rgba(255, 255, 255, .7) !important; font-size: 14px; color: inherit; outline: none; box-shadow: none !important; } html body select.lg-sel-open { border-color: rgba(32, 130, 114, .55) !important; box-shadow: 0 0 0 3px rgba(32, 130, 114, .14) !important; } @media (max-width: 768px) { .lg-sel { border-radius: 24px; } .lg-sel-item { min-height: 46px; padding: 0 14px; font-size: 16px; border-radius: 17px; } html body .lg-sel-search input { height: 42px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .lg-sel, .lg-sel-item { transition: opacity .12s ease !important; transform: none !important; filter: none !important; } } /* ── Панель фильтра (glass-filter.js) — 18.09.2026 ── */ .lgf-overlay { position: fixed; inset: 0; z-index: 10040; background: transparent; } .lgf-panel { position: fixed; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: 0 18px 50px rgba(20, 60, 50, .24), 0 2px 8px rgba(20, 60, 50, .08), inset 0 1px 0 rgba(255, 255, 255, .9); font-family: var(--lg-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); color: var(--lg-text, #12211d); transform: translateY(-14px) scale(.92, .35); opacity: 0; filter: blur(6px); transition: transform .42s cubic-bezier(.22, 1.28, .36, 1), opacity .18s ease, filter .25s ease; } .lgf-overlay.open .lgf-panel { transform: none; opacity: 1; filter: none; } .lgf-overlay.closing .lgf-panel { transform: translateY(-10px) scale(.95, .5); opacity: 0; filter: blur(4px); transition: transform .2s ease-in, opacity .16s ease-in, filter .16s ease-in; } .lgf-head { flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: center; padding: 14px 48px 10px; font-size: 15px; font-weight: 700; border-bottom: 1px solid rgba(18, 33, 29, .07); } .lgf-close { position: absolute; right: 8px; top: 6px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--lg-text-2, #4f5f5a); font-size: 24px; line-height: 1; cursor: pointer; } .lgf-close:active { background: rgba(18, 33, 29, .08); } .lgf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 14px 6px; touch-action: pan-y; } .lgf-sec { padding: 8px 0 10px; } .lgf-sec + .lgf-sec { border-top: 1px solid rgba(18, 33, 29, .06); } .lgf-sec-title { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--lg-text-3, #7b8a86); margin: 0 0 8px 2px; } .lgf-chips { display: flex; flex-wrap: wrap; gap: 8px; } .lgf-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .55); color: var(--lg-text, #12211d); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 1px 3px rgba(20, 60, 50, .06); transition: background .12s ease, color .12s ease, transform .12s ease; -webkit-user-select: none; user-select: none; } .lgf-chip:active { transform: scale(.97); } .lgf-chip.on { background: var(--lg-green, #2f7d68); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(47, 125, 104, .28); } .lgf-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(18, 33, 29, .25); } .lgf-chip.dot-active .lgf-dot { background: #2f7d68; } .lgf-chip.dot-success .lgf-dot { background: #16a34a; } .lgf-chip.dot-warn .lgf-dot { background: #f59e0b; } .lgf-chip.dot-danger .lgf-dot { background: #dc2626; } .lgf-chip.on .lgf-dot { background: rgba(255, 255, 255, .9) !important; } .lgf-cnt { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: rgba(18, 33, 29, .08); color: inherit; } .lgf-chip.on .lgf-cnt { background: rgba(255, 255, 255, .25); } html body .lgf-text, html body .lgf-range input { width: 100%; box-sizing: border-box; min-height: 38px; padding: 0 12px !important; border-radius: 13px !important; border: 1px solid rgba(18, 33, 29, .10) !important; background: rgba(255, 255, 255, .7) !important; font-size: 15px; color: inherit; outline: none; box-shadow: none !important; } .lgf-range { display: flex; align-items: center; gap: 8px; } .lgf-range span { color: var(--lg-text-3, #7b8a86); } .lgf-actions { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px) * 0); border-top: 1px solid rgba(18, 33, 29, .07); } .lgf-actions button { flex: 1 1 0; min-height: 44px; border: 0; border-radius: 16px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .lgf-reset { background: rgba(255, 255, 255, .6); color: var(--lg-text-2, #4f5f5a); border: 1px solid rgba(255, 255, 255, .85) !important; } .lgf-apply { background: var(--lg-accent, #2f7d68); color: #fff; box-shadow: 0 8px 20px rgba(47, 125, 104, .3); } /* кнопка «Фильтр» со счётчиком и строка активных чипов под ней */ .lgf-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .55); color: var(--lg-text, #12211d); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(20, 60, 50, .06); white-space: nowrap; } .lgf-btn svg { width: 16px; height: 16px; color: var(--lg-green, #2f7d68); } .lgf-btn .lgf-badge { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--lg-green, #2f7d68); color: #fff; font-size: 11px; line-height: 18px; text-align: center; } .lgf-btn.has-count .lgf-badge { display: inline-block; } .lgf-btn.lgf-open, .lgf-btn.has-count { border-color: rgba(47, 125, 104, .35); background: rgba(255, 255, 255, .85); } .lgf-summary { display: flex; flex-wrap: wrap; gap: 6px; } .lgf-summary:empty { display: none; } .lgf-summary .lgf-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 10px; border-radius: 12px; background: var(--lg-green-pale, #e3f1ec); color: var(--lg-green-dark, #1d5a4a); font-size: 12px; font-weight: 600; } .lgf-summary .lgf-tag button { border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; } @media (max-width: 768px) { .lgf-panel { border-radius: 26px; } .lgf-chip { min-height: 40px; font-size: 15px; border-radius: 20px; } html body .lgf-text, html body .lgf-range input { min-height: 42px; font-size: 16px; } body.lgf-panel-open .crm-bottom-nav { opacity: .35; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .lgf-panel { transition: opacity .15s ease !important; transform: none !important; filter: none !important; } } /* ── D1 (18.09.2026): мобильный аудит 46 страниц — нижняя граница читаемости и нажимаемости ── Текст не меньше 12 px, цели нажатия не меньше 40 px. Исключения: инициалы в кружках-аватарах, декоративные точки, подписи нижней навигации (как в iOS). Правила сгенерированы отчётом scripts/mobile_audit_snippet.js (поле fix). */ @media (max-width: 768px) { /* пары «страница + элемент», где аудит намерил < 12 px (data-page ставит mobile-chrome.js); общий список классов не годится — те же классы на других страницах крупнее, правило бы их уменьшило */ html[data-page="calls-heatmap"] body :is(div.picker-help, #selectedCount) { font-size: 12px !important; } html[data-page="calendar"] body :is(#calHead div, div.weekend, div.cal-week-num, .cal-legend span, span.cal-legend-item) { font-size: 12px !important; } html[data-page="calls"] body :is(span.dir-badge, span.status-badge) { font-size: 12px !important; } html[data-page="cohorts"] body :is(div.summary-sub) { font-size: 12px !important; } html[data-page="customer-card"] body :is(#contactBadge) { font-size: 12px !important; } html[data-page="dashboard"] body :is(div.db-hero-empty-sub, #lastUpdateShort, #kpiLeadsDelta, #kpiLeadsSub, #kpiActiveDelta, #kpiActiveSub, #kpiSumDelta, #kpiSumSub, #kpiClosedDelta, #kpiClosedSub, #kpiOverdueDelta, #kpiOverdueSub, #kpiCallsDelta, #kpiCallsSub, div.task-time, div.timeline-day-label, .timeline-meta span, div.funnel-stage-fill, div.heatmap-row-label, #amoRevenueSub, div.amo-sub, div.top-mgr-meta) { font-size: 12px !important; } html[data-page="deal-list"] body :is(span.stage-pill, .c-tags span) { font-size: 12px !important; } html[data-page="calls-settings"] body :is(div.stat-card-label, .form-group label) { font-size: 12px !important; } html[data-page="inbox"] body :is(span.n, div.ib-day, span.ib-chip, span.ib-badge) { font-size: 12px !important; } html[data-page="leads-list"] body :is(button.refresh-btn, span.badge, span.info) { font-size: 12px !important; } html[data-page="goals"] body :is(div.summary-sub) { font-size: 12px !important; } html[data-page="managers"] body :is(button.refresh-btn, div.podium-stat-lbl, .table-card th, span.rank, span.sub, span.delta-pill) { font-size: 12px !important; } html[data-page="managers-compare"] body :is(.mgr-chip span:not(.avatar), #pickerHelp, #selectedCount) { font-size: 12px !important; } html[data-page="profile"] body :is(.section-header span, div.activity-meta, .int-status span) { font-size: 12px !important; } html[data-page="pipeline-settings"] body :is(span.stage-type-pill, span.stage-counter, div.stat-mini) { font-size: 12px !important; } html[data-page="settings-integrations-legacy"] body :is(#tgBadge, div.field-helper, .field-helper b, #waBadge, #atsBadge, #emBadge) { font-size: 12px !important; } html[data-page="roles-settings"] body :is(span.role-badge, button.btn-danger-sm) { font-size: 12px !important; } html[data-page="settings-distribution"] body :is(#poolCount, .table-wrap th) { font-size: 12px !important; } html[data-page="settings-beeline"] body :is(#modeBadge, div.meta, .meta code, #credStatus) { font-size: 12px !important; } html[data-page="settings-integrations"] body :is(span.cnt) { font-size: 12px !important; } html[data-page="settings-triggers"] body :is(.card th) { font-size: 12px !important; } html[data-page="settings-users"] body :is(span.status-pill, span.flag-badge) { font-size: 12px !important; } html[data-page="stats"] body :is(#periodSwitcher button, button.card-action, #kpiLeadsSub, #kpiActiveSub, #kpiSumSub, #kpiSumSub b, #kpiWonSub, #kpiConvSub, div.kpi-sub, #donutPeriod, div.donut-label, #donutActivePct, #donutWonPct, #donutConvPct, #donutOverPct, div.mgr-meta, div.mgr-sum) { font-size: 12px !important; } html[data-page="work-schedule"] body :is(span.hours-badge, span.legend-item, span.ws-self-badge, div.ws-day, span.wd, span.lbl, span.status-pill, .hours-badge small, span.history-type) { font-size: 12px !important; } html body th { letter-spacing: 0 !important; } /* ссылки внутри строк таблиц и карточек: зона нажатия 40 px без изменения вёрстки */ html body .phone-link, html body .lead-link, html body .contact-link, html body .ll-name-link, html body .card-link, html body .recording-link, html body .ev-link { display: inline-block; padding-top: 11px; padding-bottom: 11px; margin-top: -11px; margin-bottom: -11px; } html body .topbar .back, html body a.back { display: inline-flex !important; align-items: center; min-height: 40px; } html body .main select, html body .mgr-chip { min-height: 40px; } html body .mgr-chip { display: inline-flex; align-items: center; } }