/* ═══ Стили личного кабинета УиП. Вынесено из index.html (было в и в секции «Мои задачи») ═══ */ /* ─── блок 1/2 ─── */ /* ═══════════════════════════════════════════════════════════════════════ ТЕМЫ. Тёмная — по умолчанию (`:root`), светлая «тёплая бумага» — `html[data-theme="light"]` (блок ниже). Правило: НИКАКИХ хардкод-цветов в компонентах — только токены отсюда, иначе элемент «выпадет» из темы. Разделение, которое важно понимать: --gold / --green / --red / --blue — цвет ТЕКСТА и рамок (в светлой теме притемнены до контраста ≥4.5:1 по WCAG AA); --gold-fill / --green-fill / … — ЗАЛИВКА плашек и кнопок (насыщенная в обеих темах, текст на ней — --on-gold/--on-green); --soft-* — полупрозрачная подложка бейджа; --ink-* — текст НА такой подложке. ═══════════════════════════════════════════════════════════════════════ */ :root{ color-scheme:dark; --cs:dark; /* для полей даты/времени и select (color-scheme) */ /* Цвета (палитра бренда) */ --bg:#13151a; --panel:#1b1e26; --panel2:#222630; --panel3:#20242c; --line:#2e3340; --bg-deep:#0f1115; /* фон экрана входа / подложка карты */ --sunken:#0e1014; /* «утопленный» блок (вывод генератора) */ --ink:#f3f1ea; --muted:#9aa0ac; --gold:#c9a24a; --gold-dim:#8f7434; --green:#4caf78; --red:#d4685e; --blue:#5b8fd6; /* Заливки (фон кнопок и насыщенных плашек) */ --gold-fill:#c9a24a; --gold-fill-h:#d8b25c; /* h — состояние hover */ --green-fill:#4caf78; --green-fill-h:#5cc089; --red-fill:#d4685e; --blue-fill:#5b8fd6; --warn:#e5a23d; /* предупреждение (просрочка «тёплая», доработка) */ --teal:#3bb6a8; /* свежая карточка */ --violet:#b794e8; /* аукцион */ /* Статусные цвета (были захардкожены — сведены в токены) */ --badge:#e5484d; /* бейдж уведомлений / непрочитанное */ --overdue:#e0533d; /* просрочено (задачи, дедлайны) */ --ok:#46c26a; /* успех / сегодня */ --info:#5b8def; /* инфо / будущее */ --pink:#ec4899; /* акцент этапа «новый объект» */ --on-green:#0d1f15; /* тёмный текст на зелёном фоне */ --on-gold:#1a1a1a; /* тёмный текст/иконка на золотом фоне */ --grad-gold:linear-gradient(135deg,#c9a24a,#8a6d2b); /* золотой градиент (аватары, кнопки) */ --grad-photo:linear-gradient(135deg,#2a2f3a,#1d212a);/* заглушка фото объекта */ /* Подложки бейджей (цвет + прозрачность) и текст на них */ --soft-gold:rgba(201,162,74,.14); --ink-gold:#e8d6a8; --sel-bg:rgba(201,162,74,.34); /* выделение текста мышью — золотое, не системное синее */ --soft-green:rgba(76,175,120,.15); --ink-green:#bfe6cf; --soft-red:rgba(212,104,94,.15); --ink-red:#f0c9c4; --soft-blue:rgba(91,143,214,.15); --ink-blue:#b9cbe6; --soft-gray:rgba(120,128,140,.18); --ink-gray:#aeb6c2; --soft-orange:rgba(224,83,61,.16); --ink-orange:#ffb38a; --soft-violet:rgba(168,130,214,.18); --soft-teal:rgba(59,182,168,.08); --soft-warn:rgba(229,162,61,.14); --soft-ok:rgba(70,194,106,.14); --soft-gold-2:rgba(201,162,74,.07); /* совсем лёгкая золотая подложка */ --soft-green-2:rgba(76,175,120,.07); /* Насыщенные заливки статусных плашек (текст на них — белый/тёмный) */ --gray-fill:rgba(120,128,140,.9); --violet-fill:rgba(168,130,214,.9); --green-fill-90:rgba(76,175,120,.9); --gold-fill-90:rgba(201,162,74,.9); /* Служебные слои */ --inset-bg:rgba(0,0,0,.16); /* вложенный/утопленный участок (финальные столбцы) */ --hover:rgba(255,255,255,.05); /* подсветка строки/кнопки при наведении */ --hover-2:rgba(255,255,255,.025); /* очень мягкая (строки таблиц) */ --raise:rgba(255,255,255,.015); /* чуть приподнятая карточка */ --inset-line:rgba(255,255,255,.04); /* тонкий внутренний разделитель */ --scrim:rgba(0,0,0,.7); /* затемнение под модалкой */ --scrim-soft:rgba(0,0,0,.55); /* затемнение полегче + основа теней меню */ --sh-menu:0 14px 44px rgba(0,0,0,.55); /* выпадающее меню */ --sh-pop:0 10px 30px rgba(0,0,0,.4); /* поповер, тост */ --dot-none:#6b7480; /* серый маркер «нет задачи» */ --goal-line:#cfd6e0; /* маркер цели на прогресс-баре */ /* ─── Дизайн-токены (crm-design-system). Использовать их вместо «магических» px ─── */ /* Радиусы */ --radius:12px; /* базовый (обратная совместимость) */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; /* Шкала отступов (4-кратная) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; /* Тени */ --sh-1:0 4px 16px rgba(0,0,0,.35); --sh-2:0 16px 48px rgba(0,0,0,.55); /* Размеры текста (ориентир) */ --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-lg:16px; /* Переход по умолчанию */ --tr:.15s; /* Мин. тач-цель (мобилка) */ --touch:44px; } /* ─────────── СВЕТЛАЯ ТЕМА «тёплая бумага» ─────────── Фон не чисто-белый, а тёплый песочный: золото бренда на нём читается как премиум, а не как «жёлтая ошибка», и глаза меньше устают за рабочий день. Контрасты проверены по WCAG AA (текст ≥4.5:1 к фону): ink #1c1e24 ≈ 15:1 · muted #6b7280 ≈ 4.6:1 · gold #8a6a22 ≈ 4.9:1 green #227d52 ≈ 4.8:1 · red #b3392f ≈ 5.6:1 · blue #2f6bb8 ≈ 5.1:1 */ html[data-theme="light"]{ color-scheme:light; --cs:light; --bg:#faf8f3; --panel:#ffffff; --panel2:#f4f1e8; --panel3:#eeeade; --line:#e2dccd; --bg-deep:#f2efe6; --sunken:#f6f3ea; /* --muted и --gold затемнены 16.08.2026 по замеру контраста на карточке доски (#f4f1e8): было 4.28 и 4.46 при норме 4.5 для мелкого текста — номер объекта и цена на светлой теме читались на пределе. Стало 4.82 и 4.79; сдвиг на глаз незаметен. */ --ink:#1c1e24; --muted:#636a76; --gold:#856520; --gold-dim:#96762a; --green:#227d52; --red:#b3392f; --blue:#2f6bb8; --gold-fill:#c9a24a; --gold-fill-h:#b8912f; --green-fill:#3f9d6d; --green-fill-h:#2f8a5c; --red-fill:#c8534a; --blue-fill:#4c81c9; --warn:#a86a12; --teal:#17796f; --violet:#6b3fa8; --badge:#c62a2f; --overdue:#b8412c; --ok:#227d52; --info:#2f6bb8; --pink:#c02a72; --on-green:#ffffff; --on-gold:#1a1a1a; --grad-gold:linear-gradient(135deg,#d0aa55,#a6832f); --grad-photo:linear-gradient(135deg,#eeeade,#e2dccd); --soft-gold:rgba(201,162,74,.20); --ink-gold:#7a5d1d; --sel-bg:rgba(201,162,74,.38); --soft-green:rgba(34,125,82,.14); --ink-green:#1f6f49; --soft-red:rgba(179,57,47,.12); --ink-red:#9e3228; --soft-blue:rgba(47,107,184,.12); --ink-blue:#2b5f9f; --soft-gray:rgba(107,114,128,.14); --ink-gray:#565d68; --soft-orange:rgba(184,65,44,.13); --ink-orange:#a3502a; --soft-violet:rgba(107,63,168,.13); --soft-teal:rgba(23,121,111,.10); --soft-warn:rgba(168,106,18,.13); --soft-ok:rgba(34,125,82,.13); --soft-gold-2:rgba(201,162,74,.11); --soft-green-2:rgba(34,125,82,.08); --gray-fill:rgba(107,114,128,.92); --violet-fill:rgba(107,63,168,.9); --green-fill-90:rgba(63,157,109,.95); --gold-fill-90:rgba(201,162,74,.95); --inset-bg:rgba(28,30,36,.045); --hover:rgba(28,30,36,.05); --hover-2:rgba(28,30,36,.028); --raise:rgba(28,30,36,.018); --inset-line:rgba(28,30,36,.07); --scrim:rgba(38,34,26,.42); --scrim-soft:rgba(38,34,26,.3); --sh-menu:0 12px 32px rgba(60,52,32,.16); --sh-pop:0 8px 22px rgba(60,52,32,.13); --sh-1:0 2px 10px rgba(60,52,32,.08); --sh-2:0 12px 34px rgba(60,52,32,.14); --dot-none:#a8a49a; --goal-line:#7d8592; } /* ═══════════════════════════════════════════════════════════════════════ БРЕНДЫ КАБИНЕТА. Атрибут data-brand на меняет ТОЛЬКО «паспортные» токены — акцент, фон и панели. Разметка, компоненты и логика у всех брендов ОДНИ И ТЕ ЖЕ: правка вида делается здесь, а не вторым набором стилей, иначе кабинеты разъедутся через месяц. Акцентная линия бренда живёт в «золотых» токенах (--gold*, --soft-gold*, --ink-gold, --sel-bg, --grad-gold, --on-gold): исторически это цвет УиП, но по смыслу это «акцент». Второй бренд просто задаёт им свои значения, и весь кабинет перекрашивается разом. ВАЖНО про порядок и специфичность: блок ниже стоит ПОСЛЕ светлой темы и весит столько же (html + один атрибут), поэтому тёмный набор бренда обязан исключать светлую тему сам — отсюда :not([data-theme="light"]). ═══════════════════════════════════════════════════════════════════════ */ /* ─── «Центр семейной ипотеки» · тёмная ─── Палитра снята с логотипа: navy #1a2f4f, красный #bf201c, золото #dda55d. Акцентом взят синий (решение владельца), красный и золото остаются в самом знаке. На тёмном фоне navy нечитаем, поэтому текстовый акцент — осветлённый #7fb3e8 (контраст к панели 7.5:1), а заливка — #2f6bb8 с БЕЛЫМ текстом (5.36:1): у золота УиП текст на заливке тёмный, здесь нет. */ html[data-brand="csi"]:not([data-theme="light"]){ --bg:#101620; --panel:#171f2c; --panel2:#1e2734; --panel3:#1b2431; --line:#2b3648; --bg-deep:#0c111a; --sunken:#0b0f17; --gold:#7fb3e8; --gold-dim:#4a7ba8; --gold-fill:#2f6bb8; --gold-fill-h:#3d7fd0; --on-gold:#ffffff; --grad-gold:linear-gradient(135deg,#3d7fd0,#1a2f4f); --grad-photo:linear-gradient(135deg,#26303f,#1a222e); --soft-gold:rgba(127,179,232,.14); --ink-gold:#c3ddf6; --sel-bg:rgba(127,179,232,.30); --soft-gold-2:rgba(127,179,232,.07); --gold-fill-90:rgba(47,107,184,.9); /* Красный бренда — только там, где красный и так был по смыслу (бейдж) */ --badge:#cf2e2a; } /* ─── «Центр семейной ипотеки» · светлая ─── Не «тёплая бумага», как у УиП, а холодный лист: под синий акцент песочный фон читается грязно. Контрасты: gold #1f4e86 к панели 8.4:1, muted 4.9:1. */ html[data-brand="csi"][data-theme="light"]{ --bg:#f4f7fb; --panel:#ffffff; --panel2:#eef3f9; --panel3:#e4ecf5; --line:#d6e0ec; --bg-deep:#e9eff7; --sunken:#f0f4fa; --gold:#1f4e86; --gold-dim:#2f6bb8; --gold-fill:#2f6bb8; --gold-fill-h:#24589c; --on-gold:#ffffff; --grad-gold:linear-gradient(135deg,#3d7fd0,#1a2f4f); --grad-photo:linear-gradient(135deg,#e4ecf5,#d6e0ec); --soft-gold:rgba(47,107,184,.14); --ink-gold:#1c4a80; --sel-bg:rgba(47,107,184,.28); --soft-gold-2:rgba(47,107,184,.08); --gold-fill-90:rgba(47,107,184,.95); --badge:#bf201c; /* тени холодного оттенка — тёплые «песочные» на синем фоне желтят */ --scrim:rgba(20,32,52,.42); --scrim-soft:rgba(20,32,52,.3); --sh-menu:0 12px 32px rgba(20,32,52,.16); --sh-pop:0 8px 22px rgba(20,32,52,.13); --sh-1:0 2px 10px rgba(20,32,52,.08); --sh-2:0 12px 34px rgba(20,32,52,.14); } *{box-sizing:border-box;margin:0;padding:0} html,body{overscroll-behavior:none} /* нет pull-to-refresh и цепного «резинового» баунса (iOS/Android) */ body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:14px;line-height:1.5} h1,h2,h3,h4,.brand,.stage-title,.kpi-num{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.3px} button{font-family:inherit;cursor:pointer;border:none} .app{display:flex;min-height:100vh} /* ═══ Компоненты дизайн-системы (crm-design-system). Заменяют повторяющиеся инлайн-стили ═══ */ /* Строка-ссылка «файл/документ»: иконка-заголовок слева, действие справа */ .ct-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;text-decoration:none;color:var(--ink)} .ct-sub{display:block;color:var(--muted);font-size:var(--fs-sm)} .ct-dl{color:var(--gold);font-weight:600;white-space:nowrap} /* Кнопка-крестик в шапке модалки (закрыть) */ .modal-x{margin-left:auto;padding:6px 12px} /* Внутренний отступ тела модалки */ .modal-body{padding:var(--sp-5) 22px} /* Утилита: элемент на всю ширину grid-строки */ .u-span-full{grid-column:1/-1} /* Золотой аватар-кружок с инициалами (чаты, коллеги). Размер/шрифт — инлайном */ .avatar-gold{flex:0 0 auto;border-radius:var(--r-pill);background:var(--grad-gold);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--on-gold)} /* Sidebar */ .side{width:240px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:fixed;height:100vh;z-index:60;transition:width .18s ease;overflow:hidden} .logo{display:flex;align-items:center;gap:11px;padding:18px 16px;border-bottom:1px solid var(--line)} .sb-toggle{background:none;color:var(--muted);font-size:19px;line-height:1;padding:5px 7px;border-radius:var(--r-sm);flex-shrink:0} .sb-toggle:hover{color:var(--gold);background:var(--hover)} .logo-img{height:34px;width:auto;flex-shrink:0;object-fit:contain} .logo-txt{overflow:hidden;white-space:nowrap} .logo .brand{font-size:21px;color:var(--gold);text-transform:uppercase;letter-spacing:1px} .logo .sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-top:2px} .nav{padding:12px 0;flex:1;overflow-y:auto;overflow-x:hidden} .nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;color:var(--muted);padding:11px 20px;font-size:14px;border-left:3px solid transparent;white-space:nowrap} .nav button:hover{color:var(--ink);background:var(--hover-2)} .nav button.active{color:var(--ink);border-left-color:var(--gold);background:var(--soft-gold)} .nav .ico{width:22px;text-align:center;font-size:18px;flex-shrink:0} .side-foot{padding:14px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);white-space:nowrap} .side-foot b{color:var(--ink);font-weight:600} /* экран входа */ .login-screen{position:fixed;inset:0;z-index:500;background:var(--bg-deep);display:flex;align-items:center;justify-content:center;padding:24px} .login-box{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;text-align:center} .login-mark{display:block;height:64px;width:auto;margin:0 auto 12px;object-fit:contain} .login-logo{font-family:'Oswald',sans-serif;font-size:30px;font-weight:700;color:var(--gold);letter-spacing:1px} .login-title{color:var(--muted);font-size:13px;margin:4px 0 22px} .login-field{text-align:left;margin-bottom:14px} .login-field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px} .login-field input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:11px 13px;font-family:inherit;font-size:14px} .login-field input:focus{outline:none;border-color:var(--gold)} .login-err{color:var(--badge);font-size:12.5px;min-height:16px;margin:2px 0 6px;text-align:left} .login-hint{margin-top:16px;font-size:11px;color:var(--muted);line-height:1.6} .login-hint b{color:var(--ink)} /* чип пользователя в подвале сайдбара */ .user-chip{display:flex;flex-direction:column;gap:2px} .user-chip .uc-name{color:var(--ink);font-weight:600;font-size:13px} .user-chip .uc-role{color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.4px} .user-chip .uc-logout{margin-top:8px;align-self:flex-start;background:none;border:1px solid var(--line);color:var(--muted);border-radius:var(--r-sm);padding:5px 12px;font-size:12px;cursor:pointer} .user-chip .uc-logout:hover{border-color:var(--gold);color:var(--gold)} /* Переключатель темы: сегмент из двух кнопок (в подвале меню — иконки, в кабинете — с подписью) */ .theme-sw{display:inline-flex;margin-top:10px;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--panel2)} .theme-sw button{background:none;border:none;color:var(--muted);font-family:inherit;font-size:12.5px;line-height:1; padding:7px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.15s} .theme-sw button:hover{color:var(--ink);background:var(--hover)} .theme-sw button[aria-pressed="true"]{background:var(--soft-gold);color:var(--gold);font-weight:600} .theme-block{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);text-align:left} .theme-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:7px} .theme-block .theme-sw{margin-top:0;width:100%} .theme-block .theme-sw button{flex:1;justify-content:center;min-height:36px} /* Блок темы в меню живёт отдельно от подвала: подвал прячется в свёрнутом меню и при ширине до 900px, а тему человек должен переключать при любой раскладке. В узком меню пара кнопок не помещается — вместо неё один тумблер .theme-one с иконкой нужной темы. */ .side-theme{padding:10px 20px 14px;display:flex;justify-content:flex-start} .side-theme .theme-sw{margin-top:0} .theme-one{display:none;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-pill); color:var(--muted);font-size:17px;line-height:1;padding:8px 10px;cursor:pointer;align-items:center;justify-content:center} .theme-one:hover{color:var(--gold);background:var(--hover)} body.nav-collapsed .side-theme{justify-content:center;padding:10px 0 14px} body.nav-collapsed .side-theme .theme-sw{display:none} body.nav-collapsed .theme-one{display:inline-flex} /* Режим приёма лидов: тумблер в подвале меню и в «Моём кабинете». Зелёная точка — лиды падают, серая — поток идёт мимо (человек в отъезде/на выходном). */ .side-intake{padding:10px 20px 0} .intake-sw{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line); border-radius:var(--r-pill);color:var(--muted);font-family:inherit;font-size:12.5px;line-height:1; padding:7px 12px;cursor:pointer;white-space:nowrap;transition:.15s} .intake-sw:hover{color:var(--ink);background:var(--hover)} .intake-sw .dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex-shrink:0} .intake-sw.on{color:var(--green);border-color:var(--green)} .intake-sw.on .dot{background:var(--green-fill)} .intake-sw.big{width:100%;justify-content:center;min-height:36px;font-size:13px} .intake-note{margin-top:7px;font-size:11.5px;line-height:1.5;color:var(--muted)} body.nav-collapsed .side-intake{padding:10px 6px 0;display:flex;justify-content:center} body.nav-collapsed .intake-sw{padding:7px 9px} body.nav-collapsed .intake-sw .lbl{display:none} /* Плашка «приём вернули после паузы» — поверх содержимого, но не модалка: работать не мешает */ .intake-resumed{position:fixed;right:18px;bottom:18px;z-index:9700;max-width:420px;background:var(--panel); border:1px solid var(--gold);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh-pop); font-size:13px;line-height:1.55;color:var(--ink)} .intake-resumed .ir-acts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap} /* роль без прав удаления — прячем деструктивные элементы */ body.role-nodelete .cl-del,body.role-nodelete .lc-cdel{display:none!important} /* Регламенты — аккордеон в меню */ #regHead .chev{margin-left:auto;font-size:11px;color:var(--gold-dim);transition:transform .18s ease} #regHead.open .chev{transform:rotate(90deg)} .nav-sub{display:none;flex-direction:column;background:var(--inset-bg);border-left:3px solid var(--gold-dim);margin:2px 0 6px} .nav-sub.open{display:flex} .nav-sub button{padding:9px 16px 9px 18px;font-size:12.5px;gap:9px;color:var(--muted);border-left:none} .nav-sub button:hover{color:var(--ink);background:var(--hover)} .nav-sub button.active{color:var(--gold);background:var(--soft-gold)} .nav-sub .rg-n{font-family:'Oswald';font-size:12px;color:var(--gold);width:20px;flex-shrink:0;text-align:center} /* Свёрнутое меню — узкая панель с иконками, без наезда на контент */ body.nav-collapsed .side{width:80px} body.nav-collapsed .logo-txt, body.nav-collapsed .lbl, body.nav-collapsed .chev, body.nav-collapsed .nav-group, body.nav-collapsed .nav-sub{display:none} body.nav-collapsed .logo{justify-content:center;padding:18px 0} body.nav-collapsed .sb-toggle{display:none} /* Меню теперь всегда узкое, поэтому подвал НЕ прячем: иначе у человека пропадал бы и выход из профиля, и подпись, под каким сотрудником он работает. Показываем компактно: имя в две строки мелким, роль и кнопка «Выйти» во всю ширину. */ body.nav-collapsed .side-foot{padding:10px 6px 12px;text-align:center;white-space:normal;font-size:10px;line-height:1.25} body.nav-collapsed .user-chip{align-items:center;gap:1px} body.nav-collapsed .user-chip .uc-name{font-size:11px;line-height:1.15;overflow-wrap:anywhere} body.nav-collapsed .user-chip .uc-role{overflow-wrap:anywhere} body.nav-collapsed .user-chip .uc-role{font-size:9px;letter-spacing:.2px} body.nav-collapsed .user-chip .uc-logout{margin-top:6px;align-self:stretch;padding:5px 4px;font-size:11px} body.nav-collapsed .nav button{flex-direction:column;justify-content:center;padding:11px 2px;gap:3px;border-left-width:0;border-bottom:3px solid transparent} body.nav-collapsed .nav button.active{border-left:none;border-bottom-color:var(--gold)} body.nav-collapsed .nav .ico{font-size:24px;width:auto} body.nav-collapsed .nav button::after{content:attr(data-short);font-size:9px;line-height:1.05;color:var(--muted);text-align:center;max-width:74px;white-space:normal} body.nav-collapsed .nav button.active::after{color:var(--gold)} /* Main */ .main{margin-left:240px;flex:1;min-width:0;padding:26px 32px;transition:margin-left .18s ease} body.nav-collapsed .main{margin-left:80px} .topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px} .topbar h1{font-size:26px;text-transform:uppercase} .back-btn{background:none;color:var(--muted);font-size:13px;padding:0;margin-bottom:9px;display:inline-flex;align-items:center;gap:7px;font-weight:500} .back-btn:hover{color:var(--gold)} .topbar .crumb{color:var(--muted);font-size:13px;margin-top:4px} .btn{background:var(--gold-fill);color:var(--on-gold);padding:10px 18px;border-radius:var(--r-sm);font-weight:600;font-size:13px} .btn:hover{background:var(--gold-fill-h)} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)} .btn.ghost:hover{border-color:var(--gold);color:var(--gold)} .view{display:none} .view.active{display:block} /* KPI row */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px} .kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px} .kpi .kpi-num{font-size:30px;color:var(--gold)} .kpi .kpi-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px} /* Kanban */ .board{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px} .col{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:235px;flex:1;display:flex;flex-direction:column} .col-head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} /* перетаскивание столбцов местами (порядок per-user) */ .col-head-drag{cursor:grab} .col-head-drag:active{cursor:grabbing} .col-head.col-drop-hot{box-shadow:inset 3px 0 0 var(--gold)} /* линия вставки слева от столбца */ .pf-col-dragging{opacity:.45} body.pf-col-reorder .col-body{pointer-events:none} /* при перестановке столбцов карточки не мешают */ .col-head .stage-title{font-size:13px;text-transform:uppercase;letter-spacing:.5px} .col-head .cnt{background:var(--panel2);color:var(--muted);font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600} .col-hint{padding:6px 14px 8px;font-size:11.5px;line-height:1.4;color:var(--muted);border-bottom:1px solid var(--line);white-space:pre-line} .col-body{padding:10px;display:flex;flex-direction:column;gap:10px;min-height:60px} /* редактор воронки (Настроить) */ .pcfg-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto} .pcfg-row{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:8px} .pcfg-row.drag-over{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset} .pcfg-row .pcfg-top{display:flex;align-items:center;gap:10px} .pcfg-handle{cursor:grab;color:var(--muted);font-size:16px;user-select:none;flex:0 0 auto} .pcfg-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto} .pcfg-row input.pcfg-name{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:8px 10px;font-size:13px} .pcfg-hintbtn{background:none;border:none;color:var(--gold);font-size:12px;cursor:pointer;padding:0;text-align:left} .pcfg-row textarea.pcfg-hint{background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:8px 10px;font-size:12.5px;resize:vertical;min-height:52px;width:100%} .card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 13px;cursor:pointer;transition:.15s} .card:hover{border-color:var(--gold);transform:translateY(-1px)} .card .addr{font-weight:600;font-size:13px;margin-bottom:6px} .card .meta{color:var(--muted);font-size:12px;display:flex;justify-content:space-between} .card .tags{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap} .tag{font-size:10px;padding:2px 7px;border-radius:5px;background:var(--soft-gold);color:var(--gold);text-transform:uppercase;letter-spacing:.5px} .tag.gate{background:var(--soft-red);color:var(--red)} .tag.ok{background:var(--soft-green);color:var(--green)} .card .mgr{display:flex;align-items:center;gap:6px;margin-top:9px;color:var(--muted);font-size:11px} .ava{width:20px;height:20px;border-radius:50%;background:var(--gold-fill);color:var(--on-gold);font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700} /* Работа на площадках */ .pf-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .pf-toolbar input.pf-search{flex:1;min-width:200px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:9px 12px;font-family:inherit;font-size:13px} .pf-toolbar input.pf-search:focus{outline:none;border-color:var(--gold)} .pf-map-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px} .pf-map-bar .pf-map-hint{color:var(--muted);font-size:12px} .pf-map-wrap{margin-bottom:18px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden; height:520px;background:var(--bg-deep)} .pf-map-wrap iframe{width:100%;height:100%;border:0;display:block} .pf-pipe{position:relative;margin-left:6px} .pf-pipe-btn{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap} .pf-pipe-btn:hover{border-color:var(--gold-dim)} .pf-pipe-chev{color:var(--muted);font-size:11px} .pf-pipe-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px;min-width:260px;box-shadow:var(--sh-menu);display:none;max-height:420px;overflow:auto} .pf-pipe-menu.open{display:block} .pf-pipe-menu .pp-row{padding:9px 12px;border-radius:var(--r-sm);font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap} .pf-pipe-menu .pp-row:hover{background:var(--panel2)} .pf-pipe-menu .pp-row.on{color:var(--gold);font-weight:600} .pf-pipe-menu .pp-sep{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:9px 12px 4px;margin-top:3px;border-top:1px solid var(--line)} .pf-seg{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .pf-seg button{background:var(--panel);color:var(--muted);padding:8px 14px;font-size:12.5px} .pf-seg button.active{background:var(--soft-gold);color:var(--gold)} .pf-agent-view{background:var(--panel);color:var(--ink);border:none;padding:8px 12px;font-size:12.5px;cursor:pointer;outline:none;min-width:150px} .pf-col.final{background:var(--inset-bg);border-style:dashed} /* подсказка под шапкой столбца: в режиме правки пустая превращается в «+ подсказка» */ .col-hint-add{color:var(--muted);font-size:11px;cursor:pointer;opacity:.8} .col-hint-add:hover{color:var(--gold);opacity:1} .pf-col.final .col-head .stage-title{color:var(--muted)} .pf-col-cold .col-head{border-bottom-color:var(--gold-dim)} .pf-col-new .col-head{border-bottom-color:var(--pink)} .pf-col-new .col-head .stage-title{color:var(--pink)} /* Шапка воронки (стиль amoCRM): название воронки · вид · поиск-фильтр · «⋯» · действия */ .pf-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap} .pf-head h1{font-size:20px;margin:0;white-space:nowrap} .pf-head .pf-pipe{margin-left:0} /* название воронки читается как заголовок раздела, а не как кнопка */ .pf-head .pf-pipe-btn{background:none;border:none;padding:4px 2px;font-size:17px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink)} .pf-head .pf-pipe-btn:hover{color:var(--gold)} .pf-head .pf-seg{margin-left:6px} /* поле «Поиск и фильтр»: ввод ищет, стрелка справа раскрывает панель фильтров */ .pf-searchbox{display:flex;align-items:center;gap:6px;flex:1 1 260px;max-width:520px;min-width:180px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 6px 0 11px} .pf-searchbox:focus-within{border-color:var(--gold)} .pf-searchbox .pf-searchico{color:var(--muted);font-size:12.5px;line-height:1} .pf-head .pf-searchbox .pf-search{flex:1 1 auto;min-width:0;background:none;border:none;color:var(--ink);padding:9px 0;font-family:inherit;font-size:13px} .pf-head .pf-searchbox .pf-search:focus{outline:none} .pf-filt-on{cursor:pointer;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--gold);background:var(--soft-gold);border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap} .pf-filttog{background:none;border:none;color:var(--muted);font-size:13px;line-height:1;padding:6px 7px;border-radius:var(--r-sm);cursor:pointer} .pf-filttog:hover{color:var(--gold);background:var(--hover)} .pf-filttog.on{color:var(--gold)} /* «⋯» — сортировка и редкие действия */ .pf-morewrap{position:relative} .pf-morebtn{background:none;border:1px solid transparent;color:var(--muted);font-size:19px;line-height:1;padding:5px 11px;border-radius:var(--r-sm);cursor:pointer} .pf-morebtn:hover,.pf-morebtn.on{color:var(--gold);background:var(--hover)} .pf-more-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:45;display:none;flex-direction:column;gap:2px;min-width:250px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px;box-shadow:var(--sh-menu)} .pf-more-menu.open{display:flex} .pf-more-menu .pf-more-sec{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px 10px 4px} .pf-more-menu .btn{width:100%;justify-content:flex-start;background:none;border:none;color:var(--ink);padding:9px 10px;font-size:13px;border-radius:var(--r-sm);text-align:left} .pf-more-menu .btn:hover{background:var(--panel2);color:var(--gold)} .pf-sortlist{display:flex;flex-direction:column;gap:2px} .pf-more-menu .pf-sortopt.on{color:var(--gold)} .pf-more-menu .pf-sortopt.on::after{content:"✓";margin-left:auto;padding-left:10px} .pf-head .pf-hbtn{padding:8px 13px;font-size:12.5px;white-space:nowrap} .pf-head #pfAddBtn{padding:10px 18px;font-size:13.5px;font-weight:600} .pf-head .pf-morewrap{margin-left:auto} /* строка фильтров над доской: цена / площадь / комнатность */ .pf-filters{display:none;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm)} .pf-filters.open{display:flex} .pf-filters .pf-flabel{font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);font-weight:700} .pf-frange{display:flex;align-items:center;gap:6px} .pf-frange>span{font-size:12px;color:var(--muted);white-space:nowrap} .pf-filters input[type=number],.pf-filters input[type=text]{width:74px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:7px 9px;font-family:inherit;font-size:13px;-moz-appearance:textfield} .pf-filters input[type=number]::-webkit-outer-spin-button,.pf-filters input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .pf-filters input[type=number]:focus,.pf-filters input[type=text]:focus{outline:none;border-color:var(--gold)} .pf-filters #pfPriceMin,.pf-filters #pfPriceMax{width:120px} /* цена: чтобы «20 000 000» влезало полностью */ .pf-filters .pf-dash{color:var(--muted);font-size:12px} .pf-filters select{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:7px 9px;font-family:inherit;font-size:13px;cursor:pointer} /* кнопка «Порядок»: показывает слово, тап открывает нативный выбор (невидимый select сверху) */ .pf-filters select:focus{outline:none;border-color:var(--gold)} .pf-filters .pf-fsep{width:1px;align-self:stretch;background:var(--line);margin:2px 2px} .pf-filters .pf-fcount{margin-left:auto;font-size:12px;color:var(--gold)} .pf-filters .pf-freset{padding:7px 12px;font-size:12.5px;white-space:nowrap} .pf-filters #pfShowReqBtn.active{background:var(--soft-orange);border-color:var(--overdue);color:var(--ink-orange)} /* доска воронки как в amoCRM: единый скролл по вертикали, заголовки столбцов прилипают сверху */ /* доска воронок занимает всю высоту экрана, скролл внутри неё → заголовки колонок остаются закреплёнными */ #platform.view.active{display:flex;flex-direction:column;height:calc(100vh - 58px)} #platform .pf-head,#platform .pf-filters,#platform .pf-map-wrap{flex:0 0 auto} /* Карта открывается ВО ВЕСЬ рабочий экран (владелец, 01.09.2026): доска на это время уходит, фильтры и шапка остаются. Раньше карта была полосой на 640px над доской — в неё почти ничего не помещалось, и раздел приходилось скроллить целиком. */ body.pf-map-open #platformBoard, body.pf-map-open #platformList, body.pf-map-open #pfMinimap, body.pf-map-open #pfColBtn, body.pf-map-open .pf-stagechips{display:none !important} body.pf-map-open #platform .pf-map-wrap{flex:1 1 auto;min-height:0;display:flex;margin-bottom:0;height:auto} body.pf-map-open #platform .pf-map-wrap iframe{flex:1 1 auto;height:100%;min-height:0} body.pf-map-open #pfMapToggle{border-color:var(--gold);color:var(--gold)} #platformBoard{flex:1 1 auto;min-height:0;align-items:flex-start;overflow:auto;gap:12px} #platformBoard .pf-col{flex:0 0 300px;min-width:300px;max-width:300px;overflow:visible} /* разделитель перед первым «менее приоритетным» столбцом (Отложенный спрос и т.п.) */ #platformBoard .pf-col:not(.final)+.pf-col.final{margin-left:22px;position:relative} #platformBoard .pf-col:not(.final)+.pf-col.final::before{content:'';position:absolute;left:-12px;top:6px;bottom:6px;border-left:2px dashed var(--gold-dim)} /* спиннер загрузки карточек воронки */ .pf-loader{display:none;align-items:center;justify-content:center;gap:12px;padding:44px 16px;color:var(--muted);font-size:14px} .pf-spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:pf-spin .8s linear infinite} @keyframes pf-spin{to{transform:rotate(360deg)}} #platformBoard .col-head{position:sticky;top:0;z-index:3;background:var(--panel);padding:9px 13px;flex:0 0 auto} #platformBoard .col-body{flex:1 1 auto;overflow:visible;padding:9px;gap:8px} /* Полосы прокрутки видимы по обеим осям: миникарта показывает, ГДЕ ты в воронке, а полоса — привычный органу управления мышью способ листать (в Windows её ищут глазами внизу доски). */ #platformBoard::-webkit-scrollbar{width:10px;height:12px} #platformBoard::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-sm)} #platformBoard::-webkit-scrollbar-thumb:hover{background:var(--gold-dim)} #platformBoard::-webkit-scrollbar-corner{background:transparent} /* Стрелки листания по краям доски (js/30_board-scroll.js): в покое приглушены, чтобы не закрывать карточки, под курсором проявляются. Появляются только той стороной, куда есть куда ехать. */ .pf-arrow{position:fixed;z-index:8;display:none;width:32px;height:72px;padding:0; align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--panel2);color:var(--ink);font-size:24px;line-height:1;font-family:inherit; cursor:pointer;opacity:.85;box-shadow:var(--sh-pop);transition:opacity .15s ease,color .15s ease,background .15s ease} .pf-arrow.on{display:flex} .pf-arrow:hover{opacity:1;background:var(--panel3);color:var(--gold);border-color:var(--gold-dim)} .pf-arrow:active{background:var(--panel)} /* ── миникарта воронки (как в amoCRM): полоса блоков-столбцов внизу справа ── Блок = столбец доски, залит его акцентом; видимые сейчас — в полную яркость. Клик по блоку — прыжок к столбцу, протяжка по полосе — скролл как ползунком. */ /* Полоса ПОВЕРХ доски (position:fixed), без подложки и без места в потоке — доска остаётся на всю высоту. В покое приглушена, при наведении — в полную яркость. Отступ справа — под чат-баббл мессенджера, чтобы не перекрывать его. */ .pf-minimap{position:fixed;right:96px;bottom:14px;z-index:8;display:flex;gap:3px; max-width:calc(100vw - 200px);opacity:.06;transition:opacity 1.4s ease;cursor:grab;user-select:none; filter:saturate(.62)} /* цвета столбцов приглушены, чтобы полоса не рябила */ /* как в amoCRM: в покое полоса почти невидима, проявляется на время скролла и под курсором, гаснет сразу после остановки и делает это долго и плавно (transition выше) */ .pf-minimap.live,.pf-minimap:hover{opacity:.95;transition:opacity .1s ease} body.pf-mm-drag .pf-minimap{opacity:1;cursor:grabbing} body.pf-mm-drag{user-select:none} .pf-minimap .pf-mm-col{flex:1 1 0;min-width:9px;max-width:34px;height:22px;padding:0;border:none; border-radius:3px;background:var(--mm-c,var(--line));opacity:.26;cursor:pointer; transition:opacity .12s;font:inherit} .pf-minimap .pf-mm-col:hover{opacity:.7} .pf-minimap .pf-mm-col.on{opacity:.72} .pf-minimap .pf-mm-col.final{border-radius:3px;opacity:.16} /* «менее приоритетные» столбцы бледнее */ .pf-minimap .pf-mm-col.final.on{opacity:.5} .pf-minimap .pf-mm-col i{display:block;height:100%;border-radius:3px} /* светлая тема: на «тёплой бумаге» бледные блоки сливались с фоном — поднимаем плотность */ html[data-theme="light"] .pf-minimap .pf-mm-col{opacity:.42} html[data-theme="light"] .pf-minimap .pf-mm-col.final{opacity:.28} html[data-theme="light"] .pf-minimap .pf-mm-col:hover{opacity:.75} html[data-theme="light"] .pf-minimap .pf-mm-col.on{opacity:.9} html[data-theme="light"] .pf-minimap .pf-mm-col.final.on{opacity:.7} .pf-card .pf-row{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;margin-bottom:4px} .pf-card .pf-price{color:var(--gold);font-weight:600;font-size:13px} .pf-badges{display:flex;gap:5px;margin:8px 0 6px;flex-wrap:wrap} .pf-plat{font-size:10px;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700} .pf-plat.avito{background:var(--soft-blue);color:var(--blue)} .pf-plat.cian{background:var(--soft-green);color:var(--green)} .pf-plat.other{background:var(--panel);color:var(--muted)} .pf-dup{font-size:10px;padding:2px 7px;border-radius:5px;background:var(--soft-red);color:var(--red);text-transform:uppercase;letter-spacing:.5px;font-weight:700} .pf-card .pf-card-head{font-size:13px;font-weight:600;color:var(--ink);line-height:1.32;margin-bottom:6px} .pf-card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px; border-top:1px solid var(--line);padding-top:8px} .pf-task{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink)} .pf-task.none{color:var(--muted)} /* «бегунок» задачи в правом нижнем углу карточки + счётчик дней просрочки (как в amoCRM) */ .pf-daybadge{display:inline-flex;align-items:center;gap:5px;font-family:'Oswald';font-size:12px;letter-spacing:.3px;color:var(--muted);flex:0 0 auto} .pf-daybadge.over{color:var(--pink)} .pf-daybadge.over-hot{color:var(--red)} .pf-daybadge.today{color:var(--green)} /* компактный маркер задачи справа в строке имени */ .pf-tt{display:inline-flex;align-items:center;gap:5px;font-family:'Oswald';font-size:11.5px;letter-spacing:.3px;color:var(--muted);flex:0 0 auto} .pf-tt.over{color:var(--pink)} .pf-tt.over-hot{color:var(--red)} .pf-tt.today{color:var(--green)} .pf-tt.none{font-family:inherit;font-size:10.5px;color:var(--muted);opacity:.7} .pf-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .pf-dot.over{background:var(--red-fill);box-shadow:0 0 7px var(--soft-red)} .pf-dot.over-hot{background:var(--red-fill);box-shadow:0 0 8px var(--soft-red)} .pf-dot.today{background:var(--green-fill);box-shadow:0 0 7px var(--soft-green)} .pf-dot.future{background:var(--green-fill);box-shadow:0 0 7px var(--soft-green)} .pf-dot.none{background:var(--dot-none)} /* «Назначить показ» — приоритет прозвона (🙏) */ .pf-show{margin-right:3px;font-size:12px;line-height:1} /* «продавец — риэлтор»: видно на плитке, чтобы брокер не звонил посреднику вслепую */ .pf-agentbadge{margin-right:3px;font-size:12px;line-height:1;opacity:.85} /* Замок: объект забрал коллега (первым запросил показ). Серый и приглушённый — это не тревога, а пометка «сюда не звоним». Имени рядом нет: оно внутри карточки. */ .pf-claimed{margin-right:3px;font-size:12px;line-height:1;opacity:.5;filter:grayscale(1)} .pf-card:has(.pf-claimed){opacity:.72} /* свежий объект (первые 3 дня после парсинга) — 🔥, сам пропадает */ .pf-fresh{margin-right:3px;font-size:12px;line-height:1} #lfShowBtn.active{background:var(--soft-orange);border-color:var(--overdue);color:var(--ink-orange)} /* задача справа сверху: кружок + число дней */ .pf-task{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap} .pf-task .pf-taskdays{font-size:10.5px;font-weight:600} .pf-task.t-over .pf-taskdays{color:var(--red)} .pf-task.t-active .pf-taskdays{color:var(--green)} /* дата задачи справа сверху: завтра+ → ДД.ММ ЧЧ:ММ (золотым), просрочено → красным */ .pf-taskdate{font-size:10.5px;font-weight:700;white-space:nowrap;flex:0 0 auto;letter-spacing:.2px} .pf-taskdate.t-future{color:var(--gold)} .pf-taskdate.t-over{color:var(--red)} .pf-line3{font-size:10.5px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:4px} .pf-age{color:var(--muted);font-weight:600;background:none;border:none;padding:0;margin:0;font-size:inherit} .pf-age.age-fresh{color:var(--green)} .pf-age.age-warn{color:var(--warn)} .pf-age.age-old{color:var(--red)} .pf-take{margin-top:9px;width:100%;background:var(--soft-gold);border:1px solid var(--gold-dim);color:var(--gold);border-radius:var(--r-sm);padding:7px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s} .pf-take:hover{background:var(--gold-fill);color:var(--on-gold)} /* перетаскивание карточек между столбцами */ .pf-card[draggable="true"]{cursor:grab} body.pf-dragging,body.pf-dragging .pf-card{cursor:grabbing} .pf-card.pf-drag-ghost{opacity:.35} .col-body.pf-drop-hot{background:var(--soft-gold);box-shadow:inset 0 0 0 2px var(--gold-dim);border-radius:var(--r-sm)} /* карточка воронки — компактная, 2 строки (как в amoCRM), без боковой полосы статуса */ /* единая минимальная высота карточек воронки (иначе карточка без строки «X дней» ниже соседних) */ .pf-card{padding:7px 10px;border-left:1px solid var(--line);min-height:76px;box-sizing:border-box} /* свежая карточка (спарсена ≤ 2 дней назад) — зелёная подсветка вместо 🔥 */ .pf-card.pf-fresh-card{border-left:3px solid var(--teal);background:var(--soft-teal)} .pf-card.pf-fresh-card2{border-left:3px solid var(--warn);background:var(--soft-warn)} .pf-line1{display:flex;justify-content:space-between;align-items:baseline;gap:7px} .pf-line1 .pf-name{font-weight:600;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-line1 .pf-days{font-size:11px;color:var(--muted);flex:0 0 auto;white-space:nowrap} .pf-line1 .pf-name{flex:1 1 auto} .pf-src{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:5px;font-size:10px;font-weight:800;padding:0 4px;letter-spacing:.3px} .pf-line2{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-line2 .pf-price{color:var(--gold);font-weight:600} .pf-line2 .pf-dupmini{color:var(--red);font-weight:600;font-size:11px} .pf-dupflag{flex:0 0 auto;align-self:center;font-size:12px;line-height:1;cursor:help;margin-left:2px} /* Число на кнопке «Застой» в панели фильтров */ .pf-stale-cnt:not(:empty){display:inline-block;margin-left:5px;padding:1px 6px;border-radius:9px;background:var(--soft-orange);color:var(--overdue);font-size:11px;font-weight:700} /* Застой: карточку давно не двигали. Приглушённый серо-оранжевый — заметно, но не кричит, иначе на доске, где застоя полсотни, метка перестанет читаться. */ .pf-stale{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:700; line-height:1;padding:2px 6px;border-radius:5px;background:var(--soft-orange);color:var(--overdue);cursor:help;margin-left:2px} .pf-dupflag.is-dup{color:var(--badge)} .pf-dupflag.is-maybe{color:var(--warn)} .pf-card-foot{margin-top:7px;padding-top:7px} .pf-closed{margin:5px 0 0;font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:2px} .pf-closed b{color:var(--red);font-weight:600} /* Партнёры — таблица */ .pr-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)} .pr-table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px} .pr-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel);white-space:nowrap} .pr-table td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle} .pr-table tbody tr.pr-row{cursor:pointer;transition:.12s} .pr-table tbody tr.pr-row:hover{background:var(--soft-gold-2)} .pr-c-num{font-family:'Oswald';color:var(--gold);font-weight:600;white-space:nowrap} .pr-fio-c{font-weight:600;white-space:nowrap} .pr-msg{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:var(--r-sm)} .pr-msg.tg{background:var(--soft-blue);color:var(--blue)} .pr-msg.max{background:var(--soft-green);color:var(--green)} .pr-off-badge{font-size:11px;color:var(--gold);background:var(--soft-gold);border:1px solid var(--gold-dim);border-radius:var(--r-sm);padding:2px 8px;white-space:nowrap} .pr-c-act{width:1%;white-space:nowrap;text-align:right} .pr-act-btns{display:inline-flex;gap:6px;opacity:0;transition:.15s} .pr-row:hover .pr-act-btns,.pr-row.open .pr-act-btns{opacity:1} .pr-c-act .btn{font-size:11.5px;padding:5px 10px} .pr-drow>td{background:var(--inset-bg);padding:0 14px} .pr-details{display:flex;flex-direction:column;gap:7px;padding:12px 2px;font-size:12.5px;color:var(--muted)} .pr-details a{color:var(--gold);text-decoration:none;word-break:break-all} .pr-details a:hover{text-decoration:underline} .pr-det-row{display:flex;gap:8px} .pr-det-row .k{min-width:150px;color:var(--muted)} .pr-det-row .v{color:var(--ink)} .pr-offer-list{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px} .pr-offer-list label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);text-transform:none;letter-spacing:0;margin:0;cursor:pointer} .pr-offer-list input{width:auto;flex:0 0 auto} .pr-offer-empty{color:var(--muted);font-size:12px} /* Модалка объекта */ .lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px} .lf-grid .full{grid-column:1/-1} .lf-field label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px} .lf-field input,.lf-field select,.lf-field textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:9px 11px;font-family:inherit;font-size:13px} .lf-field input:focus,.lf-field select:focus,.lf-field textarea:focus{outline:none;border-color:var(--gold)} .lf-field textarea{resize:vertical;min-height:60px} .lf-url-row{display:flex;gap:8px} .lf-url-row input{flex:1} .lf-field input[type=date],.lf-field input[type=time]{color-scheme:var(--cs)} /* секция задачи в модалке */ .lf-task-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px} .lf-task-grid .full{grid-column:1/-1} /* поле времени задачи: по умолчанию скрыто за кнопкой, задача — до конца дня */ .lf-timecell{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:38px} .lf-time-btn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:9px 11px;font-size:12px;cursor:pointer;white-space:nowrap} .lf-time-btn:hover{border-color:var(--gold);color:var(--gold)} .lf-time-hint{font-size:11px;color:var(--muted)} .lf-time-inp{max-width:120px} .lf-time-clear{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;text-decoration:underline;padding:2px} .lf-time-clear:hover{color:var(--gold)} .lf-task-active{font-size:10px;padding:2px 8px;border-radius:5px;letter-spacing:.3px;font-weight:700} .lf-task-active.today{background:var(--soft-green);color:var(--green)} .lf-task-active.overdue{background:var(--soft-red);color:var(--red)} .lf-task-active.future{background:var(--soft-gray);color:var(--ink-gray)} .lf-warn{border-radius:var(--r-sm);padding:12px 14px;font-size:12.5px;margin-top:4px;line-height:1.5} .lf-warn.hit{background:var(--soft-red);border:1px solid var(--soft-red);color:var(--ink-red)} .lf-warn.maybe{background:var(--soft-gold);border:1px solid var(--gold-dim);color:var(--ink-gold)} .lf-warn b{color:var(--ink)} .lf-warn .lf-st{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;background:var(--hover);margin-left:4px} .lf-hist{margin-top:12px;border-top:1px solid var(--line);padding-top:10px} .lf-hist .h-row{display:flex;gap:8px;font-size:12px;color:var(--muted);padding:3px 0} /* ==== Карточка объекта в стиле amoCRM ==== */ .lc-win{max-width:1040px} /* Карточка объекта — отдельное полноэкранное окно (amoCRM-стиль), не модалка поверх воронки */ #listingModal{padding:0;background:var(--bg)} #listingModal.show{align-items:stretch;justify-content:stretch} #listingModal .lc-win{max-width:none;width:100%;min-height:100vh;border-radius:0;border:none;margin:0} #listingModal .modal-bar{position:sticky;top:0;background:var(--panel);z-index:5} .lc-back{background:none;border:1px solid var(--line);color:var(--gold);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-sm);font-weight:600;margin-right:6px} .lc-back:hover{background:var(--line)} /* заголовок карточки — в левой колонке (amoCRM-стиль), с переносом длинного названия */ .lc-titlewrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;min-width:0;margin-bottom:12px} .lc-titlewrap .modal-title{white-space:normal;max-width:none;text-transform:none;font-size:16px;line-height:1.28;font-weight:700} .lc-id{font-size:11px;color:var(--muted);flex:0 0 auto} /* статус: цветная полоса-воронка + выпадающий список (как в amoCRM) — по ширине левой колонки */ .lc-stwrap{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:10px} .lc-stbar{display:flex;gap:2px;margin-bottom:10px;flex:0 0 100%} .lc-stbar .seg{flex:1 1 0;height:5px;border-radius:2px;background:var(--line);transition:.15s} .lc-stsel{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none} .lc-stcur{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:5px 12px;border-radius:var(--r-sm);color:#161616} .lc-stdays{font-size:12px;color:var(--muted)} .lc-stchev{color:var(--muted);font-size:11px} .lc-stmenu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;background:var(--panel);border:1px solid var(--line); border-radius:var(--r-sm);padding:5px;min-width:280px;box-shadow:var(--sh-menu);display:none;max-height:380px;overflow:auto} .lc-stmenu.open{display:block} .lc-stmenu .mrow{padding:9px 13px;border-radius:var(--r-sm);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px; color:#161616;cursor:pointer;margin-bottom:3px;display:flex;align-items:center;justify-content:space-between} .lc-stmenu .mrow:hover{filter:brightness(1.09)} /* Итоговые этапы (отложенный спрос, успешные и закрытые сделки) отбиты от рабочей воронки пунктиром — на доске они живут под шторкой «Показать скрытое», и в карточке это должно читаться так же: до линии работа идёт, после неё карточка уходит с доски. */ .lc-stmenu .mrow.final-sep{margin-top:15px;position:relative} .lc-stmenu .mrow.final-sep::before{content:'';position:absolute;left:0;right:0;top:-9px;border-top:2px dashed var(--gold-dim)} .lc-link{color:var(--gold);font-size:12px;text-decoration:none} .lc-link:hover{text-decoration:underline} /* дополнительные контакты — каждый отдельным блоком со своим аватаром */ .lc-contacts{display:flex;flex-direction:column;gap:10px;margin-top:10px} .lc-contact{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;background:var(--raise)} .lc-contact .lc-person-head{margin-bottom:6px} .lc-contact .lc-cdel{margin-left:auto;color:var(--muted);cursor:pointer;font-size:12px;opacity:.6} .lc-contact .lc-cdel:hover{opacity:1;color:var(--badge)} .lc-ava-alt{color:#161616} .lc-addcontact{margin-top:10px;width:100%;background:none;border:1px dashed var(--line);color:var(--muted); border-radius:var(--r-sm);padding:8px;font-size:12.5px;cursor:pointer;transition:.15s} .lc-addcontact:hover{border-color:var(--gold);color:var(--gold)} /* тело: две колонки */ .lc-body{display:flex;align-items:stretch;max-height:calc(100vh - 66px);min-height:calc(100vh - 66px)} .lc-side{flex:0 0 384px;border-right:1px solid var(--line);padding:16px 20px 24px;overflow-y:auto} /* закрытие сделки — красная кнопка внизу карточки */ /* «Сохранить» рядом с полями левой колонки: кнопка в шапке не видна, когда заполняешь контакты внизу */ /* bottom:0 — иначе (при отрицательном bottom) низ кнопки уезжал за границу прокрутки и обрезался */ .lc-savebar{display:flex;align-items:center;gap:10px;margin-top:18px;padding:10px 0 2px;background:var(--panel)} .lc-savebar .btn{flex:1;justify-content:center} .lc-savehint{font-size:11.5px;color:var(--muted);white-space:nowrap} .lc-savebar.dirty .btn{background:var(--gold-fill);border-color:var(--gold);color:var(--on-gold)} .lc-savebar.dirty .lc-savehint{color:var(--gold)} .btn.lf-dirty{background:var(--gold-fill);border-color:var(--gold);color:var(--on-gold)} .btn.lf-saved{background:var(--green-fill);border-color:var(--green-fill);color:var(--on-green)} /* ЦСИ: красная подсветка незаполненных ОБЯЗАТЕЛЬНЫХ полей (телефон/интерес) — не блокирует, требует дозаполнить */ input.lf-req,select.lf-req,textarea.lf-req{border-color:var(--red)!important;box-shadow:0 0 0 1px var(--red)} /* Незаполненную обязательность помечаем ПОСТРОЧНО: рамка вокруг всего блока #lfCsiFields захватывала и встречу, и город, а поля вылезали за её край (разбор 31.08.2026). */ .lc-row.lf-req{box-shadow:inset 3px 0 0 var(--red);padding-left:9px;margin-left:-9px} .lc-row.lf-req>label{color:var(--red)} #lfCsiFields.lf-req #lfCsiInterest .lc-row{box-shadow:inset 3px 0 0 var(--red);padding-left:9px;margin-left:-9px} #lfCsiFields.lf-req #lfCsiInterest .lc-row>label{color:var(--red)} /* ЦСИ: карточка без активной задачи / с просроченной — красная рамка слева */ .pf-card.pf-csiflag{border-left:3px solid var(--red)} .lc-closedeal{width:100%;margin-top:22px;background:transparent;border:1px solid var(--red);color:var(--red);border-radius:var(--r-sm);padding:11px 14px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s} .lc-closedeal:hover{background:var(--red-fill);color:#fff} .lc-main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0} .lc-scroll{flex:1 1 auto;overflow-y:auto;padding:16px 18px;min-height:0} .lc-composer{flex:0 0 auto;border-top:1px solid var(--line);background:var(--panel);padding:12px 16px} .lc-tabs{display:flex;gap:6px;margin-bottom:10px} .lc-tab{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:7px 16px;border-radius:var(--r-sm);cursor:pointer} .lc-tab:hover{color:var(--ink);border-color:var(--muted)} .lc-tab.active{background:var(--gold-fill);border-color:var(--gold);color:var(--on-gold)} .lc-note-ta{width:100%;min-height:42px;resize:vertical;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:9px 12px;font-family:inherit;font-size:13px;line-height:1.45} .lc-note-ta:focus{outline:none;border-color:var(--gold)} .lc-cbar{display:flex;align-items:center;gap:10px;margin-top:10px} .lc-cbar .lc-hint{margin-right:auto;font-size:11px;color:var(--muted)} .lc-cbar #lfTaskActive{margin-right:auto} /* Скриншоты в примечании: черновик под полем ввода и миниатюры в ленте */ .lc-att{display:none;flex-wrap:wrap;gap:8px;margin-top:8px} .lc-att.lc-att-feed{display:flex;margin-top:6px} .lc-att-i{position:relative;display:inline-flex;align-items:center;justify-content:center; width:96px;height:72px;border:1px solid var(--line);border-radius:var(--r-sm); overflow:hidden;background:var(--panel2)} .lc-att-i img{width:100%;height:100%;object-fit:cover;display:block} .lc-att-i button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%; border:none;background:rgba(0,0,0,.62);color:#fff;font-size:11px;line-height:1;cursor:pointer} .lc-att-state{font-size:11px;color:var(--muted);padding:0 6px;text-align:center} .lc-att-feed .lc-att-i{width:120px;height:88px;cursor:zoom-in} .lc-empty{font-size:12.5px;color:var(--muted);text-align:center;padding:22px 0} .lc-feed .lc-nrow.task{border-left-color:var(--info)} .lc-erow{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;color:var(--muted);padding:6px 12px;border-left:3px solid var(--line);margin-top:2px} .lc-erow .lc-emeta{min-width:130px} .lc-erow .lc-etext{color:var(--ink)} @media(max-width:820px){.lc-scroll{overflow:visible}} .lc-sec{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--gold);margin:2px 0 12px} .lc-collapse{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px} .lc-collapse:hover{color:var(--ink)} .lc-caret{font-size:11px;color:var(--muted)} /* Рамка фокуса — фирменная, а не системная. Chrome рисует по краю сфокусированного элемента свой синий контур (rgb(0,95,204)), и на карте он читался как синий прямоугольник поверх города, а на кнопках — как синяя обводка невпопад (жалоба 31.08.2026). Заменяем цвет, а не убираем: человеку, который ходит по кабинету с клавиатуры, надо видеть, где он. :focus-visible срабатывает только при клавиатуре — после клика мышью рамки нет. */ :focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* Выделение текста мышью. Chrome красит его системным синим, и при протяжке по доске или по панели фильтров экран покрывался синими прямоугольниками — это и выглядело как «синие поля» (жалоба владельца 01.09.2026). Цвет — фирменный. */ ::selection{background:var(--sel-bg);color:var(--ink)} /* Служебные элементы (шапка воронки, фильтры, меню, заголовки столбцов, чипсы) текстом не являются — их незачем выделять, а при перетаскивании столбца выделение мешало. */ .pf-head,.pf-filters,.pf-more-menu,.col-head,.pf-stagechips,.pf-seg,.pf-morebtn{user-select:none} /* Карта локатора (Leaflet) фокусируется: у .leaflet-container tabindex="0", и Chrome рисует по её краю синюю системную рамку, а leaflet.css выносит её наружу (outline-offset:1px). Свой фокус — золотой и внутрь границ. См. тот же приём в map.html. */ .leaflet-container:focus{outline:none} .leaflet-container:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} /* строка поля: label слева, значение справа (как в amoCRM) */ .lc-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--inset-line)} /* «Показать остальное» — кнопка только на мобилке (на десктопе поля видны, кнопка скрыта) */ .lc-more-btn{display:none;width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--gold);border-radius:var(--r-sm);padding:10px;font-size:13px;font-family:inherit;cursor:pointer;margin:8px 0 4px} .lc-row>label{flex:0 0 118px;font-size:12px;color:var(--muted);margin:0;text-transform:none;letter-spacing:0} .lc-row>input,.lc-row>select{flex:1 1 auto;min-width:0;background:transparent;border:1px solid transparent;border-radius:var(--r-sm); color:var(--ink);padding:6px 8px;font-family:inherit;font-size:13px} .lc-row>input:hover,.lc-row>select:hover{border-color:var(--line)} /* Подсказка в поле не должна читаться как заполненное значение: в блоке «Сделка» placeholder «12 800 000» принимали за реальную сумму продажи (владелец, 18.08.2026). */ .lc-row>input::placeholder,.lc-row>textarea::placeholder{color:var(--muted);opacity:.55;font-weight:400} .lc-row>input:focus,.lc-row>select:focus{outline:none;border-color:var(--gold);background:var(--panel2)} /* Номер должен помещаться целиком. Рядом с телефонными полями стоят кнопки (📷 распознать, 📞 позвонить), из-за них поле ужималось и у номера пропадала последняя цифра: «+7 (965) 756-20-4». min() — чтобы на узком экране строка всё равно не переполнялась. */ .lc-row>input.lc-phone{min-width:min(152px,100%)} /* Место под номер отдаём за счёт подписи, иначе кнопка звонка вылезает за край панели */ .lc-row-phone>label{flex:0 1 118px;min-width:74px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Совсем узкий экран: целый номер уже не помещается физически — тогда важнее, чтобы строка не разъезжалась и кнопка звонка осталась на месте. */ @media (max-width:380px){ .lc-row>input.lc-phone{min-width:0} } .lc-row .lc-val{flex:1 1 auto;font-size:13px;color:var(--ink);font-weight:600;padding:6px 8px} .lc-row input[type=date],.lc-row input[type=datetime-local]{color-scheme:var(--cs)} /* ── СДЕЛКИ по карточке (js/27_deals.js): их может быть несколько ── */ .lc-deals{margin-top:18px} .lc-deals .dl-sec{display:flex;align-items:center;justify-content:space-between;gap:8px} .dl-add{background:transparent;border:1px dashed var(--line);border-radius:var(--r-sm);color:var(--muted); padding:3px 9px;font-size:12px;font-family:inherit;cursor:pointer;text-transform:none;letter-spacing:0} .dl-add:hover{border-color:var(--gold);color:var(--gold)} .dl-empty{font-size:12px;color:var(--muted);line-height:1.5;padding:4px 0 2px} .dl-row{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;margin:8px 0;background:var(--raise)} .dl-row.dl-lost{opacity:.6} .dl-line{display:flex;gap:6px;align-items:center;margin-bottom:6px} .dl-line:last-of-type{margin-bottom:0} .dl-row select,.dl-row input{flex:1 1 auto;min-width:0;background:var(--panel2);border:1px solid var(--line); border-radius:var(--r-sm);color:var(--ink);padding:5px 8px;font-family:inherit;font-size:12.5px} .dl-row input[type=date]{color-scheme:var(--cs)} .dl-row select:focus,.dl-row input:focus{outline:none;border-color:var(--gold)} .dl-row .dl-cu,.dl-row .dl-pu,.dl-row .dl-st{flex:0 0 auto;max-width:46%} .dl-num{flex:0 0 auto;width:20px;height:20px;border-radius:var(--r-pill);display:inline-flex; align-items:center;justify-content:center;font-size:11px;font-weight:700} .dl-del{flex:0 0 auto;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px} .dl-del:hover{color:var(--red)} .dl-gross{font-size:12px;color:var(--muted);margin-top:6px} .dl-gross b{color:var(--ink)} .dl-total{font-size:12.5px;color:var(--ink);border-top:1px solid var(--line);padding-top:8px;margin-top:4px} /* Вал по столбцу воронки — рядом со счётчиком карточек (как в amoCRM) */ .pf-colsum{margin-left:6px;font-size:11px;color:var(--muted);white-space:nowrap} /* Запрос клиента в блоке «Подбор» — многострочное поле; input-стили его не касались */ .lc-row>textarea{flex:1 1 auto;min-width:0;background:transparent;border:1px solid var(--line);border-radius:var(--r-sm); color:var(--ink);padding:6px 8px;font-family:inherit;font-size:13px;line-height:1.45} .lc-row>textarea:focus{outline:none;border-color:var(--gold);background:var(--panel2)} /* «Показать параметры объекта»: карточка без услуги «Продажа» прячет цену/площадь/этажи. Свой класс, а не .lc-more-btn — та кнопка живёт только на мобилке (display:none на десктопе). */ .lc-sale-toggle{width:100%;background:transparent;border:1px dashed var(--line);color:var(--muted); border-radius:var(--r-sm);padding:8px;font-size:12.5px;font-family:inherit;cursor:pointer;margin:8px 0 4px} .lc-sale-toggle:hover{border-color:var(--gold);color:var(--gold)} /* Ответственные: несколько человек галочками (см. lfRespRender) */ .lc-resp{flex:1 1 auto;min-width:0;position:relative} .lc-resp-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%; background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 8px; font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left} .lc-resp-btn:hover{border-color:var(--gold)} .lc-resp-btn>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lc-resp-caret{color:var(--muted);flex:0 0 auto} .lc-resp-panel{position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:240px;max-width:320px; max-height:320px;overflow:auto;background:var(--panel);border:1px solid var(--line); border-radius:var(--r-sm);padding:4px;box-shadow:0 12px 30px rgba(0,0,0,.35)} .lc-resp-row{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:12.5px; color:var(--ink);cursor:pointer;border-radius:6px;white-space:nowrap} .lc-resp-row:hover{background:var(--panel2)} .lc-resp-row input{width:14px;height:14px;accent-color:var(--gold-fill)} .lc-resp-main{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.04em} .lc-resp-hint{padding:7px 8px 4px;font-size:11px;line-height:1.4;color:var(--muted);border-top:1px solid var(--inset-line);margin-top:4px} .lc-resp-empty{padding:8px;font-size:12px;color:var(--muted)} /* карточка человека */ .lc-person{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .lc-person-head{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;margin-bottom:8px} .lc-ava{width:26px;height:26px;border-radius:50%;background:var(--gold-fill);color:var(--on-gold);font-size:12px;font-weight:700; display:flex;align-items:center;justify-content:center;flex:0 0 auto} /* примечание-сводка справа */ .lc-note{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:16px;display:flex;gap:16px;align-items:flex-start} .lc-note-txt{flex:1 1 auto;min-width:0} .lc-note-pic{flex:0 0 clamp(180px,34%,300px);display:block} .lc-note-pic #lfPhotoThumb{margin-top:0;width:100%;max-height:220px} @media(max-width:900px){.lc-note{flex-direction:column}.lc-note-pic{flex:0 0 auto;width:100%;max-width:320px}} .lc-note-row{font-size:12.5px;color:var(--ink);margin-bottom:4px} .lc-note-lbl{color:var(--muted)} .lc-note-val{color:var(--ink)} .lc-note input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:8px 10px;font-family:inherit;font-size:13px;margin-top:4px} .lc-note input:focus{outline:none;border-color:var(--gold)} .lc-note .lc-url-row{display:flex;gap:8px} .lc-note .lc-url-row input{flex:1;margin-top:4px} /* лента примечаний */ .lc-feed{margin-top:12px;display:flex;flex-direction:column;gap:8px} .lc-feed .lc-nrow{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--gold-dim);border-radius:var(--r-sm);padding:9px 12px} .lc-feed .lc-nrow{position:relative} .lc-feed .lc-nrow .lc-nmeta{font-size:11px;color:var(--muted);margin-bottom:3px;display:flex;align-items:center} .lc-feed .lc-nrow .lc-ntext{font-size:13px;color:var(--ink);line-height:1.45;white-space:pre-wrap} /* действия над примечанием (автор/админ): редактировать, удалить */ .lc-nact{margin-left:auto;display:inline-flex;gap:4px;opacity:0;transition:opacity .12s} .lc-feed .lc-nrow:hover .lc-nact{opacity:1} .lc-nact button{background:transparent;border:none;color:var(--muted);font-size:12px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:4px} .lc-nact button:hover{color:var(--gold);background:var(--hover)} .lc-nedit{width:100%;min-height:52px;resize:vertical;background:var(--panel);border:1px solid var(--gold);border-radius:var(--r-sm);color:var(--ink);padding:7px 9px;font-family:inherit;font-size:13px;line-height:1.45} .lc-nedit:focus{outline:none} .lc-nedit-bar{display:flex;gap:8px;margin-top:6px} .lc-nedit-bar button{font-size:11px;padding:3px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer} .lc-nedit-bar button.save{background:var(--gold-fill);border-color:var(--gold);color:var(--on-gold);font-weight:600} @media(max-width:820px){.lc-body{flex-direction:column;max-height:none}.lc-side{flex:none;border-right:none;border-bottom:1px solid var(--line)}} .lf-hist .h-row b{color:var(--ink);font-weight:600} /* Generic panel */ .panel-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px} .panel-box h3{font-size:16px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;letter-spacing:.5px} .panel-box .hint{color:var(--muted);font-size:12px;margin-bottom:16px} /* Object card */ .obj-grid{display:grid;grid-template-columns:1fr 320px;gap:18px} .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px} .tabs button{background:none;color:var(--muted);padding:10px 16px;font-size:13px;border-bottom:2px solid transparent;font-weight:500} .tabs button.active{color:var(--ink);border-bottom-color:var(--gold)} .tabpane{display:none}.tabpane.active{display:block} .stage-track{list-style:none;display:flex;flex-direction:column;gap:0} .stage-track li{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center} .stage-track li:last-child{border-bottom:none} .dot{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2px solid var(--line);color:var(--muted)} .dot.done{background:var(--green-fill);border-color:var(--green);color:var(--on-green)} .dot.cur{border-color:var(--gold);color:var(--gold)} .stage-track .st-name{font-weight:600;font-size:13px} .stage-track .st-sub{color:var(--muted);font-size:12px} .stage-track .st-right{margin-left:auto} .doc-list{display:flex;flex-direction:column;gap:8px} .doc{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm)} .doc .fico{width:30px;height:30px;border-radius:var(--r-sm);background:var(--soft-blue);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0} .doc .fico.x{background:var(--soft-red);color:var(--red)} .doc .fname{font-weight:500;font-size:13px} .doc .fmeta{color:var(--muted);font-size:11px} .doc .fstat{margin-left:auto;font-size:11px} .missing{opacity:.55} .sidecard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px} .sidecard h4{font-size:13px;text-transform:uppercase;color:var(--muted);letter-spacing:1px;margin-bottom:12px} .kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px} .kv:last-child{border-bottom:none} .kv span{color:var(--muted)}.kv b{font-weight:600} /* Checkbox blocks */ .opt{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:9px;cursor:pointer;transition:.15s} .opt:hover{border-color:var(--gold-dim)} .opt.sel{border-color:var(--gold);background:var(--soft-gold-2)} .opt input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px} .opt .o-title{font-weight:600;font-size:13px} .opt .o-desc{color:var(--muted);font-size:12px;margin-top:2px} .opt .o-price{margin-left:auto;font-family:'Oswald';color:var(--gold);font-size:15px;white-space:nowrap} .two-col{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start} .estimate{background:var(--panel);border:1px solid var(--gold-dim);border-radius:var(--radius);padding:20px 22px;position:sticky;top:20px} .estimate h3{color:var(--gold);font-size:15px;text-transform:uppercase;margin-bottom:14px} .est-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px} .est-row.tot{border-bottom:none;border-top:2px solid var(--gold-dim);margin-top:8px;padding-top:14px;font-size:17px;font-family:'Oswald';color:var(--gold)} .est-row .muted{color:var(--muted)} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:11px 12px;border-bottom:1px solid var(--line);font-weight:600} td{padding:13px 12px;border-bottom:1px solid var(--line)} tr:hover td{background:var(--hover-2)} .pill{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600} .pill.new{background:var(--soft-blue);color:var(--blue)} .pill.work{background:var(--soft-gold);color:var(--gold)} .pill.done{background:var(--soft-green);color:var(--green)} .gen-out{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px;font-size:13px;line-height:1.7;white-space:pre-wrap;color:var(--ink);max-height:340px;overflow:auto} .seg{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap} .seg button{background:var(--panel2);border:1px solid var(--line);color:var(--muted);padding:7px 13px;border-radius:var(--r-sm);font-size:12px} .seg button.active{border-color:var(--gold);color:var(--gold);background:var(--soft-gold)} .note{background:var(--soft-blue);border:1px solid var(--soft-blue);border-radius:var(--r-sm);padding:12px 15px;font-size:12px;color:var(--ink-blue);margin-bottom:18px} /* ---- Маркетинг: сводка + строки расходов ---- */ .mk-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} .mks{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 16px} .mks-l{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px} .mks-v{font-family:'Oswald';font-size:22px;color:var(--ink)} .mks-in{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--gold);font-family:'Oswald';font-size:20px;border-radius:var(--r-sm);padding:2px 8px} .mk-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:9px} .mk-item.sel{border-color:var(--gold);background:var(--soft-gold-2)} .mk-item input[type=checkbox]{margin-top:3px;accent-color:var(--gold);width:16px;height:16px;flex-shrink:0} .mk-item .mi-main{flex:1;min-width:0} .mk-item .mi-title{font-weight:600;font-size:13px;cursor:pointer} .mk-item .mi-exec{margin-top:7px;display:flex;align-items:center;gap:6px} .mk-item .mi-exec label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap} .mk-item .mi-exec input{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:4px 7px;font-size:12px;min-width:0} .mk-item select.mi-sel{margin-top:6px;width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:5px 7px;font-size:12px} .mk-item .mi-price{margin-left:auto;text-align:right;flex-shrink:0} .mk-item .mi-price input{width:104px;text-align:right;background:var(--panel);border:1px solid var(--line);color:var(--gold);font-family:'Oswald';border-radius:var(--r-sm);padding:4px 6px;font-size:14px} .mk-item .mi-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 2px;margin-top:2px} .mk-item .mi-del:hover{color:var(--red)} .mk-labor-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px} .mk-labor-row .ml-h{color:var(--muted);font-family:'Oswald'} .mk-labor-row.tot{border-bottom:none;border-top:2px solid var(--gold-dim);margin-top:6px;padding-top:11px;font-family:'Oswald';color:var(--gold);font-size:15px} /* ---- Маркетинг: даты (календарики) ---- */ .date-grid{display:flex;flex-direction:column;gap:12px} .dr label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px} .dr-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .dr-range span{color:var(--muted)} .dr-range input[type=date]{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:7px 10px;font-size:13px;font-family:inherit;color-scheme:var(--cs)} .dr-range input[type=date]:focus{border-color:var(--gold);outline:none} .dr-len{font-family:'Oswald';color:var(--gold);font-size:13px;margin-left:4px} #mkShowList{display:flex;flex-direction:column;gap:6px} .show-row{display:flex;align-items:center;gap:8px} .show-row input[type=date]{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:7px 10px;font-size:13px;color-scheme:var(--cs)} /* ---- Маркетинг: предпросмотр плана ---- */ .mk-preview{margin-top:22px;border:1px solid var(--gold-dim);border-radius:var(--radius);overflow:hidden;background:#fff} .mkp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap} .mkp-bar b{color:var(--ink);font-size:14px} .mkp-bar .btn{margin-left:8px} .mk-preview iframe{width:100%;border:none;display:block;min-height:600px;background:#fff} /* ---- Мой кабинет ---- */ .cab-grid{display:grid;grid-template-columns:300px 1fr 1fr;gap:16px;align-items:start} .cab-col{display:flex;flex-direction:column;gap:12px;min-width:0} .cab-col--fill{align-self:stretch} .cab-col--fill #statQuarter{display:flex;flex-direction:column;height:100%} .cab-col--fill #statQuarter .gauge-box{flex:1 1 auto} .cab-col #statMonth .panel-box,.cab-col #statQuarter .panel-box{margin:0} .cab-col .stat-head{margin:2px 0 10px} .cab-col .stat-head h2{font-size:15px} .cab-col .panel-box{padding:14px} .month-picker{display:flex;flex-wrap:wrap;gap:5px;align-items:center} .month-picker .mp-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-right:2px;width:100%} .mp-chip{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:var(--r-sm); padding:4px 9px;font-size:11.5px;cursor:pointer;transition:.12s;font-family:inherit} .mp-chip:hover{border-color:var(--gold-dim);color:var(--ink)} .mp-chip.on{background:var(--soft-gold);border-color:var(--gold);color:var(--gold)} @media(max-width:1280px){.cab-grid{grid-template-columns:280px 1fr 1fr}} @media(max-width:1024px){.cab-grid{grid-template-columns:1fr}} .profile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center} .prof-photo-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:14px} .prof-photo{width:120px;height:120px;border-radius:50%;background:var(--gold-fill);color:var(--on-gold);font-family:'Oswald';font-size:48px;font-weight:600;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;border:3px solid var(--gold-dim)} .photo-btn{background:transparent;border:1px solid var(--line);color:var(--muted);padding:6px 14px;border-radius:var(--r-sm);font-size:12px} .photo-btn:hover{border-color:var(--gold);color:var(--gold)} .prof-name{font-family:'Oswald';font-size:21px;font-weight:600} .prof-role{color:var(--muted);font-size:12px;margin-bottom:18px} .profile .field{text-align:left} .quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px} .quick{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center;cursor:pointer;transition:.15s} .quick:hover{border-color:var(--gold);transform:translateY(-1px)} .quick .q-num{font-family:'Oswald';font-size:30px;color:var(--gold)} .quick .q-lbl{font-size:12px;color:var(--muted);margin-top:2px} /* ---- Регламенты ---- */ .reg-grid{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start} .reg-list{display:flex;flex-direction:column;gap:8px} .reg-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;cursor:pointer;display:flex;gap:12px;align-items:center;transition:.15s} .reg-item:hover{border-color:var(--gold-dim)} .reg-item.active{border-color:var(--gold);background:var(--soft-gold-2)} .reg-num{width:30px;height:30px;border-radius:var(--r-sm);background:var(--panel2);color:var(--gold);font-family:'Oswald';font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .reg-item .r-name{font-size:13px;font-weight:500} .reg-reader{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 38px;min-height:400px;max-width:920px} .reg-reader h2{font-family:'Oswald';font-size:19px;color:var(--gold);text-transform:uppercase;letter-spacing:.4px;margin:26px 0 10px;padding-top:8px} .reg-reader h2:first-child{margin-top:0} .reg-reader h3{font-family:'Oswald';font-size:16px;color:var(--ink);margin:22px 0 9px} .reg-reader h4{font-family:'Oswald';font-size:14px;color:var(--gold-dim);text-transform:uppercase;letter-spacing:.5px;margin:18px 0 7px} .reg-reader h5{font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 6px} .reg-reader p{margin-bottom:12px;line-height:1.75;color:var(--ink)} .reg-reader ul,.reg-reader ol{margin:0 0 14px 4px;padding-left:22px} .reg-reader li{margin:5px 0;line-height:1.65;color:var(--ink)} .reg-reader li::marker{color:var(--gold-dim)} .reg-reader strong{color:var(--ink);font-weight:600} .reg-reader code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-family:'SF Mono',Menlo,monospace;font-size:12px;color:var(--gold)} .reg-reader blockquote{border-left:3px solid var(--gold);background:var(--soft-gold-2);border-radius:0 8px 8px 0;padding:12px 18px;margin:0 0 16px;color:var(--ink);font-style:italic;line-height:1.7} .reg-reader .r-empty{color:var(--muted);text-align:center;padding-top:120px} .nav-group{padding:16px 20px 6px;font-size:10px;color:var(--gold-dim);text-transform:uppercase;letter-spacing:1.5px;font-weight:700} /* старое (не используется на главной, оставлено для совместимости) */ .home-top{display:grid;grid-template-columns:440px 1fr;gap:18px;margin-bottom:24px} .prof-head{display:flex;align-items:center;gap:14px;margin-bottom:18px} .prof-ava{width:54px;height:54px;border-radius:50%;background:var(--gold-fill);color:var(--on-gold);font-family:'Oswald';font-size:24px;font-weight:600;display:flex;align-items:center;justify-content:center} .field{margin-bottom:11px} .field label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px} .field input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:9px 11px;font-family:inherit;font-size:13px} .field input:disabled{background:transparent;border-color:transparent;padding-left:0;color:var(--ink)} .field input:not(:disabled){border-color:var(--gold-dim)} .field input:focus{outline:none;border-color:var(--gold)} .field select,.field textarea{width:100%;background:var(--panel2);border:1px solid var(--gold-dim);border-radius:var(--r-sm);color:var(--ink);padding:9px 11px;font-family:inherit;font-size:13px} .field select{cursor:pointer;color-scheme:var(--cs)} .field textarea{resize:vertical;min-height:64px;line-height:1.45} .field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)} .pd-note{font-size:11px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line);line-height:1.5} .gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-content:start} .gauge-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center} .gauge-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:8px} .mini-kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .mini{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center} .mini .m-num{font-family:'Oswald';font-size:26px;color:var(--gold)} .mini .m-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px} /* ---- Статистика агента (дашборд) ---- */ .stat-head{display:flex;align-items:baseline;gap:12px;margin:6px 0 14px} .stat-head h2{font-size:18px;text-transform:uppercase;letter-spacing:.5px} .stat-head .stat-period{font-size:12px;color:var(--muted)} .stat-grid{display:grid;grid-template-columns:300px 1fr;gap:18px;margin-bottom:26px;align-items:stretch} .panel-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px} .gauge-box{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .gauge-val{font-family:'Oswald';font-size:32px;color:var(--gold);line-height:1;margin-top:-26px} .gauge-val small{display:block;font-family:inherit;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px} .gauge-legend{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--muted)} .gauge-legend .gl{display:inline-flex;align-items:center;gap:7px} .gauge-legend .gl b{color:var(--ink);font-family:'Oswald';font-size:14px;letter-spacing:.2px} .gauge-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;flex-shrink:0} .gauge-legend .gl-fact{background:var(--gold-fill)} .gauge-legend .gl-back{background:var(--soft-gold);border:1px solid var(--gold-dim)} .gauge-cap{margin-top:12px;font-size:12.5px;color:var(--muted)} .gauge-cap b{color:var(--gold)} /* три показателя дохода агента */ .income-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:14px} .income-grid .itile{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 10px;text-align:center} .income-grid .it-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:5px;line-height:1.25} .income-grid .it-num{display:block;font-family:'Oswald';font-size:16px;color:var(--ink);letter-spacing:.2px;white-space:nowrap} .income-grid .itile{min-width:0} #agencyManagers table td,#agencyManagers table th{white-space:nowrap} #agencyManagers table td:first-child{width:99%} .hist .pbar-row+.pbar-row{border-top:1px solid var(--line);padding-top:13px;margin-top:13px} .income-grid .it-num.dim{color:var(--gold-dim)} .income-grid .itile.hero{background:var(--soft-ok);border-color:var(--soft-ok)} .income-grid .itile.hero .it-num{color:var(--green)} .income-grid .itile.hero .it-lbl{color:var(--ink-green)} /* блок фиксированных ставок в окне мотивации */ .moti-fixed{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .moti-fixed-title{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--gold);margin-bottom:10px} .moti-fixed-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;font-size:13px;border-bottom:1px solid var(--line)} .moti-fixed-row:last-child{border-bottom:none} .moti-fixed-row span{color:var(--muted)} .moti-fixed-row b{color:var(--gold);font-family:'Oswald';font-size:14px;white-space:nowrap} .q-lead-line{margin-top:10px;font-size:12.5px;color:var(--muted);text-align:center} .q-lead-line b{color:var(--ink)} .q-lead-note{font-size:11px;opacity:.75} .q-toggle{margin-top:14px} /* лесенки мотивации */ .moti-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px} .moti h4{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--gold);margin-bottom:4px} .moti .moti-sub{font-size:11px;color:var(--muted);margin-bottom:12px;line-height:1.4} .tier{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 11px;border-radius:var(--r-sm); border:1px solid transparent;font-size:12.5px} .tier+.tier{margin-top:3px} .tier .t-range{color:var(--muted)} .tier .t-pct{font-weight:700;font-variant-numeric:tabular-nums} .tier.active{background:var(--soft-gold);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-dim)} .tier.active .t-range{color:var(--ink);display:flex;flex-direction:column;gap:2px} .tier.active .t-pct{color:var(--gold)} .tier.passed{opacity:.5} .t-badge{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--gold);font-weight:700} .cab-col .moti-cols{grid-template-columns:1fr;gap:16px} /* заголовок секции статистики */ .stat-section-title{font-size:22px;text-transform:uppercase;letter-spacing:.5px;margin:30px 0 16px; padding-top:24px;border-top:1px solid var(--line)} /* шкалы месяца (горизонтальные прогресс-бары с маркером цели) */ .hist{display:flex;flex-direction:column;gap:8px;padding:2px 2px 0} .pbar-row{display:flex;flex-direction:column;gap:3px} .pbar-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .pbar-name{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink)} .pbar-val{font-family:'Oswald';font-size:14px;color:var(--muted);white-space:nowrap} .pbar-val b{font-size:16px;color:var(--gold)} .pbar-row.over .pbar-val b{color:var(--green)} .pbar-val .pbar-pct{margin-left:8px;font-size:13px} .pbar-row.over .pbar-val .pbar-pct{color:var(--green)} .pbar-track{position:relative;height:8px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line);overflow:hidden} .pbar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:8px 0 0 8px; background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width .6s ease;min-width:3px} .pbar-row.over .pbar-fill{border-radius:var(--r-sm);background:linear-gradient(90deg,var(--green-fill-h),var(--green-fill)); box-shadow:0 0 14px var(--soft-ok); background-image:linear-gradient(90deg,var(--green-fill-h),var(--green-fill)),repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 7px,transparent 7px 14px)} .pbar-goal{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--goal-line);transform:translateX(-1px);z-index:2} .pbar-goal::after{content:'цель';position:absolute;top:-14px;left:50%;transform:translateX(-50%); font-size:8.5px;letter-spacing:.3px;color:var(--muted);text-transform:uppercase} .hist-legend{display:flex;gap:16px;justify-content:center;margin-top:9px;font-size:11px;color:var(--muted);flex-wrap:wrap} .hist-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle} .hist-legend .lg-plan{width:2px;height:12px;border-radius:1px;background:var(--goal-line)} .hist-legend .lg-fact{background:var(--gold-fill)} .hist-legend .lg-over{background:var(--green-fill)} /* акцент на «Вал» в таблице по менеджерам — ключевая метрика */ th.stat-val{color:var(--gold)} td.stat-val{background:var(--soft-gold-2)} td.stat-val b{font-size:15.5px;color:var(--gold);font-weight:700} /* воронка конверсии */ .funnel-title{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:12px; text-transform:uppercase;letter-spacing:.5px;color:var(--ink);text-align:center} .funnel-title span{display:block;text-transform:none;letter-spacing:0;font-size:11px;color:var(--muted);margin-top:2px} .funnel{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:10px} .fn-step{flex:0 0 auto;min-width:64px;text-align:center;background:var(--panel2);border:1px solid var(--line); border-radius:var(--r-sm);padding:9px 8px} .fn-step .fn-num{font-family:'Oswald';font-size:20px;color:var(--gold);line-height:1} .fn-step .fn-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin-top:3px} .fn-arrow{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;min-width:44px;line-height:1.1} .fn-arrow .fn-ar{font-size:15px;color:var(--muted)} .fn-arrow .fn-conv{font-family:'Oswald';font-size:13px;color:var(--muted);margin-top:2px} .fn-arrow .fn-plan{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin-top:1px} .fn-arrow.ok .fn-conv{color:var(--green)} .fn-arrow.low .fn-conv{color:var(--warn)} .fn-arrow.low .fn-ar{color:var(--warn)} .calls-input-row{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap; padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)} .calls-input-row input{width:64px;background:var(--panel2);border:1px solid var(--gold-dim);border-radius:var(--r-sm); color:var(--ink);padding:5px 8px;font-family:'Oswald';font-size:15px;text-align:center} .calls-input-row input:focus{outline:none;border-color:var(--gold)} @media(max-width:900px){.stat-grid{grid-template-columns:1fr}.moti-cols{grid-template-columns:1fr}} /* ---- Мои клиенты (доска по форматам) ---- */ .cl-board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start} @media(max-width:1000px){.cl-board{grid-template-columns:1fr}} .cl-col{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px} .cl-col-head{display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid var(--line)} .cl-col-head .cl-ico{font-size:16px} .cl-col-head .cl-col-title{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink);font-weight:600} .cl-col-head .cl-cnt{margin-left:auto;font-family:'Oswald';font-size:15px;color:var(--gold);min-width:22px;text-align:center; background:var(--soft-gold);border-radius:20px;padding:1px 8px} .cl-col-body{display:flex;flex-direction:column;gap:9px;min-height:36px} .cl-card{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px} .cl-card:hover{border-color:var(--gold-dim)} .cl-name{font-weight:600;font-size:13.5px;color:var(--ink);padding-right:18px} .cl-row{font-size:12px;color:var(--muted);margin-top:4px} .cl-note{font-size:11.5px;color:var(--muted);margin-top:6px;padding-top:6px;border-top:1px solid var(--line);line-height:1.4} .cl-del{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted);font-size:12px;line-height:1;cursor:pointer;opacity:.5} .cl-del:hover{opacity:1;color:var(--badge)} .cl-empty{font-size:12px;color:var(--muted);opacity:.7;padding:8px 2px;text-align:center} .cl-add{background:none;border:1px dashed var(--line);color:var(--muted);border-radius:var(--r-sm);padding:8px;font-size:12.5px;cursor:pointer;transition:.15s} .cl-add:hover{border-color:var(--gold);color:var(--gold)} .cl-select{width:100%;background:var(--panel2);border:1px solid var(--gold-dim);border-radius:var(--r-sm);color:var(--ink);padding:9px 11px;font-family:inherit;font-size:13px} .cl-select:focus{outline:none;border-color:var(--gold)} /* ---- Переданные клиенты (таблица) ---- */ .ho-table{width:100%;border-collapse:collapse;min-width:900px;font-size:13px} .ho-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap} .ho-table tbody td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top} .ho-table tbody tr:hover{background:var(--panel2)} .ho-sub{font-size:11.5px;color:var(--muted);margin-top:3px} .ho-stage{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:20px;background:var(--soft-gold);color:var(--gold)} /* ---- карточка объекта: метка дубля, редактирование, фото, коллеги ---- */ .lc-dupbadge{align-self:center;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap} .lc-dupbadge.is-dup{color:var(--badge);background:var(--soft-red)} .lc-dupbadge.is-maybe{color:var(--warn);background:var(--soft-warn)} .lc-editbtn{background:none;border:none;color:var(--gold-dim);font-size:11.5px;cursor:pointer;padding:0;margin-left:6px} .lc-editbtn:hover{color:var(--gold);text-decoration:underline} .lf-editing{border-color:var(--gold)!important} .lf-photowrap{margin-top:8px;border-radius:var(--r-sm);overflow:hidden} #lfPhotoThumb{max-width:100%;max-height:200px;border-radius:var(--r-sm);border:1px solid var(--line);display:block} .lf-photo-empty{padding:22px 12px;text-align:center;color:var(--muted);font-size:12px;background:var(--panel2);border:1px dashed var(--line);border-radius:var(--r-sm)} .lf-photo-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap} .lf-colleagues{display:flex;flex-direction:column;gap:8px;margin-top:6px} .lf-col-card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px} .lf-col-card.me{border-color:var(--gold-dim)} .lf-col-top{display:flex;align-items:center;gap:8px;font-size:13px} .lf-col-me{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--gold);background:var(--soft-gold);padding:1px 6px;border-radius:var(--r-sm)} .lf-col-st{margin-left:auto;font-size:11.5px;color:var(--muted)} .lf-col-sub{font-size:11.5px;color:var(--muted);margin-top:3px} /* дропдаун «Коллеги» в шапке карточки */ .lc-colwrap{position:relative;align-self:center} .lc-editmini{background:none;border:none;color:var(--gold-dim);font-size:13px;cursor:pointer;padding:2px 4px;line-height:1} .lc-editmini:hover{color:var(--gold)} #lfPhotoThumb{max-height:190px;max-width:100%;width:auto;border-radius:var(--r-sm);border:1px solid var(--line);display:block;margin-top:10px;object-fit:cover;cursor:zoom-in} .lc-note .lc-link{color:var(--gold);text-decoration:none;font-size:13px} .lc-note .lc-link:hover{text-decoration:underline} .lc-note .lc-note-val{color:var(--ink);font-size:13px} .lc-colbtn{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:var(--r-sm);padding:6px 11px;font-size:12px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .lc-colbtn:hover{border-color:var(--gold-dim);color:var(--ink)} .lc-colcount{background:var(--soft-gold);color:var(--gold);border-radius:var(--r-sm);padding:0 6px;font-weight:600;font-size:11px} .lc-colmenu{position:absolute;top:calc(100% + 6px);right:0;min-width:280px;max-width:360px;max-height:340px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-pop);padding:6px;z-index:50;display:none} .lc-colmenu.show{display:block} .lc-colitem{padding:9px 10px;border-radius:var(--r-sm);cursor:pointer} .lc-colitem:hover{background:var(--panel2)} .lc-colitem-top{display:flex;align-items:center;gap:8px;font-size:13px} .lc-colst{margin-left:auto;font-size:11px;padding:1px 8px;border-radius:var(--r-md);border:1px solid;white-space:nowrap} .lc-coldet{margin-top:7px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px} .lc-colnote{background:var(--panel2);border-radius:var(--r-sm);padding:5px 8px} .obj-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .obj-section-head h2{font-size:20px;text-transform:uppercase} .obj-tabs{display:flex;gap:6px;margin-bottom:12px} .type-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px} .type-filter button{background:none;border:1px solid var(--line);color:var(--muted);padding:6px 13px;border-radius:20px;font-size:12px} .type-filter button:hover{color:var(--ink)} .type-filter button.active{background:var(--soft-gold);border-color:var(--gold);color:var(--gold)} .dtype{display:inline-block;font-size:10px;padding:3px 9px;border-radius:5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px} .dt-auction{background:var(--soft-violet);color:var(--violet)} .dt-classic{background:var(--soft-blue);color:var(--blue)} .dt-mortgage{background:var(--soft-green);color:var(--green)} .dt-novostroy{background:var(--soft-gold);color:var(--gold)} .dt-legal{background:var(--soft-red);color:var(--red)} .dt-draft{background:var(--soft-gray);color:var(--ink-gray)} .st.s-draft{background:var(--gray-fill);color:#fff} .obj-tabs button{background:var(--panel);border:1px solid var(--line);color:var(--muted);padding:9px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px} .obj-tabs button span{background:var(--panel2);padding:1px 8px;border-radius:20px;font-size:11px;font-weight:600} .obj-tabs button.active{border-color:var(--gold);color:var(--gold)} .obj-tabs button.active span{background:var(--soft-gold)} .obj-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px} .ocard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.15s} .ocard-del{position:absolute;top:8px;right:8px;z-index:3;width:26px;height:26px;border-radius:var(--r-sm);border:none;background:var(--scrim-soft);color:var(--badge);font-size:13px;cursor:pointer;opacity:.75;transition:.15s} .ocard-del:hover{opacity:1;background:var(--badge);color:#fff} .ocard:hover{border-color:var(--gold);transform:translateY(-2px)} .ocard .photo{height:130px;background:var(--grad-photo);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:30px;position:relative} .ocard .photo .st{position:absolute;top:10px;left:10px;font-size:10px;padding:3px 9px;border-radius:var(--r-sm);font-weight:600;text-transform:uppercase;letter-spacing:.5px} .st.s-active{background:var(--green-fill-90);color:var(--on-green)} .st.s-prep{background:var(--gold-fill-90);color:var(--on-gold)} .st.s-done{background:var(--gray-fill);color:#fff} .ocard .ob{padding:13px 15px} .ocard .ob .dtype{margin-bottom:8px} .ocard .o-client{font-weight:600;font-size:14px;margin-bottom:4px} .ocard .o-price{font-family:'Oswald';font-size:18px;color:var(--gold)} .ocard .o-addr{font-weight:600;font-size:13px;margin:3px 0 8px} .ocard .o-spec{color:var(--muted);font-size:12px;display:flex;gap:10px} .ocard .o-foot{display:flex;justify-content:space-between;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)} .ocard .o-foot b{color:var(--ink);font-family:'Oswald'} /* ---- Экран подготовки аукциона ---- */ .auc-banner{display:flex;align-items:center;gap:12px;background:var(--soft-green);border:1px solid var(--soft-green);border-radius:var(--r-sm);padding:14px 18px;margin-bottom:20px;font-size:13px;color:var(--ink-green)} .auc-banner .ab-ico{width:30px;height:30px;border-radius:50%;background:var(--green-fill);color:var(--on-green);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0} .auc-head-badge{display:inline-flex;align-items:center;gap:8px;margin-top:6px} .st.s-prepviolet{background:var(--violet-fill);color:#241a33} .autodoc{display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:9px} .autodoc .ad-ico{width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;background:var(--soft-gold);color:var(--gold)} .autodoc .ad-name{font-weight:600;font-size:13px} .autodoc .ad-sub{color:var(--muted);font-size:12px;margin-top:1px} .autodoc .ad-right{margin-left:auto;display:flex;align-items:center;gap:10px} .ad-status{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600;white-space:nowrap} .ad-ready{background:var(--soft-green);color:var(--green)} .ad-wait{background:var(--soft-gold);color:var(--gold)} .ad-empty{background:var(--soft-red);color:var(--red)} .ad-open{background:transparent;border:1px solid var(--line);color:var(--ink);padding:6px 12px;border-radius:var(--r-sm);font-size:12px} .ad-open:hover{border-color:var(--gold);color:var(--gold)} .fill-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px} .fill-row:last-child{border-bottom:none} .fill-row span{color:var(--muted)} .fill-row .empty{color:var(--gold-dim);font-style:italic} /* ---- Аккордеон этапов объекта ---- */ .acc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden} .acc.open{border-color:var(--gold-dim)} .acc-head{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;user-select:none} .acc-head:hover{background:var(--hover-2)} .acc-head .st-name{font-weight:600;font-size:14px} .acc-head .st-sub{color:var(--muted);font-size:12px;margin-top:2px} .acc-head .acc-right{margin-left:auto;display:flex;align-items:center;gap:12px} .acc-chev{color:var(--gold-dim);font-size:13px;transition:transform .2s} .acc.open .acc-chev{transform:rotate(90deg)} .acc-body{display:none;padding:4px 18px 20px;border-top:1px solid var(--line)} .acc.open .acc-body{display:block} /* ---- Полная карточка: слева навигация по этапам, справа контент выбранного ---- */ .ao-split{display:flex;gap:22px;align-items:flex-start} .ao-stagenav{flex:0 0 258px;position:sticky;top:16px;display:flex;flex-direction:column;gap:4px} .ao-panes{flex:1 1 auto;min-width:0} .ao-navitem{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;background:transparent;text-align:left;width:100%;font-family:inherit;color:var(--ink)} .ao-navitem:hover{background:var(--hover-2)} .ao-navitem.active{background:var(--panel2);border-color:var(--gold-dim)} .ao-navitem .ao-num{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted)} .ao-navitem.active .ao-num{border-color:var(--gold);color:var(--gold)} .ao-navitem .ao-nm{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ao-navitem .ao-sdot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--muted)} .ao-navitem.ao-ws{margin-bottom:8px;background:var(--soft-gold);border-color:var(--gold-dim)} .ao-navitem.ao-ws .ao-num{border-color:var(--gold);color:var(--gold);font-size:13px} /* в режиме панелей показываем только активный этап; его шапка служит заголовком */ .ao-panes .acc{display:none;border:none;background:transparent;margin:0;overflow:visible} .ao-panes .acc.ao-active{display:block} .ao-panes .acc.ao-active .acc-head{cursor:default;padding:0 0 12px} .ao-panes .acc.ao-active .acc-head:hover{background:none} .ao-panes .acc.ao-active .acc-head .acc-chev{display:none} .ao-panes .acc.ao-active .acc-body{display:block;border-top:1px solid var(--line);padding:16px 0 8px} /* «Рабочее поле»: заголовок панели не дублируем — он уже есть в навигаторе слева */ .ao-panes .acc.ao-wspane.ao-active .acc-head{display:none} .ao-panes .acc.ao-wspane.ao-active .acc-body{border-top:none;padding-top:4px} /* ── РАБОЧЕЕ ПОЛЕ: задачи слева, чат по объекту справа ── */ .ws-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start} .ws-main{min-width:0} /* на узком экране задачи важнее — чат уходит вниз, высоту не фиксируем */ @media(max-width:1180px){.ws-grid{grid-template-columns:1fr}.ws-chat{order:2;position:static;height:420px}} /* общий прогресс по всем задачам объекта */ .toast.toast-bad{background:var(--red-fill);color:#fff} .ws-progbar{height:5px;border-radius:3px;background:var(--panel2);overflow:hidden;margin:0 0 16px} .ws-progbar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-fill),var(--gold-dim));transition:width .25s} /* блок задач = этап карточки */ .ws-block{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;background:var(--panel)} .ws-block.ws-ok{border-color:var(--green)} .ws-bhead{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;user-select:none} .ws-bhead:hover{background:var(--hover-2)} .ws-bnum{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--muted)} .ws-block.ws-ok .ws-bnum{border-color:var(--green);color:var(--green)} .ws-bname{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws-bcnt{flex:0 0 auto;font-size:11px;color:var(--muted)} .ws-bchev{flex:0 0 auto;color:var(--muted);font-size:11px;transition:transform .15s} .ws-block.open .ws-bchev{transform:rotate(90deg)} .ws-bbody{display:none;padding:2px 13px 12px} .ws-block.open .ws-bbody{display:block} .ws-task{display:flex;gap:9px;align-items:flex-start;padding:6px 0} .ws-tbox{flex:0 0 auto;width:15px;height:15px;margin-top:1px;border-radius:4px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--on-green);background:transparent} .ws-task.done .ws-tbox{background:var(--green-fill);border-color:var(--green)} .ws-task.manual .ws-tbox{cursor:pointer} .ws-tname{flex:1;min-width:0;font-size:12.5px;line-height:1.4;color:var(--ink)} /* выполненная задача — зачёркнуто, но ЧИТАЕМО (как в amoCRM): текст ink с прозрачностью, тонкая линия */ .ws-task.done .ws-tname{color:var(--ink);opacity:.62;text-decoration:line-through;text-decoration-color:var(--muted);text-decoration-thickness:1px} .ws-tauto{flex:0 0 auto;font-size:9.5px;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 5px;white-space:nowrap} /* «дозаполните поля» — предупреждение при неудачном подтверждении блока */ .ws-warn{margin:8px 0 2px;padding:10px 12px;border:1px solid var(--red);border-radius:var(--r-sm);background:var(--soft-red);font-size:12px;color:var(--ink)} .ws-warn b{color:var(--red)} .ws-warn ul{margin:6px 0 0;padding-left:18px} .ws-warn li{margin:2px 0;color:var(--muted)} .ws-bact{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .ws-conf{font-size:11px;color:var(--green)} /* чат по объекту — сбоку от задач */ .ws-chat{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);height:520px;position:sticky;top:16px;overflow:hidden} .ws-chat-head{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink)} .ws-chat-addr{margin-left:auto;font-size:10.5px;color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px} .ws-chat-thread{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px} .ws-chat-composer{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)} .ws-chat-composer input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:8px 11px;font-size:12.5px} .ws-chat-composer button{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);color:var(--gold);border-radius:var(--r-sm);padding:8px 12px;cursor:pointer;font-size:13px} /* ── скриншоты тарифов по площадкам ── */ .mkp-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)} .mkp-row:last-child{border-bottom:none} .mkp-th{flex:0 0 auto;width:86px;height:60px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel3) center/cover no-repeat;cursor:zoom-in} .mkp-th.mkp-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;cursor:default} .mkp-info{flex:1;min-width:0} .mkp-n{font-size:13px;font-weight:600;color:var(--ink)} .mkp-s{font-size:11.5px;margin-top:2px} .mkp-act{flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap} .mkp-act .btn{padding:6px 11px;font-size:12px} .mkp-other{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} .mkp-oh{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:8px} .mkp-og{display:flex;flex-wrap:wrap;gap:10px} .mkp-o{position:relative;width:96px;height:70px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel3) center/cover no-repeat;cursor:zoom-in} .mkp-o>button{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--red);cursor:pointer;font-size:11px;line-height:1} @media(max-width:640px){.mkp-row{flex-wrap:wrap}.mkp-act{width:100%}} /* библиотека заготовок */ .mkl-box{display:none;position:fixed;inset:0;background:var(--scrim);z-index:9600;align-items:center;justify-content:center;padding:20px} .mkl-box.show{display:flex} .mkl-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);max-width:680px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden} .mkl-head{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px} .mkl-x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:15px} .mkl-grid{padding:16px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:12px} .mkl-i{position:relative;width:150px} .mkl-th{width:150px;height:104px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel3) center/cover no-repeat;cursor:pointer} .mkl-th:hover{border-color:var(--gold)} .mkl-n{font-size:11px;color:var(--muted);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mkl-del{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--red);cursor:pointer;font-size:11px;line-height:1} /* ── договор подписан: поля закрыты на правку ── */ .c-locknote{margin:0 0 14px;padding:12px 14px;border:1px solid var(--green);border-radius:var(--r-sm);background:var(--soft-green-2);font-size:12.5px;line-height:1.5;color:var(--ink)} #contract.c-locked .cf:disabled,#contract.c-locked .cf-r:disabled{opacity:.75;cursor:not-allowed} #contract.c-locked .opt{opacity:.75} /* ── полная карточка клиента: сканы паспорта ── */ .cl-scans{display:flex;flex-direction:column;gap:6px} .cl-scan{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2);font-size:12.5px} .cl-sn{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted)} .cl-snm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cl-scan a{color:var(--gold);flex:0 0 auto} .cl-sdel{flex:0 0 auto;color:var(--muted);cursor:pointer;opacity:.5;font-size:12px} .cl-sdel:hover{opacity:1;color:var(--red)} .cl-all{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);cursor:pointer} .cl-warn{margin-top:10px;padding:9px 12px;border:1px solid var(--gold-dim);border-radius:var(--r-sm);background:var(--soft-gold-2);font-size:12px;color:var(--gold)} #clientForm .ck-row select.cl{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:7px 9px;font-size:13px;width:100%} /* легенда статусов — внизу навигатора */ .ao-legend{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px} .ao-legend-t{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:2px} .ao-legend-r{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)} .ao-ld{width:9px;height:9px;border-radius:50%;flex:0 0 auto} @media(max-width:880px){.ao-split{flex-direction:column}.ao-stagenav{position:static;flex:none;width:100%;flex-direction:row;flex-wrap:wrap}.ao-navitem{width:auto}} /* карточки текстов «Подготовка к рекламе» */ .txt-card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:12px} .txt-card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px} .txt-title{font-weight:600;font-size:13.5px;color:var(--ink)} .txt-copy{margin-left:auto;padding:5px 12px;font-size:12px;white-space:nowrap} .txt-ta{width:100%;min-height:96px;resize:vertical;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:10px 12px;font-family:inherit;font-size:13px;line-height:1.5} .txt-inp{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:9px 12px;font-family:inherit;font-size:13px} .txt-ta:focus,.txt-inp:focus{outline:none;border-color:var(--gold)} .txt-chk{display:flex;align-items:center;gap:8px;cursor:pointer} .txt-chk input{width:16px;height:16px;accent-color:var(--gold)} .acc-sub{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin:18px 0 10px} .acc-sub:first-child{margin-top:14px} /* статус-точка этапа */ .dot.empty{border-color:var(--line);color:var(--muted);background:transparent} .stat-tag{font-size:10px;padding:3px 10px;border-radius:20px;font-weight:600;text-transform:uppercase;letter-spacing:.4px} .stat-ok{background:var(--soft-green);color:var(--green)} .stat-wait{background:var(--soft-gold);color:var(--gold)} .stat-empty{background:var(--soft-gray);color:var(--muted)} .stat-review{background:var(--soft-blue);color:var(--info)} .stat-rework{background:var(--soft-warn);color:var(--warn)} /* подпункты «Подготовка к рекламе» */ .prep-sub{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:10px} .prep-sub-head{display:flex;align-items:center;gap:12px;margin-bottom:10px} .prep-sub-t{font-weight:600;font-size:14px} .prep-sub-s{font-size:12px;color:var(--muted);margin-top:2px} .prep-sub-head .stat-tag{margin-left:auto} .prep-sub-actions{display:flex;gap:8px;flex-wrap:wrap} .prep-sub-actions .btn{padding:7px 14px;font-size:12.5px} .s5-lbl{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:6px 0 5px} /* модалка покупателя: слева данные, справа активность */ .buyer-grid{display:grid;grid-template-columns:300px 1fr;gap:24px;padding:20px 24px;align-items:start} .buyer-grid .buyer-right{border-left:1px solid var(--line);padding-left:24px;min-width:0} @media(max-width:760px){.buyer-grid{grid-template-columns:1fr;gap:14px}.buyer-grid .buyer-right{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}} /* активная задача (как в amoCRM) */ .active-task{background:var(--soft-gold-2);border:1px solid var(--gold-dim);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:12px} /* Задача «Посмотреть лид» — простая зона из двух кнопок */ .active-task.lead-look{padding:16px 18px} .active-task.lead-look .ll-title{font-family:'Oswald';font-size:15px;color:var(--gold);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px} .active-task.lead-look .ll-desc{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.45} .active-task.lead-look .ll-actions{display:flex;gap:10px;flex-wrap:wrap} .active-task.lead-look .ll-actions .btn{flex:1 1 auto;min-width:150px;justify-content:center;padding:12px 16px;font-size:14px} .active-task .at-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap} .active-task .at-head select{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:6px 9px;font-family:inherit;font-size:12.5px;color-scheme:var(--cs);cursor:pointer} .active-task .at-text{font-size:13px;color:var(--ink);margin-bottom:10px;line-height:1.4} .active-task .at-row{display:flex;gap:8px;align-items:center} .active-task .at-row .txt-inp{flex:1} .active-task .at-row .btn{padding:8px 14px;font-size:12.5px;white-space:nowrap} /* цвет активной задачи: зелёная — актуальная (сегодня/запланирована), красная — просрочена */ .active-task{border-left-width:3px} .active-task.st-today{border-color:var(--green);border-left-color:var(--green);background:var(--soft-green-2)} .active-task.st-future{border-color:var(--green);border-left-color:var(--green);background:var(--soft-green-2)} .active-task.st-overdue{border-color:var(--red);border-left-color:var(--red);background:var(--soft-red);box-shadow:0 0 0 1px var(--soft-red),0 0 14px var(--soft-red)} .active-task.st-overdue .at-mini-l1{color:var(--red);font-weight:600} /* поле «Результат выполнения» скрыто, пока не кликнули по задаче */ .active-task:not(.open) .at-head, .active-task:not(.open) .at-text, .active-task:not(.open) .sc-wrap, .active-task:not(.open) .pf-rec, .active-task:not(.open) .at-row, .active-task:not(.open) .at-follow{display:none} /* памятка назначителя: скрипт разговора по запросу на показ */ .sc-wrap{margin:0 0 10px} .sc-toggle{background:var(--panel2);border:1px solid var(--gold-dim);color:var(--gold);border-radius:var(--r-sm);padding:7px 12px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer} .sc-toggle:hover{border-color:var(--gold)} .sc-wrap .sc-body{display:none} .sc-wrap.open .sc-body{display:block;margin-top:10px;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm);padding:12px 14px} .sc-goal{font-size:12.5px;color:var(--gold);margin-bottom:12px;line-height:1.45} .sc-tone{font-size:12px;color:var(--muted);line-height:1.45;margin:-6px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)} .sc-link{color:var(--gold);text-decoration:none;text-transform:none;letter-spacing:0} .sc-link:hover{text-decoration:underline} .sc-step{margin-bottom:12px} .sc-h{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px} .sc-n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--gold-fill);color:var(--panel);font-size:11px;font-weight:700;letter-spacing:0} .sc-say{font-size:13.5px;color:var(--ink);line-height:1.5;padding:8px 11px;background:var(--soft-gold-2);border-radius:var(--r-sm);margin-bottom:6px} .sc-note{font-size:12px;color:var(--muted);line-height:1.45;margin-bottom:6px} .sc-obj{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} .sc-q{font-size:12.5px;color:var(--ink);font-weight:600;margin:8px 0 4px} .sc-end{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.45} /* диктофон назначителя: разговор с собственником пишется прямо из задачи */ .pf-rec{margin:0 0 10px;padding:9px 12px;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm)} .pf-rec-l1{font-size:12.5px;color:var(--ink);line-height:1.45;margin-bottom:7px} .pf-rec-l1 .hint{font-size:11.5px} .pf-rec-ok{color:var(--green)} .pf-rec-dot{color:var(--red)} .pf-rec-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .pf-rec-row .hint{font-size:11.5px;line-height:1.35} .pf-rec-audio{height:32px;width:280px;max-width:100%} /* приёмка лида менеджером: принять работу назначителя или отклонить с причиной */ .lc-ck{margin:10px 0;padding:10px 12px;background:var(--panel2);border:1px solid var(--line); border-left:3px solid var(--green);border-radius:var(--r-sm)} .lc-ck.overdue{border-left-color:var(--red)} .lc-ck-h{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px} .lc-ck-l{font-size:12px;color:var(--ink);line-height:1.45;margin-bottom:5px} .lc-ck-l.hint{color:var(--muted);font-size:11.5px} .lc-ck-ok{color:var(--green)} .lc-ck-warn{color:var(--red)} .lc-ck-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:7px} .lc-ck-row .btn{padding:5px 12px;font-size:12px} /* окно исхода звонка назначителя (закрытие задачи «Запрос на показ») */ .pf-oc-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:460px;width:100%; padding:22px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto} .pf-oc-h{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:3px} .pf-oc-addr{font-size:12.5px;color:var(--muted);margin-bottom:12px} .pf-oc-rec{font-size:12px;line-height:1.45;color:var(--muted);background:var(--panel2);border:1px solid var(--line); border-radius:var(--r-sm);padding:8px 11px;margin-bottom:12px} .pf-oc-rec.ok{color:var(--green);background:var(--soft-green);border-color:transparent} .pf-oc-rec.warn{color:var(--ink-red);background:var(--soft-red);border-color:transparent} .pf-oc-opt{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;background:var(--panel2); border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;margin-bottom:8px; font-family:inherit;font-size:13.5px;color:var(--ink);cursor:pointer} .pf-oc-opt:hover{border-color:var(--gold-dim)} .pf-oc-opt.on{border-color:var(--gold);background:var(--soft-gold)} .pf-oc-ico{font-size:17px;line-height:1.2} .pf-oc-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4} .pf-oc-extra:not(:empty){margin:12px 0 4px} .pf-oc-lbl{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px} .pf-oc-extra .txt-inp{width:100%} /* «продавец — риэлтор»: галка при назначенном показе (в оплату такой лид не идёт) */ .pf-oc-chk{display:block;margin-top:10px;font-size:12.5px;color:var(--ink);cursor:pointer;line-height:1.4} .pf-oc-chk input{margin-right:7px;accent-color:var(--gold-fill);vertical-align:middle} .pf-oc-chk .pf-oc-sub{margin-left:22px} /* та же отметка в карточке объекта */ .lc-chk{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--muted);cursor:pointer;line-height:1.4} .lc-chk input{margin-top:2px;accent-color:var(--gold-fill);flex:0 0 auto} .pf-oc-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:14px} /* раздел «Назначение показов»: выработка назначителя */ .ap-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .ap-controls .txt-inp{width:auto} .ap-preset{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm); padding:8px 13px;font-family:inherit;font-size:12.5px;cursor:pointer} .ap-preset:hover{border-color:var(--gold-dim)} .ap-rate{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-left:auto} .ap-rate .txt-inp{width:110px} .ap-period{font-size:12.5px;color:var(--muted);margin-bottom:12px} .ap-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:11px;margin-bottom:22px} .ap-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px} .ap-card.gold{border-color:var(--gold-dim)} .ap-card.warn{border-color:var(--red)} .ap-v{font-family:Oswald,sans-serif;font-size:27px;font-weight:600;color:var(--ink);line-height:1.1} .ap-card.gold .ap-v{color:var(--gold)} .ap-card.warn .ap-v{color:var(--red)} .ap-t{font-size:12.5px;color:var(--ink);margin-top:5px} .ap-s{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.35} .ap-sec{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-weight:700;margin:22px 0 10px} .ap-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)} .ap-tbl{width:100%;border-collapse:collapse;font-size:13px} .ap-tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap} .ap-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top} .ap-tbl tr:last-child td{border-bottom:0} .ap-ok{color:var(--green)} .ap-warn{color:var(--red)} .ap-reasons{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4} .at-fpreset{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:5px 10px;font-size:12px;font-family:inherit;cursor:pointer} .at-fpreset:hover{border-color:var(--gold-dim)} .at-fpreset.on{border-color:var(--gold);color:var(--gold);background:var(--soft-gold)} /* «Поставить задачу» — явная фиксация выбранного срока (не ждём «Выполнить») */ .at-fapply{padding:6px 13px;font-size:12px;white-space:nowrap;margin-left:auto} .at-ftype{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm); padding:5px 8px;font-size:12px;font-family:inherit;cursor:pointer;flex:0 0 auto} .at-ftext{flex:1 1 200px;min-width:140px;background:var(--panel2);border:1px solid var(--line);color:var(--ink); border-radius:var(--r-sm);padding:5px 9px;font-size:12px;font-family:inherit} .at-ftext:focus{outline:none;border-color:var(--gold)} .active-task.open .at-mini{display:none} .active-task .at-mini{display:flex;align-items:center;gap:11px;cursor:pointer} .active-task.open{cursor:default} .active-task .at-clock{width:26px;height:26px;border-radius:50%;border:2px solid var(--green);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto} .active-task .at-clock.overdue{border-color:var(--red);color:var(--red)} .active-task .at-mini-b{flex:1;min-width:0} .active-task .at-mini-l1{font-size:11.5px;color:var(--muted)} .active-task .at-mini-l2{font-size:13.5px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .active-task .at-mini-chev{color:var(--muted);font-size:13px} .active-task .at-row{display:flex;gap:8px;margin-top:8px} .active-task .at-row .txt-inp{flex:1} .active-task .at-btn{padding:6px 12px;font-size:12px;white-space:nowrap} .at-due{position:relative} .at-due-btn{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:6px 11px;font-family:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap} .at-due-btn:hover{border-color:var(--gold-dim)} /* открываем ВВЕРХ от кнопки (задача обычно внизу экрана — иначе строка «Время» внизу меню обрезалась) + внутренний скролл на случай, если меню выше доступного места */ .at-due-menu{position:absolute;bottom:calc(100% + 5px);left:0;z-index:50;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-menu);display:none;max-height:72vh;overflow-y:auto} .at-due-menu.open{display:flex;align-items:stretch} .at-presets{display:flex;flex-direction:column;padding:5px;min-width:168px;border-right:1px solid var(--line)} .at-presets button{text-align:left;background:none;color:var(--ink);padding:8px 12px;border-radius:var(--r-sm);font-family:inherit;font-size:13px;cursor:pointer;white-space:nowrap} .at-presets button:hover{background:var(--panel2);color:var(--gold)} .at-cal{padding:9px 11px;min-width:236px} .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:13px;font-weight:600} .cal-head button{background:none;border:0;color:var(--gold);font-size:17px;cursor:pointer;padding:0 8px} .cal-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px} .cal-wd span{text-align:center;font-size:10px;color:var(--muted)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .cal-grid .cal-e{height:28px} .cal-grid .cal-d{height:28px;background:none;border:0;border-radius:var(--r-sm);color:var(--ink);font-size:12.5px;cursor:pointer;font-family:inherit} .cal-grid .cal-d:hover{background:var(--panel2)} .cal-grid .cal-d.today{color:var(--gold);font-weight:700} .cal-grid .cal-d.sel{background:var(--gold-fill);color:var(--on-gold);font-weight:700} .at-exact{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)} .at-exact label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px} .at-exact input{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:5px 7px;font-family:inherit;font-size:12px;color-scheme:var(--cs)} .at-exact.at-exact-hl{background:var(--soft-gold);border-radius:var(--r-sm);padding:8px;margin-left:-2px;margin-right:-2px} .at-exact.at-exact-hl label{color:var(--gold)} .at-exact-done{margin-left:auto;background:var(--gold-fill);border:none;color:var(--on-gold);border-radius:var(--r-sm);padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer} .at-time-btn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:5px 10px;font-size:12px;cursor:pointer} .at-time-btn:hover{border-color:var(--gold);color:var(--gold)} .at-time-hint{font-size:11px;color:var(--muted)} .prep-sub .txt-ta{margin-bottom:10px} .stat-fill{background:var(--soft-blue);color:var(--blue)} .stage-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .stage-actions .sa-note{font-size:12px;color:var(--muted)} .btn.green{background:var(--green-fill);color:var(--on-green)} .btn.green:hover{background:var(--green-fill-h)} /* легенда статусов */ .status-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px;font-size:12px;color:var(--muted)} .status-legend span{display:inline-flex;align-items:center;gap:6px} .sl-dot{width:9px;height:9px;border-radius:50%} /* фотографии объекта */ .photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px} .photo-add{border:2px dashed var(--line);border-radius:var(--r-sm);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;font-size:12px;gap:4px} .photo-add:hover{border-color:var(--gold-dim);color:var(--gold)} .photo-add .pa-ico{font-size:22px;color:var(--gold)} .photo-thumb{position:relative;aspect-ratio:1;border-radius:var(--r-sm);background-size:cover;background-position:center;border:1px solid var(--line)} .ph-del{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:var(--scrim-soft);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s} .photo-thumb:hover .ph-del{opacity:1} .ph-del:hover{background:var(--red-fill)} .ph-main{position:absolute;top:5px;left:5px;width:22px;height:22px;border-radius:50%;background:var(--scrim-soft);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s} .photo-thumb:hover .ph-main{opacity:1} .ph-main:hover{background:var(--gold-fill);color:var(--on-gold)} .photo-thumb.is-main{border:2px solid var(--gold)} .ph-main-badge{position:absolute;bottom:5px;left:5px;background:var(--gold-fill);color:var(--on-gold);font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.4px} .plan-zone{border:2px dashed var(--line);border-radius:var(--r-sm);padding:24px 18px;text-align:center;cursor:pointer;color:var(--muted);transition:.15s} .plan-zone:hover,.plan-zone.drag{border-color:var(--gold-dim);color:var(--ink)} .plan-zone .mat-ico{font-size:24px;color:var(--gold);margin-bottom:6px} .plan-zone .mat-sub{font-size:11px;margin-top:4px} #planPreview img{max-width:340px;border:1px solid var(--line);border-radius:var(--r-sm)} #planPreview iframe{width:100%;height:300px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff} .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--green-fill);color:var(--on-green);font-weight:600;padding:12px 24px;border-radius:var(--r-sm);z-index:200;box-shadow:var(--sh-pop);font-size:14px} /* модалка предпросмотра договора */ .modal-ov{display:none;position:fixed;inset:0;background:var(--scrim);z-index:300;padding:30px;overflow:auto} .modal-ov.show{display:flex;align-items:flex-start;justify-content:center} .modal-win{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);width:100%;max-width:880px;overflow:hidden;margin:auto} /* Простое окно (.modal) — «Пользователь», «Сменить пароль», «Настройка воронки». Стиля у класса не было вовсе: окно рисовалось БЕЗ ФОНА, и сквозь него просвечивала таблица под низом. На тёмной теме это читалось как «полупрозрачно», на светлой текст сливался полностью (найдено владельцем 18.08.2026). Фон, рамка и внутренние отступы — здесь. */ .modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md); width:100%;max-width:520px;margin:auto;padding:18px 20px;box-shadow:var(--sh-menu)} .modal-bar{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)} .modal-title{font-family:'Oswald';font-size:18px;text-transform:uppercase;color:var(--gold)} .modal-note{padding:12px 20px;font-size:12.5px;color:var(--ink-green);background:var(--soft-green-2);border-bottom:1px solid var(--line)} /* «Мой локатор» */ .loc-switch{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;margin-bottom:6px} .loc-switch input{width:17px;height:17px} .loc-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .loc-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:8px;font-weight:600} .loc-hint{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.45} .loc-districts{display:flex;flex-wrap:wrap;gap:7px} /* шапка редактора: менеджер · локатор · название · кнопки — одной строкой, переносится на узких */ /* В шапке остался один селект «Менеджер» (у обычного агента и его нет) — плашка на всю ширину под него была пустой рамкой. Прижимаем по содержимому. */ .loc-head{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2);width:fit-content;max-width:100%} .loc-head-f{display:flex;flex-direction:column;gap:5px;min-width:190px} .loc-head-f.grow{flex:1;min-width:240px} .loc-head-f label{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600} .loc-head-f select,.loc-head-f input{width:100%} .loc-head-btns{display:flex;gap:8px;margin-left:auto} .loc-head-btns .btn{padding:7px 12px;font-size:12.5px} /* Вкладки локаторов. Раньше здесь стояли выпадашка «Локатор» и поле «Название» — они показывали одно и то же значение дважды, и человек не понимал, зачем оба (владелец, 18.08.2026). Вкладка = локатор: видно сразу все и сколько их. */ .loc-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px} .loc-tab{display:flex;align-items:center;gap:7px;padding:7px 12px;font-size:13px; border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--ink); cursor:pointer;user-select:none;transition:background .12s,border-color .12s} .loc-tab:hover{border-color:var(--gold)} .loc-tab.on{background:var(--gold-fill);border-color:var(--gold);color:var(--on-gold);font-weight:600} .loc-tab .x,.loc-tab .ed{opacity:.55;font-size:14px;line-height:1;padding:0 1px} .loc-tab .x:hover{opacity:1;color:var(--red)} .loc-tab .ed{font-size:12px} .loc-tab .ed:hover{opacity:1;color:var(--gold)} .loc-tab.on .x:hover,.loc-tab.on .ed:hover{color:var(--on-gold)} .loc-tab input{background:transparent;border:none;outline:none;color:inherit;font:inherit; width:14ch;padding:0} .loc-tab-add{border-style:dashed;color:var(--muted)} /* параметры объекта: диапазоны в ряд, каждый со своей подписью */ .loc-params{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px} .loc-param{display:flex;flex-direction:column;gap:6px} .loc-param>label{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600} .loc-range{display:flex;align-items:center;gap:8px} .loc-range input{flex:1;min-width:0} .loc-dash{color:var(--muted)} .loc-flags{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px} .loc-chip{font-size:12.5px;padding:5px 11px;border:1px solid var(--line);border-radius:20px;cursor:pointer;user-select:none;background:var(--panel2);color:var(--ink);transition:.12s} .loc-chip.on{background:var(--gold-fill);border-color:var(--gold);color:var(--on-gold);font-weight:600} #locMap.drawing{cursor:crosshair} #locMap.drawing .leaflet-grab{cursor:crosshair} #locMapBlock.locmap-full{position:fixed;inset:0;z-index:500;background:var(--panel);padding:14px;margin:0;display:flex;flex-direction:column;gap:10px} #locMapBlock.locmap-full #locMap{flex:1;height:auto!important;min-height:0!important;border-radius:var(--r-sm)} .modal-sheet{background:#fff;color:#111;margin:20px;border-radius:var(--r-sm);padding:38px 44px;box-shadow:0 6px 30px rgba(0,0,0,.3)} .modal-sheet *{font-family:'Times New Roman',Georgia,serif} .modal-subhead{margin:18px 0 12px;padding-top:14px;border-top:1px solid var(--line);font-size:12px; text-transform:uppercase;letter-spacing:.5px;color:var(--gold)} .modal-subhead span{text-transform:none;letter-spacing:0;font-size:11px;color:var(--muted);font-weight:400;margin-left:6px} .field-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} /* блок ЕГРН / ЭЦП */ .egrn-memo{display:flex;gap:11px;background:var(--soft-blue);border:1px solid var(--soft-blue);border-radius:var(--r-sm);padding:13px 15px;font-size:12.5px;color:var(--ink-blue);margin:10px 0} .egrn-memo .em-ico{flex-shrink:0;color:var(--blue);font-size:16px} .ecp-file{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font-size:12px;margin-bottom:7px} .ecp-file .ef-tag{margin-left:auto;font-size:10px;color:var(--gold);font-weight:600} /* слоты загрузки документов */ .doc-slot{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1.5px dashed var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:.15s} .doc-slot:hover{border-color:var(--gold-dim)} .doc-slot.loaded{border-style:solid;border-color:var(--green);cursor:default} .doc-slot.drag{border-color:var(--gold);background:var(--soft-gold)} .doc-slot .ds-ico{width:30px;height:30px;border-radius:var(--r-sm);background:var(--soft-gold);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px} .doc-slot.loaded .ds-ico{background:var(--soft-green);color:var(--green)} .doc-slot .ds-name{font-weight:600;font-size:13px} .doc-slot .ds-hint{font-size:11px;color:var(--muted);margin-top:1px;word-break:break-all} .doc-slot .ds-tag{margin-left:auto;font-size:11px;font-weight:600;white-space:nowrap} /* команда по объекту — компактные плашки */ .team-box{display:flex;gap:10px;flex-wrap:wrap} .team-item{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 16px;font-size:13px} .team-item .ti-role{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px} /* строки полной карточки */ .card-rows{display:flex;flex-direction:column} .ck-row{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)} .ck-row:last-child{border-bottom:none} .ck-row label{font-size:12.5px;color:var(--muted)} .ck-row input{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:9px 11px;font-size:13px;font-family:inherit} .ck-row input:focus{outline:none;border-color:var(--gold)} @media(max-width:700px){.ck-row{grid-template-columns:1fr;gap:4px}} /* окно выписки ЕГРН: большой PDF + XML/SIG справа */ .egrn-row{display:grid;grid-template-columns:1.7fr 1fr;gap:12px;margin-bottom:6px} .egrn-box{border:2px dashed var(--line);border-radius:var(--r-sm);padding:15px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;background:var(--panel2)} .egrn-box:hover{border-color:var(--gold-dim)} .egrn-box.loaded{border-style:solid;border-color:var(--green)} .egrn-box.drag,.pass-up.drag,.mat-drop.drag,.photo-add.drag{border-color:var(--gold);background:var(--soft-gold)} .egrn-box .eb-title{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px} .egrn-box .eb-sub{font-size:11px;color:var(--muted);margin-top:4px;word-break:break-all} .egrn-pdf{min-height:160px} .egrn-pdf iframe{width:100%;height:240px;border:1px solid var(--line);border-radius:var(--r-sm);margin-top:10px;background:#fff} .egrn-side{display:flex;flex-direction:column;gap:12px} .egrn-side .egrn-box{flex:1;justify-content:center;align-items:center;text-align:center;min-height:74px} .eb-badge{margin-top:8px;font-size:11px;font-weight:600} /* загрузка паспорта в карточке собственника */ .pass-up{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--line);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;font-size:12px;color:var(--muted);transition:.15s} .pass-up:hover{border-color:var(--gold-dim);color:var(--ink)} .pass-up.loaded{border-style:solid;border-color:var(--green);color:var(--ink)} .pass-up .pu-ico{width:26px;height:26px;border-radius:var(--r-sm);background:var(--soft-gold);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0} .pass-up .pu-tag{margin-left:auto;font-size:10px;font-weight:600} /* ---- Формы карточки / договора ---- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form-grid.one{grid-template-columns:1fr} .ff label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px} .ff label .req{color:var(--red);margin-left:3px} .ff input,.ff select,.ff textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:10px 12px;font-family:inherit;font-size:13px} .ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:var(--gold)} .ff input.filled{border-color:var(--green)} .ff textarea{min-height:80px;resize:vertical} .owner-card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;margin-bottom:12px;position:relative} .owner-card .o-del{position:absolute;top:12px;right:12px;background:none;color:var(--muted);font-size:16px} .owner-card .o-del:hover{color:var(--red)} .owner-num{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-weight:600} .warn{background:var(--soft-red);border:1px solid var(--soft-red);border-radius:var(--r-sm);padding:13px 16px;font-size:12.5px;color:var(--ink-red);margin-top:14px} .warn b{color:var(--ink-red)} .warn ul{margin:6px 0 0 18px} .warn li{margin:3px 0} .status-toggle{display:flex;gap:8px} .status-toggle button{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--muted);padding:10px;border-radius:var(--r-sm);font-size:13px;font-weight:600} .status-toggle button.on-signed{border-color:var(--green);color:var(--green);background:var(--soft-green)} .status-toggle button.on-unsigned{border-color:var(--gold);color:var(--gold);background:var(--soft-gold)} /* Полная карточка объекта (формат сайта) */ .objweb{background:#fbfaf6;color:var(--on-gold);border-radius:var(--r-md);overflow:hidden;font-family:'Inter'} .objweb .ow-hero{background:linear-gradient(135deg,#2a2f3a,#1d212a);color:#fff;padding:26px 30px} .objweb .ow-hero .ow-price{font-family:'Oswald';font-size:32px;color:var(--gold)} .objweb .ow-hero h2{font-size:20px;margin:4px 0 0;color:#fff;text-transform:none} .objweb .ow-body{padding:24px 30px} .objweb .ow-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px} .objweb .ow-spec{background:#fff;border:1px solid #e7e3d8;border-radius:var(--r-sm);padding:13px;text-align:center} .objweb .ow-spec .v{font-family:'Oswald';font-size:20px;color:var(--on-gold)} .objweb .ow-spec .k{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-top:2px} .objweb h3{color:var(--on-gold);font-size:14px;text-transform:uppercase;letter-spacing:.5px;margin:18px 0 8px;border-bottom:2px solid var(--gold);display:inline-block;padding-bottom:3px} .objweb .ow-kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #ece8dd;font-size:13px;color:#333} .objweb .ow-kv span{color:#888} @media(max-width:900px){ .home-top{grid-template-columns:1fr}.gauges{grid-template-columns:repeat(3,1fr)} .side{width:64px}.logo .sub,.nav button span.lbl,.side-foot{display:none} /* меню сузилось до иконок — переключатель темы остаётся, но одной кнопкой */ .side-theme{justify-content:center;padding:10px 0 14px} .side-theme .theme-sw{display:none} /* Тумблер приёма лидов — как и переключатель темы: на узкой панели остаётся точкой. Без этого он держал подпись «Принимаю лиды» и padding 20px и вылезал за 64px. */ .side-intake{padding:10px 6px 0;display:flex;justify-content:center} .side-intake .intake-sw{padding:7px 9px} .side-intake .intake-sw .lbl{display:none} .theme-one{display:inline-flex} .nav button{justify-content:center;padding:14px 0}.main{margin-left:64px;padding:18px} .obj-grid,.two-col{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr} } /* Единый читабельный календарь (кастомный date-picker поверх всех полей дат) */ input[type=date][data-dp]{cursor:pointer} .dp-pop{position:fixed;z-index:99999;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;box-shadow:var(--sh-menu);width:300px;font-family:inherit;color:var(--ink)} .dp-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .dp-hd b{font-size:16px;color:var(--ink);font-weight:700;letter-spacing:.3px} .dp-nav{background:var(--panel);border:1px solid var(--line);color:var(--gold);font-size:18px;cursor:pointer;width:30px;height:30px;border-radius:var(--r-sm);line-height:1;display:flex;align-items:center;justify-content:center} .dp-nav:hover{background:var(--line)} .dp-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:6px} .dp-wk span{text-align:center;font-size:11px;color:var(--muted);padding:2px 0;text-transform:uppercase;letter-spacing:.5px} .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .dp-d{text-align:center;padding:8px 0;font-size:13.5px;color:var(--ink);border-radius:var(--r-sm);cursor:pointer;user-select:none} .dp-d:hover{background:var(--soft-gold)} .dp-e{visibility:hidden;cursor:default} .dp-today{outline:1.5px solid var(--gold);outline-offset:-1.5px} .dp-sel{background:var(--gold-fill);color:var(--on-gold);font-weight:700} .dp-sel:hover{background:var(--gold-fill)} .dp-ft{display:flex;justify-content:space-between;margin-top:10px;border-top:1px solid var(--line);padding-top:10px} .dp-tbtn{background:none;border:none;color:var(--gold);font-size:12.5px;cursor:pointer;padding:4px 6px;border-radius:var(--r-sm)} .dp-tbtn:hover{background:var(--line)} /* ─── блок 2/2 ─── */ #tasks .tk-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px} #tasks .tk-head h1{margin:0 6px 0 0} #tasks .tk-modes,#tasks .tk-calsub{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} #tasks .tk-mode,#tasks .tk-calbtn{background:transparent;border:none;color:var(--muted);padding:7px 14px;font-size:12.5px;cursor:pointer;font-family:inherit} #tasks .tk-mode:hover,#tasks .tk-calbtn:hover{color:var(--ink)} #tasks .tk-mode.active,#tasks .tk-calbtn.active{background:var(--gold-fill);color:var(--on-gold);font-weight:600} #tasks #tkAgent{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:7px 10px;font-size:12.5px;font-family:inherit} #tasks .tk-count{color:var(--muted);font-size:12.5px;margin-left:auto} #tasks .tk-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start} #tasks .tk-col{flex:0 0 262px;min-width:262px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} #tasks .tk-colhead{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink)} #tasks .tk-colhead .tk-cnt{color:var(--muted);font-size:12px;background:var(--panel2);border-radius:20px;padding:1px 8px} #tasks .tk-colbody{padding:10px;display:flex;flex-direction:column;gap:9px;min-height:40px} #tasks .tk-card{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--gold-dim);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;transition:border-color .12s} #tasks .tk-card:hover{border-color:var(--gold)} #tasks .tk-card.st-overdue{border-left-color:var(--overdue)} #tasks .tk-card.st-today{border-left-color:var(--ok)} #tasks .tk-card.st-future{border-left-color:var(--info)} #tasks .tk-c-title{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #tasks .tk-c-when{font-size:11.5px;color:var(--muted);margin-top:4px} #tasks .tk-c-text{font-size:12px;color:var(--ink);margin-top:4px;line-height:1.4;white-space:pre-wrap} #tasks .tk-c-foot{font-size:11px;color:var(--gold-dim);margin-top:6px} #tasks .tk-empty{color:var(--muted);font-size:12px;text-align:center;padding:8px 0} #tasks .tk-empty2{color:var(--muted);text-align:center;padding:26px} #tasks .tk-listwrap{padding:0;overflow:auto} #tasks table.tk-list{width:100%;border-collapse:collapse} #tasks table.tk-list th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap} #tasks table.tk-list td{padding:11px 14px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--inset-line)} #tasks table.tk-list tbody tr{cursor:pointer} #tasks table.tk-list tbody tr:hover{background:var(--panel2)} #tasks table.tk-list tr.st-overdue td:nth-child(2){color:var(--overdue)} #tasks table.tk-list tr.st-today td:nth-child(2){color:var(--ok)} #tasks .tk-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--gold-dim);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:12px} #tasks table.tk-list tr.tk-selrow{background:var(--soft-gold)} #tasks .tk-listfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:12.5px} #tasks .tk-pgwrap{display:flex;align-items:center;gap:4px;flex-wrap:wrap} #tasks .tk-pg{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:5px 10px;font-size:12px;cursor:pointer} #tasks .tk-pg.on{background:var(--gold-fill);color:var(--on-gold);border-color:var(--gold);font-weight:700} #tasks .tk-calnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:12px;font-size:14px;color:var(--ink)} #tasks .tk-calnav>span{text-transform:capitalize;min-width:220px;text-align:center} #tasks .tk-calnav button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:5px 11px;cursor:pointer;font-size:14px} #tasks .tk-calnav button:hover{border-color:var(--gold)} #tasks .tk-calnav .tk-today{font-size:12px} #tasks .tk-daylist{display:flex;flex-direction:column} #tasks .tk-dayrow{display:flex;gap:14px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--inset-line);cursor:pointer} #tasks .tk-dayrow:hover{background:var(--panel2)} #tasks .tk-daytime{flex:0 0 46px;color:var(--muted);font-size:12.5px} #tasks .tk-daymain{flex:1;font-size:13px;color:var(--ink)} #tasks .tk-dayag{color:var(--gold-dim);font-size:11.5px} #tasks .tk-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} #tasks .tk-wcol{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;min-height:120px} #tasks .tk-wcol.today{border-color:var(--gold)} #tasks .tk-wch{padding:8px;font-size:12px;color:var(--ink);border-bottom:1px solid var(--line);text-align:center} #tasks .tk-wbody{padding:6px;display:flex;flex-direction:column;gap:5px} #tasks .tk-chip,#tasks .tk-mchip{border-left:3px solid var(--gold-dim);background:var(--panel2);border-radius:var(--r-sm);padding:5px 7px;font-size:11px;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #tasks .tk-chip:hover,#tasks .tk-mchip:hover{background:var(--line)} #tasks .tk-chip.st-overdue,#tasks .tk-mchip.st-overdue{border-left-color:var(--overdue)} #tasks .tk-chip.st-today,#tasks .tk-mchip.st-today{border-left-color:var(--ok)} #tasks .tk-month{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} #tasks .tk-mwds{display:grid;grid-template-columns:repeat(7,1fr);background:var(--panel)} #tasks .tk-mwd{padding:8px;text-align:center;font-size:11px;color:var(--muted);text-transform:uppercase} #tasks .tk-mgrid{display:grid;grid-template-columns:repeat(7,1fr)} #tasks .tk-mcell{min-height:96px;border-top:1px solid var(--line);border-left:1px solid var(--line);padding:5px;display:flex;flex-direction:column;gap:3px} #tasks .tk-mcell:nth-child(7n+1){border-left:none} #tasks .tk-mcell.other{opacity:.4} #tasks .tk-mcell.today{background:var(--soft-gold-2)} #tasks .tk-mdate{font-size:12px;color:var(--muted);text-align:right} #tasks .tk-mchip{font-size:10.5px;padding:3px 6px} #tasks .tk-mmore{font-size:10px;color:var(--muted);padding-left:4px} /* ЦСИ · окно «Запрос номера» (гейт подменного номера Авито). Блокирующее: закрыть можно только кнопками, поэтому оно обязано пролезать на любой экран — отсюда dvh, внутренний скролл и z-index выше таб-бара (#mobTabbar 9600), иначе на телефоне кнопки уходят под панель. */ .csi-gate-ov{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center; background:var(--scrim);padding:12px;overflow:auto;overscroll-behavior:contain} .csi-gate-win{background:var(--panel);border:2px solid var(--gold);border-radius:18px;max-width:560px; width:100%;padding:22px;box-shadow:var(--sh-menu);margin:auto;max-height:94dvh;overflow:auto} .csi-gate-win .btn,.csi-gate-win a[target="_blank"]{touch-action:manipulation} /* ═══════════ МОБИЛЬНАЯ АДАПТАЦИЯ (таб-бар как в amoCRM, воронка со свайпом столбцов) ═══════════ */ /* Нижний таб-бар: Сообщения · Воронки · ➕ · Задачи · Кабинет. На десктопе скрыт. */ #mobTabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:9600;background:var(--panel);border-top:1px solid var(--line);padding:9px 4px calc(9px + env(safe-area-inset-bottom));justify-content:space-around;align-items:flex-start} #mobTabbar button{background:none;border:none;color:var(--muted);font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 6px;cursor:pointer;flex:1;min-width:0} #mobTabbar button.active{color:var(--gold)} #mobTabbar .mt-ico{position:relative;font-size:21px;line-height:1} #mobTabbar .mt-lbl{font-size:12px;letter-spacing:0;line-height:1.15;white-space:nowrap;overflow:visible} #mobTabbar .mt-badge{position:absolute;top:-6px;right:-14px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-sm);background:var(--badge);color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center} #mobTabbar .mt-plus{flex:0 0 auto;width:52px;height:52px;margin-top:-22px;border-radius:50%;background:var(--gold-fill);color:var(--on-gold);font-size:28px;font-weight:600;line-height:1;box-shadow:var(--sh-pop);display:flex;align-items:center;justify-content:center} /* До входа таб-бара нет: форма входа лежит под z-index 500, панель — под 9600, и кнопки вели в кабинет, куда человек ещё не вошёл (ТЗ 25). Класс ставит mtAuthSync (js/16_mobile.js). */ body.uip-noauth #mobTabbar{display:none!important} /* Чипсы столбцов воронки и строка «Регламент» в кабинете — только на мобилке */ .pf-stagechips{display:none} #pfColBtn{display:none} /* кнопка выбора столбца — только на мобилке (см. media ≤768) */ .mob-regrow{display:none} /* Кнопка «Столбец» воронки и «назад» в мессенджере — только на мобилке */ .gc-back{display:none} @media(max-width:768px){ /* каркас: боковое меню прячем, место — контенту; снизу отступ под таб-бар */ .side{display:none !important} .main,body.nav-collapsed .main{margin-left:0 !important;padding:14px 12px calc(86px + env(safe-area-inset-bottom))} #mobTabbar{display:flex} .intake-resumed{right:10px;left:10px;max-width:none;bottom:calc(78px + env(safe-area-inset-bottom))} .topbar{flex-wrap:wrap;gap:10px} .topbar h1{font-size:22px} /* ── ЦСИ · окно «Запрос номера»: край-в-край, крупные тач-цели, без iOS-зума ── */ .csi-gate-ov{padding:8px 8px calc(8px + env(safe-area-inset-bottom))} .csi-gate-win{padding:18px 14px calc(18px + env(safe-area-inset-bottom));border-radius:16px;max-height:96dvh} .csi-gate-win input{font-size:16px !important} /* <16px → iOS зумит страницу при фокусе */ .csi-gate-win #csiGatePhone{font-size:24px !important} .csi-gate-win .btn{min-height:44px;font-size:14px} /* тач-цель 44px */ .csi-gate-win a[target="_blank"]{min-height:48px} /* три нижние кнопки (только сообщения / объявление снято / закрыть) — в столбик, не в мелкий ряд */ .csi-gate-win .csi-gate-acts{flex-direction:column;align-items:stretch} .csi-gate-win .csi-gate-acts .btn{width:100%} /* строка «Регламент аукциона» в кабинете (боковое меню с регламентами скрыто) */ .mob-regrow{display:flex;align-items:center;gap:8px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;padding:13px 15px;margin-bottom:14px;cursor:pointer} /* ── Воронка: один столбец на экран, свайп между столбцами (scroll-snap) ── */ #platform .pf-head{gap:8px} #platform .pf-head h1{display:none} #platform .pf-search{flex:1 1 120px;min-width:100px} /* кнопки действий шапки (Карта · +Объект · Фильтры) — ровный ряд равной ширины */ #platform .pf-head .pf-hbtn{flex:1 1 0;min-width:92px;justify-content:center;text-align:center} /* стрелка «фильтры» в поле поиска — на мобилке крупнее (тач-цель) */ .pf-filttog{padding:8px 10px} /* панель фильтров свёрнута по умолчанию; раскрывается вертикально по тапу «Фильтры». Так первый экран воронки — сразу объекты, а не 4 ряда контролов (формат приложений) */ #platform .pf-filters{display:none} #platform .pf-filters.open{display:flex;flex-direction:column;align-items:stretch;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin-bottom:10px} #platform .pf-filters.open>*{flex:0 0 auto;width:100%} #platform .pf-filters.open .pf-fsep{display:none} #platform .pf-filters.open .pf-flabel{color:var(--gold);font-weight:600} #platform .pf-filters.open .pf-frange{display:flex;flex-wrap:wrap;align-items:center;gap:6px} #platform .pf-filters.open .pf-frange input{flex:1 1 90px;min-width:0;width:auto} #platform .pf-filters.open select,#platform .pf-filters.open .btn{width:100%} /* кнопки-переключатели столбцов больше не нужны — доп.столбцы в мобильном списке столбцов */ #pfClosedBtn,#pfDefBtn,#pfSuccBtn{display:none !important} /* селектор агента и «Карта» переехали в фильтры — во всю ширину панели */ #platform .pf-filters.open #pfScope{display:block;width:100%;margin:0} #platform .pf-filters.open #pfScope select{width:100%} #platform .pf-filters.open #pfMapToggle{width:100%} /* Простой рабочий свайп: доска — нативный горизонтальный скролл со snap, столбцы во всю ширину, один свайп = один столбец (snap-stop). Вертикально скроллит страница. overscroll-behavior гасит «резинку», чтобы диагональный свайп меньше тянул страницу. */ /* Мобилка: ОДИН столбец на экран, БЕЗ горизонтального свайпа (на iOS он дёргается и мешал скроллить/выбирать). Переключение столбцов — кнопкой #pfColBtn (тап → список). */ #platform .board{overflow-x:hidden;overflow-y:auto;gap:0;padding-bottom:8px;scroll-snap-type:none;-webkit-overflow-scrolling:touch} .pf-arrow{display:none !important} /* на телефоне столбцы листают чипсами */ #platformBoard .pf-col{display:none;flex:0 0 100%;min-width:100%;max-width:100%} #platformBoard .pf-col.mob-active{display:flex} /* виден только выбранный столбец */ #platformBoard .pf-col .col-head{touch-action:auto} /* тап по шапке работает */ #platformBoard .pf-col .col-body{touch-action:pan-y} /* карточки — вертикальный скролл */ #platformBoard .col-head{cursor:pointer;position:relative} .pf-minimap{display:none!important} /* на мобилке навигация по столбцам — кнопкой #pfColBtn */ /* кнопка выбора столбца — только на мобилке, над доской */ #platform #pfColBtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-bottom:10px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);color:var(--gold);font-family:'Oswald',inherit;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;cursor:pointer} #platform #pfColBtn.on{border-color:var(--gold)} .pf-stagechips{display:none} /* список столбцов — ПОЛНОЭКРАННЫЙ оверлей поверх доски (чтобы удобно выбрать столбец) */ .pf-stagechips.mob-open{display:flex;flex-direction:column;gap:8px;position:fixed;inset:0;z-index:9700;background:var(--bg);padding:14px 14px calc(16px + env(safe-area-inset-bottom));margin:0;border:none;border-radius:0;overflow-y:auto;-webkit-overflow-scrolling:touch} .pf-stagechips.mob-open .sc-head{position:sticky;top:0;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 10px;margin-bottom:2px;border-bottom:1px solid var(--line)} .pf-stagechips.mob-open .sc-head b{font-family:'Oswald';font-size:17px;text-transform:uppercase;color:var(--gold);letter-spacing:.3px} .pf-stagechips.mob-open .sc-head button{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);width:42px;height:42px;font-size:18px;flex:0 0 auto} .pf-stagechips.mob-open .sc{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;padding:12px 14px;cursor:pointer} .pf-stagechips.mob-open .sc .sc-cnt{background:var(--panel);border-radius:var(--r-md);padding:1px 9px;font-size:12px;color:var(--muted)} .pf-stagechips.mob-open .sc.active{border-color:var(--gold);color:var(--gold)} .pf-stagechips.mob-open .sc-ttl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pf-stagechips.mob-open .sc-right{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto} /* огонёчки задач: зелёный — есть задача, красный — просрочено */ .pf-stagechips.mob-open .sc-tk{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:19px;border-radius:10px;font-size:11px;font-weight:700;padding:0 6px} .pf-stagechips.mob-open .sc-tk-g{background:var(--soft-ok);color:var(--ok)} .pf-stagechips.mob-open .sc-tk-r{background:var(--soft-orange);color:var(--overdue)} /* разделитель: рабочие столбцы ↑ / менее приоритетные (Отложенный спрос) ↓ */ .pf-stagechips.mob-open .sc-sep{display:flex;align-items:center;gap:8px;margin:4px 2px 2px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px} .pf-stagechips.mob-open .sc-sep::before,.pf-stagechips.mob-open .sc-sep::after{content:'';flex:1;height:1px;background:var(--line)} /* ── Мессенджер: одна панель за раз (список ИЛИ переписка), как в приложениях ── */ #gcFab{display:none !important} /* панель СТОИТ НАД таб-баром (bottom = высота таб-бара), иначе поле ввода уходит под него; таб-бар остаётся видимым и рабочим — тап по вкладке закрывает чаты (mtGo→gcClose) */ #gcPanel{left:0 !important;right:0 !important;top:0 !important;bottom:calc(62px + env(safe-area-inset-bottom)) !important;width:100% !important;height:auto !important;border-radius:0 !important;border:none !important} /* обе колонки на всю ширину */ #gcPanel .gc-list-pane,#gcPanel .gc-thread-pane{flex:0 0 100% !important;width:100% !important;min-width:0;border-right:none} /* по умолчанию виден список, переписка скрыта; при .chat-open — наоборот. !important — перебиваем инлайновый display:flex у панелей в index.html */ #gcPanel .gc-thread-pane{display:none !important} #gcPanel.chat-open .gc-list-pane{display:none !important} #gcPanel.chat-open .gc-thread-pane{display:flex !important} /* кнопка «назад к чатам» видна только на мобилке внутри переписки */ .gc-back{display:inline-flex;align-items:center;gap:6px} /* ── Задачи: доска колонок тоже листается по одной ── */ #tasks .tk-board{scroll-snap-type:x mandatory} #tasks .tk-col{flex:0 0 calc(100vw - 40px);min-width:calc(100vw - 40px);scroll-snap-align:center} /* карточка воронки: шапка переносится, без горизонтального скролла на узких экранах */ #listingModal .modal-bar{flex-wrap:wrap;gap:8px;padding:10px 12px} #listingModal .modal-bar .lc-actions{margin-left:0 !important;width:100%;flex-wrap:wrap} #listingModal .modal-bar .lc-actions .btn{flex:1 1 auto;padding:8px 10px;font-size:12px;white-space:nowrap} /* карточка на мобилке: второстепенные поля свёрнуты под «Показать остальное» (быстрее до задачи) */ #listingModal .lc-more-btn{display:block} #listingModal .lc-more{display:none} #listingModal .lc-more.open{display:block} /* полная карточка: этапы-навигатор горизонтальной лентой */ .ao-stagenav{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap} .ao-navitem{flex:0 0 auto} /* ═══ ГЛОБАЛЬНЫЕ мобильные правила (crm-mobile skill) ═══ */ /* Формы: поля ≥16px, чтобы iOS Safari не зумил страницу при фокусе */ input,select,textarea,.field input,.field select,.field textarea,.lf-field input,.lf-field textarea,.pd{font-size:16px} /* двухколоночные поля (паспорт и пр.) → одна колонка */ .field-2col{grid-template-columns:1fr} /* Тач-цели: без 300ms задержки тапа; мелкие кнопки-крестики не ниже 44px */ button,.btn,a[href],.loc-chip,.obj-tabs button{touch-action:manipulation} .btn.ghost{min-height:44px;display:inline-flex;align-items:center;justify-content:center} /* Модалки → bottom-sheet во весь экран, скролл внутри окна, шапка липкая. z-index ВЫШЕ таб-бара (#mobTabbar=9600): иначе низ карточки — композер примечания/задачи и кнопка «Сохранить» — уходит ПОД таб-бар и недоступен. */ .modal-ov{padding:0;z-index:9700} .modal-ov.show{align-items:flex-end} .modal-win,.modal{max-width:100%!important;width:100%!important;margin:0;border-radius:16px 16px 0 0!important;max-height:94dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(env(safe-area-inset-bottom) + 12px)} .modal-bar{position:sticky;top:0;background:var(--panel);z-index:3} /* Таблицы (Статистика/Пользователи/Бэкапы): горизонтальный скролл вместо ломки вёрстки. !important перебивает инлайновый overflow:hidden у .panel-box в index.html */ .panel-box{overflow-x:auto!important;-webkit-overflow-scrolling:touch} #agencyManagers,#agencyTotals{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Мои объекты: вкладки статусов листаются лентой, не переносятся (иначе боковой скролл страницы) */ .obj-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px} .obj-tabs::-webkit-scrollbar{display:none} .obj-tabs button{flex:0 0 auto} /* Кабинет: гейджи и мини-плитки дохода — не по 3 в ряд на узком экране */ .gauges,.mini-kpis,.income-grid{grid-template-columns:repeat(2,1fr)} /* Маркетинг-план: сводка (4 плитки) — длинные подписи давали боковой скролл; в 2 ряда */ .mk-summary{grid-template-columns:repeat(2,1fr)} /* Регламенты: список 340px + контент → контент сжимался до ~30px. Стопкой: список над текстом */ .reg-grid{grid-template-columns:1fr} /* Модалки: кнопки действий в шапке переносятся (договор, закрытые и пр.) */ .modal-bar{flex-wrap:wrap} .modal-bar .lc-actions,.modal-bar>div:last-child{flex-wrap:wrap} /* А4-превью договора: без огромных полей и во всю ширину, читаемо на телефоне */ .modal-sheet{margin:0!important;padding:20px 16px!important;border-radius:0!important;width:100%;box-sizing:border-box} /* Партнёры: тулбар переносится, широкая таблица уезжает в свой скролл */ .pf-toolbar,.pf-seg{flex-wrap:wrap} /* Пустой столбец воронки на телефоне: подсказка вместо голого экрана */ .pf-mob-empty{color:var(--muted);font-size:12.5px;line-height:1.45;padding:14px 10px;text-align:center} .pr-table-wrap,#partnersGrid{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Задачи · «Неделя»: 7 колонок-карточек листаются лентой, а не давятся в 55px */ #tasks .tk-week{grid-auto-flow:column;grid-auto-columns:78vw;grid-template-columns:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory} #tasks .tk-wcol{scroll-snap-align:center} /* Задачи · «Месяц»: компактнее, чтобы месяц влезал по высоте */ #tasks .tk-mcell{min-height:62px;padding:3px} #tasks .tk-mdate{font-size:11px} #tasks .tk-mwd{padding:6px 2px;font-size:10px} } /* ═══ Тач-цели на телефоне (ТЗ 02, 17.08.2026) ═══ Замер вёрстки ловил кнопки 29×24 и 43×24: в такую цель пальцем на ходу не попасть, человек жмёт по второму-третьему разу и попадает в соседнюю. Правило одно на всё: на ширине телефона любая кнопка — не мельче 40px по обеим сторонам. Растёт ЗОНА КАСАНИЯ, а не сама иконка: размер шрифта и значка не трогаем, добавляем поле вокруг. Порог 40 закреплён в _ci/layout_probe.mjs (константа ТАЧ) — проверка не даст ему сползти. */ @media(max-width:500px){ button,.btn{min-height:40px;min-width:40px} /* Ряды кнопок, которые делят ширину экрана (сегменты «Доска · Список · Календарь», вкладки статусов объектов): им нужна высота, но не своя ширина — иначе ряд перестанет сжиматься и уедет за край. */ .pf-seg button,.obj-tabs button,.mob-regrow{min-width:0} /* Кружок «+» в таб-баре уже 52px и центрируется своими правилами — не трогаем. */ #mobTabbar .mt-plus{min-height:52px;min-width:52px} } /* Узкий телефон: гейджи в один столбец */ @media(max-width:430px){ .gauges,.mini-kpis,.income-grid{grid-template-columns:1fr} } /* ── Задачи карточки: их может быть несколько (crm_tasks) ─────────────────────────── */ .mt-box{margin:8px 0 4px} .mt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em;margin-bottom:6px} .mt-add{background:transparent;border:1px solid var(--line);border-radius:8px;padding:4px 9px;color:var(--gold);font-size:12px;cursor:pointer} .mt-add:hover{border-color:var(--gold)} .mt-empty{font-size:12px;color:var(--muted);padding:4px 0 2px} .mt-row{display:flex;align-items:center;gap:8px;padding:7px 9px;margin-bottom:5px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)} .mt-row.st-overdue{border-color:var(--red)} .mt-row.st-today{border-color:var(--gold)} .mt-ico{flex:0 0 auto;font-size:14px} .mt-body{flex:1 1 auto;min-width:0} .mt-txt{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mt-meta{font-size:11.5px;color:var(--muted)} .mt-btn{flex:0 0 auto;background:transparent;border:1px solid var(--line);border-radius:7px;width:26px;height:26px;color:var(--ink);cursor:pointer;font-size:12px} .mt-btn:hover{border-color:var(--gold);color:var(--gold)} .mt-btn.mt-del:hover{border-color:var(--red);color:var(--red)} .mt-form{border:1px solid var(--gold);border-radius:10px;padding:9px;margin-top:6px;background:var(--panel)} .mt-form-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:6px} .mt-form input,.mt-form select{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;color:var(--ink);font-size:13px;color-scheme:var(--cs)} .mt-form input#mtText{width:100%;box-sizing:border-box;margin-bottom:6px} .mt-save{background:var(--gold-fill);border-color:var(--gold);color:var(--on-gold);font-weight:600} /* ── Поиск по всей базе: окно по ⌘K ──────────────────────────────────────────────── */ /* Цвета только токенами: окно живёт поверх кабинета и обязано читаться в обеих темах. */ .uk-pal{position:fixed;inset:0;z-index:600;display:none;align-items:flex-start;justify-content:center; background:rgba(0,0,0,.45);backdrop-filter:blur(2px);padding:12vh 16px 16px} .uk-pal-box{width:100%;max-width:640px;background:var(--panel);border:1px solid var(--line); border-radius:var(--r-md);box-shadow:var(--sh-pop);overflow:hidden;display:flex;flex-direction:column;max-height:72vh} .uk-pal-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)} .uk-pal-ico{font-size:15px;opacity:.75} .uk-pal-input{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:none;color:var(--ink); font-size:16px;font-family:inherit} .uk-pal-input::placeholder{color:var(--muted)} .uk-pal-esc{flex:0 0 auto;font-size:11px;color:var(--muted);border:1px solid var(--line); border-radius:6px;padding:2px 7px;text-transform:uppercase;letter-spacing:.04em} .uk-pal-list{overflow:auto;padding:6px;flex:1 1 auto} .uk-pal-sec{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em; font-weight:700;padding:10px 8px 5px} .uk-pal-item{display:flex;align-items:baseline;gap:9px;padding:8px 9px;border-radius:var(--r-sm); cursor:pointer;border:1px solid transparent} .uk-pal-item.on{background:var(--panel2);border-color:var(--gold)} .uk-pal-badge{flex:0 0 auto;font-size:11px;color:var(--gold);background:var(--sunken); border-radius:6px;padding:2px 7px;font-variant-numeric:tabular-nums} .uk-pal-badge.lead{color:var(--teal)} .uk-pal-title{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .uk-pal-sub{flex:0 0 auto;max-width:45%;font-size:11.5px;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .uk-pal-empty{padding:22px 12px;text-align:center;font-size:13px;color:var(--muted)} .uk-pal-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line); background:var(--panel2);font-size:11.5px;color:var(--muted)} .uk-pal-foot b{color:var(--ink);font-weight:600} @media(max-width:768px){ .uk-pal{padding:6vh 10px 10px} .uk-pal-box{max-height:82vh} .uk-pal-sub{display:none} .uk-pal-foot{display:none} } /* ══════════ Скелетоны загрузки ══════════ Пока данные едут с сервера, показываем форму будущей таблицы, а не пустую панель и не слово «Загрузка…»: пустой экран читается как «ничего нет», а текст не даёт понять, сколько ждать. Цвета — только токены, поэтому скелетон живёт в обеих темах. */ .skel{display:block;height:11px;border-radius:6px;background:var(--panel2); background-image:linear-gradient(90deg,transparent 0%,var(--line) 45%,transparent 90%); background-size:220% 100%;background-repeat:no-repeat;animation:skelShine 1.25s ease-in-out infinite} .skel+.skel{margin-top:6px} @keyframes skelShine{0%{background-position:120% 0}100%{background-position:-120% 0}} /* Кнопка на время запроса: подпись меняет вызывающий код, здесь — вид «занято» */ .btn.busy{opacity:.65;cursor:progress} @media(prefers-reduced-motion:reduce){ .skel{animation:none;background-image:none} } /* ================== ВИД СПИСКОМ У ВОРОНКИ (js/26_list-view.js) ============================== Тот же набор карточек, что на доске, но таблицей: строка = менеджер × карточка, одна общая таблица, отбор — воронками в ЗАГОЛОВКАХ столбцов. Цвета — ТОЛЬКО токенами (зашитый hex уже один раз провалил светлую тему). Переключение доска ⇄ список идёт классом body.pl-list-mode, поэтому элементы доски прячутся тут, а не inline-стилями: при выходе из списка они возвращаются сами. Плотность важна: на полусотне карточек каждая лишняя строка в ячейке съедает пол-экрана, поэтому подписи короткие, объект и текст задачи обрезаются, а подробности — в подсказке. */ #platformList{display:none} body.pl-list-mode #platformList{display:block} body.pl-list-mode #platformBoard, body.pl-list-mode #pfColBtn, body.pl-list-mode #pfStageChips, body.pl-list-mode #pfMinimap, body.pl-list-mode #pfArchBtn, body.pl-list-mode #pfCsiArchBtn, body.pl-list-mode #pfColOrderReset, body.pl-list-mode #pfCfgBtn, body.pl-list-mode #pfCsiAddColBtn, body.pl-list-mode #pfMapToggle, body.pl-list-mode #pfMapWrap{display:none !important} /* 40×40 — норма касания: кнопками доска/список пользуются пальцем чаще прочих, а они были 37×40 (ТЗ 25). Размер задан ЗДЕСЬ, а не в .pf-seg button: то правило перебивается этим по специфичности, и на ширинах ≤500px его гасит сброс min-width:0. */ #pfViewSeg button{padding:7px 11px;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)} #pfViewSeg button.active{color:var(--gold)} .pl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px} .pl-total{color:var(--muted);font-size:13px} .pl-total b{color:var(--ink)} .pl-headbtns{display:flex;gap:8px;flex-wrap:wrap} .pl-btn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:6px 10px;font-size:12.5px;cursor:pointer} .pl-btn.on{background:var(--soft-gold);border-color:var(--gold);color:var(--gold)} .pl-empty{padding:34px;text-align:center;color:var(--muted)} /* отбор: воронка в шапке столбца (десктоп) и полоса кнопок над карточками (телефон) */ .pl-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px} .pl-fwrap{position:relative;display:inline-flex} .pl-fbtn{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line); border-radius:var(--r-sm);padding:6px 10px;color:var(--ink);font-size:12.5px;cursor:pointer;white-space:nowrap} .pl-fbtn b{color:var(--muted);font-weight:600} .pl-fbtn.on{border-color:var(--gold)} .pl-fbtn.on b{color:var(--gold)} .pl-fbtn:hover{background:var(--panel3)} .pl-freset{color:var(--gold)} .pl-fcar{color:var(--muted)} .pl-fpanel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;background:var(--panel);border:1px solid var(--line); border-radius:10px;padding:4px;box-shadow:0 12px 30px rgba(0,0,0,.45);min-width:230px;max-height:340px;overflow:auto; text-transform:none;letter-spacing:0;cursor:default} .pl-fpanel.pl-fright{left:auto;right:0} .pl-frow{display:flex;align-items:center;gap:8px;padding:5px 8px;font-size:12.5px;cursor:pointer;white-space:nowrap;border-radius:6px} .pl-frow:hover{background:var(--panel2)} .pl-frow input{width:14px;height:14px;accent-color:var(--gold);cursor:pointer} .pl-ftext{flex:1} .pl-fnum{color:var(--muted);font-size:11.5px} .pl-fempty{padding:8px 10px;color:var(--muted);font-size:12px} /* overflow:hidden тут был ради скруглённых углов таблицы, но он же срезал панель отбора, выпадающую из шапки столбца, — углы важнее не бывают. */ .pl-group{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md,10px);margin-bottom:10px} .pl-ghead{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--panel2);cursor:pointer;flex-wrap:wrap} .pl-ghead:hover{background:var(--panel3)} .pl-caret{color:var(--gold);font-size:12px;width:12px} .pl-gname{font-weight:700;font-size:13.5px} .pl-gmeta{color:var(--muted);font-size:12px} /* overflow тут быть НЕ ДОЛЖНО: колонки заданы в процентах (table-layout:fixed), скролл не нужен, а любой overflow обрезал бы выпадающую панель отбора, которая висит от заголовка столбца. */ .pl-tablewrap{overflow:visible} table.pl-table{width:100%;border-collapse:collapse;table-layout:fixed} table.pl-table th{position:relative;text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted); padding:7px 12px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none} table.pl-table th:hover{color:var(--gold)} table.pl-table th.on{color:var(--gold)} .pl-thin{display:flex;align-items:center;gap:5px;min-width:0} .pl-thname{overflow:hidden;text-overflow:ellipsis} .pl-thf{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;padding:0; background:none;border:1px solid transparent;border-radius:5px;color:var(--muted);cursor:pointer;opacity:.55} .pl-thf:hover{opacity:1;color:var(--gold);background:var(--panel3)} .pl-thf.on{opacity:1;color:var(--gold);border-color:var(--gold);background:var(--soft-gold)} table.pl-table td{padding:6px 12px;font-size:12.5px;color:var(--ink);border-bottom:1px solid var(--inset-line); vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} table.pl-table tbody tr{cursor:pointer} table.pl-table tbody tr:hover{background:var(--panel2)} /* Ширины подобраны так, чтобы имя и адрес читались целиком на ноутбуке: обрезка — крайняя мера, полный текст всегда есть в подсказке. Цена и «стоит» прижаты вправо вместе с шапкой, иначе колонка выглядит рассыпанной (осмотр 18.08.2026). */ table.pl-table th:nth-last-child(2) .pl-thin, table.pl-table th:last-child .pl-thin{justify-content:flex-end} table.pl-table td.pl-agent{color:var(--muted)} table.pl-table td.pl-name{font-weight:600} table.pl-table td.pl-obj{color:var(--ink)} table.pl-table td.pl-price{text-align:right;white-space:nowrap} table.pl-table td.pl-idle{text-align:right} table.pl-table td:nth-child(1){padding-left:14px} .pl-taskcell{display:flex;align-items:baseline;gap:6px;min-width:0} .pl-taskcell b{font-weight:600;white-space:nowrap} .pl-tasktext{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pl-dim{color:var(--muted)} .pl-over{color:var(--overdue);font-weight:600} .pl-today{color:var(--ok)} .pl-warn{color:var(--warn)} .pl-stage{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;border:1px solid;white-space:nowrap; max-width:100%;overflow:hidden;text-overflow:ellipsis} .pl-svc{display:inline-block;font-size:10px;font-weight:700;border-radius:6px;padding:1px 5px;margin-right:3px} .pl-more{width:100%;padding:8px;background:var(--panel2);border:1px dashed var(--line);border-radius:0;color:var(--gold);font-size:12px;cursor:pointer} /* телефон: узкая строка «клиент — этап», подробности второй строкой (без горизонтального скролла) */ .pl-mrow{padding:9px 12px;border-bottom:1px solid var(--inset-line);cursor:pointer} .pl-mrow:hover{background:var(--panel2)} .pl-mtop{display:flex;align-items:center;gap:8px;justify-content:space-between} .pl-mname{font-weight:600;font-size:13px} .pl-mmeta{color:var(--muted);font-size:11.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── Аукционная воронка лота: расписание показов, метки, мастер (30.08.2026) ───────── */ /* Цвета — только через токены темы: светлая и тёмная должны читаться одинаково. */ .auc-tag{display:inline-block;font-size:10.5px;line-height:1.5;padding:0 6px;border-radius:999px; border:1px solid var(--line);color:var(--muted);margin-right:4px} .auc-tag.ok{border-color:var(--ok);color:var(--ok)} .auc-tag.bad{border-color:var(--red);color:var(--red)} .auc-empty{padding:28px;color:var(--muted);font-size:13px;max-width:520px} .auc-sched{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding:4px 2px 14px} .auc-sched-one{display:block} .auc-daybox{flex:0 0 auto;min-width:340px;background:var(--panel);border:1px solid var(--line); border-radius:12px;overflow:hidden} .auc-sched-one .auc-daybox{min-width:0;width:100%} .auc-dayhead{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--panel2); border-bottom:1px solid var(--line);font-weight:700;font-size:13px} .auc-daysub{font-weight:400;font-size:11px;color:var(--muted)} .auc-daycfg{margin-left:auto;padding:2px 8px} .auc-daynav{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 0 12px; font-weight:700;font-size:14px} .auc-slots{max-height:70vh;overflow-y:auto} .auc-slot{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line); font-size:12.5px;min-height:34px} .auc-slot:last-child{border-bottom:0} .auc-slot.free{cursor:pointer;color:var(--muted)} .auc-slot.free:hover{background:var(--panel2)} .auc-slot.current{background:var(--panel2);box-shadow:inset 3px 0 0 var(--gold-fill)} .auc-time{flex:0 0 44px;color:var(--muted);font-variant-numeric:tabular-nums} .auc-free{font-size:11.5px} .auc-cont{color:var(--line)} .auc-who{font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px} .auc-who:hover{text-decoration:underline} .auc-phone{color:var(--muted);font-size:11.5px;white-space:nowrap} .auc-src{color:var(--muted);font-size:11px;white-space:nowrap} .auc-sel,.auc-offer{font-size:11.5px;padding:2px 6px;border:1px solid var(--line);border-radius:8px; background:var(--panel);color:var(--ink)} .auc-offer{width:104px} .auc-callbtn{padding:2px 8px} .auc-showline{margin-top:8px;font-size:12.5px;color:var(--muted)} /* мастер и редакторы (модалка модуля) */ /* z-index 700, а не 70: карточка объекта лежит на 300, и окно открывалось ПОД ней — человек жал кнопку и видел, что «ничего не происходит» (найдено живьём 31.08.2026). */ .auc-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:700; align-items:center;justify-content:center;padding:20px} .auc-modal.show{display:flex} .auc-modal-in{background:var(--panel);border:1px solid var(--line);border-radius:14px; max-width:980px;width:100%;max-height:86vh;overflow:auto;padding:18px} .auc-modal-head{font-weight:700;font-size:15px;margin-bottom:12px} .auc-modal-foot{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap} .auc-modal-foot label{font-size:12px;color:var(--muted)} .auc-modal-foot input{width:74px;margin-left:6px} .auc-modal-days{display:flex;gap:14px;overflow-x:auto} .auc-wiz{display:flex;flex-direction:column;gap:10px} .auc-wizrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap} .auc-wizrow label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)} .auc-wizrow input,.auc-wizrow select{padding:6px 8px;border:1px solid var(--line);border-radius:8px; background:var(--panel);color:var(--ink);font-size:13px} .auc-wizhint{font-size:12px;color:var(--muted)} .auc-picklist{max-height:52vh;overflow:auto} .auc-pick{padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px} .auc-pick:hover{background:var(--panel2)} .auc-picksub{display:block;font-size:11.5px;color:var(--muted)} /* номера рекламы в карточке объекта */ .auc-numbox{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0} .auc-numhead{font-weight:700;font-size:13px;margin-bottom:8px} .auc-numrow{font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--line)} .auc-numrow:last-of-type{border-bottom:0} .auc-numfoot{display:flex;gap:8px;margin-top:10px} .buyer-q{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:6px} @media(max-width:760px){ .auc-daybox{min-width:0} .auc-slot{flex-wrap:wrap;min-height:44px} .auc-who{max-width:none} .buyer-q{grid-template-columns:1fr} } .pf-pipe-menu .pp-add{color:var(--gold);font-weight:600} .auc-outbtn{padding:2px 8px} .auc-outbtn.on{border-color:var(--ok);color:var(--ok)} .auc-outbtn.on.bad{border-color:var(--red);color:var(--red)} @media(max-width:760px){ .auc-slot{gap:6px;padding:8px 10px} .auc-slot .auc-offer{width:88px} .auc-slot .btn.ghost{padding:2px 6px;font-size:12px} .auc-src{display:none} } .auc-objq{width:100%;padding:8px 10px;margin-bottom:10px;border:1px solid var(--line); border-radius:9px;background:var(--panel);color:var(--ink);font-size:13px} /* реестр номеров телефонии (раздел «Звонки») */ .auc-numreg{margin-bottom:16px} .auc-numtab{width:100%;border-collapse:collapse;font-size:12.5px} .auc-numtab th{text-align:left;font-weight:600;color:var(--muted);font-size:11px; text-transform:uppercase;letter-spacing:.4px;padding:6px 10px;border-bottom:1px solid var(--line)} .auc-numtab td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle} .auc-numtab tr:last-child td{border-bottom:0} .auc-numgone td{opacity:.6} .auc-nolink{color:var(--muted)} .auc-pick.on{background:var(--panel2);box-shadow:inset 3px 0 0 var(--gold-fill)} /* разговоры в карточке обращения */ .auc-calls{margin:4px 0 12px} .auc-callshead{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:6px} .auc-callrow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap; font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)} .auc-callrow:last-child{border-bottom:0} #buyerLinkBtn{margin-left:auto} /* ═══════ SMM: контент-план (js/39_smm.js) ═══════════════════════════════════════════════ Сетка «дни × носители»: строки — люди и бренды, столбцы — дни. Цвета ТОЛЬКО токенами (подложка --soft-*, текст --ink-*), иначе раздел выпадет из светлой темы. */ #smmTools{flex-wrap:wrap} .smm-switch{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden} .smm-switch button{border:0;background:transparent;color:var(--muted);padding:5px 14px;font-size:12.5px;cursor:pointer} .smm-switch button.on{background:var(--gold-fill);color:var(--on-gold)} .smm-grid-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)} .smm-grid{border-collapse:collapse;width:100%;min-width:900px} .smm-grid th,.smm-grid td{border:1px solid var(--line);vertical-align:top} .smm-grid thead th{position:sticky;top:0;z-index:2;background:var(--panel2);padding:8px 10px;text-align:left; font-weight:600;font-size:12px} .smm-grid thead th.smm-off{background:var(--panel3)} .smm-grid thead th.smm-now,.smm-grid td.smm-now{box-shadow:inset 0 2px 0 var(--gold-fill)} .smm-dow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .smm-date{display:block;color:var(--ink)} .smm-corner{width:170px;min-width:170px} .smm-owner{width:170px;min-width:170px;background:var(--panel2);padding:10px;text-align:left} .smm-owner-t{display:block;font-size:13px;font-weight:600} .smm-owner-k{display:block;font-size:11px;color:var(--muted)} .smm-grid td{padding:6px;min-width:150px;height:72px} .smm-card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm); padding:7px 8px;margin-bottom:6px;cursor:pointer} .smm-card:hover{border-color:var(--gold)} .smm-card-h{display:flex;gap:5px;align-items:baseline;font-size:12.5px;line-height:1.25} .smm-card-time{font-size:11px;color:var(--muted);margin-top:2px} .smm-card-f{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;align-items:center} .smm-ico{font-size:12px} .smm-mini{font-size:11px;color:var(--muted)} .smm-chip{display:inline-block;padding:1px 7px;border-radius:var(--r-pill);font-size:11px;white-space:nowrap} .smm-daylbl{display:none} .smm-add{width:100%;border:1px dashed var(--line);background:transparent;color:var(--muted); border-radius:var(--r-sm);padding:3px;cursor:pointer;font-size:14px;line-height:1; opacity:0;transition:opacity .12s} .smm-grid td:hover .smm-add,.smm-add:focus{opacity:1} .smm-add:hover{border-color:var(--gold);color:var(--gold)} /* Месяц: тридцать столбцов влезают только значками. Значок несёт три вещи — тип, статус цветом и факт выхода; название и текст читаются в окне темы. */ .smm-month td{min-width:0;width:34px;padding:3px;height:auto} .smm-month .smm-corner,.smm-month .smm-owner{width:150px;min-width:150px} .smm-month thead th{padding:6px 3px;text-align:center} .smm-month .smm-dow{font-size:10px} .smm-month .smm-date{font-size:12px;text-align:center} /* Месячный квадрат: цвет — заливка статуса, рамка того же тона. Ярко и различимо на тридцати колонках, где текст всё равно не читается. */ .smm-dot{position:relative;display:block;width:100%;border:1px solid transparent; border-radius:var(--r-sm);padding:5px 0;margin-bottom:3px;font-size:12px;line-height:1; font-weight:700;cursor:pointer} .smm-dot-ok{position:absolute;right:1px;bottom:0;font-size:9px;color:var(--green)} .smm-dot-miss{position:absolute;right:1px;bottom:0;font-size:9px;color:var(--red)} .smm-debts{padding:12px 14px;margin-bottom:12px} .smm-debts-h{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--red);margin-bottom:8px} .smm-debt{display:inline-block;border:1px solid var(--line);background:transparent;color:var(--ink); border-radius:var(--r-pill);padding:3px 10px;font-size:12px;margin:0 6px 6px 0;cursor:pointer} .smm-debt:hover{border-color:var(--red)} /* окно темы */ .smm-modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-pop);width:min(860px,100%);max-height:92vh;display:flex;flex-direction:column} .smm-modal-h{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)} .smm-modal-h>div:first-child{flex:1;min-width:0} .smm-modal-body{padding:14px 16px;overflow:auto;flex:1} .smm-modal-f{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--line)} .smm-modal-f span{display:flex;gap:8px} .smm-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);padding:0 16px} .smm-tabs button{border:0;background:transparent;color:var(--muted);padding:9px 14px;font-size:13px;cursor:pointer; border-bottom:2px solid transparent} .smm-tabs button.on{color:var(--ink);border-bottom-color:var(--gold-fill)} .smm-form{display:flex;flex-direction:column;gap:12px} .smm-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)} .smm-form input,.smm-form select,.smm-form textarea{background:var(--panel2);border:1px solid var(--line); color:var(--ink);border-radius:var(--r-sm);padding:7px 9px;font-size:13px;font-family:inherit;width:100%} .smm-form textarea{resize:vertical} .smm-row{display:flex;gap:12px;flex-wrap:wrap} .smm-row>label,.smm-row>div{flex:1;min-width:150px} .smm-lbl{display:block;font-size:12px;color:var(--muted);margin-bottom:4px} .smm-pls{display:flex;flex-wrap:wrap;gap:6px} .smm-pl{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:var(--r-pill); padding:4px 11px;font-size:12px;cursor:pointer} .smm-pl.on{border-color:var(--gold);color:var(--gold);background:var(--soft-gold)} .smm-pl.off,.smm-pl[disabled]{opacity:.4;cursor:not-allowed} .smm-limits{font-size:11.5px;color:var(--muted)} .smm-media{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .smm-thumb{position:relative;width:78px;height:104px;border-radius:var(--r-sm);overflow:hidden; border:1px solid var(--line);background:var(--panel2)} .smm-thumb img,.smm-thumb video{width:100%;height:100%;object-fit:cover;display:block} .smm-thumb-x{position:absolute;top:2px;right:2px;border:0;border-radius:var(--r-pill);width:18px;height:18px; background:var(--red-fill);color:#fff;font-size:11px;line-height:1;cursor:pointer} .smm-step{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;background:var(--panel2)} .smm-step-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12.5px} .smm-step textarea{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink); border-radius:var(--r-sm);padding:7px 9px;font-size:13px;font-family:inherit} .smm-out{margin-top:16px;border-top:1px solid var(--line);padding-top:12px} .smm-out-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;padding:5px 0} .smm-out-who{min-width:150px;font-weight:600} .smm-out-act{display:flex;gap:6px;margin-left:auto} .smm-cmts{margin-top:16px;border-top:1px solid var(--line);padding-top:12px} .smm-cmt{background:var(--panel2);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:6px;font-size:12.5px} .smm-cmt.rework{background:var(--soft-red)} .smm-cmt-h{font-size:11px;color:var(--muted);margin-bottom:2px} .smm-cmt-new textarea{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink); border-radius:var(--r-sm);padding:7px 9px;font-size:13px;font-family:inherit} .smm-cmt-btns{display:flex;gap:8px;margin-top:6px} .smm-own-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--line)} .smm-own-row input,.smm-own-row select{background:var(--panel2);border:1px solid var(--line);color:var(--ink); border-radius:var(--r-sm);padding:6px 8px;font-size:12.5px} .smm-own-row input[type=text]{flex:1;min-width:120px} .smm-own-on{display:flex;gap:5px;align-items:center;font-size:12px;color:var(--muted)} .smm-own-new{margin-top:14px} .smm-own-name{font-weight:600;font-size:13px;min-width:150px} .smm-own-row select{min-width:96px} /* Вторая строка одного человека: имя не повторяем, отступом показываем, что это его же канал */ .smm-owner-sub{padding-left:18px} .smm-num{color:var(--muted);font-weight:500;font-size:12px} .smm-pl-sub{opacity:.7;font-size:11px} /* Материал блоками: текст плюс медиа, добавляются плюсиком как фото в объявлении */ .smm-blocks{display:flex;flex-direction:column;gap:10px} .smm-block{border:1px solid var(--line);border-radius:var(--r-md);padding:10px} .smm-block-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12.5px} .smm-block textarea{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink); border-radius:var(--r-sm);padding:8px 10px;font-size:13px;font-family:inherit} /* Банк тем: отбор сверху, таблица снизу */ .smm-bank-f{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px} .smm-f{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted)} .smm-f select,.smm-f input{background:var(--panel2);border:1px solid var(--line);color:var(--ink); border-radius:var(--r-sm);padding:6px 9px;font-size:12.5px;min-width:130px} .smm-bank{overflow-x:auto} .smm-b-table{width:100%;border-collapse:collapse;font-size:12.5px} .smm-b-table th{text-align:left;padding:8px 10px;color:var(--muted);font-size:11px; text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)} .smm-b-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top} .smm-b-table tbody tr{cursor:pointer} .smm-b-table tbody tr:hover{background:var(--panel2)} .smm-b-num{color:var(--muted);white-space:nowrap} /* Телефон: сетка не влезает никогда, поэтому она превращается в список по дням, а носитель уходит подписью в карточку. SMM-специалист работает с телефона — это не урезанный вид, а второй полноценный. */ @media (max-width:860px){ .smm-grid{min-width:0;display:block} .smm-grid thead{display:none} .smm-grid tbody,.smm-grid tr,.smm-grid td,.smm-grid th{display:block;width:auto} .smm-grid tr{border-bottom:1px solid var(--line)} .smm-owner,.smm-grid th.smm-owner{width:auto;min-width:0;position:sticky;top:0;z-index:1} .smm-grid td{min-height:0;height:auto;border:0;border-top:1px solid var(--line);padding:8px 10px} .smm-grid td.smm-empty{display:none} .smm-daylbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em; color:var(--muted);margin-bottom:6px} .smm-modal{max-height:100vh;border-radius:0} .smm-out-who{min-width:0} } /* ═══════ Форма: календарь тренировок (js/40_fit.js) ═════════════════════════════════════ Сетка «дни × участники». Устроена как контент-план, потому что задача та же формы, но единица другая: занятие, а не пост. Цвета ТОЛЬКО токенами (подложка --soft-*, текст --ink-*), иначе раздел выпадет из светлой темы. */ #fitTools{flex-wrap:wrap} .fit-switch{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden} .fit-switch button{border:0;background:transparent;color:var(--muted);padding:5px 14px;font-size:12.5px;cursor:pointer} .fit-switch button.on{background:var(--gold-fill);color:var(--on-gold)} .fit-grid-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)} .fit-grid{border-collapse:collapse;width:100%;min-width:900px} .fit-grid th,.fit-grid td{border:1px solid var(--line);vertical-align:top} .fit-grid thead th{position:sticky;top:0;z-index:2;background:var(--panel2);padding:8px 10px;text-align:left; font-weight:600;font-size:12px} .fit-grid thead th.fit-off{background:var(--panel3)} .fit-grid thead th.fit-now,.fit-grid td.fit-now{box-shadow:inset 0 2px 0 var(--gold-fill)} .fit-dow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .fit-date{display:block;color:var(--ink)} .fit-corner{width:180px;min-width:180px} .fit-person{width:180px;min-width:180px;background:var(--panel2);padding:10px;text-align:left} .fit-person-t{display:block;font-size:13px;font-weight:600} .fit-person-k{display:block;font-size:11px;color:var(--muted);margin-top:2px} /* Полоса выполнения недели. Числа «3 из 4» человек читает, а полосу видит — и именно она отвечает на главный вопрос раздела: держим ритм или нет. */ .fit-bar{display:block;height:4px;border-radius:var(--r-pill);background:var(--line);margin-top:6px;overflow:hidden} .fit-bar i{display:block;height:100%;border-radius:var(--r-pill)} .fit-grid td{padding:6px;min-width:150px;height:78px} .fit-card{position:relative;border:1px solid var(--line);border-radius:var(--r-sm); padding:7px 8px;margin-bottom:6px;cursor:pointer} .fit-card:hover{border-color:var(--gold)} .fit-card-h{display:flex;gap:5px;align-items:baseline;font-size:12.5px;line-height:1.25} .fit-card-f{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;align-items:center} .fit-ico{font-size:12px} .fit-mini{font-size:11px;color:var(--muted)} .fit-chip{display:inline-block;padding:1px 7px;border-radius:var(--r-pill);font-size:11px;white-space:nowrap} .fit-daylbl{display:none} /* Отметка прямо в клетке: две кнопки поверх карточки. Появляются по наведению, на телефоне видны всегда — там наведения нет, а отмечают чаще всего именно с телефона. */ .fit-act{position:absolute;top:4px;right:4px;display:flex;gap:3px;opacity:0;transition:opacity .12s} .fit-card:hover .fit-act{opacity:1} .fit-act button{width:20px;height:20px;border:1px solid var(--line);background:var(--panel); color:var(--muted);border-radius:var(--r-sm);font-size:11px;line-height:1;cursor:pointer;padding:0} .fit-act button:hover{border-color:var(--gold);color:var(--gold)} .fit-act button.on{background:var(--gold-fill);color:var(--on-gold);border-color:var(--gold-fill)} .fit-add{width:100%;border:1px dashed var(--line);background:transparent;color:var(--muted); border-radius:var(--r-sm);padding:3px;cursor:pointer;font-size:14px;line-height:1; opacity:0;transition:opacity .12s} .fit-grid td:hover .fit-add,.fit-add:focus{opacity:1} .fit-add:hover{border-color:var(--gold);color:var(--gold)} /* Месяц: тридцать столбцов влезают только значками. Значок несёт вид занятия и факт. */ .fit-month td{min-width:0;width:34px;padding:3px;height:auto} .fit-month .fit-corner,.fit-month .fit-person{width:160px;min-width:160px} .fit-month thead th{padding:6px 3px;text-align:center} .fit-month .fit-dow{font-size:10px} .fit-month .fit-date{font-size:12px;text-align:center} .fit-dot{display:block;width:100%;border:1px solid transparent;border-radius:var(--r-sm); padding:5px 0;margin-bottom:3px;font-size:12px;line-height:1;font-weight:700;cursor:pointer} .fit-debts{padding:12px 14px;margin-bottom:12px} .fit-debts-h{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--red);margin-bottom:8px} .fit-debt{display:inline-block;border:1px solid var(--line);background:transparent;color:var(--ink); border-radius:var(--r-pill);padding:3px 10px;font-size:12px;margin:0 6px 6px 0;cursor:pointer} .fit-debt:hover{border-color:var(--red)} /* окно занятия */ .fit-modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-pop);width:min(760px,100%);max-height:92vh;display:flex;flex-direction:column} .fit-modal-sm{width:min(460px,100%)} .fit-modal-h{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)} .fit-modal-h>div:first-child{flex:1;min-width:0} .fit-modal-body{padding:14px 16px;overflow:auto;flex:1} .fit-modal-f{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--line)} .fit-modal-f span{display:flex;gap:8px} .fit-form{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px} .fit-f{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted)} .fit-f input,.fit-f select,.fit-f textarea{background:var(--panel2);border:1px solid var(--line); color:var(--ink);border-radius:var(--r-sm);padding:7px 9px;font-size:13px;font-family:inherit;min-width:120px} .fit-f textarea{resize:vertical;width:100%} .fit-f-wide{flex:1;min-width:180px} .fit-f-wide input{width:100%} .fit-f-block{display:flex;width:100%;margin-bottom:12px} .fit-block{border:1px solid var(--line);border-radius:var(--r-md);padding:10px;margin-bottom:12px} .fit-block-h{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px} .fit-chks{display:flex;flex-wrap:wrap;gap:10px} .fit-chk{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--ink); border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;cursor:pointer} .fit-mark-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;padding:6px 0} .fit-mark-btns{display:flex;gap:6px;margin-left:auto} .fit-own{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--line)} .fit-own input,.fit-own select{background:var(--panel2);border:1px solid var(--line);color:var(--ink); border-radius:var(--r-sm);padding:6px 8px;font-size:12.5px} .fit-own-on{display:flex;gap:5px;align-items:center;font-size:12px;color:var(--muted)} .fit-own-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px} .fit-own-add input,.fit-own-add select{background:var(--panel2);border:1px solid var(--line);color:var(--ink); border-radius:var(--r-sm);padding:6px 8px;font-size:12.5px} /* Замеры: карточка на участника, строка на показатель. Графика нет намеренно — на двоих людях он рисует шум, а число, движение и рекорд отвечают на всё, ради чего меряют. */ .fit-metrics{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px} .fit-mcard{flex:1;min-width:280px;padding:14px 16px} .fit-mcard-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px} .fit-mrows{display:flex;flex-direction:column;gap:2px} .fit-mrow{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:5px 0;border-bottom:1px solid var(--line)} .fit-mrow:last-child{border-bottom:0} .fit-mname{min-width:120px;font-size:12.5px;color:var(--muted)} .fit-mval{font-size:14px;font-weight:600;color:var(--ink)} .fit-mval i{font-style:normal;font-size:11px;font-weight:400;color:var(--muted)} .fit-mhist{padding:14px 16px} .fit-htab{width:100%;border-collapse:collapse;font-size:12.5px} .fit-htab td{padding:7px 8px;border-bottom:1px solid var(--line)} .fit-htab td:first-child{color:var(--muted);white-space:nowrap} /* Телефон: сетка превращается в список по дням, участник уходит подписью. Отмечают тренировку почти всегда с телефона, поэтому это второй полноценный вид, а не урезанный. */ @media (max-width:860px){ .fit-grid{min-width:0;display:block} .fit-grid thead{display:none} .fit-grid tbody,.fit-grid tr,.fit-grid td,.fit-grid th{display:block;width:auto} .fit-grid tr{border-bottom:1px solid var(--line)} .fit-person,.fit-grid th.fit-person{width:auto;min-width:0;position:sticky;top:0;z-index:1} .fit-grid td{min-height:0;height:auto;border:0;border-top:1px solid var(--line);padding:8px 10px} .fit-grid td.fit-empty{display:none} .fit-daylbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em; color:var(--muted);margin-bottom:6px} /* Отметка — главное действие с телефона, и попасть в неё надо пальцем, а не ногтем: тач-цель доведена до 40px (правило замера в _ci/layout_probe.mjs). */ .fit-act{opacity:1;position:static;justify-content:flex-end;margin-top:8px} .fit-act button{width:40px;height:40px;font-size:15px} .fit-modal{max-height:100vh;border-radius:0} .fit-mcard{min-width:0} }