:root{
    /* ELYQO Business — светлая premium-тема (в одной системе с главной и кабинетом клиента) */
    /* ——— палитра владелицы (25.09.2026) ———
       Прислана целиком: фоны, текст, акцент и статусы. Что взято дословно, а
       что выведено — помечено ниже. Выводить приходилось там, где один и тот
       же цвет у нас работает и подложкой, и ТЕКСТОМ: пастель в подписи
       пилюли даёт контраст 2:1 и на экране салона не читается. В таких местах
       остаётся её тон, затемнённый до читаемого, — семейство цвета то же. */
    --bg:#F4F6FA;--surface:#FFFFFF;--surface-2:#EEF2F8;--ink:#1F2740;--ink-soft:#73768A;--ink-faint:#999AA7;
    /* --line дословно; --line-strong на шаг темнее — им размечены акцентные
       рамки, и при одинаковом значении иерархия схлопывалась в одну линию */
    --line:#DDE3EF;--line-strong:#CBD3E3;--brand:#6459FD;--brand-ink:#4F45D6;--brand-tint:#EFEEFF;
    --brand-soft:#A7A7E1;
    --accent:#E85A67;--gold:#C98A5A;--star:#E8A100;--blue:#3A6F9A;--success:#29B982;--warn:#F3A633;
    --grad:linear-gradient(90deg,#5B4CFF 0%,#9C5CFF 52%,#F05DC7 100%);
    --glow:0 10px 30px -14px rgba(91,76,255,.55);
    --radius:16px;--radius-sm:11px;
    --shadow-sm:0 4px 16px rgba(38,32,82,.05);
    --shadow-md:0 8px 28px rgba(40,35,90,.08);--shadow-pop:0 20px 60px rgba(40,35,90,.16);
    --sbw:288px;--hdr:120px;
    /* ---- боковая навигация (ТЗ «Sidebar Navigation» v1.0, 12.09.2026) ----
       Числа адаптированы к уже существующей дизайн-системе (--brand/
       --brand-tint и т.п. уже совпадают или очень близки к рекомендациям ТЗ) —
       сам документ явно разрешает это в разделе «Числовые параметры». */
    --nav-active-bg:var(--brand-tint);--nav-active-c:var(--brand-ink);
    --nav-ic:var(--ink-soft);--nav-grp-c:var(--ink-faint);--nav-hover:var(--surface-2);
    --nav-cnt-bg:#F0EAFF;--nav-cnt-c:var(--brand-ink);
    --nav-pro-bg:#F3EEFF;
    /* ——— палитра статусов визита (палитра владелицы, 25.09.2026) ———
       --st-X   — светлый фон статуса (пастельный режим, плашки, неделя/месяц)
       --st-X-d — насыщенный тон: полоса, рамка, значок и подпись пилюли

       Дословно из палитры:
         NEW       «Запланирована»          #4D86E8 / #EAF2FF
         PENDING   «Требует подтверждения»  #F2A23A / #FFF4E5
         COMPLETED «Завершена»              #48A779 / #EAF7F1
         NO_SHOW   «Неявка / отсутствие»    #FD6677 / #FFF0F2
       Выведено, потому что в палитре этих статусов нет или тон не работает
       текстом (пояснение — в шапке блока):
         CONFIRMED  — фон её, #EDF8F3; тон #5AA98E, это её мягкий зелёный
                      #91CAB5, затемнённый до читаемого (на белом он даёт 2:1);
         ARRIVED    — фирменный акцент #6459FD: «клиент пришёл» — состояние
                      сейчас, и ему идёт цвет самого бренда;
         IN_PROGRESS— он же на шаг глубже, чтобы два соседних шага не слились;
         отмены     — из «дополнительных пастельных»: роза #E0A5A1 и пыльно-
                      розовый #D9BBC9, затемнённые до читаемых. */
    --st-NEW:#EAF2FF;                --st-NEW-d:#4D86E8;
    --st-PENDING:#FFF4E5;            --st-PENDING-d:#F2A23A;
    --st-CONFIRMED:#EDF8F3;          --st-CONFIRMED-d:#5AA98E;
    --st-CONFIRMED-soft:#91CAB5;
    --st-ARRIVED:#EFEEFF;            --st-ARRIVED-d:#6459FD;
    --st-IN_PROGRESS:#E6E4FF;        --st-IN_PROGRESS-d:#4A3FD8;
    /* «Завершена» — салатовый (просьба владелицы, 25.09.2026). Лайм вместо
       изумруда: у нас уже два зелёных статуса, и «подтверждена» с «завершена»
       путались; жёлто-зелёная ветвь разводит их окончательно. -soft — светлый
       лайм для пилюли на графитовой карточке завершённого визита. */
    --st-COMPLETED:#F1F8E4;          --st-COMPLETED-d:#7FB13C;
    --st-COMPLETED-soft:#C8E88C;
    --st-NO_SHOW:#FFF0F2;            --st-NO_SHOW-d:#FD6677;
    --st-CANCELLED_CLIENT:#F8EEED;   --st-CANCELLED_CLIENT-d:#C0645E;
    --st-CANCELLED_BUSINESS:#F6EFF3; --st-CANCELLED_BUSINESS-d:#A9718B;
    --st-ink:#1F2740;
    /* Заливка карточки завершённого визита: сама запись салатовая
       (уточнение владелицы 25.09.2026 — не графит, как в первом макете). */
    --st-done-card:var(--st-COMPLETED-soft);
    --font:"Inter","Manrope","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer}
  input,select,textarea{font-family:inherit}
  /* iOS увеличивает страницу, когда фокус попадает в поле мельче 16px: буквы
     разъезжаются, и фиксированная разметка (шапка, панель вкладок) перестаёт
     совпадать с экраном. Десятки полей в файле объявляют свой размер явно
     (13-14px) — этому правилу нужен приоритет над ними, а не порядок в
     каскаде. Тот же приём уже решён в messenger.js (ТЗ «Мобильный кабинет»
     §5.5), здесь — его более широкая версия на все поля кабинета разом.
     (pointer:coarse), а не ширина экрана: iPad Pro в ландшафте — это 1024px
     и палец одновременно (см. §3). */
  @media(pointer:coarse){
    input,select,textarea{font-size:16px!important}
  }

  .btn{border:0;border-radius:10px;padding:9px 15px;font-weight:700;font-size:13.5px;background:var(--grad);color:#fff;box-shadow:var(--glow);display:inline-flex;align-items:center;gap:7px;justify-content:center}
  .btn:hover{filter:brightness(1.08)}
  .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong);box-shadow:none}
  .btn.ghost:hover{background:var(--surface)}
  .btn.sm{padding:7px 11px;font-size:12.5px}
  .btn.danger{background:transparent;border:1px solid var(--accent);color:var(--accent)}
  .btn:disabled{opacity:.5;cursor:not-allowed}

  /* ---------- shell ---------- */
  /* ==========================================================================
     ВЕРХНЯЯ ПАНЕЛЬ ELYQO BUSINESS  (ТЗ «Верхняя панель», 02.09.2026)
     Одна плавающая градиентная полоса — тот же словесный знак (ui.js ·
     ELYQO_WORD) и тот же градиент, что у шапки маркетплейса
     (header.js · --eh-brand): кабинет должен читаться как продолжение ELYQO,
     а не как чужая админка.

     Геометрия: 16px сверху + полоса 92px + 12px снизу = --hdr (120px).
     Высота полосы НЕ меняется на скролле: от --hdr считают свой отступ все
     липкие колонки панелей (.cal-aside, .ap-side, .rv-rail, .sv-side,
     .ch-rail, .cal-an, .db-lib) — «схлопывание» шапки утащило бы их за собой.

     Приоритет по ТЗ §66: знак → бизнес → публичная страница → профиль → выход.
     ========================================================================== */
  .topbar{position:fixed;top:0;left:0;right:0;height:var(--hdr);z-index:60;
    background:var(--bg);padding:16px 24px 12px;display:flex}
  /* Входная анимация — только на самой первой отрисовке (см. business.js:
     headerHTML/_bhAnimated). render() пересобирает шапку на каждый клик в
     кабинете; без .bh-seen каждый такой пересбор заново проигрывал бы
     bh-in, и полоса «мигала» бы на любое действие владельца. */
  .topbar:not(.bh-seen){animation:bh-in .28s cubic-bezier(.22,.61,.36,1) both}
  @keyframes bh-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  .bh-bar{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:18px;
    border-radius:22px;padding:0 24px 0 28px;color:#fff;
    background:linear-gradient(96deg,#EE5CA5 0%,#B152CF 48%,#5F4BFC 100%);
    box-shadow:0 18px 40px -22px rgba(74,40,150,.85),0 2px 6px rgba(74,40,150,.16);
    text-shadow:0 1px 1px rgba(74,30,110,.16)}
  .bh-l{display:flex;align-items:center;gap:22px;min-width:0}
  .bh-r{display:flex;align-items:center;gap:14px;flex-shrink:0}

  /* ---- знак: ELYQO над мелким BUSINESS (ТЗ §11) ---- */
  .bh-logo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex-shrink:0;line-height:0}
  .bh-logo img{height:27px;width:auto;display:block;user-select:none;-webkit-user-drag:none}
  .bh-logo .sub{font-size:9.5px;font-weight:800;line-height:1;letter-spacing:.36em;
    text-transform:uppercase;color:rgba(255,255,255,.82);padding-left:3px}
  .bh-logo:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.3);border-radius:8px}

  /* ---- выпадающие панели (профиль) ---- */
  .bh-dd{position:absolute;top:calc(100% + 10px);left:0;min-width:300px;max-width:380px;z-index:5;
    background:rgba(255,255,255,.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(80,60,120,.08);border-radius:18px;box-shadow:0 16px 45px rgba(44,30,90,.16);
    padding:8px;color:var(--ink);text-shadow:none;
    animation:bh-pop .2s cubic-bezier(.22,.61,.36,1) both}
  .bh-dd.right{left:auto;right:0;min-width:246px}
  .bh-dd[hidden]{display:none}
  @keyframes bh-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .bh-dd .hd{font-size:12px;font-weight:600;color:#9993AA;text-transform:uppercase;
    letter-spacing:.04em;padding:9px 10px 7px}
  .bh-dd .list{max-height:360px;overflow-y:auto;overscroll-behavior:contain}
  .bh-dd .sep{height:1px;background:var(--line);margin:6px 8px}
  .bh-dd .none{padding:12px 10px;font-size:12.5px;color:var(--ink-faint)}

  /* строка бизнеса */
  .bh-it{display:flex;align-items:center;gap:11px;width:100%;min-height:54px;padding:7px 10px;
    border:0;border-radius:12px;background:none;text-align:left;cursor:pointer;
    font-family:inherit;font-size:13.5px;font-weight:500;color:var(--ink);
    transition:background .14s ease}
  .bh-it:hover{background:#F8F7FC}
  .bh-it.on{background:rgba(116,82,255,.08)}
  .bh-it.on .tx b{font-weight:600}
  .bh-it:focus-visible{outline:none;box-shadow:0 0 0 2px var(--brand)}
  .bh-it .lg{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
    overflow:hidden;color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em}
  .bh-it .lg img{width:100%;height:100%;object-fit:cover;display:block}
  .bh-it .tx{min-width:0;flex:1}
  .bh-it .tx b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bh-it .tx i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-faint);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bh-it .ck{width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--brand);stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round;opacity:0}
  .bh-it.on .ck{opacity:1}
  .bh-it[hidden]{display:none}

  /* «+ Добавить новый бизнес» и пункты меню профиля */
  .bh-add{min-height:46px;font-weight:700;color:var(--brand-ink);text-decoration:none}
  .bh-add .lg{background:var(--brand-tint);color:var(--brand-ink);font-size:17px;font-weight:600;
    width:28px;height:28px;border-radius:9px}
  .bh-mi{min-height:42px;font-weight:600;color:var(--ink-soft);text-decoration:none;font-size:13.5px}
  .bh-mi:hover{color:var(--ink)}
  .bh-mi .mic{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
  .bh-mi.out{color:var(--accent)}
  .bh-dd .who{padding:10px 10px 8px;line-height:1.35}
  .bh-dd .who b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
  .bh-dd .who span{display:block;font-size:12px;color:var(--ink-faint);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* поиск бизнеса — появляется от 10 кабинетов (ТЗ §55) */
  .bh-find{display:flex;align-items:center;gap:8px;margin:2px 6px 6px;padding:0 10px;height:38px;
    border:1px solid var(--line-strong);border-radius:11px;background:var(--surface-2)}
  .bh-find svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:var(--ink-faint);stroke-width:2;
    stroke-linecap:round}
  .bh-find input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:inherit;
    font-size:13px;font-weight:500;color:var(--ink)}

  /* ---- правая часть ---- */
  .bh-act{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:15px;
    border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
    font-family:inherit;font-size:14px;font-weight:600;color:#fff;text-decoration:none;cursor:pointer;
    transition:background .18s ease,border-color .18s ease}
  .bh-act:hover{background:rgba(255,255,255,.16)}
  /* §3 ТЗ Business -> Personal: у нажатия должен быть короткий tactile
     state. Размер при hover при этом не меняется — кнопка не должна
     «дышать» под курсором, иначе соседние действия прыгают. */
  .bh-act:active{background:rgba(255,255,255,.22);transform:translateY(1px)}
  .bh-act[aria-busy="true"]{background:rgba(255,255,255,.14);transform:none}
  .bh-act:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
  .bh-act .ic{width:17px;height:17px;flex-shrink:0;display:block;fill:none;stroke:currentColor;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .18s cubic-bezier(.22,.61,.36,1)}
  .bh-act:hover .ic{transform:translate(2px,-2px)}
  .bh-act .sh{display:none}
  .bh-out{padding:0 17px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.20)}
  .bh-out:hover{background:rgba(255,255,255,.15);border-color:rgba(255,170,190,.35)}
  /* активный контекст в меню профиля: та же плашка, что у списка бизнесов */
  .bh-ctx-cur{cursor:default}
  .bh-ctx-cur:hover{background:transparent}

  .bh-u{position:relative;flex-shrink:0}
  .bh-ub{display:flex;align-items:center;gap:9px;height:46px;padding:4px 13px 4px 4px;border-radius:15px;
    border:1px solid transparent;background:rgba(255,255,255,.06);cursor:pointer;
    font-family:inherit;font-size:15px;font-weight:600;color:#fff;
    transition:background .16s ease,border-color .16s ease}
  .bh-ub:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2)}
  .bh-ub[aria-expanded="true"]{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}
  .bh-ub:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
  .bh-ub .nm{white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
  .bh-av{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;overflow:hidden;
    background:linear-gradient(135deg,#7257FF,#D450DA);border:2px solid rgba(255,255,255,.35);
    font-size:12px;font-weight:700;color:#fff;text-shadow:none}
  .bh-av img{width:100%;height:100%;object-fit:cover;display:block}
  /* Переключатель контекста: форма и разметка плашек — ctx.js (круг —
     человек, squircle — бизнес). Здесь только размеры и курсор. */
  .bh-ub .elq-duo{--duo:31px}
  .bh-ub .elq-tile{--tile:31px}
  .bh-ub:hover .elq-badge{transform:scale(1.07)}
  .bh-it .elq-tile{--tile:32px}

  /* ---- планшет: имя владельца прячем, кнопку страницы сокращаем (ТЗ §47) ---- */
  @media(max-width:1180px){
    .bh-ub .nm{display:none}
    .bh-ub{padding:4px}
    .bh-act .lg{display:none}
    .bh-act .sh{display:inline}
    .bh-l{gap:16px}
    .bh-bar{padding:0 18px 0 20px;gap:14px}
    .bh-r{gap:10px}
  }

  /* ---- phone/tablet: шапка в одну строку (ТЗ «Мобильный кабинет» §4.1).
     Единая шкала: phone ≤639, tablet 640–1023 — см. §3 ТЗ, .sidebar ниже и .mtabs. */
  @media(max-width:1023px){
    :root{--hdr:calc(56px + env(safe-area-inset-top))}
    .topbar{padding:env(safe-area-inset-top) 10px 0}
    .bh-bar{padding:0 12px;gap:10px;border-radius:16px;height:56px}
    .bh-l{gap:10px;flex:1 1 auto;min-width:0}
    .bh-r{gap:8px;flex:0 0 auto}
    .bh-logo{gap:2px}
    .bh-logo img{height:20px}
    .bh-logo .sub{display:none}
    .bh-act,.bh-out{display:none}   /* переезжают в меню профиля */
    .bh-ub{height:38px;padding:2px}
    .bh-ub .nm{display:none}
    .bh-av{width:30px;height:30px}
    .bh-ub .elq-duo{--duo:26px}
    .bh-dd{min-width:0;width:calc(100vw - 20px);max-width:340px}
    .bh-dd.right{width:min(280px,calc(100vw - 20px))}
  }
  /* ---- колокол уведомлений в верхней панели (17.09.2026) ----
     Кнопка НЕ .bh-act: та на телефоне уезжает в меню профиля, а колокол
     обязан оставаться на виду — это единственное место, где владелец узнаёт
     о новой записи, не открывая календарь. */
  .bh-n{position:relative;flex-shrink:0}
  .bh-bell{position:relative;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:15px;
    border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;
    transition:background .18s ease,border-color .18s ease}
  .bh-bell:hover{background:rgba(255,255,255,.16)}
  .bh-bell:active{transform:translateY(1px)}
  .bh-bell[aria-expanded="true"]{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34)}
  .bh-bell:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
  .bh-bell svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .bh-bell .nb{position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;
    border-radius:9px;background:#FF4D67;color:#fff;font-size:10.5px;font-weight:800;line-height:18px;
    text-align:center;text-shadow:none;box-shadow:0 0 0 2px rgba(122,66,170,.55)}
  .bh-bell .nb[hidden]{display:none}
  .bh-dd.bh-nd{min-width:min(340px,calc(100vw - 24px));max-width:380px;padding:6px}
  .bh-nd .list{max-height:min(420px,58vh)}
  /* «Новые» / «Ранее» — разделители групп внутри списка колокола. Мелкие и
     тихие: это ориентир, а не заголовок. */
  .bh-nd .hd.sub{font-size:10.5px;font-weight:800;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-faint);padding:8px 10px 3px}
  .bh-nd .list .hd.sub:first-child{padding-top:2px}
  .bh-nit{align-items:flex-start;min-height:0;padding:9px 10px}
  .bh-nit .nd{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--ink-faint)}
  .bh-nit .nd.brand{background:var(--brand)}
  .bh-nit .nd.ok{background:#12B886}
  .bh-nit .nd.warn{background:#F59E0B}
  .bh-nit .nd.bad{background:var(--accent)}
  .bh-nit .tx b{font-size:13px;font-weight:700;color:var(--ink);white-space:normal}
  .bh-nit .tx>span{display:block;font-size:11.5px;color:var(--ink-faint);white-space:normal}
  .bh-nit .tx .tm{font-size:10.5px;margin-top:2px}
  .bh-nit.seen{opacity:.62}
  .bh-nit.seen .tx b{font-weight:500}
  @media(max-width:1023px){
    .bh-bell{width:38px;height:38px;border-radius:12px}
    .bh-bell svg{width:19px;height:19px}
    .bh-bell .nb{top:1px;right:1px}
    /* На телефоне справа от колокола ещё флаг и аватар, и панель, прижатая к
       его правому краю, уезжала за левую границу экрана. Здесь она не висит
       на кнопке, а ложится под всю полосу — как нижние листы кабинета. */
    .bh-dd.bh-nd{position:fixed;top:calc(var(--hdr) + 2px);left:10px;right:10px;
      width:auto;min-width:0;max-width:none}
  }
  /* Телефон: в полосе теперь на одну кнопку больше — колокол чуть меньше,
     отступы плотнее, а у флага языка убираем стрелку: флаг и без неё
     очевидно нажимается. */
  @media(max-width:639px){
    .bh-bell{width:34px;height:34px;border-radius:11px}
    .bh-bell svg{width:18px;height:18px}
    .bh-r{gap:6px}
    .bh-bar{gap:8px}
    .bh-lang-slot{margin-left:0}
    .bh-lang-slot .lsw-chev{display:none}
  }

  @media(prefers-reduced-motion:reduce){
    .topbar,.bh-dd{animation:none}
    .bh-bell{transition:none}
    .bh-act,.bh-ub,.bh-act .ic{transition:none}
    .mtabs,.mtabs .mt-ic{transition:none}
    .ap-side{transition:none}
    .rv-rail{transition:none}
    .sidebar .nav-a{transition:none}
  }

  .sidebar{position:fixed;top:var(--hdr);left:0;bottom:0;width:var(--sbw);background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;padding:12px 12px 0;box-sizing:border-box}
  .nav-scroll{display:flex;flex-direction:column;padding-bottom:16px}
  .sidebar .nav-grp{margin-top:20px}
  .sidebar .nav-grp:first-of-type{margin-top:14px}
  .sidebar .grp{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--nav-grp-c);padding:0 10px 8px}
  .sidebar .nav-a{display:flex;align-items:center;gap:12px;min-height:44px;height:auto;padding:10px 10px;border-radius:10px;
    font-size:14px;line-height:20px;font-weight:500;color:var(--ink);position:relative;transition:background-color .14s ease,color .14s ease}
  .sidebar .nav-a:hover{background:var(--nav-hover)}
  .sidebar .nav-a:active{background:var(--nav-active-bg)}
  .sidebar .nav-a.on{background:var(--nav-active-bg);color:var(--nav-active-c);font-weight:600}
  .sidebar .nav-a.on::before{content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:3px;height:24px;border-radius:3px;background:var(--brand)}
  /* PNG-иконки ТЗ «Menu icon system» — без currentColor, поэтому активный
     пункт подсвечивают фон/текст/акцентная полоса (.on выше), а не сама
     иконка (её цвет фиксирован asset'ом, перекраска фильтром запрещена ТЗ) */
  .sidebar .nav-a img.nav-ic{width:22px;height:22px;flex-shrink:0;object-fit:contain}
  .sidebar .nav-a .t{flex:1 1 auto;min-width:0;white-space:normal}
  /* короткая подпись рельса (ТЗ v2.0 §1) — скрыта везде, кроме рельса 72px ниже */
  .sidebar .nav-a .t-rail{display:none}
  .sidebar .nav-a .cnt{margin-left:auto;flex-shrink:0;min-width:24px;height:22px;line-height:22px;text-align:center;
    font-size:11px;font-weight:800;border-radius:11px;padding:0 6px;background:var(--nav-cnt-bg);color:var(--nav-cnt-c)}
  .sidebar .nav-a:focus-visible,.nav-eliko:focus-visible,.nav-pro:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:10px}
  /* «Элика Консьерж» — рабочий модуль вне списка ТЗ, карточка перед группами
     (не пункт навигации, как и промокарточка ELYQO Pro внизу) */
  .nav-eliko{display:flex;align-items:center;gap:10px;margin:2px 0 4px;padding:10px 12px;border-radius:12px;
    background:var(--grad);color:#fff;font-weight:700;box-shadow:var(--glow)}
  /* Раньше значок был currentColor-обводкой и наследовал белый цвет текста
     карточки; ai_custom.png — фиксированный тёмно-фиолетовый PNG (ТЗ «Menu
     icon system», перекрашивать нельзя), поэтому без светлой подложки-чипа
     он бы тонул в ярком градиенте карточки (--grad). */
  .nav-eliko .ic{display:flex;flex-shrink:0;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.92)}
  .nav-eliko .ic img.nav-ic{width:20px;height:20px;object-fit:contain}
  .nav-eliko .tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .nav-eliko .tx b{font-size:13.5px}
  .nav-eliko .tx i{font-style:normal;font-size:11px;opacity:.85}
  .nav-eliko.on{box-shadow:var(--glow),0 0 0 2px #fff,0 0 0 4px var(--brand)}
  /* промокарточка ELYQO Pro — низ сайдбара, вне прокручиваемого списка групп
     по смыслу (ТЗ: «не закреплять поверх последних пунктов», здесь просто
     последний элемент общей прокрутки — самый простой способ не перекрыть
     соседние пункты на короткой панели) */
  .nav-pro{display:block;margin:16px 2px 4px;padding:12px;border-radius:14px;background:var(--nav-pro-bg);position:relative;overflow:hidden}
  .nav-pro .pro-ic{display:inline-flex;color:var(--brand);margin-bottom:6px}
  .nav-pro .pro-ic img.nav-ic{width:24px;height:24px;object-fit:contain}
  .nav-pro b{display:block;font-size:13px;line-height:17px;color:var(--ink)}
  .nav-pro i{display:block;font-style:normal;font-size:12px;line-height:16px;color:var(--ink-soft);margin-top:2px}
  .nav-pro .pro-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;margin-top:10px;
    border-radius:10px;background:var(--brand);color:#fff;font-size:13px;font-weight:700}
  .nav-pro .pro-btn svg{width:15px;height:15px}
  .nav-pro:hover .pro-btn{filter:brightness(1.06)}

  /* ---- phone: нижняя панель вкладок вместо бокового меню (ТЗ §4.2) ----
     Пять целей: «Записи», «Клиенты», «QR-коды», «Профиль» (четыре с макета
     владельца, 20.09.2026) и «Ещё». Состав фиксирован — навигация,
     переставляющая себя под владельца, хуже неудобной.

     Оформление по тому же макету: активный пункт — иконка в залитом
     фирменным градиентом кружке 44px со свечением, подпись под ним
     фиолетовая; остальные — иконка чёрная без подложки, подпись тёмная.
     Кружок нарисован на .mt-ic, а не на самой ссылке: иконка не должна
     съезжать, когда пункт становится активным, и бейдж счётчика нужно
     вешать на край кружка, а не на край колонки. Иконки — собственный
     вектор панели (MTABS_ICON), поэтому цвет наследуется и на кружке им
     хватает currentColor, без выбеливающего фильтра над растром. */
  .mtabs{display:none}
  @media(max-width:639px){
    .mtabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;
      height:var(--mtabs-h);padding:0 2px env(safe-area-inset-bottom);
      background:var(--surface);border-top:1px solid var(--line);
      transition:transform .22s cubic-bezier(.22,.61,.36,1)}
    .mtabs.hide{transform:translateY(100%)}
    .mtabs a,.mtabs button{flex:1;min-width:0;display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:4px;height:var(--mtabs-row);border:0;
      background:none;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:-.01em;
      color:#3E4059;position:relative;-webkit-tap-highlight-color:transparent}
    .mtabs .mt-ic{position:relative;flex-shrink:0;width:44px;height:44px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;color:var(--ink);
      transition:background .18s ease,box-shadow .18s ease,color .18s ease}
    .mtabs .mt-lb{max-width:100%;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mtabs svg{width:24px;height:24px;flex-shrink:0;display:block}
    .mtabs a.on,.mtabs button.on{color:#6B4BFF;font-weight:700}
    .mtabs a.on .mt-ic,.mtabs button.on .mt-ic{color:#fff;
      background:linear-gradient(145deg,#6A4BFF 0%,#9C5CFF 100%);
      box-shadow:0 0 0 5px rgba(124,72,255,.10),0 7px 16px -5px rgba(124,72,255,.70),
        0 0 16px rgba(124,72,255,.32)}
    .mtabs .cnt{position:absolute;top:-1px;right:-3px;
      margin-left:0;font-size:10px;font-weight:800;background:var(--nav-cnt-bg);
      color:var(--nav-cnt-c);border-radius:999px;padding:1px 5px;min-width:15px;text-align:center;
      box-shadow:0 0 0 2px var(--surface)}
    .mtabs a.on .cnt,.mtabs button.on .cnt{background:#fff;color:#5B33D6}
  }
  /* на 320px колонка всего 58px — «Rezerwacje» в 12px в неё не помещается
     (65px) и получало многоточие; полтора пункта кегля решают это без
     сокращения самих названий (измерено canvas.measureText по всем языкам) */
  @media(max-width:359px){
    .mtabs a,.mtabs button{font-size:10.5px}
  }

  /* ---- лист «Ещё»: остальные разделы, тот же порядок, что в боковом меню ---- */
  .msheet{display:flex;flex-direction:column;gap:4px}
  .msheet a{display:flex;align-items:center;gap:13px;padding:12px;border-radius:12px;
    font-size:14.5px;font-weight:600;color:var(--ink);position:relative;min-height:48px}
  .msheet a:active{background:var(--surface-2)}
  .msheet a svg{width:20px;height:20px;flex-shrink:0;color:var(--ink-soft)}
  .msheet a img.nav-ic{width:20px;height:20px;flex-shrink:0;object-fit:contain}
  .msheet a .cnt{margin-left:auto;font-size:10.5px;font-weight:800;background:var(--nav-cnt-bg);
    color:var(--nav-cnt-c);border-radius:999px;padding:2px 7px}
  .msheet .sep{height:1px;background:var(--line);margin:6px 4px}
  /* заголовки групп в листе «Ещё» — ТЗ v2.0 §2: тот же смысл, что .sidebar .grp,
     своя разметка, т.к. класс .grp зарезервирован под сайдбар (см. выше) */
  .msheet-grp{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--nav-grp-c);padding:14px 12px 4px}
  .msheet-grp:first-of-type{padding-top:4px}

  /* ---- перетаскивание пальцем: общее состояние (ТЗ §5.1, wirePtrReorder) ----
     Подъём карточки — scale + тень; ручка «⠿» на тач видна всегда, а не по
     наведению (наведения у пальца не бывает вовсе). */
  .ptr-drag{transform:scale(1.02);box-shadow:var(--shadow-pop);position:relative;z-index:5}
  @media(hover:none){
    [data-apdh],[data-clgrip],[data-stfgrip],.gl-i .gr,.bp-row .gr,[data-dbdh],
    .apc .mv,.ap-gh .gmv,.og-prev.has .up-ov,.up-face.has .up-ov{opacity:1!important}
  }

  main{margin-left:var(--sbw);margin-top:var(--hdr);padding:24px 28px 60px;max-width:1180px}
  h1{font-size:22px;letter-spacing:-.02em;margin-bottom:2px}
  .lede{color:var(--ink-soft);font-size:13.5px;margin-bottom:20px}
  .sec{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin:24px 0 10px}
  .sec:first-child{margin-top:0}

  .grid{display:grid;gap:14px}
  .g4{grid-template-columns:repeat(4,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g2{grid-template-columns:repeat(2,1fr)}
  @media(max-width:1080px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:720px){.g4,.g3,.g2{grid-template-columns:1fr}}

  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
  .card .bd{padding:16px}
  .kpi{padding:15px 16px}
  .kpi .n{font-size:24px;font-weight:800;letter-spacing:-.02em}
  .kpi .l{font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-top:2px}
  .kpi .d{font-size:11px;font-weight:700;margin-top:6px}
  .kpi .d.up{color:var(--brand)} .kpi .d.down{color:var(--accent)}

  table{width:100%;border-collapse:collapse;font-size:13px}
  th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);padding:9px 10px;border-bottom:1px solid var(--line)}
  td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
  tr:hover td{background:var(--surface-2)}
  .tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:auto}

  .badge{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:999px;white-space:nowrap;color:var(--st-ink)}
  .b-NEW{background:var(--st-NEW)}
  .b-PENDING{background:var(--st-PENDING)}
  .b-CONFIRMED{background:var(--st-CONFIRMED)}
  .b-ARRIVED{background:var(--st-ARRIVED)}
  .b-IN_PROGRESS{background:var(--st-IN_PROGRESS)}
  .b-COMPLETED{background:var(--st-COMPLETED)}
  .b-NO_SHOW{background:var(--st-NO_SHOW)}
  .b-CANCELLED_CLIENT{background:var(--st-CANCELLED_CLIENT)}
  .b-CANCELLED_BUSINESS{background:var(--st-CANCELLED_BUSINESS)}
  .badge.b-warn{background:#FDE7E9;color:#A8323F}   /* предупреждение, не статус */

  .tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--surface-2);color:var(--ink-soft);margin:0 3px 3px 0}
  .tag.vip{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold)}
  .tag.new{background:var(--brand-tint);color:var(--brand-ink)}
  .tag.risk{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
  .tag.loyal{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}

  .row-actions{display:flex;gap:6px;flex-wrap:wrap}
  .chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
  .chip{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700}
  .chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

  /* calendar */
  :root{--dc-hr:58px}
  .cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
  .cal-nav{display:flex;gap:4px}
  .cal-nav button{width:32px;height:32px;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;font-size:14px;color:var(--ink-soft)}
  .agenda-day{margin-bottom:16px}
  .agenda-day h4{font-size:13px;margin-bottom:6px}

  /* ——— день-календарь: сетка + drag/resize + блокировки ——— */
  .dc-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  /* dvh — запасное 100vh строкой выше: старый браузер возьмёт его, новый
     переопределит следующей строкой (ТЗ «Мобильный кабинет» §4.4) — иначе в
     мобильных Safari/Chrome сетка то обрезается снизу, то оставляет пустую
     полосу при появлении/исчезновении адресной строки. */
  /* svh, а не dvh: dvh меняется ПРЯМО ВО ВРЕМЯ прокрутки — адресная строка
     Safari сжимается, высота сетки пересчитывается, содержимое подпрыгивает.
     Это и есть «дребезжание» с видео владелицы (26.09.2026). svh — та же
     видимая высота, но постоянная. overscroll-behavior держит жест внутри
     сетки: иначе, докрутив до края, палец начинал тащить страницу, и экран
     рывком уезжал вместе с «потянуть для обновления». */
  .dc-scroll{overflow:auto;max-height:calc(100vh - 210px);max-height:calc(100svh - 210px);
    overscroll-behavior:contain}
  .dc-body{display:flex;position:relative;min-width:max-content}
  /* ТЗ «Дневная сетка» v2.1 (18.09.2026, живой скрин от владелицы): временной
     столбец — премиальный дизайн. Ось справа — тонкая фейд-линия (не жирный
     border), риски трёх длин уходят из dc-time в area дорожки (overflow:visible),
     часовые подписи крупные и тёмные, четверти — мелкие с трекингом. Ширина
     столбца 70px (было 52px, при 14px «11:00» больше не влезало). */
  /* ТЗ v2.2 §9.2: столбец времени 108px — часовым подписям 17px в 70px было
     тесно. Ширину дублируют .dc-now (left) и .dc-hoverline::before — менять
     только втроём. */
  /* Колонка времени выше ВСЕГО, что живёт в дорожках: она закреплена
     слева, и при горизонтальной прокрутке карточки уезжают под неё. Запас
     до следующего слоя нужен намеренно — встык (6 против 6) карточка
     выигрывала по порядку в разметке. */
  .dc-time{position:sticky;left:0;z-index:20;background:var(--surface);border-right:0;width:76px;flex-shrink:0;overflow:visible}
  .dc-time::after{content:"";position:absolute;right:0;top:calc(var(--dc-ch,52px) + 8px);bottom:8px;width:1px;pointer-events:none;
    background:linear-gradient(180deg,transparent 0, color-mix(in srgb,var(--brand) 18%,var(--line-strong)) 6%, color-mix(in srgb,var(--brand) 18%,var(--line-strong)) 94%, transparent 100%)}
  /* Угловая ячейка — выше заголовков дорожек (.dc-lane .ch, z-index 5):
     при прокрутке вбок они проезжают ровно под ней. */
  .dc-time .ch{height:42px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:21}
  /* ТЗ v2.2 §9.2: часы 17px --ink, риска часа 16px (3px выходят в дорожку —
     ровно до --evl:3px, где начинаются карточки: наложение исключено) */
  .dc-time .h{height:var(--dc-hr);font-size:12.5px;font-weight:500;color:var(--ink-soft);text-align:right;padding-right:14px;position:relative;
    letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
  .dc-time .h span{position:relative;top:-6px;display:inline-block}
  /* первый часовой лейбл не тянем над границей: там шапка колонки (ch) с
     непрозрачным фоном — часть подписи иначе оказывается спрятана под ней */
  .dc-time .ch+.h span{top:2px}
  .dc-time .ch+.h::after{top:2px}
  .dc-time .h::after{content:"";position:absolute;right:-3px;top:0;width:10px;height:1.5px;background:var(--line-strong);border-radius:1px;pointer-events:none}
  .dc-time .h.off::after{opacity:.6}
  .dc-lane{position:relative;border-right:1px solid var(--line);min-width:190px;flex:1}
  .dc-lane:last-child{border-right:0}
  .dc-lane .ch{height:42px;position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:8px;padding:0 10px;font-size:12px;font-weight:800}
  .dc-lane .ch .av{width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800;flex-shrink:0}
  .dc-lane .ch small{font-weight:600;color:var(--ink-faint);font-size:10px}
  /* .dc-lane .grid — это НЕ утилита .grid{display:grid;gap:14px}: из-за неё между
     часовыми линиями появлялись зазоры, и линии расходились с карточками, которые
     позиционируются по пиксельной сетке (минуты × DC_PXMIN). Гасим наследование. */
  .dc-lane .grid{position:relative;display:block;gap:0}
  .dc-lane .hr{height:var(--dc-hr);border-bottom:1px solid var(--line)}
  /* ТЗ «Дневная сетка» v2.0: линии четвертей часа — картинкой на трёх фиксированных
     процентах высоты, а не отдельными div — час остаётся одним элементом
     позиционирования (карточки визита по-прежнему считают top/height через DC_PXMIN
     от целого часа, см. calDayHTML), деление на 15 минут только визуальное.
     Только при шаге сетки 15 минут (.step15, см. calDayHTML) — см. пояснение там же. */
  /* 20.09.2026 по референсу: четверти часа — пунктиром, а не сплошной чертой.
     Рисуем тремя слоями повторяющегося градиента ПО ГОРИЗОНТАЛИ (штрих 5px /
     пробел 5px), каждый слой высотой 1px и прижат к своей доле часа. */
  .dc-wrap.step15 .dc-lane .hr{
    background-image:
      repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 10px),
      repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 10px);
    background-size:100% 1px, 100% 1px, 100% 1px;
    background-position:0 50%, 0 25%, 0 75%;
    background-repeat:no-repeat}
  .dc-lane.dropok .grid{background:color-mix(in srgb,var(--brand) 9%,transparent)}
  /* ТЗ v2.2 §12: индикатор «сейчас» — сдвоенный чип «СЕЙЧАС / HH:MM» живёт
     ЦЕЛИКОМ внутри .dc-time (86px при колонке 108px) и потому не может
     наложиться ни на одну карточку. Текст — в <span class="l">/<span
     class="t"> из business.js (v2.1 держал слово в CSS content — оно не
     переводилось при смене языка); ::after — только фон чипа. */
  /* Сам элемент тянется от левого края .dc-body, а не от 108px: чип внутри
     него — sticky и потому держится у левого края экрана вместе с колонкой
     времени. Раньше чип стоял в координатах контента и при горизонтальной
     прокрутке (много мастеров) уезжал на дорожки. Полоса и точка рисуются
     псевдоэлементами уже со сдвигом на ширину колонки. */
  /* Линия «сейчас» пересекает и колонку времени (её метка стоит у самого
     края), поэтому она выше колонки — иначе метка пропадала бы под ней. */
  .dc-now{position:absolute;left:0;right:0;height:2px;z-index:22;pointer-events:none;background:none}
  /* линия ровная по всей ширине — без затухания: она должна читаться и на
     дальней дорожке, иначе на широком экране правый край «теряет» время */
  .dc-now::after{content:"";position:absolute;left:76px;right:0;top:0;height:1.5px;background:var(--accent)}
  .dc-now::before{content:"";position:absolute;left:71px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;z-index:1;
    background:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
    animation:dcNowPulse 2.4s ease-in-out infinite}
  /* Пилюля со временем — светлая, в одну строку, прижата к точке. Sticky:
     держится у колонки времени при горизонтальной прокрутке дорожек. */
  .dc-now-chip{position:sticky;left:10px;display:block;width:54px;height:22px;
    margin-top:-11px;border-radius:999px;z-index:2;
    background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
    box-shadow:0 2px 6px -2px rgba(184,78,74,.35)}
  /* у самой кромки рабочего окна пилюлю не тянем вверх — там липкая шапка дорожек */
  .dc-now.tight .dc-now-chip{margin-top:2px}
  .dc-now .t{position:absolute;left:0;right:0;top:6px;text-align:center;line-height:1;
    font-size:11.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.005em}
  /* Подпись часа (или четверти), оказавшаяся ровно под пилюлей времени, —
     прячется: пилюля стоит в той же колонке и иначе накрывала бы цифры
     наполовину. Класс ставит dcNowMask() в business.js по фактическим
     координатам, поэтому работает и при смене плотности, и на телефоне. */
  .dc-time .h > span.under-now{opacity:0}
  @keyframes dcNowPulse{
    0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),0 0 10px 3px color-mix(in srgb,var(--accent) 28%,transparent)}
    50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent),0 0 14px 5px color-mix(in srgb,var(--accent) 32%,transparent)}}
  @media (prefers-reduced-motion:reduce){.dc-now::before{animation:none}}

  .dc-ev{position:absolute;left:4px;right:4px;border-radius:9px;border:1px solid;padding:5px 8px;overflow:hidden;
    font-size:11px;line-height:1.34;user-select:none;cursor:grab}
  /* Подъём при наведении — только там, где наведение существует. На
     тачскрине WebKit оставляет :hover висеть после касания, и карточка
     навсегда поднималась над колонкой времени (владелица 29.09.2026).
     Слой 7 поднимает её над соседними карточками (у тех 2–5), но остаётся
     ниже колонки (20). */
  @media (hover:hover){
    .dc-ev:hover{box-shadow:0 8px 22px -8px rgba(0,0,0,.55);z-index:7}
  }
  .dc-ev.drag{cursor:grabbing;box-shadow:var(--shadow-pop);z-index:30;opacity:.96}
  .dc-ev .t{font-weight:800;font-size:10.5px;display:block;letter-spacing:.01em}
  .dc-ev .nm{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dc-ev .svc{color:inherit;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dc-ev .ph{color:inherit;opacity:.72;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dc-ev .rz{position:absolute;left:0;right:0;bottom:0;height:9px;cursor:ns-resize}
  .dc-ev .rz::after{content:"";position:absolute;left:50%;bottom:2px;width:22px;height:3px;border-radius:3px;background:currentColor;opacity:.35;transform:translateX(-50%)}
  /* Карточка визита по макету владелицы (25.09.2026).
     Была сплошная заливка цветом статуса — и статус читался ТОЛЬКО цветом,
     то есть теми, кто помнит палитру наизусть. Стала светлая карточка:
     бледная подложка цвета статуса, полоса слева и пилюля, которая называет
     статус словом. Завершённый визит по тому же макету уходит в тёмный
     графит — закрытое дело перестаёт спорить за внимание с живыми записями.
     Цвет один на весь кабинет: --evd это --st-*-d, тот же токен красит
     строку списка и карточку клиента. */
  .dc-ev.ap{background:color-mix(in srgb,var(--evd) 6%,var(--surface));
    border-color:color-mix(in srgb,var(--evd) 26%,var(--line));color:var(--ink);border-left-width:5px}
  .dc-ev.ap .t{color:var(--ink-soft)}
  .dc-ev.ap .svc,.dc-ev.ap .ph,.dc-ev.ap .one{color:var(--ink-soft);opacity:1}
  .dc-ev.ap .one b,.dc-ev.ap .nm{color:var(--ink)}
  .dc-ev.s-PENDING{border-style:dashed}
  /* Завершённый визит — салатовая карточка целиком. Текст на ней тёмный:
     лайм светлый, белым по нему не прочитать. */
  .dc-ev.ap.s-COMPLETED{background:color-mix(in srgb,var(--st-done-card) 45%,var(--surface));
    border-color:color-mix(in srgb,var(--st-COMPLETED-d) 40%,var(--line));color:var(--ink)}
  .dc-wrap.sat .dc-ev.ap.s-COMPLETED{background:var(--st-done-card);
    border-color:color-mix(in srgb,var(--st-COMPLETED-d) 55%,var(--line))}
  /* Имя не зачёркиваем: в макете оно целое, а статус теперь назван словом.
     Раньше зачёркивание было единственным отличием неявки от отмены. */
  /* пилюля статуса: кружок со значком + подпись отдельным узлом (её переводит
     i18n-auto, поэтому «значок+текст» одной строкой быть не может) */
  .dc-ev.ap .ev-h{display:flex;align-items:center;justify-content:space-between;
    gap:6px;min-width:0;padding-right:12px}
  .dc-ev.ap .ev-h .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:0}
  .dc-ev.ap .ev-st{display:inline-flex;align-items:center;gap:5px;flex:0 1 auto;min-width:0;
    padding:1.5px 7px 1.5px 1.5px;border-radius:999px;line-height:1;white-space:nowrap;overflow:hidden;
    background:var(--evbg);color:color-mix(in srgb,var(--evd) 70%,var(--ink));
    font-size:9.5px;font-weight:800;letter-spacing:.01em}
  .dc-ev.ap .ev-st i{display:grid;place-items:center;width:14px;height:14px;flex:0 0 14px;
    border-radius:50%;background:var(--evd);color:#fff}
  .dc-ev.ap .ev-st i svg{width:9.5px;height:9.5px}
  .dc-ev.ap .ev-st span{overflow:hidden;text-overflow:ellipsis}
  /* Пилюля на салатовой карточке светлее заливки. Подпись — глубже общего
     правила: лайм светлый сам по себе, и на 70% смеси давал 3,8 вместо 4,5. */
  .dc-ev.ap.s-COMPLETED .ev-st,.dc-wrap.sat .dc-ev.ap.s-COMPLETED .ev-st{background:var(--st-COMPLETED);
    color:color-mix(in srgb,var(--st-COMPLETED-d) 56%,var(--ink))}
  /* узкая карточка (несколько записей в одном слоте) — тоже только значок */
  @container (max-width:190px){
    .dc-ev.ap .ev-st{padding:2px}
    .dc-ev.ap .ev-st span{display:none}
  }
  /* ждёт подтверждения — «дышащая» карточка: видно с другого конца сетки.
     Кольцо внутреннее: у .dc-ev overflow:hidden, наружная тень была бы срезана */
  .dc-ev.s-PENDING::before{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;animation:stPulse 2.6s ease-in-out infinite}
  @keyframes stPulse{0%,100%{box-shadow:inset 0 0 0 0 transparent}
    50%{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--st-PENDING-d) 32%,transparent)}}
  @media(prefers-reduced-motion:reduce){.dc-ev.s-PENDING::before{animation:none}}
  /* ТЗ «Календарь»: без диагональной штриховки — резерв времени ровным тоном */
  /* Резерв времени по референсу: светлая штрихованная плашка, тонкая сплошная
     рамка, причина жирным и комментарий обычным — одной строкой. */
  .dc-ev.blk{border-style:solid;border-color:var(--line-strong);color:var(--ink-soft);
    background:repeating-linear-gradient(45deg,#F7F7FA 0 6px,#EFEFF4 6px 7px)}
  .dc-wrap.sat .dc-ev.blk{color:var(--ink-soft)}
  .dc-ev.blk .t{font-weight:700;opacity:.9}
  .dc-ev.blk .blk-l{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font-size:12px}
  .dc-ev.blk .blk-l b{font-weight:800;color:var(--ink)}
  .dc-ev.blk .blk-l span{font-weight:500;color:var(--ink-soft);margin-left:4px}

  /* правая карточка записи (drawer) */
  .cal-drawer{position:fixed;top:0;right:0;bottom:0;width:384px;max-width:94vw;background:var(--surface);border-left:1px solid var(--line-strong);
    box-shadow:-24px 0 60px rgba(0,0,0,.5);z-index:110;transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column}
  .cal-drawer.open{transform:none}
  .cal-drawer .dh{padding:15px 18px;display:flex;align-items:center;gap:10px;color:#fff;background:linear-gradient(120deg,var(--brand),#8E6FE8)}
  .cal-drawer .dh.done{background:linear-gradient(120deg,#3AA76D,#2E8F5C)}
  .cal-drawer .dh.bad{background:linear-gradient(120deg,#C9564A,#AF3F37)}
  .cal-drawer .dh.wait{background:linear-gradient(120deg,#C87334,#A8541D)}
  .cal-drawer .dh b{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
  .cal-drawer .dh .x{margin-left:auto;width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.18);color:#fff;font-size:16px}
  .cal-drawer .db{padding:16px 18px;overflow-y:auto;flex:1}
  .cal-drawer .cl{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
  .cal-drawer .cl .av{width:38px;height:38px;border-radius:50%;background:var(--surface-2);color:var(--ink-soft);display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
  .cal-drawer .cl b{font-size:14px;display:block}
  .cal-drawer .cl span{font-size:12.5px;color:var(--ink-faint)}
  .cal-drawer .srow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;font-size:13px}
  .cal-drawer .srow .p{font-weight:800;white-space:nowrap}
  .cal-drawer .df{margin-bottom:12px}
  .cal-drawer .df label{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);margin-bottom:5px}
  .cal-drawer .df input,.cal-drawer .df select{width:100%;border:1.5px solid var(--line-strong);background:var(--surface-2);border-radius:9px;padding:9px 11px;font-size:14px;color:var(--ink);outline:none}
  .cal-drawer .df input:focus,.cal-drawer .df select:focus{border-color:var(--brand)}
  .cal-drawer .two{display:flex;gap:10px}.cal-drawer .two .df{flex:1}
  .cal-drawer .total{display:flex;justify-content:space-between;font-size:15px;font-weight:800;margin:16px 0 2px}
  .cal-drawer .foot{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:10px}
  .cal-drawer .foot .btn{flex:1}
  /* Раньше была тихой текстовой ссылкой (v1.1 §10) — по прямой просьбе владельца
     (13.09.2026) отмена визита стала заметной красной кнопкой, а не спрятанным
     действием под футером. Отделена от «Перенести/Записать снова/Рассчитать»
     отдельной строкой — по-прежнему не перепутать с обычным действием. */
  .dw-cancel-link{display:block;width:calc(100% - 36px);margin:12px 18px 16px;text-align:center;
    background:var(--accent);border:0;border-radius:12px;
    padding:13px 18px;font-size:13.5px;font-weight:800;color:#fff;cursor:pointer}
  .dw-cancel-link:hover{filter:brightness(.92)}
  .cal-drawer .dh{align-items:flex-start}
  /* Шапка карточки записи по образцу Booksy (скриншоты владелицы 20.09.2026):
     статус — крупной подписью, а смена статуса — отдельной кнопкой «Изменить»
     с выпадающим меню. Прежний .dh-status (системный <select>) убран: его
     нельзя оформить под карточку — на macOS список рисует ОС отдельным окном,
     и неявка с отменой стояли там в одном ряду с «Пришёл» и «Завершена».
     Крестик оставлен СПРАВА, хотя у Booksy он слева: три других ящика
     кабинета (клиент, чат, услуга) держат его справа, и ради одного экрана
     ломать привычку дороже, чем совпасть с чужим макетом. */
  .cal-drawer .dh-l{flex:1;min-width:0}
  .cal-drawer .dh b.dh-st{display:block;font-size:17px;font-weight:800;letter-spacing:.03em;
    text-transform:uppercase;line-height:1.15;overflow-wrap:anywhere}
  .cal-drawer .dh-chg{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    border:1.5px solid rgba(255,255,255,.62);background:rgba(255,255,255,.08);color:#fff;
    border-radius:10px;padding:7px 10px;font-family:inherit;font-size:11.5px;font-weight:800;
    letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
  .cal-drawer .dh-chg:hover{background:rgba(255,255,255,.22)}
  .cal-drawer .dh-chg svg{width:12px;height:12px;flex:0 0 auto;transition:transform .18s}
  .cal-drawer .dh-chg[aria-expanded="true"] svg{transform:rotate(180deg)}
  .cal-drawer .dh-id{font-size:10px;color:rgba(255,255,255,.82);margin-top:5px;font-weight:600}
  /* Меню смены статуса висит под своей кнопкой (обёртка .dh-chgw), а не
     считается координатами: ящик выезжает трансформом, и замер на полпути
     уносил меню за экран. Шапка не режет его — overflow у неё нет, а
     прокручивается только .db ниже. */
  .cal-drawer .dh-chgw{position:relative;flex:0 0 auto}
  .dw-stm{position:absolute;top:calc(100% + 10px);right:0;z-index:5;
    background:var(--surface);border:1px solid var(--line-strong);
    border-radius:14px;box-shadow:var(--shadow-pop);padding:6px;width:288px;
    animation:bh-pop .2s cubic-bezier(.22,.61,.36,1) both}
  /* уголок к кнопке — как на карточке Booksy */
  .dw-stm::before{content:"";position:absolute;top:-7px;right:26px;width:12px;height:12px;
    background:var(--surface);border-left:1px solid var(--line-strong);border-top:1px solid var(--line-strong);
    transform:rotate(45deg);border-radius:3px 0 0 0}
  .dw-stm .stm-grp{display:flex;flex-direction:column;padding:3px 0;border-bottom:1px solid var(--line)}
  .dw-stm .stm-grp:last-child{border-bottom:0}
  .dw-stm button{width:100%;border:0;background:none;text-align:left;padding:8px;border-radius:9px;
    font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:10px}
  .dw-stm button:hover{background:var(--surface-2)}
  .dw-stm button i{width:13px;height:13px;border-radius:50%;border:2px solid;flex:0 0 auto}
  .dw-stm button span{min-width:0}
  .dw-stm button b{display:block;font-size:12.5px;font-weight:800;color:var(--ink)}
  .dw-stm button small{display:block;font-size:10.5px;font-weight:600;color:var(--ink-faint);line-height:1.35}
  .dw-stm button.dang b{color:var(--accent)}
  /* На узком телефоне ящик ужимается до 94vw, и 288px вышли бы за его край.
     Ширину задаём медиазапросом, а не calc(100vw…) в самой ширине: vw внутри
     свойства считается от вьюпорта и в скрытой/нулевой панели даёт 0 — меню
     схлопывалось в 14px при замере. */
  @media(max-width:400px){ .dw-stm{width:250px} }
  .cal-drawer .cl{width:100%;text-align:left;background:none;font-family:inherit;cursor:pointer}
  .cal-drawer .cl:hover{border-color:var(--brand)}
  .cal-drawer .cl .chev{margin-left:auto;color:var(--ink-faint);font-size:18px;flex-shrink:0}
  .cal-drawer .cl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cal-drawer .dw-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 14px}
  .cal-drawer .dw-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 12px;font-size:13px;font-weight:700;color:var(--ink-faint);font-family:inherit}
  .cal-drawer .dw-tabs button.on{color:var(--brand-ink);border-bottom-color:var(--brand)}
  .cal-drawer .df textarea{width:100%;border:1.5px solid var(--line-strong);background:var(--surface-2);border-radius:9px;padding:9px 11px;
    font-size:13.5px;color:var(--ink);outline:none;font-family:inherit;resize:vertical;min-height:64px}
  .cal-drawer .df textarea:focus{border-color:var(--brand)}
  @media(max-width:720px){.cal-drawer{width:100%}}

  /* ===== Календарь v2: левая панель + виды + FAB ===== */
  .cal2{display:block}   /* панель фильтров снята 20.09.2026 — календарь на всю ширину */
  .cal-main{min-width:0;width:100%}

  .ca-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:12px 13px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  .ca-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:9px;display:flex;align-items:center;justify-content:space-between}
  .ca-h .lnk{font-size:11px;font-weight:700;color:var(--brand-ink);text-transform:none;letter-spacing:0}

  .mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .mc-head b{font-size:12.5px;font-weight:700}
  .mc-nav{width:24px;height:24px;border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;font-size:12px;color:var(--ink-soft)}
  .mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
  /* польские подписи длиннее русских («niedz.» против «Вс») — не дают ячейке
     распирать колонку и не переносятся на вторую строку */
  .mc-grid .dh{font-size:8.5px;font-weight:700;color:var(--ink-faint);text-align:center;padding:3px 0;
    min-width:0;overflow:hidden;white-space:nowrap;letter-spacing:-.02em}
  .mc-grid button{aspect-ratio:1/1;border:0;background:none;border-radius:7px;font-size:11px;font-weight:600;color:var(--ink);display:grid;place-items:center}
  .mc-grid button:hover{background:var(--brand-tint)}
  .mc-grid button.oth{color:var(--ink-faint);opacity:.5}
  .mc-grid button.today{box-shadow:inset 0 0 0 1.5px var(--brand)}
  .mc-grid button.sel{background:var(--brand);color:#fff}

  .ca-opts{display:flex;flex-direction:column;gap:2px}
  .ca-opt{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:8px;font-size:12.5px;color:var(--ink-soft);cursor:pointer}
  .ca-opt:hover{background:var(--surface-2)}
  .ca-opt input{width:15px;height:15px;accent-color:var(--brand);flex-shrink:0}
  .ca-opt .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
  .ca-opt .dot.ok{background:var(--success)} .ca-opt .dot.warn{background:var(--warn)}
  .ca-opt .dot.mut{background:var(--ink-faint)} .ca-opt .dot.bad{background:var(--accent)}
  .ca-opt .dot.brand{background:var(--brand)} .ca-opt .dot.blue{background:var(--blue)}
  .ca-search{width:100%;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:8px;padding:7px 10px;font-size:12.5px;color:var(--ink);outline:none;margin-bottom:8px}
  .ca-reset{width:100%;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:9px;font-size:12px;font-weight:700;color:var(--ink-soft)}
  .ca-reset:hover{border-color:var(--brand);color:var(--brand-ink)}

  /* ТЗ «Календарь» §иерархия, п.2: заголовок раздела — страница называется
     так же, как пункт бокового меню, а не сразу датой. */
  .cm-h1{font-size:28px;line-height:34px;font-weight:700;color:var(--ink);margin-bottom:14px}
  /* п.5: легенда статусов — ровные цвета, без градиента (см. calLegendHTML) */

  /* шапка календаря: ряд 1 — дата и режим (главный уровень управления),
     ряд 2 — поиск, фильтры и резерв (действия), ниже — легенда статусов
     (контекст). Порядок и высота 44px — ТЗ «Дизайн верхней части
     календаря» v1.1. Не хватает ширины — переносится группа целиком, а не
     отдельные кнопки, поэтому верстка не рассыпается. */
  .cm-row1{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:12px}
  .cm-h1{margin-bottom:0;flex-shrink:0}
  .cm-row2{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-bottom:14px}
  /* Ширина пилюли даты закреплена по виду. «Суббота, 19 сен» и «Понедельник,
     28 июн» отличаются на 60px, поэтому стрелки ‹ › ездили за текстом при
     каждом листании дня. Числа — по самой длинной подписи вида во всех
     четырёх языках; в «Дне» её задаёт не заголовок, а подпись снизу
     («08:00 – 20:00 · особый день» / «· dzień szczególny»). min-width, а не
     width: на незнакомом системном шрифте пилюля раздвинется, но текст не
     обрежется — обрезать дату хуже, чем один раз сдвинуть стрелку. */
  .cm-nav{display:flex;align-items:center;gap:6px;flex-shrink:0;--cm-dw:200px}
  .cm-nav[data-cv="day"]{--cm-dw:216px}
  .cm-nav[data-cv="week"]{--cm-dw:192px}
  .cm-nav[data-cv="month"]{--cm-dw:164px}
  .cm-today{height:44px;padding:0 16px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:13px;font-size:13px;font-weight:700;color:var(--ink-soft)}
  .cm-today:hover{border-color:var(--brand);color:var(--brand-ink)}
  .cm-arrow{width:44px;height:44px;border:1px solid var(--line-strong);background:var(--surface);border-radius:13px;font-size:16px;color:var(--ink-soft)}
  .cm-arrow:hover{border-color:var(--brand);color:var(--brand-ink)}
  .cm-date{font-size:15px;font-weight:700;padding:2px 10px;white-space:nowrap;cursor:pointer;border-radius:13px;
    border:1px solid transparent;line-height:1.2;flex-shrink:0;
    min-width:var(--cm-dw);text-align:center}
  .cm-date:hover{border-color:var(--line-strong);color:var(--brand-ink)}
  .cm-date:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
  .cm-date small{display:block;font-size:11px;font-weight:600;color:var(--ink-faint)}
  .cm-date small:empty{display:none}
  .cm-views{display:flex;align-items:center;gap:2px;height:44px;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:13px;padding:3px;flex-shrink:0}
  .cm-views button{border:0;background:none;height:100%;padding:0 14px;font-size:12.5px;font-weight:700;color:var(--ink-soft);border-radius:10px}
  .cm-views button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .cm-add{height:44px;display:inline-flex;align-items:center;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);border-radius:13px;padding:0 16px;font-size:12.5px;font-weight:700;white-space:nowrap;flex-shrink:0}
  .cm-add:hover{border-color:var(--brand);color:var(--brand-ink)}
  @media(max-width:900px){
    .cm-row1,.cm-row2{flex-wrap:wrap}
      .cm-row2 .cm-search{flex:1 1 100%;max-width:none;order:-1}
  }
  /* ТЗ §8.2: «Неделя»/«Месяц» нечитаемы на 375px — только «День» и «Список» */
  @media(max-width:639px){
    .cm-views [data-cv="week"],.cm-views [data-cv="month"]{display:none}
  }

  /* цветовые схемы карточки — переменные ставит JS через inline style, тут только палитры-статусы */
  .dc-ev .pay{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%}
  .dc-ev .pay.paid{background:var(--success)} .dc-ev .pay.unpaid{background:var(--ink-faint)}
  .dc-ev .pay.part{background:var(--warn)} .dc-ev .pay.refund{background:var(--accent)}
  /* ——— вторая ось на той же метке (просьба владелицы 02.10.2026) ———
     Заливка точки по-прежнему оплата, кольцо вокруг — ответ клиента на
     письмо с просьбой подтвердить визит. Точка выбрана потому, что это
     единственная метка карточки, которую переживают все размеры: накрытая
     карточка на телефоне (.dc-ev.cov) прячет ↻, ✎ и пилюлю статуса, а точку
     оставляет. Светофор: жёлтое ждём, красное не ответил, зелёное
     подтвердил — значения не надо объяснять.

     box-shadow, а не border: рамка изменила бы размер самой точки и
     сдвинула её относительно угла, тень растёт наружу и не двигает ничего.
     Светлый промежуток 1,5 px обязателен — у оплаченного визита заливка
     тоже зелёная, и без промежутка метка стала бы сплошным пятном.

     Красное кольцо толще зелёного нарочно: кто путает красный с зелёным,
     различит толщиной, а слово всегда есть в подсказке. */
  .dc-ev[data-cf] .pay{top:6px;right:7px}
  .dc-ev[data-cf="awaiting"]    .pay{box-shadow:0 0 0 1.5px var(--surface),0 0 0 3px   var(--warn)}
  .dc-ev[data-cf="unconfirmed"] .pay{box-shadow:0 0 0 1.5px var(--surface),0 0 0 3.5px var(--accent)}
  .dc-ev[data-cf^="confirmed"]  .pay{box-shadow:0 0 0 1.5px var(--surface),0 0 0 3px   var(--success)}
  /* Самая мелкая карточка бывает 12 px (evHeight → Math.max(h,12)), а точка
     стоит на top:5px и высотой 8 px — она срезалась нижним краем ещё до
     этой правки. Привязка к середине чинит это на любой высоте. */
  .dc-ev.sz-xs .pay{top:50%;right:7px;margin-top:-4px}
  /* Значок пересечения «!» живёт в том же углу (right:4px top:3px) и налезал
     на точку уже сегодня. С кольцом метка шире — сдвигаем значок левее.
     На телефоне .cfl уходит вниз, там сдвиг не нужен. */
  .dc-ev.conf[data-cf] .cfl{right:26px}
  /* Без права на финансы точка не рисовалась вовсе — тогда ответ клиента
     пропал бы для администратора. Рисуем нейтральной заливкой. */
  .dc-ev .pay.nofin{background:var(--line-strong)}

  /* пилюля словами — только на полной карточке, вместо пилюли статуса
     у NEW и CONFIRMED: «запись стоит в графике, значит подтверждена» —
     эта пилюля не сообщала ничего (владелица 02.10.2026) */
  .dc-ev.ap .cf-pill{display:inline-flex;align-items:center;gap:5px;flex:0 1 auto;min-width:0;
    padding:1.5px 7px 1.5px 1.5px;border-radius:999px;line-height:1;white-space:nowrap;overflow:hidden;
    font-size:9.5px;font-weight:800;letter-spacing:.01em}
  .dc-ev.ap .cf-pill i{display:grid;place-items:center;width:14px;height:14px;flex:0 0 14px;
    border-radius:50%;color:#fff}
  .dc-ev.ap .cf-pill i svg{width:9.5px;height:9.5px}
  .dc-ev.ap .cf-pill span{overflow:hidden;text-overflow:ellipsis}
  .dc-ev.ap[data-cf="awaiting"] .cf-pill{background:color-mix(in srgb,var(--warn) 17%,var(--surface));
    color:color-mix(in srgb,var(--warn) 78%,var(--ink))}
  .dc-ev.ap[data-cf="awaiting"] .cf-pill i{background:var(--warn)}
  .dc-ev.ap[data-cf="unconfirmed"] .cf-pill{background:color-mix(in srgb,var(--accent) 15%,var(--surface));
    color:color-mix(in srgb,var(--accent) 74%,var(--ink))}
  .dc-ev.ap[data-cf="unconfirmed"] .cf-pill i{background:var(--accent)}
  .dc-ev.ap[data-cf^="confirmed"] .cf-pill{background:color-mix(in srgb,var(--success) 16%,var(--surface));
    color:color-mix(in srgb,var(--success) 72%,var(--ink))}
  .dc-ev.ap[data-cf^="confirmed"] .cf-pill i{background:var(--success)}
  /* узкая карточка — как у пилюли статуса, только значок */
  @container (max-width:190px){
    .dc-ev.ap .cf-pill{padding:2px}
    .dc-ev.ap .cf-pill span{display:none}
  }

  /* week */
  .wk{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
  .wk-col{background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;min-height:120px}
  .wk-col .wh{padding:8px 9px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:800;display:flex;justify-content:space-between;align-items:center}
  .wk-col .wh.td{color:var(--brand-ink)}
  .wk-col .wh small{font-weight:600;color:var(--ink-faint)}
  .wk-col .wb{padding:7px;display:flex;flex-direction:column;gap:5px}
  .wk-ev{border-left:3px solid;border-radius:7px;background:var(--surface-2);padding:5px 7px;font-size:11px;cursor:pointer}
  .wk-ev b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wk-ev span{color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .wk-more{font-size:11px;font-weight:700;color:var(--brand-ink);padding:2px 7px;background:none;border:0;text-align:left}

  /* month */
  .mo{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;background:var(--surface)}
  .mo .mdh{padding:7px 8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);border-bottom:1px solid var(--line);border-right:1px solid var(--line);background:var(--surface-2)}
  .mo .mdh:nth-child(7n){border-right:0}
  .mo .mc{min-height:104px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:5px 6px;cursor:pointer}
  .mo .mc:nth-child(7n){border-right:0}
  .mo .mc:hover{background:var(--surface-2)}
  .mo .mc .dn{font-size:11.5px;font-weight:700;color:var(--ink-soft)}
  .mo .mc.oth .dn{color:var(--ink-faint);opacity:.5}
  .mo .mc.td .dn{background:var(--brand);color:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center}
  .mo .mc .me{display:block;font-size:10px;border-left:3px solid;padding:1px 4px;border-radius:4px;background:var(--surface-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mo .mc .mmore{font-size:10px;font-weight:700;color:var(--brand-ink);margin-top:3px}


  /* --- §3, §5 загрузка в видах «Неделя» и «Месяц» --- */
  .wk-load{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  .wl-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
  .wl-h b{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
  .wl-h span{font-size:15px;font-weight:800;letter-spacing:-.01em}
  .wl-h em{font-style:normal;font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-left:auto}
  .wl-row{display:grid;grid-template-columns:minmax(96px,1.1fr) 46px minmax(140px,2fr) minmax(150px,1.6fr);
    align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line)}
  .wl-row .nm{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wl-row .pc{font-size:14px;font-weight:800;text-align:right}
  .wl-row .sub{font-size:11px;color:var(--ink-faint);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wl-row .bars{display:flex;gap:3px;align-items:flex-end;height:26px}
  .wl-b{flex:1;height:100%;border:0;background:var(--surface-2);border-radius:4px;display:flex;align-items:flex-end;padding:0;overflow:hidden}
  .wl-b:hover{outline:1.5px solid var(--brand);outline-offset:-1px}
  .wl-b.on{outline:1.5px solid var(--brand-ink);outline-offset:-1px}
  .wl-b i{display:block;width:100%;border-radius:4px}
  .wl-lg{font-size:11px;color:var(--ink-faint);margin-top:8px}
  .wk-col.sel{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand-tint)}
  .wk-col .wh{flex-wrap:wrap}
  .wh-l{flex:1 1 100%;display:flex;align-items:center;gap:6px;margin-top:4px}
  .wh-l b{font-size:11px;font-weight:800}
  .wh-l i{flex:1;height:4px;border-radius:3px;background:var(--line);overflow:hidden;display:block}
  .wh-l i u{display:block;height:100%;border-radius:3px;text-decoration:none}
  .mo-sum{display:flex;gap:24px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-strong);
    border-radius:12px;padding:13px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  .mo-sum b{font-size:20px;font-weight:800;display:block;letter-spacing:-.02em}
  .mo-sum span{font-size:11.5px;color:var(--ink-faint);font-weight:600}
  .mo .mc{position:relative}
  .mo .mc.sel{box-shadow:inset 0 0 0 1.5px var(--brand)}
  .mo .mc .ml{display:flex;align-items:center;gap:5px;margin-top:3px}
  .mo .mc .ml b{font-size:10px;font-weight:800}
  .mo .mc .ml i{flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden;display:block}
  .mo .mc .ml i u{display:block;height:100%;text-decoration:none}
  .wk-ev.dragging,.me.dragging{opacity:.5}
  /* тот же запрет прокрутки пальцем был у недели и месяца — см. .dc-ev ниже */
  .wk-ev,.mo .mc .me{touch-action:pan-x pan-y}
  .wk-ev.dragging,.mo .mc .me.dragging{touch-action:none}
  /* §11 мини-календарь: компактный индикатор количества визитов в дне */
  .mc-grid button{position:relative}
  .mc-grid button .mi{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--brand);opacity:.55}
  .mc-grid button .mi.hi{width:12px;border-radius:2px;opacity:.85}
  .mc-grid button .mi.mid{width:8px;border-radius:2px;opacity:.7}
  .mc-grid button.sel .mi{background:#fff;opacity:.95}

  /* list */
  .lst-sum{display:flex;gap:22px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;margin-bottom:12px}
  .lst-sum div b{font-size:20px;font-weight:800;display:block;letter-spacing:-.02em}
  .lst-sum div span{font-size:11px;color:var(--ink-faint);font-weight:600}
  .lst-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:7px;cursor:pointer}
  .lst-row:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
  .lst-row .lt{font-weight:800;font-size:13px;width:96px;flex-shrink:0}
  .lst-row .lc{flex:1;min-width:0}
  .lst-row .lc b{font-size:13px;display:block}
  .lst-row .lc span{font-size:12px;color:var(--ink-faint)}
  .lst-row .lp{font-weight:700;font-size:13px;flex-shrink:0}

  /* ===== строка визита в списке календаря (макет владелицы, 25.09.2026) =====
     Статус больше не мелкая плашка в углу — его держит вся строка: цвет
     карточки, полоса слева и пилюля со значком. Завершённый визит уходит в
     тёмный графит (дело закрыто, глазу не за что цепляться), неявка — в
     красный (предстоит разговор с клиентом), остальные статусы остаются на
     светлой карточке с полосой своего цвета.
     Цвет берётся из --st-*-d через одну переменную --lr-c: тот же токен
     красит карточку визита в сетке календаря и строку в карточке клиента,
     так что статус всюду одного цвета и меняется в одном месте. */
  .lst-row.ap{--lr-c:var(--line-strong);
    display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;
    position:relative;overflow:hidden;border-radius:16px;padding:15px 14px 15px 20px;
    border:1px solid color-mix(in srgb,var(--lr-c) 22%,var(--line));
    background:color-mix(in srgb,var(--lr-c) 4%,var(--surface));margin-bottom:9px}
  .lst-row.ap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--lr-c)}
  .lst-row.ap:hover{border-color:color-mix(in srgb,var(--lr-c) 45%,var(--line));box-shadow:var(--shadow-sm)}
  .lst-row.ap .lr-b{min-width:0}
  .lst-row.ap .lr-t{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
    color:var(--ink-soft);letter-spacing:.01em}
  .lst-row.ap .lr-t svg{width:17px;height:17px;flex:0 0 17px;color:var(--lr-c)}
  .lst-row.ap .lr-n{display:block;font-size:17px;font-weight:800;line-height:1.25;margin:5px 0 2px;
    letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lst-row.ap .lr-s{font-size:13.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lst-row.ap .lr-m{font-size:12px;color:var(--ink-faint);margin-top:3px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lst-row.ap .lr-r{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
  /* пилюля: кружок со значком + подпись отдельным узлом (её переводит i18n) */
  .lst-row.ap .lr-st{display:inline-flex;align-items:center;gap:9px;padding:5px 15px 5px 5px;
    border-radius:999px;background:var(--lr-bg);
    color:color-mix(in srgb,var(--lr-c) 70%,var(--ink));font-size:14px;font-weight:800;white-space:nowrap}
  .lst-row.ap .lr-st i{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;
    border-radius:50%;background:var(--lr-c);color:#fff}
  .lst-row.ap .lr-st i svg{width:15px;height:15px}
  .lst-row.ap .lr-p{font-size:14px;font-weight:800;color:var(--ink)}
  .lst-row.ap .lr-ch{display:grid;place-items:center;width:24px;height:24px;color:var(--ink-faint)}
  .lst-row.ap .lr-ch svg{width:19px;height:19px}
  .lst-row.ap:hover .lr-ch{color:var(--lr-c)}
  .lst-row.ap.s-NEW{--lr-c:var(--st-NEW-d);--lr-bg:var(--st-NEW)}
  .lst-row.ap.s-PENDING{--lr-c:var(--st-PENDING-d);--lr-bg:var(--st-PENDING)}
  .lst-row.ap.s-CONFIRMED{--lr-c:var(--st-CONFIRMED-d);--lr-bg:var(--st-CONFIRMED)}
  .lst-row.ap.s-ARRIVED{--lr-c:var(--st-ARRIVED-d);--lr-bg:var(--st-ARRIVED)}
  .lst-row.ap.s-IN_PROGRESS{--lr-c:var(--st-IN_PROGRESS-d);--lr-bg:var(--st-IN_PROGRESS)}
  .lst-row.ap.s-COMPLETED{--lr-c:var(--st-COMPLETED-d);--lr-bg:var(--st-COMPLETED)}
  .lst-row.ap.s-NO_SHOW{--lr-c:var(--st-NO_SHOW-d);--lr-bg:var(--st-NO_SHOW)}
  .lst-row.ap.s-CANCELLED_CLIENT{--lr-c:var(--st-CANCELLED_CLIENT-d);--lr-bg:var(--st-CANCELLED_CLIENT)}
  .lst-row.ap.s-CANCELLED_BUSINESS{--lr-c:var(--st-CANCELLED_BUSINESS-d);--lr-bg:var(--st-CANCELLED_BUSINESS)}
  /* Имя НЕ зачёркиваем, в отличие от сетки календаря: в макете владелицы оно
     целое, и здесь это оправдано — в сетке карточка мелкая и статус читается
     только цветом, а тут о нём прямым текстом говорит пилюля. */
  /* завершённый визит — тёмная карточка из макета. Полоса слева на ней лишняя:
     на графите она не читается, а статус и так виден пилюлей. */
  .lst-row.ap.s-COMPLETED{background:color-mix(in srgb,var(--st-done-card) 45%,var(--surface));
    border-color:color-mix(in srgb,var(--st-COMPLETED-d) 40%,var(--line))}
  .lst-row.ap.s-COMPLETED .lr-st{background:var(--st-COMPLETED);
    color:color-mix(in srgb,var(--st-COMPLETED-d) 56%,var(--ink))}
  @media(max-width:640px){
    .lst-row.ap{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:13px 12px 13px 17px}
    .lst-row.ap .lr-n{font-size:16px}
    .lst-row.ap .lr-st{font-size:13px;padding-right:13px}
    .lst-row.ap .lr-st i{width:24px;height:24px;flex:0 0 24px}
    /* шеврон на телефоне не нужен: по строке и так тапают целиком */
    .lst-row.ap .lr-ch{display:none}
  }

  /* ===== FAB-док: чат и «плюс» стоят рядом, а не друг на друге =====
     Все плавающие кнопки живут в одном ряду справа снизу. Когда справа
     выезжает панель, весь док уезжает влево на её ширину (--fab-shift). */
  :root{
    --fab-size:56px;   /* диаметр круглой кнопки */
    --fab-gap:28px;    /* зазор между кнопками */
    --fab-r:20px;      /* отступ дока от правого края */
    --fab-b:20px;      /* отступ дока от низа */
    --fab-shift:0px;   /* на сколько док уезжает влево от выехавшей панели */
    --eq-dock:88px;    /* сколько занимает чат в правом нижнем углу (обновляет messenger.js) */
  }
  /* карточка записи (.cal-drawer, 384px) — двигаем док за её левый край */
  body:has(#cal-drawer.open){ --fab-shift:396px }
  /* Новая карточка записи (.avc, 468px) — та же логика, своя ширина.
     04.10.2026: панель переименовали в #avc-drawer, и правила дока, писанные
     под старое имя, перестали её видеть — «плюс» и кнопка чата повисли прямо
     поверх карточки и срезали её правый край. */
  body:has(#avc-drawer.open),body.avc-open{ --fab-shift:480px }
  /* ящик риска (.br-dw) шире и резиновый — держим сдвиг ровно по его ширине */
  body:has(#br-drawer.open){ --fab-shift:calc(clamp(430px, 48vw, 760px) + 12px) }
  /* карточка клиента (.cl-dw, 52vw) — раньше чат просто оставался под ней */
  body:has(#cl-drawer.open){ --fab-shift:calc(clamp(460px, 52vw, 820px) + 12px) }

  /* 1-я позиция (крайняя правая) — чат ELYQO Messenger.
     Ширину занятого угла он сообщает сам в --eq-dock (кнопка, пилюля или окно),
     поэтому «плюс» календаря всегда встаёт левее и ничего не перекрывается. */
  body .eq-fab,body .eq-pill{right:calc(var(--fab-r) + var(--fab-shift));bottom:var(--fab-b);
    transition:right .22s ease,bottom .22s ease,opacity .18s ease,transform .18s ease}
  body .eq-win:not(.mob):not(.full){right:calc(var(--fab-r) + var(--fab-shift));bottom:var(--fab-b);
    transition:right .22s ease}

  /* 2-я позиция — «плюс» календаря НАД кнопкой чата (20.09.2026, просьба
     владелицы: раньше стоял слева и на телефоне прижимался к краю).
     Когда чат раскрыт окном, «плюс» уходит левее — над окном он висел бы
     посреди экрана (правило ниже, по видимому .eq-win). */
  .cal-fab{position:fixed;width:var(--fab-size);height:var(--fab-size);
    right:calc(var(--fab-r) + var(--fab-shift));bottom:calc(var(--fab-b) + 72px);
    border-radius:50%;background:var(--grad);color:#fff;
    border:0;font-size:26px;line-height:1;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(91,76,255,.7);z-index:209;
    transition:right .22s ease,bottom .22s ease,opacity .18s ease,transform .18s ease}
  .cal-fab:hover{filter:brightness(1.06)}
  .cal-fab.open{transform:rotate(45deg)}
  .cal-fab:focus-visible{outline:none;box-shadow:0 14px 34px -10px rgba(91,76,255,.7),0 0 0 3px #fff,0 0 0 6px rgba(140,120,255,.65)}

  /* ---- иконка «+» и орбитальное кольцо (ТЗ «Кнопка создания записи» v1.0) ----
     Родственно кольцу чата (.eq-orbit в messenger.js), но без фоновой
     пульсации: в покое кольцо невидимо, проявляется только как реакция на
     hover/focus/press. Кольцо частичное (дуга через mask-image), а не полная
     окружность — так кнопка выглядит легче кнопки чата, а не дублирует её. */
  .cal-fab svg.cf-plus{width:24px;height:24px;position:relative;z-index:1;pointer-events:none}
  .cf-ring{position:absolute;inset:-7px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.9);
    transition:opacity .2s ease,transform .2s ease}
  .cf-ring-arc{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.8);
    -webkit-mask-image:conic-gradient(transparent 0deg,#000 40deg,#000 120deg,transparent 165deg,transparent 360deg);
    mask-image:conic-gradient(transparent 0deg,#000 40deg,#000 120deg,transparent 165deg,transparent 360deg)}
  .cf-ring-dot{position:absolute;top:-2px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
    background:#fff;opacity:0;box-shadow:0 0 6px 1px rgba(255,255,255,.85),0 0 10px 2px rgba(255,144,193,.65);
    transition:opacity .12s ease}
  /* hover (desktop) и focus (клавиатура) — мягкое появление дуги */
  .cal-fab:hover .cf-ring,.cal-fab:focus-visible .cf-ring{opacity:1;transform:scale(1)}
  /* touch: на мобильном/планшете hover недоступен — та же дуга на нажатии служит touch feedback'ом */
  .cal-fab:active .cf-ring{opacity:1;transform:scale(1.02)}
  /* активное действие + нажатие (§1, состояния 3–4): дуга ненадолго оборачивается
     шире вокруг кнопки, на дуге вспыхивает акцентная точка, кнопка слегка сжимается */
  .cal-fab.cf-tap{animation:cf-squeeze .15s cubic-bezier(.3,.7,.4,1)}
  .cal-fab.cf-tap .cf-ring{opacity:1;transform:scale(1.05);animation:cf-ring-wrap .28s cubic-bezier(.2,.8,.3,1)}
  .cal-fab.cf-tap .cf-ring-dot{opacity:1;transition:opacity .1s ease .06s}
  /* опциональный loading (§1, состояние 5) — включать классом .loading только если
     открытие формы реально задержалось (>300мс на ответ API), см. ТЗ §3 */
  .cal-fab.loading .cf-ring{opacity:1;transform:scale(1)}
  .cal-fab.loading .cf-ring-arc{animation:cf-ring-spin 1.5s linear infinite}
  @keyframes cf-squeeze{0%{transform:scale(1)}50%{transform:scale(.9)}100%{transform:scale(1)}}
  @keyframes cf-ring-wrap{
    0%{-webkit-mask-image:conic-gradient(transparent 0deg,#000 40deg,#000 120deg,transparent 165deg,transparent 360deg);
       mask-image:conic-gradient(transparent 0deg,#000 40deg,#000 120deg,transparent 165deg,transparent 360deg)}
    55%{-webkit-mask-image:conic-gradient(transparent 0deg,#000 20deg,#000 215deg,transparent 250deg,transparent 360deg);
        mask-image:conic-gradient(transparent 0deg,#000 20deg,#000 215deg,transparent 250deg,transparent 360deg)}
    100%{-webkit-mask-image:conic-gradient(transparent 0deg,#000 40deg,#000 120deg,transparent 165deg,transparent 360deg);
         mask-image:conic-gradient(transparent 0deg,#000 40deg,#000 120deg,transparent 165deg,transparent 360deg)}
  }
  @keyframes cf-ring-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){
    .cal-fab.cf-tap{animation:none}
    .cf-ring{transition:opacity .12s ease!important;transform:none!important}
    .cal-fab.cf-tap .cf-ring{animation:none;opacity:1;transform:none}
    .cal-fab.loading .cf-ring-arc{animation:none}
  }
  .fab-menu{position:fixed;right:26px;bottom:88px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;
    box-shadow:var(--shadow-pop);padding:6px;z-index:209;display:none;min-width:210px}
  .fab-menu.open{display:block}
  /* меню «плюса» держится над своей кнопкой (у #date-pop своя inline-раскладка) */
  #fab-menu{right:calc(var(--fab-r) + var(--fab-shift));
    bottom:calc(var(--fab-b) + 72px + var(--fab-size) + 10px);transition:right .22s ease,bottom .22s ease}
  /* чат раскрыт окном — «плюс» и его меню встают слева от окна, как прежде */
  body:has(.eq-win:not([hidden])) .cal-fab{
    right:calc(var(--fab-r) + var(--eq-dock, 88px) + var(--fab-shift));bottom:var(--fab-b)}
  body:has(.eq-win:not([hidden])) #fab-menu{
    right:calc(var(--fab-r) + var(--eq-dock, 88px) + var(--fab-shift));
    bottom:calc(var(--fab-b) + var(--fab-size) + 10px)}

  /* модалка кроет весь экран — сдвигаться некуда, прячем док */
  body:has(#modal:not([hidden])) .eq-fab,
  body:has(#modal:not([hidden])) .eq-pill,
  body:has(#modal:not([hidden])) .cal-fab,
  body:has(#modal:not([hidden])) #fab-menu{opacity:0;pointer-events:none}
  /* полноэкранный selector услуг (ТЗ «Сотрудники» §19) убирает кнопку чата так же, как модалка */
  body:has(.stf-sv.sheet) .eq-fab,
  body:has(.stf-sv.sheet) .eq-pill,
  body:has(.stf-sv.sheet) .cal-fab,
  body:has(.stf-sd.open) .eq-fab,
  body:has(.stf-sd.open) .eq-pill,
  body:has(.stf-sd.open) .cal-fab{opacity:0;pointer-events:none}

  /* узкий экран: панель занимает почти всю ширину — прячем док, а не двигаем */
  @media(max-width:900px){
    body:has(#cal-drawer.open){--fab-shift:0px}
    body:has(#cal-drawer.open) .eq-fab,
    body:has(#cal-drawer.open) .eq-pill,
    body:has(#cal-drawer.open) .cal-fab,
    body:has(#cal-drawer.open) #fab-menu{opacity:0;pointer-events:none;transform:translateY(14px)}
    body:has(#avc-drawer.open),body.avc-open{--fab-shift:0px}
    body:has(#avc-drawer.open) .eq-fab,
    body:has(#avc-drawer.open) .eq-pill,
    body:has(#avc-drawer.open) .cal-fab,
    body:has(#avc-drawer.open) #fab-menu,
    body.avc-open .eq-fab,
    body.avc-open .eq-pill,
    body.avc-open .cal-fab,
    body.avc-open #fab-menu{opacity:0;pointer-events:none;transform:translateY(14px)}
  }
  @media(max-width:720px){
    body:has(#br-drawer.open){--fab-shift:0px}
    body:has(#br-drawer.open) .eq-fab,
    body:has(#br-drawer.open) .eq-pill,
    body:has(#br-drawer.open) .cal-fab,
    body:has(#br-drawer.open) #fab-menu{opacity:0;pointer-events:none;transform:translateY(14px)}
  }
  /* карточка клиента разворачивается во весь экран уже на 980px — с этой ширины
     док прячем, двигать его больше некуда */
  @media(max-width:980px){
    body:has(#cl-drawer.open){--fab-shift:0px}
    body:has(#cl-drawer.open) .eq-fab,
    body:has(#cl-drawer.open) .eq-pill,
    body:has(#cl-drawer.open) .cal-fab,
    body:has(#cl-drawer.open) #fab-menu{opacity:0;pointer-events:none;transform:translateY(14px)}
  }
  /* Страховка на любой ширине: класс ставится скриптом (avcDock), не зависит
     от поддержки :has() и от того, когда панель попала в разметку.
     display:none вместо прозрачности — кнопку нельзя случайно нажать
     сквозь панель, и она не участвует в раскладке. */
  @media(max-width:900px){
    body.avc-open .eq-fab,body.avc-open .eq-pill,
    body.avc-open .cal-fab,body.avc-open #fab-menu{display:none!important}
  }
  /* Кружок, в котором лежит фотография. Класс ставит faceHTML (business.js).
     Саму картинку несёт инлайновый background-image — иначе под каждый из
     семи размеров кружка (визитка 28, клиент 44, чат, CRM, формы) пришлось
     бы заводить своё правило. Здесь только то, что инлайном задавать
     неправильно: ровный фон на время загрузки, чтобы вместо лица не мигал
     градиент-заглушка, и запрет повтора, если картинка меньше кружка. */
  .has-ph{background-color:#ECEAF6;background-repeat:no-repeat}

  .fab-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:11px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink)}
  .fab-menu button:hover{background:var(--surface-2)}
  .fab-menu button svg{width:16px;height:16px;color:var(--brand)}

  /* undo bar */
  .undo-bar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#151330;color:#F4F3FF;
    border-radius:12px;padding:10px 12px 10px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:14px;
    box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transition:all .2s;z-index:120}
  .undo-bar.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
  .undo-bar button{background:rgba(255,255,255,.16);border:0;color:#fff;font-weight:800;font-size:12px;padding:6px 12px;border-radius:8px}

  /* «занято» — отсутствие сотрудника (оверлей на всю дорожку); ровный тон, без штриховки */
  .dc-ev.abs{background:color-mix(in srgb,var(--accent) 12%,var(--surface));
    border-color:var(--accent);border-style:dashed;color:var(--accent)}
  .dc-ev[data-cb]{border-left-width:4px}
  /* режим «Насыщенные» — те же статусы глубоким тоном, текст белый */
  /* «Насыщенные» (настройка «Насыщенность» в календаре) больше не заливают
     карточку целиком: с 25.09.2026 карточка светлая по макету владелицы, и
     сплошная заливка вернула бы ровно то, от чего макет уходит. Насыщенность
     теперь усиливает подложку и рамку — день читается контрастнее, но
     остаётся тем же. Завершённый визит графитовый в обоих режимах. */
  .dc-wrap.sat .dc-ev.ap{background:color-mix(in srgb,var(--evd) 22%,var(--surface));
    border-color:color-mix(in srgb,var(--evd) 55%,var(--line))}
  .dc-wrap.sat .dc-ev.ap .ev-st{background:var(--evbg)}
  .dc-wrap.sat .dc-ev .svc{opacity:.92} .dc-wrap.sat .dc-ev .ph{opacity:.8}

  /* gear + bell в шапке календаря */
  .cm-tools{display:flex;gap:6px;flex-shrink:0;align-items:center;margin-left:auto}
  .cm-tools button{width:44px;height:44px;border:1px solid var(--line-strong);background:var(--surface);border-radius:13px;color:var(--ink-soft);display:grid;place-items:center;position:relative}
  .cm-tools button:hover{border-color:var(--brand);color:var(--brand-ink)}
  .cm-tools button svg{width:17px;height:17px;display:block;flex-shrink:0;overflow:visible}
  .cm-tools .nb{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;line-height:16px}
  .cm-tools .nb[hidden]{display:none}

  /* Права ассистента: флажок и подпись в одной строке сетки — длинный текст
     переносится под собственным отступом, а не под флажком. */
  .ai-sw{display:grid;grid-template-columns:16px 1fr;align-items:start;column-gap:8px;row-gap:2px;
    padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
  .ai-sw:last-of-type{border-bottom:0}
  .ai-sw input{width:16px;height:16px;margin:2px 0 0;grid-column:1}
  .ai-sw b{font-weight:700;grid-column:2}
  .ai-sw .muted{display:block;grid-column:2;margin:0;font-size:12px;line-height:1.45}
  /* Языки общения — ряд флажков. Раньше это были inline-элементы с полями:
     при крупном шрифте, увеличении страницы или в Safari, где системный
     чекбокс выше, подписи наезжали друг на друга (владелица 12.09.2026).
     Теперь это настоящая сетка с зазорами, а у каждого флажка свой размер и
     запрет на сжатие. */
  .fld .ai-chips{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:2px}
  .fld label.ai-chip{display:inline-flex;align-items:center;gap:8px;margin:0;min-height:24px;
    font-size:13px;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--ink)}
  .fld label.ai-chip input{flex:0 0 auto;width:16px;height:16px;margin:0}
  .fld label.ai-chip>span{white-space:nowrap}
  .ai-lock{margin-top:12px;padding:11px 12px;border:1px dashed var(--line);border-radius:10px;background:#FBFAFF}
  .ai-lock .muted{display:block;margin-top:4px;font-size:12px;line-height:1.5}
  /* settings screen */
  .cs-wrap{max-width:720px}
  .cs-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .cs-back{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  .cs-sec{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  .cs-sec h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:12px}
  .cs-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
  .cs-row:last-child{border-bottom:0}
  .cs-row .lbl b{font-size:13px;font-weight:600;display:block}
  .cs-row .lbl span{font-size:11.5px;color:var(--ink-faint)}
  .cs-row select,.cs-row input[type=number]{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:8px;padding:7px 10px;font-size:13px;color:var(--ink);min-width:150px}
  .cs-seg{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:9px;padding:2px}
  .cs-seg button{border:0;background:none;padding:6px 12px;font-size:12px;font-weight:700;color:var(--ink-soft);border-radius:7px}
  .cs-seg button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .cs-tgl{appearance:none;-webkit-appearance:none;width:40px;height:23px;border-radius:999px;background:#DDD8EE;position:relative;cursor:pointer;flex-shrink:0}
  .cs-tgl:checked{background:var(--brand)}
  .cs-tgl::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
  .cs-tgl:checked::after{transform:translateX(17px)}
  .cs-chks{display:flex;flex-wrap:wrap;gap:7px}
  .cs-chk{display:flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:600;color:var(--ink-soft)}
  .cs-chk input{width:14px;height:14px;accent-color:var(--brand)}
  .cs-chk:has(input:checked){border-color:var(--brand);color:var(--brand-ink);background:var(--brand-tint)}
  /* ——— заявки, ждущие подтверждения: полоса над сеткой и блок в карточке ——— */
  .pend-bar{display:flex;align-items:center;gap:12px;border:1px solid var(--st-PENDING);border-radius:12px;padding:10px 12px;margin-bottom:12px;
    background:color-mix(in srgb,var(--st-PENDING) 20%,var(--surface))}
  .pend-bar .ic{width:30px;height:30px;border-radius:9px;background:var(--st-PENDING);display:grid;place-items:center;font-size:15px;flex:0 0 auto}
  .pend-bar .tx{min-width:0;flex:1}
  .pend-bar .tx b{display:block;font-size:13px}
  .pend-bar .tx span{display:block;font-size:11.5px;color:var(--ink-soft)}
  /* полоса активного фильтра календаря (business.js · calFilterBarHTML):
     тот же силуэт, что у полосы заявок, но брендовый, а не жёлтый — это не
     задача владельца, а объяснение, почему сетка выглядит пустой */
  .cal-fbar{display:flex;align-items:center;gap:12px;border:1px solid var(--brand-soft);border-radius:12px;
    padding:10px 12px;margin-bottom:12px;background:var(--brand-tint)}
  .cal-fbar .ic{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;
    display:grid;place-items:center;flex:0 0 auto}
  .cal-fbar .ic svg{width:17px;height:17px}
  .cal-fbar .tx{min-width:0;flex:1}
  /* Только прямые потомки: внутри строк лежат свои span-ы — каждая фраза
     отдельным узлом ради перевода (business.js · calFilterBarHTML), и общий
     селектор ставил их столбиком. */
  .cal-fbar .tx>b{display:block;font-size:13px}
  .cal-fbar .tx>span{display:block;font-size:11.5px;color:var(--ink-soft)}
  .cal-fbar .tx>b span,.cal-fbar .tx>span span,.cal-fbar .tx>span b{display:inline;font-size:inherit}
  .cal-fbar .tx>b .f{color:var(--brand-ink)}
  .cal-fbar .tx>span b{color:var(--ink);font-weight:800}
  .cal-fbar .btn{flex:0 0 auto}
  @media(max-width:639px){
    .cal-fbar{flex-wrap:wrap}
    .cal-fbar .tx{flex:1 0 60%}
    .cal-fbar .btn{width:100%}
  }
  .dw-pend{border:1px solid var(--st-PENDING);border-radius:12px;padding:12px 13px;margin-bottom:14px;
    background:color-mix(in srgb,var(--st-PENDING) 18%,var(--surface))}
  .dw-pend b{display:block;font-size:13px;margin-bottom:3px}
  .dw-pend p{font-size:11.5px;color:var(--ink-soft);line-height:1.45}
  .dw-pend .row{display:flex;gap:7px;margin-top:10px}
  .dw-pend .row .btn{flex:1}
  /* ——— «Подтверждение записи»: зависимые строки, шаблоны и живой предпросмотр ——— */
  .cs-dep{transition:opacity .18s ease}
  .cs-dep.off{opacity:.42;pointer-events:none;filter:saturate(.5)}
  .cs-hero{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--st-PENDING);background:color-mix(in srgb,var(--st-PENDING) 22%,var(--surface));
    border-radius:12px;padding:11px 13px;margin-bottom:12px;font-size:12.5px;color:var(--ink);line-height:1.5}
  .cs-hero .ic{width:26px;height:26px;border-radius:8px;background:var(--st-PENDING);color:#3B1F09;display:grid;place-items:center;flex:0 0 auto;font-weight:800}
  .cs-ta{width:100%;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:10px;padding:9px 11px;
    font-size:12.5px;font-family:inherit;color:var(--ink);line-height:1.5;resize:vertical;outline:none}
  .cs-ta:focus{border-color:var(--brand);background:var(--surface)}
  .cs-vars{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
  .cs-var{border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;padding:3px 8px;font-size:11px;font-weight:700;color:var(--brand-ink)}
  .cs-var:hover{border-color:var(--brand);background:var(--brand-tint)}
  .cs-prev{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:12px}
  @media(max-width:760px){.cs-prev{grid-template-columns:1fr}}
  .cs-pv .cap{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:7px}
  .cs-pv .book{border:1px solid var(--st-PENDING);background:color-mix(in srgb,var(--st-PENDING) 16%,var(--surface));
    border-radius:12px;padding:11px 12px;font-size:12px;line-height:1.5;color:var(--ink)}
  .cs-pv .book b{display:block;font-size:12.5px;margin-bottom:3px}
  .cs-pv .ntf{background:#1a1836;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 14px;display:flex;gap:10px}
  .cs-pv .ntf .d{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto;background:linear-gradient(135deg,#7C6CF6,#E86FA0)}
  .cs-pv .ntf b{display:block;font-size:13px;font-weight:700;color:#F3F1FF;line-height:1.35}
  .cs-pv .ntf span{display:block;font-size:12px;color:#B9B4D8;margin-top:2px;line-height:1.45}

  /* drawer: финансы + история + быстрые действия */
  .dw-qa{display:flex;gap:6px;margin:-4px 0 12px}
  .dw-qa a,.dw-qa button{flex:1;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:7px;font-size:11px;font-weight:700;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;gap:3px}
  .dw-qa a:hover,.dw-qa button:hover{border-color:var(--brand);color:var(--brand-ink)}
  .dw-qa svg{width:15px;height:15px}
  .dw-type{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:9px;padding:2px;margin-bottom:12px}
  .dw-type button{flex:1;border:0;background:none;padding:6px;font-size:11.5px;font-weight:700;color:var(--ink-soft);border-radius:7px}
  .dw-type button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .dw-svcs{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
  .dw-svc{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;font-size:12.5px;border-bottom:1px solid var(--line)}
  .dw-svc:last-child{border-bottom:0}
  .dw-svc .x{border:0;background:none;color:var(--ink-faint);font-size:15px;line-height:1}
  .dw-svc-add{width:100%;border:0;background:var(--surface-2);padding:9px;font-size:12px;font-weight:700;color:var(--brand-ink)}
  .dw-fin{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px}
  .dw-fin .fr{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 0}
  .dw-fin .fr input{width:90px;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:7px;padding:4px 8px;font-size:12.5px;color:var(--ink);text-align:right}
  .dw-fin .fr.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;font-weight:800}
  /* всплывающая карточка владельца: новая запись / отмена клиентом */
  #biz-pop{position:fixed;right:18px;top:74px;z-index:400;display:flex;flex-direction:column;gap:10px;width:340px;max-width:calc(100vw - 36px)}
  .bp{display:flex;gap:11px;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line-strong);
    border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-pop);cursor:pointer;opacity:0;transform:translateX(20px);transition:opacity .24s ease,transform .24s ease}
  .bp.on{opacity:1;transform:none}
  .bp .d{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#E86FA0);margin-top:5px;flex:0 0 auto}
  .bp .tx{min-width:0}
  .bp .tx b{display:block;font-size:12.5px;font-weight:800;color:var(--ink)}
  .bp .tx span{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:2px;line-height:1.4}
  .dw-hist{font-size:11.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px}
  .dw-hist .hi{display:flex;gap:8px}
  .dw-hist .hi time{color:var(--ink-faint);flex-shrink:0;width:78px}

  /* §19 глобальный поиск по календарю */
  .cm-search{position:relative;flex:1 1 170px;min-width:150px;max-width:320px}
  .cm-search input{width:100%;height:44px;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:13px;padding:0 12px 0 34px;font-size:12.5px;color:var(--ink);outline:none}
  .cm-search input:focus{border-color:var(--brand);background:var(--surface)}
  .cm-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--ink-faint)}
  .cm-res{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-pop);z-index:70;max-height:340px;overflow:auto;padding:6px}
  .cm-res:empty{display:none}
  .cm-res button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:8px 10px;font-size:12px;color:var(--ink)}
  .cm-res button:hover,.cm-res button.kb{background:var(--surface-2)}
  .cm-res button b{font-weight:700}
  .cm-res button span{display:block;font-size:10.5px;color:var(--ink-faint)}
  .cm-res .rh{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:8px 10px 3px}

  /* §31 сохранённые виды + шаблоны */
  .ca-views{display:flex;flex-wrap:wrap;gap:5px}
  .ca-view{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:5px 10px;font-size:11.5px;font-weight:600;color:var(--ink-soft)}
  .ca-view:hover{border-color:var(--brand);color:var(--brand-ink)}
  .ca-view .x{border:0;background:none;color:var(--ink-faint);font-size:13px;line-height:1;padding:0}
  .tpl-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
  .tpl-b{border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--ink-soft)}
  .tpl-b:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-tint)}

  /* §21 участники группы / серия */
  .grp-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
  .grp-list .gi{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 11px;font-size:12.5px;border-bottom:1px solid var(--line)}
  .grp-list .gi:last-child{border-bottom:0}
  .grp-list .gi .x{border:0;background:none;color:var(--ink-faint);font-size:15px}
  .scope-opt{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
  .scope-opt label{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;font-size:12.5px;cursor:pointer}
  .scope-opt label:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}
  .scope-opt input{margin-top:2px;accent-color:var(--brand)}
  .scope-opt span{display:block;font-size:11px;color:var(--ink-faint)}
  .rep-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--brand-ink);background:var(--brand-tint);border-radius:999px;padding:2px 8px;margin-left:6px}

  /* §17 конфликт-центр графика */
  .conf-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto;margin:6px 0 12px}
  .conf-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--warn);background:#FFF8EE;border-radius:10px;padding:9px 12px;font-size:12.5px}
  .conf-row .cw{min-width:0}
  .conf-row b{font-weight:700}
  .conf-row span{display:block;font-size:11px;color:var(--ink-faint)}
  /* §17 редактор графика работы: жёсткая сетка колонок — при выключении дня
     строка не меняет ширину, поэтому ничего не прыгает. Часы 00:00–23:00. */
  .sched-wrap{display:flex;flex-direction:column;gap:6px;margin:12px 0}
  .sched-day{display:grid;grid-template-columns:30px 40px minmax(0,1fr) 10px minmax(0,1fr) 66px 28px;
    align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
  .sched-day.off{background:transparent}
  .sched-day.off .sd-f{opacity:.45}
  .sched-day>b{font-size:12px;font-weight:800;color:var(--ink)}
  .sched-day select{width:100%;min-width:0;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
    padding:6px 5px;font-size:12.5px;font-weight:600;color:var(--ink);font-family:inherit;outline:none}
  .sched-day select:focus{border-color:var(--brand)}
  .sched-day select:disabled{cursor:not-allowed}
  .sched-day .dash{text-align:center;color:var(--ink-faint);font-size:12px}
  .sched-day .dur{font-size:11px;font-weight:700;color:var(--ink-faint);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sched-day .cp{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;width:28px;height:28px;
    color:var(--ink-faint);font-size:12px;cursor:pointer;display:grid;place-items:center;padding:0}
  .sched-day .cp:hover{border-color:var(--brand);color:var(--brand-ink)}
  .sched-day .cs-tgl{width:38px;height:21px}
  .sched-day .cs-tgl::after{width:17px;height:17px}
  .sched-day .cs-tgl:checked::after{transform:translateX(17px)}
  .sched-sum{font-size:11.5px;color:var(--ink-faint);margin-bottom:10px}
  @media(max-width:520px){
    .sched-day{grid-template-columns:30px 40px minmax(0,1fr) 10px minmax(0,1fr);row-gap:6px}
    .sched-day .dur{grid-column:3/6;text-align:left}
    .sched-day .cp{display:none}
  }

  /* §25 журнал активности */
  .log-row{display:flex;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:12px}
  .log-row time{flex-shrink:0;width:96px;color:var(--ink-faint);font-size:11px}
  .log-row .lg-b{min-width:0}
  .log-row .lg-b b{font-weight:700}

  /* §26 присутствие */
  .presence{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--blue);background:#EEF4FA;border:1px solid #CFE0EE;border-radius:9px;padding:7px 10px;margin-bottom:10px}
  .presence .pd{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:pblink 1.4s infinite}
  @keyframes pblink{0%,100%{opacity:1}50%{opacity:.25}}

  /* §26.1 полоса «сообщения клиентов сюда не дойдут».
     Не тост: тост исчезает, а это состояние держится, пока владелец его не
     починит — и всё это время клиент пишет в пустоту. */
  .deliv-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:9500;
    display:flex;align-items:center;gap:12px;max-width:min(680px,calc(100vw - 32px));
    padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.35;
    background:#FEF1F2;border:1px solid var(--accent);color:var(--ink);
    box-shadow:0 14px 34px rgba(20,16,48,.18)}
  /* Пока плашка видна, нижним строкам раздела нужен запас ровно на её
     высоту. Дневной сетке этого мало — ей высоту считает delivFit() в коде:
     формула «100svh минус константа» не знает, где сетка реально начинается,
     и под плашкой всё равно оставался вечерний визит (29.09.2026). */
  body.has-deliv #main{padding-bottom:calc(var(--deliv-h,0px) + 16px)}
  .deliv-bar b{font-weight:700}
  .deliv-bar .db-t{min-width:0}
  .deliv-bar .db-t span{display:block;color:var(--ink-soft);font-size:12px;margin-top:2px}
  .deliv-bar button{flex-shrink:0}
  .deliv-bar .db-x{background:none;border:0;color:var(--ink-faint);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
  @media(max-width:560px){ .deliv-bar{flex-wrap:wrap;bottom:88px} }

  /* §29 skeleton / ошибка */
  .skel{border-radius:12px;background:linear-gradient(100deg,var(--surface-2) 30%,#EdEbF6 50%,var(--surface-2) 70%);background-size:200% 100%;animation:skl 1.3s infinite}
  @keyframes skl{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .panel-err{border:1px solid var(--accent);background:#FEF1F2;border-radius:12px;padding:16px;font-size:13px;color:var(--ink)}
  .panel-err button{margin-top:10px}

  /* §30 доступность */
  .dc-ev:focus-visible,.wk-ev:focus-visible,.lst-row:focus-visible,.me:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
  .dc-ev.kbsel{outline:2px solid var(--brand);outline-offset:1px;box-shadow:var(--glow)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .kbd-hint{font-size:11px;color:var(--ink-faint);margin-top:8px}
  .kbd-hint kbd{border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;padding:0 5px;font-size:10.5px;background:var(--surface-2)}

  /* forms */
  .fld{margin-bottom:12px}
  .fld label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);margin-bottom:5px}
  .fld input,.fld select,.fld textarea{width:100%;border:1.5px solid var(--line-strong);background:var(--surface-2);border-radius:9px;padding:10px 12px;font-size:14px;color:var(--ink);outline:none}
  .fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--brand)}
  .fld textarea{min-height:70px;resize:vertical}
  .pf-langs{display:flex;flex-wrap:wrap;gap:8px}
  .pf-lang{display:flex;align-items:center;gap:7px;border:1.5px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;text-transform:none;letter-spacing:0;margin:0}
  .pf-lang input{width:15px;height:15px;accent-color:var(--brand)}
  .pf-lang:has(input:checked){border-color:var(--brand);color:var(--brand-ink);background:var(--brand-tint)}
  .inline{display:flex;gap:10px;flex-wrap:wrap}
  .inline .fld{flex:1;min-width:120px}

  .bars{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:10px}
  .bars .bar{flex:1;background:var(--brand);border-radius:6px 6px 0 0;position:relative;min-height:3px}
  .bars .bar span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--ink-faint);font-weight:700}
  .bars .bar em{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--ink-soft);font-weight:800;font-style:normal}

  .funnel{display:flex;flex-direction:column;gap:6px}
  .funnel .f{display:flex;align-items:center;gap:10px;font-size:12.5px}
  .funnel .f .lbl{width:180px;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;color:var(--ink-soft);font-weight:600}
  .funnel .f .track{flex:1;min-width:36px;height:22px;background:var(--surface-2);border-radius:6px;overflow:hidden}
  .funnel .f .fill{height:100%;background:var(--brand);border-radius:6px}
  .funnel .f .v{width:60px;flex-shrink:0;text-align:right;font-weight:800}
  /* ТЗ §8.10: подпись фиксированной ширины (180px) не оставляла места
     дорожке на узком экране — реальный риск горизонтального скролла, не
     только неудобство */
  @media(max-width:480px){ .funnel .f .lbl{width:34vw} }

  .vis{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
  .vis .ok{color:var(--brand)} .vis .no{color:var(--accent)}
  .vis .fix{margin-left:auto;font-size:12px;color:var(--brand-ink);font-weight:700}

  /* messages */
  .msg-wrap{display:grid;grid-template-columns:260px 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:440px}
  .msg-list{border-right:1px solid var(--line);overflow-y:auto}
  .msg-list button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:11px 13px;font-family:inherit}
  .msg-list button.on{background:var(--brand-tint)}
  .msg-list button b{font-size:13px}
  .msg-list button span{font-size:11.5px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .msg-thread{display:flex;flex-direction:column}
  .msg-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
  .m{max-width:80%;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.4}
  .m.client{background:var(--surface);border:1px solid var(--line);align-self:flex-start}
  .m.me{background:var(--brand);color:#fff;align-self:flex-end}
  .m.ai{background:var(--surface-2);align-self:flex-start;font-style:italic}
  .m.sys{align-self:center;font-size:11px;color:var(--ink-faint)}
  .msg-comp{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
  .msg-comp input{flex:1;border:1px solid var(--line-strong);border-radius:999px;padding:9px 13px;font-size:13.5px;background:var(--surface-2);color:var(--ink);outline:none}

  .modal{position:fixed;inset:0;background:rgba(6,5,16,.62);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
  .modal[hidden]{display:none}
  .modal .box{background:var(--surface);border:1px solid var(--line-strong);width:100%;max-width:460px;border-radius:16px;box-shadow:var(--shadow-pop);max-height:90vh;overflow:auto}
  .modal .box.wide{max-width:540px}
  .modal .box .h{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
  .modal .box .h .x{margin-left:auto;width:28px;height:28px;border:0;border-radius:7px;background:var(--surface-2);font-size:16px;color:var(--ink-soft)}
  .modal .box .c{padding:16px}
  /* ---- phone: та же модалка, но нижним листом — общий приём с .box.na
     (ТЗ «Мобильный кабинет» §6, до полноценного единого примитива в этапе 2) ---- */
  @media(max-width:639px){
    .modal{padding:0;align-items:flex-end}
    .modal .box.sheet{max-width:100%;max-height:88vh;border-radius:18px 18px 0 0;
      padding-bottom:env(safe-area-inset-bottom)}
  }

  .gate{max-width:420px;margin:12vh auto;text-align:center}
  .gate .ic{width:54px;height:54px;border-radius:15px;background:var(--brand-tint);color:var(--brand-ink);display:grid;place-items:center;margin:0 auto 14px}
  .gate h2{font-size:20px;margin-bottom:6px}
  .gate p{color:var(--ink-soft);font-size:13.5px;margin-bottom:16px}
  .gate select{width:100%;margin-bottom:10px}

  /* «Мои салоны»: список своих бизнесов вместо прежних галочек по каталогу */
  .ms-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto;margin-bottom:4px}
  .ms-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;
    border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);cursor:pointer}
  .ms-row:hover{border-color:var(--line-strong)}
  .ms-row.on{border-color:var(--brand-ink);background:var(--brand-tint)}
  .ms-row .t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .ms-row .t b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ms-row .t i{font-style:normal;font-size:12px;color:var(--ink-soft)}
  .ms-row .ms-cur{font-size:11.5px;font-weight:700;color:var(--brand-ink)}
  .ms-row .ms-go{font-size:11.5px;font-weight:700;color:var(--ink-soft)}


  /* §4 поп-ап выбора даты — самый верхний слой интерфейса:
     выше модалки (100), карточки записи (110), FAB (209), тостов (300) и биз-попапов (400) */
  .date-pop{position:fixed;z-index:1000;width:262px;max-width:calc(100vw - 20px);
    background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-pop);
    padding:10px 10px 8px;animation:dpIn .13s ease-out}
  @keyframes dpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.date-pop{animation:none}}
  /* 20.09.2026: переходы по неделям — двумя рядами ±1…±6 с общим заголовком,
     как в присланном владелицей референсе */
  .date-pop{width:296px}
  .date-pop .dp-jump{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
  .date-pop .dp-jt{display:block;text-align:center;font-size:10.5px;font-weight:700;
    color:var(--ink-faint);margin-bottom:6px}
  .date-pop .dp-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:4px}
  .date-pop .dp-jump button{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:5px 0;
    font-size:11px;font-weight:700;color:var(--ink-soft);font-family:inherit;cursor:pointer;font-variant-numeric:tabular-nums}
  .date-pop .dp-jump button:hover{border-color:var(--brand);color:var(--brand-ink)}
  /* колонка номеров недель — только в поповере (в узкой боковой панели её нет) */
  .mc-grid.wk{grid-template-columns:30px repeat(7,1fr)}
  .mc-grid.wk .wk{display:grid;place-items:center;font-size:9.5px;font-weight:700;
    color:var(--ink-faint);font-variant-numeric:tabular-nums;border-right:1px solid var(--line);margin-right:2px}
  .mc-grid.wk .dh.wk{border-right:1px solid var(--line);font-size:8px;text-transform:uppercase;letter-spacing:0}
  .date-pop .dp-today{width:100%;margin-top:6px;border:0;background:var(--brand);color:#fff;border-radius:9px;
    padding:8px;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer}

  .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);background:var(--surface-2);color:var(--ink);border:1px solid var(--line-strong);font-size:13px;font-weight:600;padding:10px 16px;border-radius:10px;box-shadow:var(--shadow-pop),var(--glow);opacity:0;pointer-events:none;transition:all .2s;z-index:300}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .muted{color:var(--ink-faint);font-size:12.5px}

  /* ---- «Отчеты» (PANEL.reports) ---- */
  .rp-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
  .rp-per{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
  .rp-per select{border:1px solid var(--line-strong);border-radius:9px;padding:7px 10px;font-family:inherit;font-size:13px;background:var(--surface)}
  .rp-tbl{width:100%;border-collapse:collapse;font-size:13px}
  .rp-tbl th{text-align:left;padding:8px 10px;color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)}
  .rp-tbl td{padding:8px 10px;border-bottom:1px solid var(--line)}
  .rp-tbl tr:last-child td{border-bottom:0}

  /* ---- «Настройки» (PANEL.settings) ---- */
  .st-icon-row{display:flex;align-items:center;gap:12px}
  .st-icon-row .mono{width:48px;height:48px;border-radius:12px;background:var(--grad);background-size:cover;background-position:center;
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0}
  .st-link{display:block;text-decoration:none;transition:border-color .14s ease}
  .st-link .bd{display:flex;flex-direction:column;gap:2px}
  .st-link b{font-size:13.5px;color:var(--ink)}
  .st-link i{font-style:normal;font-size:12px;color:var(--ink-faint)}
  .st-link:hover{border-color:var(--brand)}
  /* ---- tablet: меню — рельс 72 px, а не поток из 15 обёрнутых ссылок
     (ТЗ «Мобильный кабинет» §4.3). Иконка + подпись 10px вместо строки;
     полноценный оверлей на весь список — отдельный этап (§6 «Оверлеи»),
     здесь каждый раздел уже доступен одним тапом по своей иконке. ---- */
  @media(min-width:640px) and (max-width:1023px){
    :root{--sbw:72px}
    .sidebar{width:72px;padding:8px 4px 0;overflow-x:hidden}
    .sidebar .grp{display:none}
    /* границы 5 групп на рельсе — разделитель, не текст (ТЗ v2.0 §1,
       12.09.2026): текстовый заголовок группы не помещается на 72px, но
       после расширения навигации до 22 пунктов поток без единой границы
       между «Записи»/«Салон»/«Продвижение»/«Аналитика»/«Настройки» стал
       нечитаем. Первая группа — без верхней линии, она и так первая. */
    .sidebar .nav-grp{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
    .sidebar .nav-grp:first-of-type{border-top:0;padding-top:0}
    .sidebar .nav-a{position:relative;flex-direction:column;gap:3px;min-height:0;padding:9px 2px 7px;
      font-size:9.5px;line-height:1.15;text-align:center;border-radius:11px}
    .sidebar .nav-a .t{white-space:normal}
    /* короткий словарь подписей рельса (ТЗ v2.0 §1) — только у пунктов,
       чьи полные названия переносятся на 2 строки в колонке 72px */
    .sidebar .nav-a .t-rail{display:block;white-space:normal}
    .sidebar .nav-a:has(.t-rail) .t{display:none}
    .sidebar .nav-a.on::before{left:50%;top:auto;bottom:-1px;transform:translateX(-50%);width:20px;height:3px}
    .sidebar .nav-a .cnt{position:absolute;top:2px;right:6px;margin-left:0}
    .nav-eliko{flex-direction:column;text-align:center;padding:8px 4px;gap:4px}
    .nav-eliko .tx{align-items:center}
    .nav-pro{display:none}    /* нет места под полноценную промокарточку в рельсе 72px — не искажаем её обрезкой */
  }
  /* ---- phone: бокового меню нет вовсе — нижняя панель вкладок .mtabs
     (ТЗ §4.2). Раньше меню из фиксированной колонки уходило в поток и
     съедало первый экран 15 ссылками в 7 строк (§2.1 аудита). ---- */
  @media(max-width:639px){
    :root{--sbw:0px;--mtabs-row:70px;--mtabs-h:calc(var(--mtabs-row) + env(safe-area-inset-bottom));
      /* кнопка «+» и её меню — над нижней панелью вкладок, а не под ней
         (ТЗ §4.5 safe-area); правый край учитывает вырез в ландшафте */
      --fab-b:calc(var(--mtabs-h) + 12px);--fab-r:calc(20px + env(safe-area-inset-right))}
    .sidebar{display:none}
    main{margin-left:0;padding-bottom:calc(60px + var(--mtabs-h))}
  }
  @media(max-width:720px){
    .msg-wrap{grid-template-columns:1fr}
  }

  /* ==========================================================================
     Календарь v3 — ширина, раскладка без наложений, выделение мышью,
     персональный график сотрудника.
     ========================================================================== */

  /* календарь занимает всю доступную ширину окна, не 1180px как остальные панели */
  main:has(.cal2){max-width:none;padding-left:22px;padding-right:22px}
  .dc-body{width:100%}
  .dc-scroll{max-height:calc(100vh - 188px);max-height:calc(100svh - 188px);scrollbar-gutter:stable}
  .dc-lane{min-width:152px}
  .dc-wrap.focus .dc-lane{min-width:0}

  /* событие занимает свою колонку внутри «пачки» пересечений — ничего не накладывается */
  /* ---- палец обязан прокручивать расписание, даже начав движение НА карточке.
     Здесь стояло touch-action:none — и браузер вообще не скроллил от карточки,
     а в плотном дне карточками закрыта почти вся сетка: расписание на телефоне
     «стояло на месте» (жалоба владелицы 20.09.2026). JS для тача давно написан
     правильно — перенос там стартует по удержанию 300мс/8px и сам отменяется на
     первом же движении пальца (см. business.js, ТЗ §5.1), но его отмена ничего
     не решала: скролл запрещал CSS, до JS дело не доходило.

     Обе оси, а не только pan-y: дорожек мастеров на телефоне помещается две
     (.dc-lane min-width 150px при экране 390px минус столбец времени), дальше
     .dc-body уезжает вправо и его нужно листать вбок — «не работает свайп
     графика в сторону» (жалоба владелицы 20.09.2026). Столбец времени при
     этом остаётся на месте: он position:sticky;left:0.
     Ручки размера (rz/rzt) узкие и остаются none — иначе их не потянуть. ---- */
  /* -webkit-touch-callout: долгое касание в мобильных браузерах вызывает
     системную «лупу» с выделением и меню «Копировать» — поверх карточки,
     которую в этот момент берут в руку (жалоба владелицы 21.09.2026). */
  .dc-ev{left:var(--evl,3px);width:var(--evw,calc(100% - 6px));right:auto;touch-action:pan-x pan-y;
    -webkit-touch-callout:none;-webkit-user-select:none}
  .dc-ev.dragging{touch-action:none}
  /* «взятая» карточка: прокрутка ей запрещена ЗАРАНЕЕ — только так палец
     тянет её гарантированно (touch-action читается на старте касания, менять
     его посреди жеста бесполезно). Кольцо и подъём — чтобы было видно, что
     запись выбрана и её ждут перетаскивать. */
  .dc-ev.picked{touch-action:none;z-index:8;
    box-shadow:0 0 0 2px var(--brand),0 10px 24px -8px rgba(40,35,90,.45)}
  /* пульсацию сюда не вешаем: тем же stPulse помечен статус «ждёт
     подтверждения», два разных смысла одной анимацией читались бы неверно */
  .dc-ev .rz,.dc-ev .rzt{touch-action:none}
  .dc-ev .rzt{position:absolute;left:0;right:0;top:0;height:8px;cursor:ns-resize}
  .dc-ev .rzt::after{content:"";position:absolute;left:50%;top:2px;width:22px;height:3px;border-radius:3px;background:currentColor;opacity:.32;transform:translateX(-50%)}
  /* Перетаскиваемая карточка теперь уезжает В ЧУЖУЮ КОЛОНКУ (21.09.2026) и
     обязана быть поверх всего. Базовое `.dc-ev.drag{z-index:30}` объявлено
     РАНЬШЕ `.dc-ev.picked{z-index:8}` и той перебивалось — карточка ныряла
     под чужие визиты ровно в тот момент, когда на неё смотрят. */
  .dc-ev.dragging{z-index:40}

  /* ---- Меню выбранного интервала (21.09.2026, по референсу владелицы) ----
     Короткая карточка рядом с пунктирным отрезком: что завести на это время.
     Не модальное окно — отрезок должен оставаться видимым, иначе непонятно,
     какое именно время выбрано. */
  /* ---- Выделение текста в сетке (21.09.2026, видео владелицы) ----
     Долгое нажатие по пустому месту дорожки запускало системное выделение
     текста iOS: синяя заливка накрывала ВЕСЬ экран вместе с шапкой и нижней
     панелью, поверх неё торчали круглые ручки выделения. На карточках
     (.dc-ev) запрет уже стоял, а на самой сетке — нет, хотя именно по ней
     теперь и держат палец. Гасим на всём дневном календаре: копировать там
     нечего, а удержание — рабочий жест. Остальной кабинет не трогаем: из
     карточки записи телефон клиента копировать нужно. */
  .dc-wrap,.slot-pop{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

  /* ---- «Повторить последнюю услугу?» (21.09.2026, по референсу) ----
     Поверх формы записи (.modal — z-index 100). На телефоне лист снизу, на
     компьютере карточка по центру — тот же приём, что у листа заявок. */
  .rpt-back{position:fixed;inset:0;z-index:130;background:rgba(6,5,16,.5);backdrop-filter:blur(2px)}
  .rpt-sheet{position:fixed;z-index:131;left:0;right:0;bottom:0;
    background:var(--surface);border-radius:22px 22px 0 0;box-shadow:var(--shadow-pop);
    padding:8px 18px calc(18px + env(safe-area-inset-bottom)) 18px;text-align:center}
  .rpt-grab{width:40px;height:4px;border-radius:999px;background:var(--line-strong);margin:0 auto 12px}
  .rpt-h{font-size:19px;font-weight:800;color:var(--ink);line-height:1.25;margin-bottom:10px}
  .rpt-svc{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:5px}
  .rpt-meta{font-size:13px;color:var(--ink-faint);line-height:1.4}
  .rpt-meta b{font-weight:700;color:var(--ink-soft)}
  .rpt-sheet .btn{width:100%;height:48px;border-radius:13px;font-size:14px;margin-top:12px}
  .rpt-sheet .btn.ghost{margin-top:8px}
  /* На компьютере — карточка по центру экрана. position:static здесь НЕ
     работает: лист лежит РЯДОМ с подложкой, а не внутри неё, и, выпав в
     обычный поток, уезжал под страницу (проверено — y=1090 при экране 900). */
  @media(min-width:641px){
    .rpt-sheet{position:fixed;left:50%;top:50%;right:auto;bottom:auto;
      transform:translate(-50%,-50%);width:calc(100% - 40px);max-width:380px;
      border-radius:20px;padding:20px;margin:0}
    .rpt-grab{display:none}
  }

  .slot-back{position:fixed;inset:0;z-index:120;background:none}
  .slot-pop{position:fixed;z-index:121;min-width:232px;max-width:280px;
    background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;
    box-shadow:var(--shadow-pop);padding:6px;overflow:hidden}
  .slot-pop .sp-h{padding:9px 12px 8px;font-size:13.5px;font-weight:800;color:var(--ink);
    line-height:1.25;border-bottom:1px solid var(--line);margin-bottom:5px}
  .slot-pop .sp-h span{display:block;font-size:11.5px;font-weight:600;color:var(--ink-faint);
    margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slot-pop button{display:flex;align-items:center;gap:11px;width:100%;min-height:46px;
    border:0;background:none;border-radius:11px;padding:0 11px;text-align:left;
    font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
    -webkit-tap-highlight-color:transparent}
  .slot-pop button svg{width:19px;height:19px;flex:0 0 auto;color:var(--brand)}
  .slot-pop button:hover{background:var(--surface-2)}
  .slot-pop button:active{background:var(--brand-tint)}
  .slot-pop button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
  /* выбранный отрезок под меню — заметнее обычного, он теперь живёт дольше */
  .dc-sel{z-index:9}

  /* ---- Линия «сейчас» при горизонтальной прокрутке (21.09.2026) ----
     Была z-index:8 и уезжала поверх колонки часов, как только дорожки
     прокручивали вправо: линия «уходила за график». Теперь у .dc-now нет
     своего слоя (z-index:auto) — она рисуется поверх дорожек по порядку в
     DOM (переехала в конец .dc-body) и ПОД липкой колонкой часов
     (.dc-time, z-index 6). Колонка сама обрезает линию, и та при любой
     прокрутке начинается ровно у своего края. Пилюля времени не в слое
     .dc-now (стекающего контекста нет), поэтому её z-index:7 поднимает её
     над колонкой — как и было задумано. */
  .dc-now{z-index:auto}
  .dc-now::after{left:0}
  .dc-now::before{left:78px}
  .dc-now-chip{z-index:7}

  /* ---- Ручки длительности у ВЫБРАННОЙ карточки (21.09.2026, ТЗ владелицы:
     «зажимаешь запись — можно переносить и растягивать»). До выбора края
     узкие (8-9px) и существуют ради мыши: пальцем в них не попасть, а если
     расширить их всем карточкам сразу, прокрутка расписания начнёт менять
     визитам длительность. Ручка наполовину вынесена ЗА край карточки —
     на коротком визите (sz-xs, ~20px) иначе накрыла бы собой весь текст. ---- */
  .dc-ev.picked .rzt,.dc-ev.picked .rz{
    left:50%;right:auto;transform:translateX(-50%);width:72px;max-width:100%;height:24px}
  .dc-ev.picked .rzt{top:-12px}
  .dc-ev.picked .rz{bottom:-12px}
  .dc-ev.picked .rzt::after,.dc-ev.picked .rz::after{
    top:50%;bottom:auto;transform:translate(-50%,-50%);
    width:40px;height:13px;border-radius:999px;opacity:1;
    background:var(--surface);border:2px solid var(--brand);
    box-shadow:0 2px 6px rgba(40,35,90,.28)}
  /* Резерв времени: ручки круглые — как в приложении, на которое ссылалась
     владелица (26.09.2026). У визитов остаётся «таблетка»: там ручку берут
     мышью не реже, чем пальцем, и широкая полоска удобнее. */
  /* У выбранной карточки снимаем обрезку: иначе ручки, вынесенные за край,
     просто не видно — они «складываются» внутрь и закрывают текст. Тексту
     обрезка не нужна: у .nm/.svc/.blk-l она своя. */
  .dc-ev.picked{overflow:visible;z-index:12}
  /* Резерв: ручки ПОЛНОСТЬЮ за пределами блока — сверху и снизу. Тогда на
     коротком резерве тело карточки (перенос) и ручки (длительность) не
     спорят за один и тот же пиксель. */
  .dc-ev.blk.picked .rzt,.dc-ev.blk.picked .rz{height:26px;width:60px}
  .dc-ev.blk.picked .rzt{top:-26px}
  .dc-ev.blk.picked .rz{bottom:-26px}
  .dc-ev.blk.picked .rzt::after,.dc-ev.blk.picked .rz::after{
    width:20px;height:20px;border-radius:50%;
    background:var(--surface);border:2px solid var(--ink-soft);
    box-shadow:0 2px 7px rgba(40,35,90,.3)}
  .dc-ev.blk.picked{outline:1.5px dashed var(--ink-faint);outline-offset:-2px}
  /* padding 0 по вертикали: карточка на 15 минут — это ~13 px, и пара
     пикселей отступа сверху и снизу обрезала единственную строку
     (27.09.2026, после отказа от принудительной высоты). Флекс и так
     держит строку по центру. */
  .dc-ev.sz-xs{display:flex;align-items:center;gap:6px;padding:0 7px;line-height:1.1}
  .dc-ev.sz-xs .t{flex:0 0 auto;font-size:10px}
  .dc-ev.sz-sm{padding:4px 9px;line-height:1.3}
  .dc-ev.sz-sm .t{font-size:10px;font-weight:700;opacity:.92}
  .dc-ev.sz-sm .one{display:block;font-size:11px}
  .dc-ev.sz-sm .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dc-ev.sz-sm .nm,.dc-ev.sz-sm .svc,
  .dc-ev.sz-md .nm,.dc-ev.sz-md .svc,.dc-ev.sz-md .ph{display:block}
  .dc-ev .one{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:10.5px}
  .dc-ev .one b{font-weight:800}
  .dc-ev.out{border-style:dashed}
  .dc-ev .oob{position:absolute;right:5px;bottom:3px;font-size:10px;font-weight:800;color:var(--accent)}
  .dc-ev.abs-all{z-index:0}

  /* протяжка мышью по свободному месту → блокировка / запись */
  .dc-sel{position:absolute;left:3px;right:3px;z-index:24;border-radius:9px;pointer-events:none;overflow:hidden;
    background:color-mix(in srgb,var(--brand) 16%,transparent);border:1.5px dashed var(--brand);
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--brand-ink)}
  /* фон дорожки листается пальцем по обеим осям — вбок между мастерами тоже.
     Долгое удержание (выбор интервала) от этого не страдает: оно и так
     отменяется на первом движении пальца, см. wireNewSlot. */
  .dc-lane .grid{touch-action:pan-x pan-y}
  /* ТЗ «Календарь»: «Без диагональной штриховки… спокойная индикация нерабочего времени» — ровный тон */
  .dc-lane .grid.off{background:var(--surface-2)}
  /* ТЗ «Дневная сетка» v2.0: сотрудник без графика НА ЭТУ ДАТУ — вся колонка заметно
     насыщеннее, чем «просто вне графика частично» (та же .grid.off делит оба случая) */
  .dc-lane.lane-off .grid.off{background:var(--dc-off-day)}
  .dc-time .h.end{height:0}
  .dc-time .h.end span{top:-13px}

  /* §17 сетка на сутки 00:00–23:00: рабочее окно светлое, остальное приглушено.
     Границы рабочего окна подчёркнуты, чтобы график читался с одного взгляда. */
  .dc-lane .hr.off{background:var(--surface-2)}
  .dc-lane .hr.wtop{border-top:1.5px solid var(--brand);box-shadow:inset 0 1px 0 0 var(--surface)}
  .dc-lane .hr.wend{border-bottom-width:1.5px;border-bottom-color:var(--brand)}
  .dc-time .h.off span{opacity:.4}
  .dc-time .h.wtop span,.dc-time .h.wend span{color:var(--brand-ink)}
  .dc-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;font-size:11.5px;color:var(--ink-faint)}
  .dc-hint .lg{display:inline-flex;align-items:center;gap:6px;font-weight:600}
  .dc-hint .lg i{width:13px;height:13px;border-radius:4px;border:1px solid var(--line-strong);display:block}
  .dc-hint .lg i.work{background:var(--surface)}
  .dc-hint .lg i.rest{background:var(--surface-2)}
  .dc-hint .lg i.brk{background:color-mix(in srgb,var(--brand) 15%,var(--surface))}

  /* шапка дорожки: клик открывает личный график сотрудника */
  .dc-lane .ch{cursor:pointer;user-select:none}
  .dc-lane .ch:hover{background:var(--brand-tint)}
  .dc-lane .ch>div{min-width:0;flex:1 1 auto;line-height:1.24;overflow:hidden}
  .dc-lane .ch .who{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dc-lane .ch small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dc-lane .ch .load{margin-left:auto;text-align:right;font-size:9.5px;font-weight:700;color:var(--ink-faint);white-space:nowrap;line-height:1.25;flex:0 0 auto}
  .dc-lane .ch .load b{display:block;font-size:11px;color:var(--brand-ink)}
  .dc-lane .ch .load em{font-style:normal;color:var(--accent);font-weight:800}

  /* режим «график сотрудника» */
  .dcf{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  .dcf-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
  .dcf-back{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--ink-soft);font-family:inherit}
  .dcf-back:hover{border-color:var(--brand);color:var(--brand-ink)}
  .dcf-av{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
  .dcf-nm b{font-size:15px;display:block;line-height:1.25}
  .dcf-nm span{font-size:11.5px;color:var(--ink-faint)}
  .dcf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
  .dcf-st{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
  .dcf-st b{display:block;font-size:16px;line-height:1.25;margin-top:2px}
  .dcf-st span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
  .dcf-bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}
  .dcf-bar i{display:block;height:100%;background:var(--grad)}
  .dcf-week{display:flex;gap:6px;margin-top:12px;overflow-x:auto;padding-bottom:2px}
  .dcf-d{flex:1 0 62px;border:1px solid var(--line-strong);background:var(--surface);border-radius:11px;padding:7px 6px 8px;text-align:center;font-family:inherit;cursor:pointer}
  .dcf-d:hover{border-color:var(--brand)}
  .dcf-d.on{border-color:var(--brand);background:var(--brand-tint)}
  .dcf-d.off{opacity:.55}
  .dcf-d u{display:block;font-size:9.5px;font-weight:800;text-decoration:none;color:var(--ink-faint);text-transform:uppercase}
  .dcf-d b{display:block;font-size:15px;line-height:1.35}
  .dcf-d small{display:block;font-size:9.5px;color:var(--ink-faint);font-weight:700}
  .dcf-d .lb{display:block;height:4px;border-radius:2px;background:var(--line);margin-top:5px;overflow:hidden}
  .dcf-d .lb i{display:block;height:100%;background:var(--brand)}
  .dcf-gap{font-size:11.5px;font-weight:700;color:var(--ink-faint);margin-top:10px;line-height:1.6}
  .dcf-gap b{color:var(--brand-ink)}
  .dcf-list{margin-top:12px}
  @media(max-width:1080px){ main:has(.cal2){padding-left:16px;padding-right:16px} }
  .dcf-list h4{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin:0 0 8px}

  /* ==========================================================================
     Календарь v4 — ТЗ «Модуль Календарь» v1.0 (01.09.2026):
     загрузка в шапке сотрудника (§4), штриховка нерабочего времени (§8.2),
     конфликты (§9), окно override (§8), правая аналитическая колонка (§16–§17).
     ========================================================================== */
  :root{--dc-ch:58px;   /* синхронно с DC_CH=58 в business.js */
    /* ТЗ «Дневная сетка» v2.0 (18.09.2026): деление часа на четверти, заливка
       выходного дня сотрудника, наведение с подсказкой времени */
    --dc-off-day:color-mix(in srgb,var(--brand) 9%,var(--surface-2));
    --dc-hover-fill:color-mix(in srgb,var(--accent) 14%,transparent);
    --dc-hover-line:color-mix(in srgb,var(--accent) 45%,transparent)}

  /* --- ТЗ «Дизайн верхней части календаря» v1.1 §7: имя + рабочее время + счётчик,
     без полосы загрузки (см. laneHeadHTML) --- */
  .dc-lane .ch,.dc-time .ch{height:var(--dc-ch)}
  .dc-lane .ch{display:block;padding:6px 9px 7px}
  .dc-lane .ch:hover{background:transparent}
  .dc-lane .ch-top{display:flex;align-items:center;gap:7px;min-width:0;height:100%}
  .dc-lane .ch-name{flex:1 1 auto;min-width:0;text-align:left;background:none;border:0;padding:0;font-family:inherit;
    font-size:12px;font-weight:800;color:var(--ink);line-height:1.2}
  .dc-lane .ch-name:hover .who{color:var(--brand-ink);text-decoration:underline}
  .dc-lane .ch-name .who{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dc-lane .ch-name small{display:flex;align-items:baseline;gap:6px;font-size:9.5px;font-weight:700;color:var(--ink-faint)}
  .dc-lane .ch-name small .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .dc-lane .ch-name small .c{flex:0 0 auto;margin-left:auto;white-space:nowrap}
  .dc-lane .lane-menu{flex:0 0 auto;width:20px;height:20px;border:0;background:none;border-radius:6px;color:var(--ink-faint);
    font-size:14px;line-height:1;font-weight:800;display:grid;place-items:center}
  .dc-lane .lane-menu:hover{background:var(--surface-2);color:var(--brand-ink)}
  .dc-lane .ch-cf{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;
    font-size:10px;font-weight:800;display:grid;place-items:center}
  .dc-lane.lane-off .ch-name small{color:var(--accent)}

  /* меню сотрудника — ТЗ «Дневная сетка» v2.0 §9: шапка с именем, группы
     с иконками вместо голого списка кнопок; список действий не меняется */
  /* ---- меню сотрудника в шапке колонки, рев. 2 (04.10.2026) ----
     Набор действий и ключи data-sm прежние — менялся облик. Что нового:
       · лицо вместо инициалов (фото уже рисует сама колонка);
       · строка «сегодня»: часы работы и загрузка полосой. Эти числа
         staffDayLoad считает и так, но держал их в подсказке колонки,
         которой на телефоне не существует;
       · три названные части вместо четырёх безымянных групп;
       · «Скрыть колонку» отдельной красной группой и гаснет заранее,
         если колонка последняя (раньше отказ приходил тостом ПОСЛЕ нажатия). */
  .sp-menu{position:fixed;z-index:1200;background:var(--surface);border:1px solid var(--line-strong);
    border-radius:18px;box-shadow:var(--shadow-pop);width:302px;max-width:calc(100vw - 20px);
    overflow:hidden;animation:bh-pop .2s cubic-bezier(.22,.61,.36,1) both}
  .sp-menu .sm-strip{height:4px;background:var(--grad)}
  .sp-menu .sm-h{display:flex;align-items:center;gap:11px;padding:12px 14px 10px}
  .sp-menu .sm-h .av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;background:var(--grad);
    background-size:cover;background-position:center;color:#fff;display:grid;place-items:center;
    font-size:15px;font-weight:800;box-shadow:0 5px 14px rgba(108,76,255,.28)}
  .sp-menu .sm-h .t{min-width:0;flex:1}
  .sp-menu .sm-h b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Должность в две строки: «Косметолог · эстетическая медицина» в одну
     обрезалась на полуслове, а в переводе строки ещё длиннее. */
  .sp-menu .sm-h .t span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:12px;line-height:1.35;color:#4F5567;font-weight:600;margin-top:2px}
  .sp-menu .sm-day{margin:0 14px 10px;padding:8px 11px;border-radius:12px;background:var(--surface-2);
    border:1px solid var(--line)}
  .sp-menu .sm-day .r{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .sp-menu .sm-day .k{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#666C81}
  .sp-menu .sm-day .v{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .sp-menu .sm-day .bar{height:5px;border-radius:99px;background:#E6E8F2;margin-top:7px;overflow:hidden}
  .sp-menu .sm-day .bar i{display:block;height:100%;border-radius:99px;background:var(--success)}
  .sp-menu .sm-day .sub{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px}
  .sp-menu .sm-day .sub .w{font-size:11.5px;color:#4F5567;font-weight:600}
  .sp-menu .sm-day .pill{font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;
    background:#E8F7F0;color:#15774F}
  .sp-menu .sm-day.mid .bar i{background:var(--warn)}
  .sp-menu .sm-day.mid .pill{background:#FDF4E3;color:#8A5E08}
  .sp-menu .sm-day.hot .bar i{background:var(--accent)}
  .sp-menu .sm-day.hot .pill{background:#FDEEF1;color:#A82742}
  /* Цвета мелких подписей заданы явно, а не токенами кабинета: замер показал,
     что --ink-faint даёт 2.79 на белом при норме 4.5, а --ink-soft — 4.48.
     Менять их глобально значит перекрасить весь кабинет — это отдельное
     решение; здесь ставим выверенные значения локально. */
  .sp-menu .sm-sec{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:#666C81;padding:7px 15px 3px}
  .sp-menu .sm-grp{display:flex;flex-direction:column;padding:0 7px 4px;margin:0;border:0}
  .sp-menu .sm-grp + .sm-sec{border-top:1px solid var(--line);margin-top:2px}
  .sp-menu button{border:0;background:none;text-align:left;padding:6px 8px;border-radius:10px;
    font-size:13.2px;font-weight:600;color:var(--ink);font-family:inherit;display:flex;align-items:center;gap:10px}
  .sp-menu button .ic{width:28px;height:28px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
    background:var(--brand-soft);color:var(--brand-ink);transition:background .14s}
  .sp-menu button svg{width:16px;height:16px;flex:0 0 auto;color:inherit}
  .sp-menu button .lb{min-width:0;flex:1}
  .sp-menu button .lb b{display:block;font-weight:600;font-size:13.2px}
  .sp-menu button .lb i{display:block;font-style:normal;font-size:11.4px;color:#666C81;
    font-weight:500;margin-top:1px}
  .sp-menu button:hover{background:var(--surface-2);color:var(--brand-ink)}
  .sp-menu button:hover .ic{background:#E7E1FD}
  .sp-menu .sm-grp.dang{border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
  .sp-menu button.dang .ic{background:#FDEEF1;color:#A82742}
  .sp-menu button.dang:hover{background:#FDEEF1;color:#A82742}
  .sp-menu button[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
  .sp-menu button[aria-disabled="true"]:hover{background:none;color:var(--ink)}
  /* Палец: строка меню обязана быть не меньше 44px (Apple HIG / Material). */
  @media(max-width:640px){
    .sp-menu button{padding:9px 10px;font-size:14.4px;min-height:44px}
    .sp-menu button .ic{width:34px;height:34px;border-radius:11px}
    .sp-menu button svg{width:18px;height:18px}
  }

  /* --- §8.2 нерабочее время: ровный тон, без диагональной штриховки (ТЗ «Календарь») --- */
  .dc-nw,.dc-brk{position:absolute;left:0;right:0;z-index:0;pointer-events:none;display:grid;place-items:center;overflow:hidden}
  /* ТЗ v2.2 §11.2: вне графика — диагональная штриховка, полоса называет
     себя сама (подпись .bl кладёт business.js, слово переводит i18n-auto) */
  .dc-nw{background:repeating-linear-gradient(45deg,var(--surface-2) 0 8px,color-mix(in srgb,var(--line-strong) 55%,var(--surface-2)) 8px 9px)}
  .dc-nw .bl,.dc-brk .bl{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-faint);white-space:nowrap;line-height:1}
  .dc-brk .bl{color:var(--brand-ink)}
  .dc-brk .bl .tm{letter-spacing:.02em;font-variant-numeric:tabular-nums}
  .dc-brk{background:color-mix(in srgb,var(--brand) 8%,var(--surface));
    border-top:1px dashed color-mix(in srgb,var(--brand) 34%,transparent);
    border-bottom:1px dashed color-mix(in srgb,var(--brand) 34%,transparent)}

  /* --- §9 конфликт: обе карточки помечены, но это не «ошибка» --- */
  .dc-ev.conf{box-shadow:inset 0 0 0 2px var(--accent)}
  /* Кольцо пересечения — коралловое (--accent), и на красной неявке оно
     пропадало: два красных одного семейства. Для неё кольцо темнее заливки,
     так «наложение» остаётся видно и на бледном, и на насыщенном варианте. */
  .dc-ev.s-NO_SHOW.conf{box-shadow:inset 0 0 0 2px #A32B3B}
  .dc-ev .cfl{position:absolute;right:4px;top:3px;font-size:9px;font-weight:800;letter-spacing:.02em;
    background:var(--accent);color:#fff;border-radius:5px;padding:1px 4px;pointer-events:none}
  .dc-ev.sz-xs .cfl,.dc-ev.sz-xs .oob{display:none}
  .dc-ev.out .oob{background:color-mix(in srgb,var(--warn) 24%,var(--surface));border-radius:5px;padding:0 4px;color:#8A5A12}

  /* --- §7 перетаскивание: призрак, место-источник, подсказка времени --- */
  .dc-ev.dragging{opacity:.55}
  .dc-place{position:absolute;left:var(--evl,3px);width:var(--evw,calc(100% - 6px));border-radius:9px;z-index:1;
    border:1.5px dashed var(--line-strong);background:var(--surface-2);pointer-events:none}
  .dc-tip{position:fixed;z-index:1400;pointer-events:none;background:var(--ink);color:#fff;border-radius:9px;
    padding:6px 9px;font-size:11.5px;font-weight:700;line-height:1.35;box-shadow:var(--shadow-pop);max-width:250px}
  .dc-tip b{display:block;font-size:12.5px;letter-spacing:.01em}
  .dc-tip span{display:block;font-weight:600;opacity:.85;font-size:10.5px}
  .dc-tip.warn{background:#8A4A12}
  .dc-tip.bad{background:#93313D}
  /* --- ТЗ «Дневная сетка» v2.0 §6: наведение на пустую сетку вне переноса ---
     Тот же визуальный язык, что .dc-tip, но лёгкий вариант: только время. */
  .dc-hoverline{position:absolute;left:0;right:0;z-index:5;pointer-events:none;
    background:var(--dc-hover-fill);border-top:1px solid var(--dc-hover-line);border-bottom:1px solid var(--dc-hover-line)}
  .dc-hoverline::before{content:"";position:absolute;left:76px;top:0;bottom:0;width:3px;background:var(--accent)}
  .dc-hovertip{position:fixed;z-index:1399;pointer-events:none;background:var(--ink);color:#fff;border-radius:9px;
    padding:5px 10px 6px;font-size:12px;font-weight:800;letter-spacing:.01em;box-shadow:var(--shadow-pop)}
  .dc-hovertip span{display:block;font-size:9.5px;font-weight:700;opacity:.8;margin-top:1px}
  .dc-lane.dropwarn .grid{background:color-mix(in srgb,var(--warn) 12%,transparent)}
  .dc-lane.dropbad .grid{background:color-mix(in srgb,var(--accent) 11%,transparent)}
  .mc-grid button.dropto,.wk-col.dropto,.mc.dropto{outline:2px solid var(--brand);outline-offset:-2px;background:var(--brand-tint)}

  /* --- §8 окно предупреждения и подтверждения --- */
  .ovw{display:flex;gap:11px;align-items:flex-start;background:color-mix(in srgb,var(--warn) 13%,var(--surface));
    border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line-strong));border-radius:13px;padding:12px 13px;margin-bottom:12px}
  .ovw.strong{background:color-mix(in srgb,var(--accent) 11%,var(--surface));border-color:color-mix(in srgb,var(--accent) 38%,var(--line-strong))}
  .ovw .ic{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--warn);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
  .ovw.strong .ic{background:var(--accent)}
  .ovw b{display:block;font-size:14px;margin-bottom:4px}
  .ovw ul{margin:0;padding-left:17px;font-size:13px;color:var(--ink-soft);line-height:1.55}
  .ovw-when{display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:12px;padding:10px 12px}
  .ovw-when>div{flex:1;min-width:0}
  .ovw-when span{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
  .ovw-when b{display:block;font-size:13.5px;margin-top:2px}
  .ovw-when .ar{flex:0 0 auto;color:var(--ink-faint);font-size:16px;font-weight:800}
  .ovw-conf{margin-top:10px;font-size:12.5px;color:var(--ink-soft);background:var(--surface-2);border-radius:10px;padding:9px 11px}
  .ovw-act{display:flex;gap:9px;flex-wrap:wrap}
  .ovw-act .btn{flex:1 1 132px}
  .ss-wrap .brk-c{display:inline-flex;align-items:center;gap:4px}
  .ss-wrap .brk-c select{border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;font-size:11.5px;
    font-weight:700;color:var(--ink-soft);padding:3px 4px;font-family:inherit}
  .ss-wrap .sched-day{flex-wrap:wrap}
  .ap-ctx .ctx-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);
    padding:6px 10px 5px;border-bottom:1px solid var(--line);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
  .ap-ctx button{display:flex;align-items:center;gap:8px}
  .ap-ctx button i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
  .ap-ctx button.on{background:var(--brand-tint);color:var(--brand-ink);font-weight:800}
  .ap-ctx button.dang{color:var(--accent)}
  .dc-ev .nt-badge{font-size:9px;font-weight:800;background:var(--surface);border-radius:4px;padding:0 3px;opacity:.75}
  .dc-ev .nt-badge.imp{background:var(--accent);color:#fff;opacity:1}
  .mc-today{width:100%;margin-top:7px;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;
    padding:6px 8px;font-size:11.5px;font-weight:700;color:var(--ink-soft);font-family:inherit}
  .mc-today:hover{border-color:var(--brand);color:var(--brand-ink)}
  .sx-list{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow-y:auto;margin-bottom:9px}
  .sx-row{display:flex;align-items:center;gap:9px;background:var(--surface-2);border-radius:9px;padding:6px 10px;font-size:12.5px}
  .sx-row b{font-weight:700}
  .sx-row span{color:var(--ink-soft);font-weight:700}
  .sx-row .x{margin-left:auto;width:24px;height:24px;border:0;background:none;color:var(--ink-faint);font-size:15px;border-radius:6px}
  .sx-row .x:hover{background:var(--surface);color:var(--accent)}
  .sx-add{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .sx-add input[type=date],.sx-add select{border:1.5px solid var(--line-strong);background:var(--surface-2);border-radius:9px;
    padding:6px 8px;font-size:12.5px;color:var(--ink);font-family:inherit;outline:none}
  .sx-add .sx-on{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
  .sx-add .sx-on input{width:15px;height:15px}
  /* §29 видимый фокус у всех новых интерактивных элементов календаря */
  .dc-ev:focus-visible,.dc-lane .ch-name:focus-visible,.dc-lane .lane-menu:focus-visible,
  .an-st:focus-visible,.an-bd:focus-visible,.an-per button:focus-visible,.wl-b:focus-visible,
  .sp-menu button:focus-visible,.ap-ctx button:focus-visible,.mc-today:focus-visible,
  .ovw-act .btn:focus-visible,.an-x:focus-visible,.sx-row .x:focus-visible,
  .mc-grid button:focus-visible,.wk-ev:focus-visible,.mo .mc .me:focus-visible{
    outline:2px solid var(--brand);outline-offset:2px}
  .res-wrap{display:flex;flex-direction:column;gap:7px;max-height:280px;overflow-y:auto}
  .res-row{display:flex;gap:7px;align-items:center}
  .res-row .rr-n{flex:1;border:1.5px solid var(--line-strong);background:var(--surface-2);border-radius:9px;padding:7px 10px;font-size:13px;color:var(--ink);outline:none;font-family:inherit}
  .res-row .rr-t{border:1.5px solid var(--line-strong);background:var(--surface-2);border-radius:9px;padding:7px 8px;font-size:12.5px;color:var(--ink-soft);font-family:inherit}
  .res-row .x{width:30px;height:30px;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;color:var(--ink-faint);font-size:15px}
  .res-row .x:hover{border-color:var(--accent);color:var(--accent)}

  /* --- §16–§17 правая аналитическая колонка --- */
  .cal-an{flex:0 0 300px;width:300px;position:sticky;top:calc(var(--hdr) + 12px);
    max-height:calc(100vh - var(--hdr) - 24px);max-height:calc(100dvh - var(--hdr) - 24px);
    overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .cal-an.collapsed{display:none}
  .an-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:12px 13px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  .an-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);
    margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .an-per{display:flex;gap:2px;background:var(--surface-2);border-radius:8px;padding:2px}
  .an-per button{border:0;background:none;border-radius:6px;font-family:inherit;font-size:10px;font-weight:800;
    color:var(--ink-faint);padding:3px 7px;text-transform:none;letter-spacing:0}
  .an-per button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .an-x{display:none}

  .an-sum{display:flex;align-items:center;gap:11px}
  .an-sumx{min-width:0;flex:1}
  .an-sumx>b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
  .an-sumx>span{display:block;font-size:11px;color:var(--ink-faint);font-weight:600}
  .an-sub{font-size:11px;color:var(--ink-soft);margin-top:5px;line-height:1.45}
  .an-sub.warn{color:#8A5A12;font-weight:700}
  .an-d{display:inline-block;font-style:normal;font-size:10.5px;font-weight:800;margin-top:4px}
  .an-d.up{color:var(--success)} .an-d.down{color:var(--accent)} .an-d.flat{color:var(--ink-faint)}

  .an-dist{display:flex;flex-direction:column;gap:3px;margin-top:11px}
  .an-bd{display:flex;align-items:center;gap:7px;border:1px solid transparent;background:none;border-radius:8px;
    padding:4px 6px;font-family:inherit;font-size:11.5px;color:var(--ink-soft);text-align:left;width:100%}
  .an-bd:hover{background:var(--surface-2)}
  .an-bd.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-ink)}
  .an-bd i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
  .an-bd span{flex:1 1 auto;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .an-bd em{font-style:normal;font-size:10px;color:var(--ink-faint);font-weight:700}
  .an-bd b{font-size:12px;min-width:16px;text-align:right}

  .an-staff{margin-top:11px;border-top:1px solid var(--line);padding-top:9px;display:flex;flex-direction:column;gap:7px}
  .an-st{display:grid;grid-template-columns:1fr auto;gap:2px 8px;background:none;border:0;padding:4px 5px;border-radius:9px;
    font-family:inherit;text-align:left;width:100%}
  .an-st:hover{background:var(--surface-2)}
  .an-st .nm{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .an-st .pc{font-size:12px;font-weight:800}
  .an-st .bar{grid-column:1/-1;height:4px;border-radius:3px;background:var(--line);overflow:hidden}
  .an-st .bar i{display:block;height:100%;border-radius:3px}
  .an-st .sub{grid-column:1/-1;font-size:10px;color:var(--ink-faint);font-weight:600}

  .an-legend{font-size:10.5px;color:var(--ink-faint);line-height:1.5;margin-top:8px}

  .an-ms{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .an-m{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:8px 9px;min-width:0}
  .an-m span{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .an-m b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;margin-top:2px}
  .an-m i{display:block;font-style:normal;font-size:10px;color:var(--ink-faint);font-weight:600;margin-top:2px;line-height:1.35}
  .an-m i .an-d{margin:0}

  .an-best{display:flex;flex-direction:column;gap:5px}
  .an-bw{display:flex;align-items:baseline;gap:7px;background:var(--surface-2);border-radius:9px;padding:6px 9px}
  .an-bw b{font-size:12px;flex:0 0 auto}
  .an-bw span{font-size:11.5px;color:var(--ink-soft);font-weight:700}
  .an-bw em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800;color:var(--brand-ink)}
  .ca-scroll{max-height:148px;overflow-y:auto;padding-right:2px}
  .lg-ov{font-size:11px;font-weight:800;color:#8A5A12;background:color-mix(in srgb,var(--warn) 16%,transparent);
    border-radius:6px;padding:2px 6px;display:inline-block;margin-top:3px}

  /* §28 планшет: аналитика уезжает в drawer поверх календаря */
  @media(max-width:1400px){
    .cal-an{position:fixed;top:var(--hdr);right:0;bottom:0;width:340px;max-width:92vw;max-height:none;z-index:120;
      background:var(--bg);border-left:1px solid var(--line-strong);box-shadow:-20px 0 50px rgba(40,35,90,.18);
      padding:14px 14px 40px;flex:none}
    .an-x{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-strong);background:var(--surface);
      border-radius:9px;color:var(--ink-soft);font-size:17px;line-height:1}
    .an-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    .an-hd b{font-size:14px}
  }
  @media(min-width:1401px){ .an-hd{display:none} }
  @media(max-width:720px){
    .cal-an{width:100%;max-width:none}
    .an-ms{grid-template-columns:1fr}
    .dc-lane{min-width:150px}
    /* §28/§29 минимальная интерактивная зона 44×44 — .cm-today/.cm-arrow/.cm-add/
       .cm-tools button/.cm-search input уже 44px в базовых правилах (ТЗ «Дизайн
       верхней части календаря» v1.1), здесь только то, что меньше на любой ширине */
    .mc-grid button{min-height:38px}
    .an-per button{min-height:34px;padding:6px 10px}
    /* в плотной шапке колонки кнопка меньше, но область нажатия — полные 44 px */
    .dc-lane .lane-menu{position:relative;width:26px;height:26px}
    .dc-lane .lane-menu::after{content:"";position:absolute;inset:-9px}
    .sp-menu button{min-height:44px}
    .wk-ev,.mo .mc .me{min-height:34px;display:flex;flex-direction:column;justify-content:center}
  }

  /* ==========================================================================
     Календарь v2.2 — ТЗ «Календарь · Премиальный редизайн» (19.09.2026):
     KPI-лента (§7), быстрые чипы (§8), шапка дорожки с загрузкой (§9.3),
     карточка визита с аватаром клиента и пилюлей статуса (§10), подписи
     полос (§11), легенда (§13). Слой ложится ПОСЛЕ v3/v4 и сознательно
     переопределяет их. Все размеры кратны 4 (baseline grid §3.2).
     ========================================================================== */
  /* --- §10.5: восемь детерминированных градиентов аватаров --- */
  .avp0{background:linear-gradient(135deg,#5B4CFF,#8B72FF)!important}
  .avp1{background:linear-gradient(135deg,#E85A67,#F3A633)!important}
  .avp2{background:linear-gradient(135deg,#3A6F9A,#7C89FF)!important}
  .avp3{background:linear-gradient(135deg,#F3A633,#F3D57A)!important}
  .avp4{background:linear-gradient(135deg,#29B982,#8AE1BE)!important}
  .avp5{background:linear-gradient(135deg,#7C5CFF,#B9A3FF)!important}
  .avp6{background:linear-gradient(135deg,#E85A67,#FF9AA6)!important}
  .avp7{background:linear-gradient(135deg,#3A6F9A,#8AC4FF)!important}

  /* --- §9.3 + референс 20.09: шапка дорожки — фото, имя, часы, «птичка» --- */
  .dc-lane .ch{padding:6px 9px}
  .dc-lane .ch-top{gap:10px;padding:0}
  .dc-lane .ch .av{width:30px;height:30px;font-size:11px}
  /* фото сотрудника (раздел «Сотрудники» → карточка → фото); буква остаётся
     запасным вариантом, когда фото не загружено */
  .dc-lane .ch .av.ph{background-size:cover;background-position:center;background-repeat:no-repeat;
    color:transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
  .dc-lane .ch-name{font-size:12.5px;font-weight:700}
  .dc-lane .ch-name small{font-size:10.5px;font-weight:600;margin-top:1px;color:var(--ink-faint)}
  .dc-lane .lane-menu{width:24px;height:24px;border-radius:7px}
  .dc-lane .lane-menu svg{width:15px;height:15px;display:block}

  /* --- §10: карточка визита --- */
  .dc-ev{border-radius:12px;container-type:inline-size}
  .dc-ev.sz-md{padding:4px 9px;line-height:1.28}
  /* по референсу: время строкой сверху, под ним имя, под ним услуга.
     Размеры подобраны так, чтобы три строки влезали в часовой визит (46px). */
  .dc-ev.sz-md .t{font-size:10px;font-weight:700;opacity:.92;margin-bottom:1px}
  .dc-ev.sz-md .nm{font-size:12px;font-weight:700;letter-spacing:-.005em}
  .dc-ev.sz-md .svc{font-size:10.5px;opacity:.88}
  .dc-ev.sz-md .ph{font-size:9.5px}
  /* цвет статуса одной переменной — пилюля, «!», NEW берут её, а не 9 копий */
  .dc-ev.s-NEW{--evd:var(--st-NEW-d);--evbg:var(--st-NEW)}
  .dc-ev.s-PENDING{--evd:var(--st-PENDING-d);--evbg:var(--st-PENDING)}
  .dc-ev.s-CONFIRMED{--evd:var(--st-CONFIRMED-d);--evbg:var(--st-CONFIRMED)}
  .dc-ev.s-ARRIVED{--evd:var(--st-ARRIVED-d);--evbg:var(--st-ARRIVED)}
  .dc-ev.s-IN_PROGRESS{--evd:var(--st-IN_PROGRESS-d);--evbg:var(--st-IN_PROGRESS)}
  .dc-ev.s-COMPLETED{--evd:var(--st-COMPLETED-d);--evbg:var(--st-COMPLETED)}
  .dc-ev.s-NO_SHOW{--evd:var(--st-NO_SHOW-d);--evbg:var(--st-NO_SHOW)}
  .dc-ev.s-CANCELLED_CLIENT{--evd:var(--st-CANCELLED_CLIENT-d);--evbg:var(--st-CANCELLED_CLIENT)}
  .dc-ev.s-CANCELLED_BUSINESS{--evd:var(--st-CANCELLED_BUSINESS-d);--evbg:var(--st-CANCELLED_BUSINESS)}
  /* конфликт — круглый «!» в правом нижнем углу (§10.3); текст остался в title.
     Если карточка ещё и вне графика, правый нижний занят плашкой «вне графика»
     — тогда «!» уходит влево, а NEW-бейдж уступает ему место. */
  .dc-ev .cfl{top:auto;right:5px;bottom:5px;width:16px;height:16px;border-radius:50%;padding:0;
    display:grid;place-items:center;font-size:10px;letter-spacing:0}
  .dc-ev.out .cfl{right:auto;left:8px}

  /* §9.3: аватар 38 + бар 56 + меню 20 + отступы съедали всю колонку, и при
     узкой дорожке имя мастера схлопывалось в ноль. На десктопе дорожка стала
     шире (лучше горизонтальная прокрутка, чем исчезнувшее имя), на планшете и
     телефоне бар загрузки прячется — его число есть в подсказке и в карточке
     мастера. */
  .dc-lane{min-width:200px}
  .dc-wrap.focus .dc-lane{min-width:0}
  @media(max-width:900px){
    .dc-lane{min-width:168px}
    .dc-lane .ch .av{width:30px;height:30px;font-size:11px}
  }

  /* ==========================================================================
     Лист «Заявки ждут подтверждения» (макет владелицы 20.09.2026):
     на телефоне выезжает снизу, на десктопе — окно по центру.
     ========================================================================== */
  .pnd-wrap{position:fixed;inset:0;z-index:1500;display:flex;align-items:flex-end;justify-content:center}
  .pnd-mask{position:absolute;inset:0;background:rgba(28,22,70,.34);opacity:0;transition:opacity .2s ease}
  .pnd-wrap.open .pnd-mask{opacity:1}
  .pnd-sheet{position:relative;width:100%;max-width:560px;max-height:86vh;overflow:auto;
    background:var(--bg);border-radius:22px 22px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -18px 50px rgba(40,30,90,.22);transform:translateY(16px);opacity:0;
    transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .18s ease}
  .pnd-wrap.open .pnd-sheet{transform:none;opacity:1}
  .pnd-grab{display:block;width:44px;height:4px;border-radius:3px;background:var(--line-strong);margin:0 auto 10px}
  .pnd-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;
    background:var(--surface-2);color:var(--ink-soft);font-size:19px;line-height:1;font-family:inherit}
  .pnd-x:hover{background:var(--line-strong)}
  .pnd-head{padding:0 44px 12px 2px}
  .pnd-head b{display:block;font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
  .pnd-head span{display:block;font-size:13px;color:var(--ink-faint);margin-top:3px}
  .pnd-head span i{font-style:normal}
  .pnd-list{display:grid;gap:10px}
  .pnd-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px 12px;align-items:start;
    background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 13px;box-shadow:var(--shadow-sm)}
  .pnd-av{width:44px;height:44px;border-radius:50%;color:#fff;display:grid;place-items:center;
    font-size:14px;font-weight:800;flex:0 0 auto}
  .pnd-tx{min-width:0}
  .pnd-tx b{display:block;font-size:15px;font-weight:800;color:var(--ink);line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pnd-when{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px;font-variant-numeric:tabular-nums}
  .pnd-svc{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pnd-tag{display:inline-flex;align-items:center;gap:6px;max-width:150px;
    background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:#8A5A0F;
    border-radius:10px;padding:6px 9px;font-size:11.5px;font-weight:700;line-height:1.2}
  .pnd-tag svg{width:15px;height:15px;flex:0 0 auto}
  .pnd-tag i{font-style:normal}
  .pnd-act{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
  .pnd-act .btn{height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border-radius:12px;font-size:13.5px;font-weight:700}
  .pnd-act .btn svg{width:17px;height:17px;flex:0 0 auto}
  @media(max-width:560px){
    .pnd-tag{grid-column:1 / -1;justify-self:start;max-width:none}
    .pnd-row{grid-template-columns:auto 1fr}
  }
  @media(min-width:641px){
    .pnd-wrap{align-items:center}
    .pnd-sheet{border-radius:22px;max-height:82vh;box-shadow:var(--shadow-pop)}
    .pnd-grab{display:none}
  }

  /* Кнопка «ждут подтверждения» (календарь со счётчиком). Активна — когда
     включён фильтр; приглушена — когда заявок нет. */
  .cm-pend svg,.cmh-pend svg{width:20px;height:20px;display:block}
  .cm-pend.zero,.cmh-pend.zero{color:var(--ink-faint)}

  /* Мобильная шапка календаря (референс владелицы): на десктопе не нужна —
     там полноценная панель. */
  .cmh{display:none}
  @media(max-width:639px){
    .cmh{display:flex;align-items:center;gap:10px;padding:2px 0 10px}
    .cmh-ic{width:38px;height:38px;flex:0 0 auto;border:0;background:none;border-radius:12px;
      color:var(--ink);display:grid;place-items:center;position:relative;font-family:inherit}
    .cmh-ic svg{width:21px;height:21px;display:block}
    .cmh-ic:active{background:var(--surface-2)}
    .cmh-nb{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
      background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;font-style:normal;display:grid;place-items:center}
    .cmh-sep{width:1px;height:26px;background:var(--line-strong);flex:0 0 auto}
    .cmh-date{flex:1 1 auto;min-width:0;border:0;background:none;text-align:left;padding:0;font-family:inherit}
    .cmh-date b{display:flex;align-items:center;gap:4px;font-size:19px;font-weight:700;color:var(--ink);line-height:1.2}
    .cmh-date b svg{width:17px;height:17px;flex:0 0 auto;stroke-width:2.2}
    .cmh-date small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-soft);margin-top:2px;
      font-variant-numeric:tabular-nums}
    /* обычная панель на телефоне заменена этой шапкой и лентой дней */
    .cm-row1,.cm-row2{display:none}
    /* «Поиск по записям» из меню «Ещё» показывает только поле поиска */
    .cal-main.find .cm-row2{display:flex}
    .cal-main.find .cm-row2 > *:not(.cm-search){display:none}
    .cal-wstrip{margin-top:0}
  }
  /* меню «вид» и «ещё» из мобильной шапки */
  .cmh-menu{display:grid;gap:6px}
  .cmh-mi{border:1px solid var(--line-strong);background:var(--surface);border-radius:12px;
    padding:13px 14px;font-size:14px;font-weight:700;color:var(--ink);font-family:inherit;text-align:left}
  .cmh-mi:active{background:var(--surface-2)}
  .cmh-mi.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-ink)}

  /* Лента дней недели (мобильный референс): на десктопе не нужна — там
     стрелки и поповер даты, поэтому показывается только на узких экранах. */
  .cal-wstrip{display:none}
  @media(max-width:900px){
    /* рельса, а не сетка: в окне ровно семь дней (flex-basis 100%/7), но
       внутри их девять недель — палец листает в обе стороны с прилипанием по
       дню. Полосу прокрутки прячем: она здесь только мешает. */
    .cal-wstrip{display:flex;margin:0 0 10px;border-bottom:1px solid var(--line);padding-bottom:8px;
      overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
      -webkit-overflow-scrolling:touch;scrollbar-width:none}
    .cal-wstrip::-webkit-scrollbar{display:none}
    .cal-wstrip .cws-d{flex:0 0 calc(100%/7);scroll-snap-align:start;
      border:0;background:none;font-family:inherit;padding:4px 0 5px;border-radius:12px;
      display:grid;justify-items:center;gap:3px;cursor:pointer;line-height:1}
    .cal-wstrip .cws-d u{text-decoration:none;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-faint)}
    .cal-wstrip .cws-d b{font-size:15px;font-weight:600;color:var(--ink);width:30px;height:30px;border-radius:50%;
      display:grid;place-items:center;font-variant-numeric:tabular-nums}
    .cal-wstrip .cws-d.tod b{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
    .cal-wstrip .cws-d.sel b{background:var(--brand);color:#fff}
    .cal-wstrip .cws-d.sel.tod b{background:var(--brand);color:#fff}
    .cal-wstrip .cws-d:active b{transform:scale(.94)}
    /* первое число месяца — тонкая граница слева: при свайпе видно, где
       месяц сменился (подписи месяца в ленте нет, она есть в шапке даты) */
    .cal-wstrip .cws-d.mo1{box-shadow:inset 1px 0 0 0 var(--line-strong)}
  }

  /* ==========================================================================
     Календарь на телефоне и планшете (20.09.2026, по мобильному референсу).
     Цель: сетка начинается сразу, а не после пол-экрана панелей; всё
     помещается по ширине; ничего не наезжает друг на друга.
     ========================================================================== */
  @media(max-width:900px){
    /* заголовок и панель — компактнее, сетка выше */
    .cm-h1{font-size:19px;line-height:24px}
    .cm-row1{gap:8px;margin-bottom:8px}
    .cm-row2{gap:8px;margin-bottom:10px}
    .cm-today,.cm-arrow,.cm-add,.cm-tools button,.cm-views{height:38px}
    .cm-arrow{width:38px}
    .cm-today,.cm-add{padding:0 12px;font-size:12px}
    .cm-views button{padding:0 11px;font-size:12px}
    .cm-tools button{width:38px}
    .cm-search input{height:38px;font-size:13px}
    .cm-date{font-size:14px}
    .cm-date small{font-size:10.5px}
  }
  @media(max-width:639px){
    /* строка даты — своей строкой, без переноса стрелок за край экрана */
    .cm-row1{flex-wrap:wrap}
    .cm-nav{flex:1 1 100%;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:6px}
    .cm-nav .cm-date{grid-column:3;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis}
    .cm-views{flex:1 1 auto}
    .cm-views button{flex:1 1 0;padding:0 8px}
    /* «Резерв времени» на телефоне живёт в меню кнопки «+» (FAB) — вторая
       кнопка того же действия только занимала строку */
    #dc-block{display:none}
    .cm-row2{flex-wrap:wrap;gap:6px}
    .cm-row2 .cm-search{order:2;flex:1 1 100%;max-width:none}
    .cm-search input{height:34px}
    .cm-tools{margin-left:auto;order:1}
    .cm-tools button{width:34px;height:34px}
    .cm-tools button svg{width:15px;height:15px}
    .cm-views{order:0;height:34px}
    .cm-views button{font-size:12px}
    /* две колонки мастеров помещаются в 375px: 64 (часы) + 2×150 + поля */
    .dc-lane{min-width:150px}
    /* заголовок дублируется активной вкладкой снизу, роль на телефоне не
       переключают — обе строки только отодвигали сетку вниз */
    .cm-h1{display:none}
    /* карточки визитов — мельче; плашку «вне графика» на телефоне не рисуем:
       в выходной она висела бы на каждой карточке и перекрывала имя, а сам
       факт виден по штриховке колонки и есть в подсказке */
    .dc-ev.sz-md{padding:4px 7px}
    .dc-ev.sz-md .t{font-size:9.5px}
    .dc-ev.sz-md .nm{font-size:11.5px}
    .dc-ev.sz-md .svc{font-size:10px}
    .dc-ev .oob{display:none}
    .dc-ev .cfl{width:14px;height:14px;font-size:9px}
    /* подсказка под сеткой на телефоне не нужна — место дороже */
    .dc-hint{display:none}
  }

  /* На телефоне колонка времени 108px забирала треть экрана: там день —
     единственный доступный вид, и дорожкам нужна ширина. Сужаем колонку и
     чип «сейчас» одной группой — три места, завязанные на эту ширину. */
  @media(max-width:639px){
    .dc-time{width:64px}
    .dc-time .h{font-size:11.5px;padding-right:12px}
    .dc-now::after{left:0}          /* линию обрезает липкая колонка часов */
    .dc-now::before{left:66px}
    .dc-hoverline::before{left:64px}
    .dc-now-chip{left:6px;width:50px;height:20px;margin-top:-10px}
    .dc-now.tight .dc-now-chip{margin-top:2px}
    .dc-now .t{top:5px;font-size:11px}
  }

  /* ==========================================================================
     Панель календаря — карточка (референс владелицы, 20.09.2026).
     Компьютер: два ряда внутри карточки — дата с видами сверху, поиск с
     действиями снизу. Планшет: те же шесть групп в четыре ряда (заголовок с
     иконками · дата · вкладки во всю ширину · поиск с кнопкой) — ряды для
     этого раскрываются через display:contents, DOM не меняется. Телефон
     живёт на .cmh, карточка там просто снимается.
     ========================================================================== */
  /* Градиентной нити 3px по верхнему краю здесь больше нет: владелица
     20.09.2026 — «непонятная полоска». Она повторяла градиент шапки
     (.bh-bar) в сантиметре под ней и читалась как обрезок чужого элемента,
     а не как акцент карточки. Фон остаётся одним цветом.
     Если однажды нить вернут — только фоном самого блока, а НЕ ::before с
     overflow:hidden: карточка обязана оставаться непрорезанной, иначе
     выпадающий список поиска (.cm-res) обрежется по её нижнему краю. */
  .cm-bar{position:relative;border-radius:22px;padding:16px 18px;margin-bottom:0;
    background:#F7F5FF;
    box-shadow:var(--shadow-sm)}

  /* Верх календаря закреплён при прокрутке — на всех экранах (просьба
     владелицы 04.10.2026). Сетка дня живёт в своём .dc-scroll, но список,
     месяц, неделя и весь телефон едут вместе со страницей, и панель с датой,
     видами и поиском уезжала вверх вместе с ними.
     Липкой делаем ОБЁРТКУ, а не саму карточку: ей нужен фон цвета страницы
     сверху и снизу — иначе в зазорах (24px отступ main и 16px до сетки) и в
     скруглённых углах карточки просвечивает уезжающее под ней содержимое.
     overflow обёртке НЕ ставим — им обрежется выпадающий список поиска
     (.cm-res), тот же запрет, что и у самой карточки выше.
     z-index 40: выше липкой колонки часов и шапок дорожек сетки (5…21),
     ниже шапки кабинета (.topbar, 60) и всплывающих окон (121+). */
  .cm-stick{position:sticky;top:var(--hdr);z-index:40;background:var(--bg);
    padding:12px 0 16px;margin-top:-12px}
  @media(min-width:640px){
    .cm-bar .cm-row1{margin-bottom:12px}
    .cm-bar .cm-row2{margin-bottom:0}
  }
  /* белые плитки управления на лавандовой карточке */
  .cm-bar .cm-today,.cm-bar .cm-arrow,.cm-bar .cm-tools button{
    background:var(--surface);border-color:var(--line);border-radius:14px;
    box-shadow:0 1px 2px rgba(38,32,82,.05)}
  .cm-bar .cm-views{background:#EDE8FC;border-color:transparent;border-radius:14px}
  .cm-bar .cm-search input{background:#EDE8FC;border-color:transparent;border-radius:14px}
  .cm-bar .cm-search input:focus{background:var(--surface);border-color:var(--brand)}
  /* «Резерв времени» — основное действие панели, поэтому залито брендом */
  .cm-add{gap:8px;border-radius:14px;background:var(--brand);border-color:transparent;color:#fff;
    box-shadow:0 8px 20px -10px rgba(91,76,255,.75)}
  .cm-add:hover{background:var(--brand-ink);border-color:transparent;color:#fff}
  .cm-add svg{width:17px;height:17px;flex:0 0 auto}
  /* поиск занимает примерно треть панели, как на референсе */
  .cm-search{flex:1 1 280px;max-width:420px}

  /* ---- планшет: четыре ряда ---- */
  /* Порог 1280: при боковом меню 288px ряд «заголовок · дата · виды»
     умещается в одну строку примерно с 1240px, с запасом на польские
     подписи вкладок — раньше он переносился и панель выглядела рваной. */
  @media(min-width:640px) and (max-width:1279px){
    .cm-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 10px;align-items:center}
    .cm-row1,.cm-row2{display:contents}
    .cm-h1{grid-row:1;grid-column:1;font-size:24px;line-height:30px;margin-bottom:0}
    /* столбец растягивает группу до ширины «Резерва времени» — иконки
       прижимаем к правому краю, иначе они висят в 20px от него */
    .cm-tools{grid-row:1;grid-column:2;margin-left:0;justify-content:flex-end}
    .cm-nav{grid-row:2;grid-column:1 / -1;gap:8px}
    .cm-date{padding:4px 10px}
    .cm-views{grid-row:3;grid-column:1 / -1;width:100%;flex-shrink:1}
    .cm-views button{flex:1 1 0;padding:0 8px}
    .cm-search{grid-row:4;grid-column:1;flex:none;width:100%;max-width:none}
    .cm-add{grid-row:4;grid-column:2}
    /* высота 44px — планшет трогают пальцем (ТЗ §28/§29) */
    .cm-today,.cm-arrow,.cm-add,.cm-tools button,.cm-views{height:44px}
    .cm-arrow{width:44px}
    .cm-tools button{width:44px}
    .cm-search input{height:44px}
    .cm-today,.cm-add{padding:0 16px;font-size:12.5px}
    .cm-views button{font-size:12.5px}
    /* разделители — только между двумя невыбранными вкладками, как на
       референсе: рядом с белой пилюлей активного вида они не нужны */
    .cm-views button:not(.on)+button:not(.on){position:relative}
    .cm-views button:not(.on)+button:not(.on)::before{content:"";position:absolute;left:-2px;top:50%;
      transform:translateY(-50%);width:1px;height:20px;background:var(--line-strong)}
  }

  /* ---- телефон: карточки нет, шапка своя (.cmh) ---- */
  @media(max-width:639px){
    .cm-bar{background:none;box-shadow:none;padding:0;margin:0;border-radius:0}
    /* карточки нет — закреплять нужно .cmh, и отбивка снизу ей не нужна:
       16px здесь отодвинули бы ленту дней от шапки на пустое место */
    .cm-stick{padding-bottom:0}
  }

  /* ==========================================================================
     ВИТРИНА · черновик → предпросмотр → публикация
     (ТЗ «ELYQO Vitrina / Draft → Publish», §4–§16, §22)
     ========================================================================== */

  /* card.css рисует карточку салона и по имени класса накрывает карточки панелей:
     оттуда прилетали height:var(--card-h), display:flex и overflow:hidden — длинные
     карточки редактора обрезались. Гасим наследование внутри main; настоящая
     карточка выдачи живёт в оверлее предпросмотра (.pv-ov, вне main) и не задета. */
  main .card{height:auto;display:block;overflow:visible;cursor:auto;transition:none}
  main .card:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow-sm)}

  /* ---- §4 статусная строка ---- */
  .sf-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    border:1px solid var(--line-strong);background:var(--surface);border-radius:12px;
    padding:9px 13px;margin:-6px 0 18px;font-size:13px;font-weight:600;color:var(--ink-soft)}
  .sf-status .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-faint);flex-shrink:0}
  .sf-status b{color:var(--ink);font-weight:800}
  .sf-status .sep{color:var(--line-strong)}
  .sf-status .grow{margin-left:auto;display:flex;align-items:center;gap:8px}
  .sf-status.s-pub   .dot{background:var(--success)}
  .sf-status.s-draft .dot{background:var(--brand)}
  .sf-status.s-dirty .dot{background:var(--warn)}
  .sf-status.s-busy  .dot{background:var(--brand);animation:sfPulse 1.1s ease-in-out infinite}
  .sf-status.s-err   .dot{background:var(--accent)}
  .sf-status.s-err{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong));
    background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
  @keyframes sfPulse{0%,100%{opacity:1}50%{opacity:.25}}
  @media(prefers-reduced-motion:reduce){.sf-status.s-busy .dot{animation:none}}
  .sf-ico{width:15px;height:15px;flex-shrink:0}

  /* ---- §5 постоянная панель действий ---- */
  /* Полоса действий нужна только там, где верхняя панель конструктора не
     помещается целиком, — на телефоне (§27). На desktop она дублировала бы
     «Опубликовать» из верхней панели. */
  .sf-bar{position:fixed;left:var(--sbw);right:0;bottom:0;z-index:70;
    background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);
    border-top:1px solid var(--line-strong);box-shadow:0 -8px 26px rgba(40,35,90,.07);
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:11px 18px calc(11px + env(safe-area-inset-bottom,0px));
    padding-right:calc(18px + var(--eq-dock,88px))}
  .sf-bar .st{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink-soft);min-width:0}
  .sf-bar .st .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex-shrink:0}
  .sf-bar .st.s-pub .dot{background:var(--success)}
  .sf-bar .st.s-draft .dot{background:var(--brand)}
  .sf-bar .st.s-dirty .dot{background:var(--warn)}
  .sf-bar .st.s-busy .dot{background:var(--brand);animation:sfPulse 1.1s ease-in-out infinite}
  .sf-bar .st.s-err .dot{background:var(--accent)}
  .sf-bar .acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  /* Полоса действий нужна только там, где верхняя панель конструктора не
     помещается целиком, — на телефоне (§27). На desktop она дублировала бы
     «Опубликовать» из верхней панели, и это читалось бы как две разные кнопки. */
  .sf-bar{display:none}
  @media(max-width:1000px){ .sf-bar{display:flex} }
  /* Обе панели фиксированы у нижнего края. Раньше на телефоне нижняя панель
     вкладок (.mtabs) при открытом конструкторе витрины скрывалась целиком —
     живая проверка на iPhone (13.09.2026) показала, что список разделов
     «Профиля салона» на телефоне превращался в тупик: уйти на Календарь/Чаты
     было нечем, кроме жеста «назад» ОС. Теперь полоса действий встаёт НАД
     панелью вкладок (в высоту --mtabs-h), а не замещает её. */
  @media(max-width:639px){ .sf-bar{bottom:var(--mtabs-h)} }
  /* панель фиксирована — освобождаем под неё место в конце длинной формы;
     на телефоне добавляется высота .mtabs, которая больше не скрыта под ней */
  .sf-pad{height:120px}
  @media(max-width:639px){ .sf-pad{height:calc(120px + var(--mtabs-h))} }
  /* чат-док уводим выше панели, иначе он ложится на кнопки; на телефоне —
     ещё выше, над панелью вкладок */
  body:has(.sf-bar){--fab-b:88px}
  @media(max-width:639px){ body:has(.sf-bar){--fab-b:calc(88px + var(--mtabs-h))} }
  .sf-only-mobile{display:none}
  @media(max-width:720px){
    /* чат-док уже поднят над панелью (--fab-b), место справа резервировать не надо */
    .sf-bar{padding-left:12px;padding-right:12px;gap:8px}
    .sf-bar .st{flex:1 1 100%;font-size:12px}
    .sf-bar .acts{margin-left:0;width:100%;flex-wrap:nowrap}
    .sf-bar .acts .btn{flex:1 1 0;min-width:0;padding:10px 8px;font-size:13px;white-space:nowrap}
    .sf-bar #sf-save{display:none}
    .sf-only-mobile{display:block}
    /* на телефоне причина блокировки переносится на вторую строку — панель выше */
    .sf-pad{height:150px}
  }

  /* ---- причина, по которой действие недоступно ---- */
  .sf-why{position:relative;display:inline-flex}
  .sf-why-tip{position:absolute;bottom:calc(100% + 9px);right:0;z-index:90;
    width:max-content;max-width:280px;padding:8px 11px;border-radius:11px;
    background:var(--ink);color:#fff;font-size:12px;font-weight:600;line-height:1.45;
    box-shadow:var(--shadow-pop);opacity:0;visibility:hidden;transform:translateY(4px);
    transition:opacity .14s ease,transform .14s ease,visibility .14s;pointer-events:none;text-align:left}
  .sf-why-tip::after{content:"";position:absolute;top:100%;right:22px;border:6px solid transparent;border-top-color:var(--ink)}
  .sf-why:hover .sf-why-tip,.sf-why:focus-within .sf-why-tip{opacity:1;visibility:visible;transform:none}
  .sf-bar .st .why-inline{font-weight:600;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media(max-width:720px){ .sf-bar .st .why-inline{white-space:normal} .sf-why-tip{right:auto;left:0} .sf-why-tip::after{right:auto;left:22px} }

  /* ---- меню «…» ---- */
  .sf-more{position:relative}
  .sf-more>button{width:34px;height:34px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:9px;color:var(--ink-soft);font-size:16px;line-height:1;font-weight:800}
  .sf-more>button:hover{background:var(--surface-2)}
  .sf-more .pop{position:absolute;right:0;bottom:calc(100% + 8px);min-width:230px;z-index:80;
    background:var(--surface);border:1px solid var(--line-strong);border-radius:13px;
    box-shadow:var(--shadow-pop);padding:6px;display:none}
  .sf-more.open .pop{display:block}
  .sf-more .pop button{display:block;width:100%;text-align:left;border:0;background:none;
    padding:9px 11px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink)}
  .sf-more .pop button:hover{background:var(--surface-2)}
  .sf-more .pop .hint{padding:6px 11px 8px;font-size:11.5px;color:var(--ink-faint);line-height:1.5}

  /* ---- удаление бизнеса: единственное необратимое действие раздела ----
     Карточка нарочно не красная целиком: раздел листают ради обычной правки,
     и алая плита в конце читалась бы как ошибка страницы. Красное здесь
     только то, что нажимают. */
  .sf-kill{margin:22px 0 0;border:1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius:16px;background:var(--surface);overflow:hidden}
  .sf-kill .hd{display:flex;align-items:flex-start;gap:12px;padding:15px 17px 0}
  .sf-kill .hd h3{font-size:15px;margin:0;color:var(--accent)}
  .sf-kill .hd p{font-size:12.5px;color:var(--ink-faint);margin-top:4px;line-height:1.55;max-width:60ch}
  .sf-kill .bd{padding:13px 17px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .sf-kill .bd .muted{font-size:12px;line-height:1.5;max-width:46ch;margin:0}
  .kl-list{margin:11px 0 0;padding:0;list-style:none;display:grid;gap:6px}
  .kl-list li{position:relative;padding-left:18px;font-size:13px;line-height:1.5;color:var(--ink-soft)}
  .kl-list li::before{content:"";position:absolute;left:4px;top:8px;width:5px;height:5px;border-radius:50%;
    background:var(--accent);opacity:.65}
  .kl-conf{margin:15px 0 0}
  .kl-conf label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
  .kl-conf code{font-family:inherit;font-weight:800;color:var(--ink)}
  .kl-note{margin:12px 0 0;font-size:12px;color:var(--ink-faint);line-height:1.5}


  /* ==========================================================================
     КОНСТРУКТОР ПУБЛИЧНОЙ СТРАНИЦЫ (ТЗ «Business Profile» v3, §12, §19, §27)
     --------------------------------------------------------------------------
     Три колонки: разделы — редактор — предпросмотр. Каждая скроллится
     самостоятельно, поэтому владелец не теряет ни список разделов, ни
     клиентский вид, пока листает длинный раздел.
     ======================================================================== */
  main:has(.bp-shell){max-width:none;padding:0}
  .bp-shell{display:flex;flex-direction:column;height:calc(100vh - var(--hdr));height:calc(100dvh - var(--hdr));min-height:520px}
  body:has(.bp-shell){overflow:hidden}

  /* ---- §2 верхняя панель ---- */
  .bp-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:0 0 auto;
    padding:11px 20px;border-bottom:1px solid var(--line-strong);background:var(--surface)}
  .bp-biz{display:flex;align-items:center;gap:9px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:11px;padding:5px 9px 5px 5px;max-width:250px;min-width:0}
  .bp-biz:hover{background:var(--surface-2)}
  .bp-biz .mono{width:28px;height:28px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;
    background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;background-size:cover;background-position:center}
  .bp-biz .tx{min-width:0;text-align:left;display:block}
  .bp-biz .tx b{display:block;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bp-biz .tx i{display:block;font-size:11px;font-style:normal;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bp-biz svg{width:15px;height:15px;flex:0 0 auto;color:var(--ink-faint)}

  .bp-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
    padding:5px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);white-space:nowrap}
  .bp-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-faint)}
  .bp-badge.s-published{background:color-mix(in srgb,var(--success) 14%,transparent);color:#1F7D57}
  .bp-badge.s-published .dot{background:var(--success)}
  .bp-badge.s-draft{background:color-mix(in srgb,var(--brand) 13%,transparent);color:var(--brand-ink,#4A3BC8)}
  .bp-badge.s-draft .dot{background:var(--brand)}
  .bp-badge.s-hidden{background:color-mix(in srgb,var(--warn) 20%,transparent);color:#8A5A11}
  .bp-badge.s-hidden .dot{background:var(--warn)}
  .bp-badge.s-pending{background:color-mix(in srgb,var(--warn) 16%,transparent);color:#8A5A11}
  .bp-badge.s-pending .dot{background:var(--warn)}
  /* решения платформы (§11 ТЗ) — тот же акцентный цвет, что и у полосы .bp-hold */
  .bp-badge.s-suspended,.bp-badge.s-archived,.bp-badge.s-deleted,
  .bp-badge.s-unlisted,.bp-badge.s-frozen,.bp-badge.s-blocked{
    background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
  .bp-badge.s-suspended .dot,.bp-badge.s-archived .dot,.bp-badge.s-deleted .dot,
  .bp-badge.s-unlisted .dot,.bp-badge.s-frozen .dot,.bp-badge.s-blocked .dot{background:var(--accent)}

  .bp-save{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-faint)}
  .bp-save .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-faint)}
  .bp-save.s-pub .dot{background:var(--success)}
  .bp-save.s-draft .dot{background:var(--brand)}
  .bp-save.s-dirty .dot{background:var(--warn)}
  .bp-save.s-busy .dot{background:var(--brand);animation:sfPulse 1.1s ease-in-out infinite}
  .bp-save.s-err{color:var(--accent)} .bp-save.s-err .dot{background:var(--accent)}
  .bp-who{font-size:11.5px;font-weight:700;color:var(--brand-ink,#4A3BC8);max-width:210px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bp-acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .bp-acts .btn{padding:9px 15px;font-size:13.5px}
  .bp-last{flex:1 1 100%;font-size:11.5px;color:var(--ink-faint);font-weight:600}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* ---- решение платформы: приостановка, архив, удаление ----
     Полоса красная, но не кричащая: это не ошибка страницы, а сообщение,
     которое надо прочитать целиком — с причиной и с тем, что делать. */
  .bp-hold{flex:0 0 auto;display:flex;gap:14px;align-items:flex-start;margin:0;
    padding:15px 20px;border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,var(--line-strong));
    background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
  .bp-hold .ic{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
    background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
  .bp-hold .ic svg{width:19px;height:19px}
  .bp-hold .tx{min-width:0;flex:1}
  .bp-hold b{font-size:15px;color:var(--accent);letter-spacing:-.01em}
  .bp-hold i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-faint);margin-left:9px}
  .bp-hold p{font-size:13px;line-height:1.55;color:var(--ink-soft);margin:5px 0 0;max-width:78ch}
  .bp-hold p.next{font-size:12.5px;color:var(--ink-faint);margin-top:9px}
  .bp-hold .why{margin-top:10px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
  .bp-hold .why span{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
    color:var(--ink-faint);flex:0 0 auto}
  .bp-hold .why q{font-size:13.5px;font-weight:600;color:var(--ink);quotes:"«" "»";
    background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 11px;
    display:inline-block;max-width:70ch;overflow-wrap:anywhere}
  .bp-hold .why.none{font-size:12.5px;color:var(--ink-faint)}
  .bp-hold .why.more q{background:transparent;border-style:dashed}
  .bp-hold .acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:11px}
  /* §12/§18 ТЗ — чек-лист, дедлайн и номер дела: то, что раньше не показывали,
     а решение модерации без них читалось как «просто сломалось». */
  .bp-checklist{margin-top:11px}
  .bp-checklist>span{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)}
  .bp-checklist ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
  .bp-checklist li{font-size:13px;color:var(--ink-soft);padding-left:20px;position:relative;line-height:1.45}
  .bp-checklist li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:4px;
    border:1.6px solid var(--line-strong)}
  .bp-checklist li.done{color:var(--ink-faint);text-decoration:line-through}
  .bp-checklist li.done::before{background:var(--ok,#2E7A55);border-color:var(--ok,#2E7A55)}
  .bp-deadline{margin-top:9px;font-size:12.5px;color:var(--ink-soft)}
  .bp-deadline span{text-transform:uppercase;font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--ink-faint);margin-right:6px}
  .bp-caseid{margin-top:7px;font-size:11.5px;color:var(--ink-faint);font-family:ui-monospace,monospace}
  /* Проверка — состояние ожидания, а не проблема: та же полоса, но спокойным
     синим. Красный здесь означал бы, что владелец что-то нарушил. */
  .bp-hold.rev{border-bottom-color:color-mix(in srgb,var(--brand) 32%,var(--line-strong));
    background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
  .bp-hold.rev .ic{background:color-mix(in srgb,var(--brand) 15%,transparent);color:var(--brand-ink,#4A3BC8)}
  .bp-hold.rev b{color:var(--brand-ink,#4A3BC8)}
  .bp-hold.rev p{margin-top:6px}
  @media(max-width:1000px){ .bp-hold{padding:13px 14px;gap:11px} .bp-hold .ic{width:28px;height:28px} }
  /* «Открыть страницу» есть и в шапке кабинета, но в конструкторе она обязана
     знать про черновик (§21), поэтому здесь живёт своя — а общую прячем, чтобы
     две одинаковые кнопки не стояли в двух сантиметрах друг от друга. */
  body:has(.bp-shell) .bh-r > a.bh-act{display:none}
  /* чат-док висит в правом нижнем углу и накрывал бы кнопки предпросмотра */
  body:has(.bp-shell){--fab-b:16px}
  .bp-pvfoot{padding-right:calc(14px + var(--eq-dock,88px))}
  @media(max-width:1180px){ .bp-pvfoot{padding-right:14px} }

  /* ---- три колонки ---- */
  .bp-body{flex:1;min-height:0;display:grid;
    grid-template-columns:266px minmax(420px,1fr) minmax(330px,410px)}
  .bp-nav,.bp-edit,.bp-prev{min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .bp-nav{border-right:1px solid var(--line);background:var(--surface-2);padding:14px 12px 40px}
  /* Колонка редактора узкая даже на широком экране, поэтому её содержимое
     реагирует на СВОЮ ширину, а не на ширину окна: медиазапросы здесь врали бы
     (окно 1440, колонка 480 — и трёхколоночный кроп-редактор уезжал вбок). */
  .bp-edit{padding:20px 24px 60px;container-type:inline-size;container-name:bpedit}
  /* Селектор нарочно с двумя классами: базовые правила .cv-row объявлены ниже
     по файлу, и при равной специфичности выиграли бы они. */
  @container bpedit (max-width:880px){
    .bp-edit .cv-row{grid-template-columns:minmax(240px,300px) minmax(240px,1fr);max-width:100%}
  }
  @container bpedit (max-width:620px){
    .bp-edit .cv-row{grid-template-columns:minmax(0,1fr);max-width:530px}
    .bp-edit .cv-tools{grid-template-columns:minmax(0,1fr)}
    .bp-edit .sf-2col{grid-template-columns:minmax(0,1fr)}
  }
  .bp-prev{border-left:1px solid var(--line);background:var(--surface-2);
    display:flex;flex-direction:column;overflow:hidden}

  /* ---- §4 список разделов с отметками готовности ---- */
  .bp-progress{display:flex;align-items:center;gap:11px;padding:10px 10px 14px;margin-bottom:8px;
    border-bottom:1px solid var(--line)}
  .bp-progress .ring{position:relative;width:46px;height:46px;flex:0 0 auto}
  .bp-progress .ring svg{width:46px;height:46px;transform:rotate(-90deg)}
  .bp-progress .ring i{position:absolute;inset:0;display:grid;place-items:center;
    font-size:11.5px;font-weight:800;font-style:normal;color:var(--ink)}
  .bp-progress .tx{min-width:0}
  .bp-progress .tx b{display:block;font-size:13px}
  .bp-progress .tx span{display:block;font-size:11.5px;color:var(--ink-faint);line-height:1.4;margin-top:2px}

  .bp-seclist{display:grid;gap:2px}
  .bp-sec{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;border:0;background:none;
    padding:9px 10px;border-radius:10px;color:var(--ink-soft)}
  .bp-sec:hover{background:var(--surface)}
  .bp-sec.on{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong)}
  .bp-sec>svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--ink-faint)}
  .bp-sec.on>svg{color:var(--brand)}
  .bp-sec .t{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--ink);line-height:1.35}
  .bp-sec .t i{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--ink-faint);
    line-height:1.4;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bp-sec .mk{width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-top:5px;background:var(--line-strong)}
  .bp-sec .mk.m-ok{background:var(--success)}
  .bp-sec .mk.m-warn{background:var(--warn)}
  .bp-sec .mk.m-bad{background:var(--accent)}
  .bp-sec .mk.m-opt{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
  .bp-sec .mk.m-none{display:none}
  .bp-sec.danger .t{color:var(--accent)}
  .bp-sec.danger>svg{color:var(--accent)}

  /* ---- центр ---- */
  .bp-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
  .bp-head .tx{min-width:0;flex:1}
  .bp-head h1{font-size:21px;letter-spacing:-.02em;margin:0}
  .bp-head p{font-size:13px;color:var(--ink-faint);margin-top:4px;line-height:1.5}
  .bp-head .bp-st{flex:0 0 auto;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
    padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-faint);margin-top:3px}
  .bp-head .bp-st.m-ok{background:color-mix(in srgb,var(--success) 15%,transparent);color:#1F7D57}
  .bp-head .bp-st.m-warn{background:color-mix(in srgb,var(--warn) 20%,transparent);color:#8A5A11}
  .bp-head .bp-st.m-bad{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
  .bp-back{display:none;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;
    padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}

  .bp-navrow{display:flex;gap:10px;margin-top:22px}
  .bp-nb{flex:1;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 14px}
  .bp-nb:hover{border-color:var(--line-strong);background:var(--surface-2)}
  .bp-nb.next{text-align:right}
  .bp-nb i{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em}
  .bp-nb b{display:block;font-size:13.5px;color:var(--ink);margin-top:3px}

  .bp-src{font-size:12.5px;line-height:1.55;color:var(--ink-soft);background:var(--surface-2);
    border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin-bottom:14px}
  .bp-src a{color:var(--brand-ink,#4A3BC8);font-weight:700}
  .bp-empty{text-align:center;padding:26px 18px;border:1px dashed var(--line-strong);border-radius:13px}
  .bp-empty b{display:block;font-size:14px}
  .bp-empty p{font-size:12.5px;color:var(--ink-faint);margin:6px auto 14px;max-width:44ch;line-height:1.5}

  /* переключатель-тумблер */
  .bp-tg{display:flex;align-items:flex-start;gap:11px;padding:10px 0;cursor:pointer}
  .bp-tg+.bp-tg{border-top:1px solid var(--line)}
  .bp-tg input{position:absolute;opacity:0;width:0;height:0}
  .bp-tg .sw{width:38px;height:22px;flex:0 0 auto;border-radius:999px;background:var(--line-strong);
    position:relative;transition:background .16s ease;margin-top:1px}
  .bp-tg .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .16s ease}
  .bp-tg input:checked+.sw{background:var(--brand)}
  .bp-tg input:checked+.sw::after{transform:translateX(16px)}
  .bp-tg input:focus-visible+.sw{outline:2px solid var(--brand);outline-offset:2px}
  .bp-tg .tx b{display:block;font-size:13.5px}
  .bp-tg .tx i{display:block;font-style:normal;font-size:12px;color:var(--ink-faint);line-height:1.45;margin-top:2px}

  /* радиогруппа */
  .bp-radios{display:grid;gap:8px}
  .bp-radio{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:12px;
    padding:11px 13px;cursor:pointer}
  .bp-radio.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,transparent)}
  .bp-radio input{margin-top:2px;accent-color:var(--brand)}
  .bp-radio b{display:block;font-size:13.5px}
  .bp-radio i{display:block;font-style:normal;font-size:12px;color:var(--ink-faint);line-height:1.45;margin-top:2px}

  /* автодополнение категорий */
  .bp-ac{position:relative;display:none}
  .bp-ac.open{display:block}
  .bp-ac button,.bp-acempty{display:block;width:100%;text-align:left;border:0;background:var(--surface);
    padding:9px 12px;font-size:13px;border-bottom:1px solid var(--line)}
  .bp-ac{border:1px solid var(--line-strong);border-radius:11px;overflow:hidden;margin-top:6px;
    box-shadow:var(--shadow-sm);max-height:250px;overflow-y:auto}
  .bp-ac button:hover{background:var(--surface-2)}
  .bp-ac button b{display:block;font-weight:700;color:var(--ink)}
  .bp-ac button i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-faint);margin-top:2px}
  .bp-acempty{color:var(--ink-faint);font-size:12.5px}
  .bp-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;border:1px solid var(--line-strong);
    border-radius:11px;padding:7px 9px;min-height:44px}
  .bp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:999px;
    padding:5px 6px 5px 11px;font-size:12.5px;font-weight:700}
  .bp-chip button{border:0;background:none;color:var(--ink-faint);font-size:15px;line-height:1;padding:0 4px}
  .bp-chip button:hover{color:var(--accent)}
  #sf-cat-add{border:0;outline:0;flex:1;min-width:110px;padding:4px 2px;font-size:13px;background:none}

  /* строки услуг и специалистов */
  .bp-featline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px}
  .bp-featline span{color:var(--ink-faint)}
  .bp-grp{margin-bottom:16px}
  .bp-grp h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin:0 0 7px}
  .bp-rows{display:grid;gap:5px}
  .bp-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;
    padding:9px 11px;background:var(--surface)}
  .bp-row.off{opacity:.55;background:var(--surface-2)}
  .bp-row.drag{opacity:.4}
  .bp-row.over{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)}
  .bp-row .gr{cursor:grab;color:var(--ink-faint);font-size:14px;line-height:1;flex:0 0 auto}
  .bp-row .av{width:28px;height:28px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
    background:var(--surface-2);font-size:11px;font-weight:800;color:var(--ink-soft)}
  .bp-row .nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;line-height:1.3}
  .bp-row .nm i{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-faint);margin-top:2px}
  /* §5.2: порядок и без перетаскивания */
  .bp-mv{display:flex;gap:2px;flex:0 0 auto}
  .bp-mv button{width:22px;height:22px;border:1px solid var(--line);border-radius:6px;background:var(--surface);
    color:var(--ink-soft);font-size:12px;line-height:1}
  .bp-mv button:disabled{opacity:.35}
  .bp-row .pin{border:0;background:none;font-size:15px;line-height:1;color:var(--line-strong);padding:2px 4px}
  .bp-row .pin.on{color:#E8A33D}
  .bp-row .eye{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
    padding:4px 9px;font-size:11.5px;font-weight:700;color:var(--ink-faint);white-space:nowrap}
  .bp-row .eye.on{color:#1F7D57;border-color:color-mix(in srgb,var(--success) 40%,var(--line-strong))}

  /* галерея */
  .gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .gl-empty{grid-column:1/-1;padding:22px;text-align:center;border:1px dashed var(--line-strong);
    border-radius:12px;font-size:12.5px;color:var(--ink-faint)}
  .gl-i{position:relative;margin:0;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
  .gl-i.drag{opacity:.4} .gl-i.over{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)}
  .gl-i img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
  .gl-tag{width:100%;border:0;border-top:1px solid var(--line);background:var(--surface);
    font-size:11.5px;font-weight:700;padding:6px 8px;border-radius:0}
  .gl-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;border-radius:7px;
    background:rgba(20,16,40,.62);color:#fff;font-size:15px;line-height:1}
  /* §5.2: порядок и без перетаскивания — «выше/ниже» рядом с удалением */
  .gl-mv{position:absolute;top:6px;left:6px;display:flex;gap:4px}
  .gl-mv button{width:24px;height:24px;border:0;border-radius:7px;background:rgba(20,16,40,.62);
    color:#fff;font-size:13px;line-height:1}
  .gl-mv button:disabled{opacity:.35}

  /* ---- значок загрузки фото ----
     Пустая поверхность рисует фирменный градиент и выглядит заполненной —
     без накладки владелец не понимает, что по ней можно кликнуть. На
     заполненной накладку держать нельзя: она перекрыла бы кадр, который как
     раз двигают мышью, поэтому там маленький фотоаппарат в углу. */
  .up-ov{position:absolute;inset:0;z-index:6;border-radius:inherit;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    padding:14px;text-align:center;color:#fff;border:0;font:inherit;
    background:linear-gradient(180deg,rgba(12,8,32,.30),rgba(12,8,32,.52));
    backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
    transition:background .15s ease}
  .up-ov:hover{background:linear-gradient(180deg,rgba(12,8,32,.38),rgba(12,8,32,.60))}
  .up-ov .ic{width:46px;height:46px;flex:0 0 auto;border-radius:15px;background:#fff;
    display:grid;place-items:center;box-shadow:0 8px 22px rgba(10,6,30,.28)}
  .up-ov .ic svg{width:23px;height:23px;color:var(--brand-ink,#4A3BC8)}
  .up-ov b{font-size:14px;font-weight:800;line-height:1.3;text-shadow:0 1px 6px rgba(10,6,30,.35)}
  .up-ov i{font-size:12px;font-style:normal;font-weight:600;opacity:.86}
  .up-btn{position:absolute;top:10px;right:10px;z-index:7;width:34px;height:34px;padding:0;
    border:1px solid rgba(255,255,255,.34);border-radius:11px;color:#fff;
    background:rgba(16,12,40,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    display:grid;place-items:center;box-shadow:0 4px 14px rgba(10,6,30,.24)}
  .up-btn svg{width:17px;height:17px}
  .up-btn:hover{background:rgba(16,12,40,.72)}
  /* что показывать — решает класс .filled на самой поверхности */
  .cv-hit .up-ov{display:flex} .cv-hit .up-btn{display:none}
  .cv-hit.filled .up-ov{display:none} .cv-hit.filled .up-btn{display:grid}
  /* В карточке выдачи фото занимает только баннерную полосу — накладка на всю
     карточку обещала бы, что загруженное фото встанет и под текстом. */
  #cv-hit-card .up-ov{inset:0 0 auto 0;height:var(--card-banner-h);border-radius:20px 20px 0 0}
  /* небольшие поверхности (логотип, картинка для соцсетей) — подпись компактнее */
  .cv-hit-logo .up-ov b,.og-prev .up-ov b{font-size:12.5px}
  .cv-hit-logo .up-ov i,.og-prev .up-ov i{display:none}
  .cv-hit-logo .up-ov .ic,.og-prev .up-ov .ic{width:38px;height:38px;border-radius:12px}
  /* у картинки соцсетей накладка мягче: под ней уже видно, что получится */
  .og-prev.has .up-ov{opacity:0;transition:opacity .15s ease}
  .og-prev.has:hover .up-ov,.og-prev.has:focus-within .up-ov{opacity:1}
  /* перетаскивание файла: подсвечиваем ту поверхность, куда он упадёт */
  .up-over{outline:2px dashed var(--brand);outline-offset:3px}
  .up-over .up-ov{background:linear-gradient(180deg,rgba(74,59,200,.42),rgba(74,59,200,.62))}

  /* аватар сотрудника: та же накладка, но круглая и компактная */
  .up-face{position:relative;width:96px;height:96px;border-radius:50%;overflow:hidden;
    border:1.5px dashed var(--line-strong);background:var(--surface-2) center/cover no-repeat;
    display:grid;place-items:center}
  .up-face.has{border-style:solid;border-color:var(--line)}
  .up-face .mono{font-size:26px;font-weight:800;color:var(--ink-faint)}
  .up-face .up-ov{gap:4px;padding:6px}
  .up-face .up-ov .ic{width:32px;height:32px;border-radius:11px}
  .up-face .up-ov .ic svg{width:16px;height:16px}
  .up-face .up-ov b{font-size:11px;text-shadow:none}
  .up-face .up-ov i{display:none}
  /* с фото накладка появляется на наведении: аватар должно быть видно */
  .up-face.has .up-ov{opacity:0;transition:opacity .15s ease}
  .up-face.has:hover .up-ov,.up-face.has:focus-within .up-ov{opacity:1}

  /* плитка «добавить фото» в галерее */
  .gl-add{grid-column:span 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    aspect-ratio:4/3;border:1.5px dashed var(--line-strong);border-radius:11px;background:var(--surface-2);
    color:var(--ink-soft);padding:10px;text-align:center;font:inherit}
  .gl-add:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface-2))}
  .gl-add svg{width:24px;height:24px;color:var(--brand-ink,#4A3BC8)}
  .gl-add b{font-size:12.5px;font-weight:800;line-height:1.3}
  .gl-add i{font-size:11px;font-style:normal;color:var(--ink-faint)}
  .gl-grid.up-over{outline:2px dashed var(--brand);outline-offset:4px;border-radius:12px}

  /* ---- «Наши работы» — редактор портфолио (§ Профиль салона · Фото и видео) ---- */
  .wk-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .wk-th{position:relative;margin:0;border-radius:11px;overflow:hidden;border:1px solid var(--line);
    background:var(--surface-2);aspect-ratio:4/3;display:flex}
  .wk-th img{display:block;width:100%;height:100%;object-fit:cover}
  .wk-th.wk-ba .half{flex:1 1 50%;background-size:cover;background-position:50% 50%}
  .wk-ph{display:block;width:100%;height:100%;background:linear-gradient(150deg,var(--brand),var(--accent))}
  .wk-th .wk-badge{position:absolute;top:6px;left:6px;background:rgba(17,18,36,.72);color:#fff;font-size:10px;
    font-weight:800;padding:2px 7px;border-radius:999px;line-height:1.4}
  .wk-th figcaption{position:absolute;left:0;right:0;bottom:0;padding:5px 8px 6px;font-size:11px;font-weight:700;
    color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* запланированная работа — приглушённая, плашка вместо обычной подписи */
  .wk-th.sched{filter:saturate(.65) brightness(.9)}
  .wk-th .sched-badge{position:absolute;top:6px;left:6px;right:6px;background:var(--brand);color:#fff;
    font-size:10px;font-weight:800;padding:3px 7px;border-radius:7px;z-index:2;width:fit-content}
  /* панель правки при наведении — та же идея, что у .gl-i, но с ✎/удалить/порядок */
  .wk-tools{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;justify-content:center;gap:5px;
    padding:6px;background:linear-gradient(to bottom,rgba(12,10,32,.55),transparent);opacity:0;transition:opacity .15s ease}
  .wk-th:hover .wk-tools,.wk-th:focus-within .wk-tools{opacity:1}
  .wk-t{width:26px;height:26px;border-radius:50%;border:0;padding:0;cursor:pointer;color:#15142a;
    background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:13px;font-weight:800}
  .wk-t:hover{background:#fff}
  .wk-t.danger{color:var(--accent)}

  /* очередь публикации */
  .wq{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 16px;margin-bottom:16px}
  .wq h3{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;margin-bottom:10px}
  .wq .cnt{font-size:11.5px;font-weight:800;color:var(--brand-ink);background:var(--brand-tint);border-radius:999px;padding:1px 9px}
  .wq-list{display:flex;flex-direction:column;gap:8px}
  .wq-row{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--line);border-radius:11px;flex-wrap:wrap}
  .wq-th{width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--surface-2)}
  .wq-th img{width:100%;height:100%;object-fit:cover;display:block}
  .wq-tx{flex:1;min-width:120px}
  .wq-tx b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wq-tx i{display:block;font-style:normal;font-size:12px;color:var(--brand-ink);font-weight:700;margin-top:1px}
  .wq-acts{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}

  /* редактор одной работы (модалка bpOpenWorkEditor) */
  .wk-mode-row{display:flex;gap:7px;flex-wrap:wrap}
  .wk-mode-row button{border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-soft);
    border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;font-family:inherit}
  .wk-mode-row button.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .wk-slots{display:flex;gap:12px;flex-wrap:wrap}
  .wk-slot{flex:1;min-width:150px}
  .wk-slot-lbl{font-size:12px;font-weight:700;color:var(--ink-faint);margin-bottom:6px}
  .wk-slot-box{aspect-ratio:1/1;border-radius:11px;overflow:hidden;background:var(--surface-2);
    border:1px dashed var(--line-strong);display:flex;align-items:center;justify-content:center}
  .wk-slot-box img{width:100%;height:100%;object-fit:cover;display:block}
  .wk-slot-empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-faint);font-size:12px;font-weight:700}
  .wk-slot-empty svg{width:22px;height:22px}
  .wk-slot-acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
  .wk-pub-tgl{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
  .wk-pub-when{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
  .wk-pub-when[hidden]{display:none}
  .wk-pub-when .fld{flex:1;min-width:140px}
  .wk-modal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:8px;flex-wrap:wrap}
  .wk-modal-foot-r{display:flex;gap:8px}

  .og-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
  .og-prev{position:relative;width:220px;aspect-ratio:1200/630;border-radius:11px;
    border:1px dashed var(--line-strong);overflow:hidden;
    background:var(--surface-2) center/cover no-repeat;display:grid;place-items:center;
    font-size:11.5px;font-weight:700;color:var(--ink-faint)}
  .og-prev.has{border-style:solid}

  /* особые дни */
  .hd-list{display:grid;gap:6px}
  .hd-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;border:1px solid var(--line);
    border-radius:11px;padding:8px 11px}
  .hd-row>b{font-size:13px;min-width:132px}
  .hd-cl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  .hd-row select{padding:6px 8px;font-size:12.5px}
  .hd-row .dash{color:var(--ink-faint)}
  .hd-note{flex:1;min-width:130px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12.5px}
  .hd-x{border:0;background:none;color:var(--ink-faint);font-size:17px;line-height:1;padding:0 5px}
  .hd-x:hover{color:var(--accent)}

  /* контакты */
  .ct-row{display:flex;align-items:flex-start;gap:12px}
  .ct-row .fld{flex:1;min-width:0}
  .ct-hide{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
    color:var(--ink-faint);margin-top:27px;white-space:nowrap}

  /* акции */
  .pm-list{display:grid;gap:10px}
  .pm-i{border:1px solid var(--line);border-radius:12px;padding:11px 13px}
  .pm-i.over{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
  .pm-top{display:flex;align-items:center;gap:9px}
  .pm-t{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13.5px;font-weight:700}
  .pm-on{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ink-faint);white-space:nowrap}
  .pm-x{width:100%;margin-top:8px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;
    font-size:12.5px;min-height:58px;resize:vertical;font-family:inherit}
  .pm-bot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--ink-faint)}
  .pm-bot input{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12.5px;margin-left:6px}
  .pm-warn{color:#8A5A11;font-weight:700}
  .hl-list{display:grid;gap:7px}
  .hl-i{display:flex;align-items:center;gap:7px}
  .hl-i input{flex:1;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px}

  /* адрес страницы и сниппет */
  .sl-row{display:flex;align-items:center;gap:0;flex-wrap:wrap}
  .sl-pre{font-size:13.5px;font-weight:700;color:var(--ink-faint);padding:10px 2px 10px 12px;
    border:1px solid var(--line-strong);border-right:0;border-radius:11px 0 0 11px;background:var(--surface-2)}
  #sf-slug{flex:1;min-width:120px;border:1px solid var(--line-strong);border-radius:0;padding:10px 12px;
    font-size:13.5px;font-weight:700;font-family:inherit}
  #sf-slug-auto{border-radius:0 11px 11px 0;border-left:0}
  .sl-st{margin-top:7px;font-size:12.5px;font-weight:700}
  .sl-st.m-ok{color:#1F7D57} .sl-st.m-warn{color:#8A5A11} .sl-st.m-bad{color:var(--accent)}
  .sl-hist{margin-top:14px;font-size:12.5px}
  .sl-hist summary{cursor:pointer;font-weight:700;color:var(--ink-soft)}
  .sl-hist ul{list-style:none;padding:0;margin:9px 0 0;display:grid;gap:5px}
  .sl-hist li{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
  .sl-hist code{background:var(--surface-2);border-radius:6px;padding:2px 6px;font-size:12px}
  .sl-hist i{color:var(--ink-faint);font-style:normal;font-size:11.5px;margin-left:auto}

  /* ---- §18 предпросмотр выдачи и ссылки ----
     Раньше .serp-in был оформлен только внутри полноэкранного предпросмотра
     (.sf-prev), и в самом разделе SEO сниппет выводился голым текстом. Стили
     общие: то, что видит владелец в разделе, в правой колонке и на весь
     экран, обязано выглядеть одинаково. */
  .pv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 9px}
  .pv-head .sec{margin:0}
  .pv-tabs{margin-left:auto;display:inline-flex;gap:3px;padding:2px;
    border:1px solid var(--line-strong);border-radius:9px;background:var(--surface)}
  .pv-tabs button{border:0;background:none;border-radius:7px;padding:5px 10px;
    font-size:11.5px;font-weight:700;color:var(--ink-faint)}
  .pv-tabs button.on{background:var(--brand);color:#fff}
  .pv-tabs.pv-mini{margin:0 0 12px;width:100%;justify-content:space-between}
  .pv-tabs.pv-mini button{flex:1}
  .lnkb{border:0;background:none;padding:0;font:inherit;color:var(--brand-ink,#4A3BC8);font-weight:700;text-decoration:underline}

  .serp-in{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;max-width:620px}
  .serp{font-family:Arial,system-ui,sans-serif}
  .serp.noindex{opacity:.55}
  .serp-site{display:flex;align-items:center;gap:11px;margin-bottom:9px}
  .serp-site .fav{width:26px;height:26px;flex:0 0 auto;border-radius:50%;overflow:hidden;
    border:1px solid #E4E4E7;display:grid;place-items:center;background:#fff}
  .serp-site .fav img{width:18px;height:18px;object-fit:contain}
  .serp-site .nm{min-width:0;line-height:1.25}
  .serp-site .nm b{display:block;font-size:13px;font-weight:400;color:#202124}
  .serp-site .nm i{display:block;font-style:normal;font-size:12px;color:#4d5156;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .serp-t{font-size:20px;line-height:1.3;color:#1a0dab;margin-bottom:3px;cursor:pointer}
  .serp-t:hover{text-decoration:underline}
  .serp.mobile .serp-t{font-size:18px}
  .serp-rt{display:flex;align-items:center;gap:7px;font-size:13px;color:#4d5156;margin:2px 0 3px}
  .serp-rt .st{color:#E8A33D;letter-spacing:.5px}
  .serp-d{font-size:14px;line-height:1.58;color:#4d5156}
  .serp-off{margin-top:9px;font-size:12px;font-weight:700;color:var(--accent);font-family:inherit}
  .serp.mobile{max-width:360px}
  .bp-pvpad .serp-in,.serp.mobile{margin:0 auto}

  /* ---- карточка ссылки в соцсети ---- */
  .soc{max-width:500px}
  .soc .card{border:1px solid #DADDE1;border-radius:10px;overflow:hidden;background:#fff}
  .soc .img{aspect-ratio:1200/630;background:#E9EBEF center/cover no-repeat;display:grid;place-items:center;
    color:#8A8D94;font-size:12px;text-align:center;padding:12px}
  .soc .tx{padding:10px 12px;border-top:1px solid #DADDE1;background:#F7F8FA}
  .soc .tx i{display:block;font-style:normal;font-size:11px;letter-spacing:.04em;color:#65676B;text-transform:uppercase}
  .soc .tx b{display:block;font-size:15px;line-height:1.35;color:#050505;margin-top:3px}
  .soc .tx span{display:block;font-size:13px;line-height:1.4;color:#65676B;margin-top:3px}
  /* X показывает картинку со скруглением и без серой подложки под текстом */
  .soc-x .card{border-radius:16px}
  .soc-x .tx{background:#fff;border-top:0;padding:0 12px 12px}
  .soc-x .tx i{order:2;margin-top:4px;text-transform:none;font-size:12.5px}
  .soc-x .tx{display:flex;flex-direction:column}
  .soc-x .tx b{order:0} .soc-x .tx span{order:1}

  /* Мессенджеры: слева цветная полоса, справа маленькая квадратная превьюшка */
  .soc-tg .bub,.soc-wa .bub{max-width:420px;border-radius:12px;padding:9px 11px;background:#fff;
    border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,12,40,.06)}
  .soc-tg .bub{border-left:3px solid #2EA6FF}
  .soc-wa .bub{background:#DCF8C6;border-color:#CBEBB4;border-left:0}
  .soc .q{display:flex;gap:10px;align-items:flex-start}
  .soc .q .tx{flex:1;min-width:0;padding:0;border:0;background:none}
  .soc .q .tx i{color:#2EA6FF;text-transform:none;font-size:12.5px;font-weight:700}
  .soc-wa .q .tx i{color:#128C7E}
  .soc .q .tx b{font-size:13.5px}
  .soc .q .tx span{font-size:12.5px}
  .soc .th{width:56px;height:56px;flex:0 0 auto;border-radius:8px;background:#E9EBEF center/cover no-repeat;
    display:grid;place-items:center;color:#9A9DA4;font-size:16px}
  .soc .url{margin-top:6px;font-size:12px;color:#65676B;overflow-wrap:anywhere}

  /* состояние публикации */
  .bp-state{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line-strong);border-radius:13px;padding:14px}
  .bp-state .dot{width:10px;height:10px;border-radius:50%;margin-top:4px;flex:0 0 auto;background:var(--ink-faint)}
  .bp-state.s-published{border-color:color-mix(in srgb,var(--success) 40%,var(--line-strong))}
  .bp-state.s-published .dot{background:var(--success)}
  .bp-state.s-draft .dot{background:var(--brand)}
  .bp-state.s-hidden .dot{background:var(--warn)}
  .bp-state>div{flex:1;min-width:0}
  .bp-state b{font-size:14.5px}
  .bp-state p{font-size:12.5px;color:var(--ink-faint);line-height:1.5;margin-top:4px}

  /* ---- §19 правая колонка: предпросмотр ---- */
  .bp-pvhead{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding:10px 14px;border-bottom:1px solid var(--line)}
  .bp-pvtabs,.bp-pvdev{display:flex;gap:3px;background:var(--surface);border:1px solid var(--line-strong);
    border-radius:9px;padding:2px}
  .bp-pvtabs button,.bp-pvdev button{border:0;background:none;border-radius:7px;padding:5px 9px;
    font-size:11.5px;font-weight:700;color:var(--ink-faint)}
  .bp-pvtabs button.on,.bp-pvdev button.on{background:var(--brand);color:#fff}
  .bp-pvdev{margin-left:auto}
  .bp-pvnote{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:7px 14px;
    font-size:11.5px;font-weight:700;color:#8A5A11;background:color-mix(in srgb,var(--warn) 13%,transparent)}
  .bp-pvnote .dot{width:7px;height:7px;border-radius:50%;background:var(--warn)}
  .bp-pvnote.live{color:#1F7D57;background:color-mix(in srgb,var(--success) 12%,transparent)}
  .bp-pvnote.live .dot{background:var(--success)}
  .bp-pvbody{flex:1;min-height:0;overflow:auto;display:flex;justify-content:center}
  .bp-pvpad{padding:16px;width:100%}
  .bp-pvcard{max-width:340px}
  .bp-pvfoot{flex:0 0 auto;display:flex;gap:8px;padding:9px 14px;border-top:1px solid var(--line)}
  .bp-pvframe{width:100%;height:100%;display:flex;justify-content:center;padding:12px}
  .bp-pvframe iframe{border:1px solid var(--line-strong);border-radius:12px;background:#fff;
    width:1280px;height:1600px;transform:scale(.28);transform-origin:top center;flex:0 0 auto}
  .bp-pvframe.tablet iframe{width:834px;height:1400px;transform:scale(.42)}
  .bp-pvframe.mobile iframe{width:390px;height:1100px;transform:scale(.78)}

  /* ---- §8 checklist в модалке публикации ---- */
  .ck-list{list-style:none;padding:0;margin:9px 0 0;display:grid;gap:5px}
  .ck{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border-radius:10px;background:var(--surface-2)}
  .ck .ic{width:19px;height:19px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
    font-size:12px;font-weight:800;color:#fff;background:var(--ink-faint)}
  .ck.ok .ic{background:var(--success)}
  .ck.bad .ic{background:var(--accent)}
  .ck.tip .ic{background:var(--line-strong);color:var(--ink-soft)}
  .ck .tx{flex:1;min-width:0;font-size:13px;line-height:1.4}
  .ck .tx i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-faint);margin-top:2px;line-height:1.45}
  .ck .go{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
    padding:4px 9px;font-size:11.5px;font-weight:700;color:var(--ink-soft);flex:0 0 auto}
  .ck-more{margin-top:12px}
  .ck-more summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-soft)}

  /* ---- §27, §28 планшет и телефон ---- */
  @media(max-width:1460px){
    .bp-body{grid-template-columns:232px minmax(360px,1fr) minmax(300px,336px)}
    .bp-edit{padding:18px 18px 60px}
    .bp-pvframe iframe{transform:scale(.23)}
  }
  @media(max-width:1180px){
    /* §28: предпросмотр уезжает в полноэкранный режим по кнопке, редактор
       забирает ширину — узкая колонка с формой хуже, чем её отсутствие */
    .bp-body{grid-template-columns:222px minmax(0,1fr)}
    .bp-prev{display:none}
  }
  @media(max-width:1000px){
    /* §27: разделы списком, каждый — отдельный экран */
    .bp-shell{height:auto;min-height:0}
    body:has(.bp-shell){overflow:auto}
    .bp-body{display:block}
    .bp-nav,.bp-edit{overflow:visible}
    .bp-nav{border-right:0;border-bottom:1px solid var(--line);padding:12px 12px 16px}
    .bp-edit{padding:16px 14px 140px}
    .bp-back{display:inline-flex}
    .bp-top{padding:10px 14px}
    .bp-acts .btn{padding:8px 12px;font-size:13px}
    .bp-shell[data-sec] .bp-nav{display:none}
    .bp-shell.list .bp-nav{display:block}
    .bp-shell.list .bp-edit{display:none}
    /* §27: «Предпросмотр» и «Опубликовать» уходят в нижнюю полосу под большой
       палец — в верхней панели они дублировались бы через полэкрана */
    .bp-acts #sf-preview,.bp-acts #bp-publish,.bp-acts .sf-why{display:none}
    .bp-top .bp-save{display:none}
    .bp-last{font-size:11px}
    body:has(.bp-shell){--fab-b:88px}
    .bp-navrow{flex-direction:column}
    .bp-nb.next{text-align:left}
    .ct-row{flex-direction:column;gap:0}
    .ct-hide{margin:-6px 0 12px}
  }

  /* ---- §12 карточки редактора ---- */
  .sf-card{margin-bottom:14px}
  .sf-card .hd{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 0}
  .sf-card .hd .tx{min-width:0}
  .sf-card .hd h3{font-size:15px;letter-spacing:-.01em;margin:0}
  .sf-card .hd p{font-size:12.5px;color:var(--ink-faint);margin-top:3px;line-height:1.5}
  .sf-card .hd .st{margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:800;text-transform:uppercase;
    letter-spacing:.03em;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-faint)}
  .sf-card .hd .st.ok{background:color-mix(in srgb,var(--success) 15%,transparent);color:#1F7D57}
  .sf-card .hd .st.warn{background:color-mix(in srgb,var(--warn) 20%,transparent);color:#8A5A11}
  .sf-card .hd .st.bad{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
  .sf-card .bd{padding:14px 16px 16px}
  .sf-card .fld:last-child{margin-bottom:0}

  .sf-count{float:right;font-size:11px;font-weight:700;color:var(--ink-faint);letter-spacing:0;text-transform:none}
  .sf-count.near{color:var(--warn)}
  .sf-count.over{color:var(--accent)}
  .sf-hint{font-size:12px;color:var(--ink-faint);margin-top:6px;line-height:1.55}
  /* ---- §14 адрес: город → улица → индекс ----
     Порядок полей повторяет порядок ввода: улица без города бессмысленна,
     а индекс подставляется сам и стоит последним. */
  .ad-grid{display:grid;gap:14px;align-items:start;
    grid-template-columns:minmax(150px,1fr) minmax(190px,1.5fr) minmax(74px,.42fr) minmax(120px,.66fr)}
  /* Дом — короткое поле и не должен растягиваться на строку: пустое место
     справа от «84» читается как «сюда нужно ещё что-то вписать». */
  @container bpedit (max-width:900px){
    .bp-edit .ad-grid{grid-template-columns:minmax(140px,1fr) minmax(74px,.5fr) minmax(112px,.7fr)}
    .bp-edit .ad-f-street{grid-column:1/-1}
  }
  @container bpedit (max-width:520px){
    .bp-edit .ad-grid{grid-template-columns:minmax(74px,.5fr) minmax(112px,1fr)}
    .bp-edit .ad-f-city{grid-column:1/-1}
  }
  @media(max-width:720px){
    .ad-grid{grid-template-columns:minmax(74px,.5fr) minmax(112px,1fr)}
    .ad-f-city,.ad-f-street{grid-column:1/-1}
  }
  /* выпадающий список подсказок ложится ПОВЕРХ соседних полей, а не раздвигает
     сетку: иначе при каждой букве форма прыгала бы на 200 px */
  .ad-grid .bp-ac{position:absolute;top:100%;left:0;right:0;z-index:40;margin-top:4px;
    background:var(--surface);max-height:264px}
  .ad-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
    border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--surface-2)}
  .ad-line .tx{min-width:0;flex:1}
  .ad-line i{display:block;font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;color:var(--ink-faint)}
  .ad-line b{display:block;font-size:14px;margin-top:3px;overflow-wrap:anywhere}

  .sf-2col{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px}
  @media(max-width:720px){.sf-2col{grid-template-columns:1fr}}
  .sf-f{display:flex;flex-direction:column;gap:6px;font-size:13px;position:relative}
  .sf-f>span:first-child{font-weight:650;color:var(--ink)}
  .sf-f input{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
  .sf-map{height:300px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .sf-maprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
  .sf-rot{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft)}
  .sf-rot input[type=range]{width:180px;accent-color:var(--brand-ink)}
  .sf-rot b{font-variant-numeric:tabular-nums;color:var(--ink)}
  .sf-coords{margin-left:auto;font-size:12px;color:var(--ink-soft)}
  .sf-ac{position:absolute;top:100%;left:0;right:0;z-index:30;background:#fff;border:1px solid var(--line);
    border-radius:12px;box-shadow:0 18px 40px rgba(20,16,60,.14);overflow:hidden;margin-top:4px}
  .sf-ac button{display:block;width:100%;text-align:left;padding:9px 12px;background:none;border:0;font:inherit;cursor:pointer}
  .sf-ac button:hover{background:var(--surface-2)}
  .sf-ac b{display:block;font-size:13px}
  .sf-ac span{font-size:11.5px;color:var(--ink-soft)}
  .btn.ghost.sm.on{background:var(--brand-ink);color:#fff;border-color:transparent}
  .ent-mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    background:linear-gradient(135deg,#17B26A,#0E8F52);box-shadow:0 6px 16px rgba(14,143,82,.45);border:2px solid #fff}

  .fld .bad,.sf-bad{border-color:var(--accent) !important}
  .sf-fe{display:block;font-size:12px;font-weight:700;color:var(--accent);margin-top:5px;letter-spacing:0;text-transform:none}

  /* ---- §15 часы работы по дням ---- */
  .sf-hours{display:flex;flex-direction:column;gap:7px}
  .sf-hrow{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:7px 11px;flex-wrap:wrap}
  .sf-hrow.off{opacity:.62;background:var(--surface-2)}
  .sf-hrow>b{width:34px;font-size:12.5px;flex-shrink:0}
  .sf-hrow select{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:8px;
    padding:6px 8px;font-size:13px;color:var(--ink);outline:none}
  .sf-hrow select:focus{border-color:var(--brand)}
  .sf-hrow .dash{color:var(--ink-faint)}
  .sf-hrow .dur{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink-faint)}
  .sf-hrow .cp{width:28px;height:28px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:8px;color:var(--ink-faint);font-size:13px;flex-shrink:0}
  .sf-hrow .cp:hover{border-color:var(--brand);color:var(--brand-ink)}
  .sf-tgl{position:relative;width:38px;height:21px;flex-shrink:0;appearance:none;-webkit-appearance:none;
    background:var(--line-strong);border-radius:999px;transition:background .16s ease;cursor:pointer;border:0}
  .sf-tgl::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .16s ease}
  .sf-tgl:checked{background:var(--brand)}
  .sf-tgl:checked::after{transform:translateX(17px)}

  /* ---- §16 полнота витрины ---- */
  .sf-comp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .sf-comp .ring{width:52px;height:52px;flex-shrink:0;position:relative}
  .sf-comp .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
  .sf-comp .ring i{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:800;font-style:normal}
  .sf-comp .tx{flex:1;min-width:190px}
  .sf-comp .tx b{font-size:13.5px}
  .sf-tips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
  .sf-tip{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:999px;
    padding:5px 11px;font-size:12px;font-weight:600;color:var(--ink-soft)}

  /* ---- §10 сводка ошибок валидации ---- */
  .sf-errbox{border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line-strong));
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));border-radius:14px;padding:13px 15px;margin-bottom:16px}
  .sf-errbox b{font-size:13.5px;color:var(--accent);display:block;margin-bottom:7px}
  .sf-errbox ul{list-style:none;display:flex;flex-direction:column;gap:5px}
  .sf-errbox li{font-size:13px;color:var(--ink-soft)}
  .sf-errbox button{border:0;background:none;color:var(--brand-ink);font-weight:700;font-size:13px;
    text-decoration:underline;text-underline-offset:2px;padding:0;font-family:inherit}
  .sf-warnbox{border:1px solid color-mix(in srgb,var(--warn) 50%,var(--line-strong));
    background:color-mix(in srgb,var(--warn) 10%,var(--surface));border-radius:14px;padding:12px 15px;margin-bottom:16px;
    font-size:13px;color:var(--ink-soft)}
  .sf-warnbox b{color:#8A5A11;display:block;margin-bottom:5px;font-size:13.5px}
  .sf-flash{animation:sfFlash 1.4s ease}
  @keyframes sfFlash{0%,60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent)}100%{box-shadow:none}}
  @media(prefers-reduced-motion:reduce){.sf-flash{animation:none}}

  /* ---- §8 полноэкранный предпросмотр ---- */
  .sf-prev{position:fixed;inset:0;z-index:2400;background:var(--bg);display:none;flex-direction:column}
  .sf-prev.open{display:flex}
  .sf-prev .ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 16px;
    background:var(--surface);border-bottom:1px solid var(--line-strong);flex-shrink:0}
  .sf-prev .badge-draft{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
    text-transform:uppercase;letter-spacing:.04em;color:#8A5A11;background:color-mix(in srgb,var(--warn) 22%,transparent);
    border-radius:999px;padding:5px 12px}
  .sf-prev .badge-draft .dot{width:7px;height:7px;border-radius:50%;background:var(--warn)}
  .sf-prev .devs{display:flex;gap:3px;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:11px;padding:3px}
  .sf-prev .devs button{border:0;background:none;padding:6px 13px;font-size:12.5px;font-weight:700;
    color:var(--ink-soft);border-radius:8px;font-family:inherit}
  .sf-prev .devs button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .sf-prev .pa{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
  .sf-prev .stage{flex:1;min-height:0;overflow:auto;display:flex;justify-content:center;padding:18px;background:var(--bg)}
  .sf-prev .fr{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;
    box-shadow:var(--shadow-md);width:100%;height:100%;transition:width .2s ease}
  .sf-prev .fr.tablet{width:834px;max-width:100%}
  .sf-prev .fr.mobile{width:390px;max-width:100%}
  .sf-prev iframe{width:100%;height:100%;border:0;display:block;background:var(--surface)}
  .sf-prev .serp{padding:0 18px 18px;flex-shrink:0}
  /* Оформление сниппета общее (см. .serp-in выше) — здесь только центровка:
     раньше стили жили ТОЛЬКО тут, и в самом разделе SEO выдача выводилась
     голым текстом без единого правила. */
  .sf-prev .serp-in{margin:0 auto}
  .sf-prev .serp-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
    color:var(--ink-faint);max-width:620px;margin:0 auto 6px}

  /* ---- §11 история публикаций ---- */
  .sf-rev{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:9px}
  .sf-rev .rh{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .sf-rev .rh b{font-size:13px}
  .sf-rev .rh .cur{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    background:color-mix(in srgb,var(--success) 16%,transparent);color:#1F7D57;border-radius:999px;padding:2px 8px}
  .sf-rev .rs{font-size:12.5px;color:var(--ink-faint);margin-top:4px;line-height:1.5}
  .sf-rev .ra{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}

  /* ---- §9 сводка изменений в модалке публикации ---- */
  .sf-diff{list-style:none;display:flex;flex-direction:column;gap:6px;margin:10px 0 14px;
    border:1px solid var(--line);border-radius:12px;padding:11px 13px;max-height:220px;overflow:auto}
  .sf-diff li{font-size:13px;color:var(--ink-soft);display:flex;gap:8px;align-items:baseline}
  .sf-diff li b{color:var(--ink);font-weight:700;flex-shrink:0}
  .sf-diff li span{color:var(--ink-faint);font-size:12.5px;min-width:0;overflow-wrap:anywhere}

  /* ---- современные контролы внутри «Витрины»: скругления 14-18 px по §2 ТЗ ---- */
  .sf-card,.sf-status,.sf-errbox,.sf-warnbox{border-radius:18px}
  .sf-card .fld input,.sf-card .fld textarea,.sf-card .fld select,
  .sf-hrow select{border-radius:12px}
  .sf-card select{appearance:none;-webkit-appearance:none;padding-right:34px;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239092A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
  .sf-hrow select{appearance:none;-webkit-appearance:none;padding-right:26px;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239092A6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 7px center;background-size:13px}
  .sf-card select:hover,.sf-hrow select:hover{border-color:var(--brand)}
  /* кнопки — в одной системе с маркетплейсом: r12, нажатие «в пол», ghost с lilac-подсветкой */
  .sf-card .btn,.sf-bar .btn,.sf-status .btn,.sf-prev .btn,.sf-more>button{
    border-radius:12px;transition:transform .06s ease,filter .15s ease,background .15s ease,border-color .15s ease}
  .sf-card .btn:active,.sf-bar .btn:active,.sf-status .btn:active,.sf-prev .btn:active{transform:translateY(1px)}
  .sf-card .btn.ghost:hover,.sf-bar .btn.ghost:hover,.sf-status .btn.ghost:hover,.sf-prev .btn.ghost:hover{
    background:var(--brand-tint);border-color:var(--brand);color:var(--brand-ink)}
  .sf-card .btn.ghost:disabled:hover,.sf-bar .btn:disabled:hover{background:transparent;border-color:var(--line-strong);color:var(--ink)}

  /* ---- §13 обложка: два живых предпросмотра 1:1 с независимыми кадрами ----
     Одно фото — две поверхности: узкая карточка выдачи (≈1.9:1) и широкая шапка
     страницы салона (≈1.44:1). Кадр у каждой свой: то, что удачно смотрится в
     карточке, в шапке почти всегда обрезается не там. Обе поверхности рисуются
     теми же функциями и тем же card.css, что и на публичных страницах. */
  .cv-row{display:grid;gap:22px;align-items:start;justify-content:start;
    grid-template-columns:300px minmax(280px,530px) 190px}
  @media(max-width:1240px){ .cv-row{grid-template-columns:300px minmax(280px,530px)} }
  @media(max-width:980px){ .cv-row{grid-template-columns:1fr;max-width:530px} }
  .cv-pane{min-width:0}
  .cv-lbl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;
    letter-spacing:.04em;color:var(--ink-faint);margin-bottom:8px;min-height:22px}
  /* Заголовок панели — он же переключатель. Ширина не зависит от состояния:
     меняются только цвет и точка-радио, поэтому при выборе ничего не «прыгает». */
  .cv-head{display:flex;align-items:center;gap:9px;width:100%;margin-bottom:9px;padding:8px 12px;
    border:1.5px solid var(--line-strong);background:var(--surface);border-radius:13px;
    font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-soft);text-align:left;
    transition:border-color .15s ease,background .15s ease,color .15s ease}
  .cv-head:hover{border-color:var(--brand);color:var(--ink)}
  .cv-head .rd{width:16px;height:16px;flex-shrink:0;border-radius:50%;border:2px solid var(--line-strong);
    background:var(--surface);position:relative;transition:border-color .15s ease}
  .cv-head .rd::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--brand);
    transform:scale(0);transition:transform .15s ease}
  .cv-head .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cv-head .src{margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:800;letter-spacing:.02em;
    color:var(--ink-faint);background:var(--surface-2);border-radius:999px;padding:3px 9px}
  .cv-pane.on .cv-head{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-ink)}
  .cv-pane.on .cv-head .rd{border-color:var(--brand)}
  .cv-pane.on .cv-head .rd::after{transform:scale(1)}
  .cv-pane.on .cv-head .src{background:var(--surface);color:var(--brand-ink)}

  /* обе поверхности — кадрируются перетаскиванием прямо по предпросмотру */
  .cv-hit{position:relative;border-radius:16px;cursor:pointer;touch-action:none;
    outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s ease}
  .cv-pane.on .cv-hit{outline-color:var(--brand)}
  .cv-pane.on .cv-hit.has{cursor:grab}
  .cv-pane.on .cv-hit.has.drag{cursor:grabbing}
  .cv-grid{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;overflow:hidden;
    background:linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.35) calc(33.333% - .5px),rgba(255,255,255,.35) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
               linear-gradient(to right,transparent calc(66.666% - .5px),rgba(255,255,255,.35) calc(66.666% - .5px),rgba(255,255,255,.35) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
               linear-gradient(to bottom,transparent calc(50% - .5px),rgba(255,255,255,.28) calc(50% - .5px),rgba(255,255,255,.28) calc(50% + .5px),transparent calc(50% + .5px));
    opacity:0;transition:opacity .15s ease}
  .cv-pane.on .cv-hit.has:hover .cv-grid,.cv-pane.on .cv-hit.has.drag .cv-grid{opacity:1}

  /* card.css выше сброшен для карточек панели — здесь возвращаем настоящую карточку выдачи */
  .cv-card-stage{--card-min-w:100%;display:block;border-radius:20px}
  .cv-card-stage .card{height:var(--card-h);display:flex;flex-direction:column;overflow:hidden;cursor:inherit;
    transition:box-shadow .14s ease,border-color .14s ease}
  .cv-card-stage .card:hover{transform:none;border-color:#ECEBF2;box-shadow:var(--sh-card,0 8px 30px rgba(40,35,90,.06))}
  /* карточка здесь — предпросмотр, а не рабочий элемент: кликать в ней нечего */
  .cv-card-stage .card,.cv-card-stage .card *{pointer-events:none;user-select:none}
  .cv-card-stage .cv-grid{inset:0 0 auto 0;height:var(--card-banner-h)}

  /* Шапка страницы салона: копия .s-bannerbox из salon.html. Пропорции и все
     размеры заданы в cqw от ширины самой плитки, поэтому предпросмотр совпадает
     со страницей при любой ширине колонки. Раньше здесь был transform:scale с
     коэффициентом из JS — он устаревал при изменении ширины, и по краям
     появлялись пустые серые поля. Никакого JS-масштаба больше нет.
     Базовая ширина оригинала — 530 px, отсюда все проценты: 1 cqw = 5.3 px. */
  .cv-hero{position:relative;width:100%;max-width:530px;aspect-ratio:530/367;border-radius:20px;overflow:hidden;
    background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);
    container-type:inline-size}
  .cv-hero .art{position:absolute;inset:0}
  .cv-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .cv-hero .motif{position:absolute;top:-10%;right:-6%;width:52%;height:auto;aspect-ratio:1/1;color:#fff;opacity:.13}
  /* заглушка вертикали в предпросмотре шапки — та же геометрия, что в salon.html */
  .cv-hero>img.elq-mascot{left:auto;right:7%;width:min(52%,380px);top:auto;bottom:0;
    --elq-mascot-h:94%;--elq-mascot-pos:center bottom;
    height:var(--elq-mascot-h);object-fit:contain;
    object-position:var(--elq-mascot-pos);z-index:1}
  .cv-hero .scrim{position:absolute;inset:0;
    background:linear-gradient(105deg,rgba(8,7,20,.74) 0%,rgba(8,7,20,.42) 46%,rgba(8,7,20,.12) 100%)}
  .cv-hero .cap{position:absolute;left:5.66cqw;top:5.66cqw;right:18.9cqw;color:#fff;z-index:2}
  .cv-hero .cap b{display:block;font-size:4.34cqw;font-weight:800;line-height:1.24;letter-spacing:-.02em;
    text-shadow:0 2px 12px rgba(0,0,0,.35)}
  .cv-hero .cap span{display:block;margin-top:1.7cqw;font-size:2.64cqw;line-height:1.5;opacity:.9;max-width:34ch;
    text-shadow:0 1px 8px rgba(0,0,0,.35)}
  .cv-hero .dots{position:absolute;left:0;right:0;bottom:2.64cqw;display:flex;justify-content:center;
    align-items:center;gap:1.13cqw;z-index:2}
  .cv-hero .dots i{width:1.32cqw;height:1.32cqw;border-radius:50%;background:rgba(255,255,255,.5)}
  .cv-hero .dots i:first-child{width:3.4cqw;border-radius:999px;background:#fff}

  /* логотип — та же плитка, что в шапке страницы салона (.s-logo, 148 px, r24) */
  .cv-hit-logo{display:flex;justify-content:center;padding:14px 0}
  .cv-logo{width:148px;height:148px;border-radius:24px;background:var(--surface-2);
    box-shadow:inset 0 0 0 1px var(--line-strong);display:grid;place-items:center;overflow:hidden;
    font-weight:800;font-size:38px;color:var(--brand-ink)}
  .cv-logo img{width:100%;height:100%;display:block;object-fit:cover}
  .cv-logo.fit-contain img{object-fit:contain;padding:9%}
  .cv-fit{display:flex;gap:3px;background:var(--surface-2);border:1px solid var(--line-strong);
    border-radius:12px;padding:3px}
  .cv-fit button{flex:1;border:0;background:none;padding:7px 10px;font-size:12.5px;font-weight:700;
    color:var(--ink-soft);border-radius:9px;font-family:inherit}
  .cv-fit button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .cv-fit button:disabled{opacity:.45}

  .cv-tools{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;
    display:grid;gap:18px;grid-template-columns:minmax(240px,300px) 1fr;align-items:start}
  @media(max-width:820px){ .cv-tools{grid-template-columns:1fr} }
  .cv-hint2{font-size:12px;color:var(--ink-faint);line-height:1.55;margin-top:10px}
  /* кнопки ровной сеткой, а не «лесенкой» по мере длины подписи.
     nowrap здесь нельзя: длинная подпись вылезала за кнопку и рвала верстку. */
  .cv-acts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
  .cv-acts .btn{width:100%;min-height:38px;white-space:normal;text-align:center;line-height:1.25;padding:8px 12px}
  /* компактные ползунки: подпись и значение в строку, трек 6 px */
  .cv-rngs{display:flex;flex-direction:column;gap:9px;margin:12px 0 12px}
  .cv-rng{display:block}
  .cv-rng>span{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px;
    font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
  .cv-rng>span b{font-size:12px;font-weight:800;color:var(--ink);letter-spacing:0;text-transform:none;
    font-variant-numeric:tabular-nums}
  .cv-rng input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;
    background:transparent;outline:none;display:block}
  .cv-rng input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;
    background:linear-gradient(90deg,var(--brand) 0 var(--p,50%),var(--line-strong) var(--p,50%) 100%)}
  .cv-rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;
    border-radius:50%;background:#fff;border:2px solid var(--brand);box-shadow:0 2px 7px rgba(40,35,90,.28);
    transition:transform .1s ease}
  .cv-rng input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
  .cv-rng input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--brand-tint)}
  .cv-rng input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--line-strong)}
  .cv-rng input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--brand)}
  .cv-rng input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--brand);border-radius:50%;
    background:#fff;box-shadow:0 2px 7px rgba(40,35,90,.28)}
  .cv-rng.locked>span{color:var(--ink-faint);opacity:.75}
  .cv-rng.locked>span b{font-weight:700;font-size:11px;color:var(--ink-faint)}
  .cv-rng input[type=range]:disabled{opacity:.45}
  .cv-rng input[type=range]:disabled::-webkit-slider-thumb{border-color:var(--ink-faint)}

  .cv-req{font-size:12px;color:var(--ink-faint);line-height:1.6;border:1px dashed var(--line-strong);
    border-radius:14px;padding:10px 13px;margin-bottom:14px}
  .cv-req b{color:var(--ink-soft)}

  .pv-ov{position:fixed;inset:0;z-index:2600;display:none;align-items:center;justify-content:center;padding:24px;
    background:rgba(17,18,36,.55);backdrop-filter:blur(8px)}
  .pv-ov.open{display:flex}
  .pv-box{background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--shadow-pop);
    max-width:min(760px,94vw);max-height:92vh;overflow:auto;padding:18px 20px 20px}
  .pv-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .pv-head h3{font-size:17px;margin:0}
  .pv-head .x{margin-left:auto;width:30px;height:30px;border:0;border-radius:9px;background:var(--surface-2);color:var(--ink-soft);font-size:17px}
  .pv-sizes{display:flex;gap:3px;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:11px;padding:3px}
  .pv-sizes button{border:0;background:none;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--ink-soft);border-radius:8px;font-family:inherit}
  .pv-sizes button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .pv-stage{display:flex;justify-content:center;padding:20px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
  .pv-stage>div{width:var(--card-min-w)}
  .pv-note{margin-top:12px;font-size:12.5px;color:var(--ink-faint);line-height:1.6}
  .pv-note b{color:var(--ink)}

  /* ==========================================================================
     Модуль «Записи» — операционная панель визитов (ТЗ «Записи · CRM» v1.0)
     Раскладка: список слева, календарь + прогноз справа. Плотность CRM,
     8px-сетка, белые карточки, фиолетовый accent только на активном.
     ========================================================================== */
  main:has(.ap2){max-width:none;padding-left:22px;padding-right:22px}
  .ap2{display:flex;gap:18px;align-items:flex-start}
  .ap-main{flex:1;min-width:0}
  .ap-side{width:302px;flex-shrink:0;position:sticky;top:calc(var(--hdr) + 14px);display:flex;flex-direction:column;gap:14px}

  .ap-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .ap-head h1{margin:0}
  .ap-head .r{margin-left:auto;display:flex;gap:8px;align-items:center}

  /* ---- карточки периодов ---- */
  .ap-per{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
  .apc{position:relative;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:13px 14px 12px;font-family:inherit;color:var(--ink);box-shadow:var(--shadow-sm);transition:border-color .14s,background .14s}
  .apc:hover{border-color:var(--line-strong);background:var(--surface)}
  .apc:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .apc.on{border-color:var(--brand);background:var(--brand-tint);box-shadow:none}
  .apc .t{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-soft);min-height:20px}
  .apc .t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .apc.on .t{color:var(--brand-ink)}
  .apc .t svg{width:15px;height:15px;flex-shrink:0;color:var(--ink-faint)}
  .apc.on .t svg{color:var(--brand)}
  .apc .n{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:8px 0 1px;line-height:1.05}
  .apc .n small{font-size:13px;font-weight:700;color:var(--ink-soft);margin-left:4px;letter-spacing:0}
  .apc .s{font-size:13px;font-weight:700;color:var(--ink-soft)}
  .apc .f{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-faint);margin-top:8px;min-height:15px}
  .apc .f i{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0;font-style:normal}
  .apc .f.wait i{background:var(--warn)}
  .apc .mv{position:absolute;top:6px;right:6px;display:flex;gap:2px;opacity:0;transition:opacity .12s}
  .apc:hover .mv,.apc:focus-within .mv{opacity:1}
  .apc:hover .t span,.apc:focus-within .t span{padding-right:52px}
  .apc .mv button{width:20px;height:20px;border:1px solid var(--line-strong);background:var(--surface);border-radius:6px;
    font-size:10px;line-height:1;color:var(--ink-faint);font-family:inherit;display:grid;place-items:center}
  .apc .mv button:hover{border-color:var(--brand);color:var(--brand-ink)}
  .apc.drag{opacity:.4}
  .apc.over{border-color:var(--brand);border-style:dashed}

  /* подсказка про перетаскивание блоков — закрывается и больше не возвращается */
  .ap-hint{display:flex;align-items:center;gap:9px;background:var(--brand-tint);
    border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);border-radius:12px;
    padding:9px 10px 9px 12px;font-size:12.5px;font-weight:600;color:var(--brand-ink);margin-bottom:14px;line-height:1.4}
  .ap-hint svg{width:16px;height:16px;flex-shrink:0}
  .ap-hint kbd{border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);border-radius:5px;padding:0 5px;
    font-size:11px;font-family:inherit;background:var(--surface)}
  .ap-hint b{font-weight:800}
  .ap-hint .x{margin-left:auto;width:26px;height:26px;flex-shrink:0;border:0;background:none;color:var(--brand-ink);
    opacity:.6;font-size:16px;line-height:1;border-radius:7px;font-family:inherit}
  .ap-hint .x:hover{opacity:1;background:var(--surface)}

  /* ---- строка инструментов ---- */
  .ap-tools{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
  .ap-search{position:relative;flex:1;min-width:220px;max-width:340px}
  .ap-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-faint);pointer-events:none}
  .ap-search input{width:100%;border:1px solid var(--line-strong);background:var(--surface);border-radius:11px;
    padding:10px 34px 10px 36px;font-size:13.5px;color:var(--ink);outline:none;font-family:inherit}
  .ap-search input:focus{border-color:var(--brand)}
  .ap-search .clr{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;background:var(--surface-2);
    border-radius:7px;color:var(--ink-soft);font-size:14px;line-height:1;display:none;place-items:center}
  .ap-search.has .clr{display:grid}
  .ap-tbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:11px;padding:10px 13px;font-size:13px;font-weight:700;color:var(--ink);font-family:inherit;min-height:40px}
  .ap-tbtn:hover{border-color:var(--brand);color:var(--brand-ink)}
  .ap-tbtn svg{width:15px;height:15px;color:var(--ink-faint)}
  .ap-tbtn .cnt{background:var(--brand);color:#fff;border-radius:999px;font-size:10.5px;font-weight:800;padding:1px 6px}
  .ap-tbtn.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-ink)}
  .ap-sort-pop{position:fixed;z-index:1000;width:236px;background:var(--surface);border:1px solid var(--line-strong);
    border-radius:12px;box-shadow:var(--shadow-pop);padding:6px}
  .ap-sort-pop button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
    padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);font-family:inherit}
  .ap-sort-pop button:hover{background:var(--surface-2)}
  .ap-sort-pop button.on{background:var(--brand-tint);color:var(--brand-ink);font-weight:700}
  .ap-sort-pop button .dir{margin-left:auto;font-size:11px;color:var(--ink-faint)}
  .ap-sort-pop .hd{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);padding:7px 10px 5px}

  /* активные фильтры */
  .ap-fchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
  .ap-fchip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-tint);color:var(--brand-ink);
    border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);border-radius:999px;padding:4px 6px 4px 11px;font-size:12px;font-weight:700}
  .ap-fchip button{border:0;background:none;color:inherit;font-size:14px;line-height:1;padding:0 3px;opacity:.65}
  .ap-fchip button:hover{opacity:1}
  .ap-fchips .rst{border:0;background:none;color:var(--ink-soft);font-size:12px;font-weight:700;text-decoration:underline;padding:4px 6px;font-family:inherit}

  /* статус-чипы со счётчиками */
  .ap-st{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
  .ap-st button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);
    color:var(--ink-soft);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;font-family:inherit;min-height:36px}
  .ap-st button .c{font-size:11px;font-weight:800;color:var(--ink-faint)}
  .ap-st button:hover{border-color:var(--brand);color:var(--brand-ink)}
  .ap-st button.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .ap-st button.on .c{color:rgba(255,255,255,.82)}

  /* ---- группы ---- */
  .ap-grp{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:12px;overflow:hidden}
  .ap-grp.over{border-color:var(--brand);border-style:dashed}
  .ap-grp.drag{opacity:.5}
  .ap-gh{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none}
  .ap-gh:hover{background:var(--surface-2)}
  .ap-gh .gt{font-size:15px;font-weight:800;letter-spacing:-.01em}
  .ap-gh .gc{background:var(--surface-2);color:var(--ink-soft);border-radius:999px;font-size:11px;font-weight:800;padding:2px 8px}
  .ap-grp.on .ap-gh .gc{background:var(--brand-tint);color:var(--brand-ink)}
  .ap-gh .gs{margin-left:auto;font-size:13.5px;font-weight:800;color:var(--ink-soft);white-space:nowrap}
  .ap-gh .gmv{display:flex;gap:2px;opacity:0;transition:opacity .12s}
  .ap-gh:hover .gmv,.ap-gh:focus-within .gmv,.ap-grp.on .ap-gh .gmv{opacity:1}
  .ap-gh .gmv button{width:22px;height:22px;border:1px solid var(--line-strong);background:var(--surface);border-radius:6px;
    color:var(--ink-faint);font-size:10px;line-height:1;font-family:inherit;display:grid;place-items:center}
  .ap-gh .gmv button:hover{border-color:var(--brand);color:var(--brand-ink)}
  .ap-gh>svg{width:17px;height:17px;flex-shrink:0;color:var(--ink-faint);transition:transform .16s}
  .ap-grp.open .ap-gh>svg{transform:rotate(180deg)}
  .ap-head .btn{white-space:nowrap}
  .ap-head .btn svg,.ap-head .ap-tbtn svg{width:15px;height:15px;flex-shrink:0}
  .ap-gh .chev{width:16px;height:16px;color:var(--ink-faint);transition:transform .16s}
  .ap-grp.open .ap-gh .chev{transform:rotate(180deg)}
  .ap-gb{border-top:1px solid var(--line)}

  /* ---- строка записи ---- */
  .ap-row{position:relative;display:grid;grid-template-columns:86px minmax(140px,1.05fr) minmax(168px,1.5fr) minmax(112px,.85fr) 74px 92px 34px 30px;
    gap:10px;align-items:center;padding:12px 14px 12px 17px;border-bottom:1px solid var(--line);font-size:13.5px;background:var(--surface);
    content-visibility:auto;contain-intrinsic-size:auto 74px}
  .ap-row:last-child{border-bottom:0}
  .ap-row:hover{background:var(--surface-2)}
  .ap-row.sel{background:var(--brand-tint)}
  .ap-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
  .ap-row.new::before{background:var(--brand)}
  .ap-row.warn::before{background:var(--warn)}
  .ap-row.dead{opacity:.62}
  .ap-row.drag{opacity:.4}
  /* на десктопе обёртки прозрачны для grid, на мобильном становятся флексами */
  .ap-row .rl,.ap-row .fr,.ap-row .more-w{display:contents}
  .apc{cursor:pointer}
  .ap-row .cl .ago{font-size:11px;font-weight:600;color:var(--ink-faint);margin-left:6px}
  .ap-row .tm{font-weight:800;font-size:15px;letter-spacing:-.01em}
  .ap-row .tm span{display:block;font-size:11.5px;font-weight:600;color:var(--ink-faint);margin-top:2px}
  .ap-row .cl b{display:block;font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ap-row .cl .ph{font-size:12.5px;color:var(--ink-faint);white-space:nowrap}
  .ap-row .cl .nt{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--brand-ink);margin-top:3px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ap-row .cl .nt.imp{color:#A8541D}
  .ap-row .cl .nt svg{width:12px;height:12px;flex-shrink:0}
  .ap-row .sv{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ap-row .sp b{display:block;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ap-row .sp span{font-size:12px;color:var(--brand-ink);opacity:.8}
  .ap-row .pr{font-weight:700;text-align:right;white-space:nowrap}
  .ap-row .stw{display:flex;justify-content:flex-start}
  .ap-nb{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--brand-tint);
    color:var(--brand-ink);border-radius:5px;padding:1px 5px;margin-right:6px;vertical-align:1px}
  .ap-row .ico{width:32px;height:32px;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;
    display:grid;place-items:center;color:var(--ink-soft);position:relative;font-family:inherit}
  .ap-row .ico:hover{border-color:var(--brand);color:var(--brand-ink)}
  .ap-row .ico svg{width:15px;height:15px}
  .ap-row .ico .dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--brand);border:1.5px solid var(--surface)}
  .ap-row .ico .dot.imp{background:var(--warn)}
  .ap-more{width:30px;height:32px;border:0;background:none;color:var(--ink-faint);font-size:17px;line-height:1;
    border-radius:8px;font-family:inherit;letter-spacing:1px}
  .ap-more:hover{background:var(--line);color:var(--ink)}
  .ap-row .drag-h{position:absolute;left:2px;top:50%;transform:translateY(-50%);width:13px;height:22px;cursor:grab;
    border:0;background:none;padding:0;color:var(--ink-faint);opacity:0;font-size:11px;line-height:1;font-family:inherit}
  .ap-row:hover .drag-h,.ap-row .drag-h:focus-visible{opacity:.6}
  .apc .mv button.gh,.ap-gh .gmv button.gh{cursor:grab}
  .ap-mrow{width:100%;text-align:left;padding:11px 16px;background:none;border:0;border-top:1px solid var(--line);
    font-size:12.5px;font-weight:700;color:var(--brand-ink);font-family:inherit}
  .ap-mrow:hover{background:var(--surface-2)}

  /* меню быстрых действий */
  .ap-menu{position:fixed;z-index:1000;width:248px;background:var(--surface);border:1px solid var(--line-strong);
    border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;max-height:min(70vh,520px);overflow:auto}
  .ap-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;
    padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);font-family:inherit}
  .ap-menu button:hover{background:var(--surface-2)}
  .ap-menu button:disabled{opacity:.4;cursor:not-allowed}
  .ap-menu button svg{width:15px;height:15px;color:var(--ink-faint);flex-shrink:0}
  .ap-menu button.dng{color:var(--accent)} .ap-menu button.dng svg{color:var(--accent)}
  .ap-menu .sep{height:1px;background:var(--line);margin:5px 4px}
  .ap-menu .hd{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);padding:7px 10px 4px}

  /* ---- правая колонка ---- */
  .ap-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:14px}
  .ap-card .ch{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
  .ap-card .ch b{font-size:13.5px;font-weight:800}
  .ap-card .ch .r{margin-left:auto;display:flex;gap:4px;align-items:center}
  .ap-cal .ap-mh{display:flex;align-items:center;gap:6px;margin-bottom:8px}
  .ap-cal .ap-mh b{flex:1;text-align:center;font-size:13px;font-weight:800}
  .ap-cal .ap-mn{width:26px;height:26px;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
    color:var(--ink-soft);font-size:13px;line-height:1;font-family:inherit;display:grid;place-items:center}
  .ap-cal .ap-mn:hover{border-color:var(--brand);color:var(--brand-ink)}
  .ap-cal .ap-mg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .ap-cal .ap-mg .dw{font-size:10px;font-weight:800;color:var(--ink-faint);text-align:center;padding:3px 0 5px;text-transform:uppercase}
  .ap-cal .ap-mg button{position:relative;aspect-ratio:1;border:0;background:none;border-radius:9px;font-size:12.5px;
    font-weight:600;color:var(--ink);font-family:inherit;display:grid;place-items:center;min-height:32px}
  .ap-cal .ap-mg button:hover{background:var(--surface-2)}
  .ap-cal .ap-mg button.oth{color:var(--ink-faint);opacity:.55}
  .ap-cal .ap-mg button.off{color:var(--ink-faint)}
  .ap-cal .ap-mg button.off::after{content:"";position:absolute;left:22%;right:22%;bottom:5px;height:1px;background:var(--line-strong)}
  .ap-cal .ap-mg button.today{color:var(--brand-ink);font-weight:800}
  .ap-cal .ap-mg button.sel{background:var(--brand);color:#fff;font-weight:800}
  .ap-cal .ap-mg button .d{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;
    border-radius:50%;background:var(--brand);opacity:.75}
  .ap-cal .ap-mg button.sel .d{background:#fff;opacity:.9}
  .ap-cal .ap-mg button.dover{outline:2px dashed var(--brand);outline-offset:-2px}
  .ap-day{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
  .ap-day .dh2{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .ap-day .dh2 b{font-size:12.5px;font-weight:800;color:var(--brand-ink)}
  .ap-day .dh2 .btn{margin-left:auto}
  .ap-day .sum{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink-soft);margin-bottom:8px}
  .ap-day .sum b{font-size:13px;color:var(--ink)}
  .ap-day .sum .p{margin-left:auto;font-weight:800;color:var(--ink)}
  .ap-day .dl{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
    padding:6px 4px;border-radius:8px;font-family:inherit;font-size:12.5px;color:var(--ink)}
  .ap-day .dl:hover{background:var(--surface-2)}
  .ap-day .dl time{font-weight:800;font-size:12px;width:38px;flex-shrink:0}
  .ap-day .dl span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
  .ap-day .dl .badge{font-size:9.5px;padding:2px 6px;flex:0 0 auto}
  .ap-day .ap-mo{font-size:12px;color:var(--ink-faint);padding:5px 4px 0}

  /* прогноз */
  .ap-fc .seg{display:flex;background:var(--surface-2);border-radius:9px;padding:2px}
  .ap-fc .seg button{border:0;background:none;border-radius:7px;padding:4px 10px;font-size:11.5px;font-weight:700;
    color:var(--ink-soft);font-family:inherit}
  .ap-fc .seg button.on{background:var(--brand);color:#fff}
  .ap-fc .per{font-size:12px;color:var(--ink-faint);font-weight:600;margin-bottom:10px}
  .ap-fc .body{display:flex;align-items:center;gap:14px}
  .ap-fc .nums{flex:1;min-width:0}
  .ap-fc .lb{font-size:11.5px;color:var(--ink-faint);font-weight:600}
  .ap-fc .big{font-size:24px;font-weight:800;color:var(--brand-ink);letter-spacing:-.025em;margin:2px 0 12px;
    font-variant-numeric:tabular-nums}
  .ap-fc .body{align-items:center}
  .ap-fc .dn-wrap{display:flex;justify-content:center}
  /* строка «подпись … сумма»: суммы выровнены по правому краю и читаются столбцом */
  .ap-fc .li{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;margin-top:9px}
  .ap-fc .li i{width:8px;height:8px;border-radius:50%;flex-shrink:0;font-style:normal}
  .ap-fc .li .k{font-size:12px;font-weight:600;color:var(--ink-soft)}
  .ap-fc .li b{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
  .ap-fc .dn{position:relative;width:116px;height:116px;flex-shrink:0}
  .ap-fc .dn svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
  /* столбец по центру кольца: grid с двумя детьми растягивал строки и выталкивал
     подпись за окружность — только flex-колонка держит их вместе */
  .ap-fc .dn .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:1px;text-align:center;line-height:1.1;pointer-events:none}
  .ap-fc .dn .mid b{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
  .ap-fc .dn .mid b i{font-size:14px;font-style:normal;font-weight:800;color:var(--ink-soft);margin-left:1px}
  /* подпись должна помещаться во внутренний диаметр кольца, иначе наезжает на дугу */
  .ap-fc .dn .mid span{font-size:9px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;
    letter-spacing:.02em;max-width:72%}
  .ap-fc .note{font-size:11.5px;color:var(--ink-faint);margin-top:12px;padding-top:10px;border-top:1px solid var(--line);line-height:1.45}

  /* пустые состояния и скелет */
  .ap-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 20px;text-align:center;box-shadow:var(--shadow-sm)}
  .ap-empty .ic{width:44px;height:44px;border-radius:13px;background:var(--surface-2);color:var(--ink-faint);display:grid;place-items:center;margin:0 auto 12px}
  .ap-empty b{font-size:15px;display:block;margin-bottom:5px}
  .ap-empty p{font-size:13px;color:var(--ink-soft);margin-bottom:14px;max-width:420px;margin-left:auto;margin-right:auto}
  .ap-empty .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  .ap-gempty{padding:20px 16px;font-size:13px;color:var(--ink-faint);text-align:center}

  /* заметки в ящике */
  .ap-note{border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:10px;background:var(--surface)}
  .ap-note.imp{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));background:color-mix(in srgb,var(--warn) 7%,var(--surface))}
  .ap-note .nh{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-faint);font-weight:700;margin-bottom:5px;flex-wrap:wrap}
  /* чекбоксы внутри ящика не должны наследовать капс от подписи поля */
  .cal-drawer .df label.pf-lang{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:0}
  .cal-drawer label.pf-lang{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--ink-soft)}
  .ap-note .nh b{color:var(--ink-soft)}
  .ap-note .nh .r{margin-left:auto;display:flex;gap:4px}
  .ap-note .nh .r button{border:0;background:none;color:var(--ink-faint);font-size:11px;font-weight:700;font-family:inherit;padding:2px 4px;border-radius:6px}
  .ap-note .nh .r button:hover{background:var(--surface-2);color:var(--ink)}
  .ap-note .tx{font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
  .ap-note .imp-f{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#A8541D}

  @media(max-width:1279px){
    /* §2.2 аудита: align-items:flex-start пришёл из строчной раскладки и в
       колоночном флексе означает «ширина по содержимому» — .ap-main брал
       свою max-content ширину, и вся страница ехала вбок (scrollWidth 912px
       при 375). min-width:0 здесь не спасает — он про сжатие, не растяжение. */
    .ap2{flex-direction:column;align-items:stretch}
    .ap-side{width:100%;position:static;flex-direction:row;flex-wrap:wrap}
    .ap-side>*{flex:1;min-width:280px}
    .ap-side.hid{display:none}
    .ap-sidetgl{display:inline-flex!important}
    .ap-per{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  /* ---- phone: та же колонка — нижним листом (ТЗ §8.3), а не ещё одной
     строкой карточек под записями. Сама разметка не меняется (apRepaint()
     строит один и тот же узел #ap-side что на телефоне, что на десктопе),
     здесь только его визуальное положение и замок прокрутки (ovlLock,
     вызывается из #ap-sidetgl рядом). ---- */
  @media(max-width:639px){
    .ap-side{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:120;
      max-height:80vh;overflow-y:auto;flex-direction:column;flex-wrap:nowrap;width:100%;
      /* фон у самого листа, как у сводки отзывов: без него сквозь просветы
         между карточками видно страницу, и лист не читается как лист */
      background:var(--surface);
      border-radius:18px 18px 0 0;box-shadow:var(--shadow-pop);
      padding:16px 16px calc(16px + env(safe-area-inset-bottom));
      transform:translateY(0);transition:transform .22s cubic-bezier(.22,.61,.36,1)}
    .ap-side>*{min-width:0}
    .ap-side.hid{display:flex;transform:translateY(115%);pointer-events:none}
  }
  .ap-sidetgl{display:none}
  /* ---- шапка нижнего листа и подложка под ним ----
     На широком экране боковая колонка — это просто колонка, шапка ей не
     нужна и её нет. На телефоне лист закрывает почти весь экран, а кнопка,
     которой его открыли, остаётся под ним (80vh в Safari считаются от
     «большой» высоты окна) — поэтому крестик и подложка появляются ровно
     там, где лист становится листом. */
  .sheet-bar{display:none}
  .sheet-bd{display:none}
  @media(max-width:639px){
    /* Отступы у самого листа на телефоне переопределяются ниже (≤719px),
       поэтому шапка не вычитает их отрицательным полем, а просто липнет к
       верху прокручиваемой панели. */
    .sheet-bar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:2;
      margin:0 0 10px;padding:12px 4px 10px 8px;background:var(--surface);
      border-radius:18px 18px 0 0;border-bottom:1px solid var(--line)}
    .sheet-bar>b{font-size:14px;font-weight:800;color:var(--ink)}
    .sheet-bar .gr{position:absolute;left:50%;top:5px;width:36px;height:4px;margin-left:-18px;
      border-radius:2px;background:var(--line-strong)}
    .sheet-x{margin-left:auto;display:grid;place-items:center;width:44px;height:44px;
      border:0;background:none;color:var(--ink-soft);cursor:pointer}
    .sheet-x:active{color:var(--ink)}
    .sheet-bd{display:block;position:fixed;inset:0;z-index:119;background:rgba(16,14,38,.42)}
  }
  @media(max-width:900px){
    .ap-row{grid-template-columns:84px minmax(120px,1.3fr) minmax(110px,1fr) 76px 34px;row-gap:6px}
    .ap-row .sp,.ap-row .stw{grid-column:span 1}
    .ap-row .ico{display:none}
  }
  @media(max-width:719px){
    main:has(.ap2){padding-left:0;padding-right:0}
    /* три кнопки тулбара (переключить панель, фильтры, «Добавить») не
       помещались в 375px строкой без переноса — тот же класс бага, что и
       §2.2, только внутри .r, а не .ap2: flex-wrap по умолчанию nowrap. */
    .ap-head{padding:0 16px;flex-wrap:wrap;row-gap:10px}
    .ap-head .r{flex-wrap:wrap;justify-content:flex-end}
    .ap-per{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 4px;margin-bottom:14px;
      -webkit-overflow-scrolling:touch}
    .ap-per::-webkit-scrollbar{display:none}
    .apc{flex:0 0 168px;scroll-snap-align:start}
    .ap-tools,.ap-st,.ap-fchips{padding:0 16px}
    .ap-search{max-width:none}
    .ap-grp{border-radius:14px;margin:0 12px 12px}
    .ap-row{display:block;padding:13px 14px 13px 17px;min-height:44px;contain-intrinsic-size:auto 76px}
    .ap-row .rl{display:flex;align-items:flex-start;gap:10px}
    .ap-row .tm{font-size:14px;width:72px;flex-shrink:0}
    .ap-row .cl{flex:1;min-width:0}
    .ap-row .sv,.ap-row .sp{margin-top:5px;font-size:12.5px;color:var(--ink-soft)}
    .ap-row .sp b{display:inline;font-size:12.5px}
    .ap-row .sp span::before{content:"·";margin:0 5px;color:var(--ink-faint)}
    .ap-row .fr{display:flex;align-items:center;gap:8px;margin-top:8px}
    .ap-row .pr{text-align:left}
    .ap-row .more-w{margin-left:auto;display:flex;gap:4px}
    /* §15 минимальная зона клика 44×44 */
    .ap-row .ico{display:grid;width:44px;height:44px}
    .ap-more{width:44px;height:44px}
    .ap-st button,.ap-tbtn{min-height:44px}
    .ap-search .clr{width:34px;height:34px}
    .ap-day .dl{min-height:44px}
    .ap-side{padding:0 12px}
  }
  /* ==========================================================================
     ОТЗЫВЫ · Reputation Center ELYQO (ТЗ «модуль Отзывы» v1.0, §2, §24)
     ========================================================================== */
  .rv-hd{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
  .rv-hd .lede{margin-bottom:16px;max-width:760px}
  .rv-period{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-faint)}
  .rv-period select{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;
    padding:8px 10px;font-size:13px;font-weight:600;color:var(--ink);outline:none}
  .rv-period select:focus{border-color:var(--brand)}

  .rv-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
  .rv-kpis .kpi{display:flex;flex-direction:column;min-width:0}
  .rv-kpis .kpi .l{order:-1}
  .rv-big{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .rv-big.rv-small{font-size:15px}
  .rv-pct{font-size:13px;font-weight:800;color:var(--success)}
  .rv-kpis .kpi .d{color:var(--ink-faint);font-weight:600;padding-top:6px}
  .rv-d{font-weight:800}
  .rv-d.up{color:var(--success)} .rv-d.down{color:var(--accent)}
  .rv-hot{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
  .rv-rank{background:linear-gradient(150deg,var(--brand-tint),var(--surface) 70%);border-color:var(--line-strong)}
  .rv-rank .rv-big{color:var(--brand-ink)}
  .rv-note{font-size:11px;color:var(--ink-faint);line-height:1.45;margin-top:8px}
  .rv-link{border:0;background:none;padding:0;font:inherit;font-size:11px;font-weight:800;color:var(--brand-ink);text-decoration:underline}
  .rv-link.del{color:var(--accent)}

  .rv-stars{color:var(--star);letter-spacing:.5px;font-size:14px;white-space:nowrap}
  .rv-stars i{color:var(--line-strong);font-style:normal}

  .rv-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;
    border-bottom:1px solid var(--line);padding-bottom:0}
  .rv-tabs{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:-1px}
  .rv-tab{border:0;background:none;padding:9px 12px;font-size:13px;font-weight:700;color:var(--ink-faint);
    border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .rv-tab:hover{color:var(--ink)}
  .rv-tab.on{color:var(--brand-ink);border-bottom-color:var(--brand)}
  .rv-tab span{font-size:11px;font-weight:800;color:var(--ink-faint);background:var(--surface-2);border-radius:999px;padding:1px 6px}
  .rv-tab.on span{background:var(--brand-tint);color:var(--brand-ink)}
  .rv-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;padding-bottom:8px}
  .rv-n{font-size:10.5px;font-weight:800;background:var(--brand);color:#fff;border-radius:999px;padding:1px 6px;margin-left:2px}
  .rv-n.light{background:rgba(255,255,255,.25)}

  .rv-charts{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
  .rv-svc{margin-bottom:14px}
  .rv-hint{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-faint)}
  .rv-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
  .rv-ch-hd{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px}
  .rv-ch-hd b{font-size:14px;letter-spacing:-.01em}
  .rv-ch-hd .rv-sel,.rv-ch-hd svg,.rv-ch-hd .rv-n{margin-left:auto}
  .rv-sel{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:6px 9px;
    font-size:12.5px;font-weight:600;color:var(--ink);outline:none;font-family:inherit}
  .rv-sel:focus{border-color:var(--brand)}
  .rv-sel.sm{font-size:12px;padding:5px 8px}

  .rv-chartbox{position:relative}
  .rv-svg{width:100%;height:auto;display:block;overflow:visible}
  .rv-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
  .rv-ax{fill:var(--ink-faint);font-size:10px;font-weight:700;font-family:var(--font)}
  .rv-lin{fill:none;stroke:url(#rvStroke);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
  .rv-band{fill:rgba(124,92,255,.09)}
  .rv-mark-l{stroke:var(--brand);stroke-width:1;stroke-dasharray:3 4;opacity:.55}
  .rv-mark-h{fill:rgba(124,92,255,.22)}
  .rv-mark{fill:#fff;stroke:#8B5CFF;stroke-width:3}
  .rv-hit{cursor:crosshair}
  .rv-tip{position:absolute;transform:translate(-50%,-100%);background:#1B1A2E;color:#fff;font-size:11.5px;
    font-weight:700;line-height:1.35;padding:6px 9px;border-radius:8px;pointer-events:none;white-space:nowrap;
    max-width:calc(100% - 8px);box-shadow:0 6px 18px rgba(20,16,50,.28);z-index:5}
  .rv-tip[hidden]{display:none}

  .rv-dist{display:flex;align-items:center;gap:14px}
  .rv-donut{width:126px;height:126px;flex:0 0 126px}
  .rv-dn{fill:var(--ink);font-size:22px;font-weight:800;font-family:var(--font)}
  .rv-ds{fill:var(--ink-faint);font-size:9.5px;font-weight:700;font-family:var(--font)}
  .rv-rows,.rv-legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
  .rv-row,.rv-lg{display:flex;align-items:center;gap:8px;border:0;background:none;padding:3px 4px;
    border-radius:7px;font:inherit;font-size:12px;text-align:left;width:100%}
  .rv-row:hover,.rv-lg:hover{background:var(--surface-2)}
  .rv-row.on,.rv-lg.on{background:var(--brand-tint)}
  .rv-r{font-weight:800;white-space:nowrap;color:var(--ink-soft)}
  .rv-r i{font-style:normal}
  .rv-track{flex:1;min-width:26px;height:7px;background:var(--surface-2);border-radius:99px;overflow:hidden}
  .rv-fill{display:block;height:100%;background:var(--brand);border-radius:99px}
  .rv-v,.rv-lgv{font-weight:800;white-space:nowrap;color:var(--ink);font-size:11.5px}
  .rv-v em,.rv-lgv em{font-style:normal;font-weight:700;color:var(--ink-faint)}
  .rv-lg i{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
  .rv-lgn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink-soft)}
  .rv-lga{font-size:11px;font-weight:800;color:var(--star);white-space:nowrap;width:36px;text-align:right}
  .rv-gauges{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .rv-gauge{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;border:0;background:none;
    font:inherit;padding:10px 6px 12px;border-radius:14px;text-align:center;transition:background .15s}
  .rv-gauge:hover{background:var(--surface-2)}
  .rv-gauge.on{background:var(--brand-tint)}
  .rv-gauge svg{width:100%;max-width:128px;height:auto;display:block}
  .rv-g-track{fill:none;stroke:#E7E3F3;stroke-width:11}
  .rv-g-arc{fill:none;stroke-width:11;stroke-linecap:round}
  .rv-g-n{fill:var(--ink);font-size:27px;font-weight:800;font-family:var(--font);letter-spacing:-.02em}
  .rv-gauge b{font-size:12px;font-weight:700;line-height:1.3;max-width:100%;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rv-gauge em{font-style:normal;font-size:11px;font-weight:700;color:var(--ink-faint)}
  .rv-warn{margin-top:10px;font-size:11.5px;font-weight:600;color:#8A5A16;background:#FFF4E2;
    border:1px solid #F6E2C0;border-radius:9px;padding:7px 10px;line-height:1.4}

  .rv-people{display:flex;flex-direction:column;gap:2px}
  .rv-person{display:flex;align-items:center;gap:9px;border:0;background:none;padding:6px 5px;border-radius:9px;
    font:inherit;text-align:left;width:100%;min-width:0}
  .rv-person:hover{background:var(--surface-2)}
  .rv-ava{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;
    font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,#7C6BFF,#E85FB4)}
  .rv-ava.br{background:linear-gradient(135deg,#3D5CE8,#9C5CFF)}
  .rv-ava.sm{width:26px;height:26px;flex:0 0 26px;font-size:10px}
  .rv-ava.lg{width:38px;height:38px;flex:0 0 38px;font-size:12.5px}
  .rv-pn{flex:1;min-width:0;display:flex;flex-direction:column}
  .rv-pn b{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rv-pn em,.rv-pv em{font-style:normal;font-size:11px;color:var(--ink-faint);font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rv-att{font-style:normal;color:#A8541D}
  .rv-pv{display:flex;flex-direction:column;align-items:flex-end;text-align:right;white-space:nowrap;min-width:0;overflow:hidden}
  .rv-rt{font-size:13px;font-weight:800;color:var(--ink)}

  .rv-themes{display:flex;flex-direction:column;gap:7px}
  .rv-th{display:flex;align-items:center;gap:8px;font-size:12px}
  .rv-thl{width:118px;flex:0 0 118px;color:var(--ink-soft);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rv-thv{font-weight:800;font-size:11.5px;white-space:nowrap}
  .rv-thv em{font-style:normal;font-weight:700;color:var(--ink-faint)}
  .rv-thn{font-size:10.5px;font-weight:800;color:var(--accent)}

  /* --- список отзывов + правая колонка --- */
  .rv-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,296px);gap:16px;align-items:start}
  .rv-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--hdr) + 14px)}
  .rv-tools{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
  .rv-search{flex:1;min-width:190px;display:flex;align-items:center;gap:8px;background:var(--surface);
    border:1px solid var(--line-strong);border-radius:10px;padding:0 11px}
  .rv-search:focus-within{border-color:var(--brand)}
  .rv-search svg{width:15px;height:15px;color:var(--ink-faint);flex:0 0 15px}
  .rv-search input{flex:1;border:0;outline:none;background:none;padding:9px 0;font-size:13.5px;color:var(--ink);min-width:0}
  .rv-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .rv-chip{border:1px solid var(--brand);background:var(--brand-tint);color:var(--brand-ink);border-radius:999px;
    padding:4px 10px;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
  .rv-chip i{font-style:normal;font-size:13px;line-height:1}
  .rv-chip.clr{border-color:var(--line-strong);background:var(--surface);color:var(--ink-soft)}

  .rv-item{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);padding:14px;margin-bottom:10px;transition:border-color .15s}
  .rv-item.fresh{border-left:3px solid var(--brand);padding-left:12px}
  .rv-item.hl{border-color:var(--brand);box-shadow:var(--glow)}
  .rv-it-body{flex:1;min-width:0}
  .rv-it-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .rv-it-hd b{font-size:14px}
  .rv-vv{font-size:10.5px;font-weight:800;color:var(--success);background:color-mix(in srgb,var(--success) 12%,transparent);
    border-radius:999px;padding:2px 8px;white-space:nowrap}
  .rv-when{font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-left:auto;white-space:nowrap}
  .rv-new{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;
    background:var(--brand);border-radius:999px;padding:2px 7px}
  .rv-st{font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 9px;white-space:nowrap}
  .rv-st.s-PUBLISHED{background:color-mix(in srgb,var(--success) 14%,transparent);color:#1E7A55}
  .rv-st.s-MODERATION{background:#FFF1DC;color:#A8541D}
  .rv-st.s-HIDDEN{background:var(--surface-2);color:var(--ink-faint)}
  .rv-kebab{border:0;background:none;width:26px;height:26px;border-radius:7px;color:var(--ink-faint);
    font-size:16px;line-height:1;flex:0 0 26px}
  .rv-kebab:hover{background:var(--surface-2);color:var(--ink)}
  .rv-it-meta{font-size:11.5px;color:var(--ink-faint);font-weight:600;margin:5px 0 6px}
  .rv-it-text{font-size:13.5px;line-height:1.55;color:var(--ink)}
  .rv-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
  .rv-tag{font-size:10.5px;font-weight:700;color:var(--ink-soft);background:var(--surface-2);border-radius:6px;padding:2px 7px}
  .rv-sys{margin-top:9px;font-size:11.5px;font-weight:600;line-height:1.45;color:var(--ink-soft);
    background:var(--surface-2);border-radius:9px;padding:8px 10px}
  .rv-sys.warn{background:#FFF4E2;color:#8A5A16}
  .rv-reply{margin-top:10px;background:var(--surface-2);border-radius:10px;padding:9px 11px;font-size:13px;line-height:1.5}
  .rv-reply-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;font-size:12px}
  .rv-reply-hd .muted{font-size:11px}
  .rv-reply-hd .rv-link{margin-left:auto}
  .rv-reply-hd .rv-link + .rv-link{margin-left:0}
  .rv-answer{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .rv-answer .rv-in{flex:1;min-width:170px;border:1.5px solid var(--line-strong);background:var(--surface-2);
    border-radius:9px;padding:8px 11px;font-size:13px;color:var(--ink);outline:none;font-family:inherit}
  .rv-answer .rv-in:focus{border-color:var(--brand);background:var(--surface)}

  .rv-pager{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:6px 2px 2px}
  .rv-pager .muted{margin-left:auto}
  .rv-pg{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;min-width:30px;height:30px;
    padding:0 8px;font-size:12.5px;font-weight:700;color:var(--ink-soft);font-family:inherit}
  .rv-pg:hover:not(:disabled){border-color:var(--brand);color:var(--brand-ink)}
  .rv-pg.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .rv-pg:disabled{opacity:.4;cursor:not-allowed}
  .rv-dots{color:var(--ink-faint);padding:0 2px}

  .rv-collect{background:linear-gradient(160deg,var(--brand-tint),var(--surface) 62%)}
  .rv-metrics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px 10px}
  .rv-metrics div{display:flex;flex-direction:column;min-width:0;overflow:hidden}
  .rv-metrics b{font-size:17px;font-weight:800;letter-spacing:-.02em}
  .rv-metrics span{font-size:10.5px;font-weight:600;color:var(--ink-faint);line-height:1.3}
  .rv-metrics .hot b{color:var(--accent)}
  .rv-collect .btn{width:100%;margin-top:10px}
  .rv-reps{display:flex;flex-direction:column;gap:2px}
  .rv-rep{display:flex;align-items:center;gap:8px;border:0;background:none;padding:6px 5px;border-radius:8px;
    font:inherit;text-align:left;width:100%;min-width:0}
  .rv-rep:hover{background:var(--surface-2)}
  .rv-rep span{display:flex;flex-direction:column;min-width:0;overflow:hidden}
  .rv-rep b{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rv-rep em{font-style:normal;font-size:10.5px;color:var(--ink-faint);font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rv-rst{margin-left:auto;flex:none;font-size:10px;font-weight:800;border-radius:999px;padding:2px 8px;white-space:nowrap}
  .rv-rst.r-sent,.rv-rst.r-review{background:#FFE9EC;color:#A8323F}
  .rv-rst.r-solved{background:color-mix(in srgb,var(--success) 14%,transparent);color:#1E7A55}
  .rv-rst.r-rejected{background:var(--surface-2);color:var(--ink-faint)}

  .rv-flow{margin-top:18px}
  .rv-steps{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
  .rv-step{flex:1;min-width:172px;display:flex;gap:9px;align-items:flex-start;background:var(--surface-2);
    border-radius:11px;padding:10px 11px}
  .rv-sn{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--brand);color:#fff;
    display:grid;place-items:center;font-size:11px;font-weight:800}
  .rv-step b{display:block;font-size:12.5px;line-height:1.35}
  .rv-step em{font-style:normal;font-size:11px;color:var(--ink-faint);font-weight:600;line-height:1.4;display:block;margin-top:2px}
  .rv-arw{align-self:center;color:var(--ink-faint);font-weight:800}

  .rv-empty{text-align:center;max-width:560px;margin:0 auto}
  .rv-empty .bd{padding:30px 24px}
  .rv-empty-ic{width:54px;height:54px;border-radius:16px;background:var(--brand-tint);color:var(--star);
    display:grid;place-items:center;font-size:24px;margin:0 auto 14px}
  .rv-empty b{font-size:16px}
  .rv-empty p{margin:8px auto 0;max-width:430px}
  .rv-empty .btn{margin-top:16px}
  .rv-err{border-color:#F3D2D6;background:#FFF7F8;margin-bottom:14px}
  .rv-none{padding:22px 16px;text-align:center}

  /* --- модалки модуля --- */
  .modal .box.rv-box{max-width:720px}
  .rv-lead{margin-bottom:12px;line-height:1.5}
  .rv-quote{background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:14px}
  .rv-quote div{margin-top:4px;color:var(--ink-soft)}
  .rv-req-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .rv-count{margin-left:auto;font-size:12px;font-weight:800;color:var(--brand-ink)}
  .rv-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:6px 0;cursor:pointer}
  .rv-check input{width:16px;height:16px;accent-color:var(--brand)}
  .rv-req-list{max-height:min(46vh,360px);overflow:auto;margin:2px 0 12px}
  .rv-req-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line);cursor:pointer}
  .rv-req-row:hover{background:var(--surface-2)}
  .rv-req-row input{width:16px;height:16px;accent-color:var(--brand);flex:0 0 16px}
  .rv-rq-n{flex:1;min-width:0;display:flex;flex-direction:column}
  .rv-rq-n b{font-size:13px}
  .rv-rq-n em,.rv-rq-d em{font-style:normal;font-size:11px;color:var(--ink-faint);font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rv-rq-d{display:flex;flex-direction:column;font-size:11.5px;font-weight:700;color:var(--ink-soft);
    text-align:right;white-space:nowrap}
  .rv-elg{font-size:10.5px;font-weight:800;background:color-mix(in srgb,var(--success) 14%,transparent);
    color:#1E7A55;border-radius:999px;padding:3px 9px;white-space:nowrap;flex:0 0 auto}
  .rv-elg.hot{background:#FFE9EC;color:#A8323F}
  .rv-det{margin:8px 0}
  .rv-det summary{font-size:12.5px;font-weight:700;color:var(--brand-ink);cursor:pointer;padding:6px 0}
  .rv-skip{max-height:200px;overflow:auto}
  .rv-skip-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;padding:7px 4px;border-bottom:1px solid var(--line)}
  .rv-skip-row .muted{font-size:11.5px}
  .rv-why{margin-left:auto;font-size:11px;font-weight:800;color:var(--ink-faint);white-space:nowrap}
  .rv-why.bad{color:var(--accent)}
  .rv-preview{background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
  .rv-req-cta{position:sticky;bottom:-16px;background:var(--surface);padding:12px 0 2px;margin-top:4px;
    border-top:1px solid var(--line)}
  .rv-res{display:flex;gap:12px;margin-bottom:12px}
  .rv-res-n{flex:1;background:var(--surface-2);border-radius:12px;padding:12px;text-align:center}
  .rv-res-n b{display:block;font-size:24px;font-weight:800}
  .rv-res-n span{font-size:11.5px;font-weight:700;color:var(--ink-faint)}
  .rv-res-n.ok b{color:var(--success)} .rv-res-n.bad b{color:var(--accent)}
  .rv-acts-list{display:flex;flex-direction:column;gap:4px}
  .rv-act{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:10px 12px;
    font:inherit;font-size:13px;font-weight:600;text-align:left;color:var(--ink)}
  .rv-act:hover:not(:disabled){border-color:var(--brand);background:var(--brand-tint);color:var(--brand-ink)}
  .rv-act:disabled{opacity:.5;cursor:not-allowed}
  .rv-kv{display:flex;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
  .rv-kv span{width:140px;flex:0 0 140px;color:var(--ink-faint);font-weight:600;font-size:12px}
  .rv-radios{display:flex;flex-direction:column;gap:2px}
  .rv-radio{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 4px;border-radius:8px;cursor:pointer}
  .rv-radio:hover{background:var(--surface-2)}
  .rv-radio input{accent-color:var(--brand)}
  .rv-pills{display:flex;gap:6px;flex-wrap:wrap}
  .rv-pill{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:6px 12px;
    font:inherit;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  .rv-pill.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .rv-log{max-height:52vh;overflow:auto}
  .rv-lg-row{display:flex;gap:10px;font-size:12.5px;padding:8px 2px;border-bottom:1px solid var(--line)}
  .rv-lg-row span{display:flex;flex-direction:column;min-width:0}
  .rv-lg-row em{font-style:normal;font-size:11px;color:var(--ink-faint);font-weight:600}
  .rv-lg-t{width:104px;flex:0 0 104px;color:var(--ink-faint);font-weight:700}
  .rv-hist{padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.45}
  .rv-csv{width:100%;min-height:190px;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:10px;
    padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;color:var(--ink-soft);resize:vertical}

  /* §24 responsive: планшет — KPI в 3 колонки, графики последовательно */
  @media(max-width:1180px){
    .rv-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
    .rv-charts{grid-template-columns:minmax(0,1fr)}
    .rv-gauges{grid-template-columns:repeat(3,minmax(0,1fr))}
    .rv-main{grid-template-columns:minmax(0,1fr)}
    .rv-rail{position:static;flex-direction:row;flex-wrap:wrap}
    .rv-rail > .card{flex:1;min-width:270px}
  }
  #rv-railtgl{display:none}
  /* ТЗ §8.6: на телефоне сводка — нижний лист по кнопке «Сводка», тот же
     приём, что у #ap-side/.cal-aside (visual positioning без переноса DOM —
     rvPaint() перерисовывает #rv-list-box точечно, но полный render() тоже
     возможен, и узел должен пережить это так же безопасно). */
  @media(max-width:639px){
    #rv-railtgl{display:inline-flex}
    .rv-rail{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:120;flex-direction:column;
      max-height:80vh;overflow-y:auto;width:100%;border-radius:18px 18px 0 0;box-shadow:var(--shadow-pop);
      padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:var(--surface);
      transform:translateY(0);transition:transform .22s cubic-bezier(.22,.61,.36,1)}
    .rv-rail.hid{display:flex;transform:translateY(115%);pointer-events:none}
    .rv-rail > .card{min-width:0}
  }
  @media(max-width:900px){
    .rv-g3{grid-template-columns:minmax(0,1fr)}
    .rv-charts{grid-template-columns:minmax(0,1fr)}
  }
  /* §24 мобильный: KPI в 2 колонки, CTA без горизонтального скролла, touch ≥ 44px */
  @media(max-width:720px){
    .rv-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
    .rv-period{margin-left:0;width:100%}
    .rv-period select{flex:1}
    .rv-bar{gap:6px}
    .rv-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
    .rv-tabs::-webkit-scrollbar{display:none}
    .rv-acts{margin-left:0;width:100%}
    .rv-acts .btn{min-height:44px;flex:1}
    .rv-dist{flex-direction:column;align-items:stretch}
    .rv-donut{align-self:center}
    .rv-item{padding:12px}
    .rv-when{margin-left:0;width:100%;order:9}
    .rv-answer .btn{min-height:44px}
    .rv-tab{min-height:44px}
    .rv-pg{min-width:38px;height:38px}
    .rv-kebab{width:40px;height:40px;flex:0 0 40px}
    .rv-reply-hd .rv-link{padding:10px 4px}
    .rv-thl{width:104px;flex:0 0 104px}
    .rv-rq-d{display:none}
    .rv-req-row{padding:11px 4px}
    .rv-metrics{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .rv-gauges{grid-template-columns:repeat(2,minmax(0,1fr))}
    .rv-g-n{font-size:24px}
    .rv-tip{white-space:normal;text-align:center}
  }

  /* ==========================================================================
     УСЛУГИ И ЦЕНЫ · каталог владельца + live-preview публичной карточки
     ТЗ «ELYQO Business — модуль „Услуги и цены“» v1.0 от 01.09.2026, §1–§27.
     §2: декоративных иконок категорий нет. Акцент — порядок блоков, ручка
     перетаскивания, аккуратные статусы и предпросмотр карточки салона справа.
     Фиолетовый accent — только активные состояния, CTA, выбранный блок и drag&drop.
     ========================================================================== */
  .sv-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
  .sv-head .lede{margin-bottom:0;max-width:620px}
  /* Общие стили размеров SVG не задают, а флекс растягивает картинку без атрибутов —
     каждой иконке модуля нужен явный размер, иначе строка распухает на сотни пикселей. */
  #sv-root .btn svg,.sv-dw .btn svg{width:15px;height:15px;flex-shrink:0}
  .sv-addin svg,.sv-tmpnote svg{width:14px;height:14px;flex-shrink:0}
  .sv-empty .ic svg{width:22px;height:22px}
  .sv-warn>span{flex-shrink:0;line-height:0}
  .sv-pvcat .cv svg{width:100%;height:100%;display:block}
  .sv-cta{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

  /* ---- §3 вкладки, поиск, фильтры ---- */
  .sv-bar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px}
  .sv-tabs{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:-1px}
  .sv-tab{border:0;background:none;padding:9px 12px;font-size:13px;font-weight:700;color:var(--ink-faint);
    border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .sv-tab:hover{color:var(--ink)}
  .sv-tab.on{color:var(--brand-ink);border-bottom-color:var(--brand)}
  .sv-tab i{font-style:normal;font-size:11px;font-weight:800;color:var(--ink-faint);background:var(--surface-2);border-radius:999px;padding:1px 6px}
  .sv-tab.on i{background:var(--brand-tint);color:var(--brand-ink)}
  .sv-tools{margin-left:auto;display:flex;align-items:center;gap:8px;padding-bottom:7px}
  .sv-search{position:relative;display:flex;align-items:center}
  .sv-search input{width:230px;max-width:46vw;border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;
    padding:8px 30px 8px 32px;font-size:13px;color:var(--ink);outline:none}
  .sv-search input:focus{border-color:var(--brand)}
  .sv-search .mg{position:absolute;left:10px;width:14px;height:14px;color:var(--ink-faint);pointer-events:none}
  .sv-search .clr{position:absolute;right:4px;width:24px;height:24px;border:0;background:none;color:var(--ink-faint);
    border-radius:7px;font-size:15px;line-height:1;display:grid;place-items:center}
  .sv-search .clr:hover{background:var(--surface-2);color:var(--ink)}
  .sv-fbtn{border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:8px 12px;
    font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px}
  .sv-fbtn:hover{border-color:var(--brand);color:var(--ink)}
  .sv-fbtn.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-ink)}
  .sv-fbtn svg{width:14px;height:14px}
  .sv-fbtn i{font-style:normal;font-size:11px;font-weight:800;background:var(--brand);color:#fff;border-radius:999px;padding:0 5px}

  .sv-filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
    margin-bottom:14px;box-shadow:var(--shadow-sm)}
  .sv-filters .fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
  .sv-filters .fld{margin-bottom:0}
  .sv-filters .fld input,.sv-filters .fld select{padding:8px 10px;font-size:13px}
  .sv-price2{display:flex;align-items:center;gap:6px}
  .sv-price2 input{width:100%}
  .sv-price2 span{color:var(--ink-faint);font-size:12px;font-weight:700}
  .sv-fbot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);flex-wrap:wrap}
  .sv-fbot .n{font-size:12.5px;color:var(--ink-soft);font-weight:600}
  .sv-fbot .r{margin-left:auto;display:flex;gap:8px}

  /* ---- §17 строка «Категории услуг» + режим порядка ---- */
  .sv-secline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .sv-secline b{font-size:15px;font-weight:800;letter-spacing:-.01em}
  .sv-secline .qm{width:17px;height:17px;border-radius:50%;background:var(--surface-2);color:var(--ink-faint);
    border:0;font-family:inherit;font-size:11px;font-weight:800;display:grid;place-items:center;flex-shrink:0}
  .sv-secline .qm:hover{background:var(--brand-tint);color:var(--brand-ink)}
  .sv-dhint{font-size:12.5px;color:var(--ink-faint);display:inline-flex;align-items:center;gap:6px}
  .sv-dhint .gr{color:var(--brand);letter-spacing:-2px;font-weight:800}
  .sv-sortw{margin-left:auto;display:flex;align-items:center;gap:7px}
  .sv-sortw label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint)}
  .sv-sortw select{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:7px 9px;
    font-size:12.5px;font-weight:700;color:var(--ink);outline:none;font-family:inherit}
  .sv-sortw select:focus{border-color:var(--brand)}
  .sv-sortw.tmp select{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface));color:#8B5A11}
  /* §17 временная сортировка не трогает публичный порядок — предупреждаем явно */
  .sv-tmpnote{display:flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--warn) 9%,var(--surface));
    border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));border-radius:12px;padding:10px 13px;
    font-size:12.5px;color:#8B5A11;font-weight:600;margin-bottom:12px}
  .sv-tmpnote button{margin-left:auto;border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:800;
    color:var(--brand-ink);text-decoration:underline;white-space:nowrap}

  /* ---- §3 две колонки: каталог + sticky-предпросмотр ---- */
  .sv2{display:flex;gap:18px;align-items:flex-start}
  .sv-main{flex:1;min-width:0}
  .sv-side{width:310px;flex-shrink:0;position:sticky;top:calc(var(--hdr) + 16px);display:flex;flex-direction:column;gap:12px}

  /* ---- §4 блок категории ---- */
  .sv-cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;
    box-shadow:var(--shadow-sm);transition:border-color .15s ease,box-shadow .15s ease}
  .sv-cat:hover{border-color:var(--line-strong)}
  .sv-cat.hid{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 12px,var(--surface-2) 12px,var(--surface-2) 24px)}
  .sv-cat.arch{opacity:.62}
  .sv-cat.sel{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
  .sv-crow{display:flex;align-items:center;gap:13px;padding:15px 16px 15px 10px}
  /* §5 перетаскивание только за ручку: постоянный draggable съедает клики по строке */
  .sv-h{width:26px;height:38px;flex-shrink:0;border:0;background:none;border-radius:8px;color:var(--ink-faint);
    display:grid;place-items:center;cursor:grab;touch-action:none;transition:background .13s ease,color .13s ease}
  .sv-h:hover{background:var(--brand-tint);color:var(--brand-ink)}
  .sv-h:active{cursor:grabbing}
  .sv-h svg{width:15px;height:15px;pointer-events:none}
  .sv-h.off{cursor:not-allowed;opacity:.4}
  .sv-cmain{flex:1;min-width:0}
  .sv-cname{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .sv-cname b{font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
    overflow-wrap:anywhere}
  .sv-cat.hid .sv-cname b,.sv-cat.arch .sv-cname b{color:var(--ink-soft)}
  .sv-cn{font-size:11.5px;font-weight:800;color:var(--brand-ink);background:var(--brand-tint);border-radius:999px;
    padding:2px 9px;white-space:nowrap}
  .sv-cdesc{font-size:12.5px;color:var(--ink-faint);margin-top:4px;line-height:1.45;overflow-wrap:anywhere}
  .sv-pill{font-size:11.5px;font-weight:700;border-radius:999px;padding:5px 11px;white-space:nowrap;flex-shrink:0;
    border:1px solid transparent}
  .sv-pill.pub{background:color-mix(in srgb,var(--success) 13%,var(--surface));color:#1E7C57;
    border-color:color-mix(in srgb,var(--success) 30%,transparent)}
  .sv-pill.hid{background:var(--surface-2);color:var(--ink-soft);border-color:var(--line-strong)}
  .sv-pill.arch{background:color-mix(in srgb,var(--ink-faint) 14%,var(--surface));color:var(--ink-soft);border-color:var(--line-strong)}
  .sv-acts{display:flex;align-items:center;gap:2px;flex-shrink:0}
  .sv-ib{width:32px;height:32px;border:0;background:none;border-radius:9px;color:var(--ink-faint);display:grid;place-items:center}
  .sv-ib:hover{background:var(--surface-2);color:var(--ink)}
  .sv-ib.del:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
  .sv-ib svg{width:16px;height:16px;pointer-events:none}
  .sv-ib.chev svg{transition:transform .2s ease}
  .sv-cat.open .sv-ib.chev svg{transform:rotate(180deg)}
  .sv-ib[disabled]{opacity:.35;cursor:not-allowed}

  /* ---- §8 услуги внутри категории ----
     Тело категории всегда есть в DOM и прячется классом: при перетаскивании услуги
     целевую категорию можно раскрыть на лету, не перерисовывая список под курсором. */
  .sv-body{border-top:1px solid var(--line);padding:6px 12px 12px}
  .sv-cat:not(.open) > .sv-body{display:none}
  .sv-svc{display:flex;align-items:center;gap:11px;padding:9px 10px 9px 6px;border-radius:11px;
    transition:background .13s ease}
  .sv-svc+.sv-svc{border-top:1px solid var(--line)}
  .sv-svc:hover{background:var(--surface-2)}
  .sv-svc .sv-h{height:32px;width:22px}
  .sv-svc .nm{flex:1;min-width:0}
  .sv-svc .nm b{font-size:13.5px;font-weight:650;display:block;overflow-wrap:anywhere}
  .sv-svc.off .nm b{color:var(--ink-faint)}
  .sv-svc .tg{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
  .sv-mini{font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 6px;background:var(--surface-2);color:var(--ink-soft)}
  .sv-mini.w{background:color-mix(in srgb,var(--warn) 15%,var(--surface));color:#8B5A11}
  .sv-mini.g{background:color-mix(in srgb,var(--success) 13%,var(--surface));color:#1E7C57}
  .sv-mini.v{background:var(--brand-tint);color:var(--brand-ink)}
  .sv-svc .du{font-size:12.5px;color:var(--ink-soft);font-weight:600;width:74px;text-align:right;flex-shrink:0;
    white-space:nowrap;font-variant-numeric:tabular-nums}
  .sv-svc .pr{font-size:13.5px;font-weight:800;width:96px;text-align:right;flex-shrink:0;white-space:nowrap;
    font-variant-numeric:tabular-nums}
  .sv-addin{margin-top:8px;width:100%;border:1px dashed var(--line-strong);background:none;border-radius:11px;padding:9px;
    font-family:inherit;font-size:12.5px;font-weight:700;color:var(--brand-ink);display:flex;align-items:center;justify-content:center;gap:6px}
  .sv-addin:hover{border-color:var(--brand);background:var(--brand-tint)}
  .sv-gempty{padding:16px 12px;text-align:center;font-size:12.5px;color:var(--ink-faint)}
  .sv-gempty b{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:3px}

  /* ---- §5 drag & drop: призрак, точка вставки, зона «в конец» ---- */
  .sv-ghost{position:fixed;z-index:300;pointer-events:none;opacity:.95;border-radius:var(--radius);
    border:1.5px solid var(--brand);box-shadow:0 22px 46px -16px rgba(40,35,90,.42);background:var(--surface);
    overflow:hidden;transform-origin:0 0}
  .sv-ghost .sv-body,.sv-ghost .sv-addin{display:none}
  .sv-src{opacity:.34;filter:saturate(.4)}
  .sv-ph{border:1.5px dashed var(--brand);border-radius:var(--radius);background:var(--brand-tint);
    margin-bottom:10px;position:relative}
  .sv-ph.svc{border-radius:11px;margin-bottom:0;min-height:44px}
  .sv-ph::after{content:attr(data-lbl);position:absolute;inset:0;display:grid;place-items:center;
    font-size:11.5px;font-weight:800;color:var(--brand-ink);letter-spacing:.02em;padding:0 10px;text-align:center}
  body.sv-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
  .sv-cat.tgt{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
  .sv-tail{border:1.5px dashed var(--line-strong);border-radius:var(--radius);padding:20px;text-align:center;
    color:var(--ink-faint);transition:all .16s ease;margin-top:2px}
  .sv-tail b{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
  .sv-tail span{display:block;font-size:12px;margin-top:3px}
  .sv-tail svg{width:15px;height:15px}
  body.sv-dragging .sv-tail{border-color:var(--brand);color:var(--brand-ink)}
  body.sv-dragging .sv-tail.hot{background:var(--brand-tint)}
  body.sv-dragging .sv-tail b{color:var(--brand-ink)}

  /* ---- §15 предпросмотр карточки салона ---- */
  .sv-pv{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
    overflow:hidden}
  .sv-pvh{padding:13px 14px 11px;position:relative}
  .sv-pvh b{font-size:13.5px;font-weight:800;display:block;padding-right:30px}
  .sv-pvh .sub{font-size:11.5px;color:var(--ink-faint);margin-top:2px;line-height:1.4}
  /* ТЗ §8.8: явное закрытие полноэкранного листа — не полагаемся на то, что
     кнопка-тумблер «Предпросмотр» в тулбаре останется на виду (тулбар не
     sticky и уходит при скролле страницы, в отличие от rv-rail). */
  .sv-pvclose{display:none;position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;
    align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft)}
  .sv-st{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;border-radius:999px;
    padding:3px 9px;margin-top:9px;border:1px solid transparent}
  .sv-st .dt{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
  .sv-st.ok{background:color-mix(in srgb,var(--success) 13%,var(--surface));color:#1E7C57;border-color:color-mix(in srgb,var(--success) 28%,transparent)}
  .sv-st.dirty{background:var(--brand-tint);color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 26%,transparent)}
  .sv-st.saving{background:var(--surface-2);color:var(--ink-soft);border-color:var(--line-strong)}
  .sv-st.err{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:#A6303D;border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
  .sv-st.saving .dt{animation:sv-blink 1s ease-in-out infinite}
  @keyframes sv-blink{0%,100%{opacity:1}50%{opacity:.25}}

  /* «стекло» карточки клиента — визуально близко к salon.html */
  .sv-pvbox{margin:0 12px 12px;border:1px solid var(--line-strong);border-radius:14px;background:var(--bg);overflow:hidden}
  .sv-pvsal{padding:12px 13px 10px;border-bottom:1px solid var(--line)}
  .sv-pvsal .nm{font-size:13px;font-weight:800;line-height:1.3}
  .sv-pvsal .rt{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-soft);margin-top:4px;font-weight:700}
  .sv-pvsal .rt .stars{color:var(--star);letter-spacing:.5px}
  .sv-pvsal .rt .c{color:var(--ink-faint);font-weight:600}
  .sv-pvtabs{display:flex;gap:3px;padding:8px 9px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .sv-pvtabs::-webkit-scrollbar{display:none}
  .sv-pvtabs span{font-size:11px;font-weight:700;color:var(--ink-faint);padding:4px 9px;border-radius:999px;white-space:nowrap}
  .sv-pvtabs span.on{background:var(--brand-tint);color:var(--brand-ink)}
  .sv-pvlist{max-height:340px;overflow-y:auto}
  .sv-pvcat{width:100%;display:flex;align-items:center;gap:9px;padding:11px 13px;border:0;background:none;
    font-family:inherit;text-align:left;border-bottom:1px solid var(--line)}
  .sv-pvcat:hover{background:var(--surface-2)}
  .sv-pvcat .n{flex:1;min-width:0;font-size:12.5px;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
  .sv-pvcat .p{font-size:11.5px;color:var(--ink-faint);font-weight:700;white-space:nowrap}
  .sv-pvcat .cv{width:13px;height:13px;color:var(--ink-faint);flex-shrink:0;transition:transform .2s ease}
  .sv-pvcat.open{background:var(--brand-tint)}
  .sv-pvcat.open .cv{transform:rotate(180deg)}
  .sv-pvcat.open .n{color:var(--brand-ink)}
  /* §7 строка, только что переставленная перетаскиванием, мягко подсвечивается */
  .sv-pvcat.moved{animation:sv-moved 1.1s ease}
  @keyframes sv-moved{0%{background:var(--brand-tint)}100%{background:transparent}}
  .sv-pvsvcs{background:var(--surface);border-bottom:1px solid var(--line)}
  .sv-pvsvc{display:flex;align-items:baseline;gap:8px;padding:8px 13px 8px 20px;font-size:11.5px}
  .sv-pvsvc .n{flex:1;min-width:0;color:var(--ink-soft);overflow-wrap:anywhere}
  .sv-pvsvc .d{color:var(--ink-faint);white-space:nowrap;font-size:11px}
  .sv-pvsvc .p{font-weight:800;color:var(--ink);white-space:nowrap}
  .sv-pvsvc.off .n,.sv-pvsvc.off .p{color:var(--ink-faint);font-weight:600}
  .sv-pvempty{padding:22px 14px;text-align:center;font-size:12px;color:var(--ink-faint);line-height:1.5}
  .sv-pvfoot{padding:0 12px 12px}
  .sv-pvfoot .btn{width:100%}

  /* ---- §14 информационные подсказки владельцу ---- */
  .sv-info{background:linear-gradient(150deg,var(--brand-tint),var(--surface) 72%);border:1px solid var(--line-strong);
    border-radius:var(--radius);padding:13px 14px;display:flex;gap:11px}
  .sv-info .ic{width:30px;height:30px;border-radius:10px;background:var(--surface);color:var(--brand-ink);
    display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow-sm)}
  .sv-info .ic svg{width:16px;height:16px}
  .sv-info b{display:block;font-size:12.5px;color:var(--brand-ink);margin-bottom:3px}
  .sv-info p{font-size:11.5px;color:var(--ink-soft);line-height:1.5}
  .sv-tips{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;box-shadow:var(--shadow-sm)}
  .sv-tips b{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-bottom:9px}
  .sv-tips b svg{width:15px;height:15px;color:var(--warn)}
  .sv-tips ul{list-style:none;display:flex;flex-direction:column;gap:8px}
  .sv-tips li{font-size:11.5px;color:var(--ink-soft);line-height:1.5;padding-left:14px;position:relative}
  .sv-tips li::before{content:"";position:absolute;left:2px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--brand)}

  /* ---- §18 состояния ---- */
  .sv-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:36px 20px;
    text-align:center;box-shadow:var(--shadow-sm)}
  .sv-empty .ic{width:44px;height:44px;border-radius:13px;background:var(--surface-2);color:var(--ink-faint);
    display:grid;place-items:center;margin:0 auto 12px}
  .sv-empty b{font-size:15px;display:block;margin-bottom:5px}
  .sv-empty p{font-size:13px;color:var(--ink-soft);margin-bottom:14px;max-width:420px;margin-left:auto;margin-right:auto}
  .sv-empty .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

  /* ---- §12 side drawer редактора ---- */
  .sv-scrim{position:fixed;inset:0;background:rgba(17,18,36,.36);z-index:105;opacity:0;pointer-events:none;
    transition:opacity .2s ease}
  .sv-scrim.open{opacity:1;pointer-events:auto}
  .sv-dw{position:fixed;top:0;right:0;bottom:0;width:432px;max-width:96vw;background:var(--surface);
    border-left:1px solid var(--line-strong);box-shadow:-24px 0 60px rgba(24,20,60,.22);z-index:106;
    transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column}
  .sv-dw.open{transform:none}
  /* плавающая кнопка чата (.eq-fab, z-index 2400) стоит ровно над подвалом ящика */
  body.sv-dw-open .eq-fab,body.sv-dw-open .eq-pill{opacity:0;pointer-events:none}
  .sv-dw .dh{padding:15px 18px;display:flex;align-items:center;gap:10px;color:#fff;background:linear-gradient(120deg,var(--brand),#8E6FE8)}
  .sv-dw .dh b{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
  .sv-dw .dh .sb{font-size:12px;opacity:.85;font-weight:600}
  .sv-dw .dh .x{margin-left:auto;width:32px;height:32px;border:0;border-radius:9px;background:rgba(255,255,255,.18);color:#fff;font-size:17px;flex-shrink:0}
  .sv-dw .dh .x:hover{background:rgba(255,255,255,.3)}
  .sv-dw .db{padding:16px 18px;overflow-y:auto;flex:1}
  .sv-dw .dfoot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;background:var(--surface)}
  .sv-dw .dfoot .btn{flex:1}
  .sv-dw .dfoot .btn.ghost{flex:0 0 auto}
  .sv-dw .cnt{font-size:11px;color:var(--ink-faint);font-weight:600;text-align:right;margin-top:4px}
  .sv-dw .cnt.warn{color:var(--gold);font-weight:800}
  .sv-dw .cnt.over{color:var(--accent);font-weight:800}
  .sv-fullrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
  .sv-fullrow .cnt{margin-top:0}
  .sv-full-hint{font-size:11px;color:var(--ink-faint)}
  /* ---- редактор информационных блоков услуги (§7) ---- */
  .sv-blh{font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin:0 0 12px}
  .sv-bl{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
  .sv-bl.off{background:var(--surface-2)}
  .sv-blt{display:flex;align-items:flex-start;gap:11px;padding:11px 12px}
  .sv-blt .tx{flex:1;min-width:0}
  .sv-blt .tx b{font-size:13px;display:block}
  .sv-blt .tx span{font-size:11.5px;color:var(--ink-faint);line-height:1.45;display:block;margin-top:2px}
  .sv-blst{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-faint);white-space:nowrap;margin-top:4px}
  .sv-bl:not(.off) .sv-blst{color:var(--brand-ink)}
  .sv-blmv{display:flex;gap:2px;flex-shrink:0}
  .sv-blb{padding:0 12px 12px;border-top:1px solid var(--line)}
  .sv-blb .fld{margin-top:12px}
  .sv-blb textarea{min-height:64px}
  .sv-blc{font-size:11px;font-weight:600;color:var(--ink-faint);text-transform:none;letter-spacing:0}
  .sv-bli{display:flex;align-items:center;gap:5px;margin-top:6px}
  .sv-bli input{flex:1;min-width:0}
  /* §19: на планшете и телефоне у кнопок порядка должен быть палец, а не курсор */
  @media (max-width:1024px){
    .sv-blmv .sv-ib,.sv-bli .sv-ib{width:44px;height:44px}
  }
  .sv-sw{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
  .sv-sw .tx{flex:1;min-width:0}
  .sv-sw .tx b{font-size:13px;display:block}
  .sv-sw .tx span{font-size:11.5px;color:var(--ink-faint);line-height:1.45;display:block;margin-top:2px}
  .sv-tgl{position:relative;width:40px;height:23px;flex-shrink:0;border:0;border-radius:999px;background:var(--line-strong);
    transition:background .16s ease;margin-top:2px}
  .sv-tgl::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .16s ease}
  .sv-tgl.on{background:var(--brand)}
  .sv-tgl.on::after{transform:translateX(17px)}
  .sv-tgl[disabled]{opacity:.45;cursor:not-allowed}
  .sv-chips{display:flex;flex-wrap:wrap;gap:7px}
  .sv-chip{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:999px;padding:6px 12px;
    font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  .sv-chip:hover{border-color:var(--brand);color:var(--ink)}
  .sv-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .sv-warn{display:flex;gap:9px;background:color-mix(in srgb,var(--warn) 10%,var(--surface));
    border:1px solid color-mix(in srgb,var(--warn) 38%,var(--line));border-radius:12px;padding:11px 12px;
    font-size:12.5px;color:#8B5A11;line-height:1.5;margin-bottom:12px}
  .sv-warn.bad{background:color-mix(in srgb,var(--accent) 9%,var(--surface));
    border-color:color-mix(in srgb,var(--accent) 34%,var(--line));color:#A6303D}
  .sv-warn svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
  .sv-err{font-size:11.5px;font-weight:700;color:var(--accent);margin-top:5px}
  .sv-dw .fld input.bad,.sv-dw .fld textarea.bad,.sv-dw .fld select.bad{border-color:var(--accent)}

  /* ---- §5 меню перемещения (accessibility и мобильные) ---- */
  .sv-menu{position:fixed;z-index:120;background:var(--surface);border:1px solid var(--line-strong);border-radius:13px;
    box-shadow:var(--shadow-pop);padding:6px;min-width:222px;max-height:70vh;overflow-y:auto}
  .sv-menu .lb{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);
    padding:7px 10px 5px}
  .sv-menu button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;border-radius:9px;
    padding:9px 10px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);text-align:left}
  .sv-menu button:hover{background:var(--surface-2)}
  .sv-menu button[disabled]{opacity:.4;cursor:not-allowed}
  .sv-menu button.dg{color:var(--accent)}
  .sv-menu button svg{width:15px;height:15px;flex-shrink:0;color:var(--ink-faint)}
  .sv-menu button.dg svg{color:var(--accent)}
  .sv-menu hr{border:0;border-top:1px solid var(--line);margin:5px 4px}

  /* ---- §22 сводка изменения порядка в модалке подтверждения ---- */
  .sv-diff{border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-bottom:12px;background:var(--surface-2)}
  .sv-diff .r{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0}
  .sv-diff .r i{font-style:normal;width:20px;text-align:right;color:var(--ink-faint);font-weight:800;font-size:11.5px}

  /* ---- §23 responsive ---- */
  /* ТЗ §8.8: на планшете/телефоне «Как это отображается у клиентов» — не
     инлайн-блок под каталогом, а полноэкранный лист по кнопке «Предпросмотр»,
     тот же приём, что у .rv-rail/.ap-side/.cal-aside (visual positioning без
     переноса DOM-узла — svPaint() правит #sv-pv точечно, но полный render()
     тоже должен пережить это безопасно). 80vh, не 100%, — тулбар с самой
     кнопкой-тумблером остаётся на виду сверху, им же лист и закрывается. */
  @media(max-width:1099px){
    .sv2{flex-direction:column}
    .sv-side{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:120;flex-direction:column;
      max-height:80vh;overflow-y:auto;width:100%;border-radius:18px 18px 0 0;box-shadow:var(--shadow-pop);
      padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:var(--surface);
      transform:translateY(0);transition:transform .22s cubic-bezier(.22,.61,.36,1)}
    .sv-side>*{flex:1;min-width:0}
    .sv-side.hid{display:flex;transform:translateY(115%);pointer-events:none}
    .sv-pvtgl{display:inline-flex!important}
    .sv-pvclose{display:flex}
    .sv-pvlist{max-height:none}
  }
  .sv-pvtgl{display:none}
  @media(max-width:719px){
    .sv-cta{width:100%;margin-left:0}
    .sv-cta .btn{flex:1}
    .sv-tools{margin-left:0;width:100%;flex-wrap:wrap}
    .sv-search{flex:1 1 100%}
    .sv-search input{width:100%;max-width:none}
    .sv-tools .sv-fbtn{flex:1;justify-content:center}
    .sv-crow{flex-wrap:wrap;padding:13px 12px 13px 6px;gap:9px}
    .sv-cmain{flex:1 1 100%;order:2;width:100%}
    .sv-h{order:1;width:44px;height:44px}
    .sv-acts{order:3;margin-left:auto}
    .sv-pill{order:4}
    .sv-ib{width:40px;height:40px}
    .sv-svc{flex-wrap:wrap;padding:10px 8px}
    .sv-svc .nm{flex:1 1 60%;order:2}
    .sv-svc .sv-h{order:1;width:38px;height:38px}
    .sv-svc .du{order:4;width:auto;text-align:left}
    .sv-svc .pr{order:5;width:auto;margin-left:auto}
    .sv-svc .sv-acts{order:3}
    .sv-secline .sv-dhint{display:none}
    .sv-sortw{margin-left:0;width:100%}
    .sv-sortw select{flex:1}
    .sv-tab{min-height:44px}
  }

  /* ==========================================================================
     СОТРУДНИКИ · Staff Management Center
     ТЗ «ELYQO Business — модуль „Сотрудники“» v1.0 (01.09.2026), §1–§23.
     §2 макет: слева команда, в центре профиль с вкладками, справа drawer.
     Все классы с префиксом stf- — голые имена в этом файле уже заняты
     календарём, записями и услугами.
     ========================================================================== */
  main:has(.stf-root){max-width:none;padding-left:22px;padding-right:22px}

  .stf-hd{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
  .stf-hd .lede{margin-bottom:16px;max-width:620px}
  .stf-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

  /* ---- §14 поиск и фильтры ---- */
  .stf-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;position:relative}
  .stf-search{position:relative;flex:0 1 300px;min-width:200px}
  .stf-search input{width:100%;border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;
    padding:9px 32px 9px 34px;font-size:13.5px;color:var(--ink);outline:none}
  .stf-search input:focus{border-color:var(--brand)}
  .stf-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;
    color:var(--ink-faint);pointer-events:none}
  .stf-search .clr{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;
    border-radius:7px;background:var(--surface-2);color:var(--ink-soft);font-size:14px;line-height:1}
  .stf-fbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:10px;padding:9px 13px;font-size:13px;font-weight:700;color:var(--ink)}
  .stf-fbtn.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-ink)}
  .stf-fbtn .n{background:var(--brand);color:#fff;border-radius:999px;padding:0 6px;font-size:11px;min-width:17px;text-align:center}
  .stf-bar select{border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;
    padding:9px 12px;font-size:13px;font-weight:600;color:var(--ink);outline:none}
  .stf-fpop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:min(560px,94vw);background:var(--surface);
    border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-pop);padding:14px}
  .stf-fpop[hidden]{display:none}
  .stf-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
  .stf-fpop .fld{margin-bottom:0}
  .stf-fbot{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:11px;border-top:1px solid var(--line)}
  .stf-fbot .muted{margin-right:auto}

  /* ---- §2 вкладки списка ---- */
  .stf-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px}
  .stf-tab{border:0;background:none;padding:9px 14px;font-size:13.5px;font-weight:700;color:var(--ink-faint);
    border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:7px}
  .stf-tab.on{color:var(--brand-ink);border-bottom-color:var(--brand)}
  .stf-tab i{font-style:normal;font-size:11.5px;font-weight:800;background:var(--surface-2);color:var(--ink-soft);
    border-radius:999px;padding:1px 6px;min-width:18px;text-align:center}
  .stf-tab.on i{background:var(--brand-tint);color:var(--brand-ink)}

  /* ---- §2 две колонки ---- */
  .stf-2{display:grid;grid-template-columns:288px minmax(0,1fr);gap:16px;align-items:start}
  .stf-side{min-width:0;display:flex;flex-direction:column;gap:8px}
  .stf-main{min-width:0}

  /* ---- §3 карточка в списке ---- */
  .stf-c{display:flex;align-items:flex-start;gap:11px;background:var(--surface);border:1px solid var(--line);
    border-radius:14px;padding:12px;box-shadow:var(--shadow-sm);position:relative;cursor:pointer}
  .stf-c:hover{border-color:var(--line-strong)}
  .stf-c.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
  .stf-c.dim{opacity:.62}
  .stf-c.drag{opacity:.4}
  .stf-c.over{border-color:var(--brand)}
  .stf-c.over:after{content:"";position:absolute;left:8px;right:8px;top:-5px;height:3px;border-radius:3px;
    background:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
  .stf-pubord{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--ink-faint);line-height:1.4;
    padding:10px 12px;border:1px dashed var(--line-strong);border-radius:12px;margin-top:2px}
  .stf-pubord input{width:16px;height:16px;accent-color:var(--brand);flex-shrink:0;margin-top:1px}
  .stf-pubord b{display:block;font-size:12.5px;color:var(--ink);font-weight:700;margin-bottom:1px}
  .stf-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;
    color:#fff;flex-shrink:0;letter-spacing:.02em}
  .stf-c .cc{min-width:0;flex:1}
  .stf-c .nm{font-weight:700;font-size:14px;line-height:1.3;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stf-c .rl{font-size:12.5px;color:var(--ink-soft);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stf-c .rt{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink);margin-top:6px;
    border:0;background:none;padding:0;border-radius:6px}
  .stf-c button.rt:hover{color:var(--brand-ink)}
  .stf-c button.rt:hover span{color:var(--brand-ink)}
  .stf-c .rt svg{width:13px;height:13px;color:var(--star)}
  .stf-c .rt span{color:var(--ink-faint);font-weight:600}
  .stf-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
  .stf-mini{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--surface-2);
    color:var(--ink-soft);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stf-c .sch{font-size:11.5px;color:var(--ink-faint);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stf-c .rr{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
  .stf-st{font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;white-space:nowrap}
  .stf-st.active{background:#E4F6EC;color:#2E7A55}
  .stf-st.inactive{background:var(--surface-2);color:var(--ink-soft)}
  .stf-st.archived{background:#F6E9E9;color:#A83A50}
  .stf-kebab{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--ink-faint);
    font-size:15px;line-height:1;display:grid;place-items:center}
  .stf-kebab:hover{background:var(--surface-2);color:var(--ink)}
  .stf-hnd{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;padding-top:2px}
  .stf-grip{width:20px;height:22px;border:0;background:none;color:var(--line-strong);
    cursor:grab;font-size:14px;line-height:1;display:grid;place-items:center}
  .stf-c:hover .stf-grip{color:var(--ink-faint)}
  .stf-grip:active{cursor:grabbing}
  .stf-ord{display:flex;flex-direction:column;gap:2px}
  .stf-ord button{width:20px;height:15px;border:0;border-radius:5px;background:var(--surface-2);color:var(--ink-soft);
    font-size:8px;line-height:1;display:grid;place-items:center}
  .stf-ord button:hover:not(:disabled){background:var(--brand-tint);color:var(--brand-ink)}
  .stf-ord button:disabled{opacity:.3}
  .stf-drop{border:1.5px dashed var(--brand);border-radius:14px;height:64px;background:var(--brand-tint)}
  .stf-hint .stf-ic{flex-shrink:0;margin-top:1px}
  .stf-hint{display:flex;gap:9px;align-items:flex-start;background:var(--brand-tint);border:1px solid #DCD2FA;
    border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--brand-ink);line-height:1.45}
  .stf-hint button{margin-left:auto;border:0;background:none;color:var(--brand-ink);font-weight:800;font-size:15px;line-height:1}

  /* ---- §2 карточка профиля ---- */
  .stf-p{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
  .stf-ph{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;flex-wrap:wrap}
  .stf-ph .stf-av{width:48px;height:48px;font-size:15px}
  .stf-ph .id{min-width:0;flex:1}
  .stf-ph h2{font-size:18px;letter-spacing:-.01em;line-height:1.25;margin:0}
  .stf-ph .sub{font-size:13px;color:var(--ink-soft);margin-top:2px}
  .stf-ph .rr{margin-left:auto;display:flex;align-items:center;gap:8px}
  .stf-ph select{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:7px 10px;
    font-size:12.5px;font-weight:700;color:var(--ink);outline:none}
  .stf-ph select.active{border-color:#B6E2CB;background:#EDFAF2;color:#2E7A55}
  .stf-contacts{display:flex;gap:18px;flex-wrap:wrap;padding:0 18px 14px;font-size:13px;color:var(--ink-soft)}
  .stf-contacts a,.stf-contacts span{display:inline-flex;align-items:center;gap:7px}
  .stf-contacts svg{width:15px;height:15px;color:var(--ink-faint)}
  .stf-ptabs{display:flex;gap:2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 10px;
    overflow-x:auto;scrollbar-width:none}
  .stf-ptabs::-webkit-scrollbar{display:none}
  .stf-ptabs .stf-tab{white-space:nowrap;flex:0 0 auto}
  .stf-pbody{padding:18px}

  /* ---- §6 редактор расписания ---- */
  .stf-sh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .stf-sh b{font-size:15px}
  .stf-tz{font-size:12.5px;color:var(--ink-faint);display:flex;align-items:center;gap:6px}
  .stf-seg{margin-left:auto;display:inline-flex;background:var(--surface-2);border:1px solid var(--line-strong);
    border-radius:10px;padding:2px;gap:2px}
  .stf-seg button{border:0;background:none;border-radius:8px;padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  .stf-seg button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .stf-days{display:flex;flex-direction:column;gap:8px}
  .stf-d{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
  .stf-d.off{background:var(--surface-2)}
  .stf-d.today{border-color:#DCD2FA}
  .stf-drow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .stf-dn{flex:0 0 118px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
  .stf-d.off .stf-dn{color:var(--ink-faint)}
  .stf-iv{display:flex;align-items:center;gap:7px}
  .stf-iv input[type=time]{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
    padding:6px 8px;font-size:13px;font-weight:700;color:var(--ink);outline:none;width:98px}
  .stf-iv input[type=time]:focus{border-color:var(--brand)}
  .stf-iv .dash{color:var(--ink-faint);font-weight:700}
  .stf-iv .del{width:24px;height:24px;border:0;border-radius:7px;background:var(--surface-2);color:var(--ink-soft);font-size:13px;line-height:1}
  .stf-brk{font-size:12.5px;color:var(--ink-soft)}
  .stf-brk.none{color:var(--ink-faint)}
  .stf-dact{margin-left:auto;display:flex;align-items:center;gap:6px}
  .stf-ib{width:30px;height:30px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);
    color:var(--ink-soft);display:grid;place-items:center}
  .stf-ib:hover{border-color:var(--brand);color:var(--brand-ink)}
  .stf-ib svg{width:15px;height:15px}
  .stf-ib:disabled{opacity:.4;cursor:not-allowed}
  .stf-sw{width:38px;height:22px;border-radius:999px;border:0;background:var(--line-strong);position:relative;
    flex-shrink:0;transition:background .15s}
  .stf-sw:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
  .stf-sw.on{background:var(--brand)}
  .stf-sw.on:after{transform:translateX(16px)}
  .stf-more{display:flex;gap:10px;margin-top:8px;padding-left:128px;flex-wrap:wrap}
  .stf-add-iv{border:0;background:none;color:var(--brand-ink);font-size:12.5px;font-weight:700;padding:0}
  .stf-dayoff{font-size:13px;color:var(--ink-faint);font-weight:600}
  .stf-sfoot{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
  .stf-sfoot .muted{margin-right:auto}

  /* ---- §7 исключения ---- */
  .stf-ex{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
  .stf-exc{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface-2);
    border-radius:999px;padding:6px 8px 6px 12px;font-size:12.5px;font-weight:600;color:var(--ink)}
  .stf-exc b{font-weight:800}
  .stf-exc .x{width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:var(--ink-faint);font-size:12px;line-height:1}
  .stf-exc .x:hover{background:var(--line-strong);color:var(--ink)}
  .stf-exc.work{background:#EDFAF2;border-color:#B6E2CB;color:#2E7A55}
  .stf-exc.hours{background:#FFF3E4;border-color:#F3D3AC;color:#A8541D}
  .stf-exl{display:flex;flex-direction:column;gap:8px}
  .stf-exr{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;flex-wrap:wrap}
  .stf-exr .t{font-weight:700;font-size:13.5px;flex:0 0 190px}
  .stf-exr .d{font-size:13px;color:var(--ink-soft)}
  .stf-exr .n{font-size:12.5px;color:var(--ink-faint);flex:1;min-width:120px}
  .stf-exr .a{margin-left:auto;display:flex;gap:6px}

  /* ---- §6 месяц ---- */
  .stf-mo{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
  .stf-mo .hd{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);
    text-align:center;padding:4px 0}
  .stf-mc{border:1px solid var(--line);border-radius:10px;padding:6px;min-height:62px;text-align:left;background:var(--surface);
    display:flex;flex-direction:column;gap:3px}
  .stf-mc .dd{font-size:12px;font-weight:800;color:var(--ink-soft)}
  .stf-mc .hh{font-size:10.5px;font-weight:700;color:var(--ink)}
  .stf-mc .tg{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--brand-ink)}
  .stf-mc.off{background:var(--surface-2)}
  .stf-mc.off .hh{color:var(--ink-faint);font-weight:600}
  .stf-mc.ex{border-color:#F3D3AC;background:#FFFBF5}
  .stf-mc.exoff{border-color:#E8C7CE;background:#FDF6F7}
  .stf-mc.exon{border-color:#B6E2CB;background:#F4FCF7}
  .stf-mc.pad{border-style:dashed;opacity:.45}
  .stf-mc.tod{box-shadow:0 0 0 2px var(--brand-tint)}
  .stf-mnav{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .stf-mnav b{font-size:14px;min-width:150px;text-align:center}

  /* ---- §5 selector услуг ---- */
  .stf-sv{border:1px solid var(--line-strong);border-radius:13px;background:var(--surface);overflow:hidden}
  .stf-svh{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--surface-2);cursor:pointer}
  .stf-svh b{font-size:13.5px}
  .stf-svh .lnk{margin-left:auto;border:0;background:none;color:var(--brand-ink);font-size:12.5px;font-weight:700}
  .stf-svh .cv{width:20px;height:20px;display:grid;place-items:center;color:var(--ink-faint);transition:transform .15s}
  .stf-svh.open .cv{transform:rotate(180deg)}
  .stf-svsel{display:flex;flex-wrap:wrap;gap:6px;padding:11px 13px;border-bottom:1px solid var(--line)}
  .stf-svsel:empty{display:none}
  .stf-svc{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--surface-2);
    border-radius:8px;padding:4px 5px 4px 9px;font-size:12px;font-weight:600;color:var(--ink);max-width:100%}
  .stf-svc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stf-svc .x{width:18px;height:18px;border:0;border-radius:5px;background:transparent;color:var(--ink-faint);font-size:11px;line-height:1;flex-shrink:0}
  .stf-svc .x:hover{background:var(--line-strong);color:var(--ink)}
  .stf-svbody[hidden]{display:none}
  .stf-svq{padding:10px 13px;border-bottom:1px solid var(--line);position:relative}
  .stf-svq input{width:100%;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:9px;
    padding:8px 10px 8px 32px;font-size:13px;outline:none;color:var(--ink)}
  .stf-svq input:focus{border-color:var(--brand)}
  .stf-svq svg{position:absolute;left:23px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--ink-faint)}
  .stf-svlist{max-height:300px;overflow-y:auto}
  .stf-svgrp{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);
    padding:9px 13px 5px;background:var(--surface);position:sticky;top:0}
  .stf-svr{display:flex;align-items:center;gap:10px;padding:7px 13px;cursor:pointer;font-size:13.5px}
  .stf-svr:hover{background:var(--surface-2)}
  .stf-svr.on{background:#FAF8FF}
  .stf-svr input{width:16px;height:16px;flex-shrink:0;accent-color:var(--brand)}
  .stf-svr .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stf-svr .m{font-size:12px;color:var(--ink-faint);white-space:nowrap;font-weight:600}
  .stf-svr.gone{opacity:.55}
  .stf-svfoot{display:flex;align-items:center;gap:12px;padding:10px 13px;border-top:1px solid var(--line)}
  .stf-svfoot .lnk{border:0;background:none;color:var(--brand-ink);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
  .stf-svempty{padding:20px 13px;text-align:center;color:var(--ink-faint);font-size:13px}
  .stf-mode{display:flex;flex-direction:column;gap:8px;margin-bottom:13px}
  .stf-mr{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer}
  .stf-mr.on{border-color:var(--brand);background:var(--brand-tint)}
  .stf-mr input{margin-top:2px;width:16px;height:16px;accent-color:var(--brand);flex-shrink:0}
  .stf-mr b{font-size:13.5px;display:block}
  .stf-mr i{font-style:normal;font-size:12.5px;color:var(--ink-soft);display:block;margin-top:1px}

  /* ---- §9–§10 права ---- */
  .stf-pm{display:flex;flex-direction:column;gap:6px}
  .stf-pr{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--line);border-radius:11px;padding:10px 12px}
  .stf-pr.on{border-color:#DCD2FA;background:#FBFAFF}
  .stf-pr input{margin-top:2px;width:16px;height:16px;accent-color:var(--brand);flex-shrink:0}
  .stf-pr b{font-size:13.5px;display:block}
  .stf-pr i{font-style:normal;font-size:12.5px;color:var(--ink-soft);display:block;margin-top:1px}
  .stf-pr .ovf{margin-left:auto;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--brand-ink);background:var(--brand-tint);border-radius:6px;padding:2px 7px;white-space:nowrap}
  .stf-diff{border:1px solid var(--line-strong);border-radius:11px;padding:11px 13px;margin:12px 0;font-size:13px}
  .stf-diff .r{display:flex;gap:8px;align-items:flex-start;margin-top:5px}
  .stf-diff .r i{font-style:normal;font-weight:800;flex-shrink:0}
  .stf-diff .r.add i{color:#2E7A55}
  .stf-diff .r.rem i{color:#A83A50}
  .stf-rt{width:100%;border-collapse:collapse;font-size:13px}
  .stf-rt th,.stf-rt td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left}
  .stf-rt th{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
  .stf-rt td.c,.stf-rt th.c{text-align:center;width:96px}
  .stf-rt input{width:16px;height:16px;accent-color:var(--brand)}
  .stf-rt tr.lock td{background:var(--surface-2)}
  .stf-log{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-soft)}
  .stf-log div{display:flex;gap:9px;padding:6px 0;border-bottom:1px dashed var(--line)}
  .stf-log time{color:var(--ink-faint);flex:0 0 118px;font-size:12px}

  /* ---- §18 состояния ---- */
  .stf-empty{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);
    padding:40px 24px;text-align:center}
  .stf-empty b{font-size:16px;display:block;margin-bottom:6px}
  .stf-empty p{color:var(--ink-soft);font-size:13.5px;max-width:400px;margin:0 auto 16px}
  .stf-warn{display:flex;gap:10px;align-items:flex-start;background:#FFF6EC;border:1px solid #F3D3AC;border-radius:12px;
    padding:11px 13px;font-size:13px;color:#8A4A13;line-height:1.45;margin-bottom:12px}
  .stf-warn svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
  .stf-deny{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px;padding:14px;
    font-size:13px;color:var(--ink-soft)}
  .stf-cfl{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;margin:12px 0}
  .stf-cfl .r{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px}
  .stf-cfl .r b{flex:0 0 128px}
  .stf-cfl .r i{font-style:normal;margin-left:auto;font-size:12px;color:#A8541D;background:#FFF3E4;border-radius:6px;padding:2px 7px}
  .stf-save{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-faint)}
  .stf-save.ok{color:#2E7A55}
  .stf-save.err{color:var(--accent)}
  .stf-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}

  /* ---- §2 drawer ---- */
  .stf-dw{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:96vw;background:var(--surface);
    border-left:1px solid var(--line-strong);box-shadow:var(--shadow-pop);z-index:90;display:flex;flex-direction:column;
    transform:translateX(102%);transition:transform .2s ease}
  .stf-dw.open{transform:none}
  .stf-dwh{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
  .stf-dwh b{font-size:15px}
  .stf-dwh .x{margin-left:auto;width:30px;height:30px;border:0;border-radius:8px;background:var(--surface-2);
    color:var(--ink-soft);font-size:16px;line-height:1}
  .stf-dwb{padding:16px 18px;overflow-y:auto;flex:1}
  .stf-dwf{display:flex;gap:10px;padding:13px 18px;border-top:1px solid var(--line);background:var(--surface)}
  .stf-dwf .btn{flex:1}
  .stf-mask{position:fixed;inset:0;background:rgba(6,5,16,.34);z-index:89;opacity:0;pointer-events:none;transition:opacity .2s}
  .stf-mask.open{opacity:1;pointer-events:auto}
  .stf-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin:18px 0 8px}
  .stf-sec:first-child{margin-top:0}
  .stf-note{font-size:12.5px;color:var(--ink-soft);margin:-4px 0 10px;line-height:1.45}


  /* ==========================================================================
     СОТРУДНИКИ · ТЗ «Раздел „Сотрудники“ — премиальная панель управления»
     Светлая инфографика вместо таблиц (§1). Цвет — носитель смысла: пастельная
     лавандовая шкала для загрузки, красный только для конфликтов (§5).
     ========================================================================== */
  .stf-root{
    --stf-l0:#F1F0F8;  /* 0–25 % свободно      */
    --stf-l1:#DFE2FA;  /* 25–50 % низкая       */
    --stf-l2:#C6C7F8;  /* 50–75 % нормальная   */
    --stf-l3:#AAA4F4;  /* 75–90 % высокая      */
    --stf-l4:#8F84EF;  /* 90–100 % почти полная*/
    --stf-work:#EDEAFF;
    --stf-book:#7D6DFF;
    --stf-brk:#DFE0EA;
    --stf-off:#F6F6FA;
  }

  /* ---- §2A верхняя командная панель ---- */
  .stf-cmd{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow-sm);margin-bottom:14px}
  .stf-k{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 168px;padding:2px 0}
  .stf-k+.stf-k{border-left:1px solid var(--line);padding-left:14px}
  .stf-k .kb{min-width:0}
  .stf-k .kv{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15;display:block}
  .stf-k .kl{font-size:11.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.045em;display:block}
  .stf-k .kh{font-size:12px;color:var(--ink-soft);display:block;margin-top:2px}
  .stf-scope{margin-left:auto;display:flex;align-items:center;align-self:center;gap:2px;background:var(--surface-2);
    border-radius:11px;padding:3px}
  .stf-scope button{border:0;background:none;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:700;
    color:var(--ink-soft);min-height:36px}
  .stf-scope button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}

  /* ---- инфографика: кольцо, спарклайн, столбцы, тепловая карта ---- */
  .stf-ring{flex-shrink:0;display:block}
  .stf-ring .rn{font-size:15px;font-weight:800;fill:var(--ink)}
  .stf-ring .rs{font-size:8.5px;font-weight:700;fill:var(--ink-faint)}
  .stf-ring.sm .rn{font-size:19px}
  .stf-ring.lg .rn{font-size:26px}
  .stf-ring.lg .rs{font-size:9.5px}
  .stf-spark{display:block;width:96px;height:28px;overflow:visible}
  .stf-cw{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px;
    box-shadow:var(--shadow-sm);min-width:0}
  .stf-cw>h4{font-size:13.5px;font-weight:800;margin-bottom:2px;display:flex;align-items:center;gap:8px}
  .stf-cw>h4 .hint{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-faint)}
  .stf-cw>.sub{font-size:12.5px;color:var(--ink-soft);margin-bottom:11px}
  .stf-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
  .stf-ax{font-size:9.5px;font-weight:700;fill:var(--ink-faint)}
  .stf-gl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
  .stf-hit{fill:transparent;cursor:crosshair}
  .stf-lin{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
  .stf-dt{fill:var(--brand)}
  .stf-tip{position:fixed;z-index:200;background:#1B1B2E;color:#fff;border-radius:9px;padding:7px 10px;
    font-size:12px;font-weight:600;line-height:1.4;max-width:280px;pointer-events:none;box-shadow:var(--shadow-pop);
    white-space:pre-line}
  .stf-tip[hidden]{display:none}
  .stf-lgd{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:10px;font-size:12px;color:var(--ink-soft)}
  .stf-lgd span{display:inline-flex;align-items:center;gap:6px}
  .stf-lgd i{width:10px;height:10px;border-radius:3px;flex-shrink:0;display:inline-block}
  .stf-fb{font-size:12px;color:var(--ink-faint);margin-top:8px;line-height:1.45}

  /* ---- §2D контекстная колонка ---- */
  .stf-rail{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;min-width:0}
  .stf-rail .stf-cw{padding:13px 14px}
  .stf-rl{display:flex;align-items:baseline;gap:8px;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
  .stf-rl:last-child{border-bottom:0}
  .stf-rl b{margin-left:auto;font-weight:800;white-space:nowrap}
  .stf-rl span{color:var(--ink-soft);min-width:0}

  /* ---- §3 мини-кольцо загрузки в карточке ---- */
  .stf-cload{display:flex;align-items:center;gap:9px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
  .stf-cload .tx{min-width:0;font-size:11.5px;line-height:1.35;color:var(--ink-faint)}
  .stf-cload .tx b{display:block;font-size:12.5px;color:var(--ink);font-weight:800}

  /* ---- §4 timeline рабочего дня ---- */
  .stf-tlw{flex:1 1 260px;min-width:0}
  .stf-tl{display:block;width:100%;height:38px}
  .stf-tl .bg{fill:var(--stf-off)}
  .stf-tl .wk{fill:var(--stf-work)}
  .stf-tl .bk{fill:var(--stf-book)}
  .stf-tl .bp{fill:#B7AEFF}
  .stf-tl .br{fill:none;stroke:var(--stf-brk);stroke-width:6;stroke-dasharray:3 3}
  .stf-tl .ab{fill:#FBE9EE}
  .stf-tl .tk{stroke:#DCDAE8;stroke-width:1}
  .stf-tl .hr{font-size:8px;font-weight:700;fill:var(--ink-faint)}
  .stf-tl .now{stroke:var(--accent);stroke-width:1.6}
  .stf-drow{gap:12px}
  .stf-dhead{flex:0 0 150px;min-width:0}
  .stf-dhead .dnm{font-size:13.5px;font-weight:800;display:block}
  .stf-dhead .dtx{font-size:11.5px;color:var(--ink-soft);display:block;margin-top:1px}
  .stf-dpct{display:flex;align-items:center;gap:8px;flex:0 0 auto}
  .stf-dpct .tx{font-size:11px;color:var(--ink-faint);line-height:1.3;white-space:nowrap}
  .stf-dpct .tx b{display:block;font-size:12.5px;color:var(--ink);font-weight:800}
  .stf-dedit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 0 2px;margin-top:8px;
    border-top:1px dashed var(--line)}
  .stf-dedit .lb{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.045em;color:var(--ink-faint)}

  /* ---- §5 месячная heatmap ---- */
  .stf-mlgd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0;font-size:12px;color:var(--ink-soft)}
  .stf-mlgd .sc{display:inline-flex;align-items:center;gap:3px}
  .stf-mlgd .sc i{width:22px;height:11px;border-radius:3px;border:1px solid rgba(20,18,50,.06)}
  .stf-mc .ld{display:block;font-size:11px;font-weight:800;color:var(--ink);margin-top:auto}
  .stf-mc.h0{background:var(--stf-l0)}
  .stf-mc.h1{background:var(--stf-l1)}
  .stf-mc.h2{background:var(--stf-l2)}
  .stf-mc.h3{background:var(--stf-l3)}
  .stf-mc.h4{background:var(--stf-l4)}
  .stf-mc.h3 .dd,.stf-mc.h4 .dd,.stf-mc.h3 .ld,.stf-mc.h4 .ld,.stf-mc.h3 .hh,.stf-mc.h4 .hh{color:#fff}

  /* ---- §6 drawer услуг ---- */
  .stf-sd{position:fixed;top:0;right:0;bottom:0;width:min(880px,96vw);background:var(--surface);z-index:120;
    display:flex;flex-direction:column;box-shadow:var(--shadow-pop);border-left:1px solid var(--line-strong);
    transform:translateX(102%);transition:transform .22s ease}
  .stf-sd.open{transform:none}
  .stf-sdh{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .stf-sdh b{font-size:15.5px}
  .stf-sdh .cnt{font-size:12.5px;font-weight:700;color:var(--brand-ink);background:var(--brand-tint);
    border-radius:999px;padding:3px 11px}
  .stf-sdh .x{margin-left:auto;width:34px;height:34px;border:0;border-radius:9px;background:var(--surface-2);
    color:var(--ink-soft);font-size:17px;line-height:1}
  .stf-sdq{display:flex;align-items:center;gap:8px;padding:11px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .stf-sdq .wrap{position:relative;flex:1 1 240px;min-width:0}
  .stf-sdq input{width:100%;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:10px;
    padding:9px 12px 9px 34px;font-size:13.5px;outline:none;color:var(--ink);min-height:40px}
  .stf-sdq input:focus{border-color:var(--brand);background:var(--surface)}
  .stf-sdq .wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-faint)}
  .stf-sdq .lnk{border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:9px 13px;
    font-size:12.5px;font-weight:700;color:var(--brand-ink);min-height:40px}
  .stf-sdb{flex:1;min-height:0;display:grid;grid-template-columns:246px minmax(0,1fr)}
  .stf-sdc{border-right:1px solid var(--line);overflow-y:auto;background:var(--surface-2);padding:8px}
  .stf-sdcr{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;border-radius:10px;
    padding:9px 10px;text-align:left;font-size:13px;font-weight:700;color:var(--ink);min-height:42px}
  .stf-sdcr:hover{background:var(--surface)}
  .stf-sdcr.on{background:var(--surface);box-shadow:var(--shadow-sm);color:var(--brand-ink)}
  .stf-sdcr .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stf-sdcr .n{font-size:11.5px;font-weight:800;color:var(--ink-faint);background:var(--surface-2);
    border-radius:999px;padding:1px 7px;flex-shrink:0}
  .stf-sdcr.on .n{background:var(--brand-tint);color:var(--brand-ink)}
  .stf-sdcr .cb{width:17px;height:17px;accent-color:var(--brand);flex-shrink:0}
  .stf-sdl{overflow-y:auto;padding:6px 0}
  .stf-sdgh{display:flex;align-items:center;gap:10px;padding:11px 18px 7px;position:sticky;top:0;background:var(--surface);z-index:2}
  .stf-sdgh b{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)}
  .stf-sdgh .lnk{margin-left:auto;border:0;background:none;color:var(--brand-ink);font-size:12px;font-weight:700}
  .stf-sdr{display:flex;align-items:center;gap:12px;padding:9px 18px;font-size:13.5px;border-bottom:1px solid var(--line)}
  .stf-sdr:hover{background:#FBFAFF}
  .stf-sdr.on{background:#F8F6FF}
  .stf-sdr.gone{opacity:.5}
  .stf-sdr>input{width:17px;height:17px;accent-color:var(--brand);flex-shrink:0}
  .stf-sdr .nm{flex:1;min-width:0}
  .stf-sdr .nm b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stf-sdr .nm i{font-style:normal;font-size:11.5px;color:var(--ink-faint)}
  .stf-sdr .mt{font-size:12.5px;color:var(--ink-soft);font-weight:600;white-space:nowrap;text-align:right;flex:0 0 108px}
  .stf-sdr .on-tg{flex:0 0 auto}
  .stf-sdf{display:flex;align-items:center;gap:10px;padding:13px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
  .stf-sdf .muted{margin-right:auto}
  .stf-svsum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface-2);
    border:1px solid var(--line-strong);border-radius:14px;padding:14px 15px}
  .stf-svsum .bignum{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1}
  .stf-svsum .bignum i{font-style:normal;font-size:13px;font-weight:700;color:var(--ink-faint)}

  /* ---- §7/§8 статистика ---- */
  .stf-per{display:flex;align-items:center;gap:2px;background:var(--surface-2);border-radius:11px;padding:3px;flex-wrap:wrap}
  .stf-per button{border:0;background:none;border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:700;
    color:var(--ink-soft);min-height:34px}
  .stf-per button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .stf-kpi{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));margin-bottom:12px}
  .stf-kc{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:13px 14px;
    box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:7px;min-height:128px}
  .stf-kc .kl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.045em;color:var(--ink-faint)}
  .stf-kc .kv{font-size:23px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
  .stf-kc .kx{font-size:12px;color:var(--ink-soft);line-height:1.4;margin-top:auto}
  .stf-kc .viz{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto}
  .stf-d{font-style:normal;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 8px;display:inline-block}
  .stf-d.up{color:#2E7A55;background:#E7F6EE}
  .stf-d.down{color:#A83A50;background:#FDECEF}
  .stf-d.flat{color:var(--ink-faint);background:var(--surface-2)}
  .stf-hm{display:grid;grid-template-columns:34px repeat(var(--stf-cols,12),minmax(0,1fr));gap:3px;align-items:center}
  .stf-hm .rl{font-size:11px;font-weight:700;color:var(--ink-faint)}
  .stf-hm .cl{font-size:9.5px;font-weight:700;color:var(--ink-faint);text-align:center}
  .stf-hm .cel{height:22px;border-radius:4px;background:var(--stf-l0);border:0;padding:0;display:block;width:100%}
  .stf-hm .cel.h1{background:var(--stf-l1)}
  .stf-hm .cel.h2{background:var(--stf-l2)}
  .stf-hm .cel.h3{background:var(--stf-l3)}
  .stf-hm .cel.h4{background:var(--stf-l4)}
  .stf-hm .cel.nul{background:repeating-linear-gradient(45deg,#FAFAFC,#FAFAFC 3px,#F0F0F6 3px,#F0F0F6 6px)}
  .stf-bars{display:flex;flex-direction:column;gap:9px}
  .stf-br{display:grid;grid-template-columns:minmax(76px,1.15fr) minmax(56px,2fr) auto;gap:10px;align-items:center;font-size:13px}
  .stf-br .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
  .stf-br .nm em{font-style:normal;color:var(--ink-faint);font-weight:600}
  .stf-br .tr{position:relative;height:22px;background:var(--surface-2);border-radius:7px;overflow:hidden}
  .stf-br .fl{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:var(--brand)}
  .stf-br .tg{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink-faint);border-radius:2px}
  .stf-br .vl{font-weight:800;white-space:nowrap;font-size:12.5px}
  .stf-br .vl em{font-style:normal;font-weight:600;color:var(--ink-faint);margin-left:5px}
  .stf-br.me .nm{color:var(--brand-ink);font-weight:800}
  .stf-tt{width:100%;border-collapse:collapse;font-size:13px}
  .stf-tt th,.stf-tt td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:right;white-space:nowrap}
  .stf-tt th:first-child,.stf-tt td:first-child{text-align:left;white-space:normal}
  .stf-tt th{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
  .stf-tt tr.me td{background:#FBFAFF}
  .stf-tt tbody tr:hover td{background:var(--surface-2)}

  /* ---- §2 «Обзор» ---- */
  .stf-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(120deg,#F7F5FF 0%,#FDF6FC 100%);
    border:1px solid var(--line-strong);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px}
  .stf-hero .txt{min-width:0;flex:1 1 220px}
  .stf-hero .txt b{font-size:15px;display:block}
  .stf-hero .txt p{font-size:13px;color:var(--ink-soft);margin-top:3px;line-height:1.45}
  .stf-wk{display:flex;gap:6px;align-items:flex-end}
  .stf-wk .c{flex:1;min-width:0;text-align:center}
  /* ТЗ §8.9: инфографика дня — горизонтальная прокрутка при фиксированной
     высоте, а не сжатие семи колонок в кашу на узком экране */
  @media(max-width:639px){
    .stf-wk{overflow-x:auto;gap:10px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
    .stf-wk .c{flex:0 0 40px;min-width:40px}
  }
  .stf-wk .bar{height:56px;background:var(--surface-2);border-radius:6px;position:relative;overflow:hidden;display:block}
  .stf-wk .bar i{position:absolute;left:0;right:0;bottom:0;background:var(--brand);opacity:.85;display:block}
  .stf-wk .bar.today{outline:2px solid var(--brand);outline-offset:1px}
  .stf-wk .bar.nul{background:repeating-linear-gradient(45deg,#FAFAFC,#FAFAFC 3px,#F0F0F6 3px,#F0F0F6 6px)}
  .stf-wk .dl{font-size:10.5px;font-weight:700;color:var(--ink-faint);display:block;margin-top:4px}
  .stf-wk .dv{font-size:11px;font-weight:800;display:block}
  .stf-ap{display:flex;flex-direction:column;gap:5px}
  .stf-ap .r{display:flex;align-items:center;gap:10px;font-size:13px;padding:7px 9px;border-radius:10px;background:var(--surface-2)}
  .stf-ap .r time{font-weight:800;flex:0 0 46px}
  .stf-ap .r .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stf-ap .r .sv{color:var(--ink-faint);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 30%}
  .stf-qa{display:flex;gap:8px;flex-wrap:wrap}

  /* ---- §9 матрица прав с уровнями ---- */
  .stf-lv{display:flex;flex-direction:column;gap:7px}
  .stf-lr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
    border:1px solid var(--line);border-radius:12px;padding:10px 12px}
  .stf-lr.ovr{border-color:#DCD2FA;background:#FBFAFF}
  .stf-lr .tt b{font-size:13.5px;display:block}
  .stf-lr .tt i{font-style:normal;font-size:12.5px;color:var(--ink-soft);display:block;margin-top:1px}
  .stf-lr .tt .ovf{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--brand-ink);background:var(--brand-tint);border-radius:6px;padding:1px 7px;margin-top:5px}
  .stf-seg4{display:flex;gap:2px;background:var(--surface-2);border-radius:10px;padding:3px;flex-shrink:0}
  .stf-seg4 button{border:0;background:none;border-radius:8px;padding:7px 11px;font-size:12px;font-weight:700;
    color:var(--ink-faint);min-height:34px;white-space:nowrap}
  .stf-seg4 button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .stf-seg4 button:disabled{opacity:.45}
  .stf-seg4 button.on.l0{color:var(--ink-soft)}
  .stf-rt .lvsel{width:100%;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
    padding:6px 7px;font-size:12px;font-weight:700;color:var(--ink);min-height:36px}

  /* ---- §2E / §10 sticky actions ---- */
  .stf-sticky{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--brand);border-radius:14px;padding:11px 14px;margin-top:14px;
    box-shadow:0 -6px 24px rgba(40,35,90,.10)}
  .stf-sticky .st{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--brand-ink)}
  .stf-sticky .st .stf-dot{background:var(--brand);animation:stfPulse 1.6s infinite}
  .stf-sticky .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
  @keyframes stfPulse{0%,100%{opacity:1}50%{opacity:.35}}
  .btn.busy{position:relative;color:transparent !important;pointer-events:none}
  .btn.busy:after{content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
    border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:stfSpin .7s linear infinite}
  .btn.ghost.busy:after{border-color:rgba(91,76,255,.3);border-top-color:var(--brand)}
  @keyframes stfSpin{to{transform:rotate(360deg)}}

  /* §11 доступность: ни один интерактивный элемент модуля не меньше 40×40 на touch */
  @media(pointer:coarse){
    .stf-root button:not(.stf-grip):not(.x):not(.del),
    .stf-root select,.stf-root input[type=time]{min-height:40px}
  }
  @media(min-width:1440px){
    .stf-2.rail{grid-template-columns:280px minmax(0,1fr) 304px}
    .stf-2.rail>.stf-rail{grid-column:3;grid-row:1;position:sticky;top:72px}
  }
  @media(max-width:1280px){
    .stf-2{grid-template-columns:272px minmax(0,1fr)}
    .stf-dhead{flex:0 0 128px}
  }
  @media(max-width:1180px){
    .stf-sdb{grid-template-columns:200px minmax(0,1fr)}
  }
  @media(max-width:860px){
    .stf-cmd{padding:12px}
    .stf-k{flex:1 1 128px}
    .stf-k+.stf-k{border-left:0;padding-left:0}
    .stf-scope{margin-left:0;width:100%}
    .stf-scope button{flex:1}
    .stf-sdb{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
    .stf-sdc{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;padding:8px}
    .stf-sdcr{width:auto;flex:0 0 auto;white-space:nowrap}
    .stf-sdcr .nm{overflow:visible}
    .stf-dhead{flex:1 1 100%}
    .stf-tlw{flex:1 1 100%}
    .stf-dpct{width:100%}
    .stf-lr{grid-template-columns:minmax(0,1fr)}
    .stf-seg4{overflow-x:auto}
    .stf-seg4 button{flex:1}
    .stf-br{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm vl" "tr tr"}
    .stf-br .nm{grid-area:nm}
    .stf-br .vl{grid-area:vl}
    .stf-br .tr{grid-area:tr}
  }

  /* ---- §19 responsive ---- */
  @media(max-width:1180px){
    .stf-2{grid-template-columns:296px minmax(0,1fr)}
    .stf-dn{flex:0 0 96px}
    .stf-more{padding-left:106px}
  }
  @media(max-width:980px){
    .stf-2{grid-template-columns:minmax(0,1fr)}
    .stf-2.has-sel .stf-side{display:none}
    .stf-2:not(.has-sel) .stf-main{display:none}
    .stf-back{display:inline-flex !important}
  }
  .stf-back{display:none;align-items:center;gap:7px;border:0;background:none;color:var(--brand-ink);
    font-size:13px;font-weight:700;padding:0 0 10px}
  @media(max-width:720px){
    main:has(.stf-root){padding-left:14px;padding-right:14px}
    .stf-acts{margin-left:0;width:100%}
    .stf-acts .btn{flex:1;min-height:44px}
    .stf-search{flex:1 1 100%}
    .stf-bar select,.stf-fbtn{min-height:44px}
    .stf-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
    .stf-tabs::-webkit-scrollbar{display:none}
    .stf-tab{min-height:44px;white-space:nowrap}
    .stf-drow{align-items:stretch;flex-direction:column;gap:8px}
    .stf-dn{flex:none}
    .stf-iv input[type=time]{flex:1;width:auto;min-height:44px}
    .stf-iv{width:100%}
    .stf-dact{margin-left:0;width:100%;justify-content:flex-end}
    .stf-ib{width:44px;height:44px}
    /* переключатель дня — тот же элемент, но под палец, с сохранением пропорций */
    .stf-sw{width:48px;height:28px}
    .stf-sw:after{width:22px;height:22px}
    .stf-sw.on:after{transform:translateX(20px)}
    .stf-ph h2{font-size:17px}
    .stf-ph .rr{margin-left:0;width:100%;order:9}
    .stf-ph .rr select{flex:1}
    .stf-more{padding-left:0}
    .stf-seg{margin-left:0;width:100%}
    .stf-seg button{flex:1;min-height:40px}
    .stf-exr .t{flex:1 0 100%}
    .stf-exr .a{margin-left:0;width:100%}
    .stf-kebab{width:40px;height:40px}
    /* §19 selector услуг на телефоне — полноэкранный sheet */
    .stf-sv.sheet{position:fixed;inset:0;z-index:110;border-radius:0;border:0;overflow:hidden;
      background:var(--surface);display:flex;flex-direction:column}
    .stf-sv.sheet .stf-svh{flex:0 0 auto;padding:16px;min-height:56px;background:var(--surface);border-bottom:1px solid var(--line)}
    .stf-sv.sheet .stf-svsel{flex:0 0 auto;max-height:26vh;overflow-y:auto}
    .stf-sv.sheet .stf-svbody{flex:1;min-height:0;display:flex;flex-direction:column}
    .stf-sv.sheet .stf-svq{flex:0 0 auto}
    .stf-sv.sheet .stf-svlist{flex:1;min-height:0;max-height:none;overflow-y:auto}
    .stf-sv.sheet .stf-svfoot{flex:0 0 auto;padding:12px 16px}
    .stf-sv.sheet .stf-svfoot .btn{min-height:44px}
    .stf-dw{width:100%;max-width:100%}
    .stf-mo{gap:3px}
    .stf-mc{min-height:52px;padding:4px}
    .stf-rt th,.stf-rt td{padding:8px 6px;font-size:12.5px}
    .stf-rt td.c,.stf-rt th.c{width:58px}
  }


  /* ==========================================================================
     НОВАЯ ЗАПИСЬ · ТЗ «Новая запись в календаре» v1.0 (01.09.2026)
     Форма — не анкета, а booking assistant (§27): поля-кнопки открывают свои
     selector'ы, а не уводят на другой экран (§4).
     Префикс .na-* обязателен: голые классы business.html протекают между
     модулями (та же история, что с .mo/.mc-grid в «Записях»).
     ========================================================================== */
  .modal .box.na{max-width:520px}
  .na-b{display:flex;flex-direction:column;gap:14px}
  .na-f{min-width:0}
  .na-lb{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:7px}
  .na-lb .rq{color:var(--accent);margin-left:2px}
  .na-row{display:grid;gap:12px}
  .na-row.c2{grid-template-columns:1fr 1fr}
  .na-row.c3{grid-template-columns:1.02fr 1fr .78fr}

  /* поле-кнопка визуально неотличимо от input — разница только в поведении */
  .na-in,.na-btn{width:100%;min-height:48px;border:1.5px solid var(--line-strong);background:var(--surface-2);
    border-radius:12px;padding:11px 13px;font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);
    outline:none;display:flex;align-items:center;gap:8px;text-align:left;line-height:1.3}
  .na-btn{cursor:pointer}
  textarea.na-in{min-height:74px;display:block;resize:vertical}
  .na-in::placeholder{color:var(--ink-faint);font-weight:400}
  .na-btn .ph{color:var(--ink-faint);font-weight:400}
  .na-in:focus,.na-btn:focus-visible,.na-btn.on{border-color:var(--brand);background:var(--surface);
    box-shadow:0 0 0 3px rgba(91,76,255,.13)}
  .na-btn .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .na-btn .cv{flex-shrink:0;color:var(--ink-faint);width:16px;height:16px}
  .na-btn .cv path{stroke:currentColor}
  .na-btn[disabled]{opacity:.6;cursor:default}
  .na-f.err .na-in,.na-f.err .na-btn{border-color:var(--accent);background:#FFF7F7}
  .na-em{display:block;font-size:12px;font-weight:600;color:var(--accent);margin-top:6px}

  /* поиск клиента */
  .na-src{position:relative}
  .na-src .na-in{padding-right:38px}
  .na-x{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;
    border-radius:8px;background:none;color:var(--ink-faint);display:grid;place-items:center;cursor:pointer}
  .na-x:hover{background:var(--line);color:var(--ink)}
  .na-x svg{width:15px;height:15px}

  /* карточка выбранного клиента (§3) */
  /* сетка, а не flex: история, теги и заметка о клиенте идут во всю ширину карточки,
     иначе бейдж «Постоянный клиент» сжимает их в узкую колонку */
  .na-cc{border:1px solid var(--line-strong);border-radius:14px;padding:13px;margin-top:9px;
    background:var(--surface);display:grid;column-gap:12px;row-gap:8px;align-items:start;
    grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-areas:"av hd tag x" "av body body body"}
  /* Весь блок клиента — кнопка (21.09.2026): ссылка «Открыть карточку
     клиента» убрана, нажимается сам блок. Крестик внутри перекрывает его
     собой и до этого обработчика не доходит. */
  .na-cc[role="button"]{cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:border-color .15s ease,background .15s ease}
  .na-cc[role="button"]:hover{border-color:var(--brand);background:var(--surface-2)}
  .na-cc[role="button"]:active{background:var(--brand-tint)}
  .na-cc[role="button"]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .na-cc .na-cv{display:inline-flex;vertical-align:-2px;margin-left:5px;color:var(--ink-faint)}
  .na-cc .na-cv svg{width:14px;height:14px;display:block}
  .na-cc .na-x{position:relative;z-index:1}

  .na-cc .na-av{grid-area:av}
  .na-cc .hd{grid-area:hd;min-width:0}
  .na-cc .na-tag{grid-area:tag}
  .na-cc .na-x{grid-area:x}
  .na-cc .i{grid-area:body;min-width:0}
  .na-cc .hd b{display:block;font-size:14.5px;margin-bottom:3px}
  .na-cc .hd span,.na-cc .i>span{display:block;font-size:13px;color:var(--ink-soft);line-height:1.5;
    word-break:break-word}
  .na-cc .na-meta{font-size:12.5px;color:var(--ink-faint)}
  .na-cc .na-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
  .na-cc .i>*+*{margin-top:7px}
  .na-ct{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 7px;
    border-radius:6px;background:var(--surface-2);color:var(--ink-soft);white-space:nowrap}
  .na-ct.vip{background:#FDF1E3;color:#8A5312}
  .na-ct.loyal{background:var(--brand-tint);color:var(--brand-ink)}
  .na-ct.risk{background:#FDECEC;color:#A33540}
  /* заметка салона о клиенте: для клиники это аллергии и противопоказания — её
     видно сразу, а не через открытие карточки */
  .na-cc .na-note{display:flex;gap:7px;align-items:flex-start;margin-top:8px;padding:8px 10px;
    border-radius:9px;background:#FFF7EC;border:1px solid #F3DFC2;color:#7A4610;
    font-size:12.5px;line-height:1.45}
  .na-cc .na-note .ic{width:15px;height:15px;flex-shrink:0;margin-top:1px}
  .na-cc .na-x{position:static;transform:none;flex-shrink:0}

  .na-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:13px;
    font-weight:800;color:#fff;letter-spacing:.02em;flex-shrink:0}
  .na-av.sm{width:34px;height:34px;font-size:11.5px}

  .na-tag{flex-shrink:0;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:8px;white-space:nowrap;
    background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
  .na-tag.reg{background:var(--brand-tint);color:var(--brand-ink);border-color:transparent}

  /* ---------- §4-bis несколько процедур за визит ---------- */
  /* Строка процедуры: номер · название и цена · управление порядком.
     Сетка из трёх колонок, средняя minmax(0,1fr) — названия в медицине
     эстетической длинные, и без явного нуля grid считает колонку по
     самому длинному слову и выдавливает кнопки за край. */
  .na-svcl{display:flex;flex-direction:column;gap:8px}
  /* Четвёртая колонка — плашка мастера процедуры. Когда мастер в салоне
     один, плашки нет вовсе, и колонка схлопывается в ноль. */
  .na-sv{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:11px;align-items:center;
    border:1.5px solid var(--line-strong);background:var(--surface-2);border-radius:12px;padding:10px 11px}
  .na-sv:hover{border-color:var(--brand);background:var(--surface)}
  .na-sv .n{width:22px;height:22px;border-radius:7px;background:var(--brand-tint);color:var(--brand-ink);
    font-size:11.5px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums}
  .na-sv .t{min-width:0}
  .na-sv .t b{display:block;font-size:13.6px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .na-sv .t span{display:block;font-size:12.4px;color:var(--ink-soft);margin-top:2px;
    font-variant-numeric:tabular-nums}
  .na-sv .t span em{font-style:normal;color:var(--brand-ink);font-weight:700}
  .na-sv .ct{display:flex;align-items:center;gap:2px}
  .na-svsp{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;
    padding:5px 11px;font-family:inherit;font-size:12px;font-weight:700;color:var(--ink-soft);
    cursor:pointer;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
  .na-svsp:hover{border-color:var(--brand);color:var(--ink)}
  /* Свой мастер, не как у визита — видно без вчитывания */
  .na-svsp.own{background:var(--brand-tint);border-color:var(--brand-soft);color:var(--brand-ink)}
  @media(max-width:560px){
    .na-sv{grid-template-columns:22px minmax(0,1fr) auto;
      grid-template-areas:"n t ct" ". sp sp";row-gap:8px}
    .na-sv .n{grid-area:n;align-self:start;margin-top:2px}
    .na-sv .t{grid-area:t}
    .na-sv .ct{grid-area:ct;align-self:start}
    .na-svsp{grid-area:sp;justify-self:start;max-width:100%}
  }
  .na-ib{width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--ink-faint);
    display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
  .na-ib:hover{background:var(--line);color:var(--ink)}
  .na-ib[disabled]{opacity:.28;cursor:default}
  .na-ib[disabled]:hover{background:none;color:var(--ink-faint)}
  .na-ib.rm:hover{background:#FFEFF1;color:var(--accent)}
  .na-ib svg{width:15px;height:15px}
  .na-more{width:100%;min-height:44px;border:1px dashed var(--line-strong);background:none;border-radius:12px;
    padding:0 13px;margin-top:8px;display:flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
    font-size:13.5px;font-weight:700;color:var(--brand-ink);text-align:left}
  .na-more:hover{border-color:var(--brand);background:var(--brand-tint)}
  .na-more svg{width:15px;height:15px;flex-shrink:0}
  /* Полоска «процедуры идут одна за другой»: ширина куска — длительность */
  .na-tl{display:flex;gap:3px;margin-top:9px}
  .na-tl i{height:7px;border-radius:999px;background:var(--brand);opacity:.28;min-width:5px;font-style:normal}
  .na-tl i:nth-child(2){opacity:.48}
  .na-tl i:nth-child(3){opacity:.66}
  .na-tl i:nth-child(4){opacity:.82}
  .na-tl i:nth-child(n+5){opacity:.95}
  .na-tot{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:12.8px;color:var(--ink-soft);
    font-variant-numeric:tabular-nums;margin-top:7px}
  .na-tot b{color:var(--ink);font-weight:700}
  .na-tot .pr{margin-left:auto;font-weight:800;color:var(--brand-ink)}
  /* Квадратик-галочка: выбор услуг стал множественным, и это видно до
     первого нажатия — в отличие от одиночной отметки справа. */
  .na-opt.multi .bx{flex-shrink:0;width:19px;height:19px;border-radius:6px;border:1.7px solid var(--line-strong);
    background:var(--surface);display:grid;place-items:center;color:#fff}
  .na-opt.multi.sel .bx{background:var(--brand);border-color:var(--brand)}
  .na-opt.multi .bx svg{width:12px;height:12px;opacity:0;stroke-width:3}
  .na-opt.multi.sel .bx svg{opacity:1}
  .na-svcf{display:flex;align-items:center;gap:10px}
  .na-svcf .sm{flex:1;min-width:0;font-size:12.4px;color:var(--ink-soft);line-height:1.35;
    font-variant-numeric:tabular-nums}
  .na-svcf .sm b{display:block;color:var(--ink);font-weight:700}
  .na-sum .tot{color:var(--brand-ink);font-weight:700;margin-top:2px}

  /* Стрелка дня как цель переноса: карточку можно бросить на ‹ или ›, и
     запись уедет на соседний день. Подсветка та же, что у дня календаря. */
  .cm-arrow.dropto{background:var(--brand);color:#fff;border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(100,89,253,.22)}

  .na-lnk{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:0;cursor:pointer;
    font-family:inherit;font-size:13px;font-weight:700;color:var(--brand-ink);white-space:nowrap}
  .na-lnk:hover{text-decoration:underline}
  .na-lnk svg{width:15px;height:15px}

  /* ---------- popover / sheet выбора (§22) ---------- */
  .na-pop{position:fixed;z-index:1000;background:var(--surface);border:1px solid var(--line-strong);
    border-radius:14px;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden;
    animation:naIn .13s ease-out}
  @keyframes naIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.na-pop{animation:none}}
  .na-pop-h{padding:12px 14px 0;font-size:13.5px;font-weight:800;color:var(--brand-ink)}
  .na-pop-s{padding:10px 12px;border-bottom:1px solid var(--line)}
  .na-pop-s .w{position:relative;display:flex;align-items:center}
  .na-pop-s svg{position:absolute;left:11px;width:15px;height:15px;color:var(--ink-faint);pointer-events:none}
  .na-pop-s input{width:100%;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:10px;
    padding:9px 11px 9px 33px;font-family:inherit;font-size:13.5px;color:var(--ink);outline:none}
  .na-pop-s input:focus{border-color:var(--brand);background:var(--surface)}
  .na-pop-l{overflow-y:auto;overscroll-behavior:contain;padding:6px;flex:1;min-height:0}
  .na-pop-f{padding:9px 13px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-faint);
    text-align:center;background:var(--surface)}
  .na-pop-a{padding:9px 13px;border-top:1px solid var(--line);background:var(--surface)}
  .na-cat{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
    padding:11px 9px 5px}
  .na-cat:first-child{padding-top:4px}

  .na-opt{width:100%;display:flex;align-items:center;gap:11px;border:0;background:none;border-radius:10px;
    padding:9px 10px;font-family:inherit;text-align:left;cursor:pointer;color:var(--ink)}
  .na-opt:hover,.na-opt.kb{background:var(--surface-2)}
  .na-opt.sel{background:var(--brand-tint)}
  .na-opt .t{flex:1;min-width:0}
  .na-opt .t b{display:block;font-size:13.8px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .na-opt .t span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .na-opt .ok{flex-shrink:0;width:17px;height:17px;color:var(--brand);opacity:0}
  .na-opt.sel .ok{opacity:1}
  .na-opt[disabled]{cursor:default;opacity:.55}
  .na-opt[disabled]:hover{background:none}
  .na-add{width:100%;display:flex;align-items:center;gap:9px;border:0;background:none;padding:4px 2px;
    font-family:inherit;font-size:13px;font-weight:700;color:var(--brand-ink);cursor:pointer}
  .na-add svg{width:15px;height:15px}
  .na-empty{padding:22px 16px;text-align:center;color:var(--ink-faint);font-size:13px;line-height:1.5}
  .na-skel{padding:8px}
  .na-skel i{display:block;height:38px;border-radius:10px;background:linear-gradient(90deg,var(--surface-2),
    var(--line),var(--surface-2));background-size:220% 100%;animation:naSk 1.1s linear infinite;margin-bottom:6px}
  @keyframes naSk{from{background-position:120% 0}to{background-position:-120% 0}}

  /* календарь даты (§6) */
  .na-cal{padding:4px 10px 10px}
  .na-cal-h{display:flex;align-items:center;gap:6px;padding:6px 2px 10px}
  .na-cal-h b{flex:1;text-align:center;font-size:13.5px}
  .na-cal-h button{width:30px;height:30px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:9px;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
  .na-cal-h button:hover{border-color:var(--brand);color:var(--brand-ink)}
  .na-cal-h svg{width:14px;height:14px}
  .na-dow,.na-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .na-dow span{text-align:center;font-size:10.5px;font-weight:700;color:var(--ink-faint);padding-bottom:5px}
  .na-days button{aspect-ratio:1;min-height:34px;border:0;background:none;border-radius:50%;font-family:inherit;
    font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;display:grid;place-items:center;position:relative}
  .na-days button:hover{background:var(--surface-2)}
  .na-days button.out{color:var(--ink-faint);opacity:.45}
  /* «сегодня» и «выбранный день» — визуально разные состояния (§6) */
  .na-days button.td{background:var(--brand-tint);color:var(--brand-ink);font-weight:800}
  .na-days button.sel{background:var(--brand);color:#fff;font-weight:800}
  .na-days button.sel:hover{background:var(--brand)}
  .na-days button.off:not(.sel){color:var(--ink-faint);opacity:.5}
  .na-days button.off:not(.sel)::after{content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
    width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7}

  /* время (§7) */
  .na-tm-h{padding:11px 13px 9px;border-bottom:1px solid var(--line);text-align:center}
  .na-tm-h .r{display:flex;align-items:center;gap:6px}
  .na-tm-h .r b{flex:1;font-size:13.5px}
  .na-tm-h .r button{width:28px;height:28px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:8px;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
  .na-tm-h .r button:hover{border-color:var(--brand);color:var(--brand-ink)}
  .na-tm-h .r svg{width:13px;height:13px}
  .na-tm-h .s{font-size:12px;color:var(--ink-soft);margin-top:4px}
  .na-tm{display:flex;flex-direction:column;gap:6px;padding:8px}
  .na-tm button{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;
    padding:10px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:8px}
  .na-tm button:hover:not([disabled]),.na-tm button.kb{border-color:var(--line-strong);background:var(--surface-2)}
  .na-tm button.sel{border-color:var(--brand);color:var(--brand-ink);background:var(--surface);
    box-shadow:0 0 0 2px rgba(91,76,255,.13)}
  .na-tm button[disabled]{cursor:default;color:var(--ink-faint);background:var(--surface-2);border-style:dashed}
  .na-tm button i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-faint);
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .na-tm button.wr{justify-content:space-between;gap:10px;text-align:left}
  .na-tm button.wr b{font-weight:700;flex-shrink:0}
  .na-tm button.offh{border-style:dashed;color:#A8541D;border-color:#F0D7BC;background:#FFFBF6}
  .na-tm-t{width:100%;border:1px dashed var(--line-strong);background:var(--surface-2);border-radius:10px;
    padding:9px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--brand-ink);cursor:pointer}
  .na-tm-t:hover{border-color:var(--brand)}

  /* сводка / предупреждения формы */
  .na-hint{display:flex;gap:9px;align-items:flex-start;border-radius:12px;padding:10px 12px;
    font-size:12.8px;line-height:1.5;background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
  .na-hint b{color:var(--ink)}
  .na-hint svg{flex-shrink:0}
  .na-hint .ic{flex-shrink:0;width:17px;height:17px;margin-top:1px}
  .na-hint.warn{background:#FFF7EC;border-color:#F3DFC2;color:#8A5312}
  .na-hint.warn b{color:#7A4610}
  .na-hint.ok{background:#EEFAF4;border-color:#C7EBDA;color:#1F6D4C}
  .na-hint.ok b{color:#155C3E}
  .na-hint .na-lnk{color:inherit;text-decoration:underline;margin-left:auto;flex-shrink:0}

  .na-chk{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
  .na-chk input{width:19px;height:19px;accent-color:var(--brand);flex-shrink:0;cursor:pointer}
  .na-chk span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
  .na-chk input:checked+span{color:var(--ink)}
  /* ТЗ «Создание записи» v2.0: «Отметить оплату» — с пояснением, что это
     фиксация уже полученного платежа, а не списание денег с клиента */
  .na-chk.pay{align-items:flex-start;padding:2px 0}
  .na-chk.pay .t{display:flex;flex-direction:column;gap:2px;text-transform:none;letter-spacing:normal}
  .na-chk.pay .t b{font-size:13.5px;font-weight:700;color:var(--ink)}
  .na-chk.pay .t small{display:block;font-size:12px;font-weight:500;color:var(--ink-faint)}

  /* §2: «Повторение»/«Заметка» раскрываемые — компактная строка вместо
     всегда открытых полей, пока пользователь их не коснулся */
  .na-rev{width:100%;min-height:44px;border:1px dashed var(--line-strong);background:none;border-radius:12px;
    padding:0 13px;display:flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
    font-size:13.5px;font-weight:600;color:var(--ink-soft);text-align:left}
  .na-rev:hover{border-color:var(--brand);color:var(--brand-ink)}
  .na-rev .ic{width:16px;height:16px;flex-shrink:0;color:var(--ink-faint)}
  .na-rev .t{flex-shrink:0}
  .na-rev .v{flex:1;text-align:right;color:var(--ink-faint);font-weight:500}
  .na-rev .cv{flex-shrink:0;width:15px;height:15px;color:var(--ink-faint)}

  /* резюме визита над действиями — то же самое, что уже выбрано в полях,
     одной строкой перед подтверждением (ТЗ стр.1) */
  .na-sum{border-top:1px solid var(--line);padding-top:12px;font-size:13px;line-height:1.5}
  .na-sum b{display:block;color:var(--ink)}
  .na-sum span{display:block;color:var(--ink-faint)}

  .na-actions{display:flex;flex-direction:column;gap:8px}
  .na-cta{width:100%;min-height:50px;border:0;border-radius:13px;background:var(--grad);color:#fff;
    font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:var(--glow);
    display:flex;align-items:center;justify-content:center;gap:9px;margin-top:2px}
  .na-cta:hover{filter:brightness(1.05)}
  .na-cta[disabled]{opacity:.62;cursor:default;box-shadow:none;filter:none}
  .na-cancel{width:100%;min-height:44px;border:0;background:none;border-radius:12px;font-family:inherit;
    font-size:13.5px;font-weight:700;color:var(--ink-faint);cursor:pointer}
  .na-cancel:hover{color:var(--ink-soft);background:var(--surface-2)}
  .na-sp{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
    animation:naSpin .7s linear infinite}
  @keyframes naSpin{to{transform:rotate(360deg)}}

  /* §3.2 форма нового клиента внутри popover */
  .na-nc{padding:12px}
  .na-nc .na-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .na-nc label{display:block;font-size:11px;font-weight:700;color:var(--ink-soft);margin-bottom:5px}
  .na-nc label .rq{color:var(--accent)}
  .na-nc input{width:100%;border:1.5px solid var(--line-strong);background:var(--surface-2);border-radius:10px;
    padding:10px 11px;font-family:inherit;font-size:13.5px;color:var(--ink);outline:none;min-height:42px}
  .na-nc input:focus{border-color:var(--brand);background:var(--surface)}
  .na-nc input.bad{border-color:var(--accent);background:#FFF7F7}
  .na-nc .a{display:flex;gap:9px;justify-content:flex-end;align-items:center;margin-top:13px;flex-wrap:wrap}
  .na-nc .em{font-size:12px;font-weight:600;color:var(--accent);margin-top:8px;line-height:1.45}
  .na-nc .em b{cursor:pointer;text-decoration:underline}
  .na-mini{border:0;border-radius:10px;padding:10px 15px;font-family:inherit;font-size:13px;font-weight:700;
    cursor:pointer;background:var(--brand);color:#fff;min-height:40px}
  .na-mini.ghost{background:none;color:var(--brand-ink)}

  /* §14 toast с быстрыми действиями — обычный тост текстовый */
  .na-done{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);z-index:320;
    background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-pop);
    padding:12px 14px;display:flex;align-items:center;gap:12px;opacity:0;transition:all .2s;max-width:calc(100vw - 28px)}
  .na-done.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .na-done .ic{width:32px;height:32px;border-radius:10px;background:#EEFAF4;color:#1F6D4C;display:grid;
    place-items:center;flex-shrink:0}
  .na-done .ic svg{width:17px;height:17px}
  .na-done .t{min-width:0}
  .na-done .t{max-width:min(46vw,420px)}
  .na-done .t b{display:block;font-size:13.5px}
  .na-done .t span{display:block;font-size:12.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .na-done .a{display:flex;gap:6px;flex-shrink:0}
  .na-done .a button{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;
    padding:7px 11px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--brand-ink);cursor:pointer;
    white-space:nowrap}
  .na-done .a button:hover{border-color:var(--brand);background:var(--brand-tint)}

  /* узкий экран: бейдж клиента уходит на свою строку, крестик — в угол,
     иначе имя и ссылка ломаются на три строки */
  @media(max-width:560px){
    .na-cc{grid-template-columns:auto minmax(0,1fr) auto;
      grid-template-areas:"av hd x" "av tag tag" "body body body"}
    .na-cc .na-tag{justify-self:start}
  }


  /* ==========================================================================
     Резерв времени: поля-строки и колесо выбора (референс владелицы,
     26.09.2026). Оболочка общая с созданием записи (.na-*) — поле показывает
     значение, а выбор уезжает в отдельный слой.
     ========================================================================== */
  .na-hint[hidden]{display:none}
  .bk-r2{grid-template-columns:1.62fr 1fr}
  .bk-sp{gap:10px}
  .bk-sp .av{flex:0 0 auto;display:flex}
  /* Шаблоны — одной строкой с прокруткой: в три ряда они занимали пол-формы
     и оттесняли кнопку «Сохранить» за край экрана телефона. */
  .bk-chips{display:flex;flex-wrap:nowrap;gap:7px;margin-top:9px;overflow-x:auto;
    padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bk-chips::-webkit-scrollbar{display:none}
  .bk-chip{flex:0 0 auto;white-space:nowrap;border:1.5px solid var(--line-strong);background:var(--surface-2);border-radius:999px;
    padding:6px 12px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer}
  .bk-chip:hover{border-color:var(--brand);color:var(--ink);background:var(--surface)}
  .bk-chip.add{padding:6px 10px;display:inline-flex;align-items:center}
  .bk-chip.add svg{width:14px;height:14px}
  .bk-sum b{font-variant-numeric:tabular-nums}
  .bk-sum i{font-style:normal}

  /* колесо: пять позиций в окне, выбранная — в подсвеченной полосе по центру.
     Шаг прокрутки задаёт scroll-snap, высота позиции (42px) обязана
     совпадать с WHL_H в business.js — от неё считается номер выбранного. */
  .whl-ov{position:fixed;inset:0;z-index:1100;background:rgba(6,5,16,.55);
    display:flex;align-items:flex-end;justify-content:center;
    /* низ считаем по ВИДИМОЙ части экрана — тем же переменным, что и лист
       формы (business.js · vvSync): иначе на iOS кнопка «Готово» уезжает
       под панель Safari */
    padding:var(--vvt,0px) 0 var(--vvb,0px)}
  .whl{background:var(--surface);width:100%;max-width:460px;border-radius:20px 20px 0 0;
    box-shadow:var(--shadow-pop);animation:whlUp .18s ease-out;
    padding-bottom:max(10px,env(safe-area-inset-bottom))}
  @keyframes whlUp{from{transform:translateY(18px);opacity:.5}to{transform:none;opacity:1}}
  @media(prefers-reduced-motion:reduce){.whl{animation:none}}
  @media(min-width:721px){
    .whl-ov{align-items:center}
    .whl{border-radius:18px;padding-bottom:10px}
  }
  .whl-h{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--line);
    font-size:15px;font-weight:800;color:var(--ink)}
  .whl-back{width:32px;height:32px;border:0;border-radius:9px;background:var(--surface-2);
    color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
  .whl-back:hover{color:var(--ink)}
  .whl-back svg{width:17px;height:17px}
  .whl-g{padding:8px 14px 4px}
  .whl-ar{display:grid;grid-template-columns:var(--cols);gap:8px}
  .whl-ar button{height:26px;border:0;background:none;border-radius:8px;color:var(--ink-faint);
    display:grid;place-items:center;cursor:pointer}
  .whl-ar button:hover{background:var(--surface-2);color:var(--ink)}
  .whl-ar svg{width:17px;height:17px}
  .whl-mid{position:relative;display:grid;grid-template-columns:var(--cols);gap:8px}
  .whl-band{position:absolute;left:-5px;right:-5px;top:50%;height:42px;transform:translateY(-50%);
    background:var(--surface-2);border-radius:12px;pointer-events:none}
  .whl-c{height:210px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
    text-align:center;position:relative;outline:none;touch-action:pan-y}
  .whl-c::-webkit-scrollbar{display:none}
  .whl-pad{height:84px}
  .whl-c .it{height:42px;line-height:42px;scroll-snap-align:center;font-size:16px;font-weight:600;
    color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
    transition:color .12s}
  .whl-c .it.on{color:var(--ink);font-weight:800;font-size:18px}
  .whl-c:focus-visible .it.on{color:var(--brand)}
  .whl-foot{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
    border-top:1px solid var(--line);margin:8px 14px 0;padding:10px 0 2px}
  .whl-foot span{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-faint)}
  .whl-foot b{font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
  .whl-foot.bad b{color:var(--accent)}
  .whl-a{padding:10px 14px 2px}

  /* ==========================================================================
     Телефон: пересекающиеся записи — СТОПКОЙ, а не колонками.
     На широком экране две записи на одно время встают рядом (packEvents ·
     CAL-04), и это правильно. В колонке телефона шириной 150 px то же
     деление даёт две полоски по 70 px: на видео владелицы 26.09.2026 от
     записей остались «Aliaksa…» и «17:…». Здесь вместо деления — стопка:
     каждая следующая карточка во всю ширину, сдвинута на 14 px и лежит
     сверху. Видно обе и видно, что они пересекаются.
     !important обязателен: --evl/--evw приезжают инлайном из packStyle, и
     обычное правило их не перебьёт. Сдвиг ограничен тремя ступенями —
     дальше карточка стала бы уже текста.
     ========================================================================== */
  @media(max-width:720px){
    /* Карточка ВСЕГДА во всю ширину: сдвигаем только те, что начинаются
       в одну и ту же минуту (--evu), — иначе нижнюю не видно совсем. */
    .dc-ev,.dc-place{
      --evl:calc(3px + min(var(--evu,0),2) * 12px) !important;
      --evw:calc(100% - 6px - min(var(--evu,0),2) * 12px) !important}
    /* один класс: .dc-ev.picked ниже перебивает это своим z-index.
       Порядок слоёв — по времени начала: кто позже, тот сверху. */
    .dc-ev{z-index:calc(2 + min(var(--evz,0),8))}
    /* у верхней карточки — светлая кромка и тень сверху: видно, что это слой,
       а не продолжение нижней */
    .dc-lane .dc-ev[style*="--evn:2"],.dc-lane .dc-ev[style*="--evn:3"],
    .dc-lane .dc-ev[style*="--evn:4"],.dc-lane .dc-ev[style*="--evn:5"]{
      box-shadow:0 -2px 0 0 var(--surface),0 -5px 11px rgba(40,35,90,.16)}
    /* Накрытая карточка — ОДНА строка: «время · имя». В две строки её имя
       разрезала пополам карточка, легшая сверху (проверка 26.09.2026). */
    .dc-ev.cov{display:flex;align-items:flex-start;gap:7px;padding:3px 9px;line-height:1.15}
    .dc-ev.cov>.t{flex:0 0 auto;font-size:10.5px;font-weight:800}
    .dc-ev.cov>.nm,.dc-ev.cov>.one{flex:1 1 auto;min-width:0;font-size:11.5px;font-weight:700;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .dc-ev.cov>.svc,.dc-ev.cov .ev-st,.dc-ev.cov .ph,.dc-ev.cov .res,
    .dc-ev.cov .rep-badge,.dc-ev.cov .nt-badge{display:none}
    /* поднятая пальцем карточка — во всю ширину, поверх остальных и целиком */
    .dc-ev.fore{
      --evl:3px !important;
      --evw:calc(100% - 6px) !important;
      z-index:10;box-shadow:0 10px 26px rgba(40,35,90,.28)}
    /* поднятая карточка снова полная: возвращаем ей обычную раскладку */
    .dc-ev.fore.cov{display:block;padding:5px 8px;line-height:normal}
    .dc-ev.fore.cov>.t,.dc-ev.fore.cov>.nm,.dc-ev.fore.cov>.one{font-size:revert;font-weight:revert}
    .dc-ev.fore.cov>.svc,.dc-ev.fore.cov .ev-st,.dc-ev.fore.cov .ph{display:revert}
  }

  /* §22 mobile: selector'ы — полноэкранные sheet, CTA прижат снизу */
  .na-mask{position:fixed;inset:0;background:rgba(6,5,16,.5);z-index:999}
  @media(max-width:720px){
    /* Окно формы — строго по ВИДИМОЙ части экрана (business.js · vvSync):
       иначе на iOS его низ уходит под панель Safari, а под листом остаётся
       пустая полоса. Без visualViewport переменных нет и работают прежние
       inset:0 / 100% — ничего не ломается. */
    .modal{padding:var(--vvt,0px) 0 var(--vvb,0px);align-items:flex-end}
    /* листы, прижатые ко дну, считают низ от того же видимого окна */
    .rpt-sheet,.na-pop:not(.anch){bottom:var(--vvb,0px)}
    /* Высота окна тоже по видимой части: 96vh на iOS считается по
       раскладочному окну, и шапка формы уезжала выше экрана. */
    .modal .box{max-height:calc(var(--vvh,90vh) - 12px)}
    .modal .box.na{max-width:100%;max-height:calc(var(--vvh,96vh) - 12px);border-radius:18px 18px 0 0}
    /* .cle — flex-колонка внутри padding-box: шапка и подвал не сжимаются */
    .cle > *{flex:0 0 auto}
    .cle .cle-b{flex:1 1 auto;min-height:0}
    .na-row.c3{grid-template-columns:1fr 1fr}
    .na-row.c3>.na-f:first-child{grid-column:1/-1}
    .na-in,.na-btn{min-height:48px}
    .na-pop{left:0 !important;right:0;top:auto !important;bottom:0;width:auto !important;max-width:100%;
      border-radius:18px 18px 0 0;max-height:88vh}
    /* Поиск клиента (.anch) — не лист со дна, а список прямо под полем.
       Координаты приходят из naPopPlace переменными: инлайновый style тут
       проиграл бы !important выше, а переменные читаются внутри правила. */
    .na-pop.anch{left:var(--pl,8px) !important;right:var(--pr,8px);top:var(--pt,90px) !important;
      bottom:auto;width:auto !important;max-width:none;border-radius:14px;
      max-height:var(--pmh,48vh);box-shadow:var(--shadow-pop)}
    .na-pop-h{padding:14px 16px 0;font-size:15px;color:var(--ink)}
    .na-opt{padding:11px 10px;min-height:52px}
    .na-days button{min-height:42px}
    .na-tm button{min-height:46px}
    .na-mini{min-height:44px}
    .na-done{left:12px;right:12px;transform:translateY(16px);flex-wrap:wrap}
    .na-done.show{transform:none}
    .na-done .a{width:100%}
    .na-done .a button{flex:1;min-height:42px}
  }
  /* ============================================================
     DASHBOARD «Сегодня» — ТЗ «Dashboard „Сегодня“» v1.0 (§2, §28, §30)
     Все классы под префиксом .db- : голые имена в этом файле уже заняты
     календарём и «Записями».
     ============================================================ */
  main:has(.db-root){max-width:1520px}
  .db-root{--db-gap:14px}

  /* --- §3 верхняя панель --- */
  .db-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .db-top .db-sp{margin-left:auto}
  .db-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:10px;padding:8px 11px;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
  .db-pill:hover{background:var(--surface-2)}
  .db-pill svg{width:15px;height:15px;flex-shrink:0;color:var(--ink-faint)}
  .db-pill.on{background:var(--brand-tint);border-color:var(--brand-tint);color:var(--brand-ink)}
  .db-pill.on svg{color:var(--brand)}
  .db-pill .db-cnt{background:var(--brand);color:#fff;border-radius:999px;font-size:10px;padding:1px 5px}

  .db-h1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
  .db-h1 h1{margin:0}
  .db-h1 .db-fresh{font-size:12px;color:var(--ink-faint);font-weight:600}
  .db-h1 .db-fresh button{border:0;background:transparent;color:var(--brand-ink);font-weight:700;font-size:12px;padding:0 0 0 6px}
  .db-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .db-sub .db-cmp{font-size:12.5px;color:var(--ink-soft)}

  /* тумблер режима редактирования */
  .db-sw{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:10px;padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  .db-sw i{width:32px;height:18px;border-radius:999px;background:var(--line-strong);position:relative;transition:background .16s;flex-shrink:0}
  .db-sw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(20,16,60,.28);transition:transform .16s}
  .db-sw.on{color:var(--brand-ink);border-color:var(--brand-tint);background:var(--brand-tint)}
  .db-sw.on i{background:var(--brand)}
  .db-sw.on i::after{transform:translateX(14px)}

  /* Картинка для соцсетей правится прямо в превью. Стилей у og-drag не было
     вовсе — курсор оставался стрелкой, и понять, что кадр можно двигать,
     было неоткуда. */
  .og-drag{ cursor:grab; touch-action:none; }
  .og-drag.dragging{ cursor:grabbing; }
  .og-drag-hint{ position:absolute; right:8px; bottom:8px; width:26px; height:26px;
    display:flex; align-items:center; justify-content:center; border-radius:8px;
    background:rgba(20,16,45,.55); color:#fff; pointer-events:none; }
  /* Своей картинки ещё нет: показываем, что по превью можно нажать и взять
     в работу то, что видно (просьба владелицы 09.09.2026). */
  .og-adopt{ cursor:pointer; position:relative; }
  .og-adopt::after{ content:""; position:absolute; inset:0; border-radius:inherit;
    box-shadow:inset 0 0 0 2px transparent; transition:box-shadow .15s ease; }
  .og-adopt:hover::after,.og-adopt:focus-visible::after{
    box-shadow:inset 0 0 0 2px var(--brand,#5B4BE0); }
  .og-adopt:focus-visible{ outline:none; }
  /* Кадр карточки правится прямо в предпросмотре — курсор об этом говорит. */
  [data-cv-live] .banner{ cursor:grab; touch-action:none; }
  [data-cv-live] .banner.cv-live-drag{ cursor:grabbing; }
  [data-cv-live] .banner.fb{ cursor:default; }
  /* «Собрать автоматически» стоит в подсказке под полем: это подсказка, а не
     основное действие — поэтому ссылка, а не кнопка во всю ширину. */
  .sf-auto{ border:0; background:none; padding:0; margin-right:6px; font:inherit;
    font-weight:700; color:var(--brand,#5B4BE0); cursor:pointer; text-decoration:underline;
    text-underline-offset:2px; }
  .sf-auto:hover{ color:var(--brand-ink,#3B2FB0); }
  .sf-auto:focus-visible{ outline:2px solid var(--brand,#5B4BE0); outline-offset:2px; border-radius:4px; }
  .og-adopt-hint{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
    background:rgba(20,16,45,.72); color:#fff; font-size:11.5px; font-weight:700;
    padding:5px 10px; border-radius:999px; white-space:nowrap; pointer-events:none;
    max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; }
  @media(prefers-reduced-motion:reduce){ .og-adopt::after{ transition:none } }

  /* Панель дашборда на телефоне (просьба владелицы 09.09.2026: «всё должно
     быть грамотно скомпоновано»). Было: распорка db-sp прижимала «Добавить
     виджет» к правому краю, кнопке не хватало ширины, текст ложился в две
     строки — она становилась вдвое выше соседних, а «⋮» висел сбоку
     отдельным огрызком. Стало: одна высота у всех, текст не переносится,
     «Добавить виджет» занимает остаток строки, «⋮» — ровный квадрат. */
  @media(max-width:639px){
    .db-top{gap:8px}
    .db-top .db-sp{display:none}
    .db-top .db-pill,.db-top .btn{height:40px;min-height:40px;padding:0 12px;white-space:nowrap}
    .db-top #db-add{flex:1 1 auto;justify-content:center;gap:8px}
    /* Фиксированная высота кнопки растянула вложенный svg на всю строку —
       у иконок в .btn своего размера нет, только у .db-pill svg. */
    .db-top .btn svg{width:16px;height:16px;flex-shrink:0}
    /* padding у «⋮» задан инлайном в разметке — перебиваем явно */
    .db-top #db-more{flex:0 0 40px;width:40px;padding:0 !important;justify-content:center}
    /* «Настроить дашборд» и «Режим редактирования» — в один ряд, а не по
       разным краям: распорка margin-left:auto разносила их на две строки. */
    .db-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
    .db-sub > span[style*="margin-left"]{display:none}
    .db-sub #db-cfgbtn,.db-sub #db-edit{height:38px;min-height:38px;flex:1 1 auto;justify-content:center}
  }

  /* --- §22 активные фильтры --- */
  .db-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
  .db-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--brand-tint);background:var(--brand-tint);
    color:var(--brand-ink);border-radius:999px;padding:5px 6px 5px 11px;font-size:12px;font-weight:700}
  .db-chip b{font-weight:800}
  .db-chip button{border:0;background:transparent;color:inherit;font-size:14px;line-height:1;padding:0 4px;opacity:.7}
  .db-chip button:hover{opacity:1}
  .db-chips .db-clr{border:0;background:transparent;color:var(--ink-faint);font-size:12px;font-weight:700;text-decoration:underline}

  /* --- §28 сетка --- */
  .db-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--db-gap);align-items:stretch}
  .db-w{grid-column:span 4;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-width:0;position:relative}
  .db-w[data-s="S"]{grid-column:span 3}
  .db-w[data-s="M"]{grid-column:span 4}
  .db-w[data-s="L"]{grid-column:span 8}
  .db-w[data-s="XL"]{grid-column:span 12}
  .db-w[data-h="kpi"]{min-height:152px}
  .db-w[data-h="strip"]{min-height:104px}
  .db-w[data-h="chart"],.db-w[data-h="table"]{min-height:298px}
  .db-w[data-h="tall"]{min-height:344px}

  .db-hd{display:flex;align-items:center;gap:6px;padding:13px 14px 0}
  .db-hd h3{font-size:13px;font-weight:800;letter-spacing:-.01em;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .db-hd .db-tools{margin-left:auto;display:flex;align-items:center;gap:2px;flex-shrink:0}
  .db-hd button.db-ic{width:24px;height:24px;border:0;background:transparent;border-radius:7px;color:var(--ink-faint);
    display:grid;place-items:center;padding:0}
  .db-hd button.db-ic:hover{background:var(--surface-2);color:var(--ink)}
  .db-hd button.db-ic svg{width:15px;height:15px}
  .db-dh{display:none;width:20px;height:22px;color:var(--ink-faint);cursor:grab;flex-shrink:0;place-items:center}
  .db-dh svg{width:13px;height:13px}
  .db-bd{padding:9px 14px 14px;flex:1;min-width:0;display:flex;flex-direction:column}

  /* значение KPI */
  .db-n{font-size:25px;font-weight:800;letter-spacing:-.025em;line-height:1.15;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .db-n small{font-size:14px;font-weight:700;color:var(--ink-soft)}
  .db-d{font-size:11.5px;font-weight:800;border-radius:6px;padding:1px 5px;white-space:nowrap}
  .db-d.up{color:#1E8F63;background:rgba(41,185,130,.12)}
  .db-d.dn{color:#C0384A;background:rgba(232,90,103,.12)}
  .db-d.fl{color:var(--ink-faint);background:var(--surface-2)}
  .db-note{font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-top:5px}
  .db-note b{color:var(--ink-soft)}
  .db-spark{margin-top:auto;padding-top:8px}
  .db-spark svg{display:block;width:100%;height:auto}

  /* графики */
  .db-chart{margin-top:6px;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
  /* ТЗ §8.1: график не мельче 200px — на узком одноколоночном экране виджет
     мог сжаться по высоте вместе с контентом соседей. Графики — свои SVG
     с viewBox (не ECharts/canvas), width:100% масштабирует их само по себе,
     без пересчёта в JS при повороте экрана. */
  @media(max-width:1023px){ .db-chart{min-height:200px} }
  .db-chart svg{display:block;width:100%;height:auto;overflow:visible}
  .db-ax{font-size:9.5px;font-weight:700;fill:var(--ink-faint)}
  .db-gl{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
  .db-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .db-bar{rx:3}
  .db-hit{cursor:pointer}
  .db-hit:hover{fill:rgba(91,76,255,.06)}
  .db-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;font-weight:700;color:var(--ink-soft);margin:2px 0 4px}
  .db-legend span{display:inline-flex;align-items:center;gap:6px}
  .db-legend i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
  .db-legend i.ln{width:14px;height:3px;border-radius:2px}

  .db-tip{position:fixed;z-index:2600;background:#181A2E;color:#fff;border-radius:9px;padding:7px 10px;font-size:11.5px;
    font-weight:600;line-height:1.45;pointer-events:none;box-shadow:0 12px 30px rgba(20,16,60,.3);max-width:260px}
  .db-tip b{font-weight:800}

  /* donut */
  .db-donut{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
  .db-donut svg{width:132px;height:132px;flex-shrink:0}
  .db-dn{font-size:17px;font-weight:800;fill:var(--ink)}
  .db-ds{font-size:9px;font-weight:700;fill:var(--ink-faint)}
  .db-lg{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
  .db-lg .r{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;
    border-radius:7px;padding:1px 4px;margin:-1px -4px}
  .db-lg .r:hover{background:var(--surface-2)}
  .db-lg .r i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .db-lg .r .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .db-lg .r .pc{font-weight:800;color:var(--ink)}
  .db-lg .r .ab{color:var(--ink-faint);font-size:11px;min-width:26px;text-align:right}

  /* таблицы внутри виджета */
  .db-tb{width:100%;border-collapse:collapse;font-size:12.5px}
  .db-tb th{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);
    padding:0 6px 7px;text-align:left;border:0}
  .db-tb td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
  .db-tb tr:last-child td{border-bottom:0}
  .db-tb tbody tr{cursor:pointer}
  .db-tb tbody tr:hover td{background:var(--surface-2)}
  .db-tb .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  .db-tb .pos{width:20px;height:20px;border-radius:6px;background:var(--brand-tint);color:var(--brand-ink);
    display:grid;place-items:center;font-size:10.5px;font-weight:800}
  .db-tb .av{width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;
    font-size:9px;font-weight:800;flex-shrink:0}
  .db-tb .who{display:flex;align-items:center;gap:8px;min-width:0}
  .db-tb .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .db-more{display:block;text-align:center;font-size:12px;font-weight:700;color:var(--brand-ink);padding:9px 0 0;
    border:0;background:transparent;width:100%;margin-top:auto}
  .db-more:hover{text-decoration:underline}

  /* полоска прогресса (загрузка, распределение звёзд) */
  .db-tr{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;min-width:52px}
  .db-tr i{display:block;height:100%;border-radius:999px;background:var(--brand)}
  .db-tr.g i{background:#29B982} .db-tr.o i{background:#F3A633} .db-tr.r i{background:#E85A67}

  /* звёзды */
  .db-st{color:var(--star);letter-spacing:1px;font-size:15px;white-space:nowrap}
  .db-st i{color:var(--line-strong);font-style:normal}

  /* §18 полоса операционных mini-KPI */
  .db-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;flex:1}
  .db-w[data-s="XL"] .db-mini{grid-template-columns:repeat(8,minmax(0,1fr))}
  .db-mk{display:flex;gap:9px;align-items:flex-start;padding:8px 9px;border-radius:11px;min-width:0}
  .db-mk:hover{background:var(--surface-2)}
  .db-mk .ic{width:28px;height:28px;border-radius:9px;background:var(--brand-tint);color:var(--brand-ink);
    display:grid;place-items:center;flex-shrink:0}
  .db-mk .ic svg{width:15px;height:15px}
  .db-mk .tx{min-width:0;flex:1}
  .db-mk .l{font-size:10.5px;font-weight:700;color:var(--ink-faint);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .db-mk .v{font-size:15px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
  .db-mk .v .db-d{font-size:10px;padding:0 4px}
  .db-mk .sp{display:block;width:100%;min-width:0;margin-top:3px}
  .db-mk .sp svg{display:block;width:100%;height:18px}

  /* воронка */
  .db-fun{display:flex;flex-direction:column;gap:8px;flex:1;justify-content:center}
  .db-fun .f{display:grid;grid-template-columns:1fr auto;gap:3px}
  .db-fun .f .lb{font-size:11.5px;font-weight:700;color:var(--ink-soft)}
  .db-fun .f .vv{font-size:11.5px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
  .db-fun .f .tk{grid-column:1/-1;height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden}
  .db-fun .f .tk i{display:block;height:100%;border-radius:999px;background:var(--grad)}
  .db-fun .f .ls{grid-column:1/-1;font-size:10.5px;color:var(--accent);font-weight:700}

  /* карта */
  .db-map{display:flex;gap:12px;flex:1;min-width:0}
  .db-map .mp{flex:0 0 46%;min-width:0;display:grid;place-items:center}
  .db-map .mp svg{width:100%;height:auto;max-height:190px}
  .db-pl{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:.7;stroke-linejoin:round}
  .db-cd{fill:var(--brand);fill-opacity:.55;stroke:#fff;stroke-width:1}
  .db-cd:hover{fill-opacity:.85}
  .db-map .lst{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center}
  .db-map .lst .r{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}
  .db-map .lst .r:hover{color:var(--brand-ink)}
  .db-map .lst .r b{font-weight:800;font-variant-numeric:tabular-nums}
  .db-map .lst .r .tk{grid-column:1/-1;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden}
  .db-map .lst .r .tk i{display:block;height:100%;background:var(--brand);border-radius:999px}

  /* §14 настоящая карта (ELQMap · Mapbox GL). Схема-контур Польши выше остаётся
     фолбэком: без токена или на file:// виджет рисует её, как раньше. */
  .db-map.has-real{flex-direction:column;gap:9px}
  .db-map.has-real .mp{display:none}
  .db-map.has-real .geo-col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px}
  .db-geo{position:relative;flex:1;min-height:188px;border-radius:12px;overflow:hidden;background:var(--surface-2)}
  .db-w[data-s="L"] .db-geo,.db-w[data-s="XL"] .db-geo{min-height:236px}
  .db-geo-box{position:absolute;inset:0}
  .db-geo .elq-map{border-radius:12px}
  .db-geo-rst{position:absolute;left:8px;top:8px;z-index:3;border:1px solid var(--line-strong);
    background:rgba(255,255,255,.94);color:var(--ink);font:700 11px/1 inherit;border-radius:8px;padding:6px 9px;
    box-shadow:0 2px 8px rgba(17,18,36,.14);cursor:pointer}
  .db-geo-rst:hover{color:var(--brand-ink);border-color:var(--brand)}
  /* ТЗ §8.1: карта грузится по тапу, а не сразу — один виджет с картой не
     должен тянуть Mapbox (векторные тайлы, вендорный JS) на мобильном
     трафике, пока владелец её не попросил. */
  .db-geo-lazy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:6px;border:0;background:var(--surface-2);color:var(--ink-soft);
    font:700 12.5px/1.3 inherit;cursor:pointer}
  .db-geo-lazy:hover{color:var(--brand-ink)}
  .db-geo-lazy svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .db-geo-note{font-size:10.5px;line-height:1.45;font-weight:600;color:var(--ink-faint)}
  /* служебные состояния карты в маленькой карточке: без этого белая плашка
     ELQMap (340px, padding 24) не помещается и обрезается */
  .db-geo .elq-map__state{padding:10px}
  .db-geo .elq-map__state>div{padding:10px 12px;font-size:11px;line-height:1.45;max-width:100%}
  .db-geo .elq-map__state b{font-size:12px;margin-bottom:4px}
  .db-geo .elq-map__spinner{width:20px;height:20px;margin-bottom:7px;border-width:2px}
  .db-geo .mapboxgl-ctrl-bottom-right{transform:scale(.8);transform-origin:100% 100%}
  .db-geo-pop .mapboxgl-popup-content{padding:6px 9px;border-radius:9px;
    font:700 11.5px/1.35 inherit;color:var(--ink);white-space:nowrap}
  .db-map.has-real .lst{flex:none;max-height:106px;overflow:auto;justify-content:flex-start}
  @container (min-width:520px){
    .db-map.has-real{flex-direction:row;gap:12px}
    .db-map.has-real .geo-col{flex:1 1 58%}
    .db-map.has-real .lst{flex:0 0 38%;max-height:none;overflow:visible;justify-content:center}
  }

  /* empty / error / permission */
  .db-msg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    gap:7px;padding:14px 6px;color:var(--ink-faint)}
  .db-msg svg{width:26px;height:26px;opacity:.5}
  .db-msg b{font-size:12.5px;color:var(--ink-soft);font-weight:700}
  .db-msg p{font-size:11.5px;line-height:1.5;max-width:280px}
  .db-msg .btn{margin-top:4px}
  .db-warn{font-size:11px;font-weight:700;color:#9A6B12;background:rgba(243,166,51,.14);border-radius:7px;
    padding:5px 8px;margin-top:8px;line-height:1.4}

  /* --- §4 режим редактирования --- */
  .db-grid.edit .db-w{border-style:dashed;border-color:var(--line-strong)}
  .db-grid.edit .db-dh{display:grid}
  .db-grid.edit .db-w:hover{box-shadow:var(--shadow-md)}
  .db-w.db-drag{opacity:.35}
  .db-ph{border:2px dashed var(--brand);border-radius:var(--radius);background:var(--brand-tint);opacity:.6;min-height:60px}
  .db-ph[data-s="S"]{grid-column:span 3} .db-ph[data-s="M"]{grid-column:span 4}
  .db-ph[data-s="L"]{grid-column:span 8} .db-ph[data-s="XL"]{grid-column:span 12}
  .db-grid.edit .db-bd{pointer-events:none}
  .db-grid.edit .db-hd{pointer-events:auto}

  /* popover меню виджета (§27) */
  .db-pop{position:fixed;z-index:2500;background:var(--surface);border:1px solid var(--line-strong);border-radius:13px;
    box-shadow:var(--shadow-pop);padding:7px;min-width:232px;max-height:min(76vh,560px);overflow:auto}
  .db-pop .hd{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:7px 9px 4px}
  .db-pop .sep{height:1px;background:var(--line);margin:5px 0}
  .db-pop button.it{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;border-radius:8px;
    padding:8px 9px;font-size:12.5px;font-weight:600;color:var(--ink);text-align:left}
  .db-pop button.it:hover{background:var(--surface-2)}
  .db-pop button.it.dng{color:var(--accent)}
  .db-pop button.it svg{width:15px;height:15px;color:var(--ink-faint);flex-shrink:0}
  .db-pop button.it.dng svg{color:var(--accent)}
  .db-pop button.it[disabled]{opacity:.4;cursor:not-allowed}
  .db-pop .seg{display:flex;gap:4px;padding:3px 9px 7px;flex-wrap:wrap}
  .db-pop .seg button{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:5px 9px;
    font-size:11.5px;font-weight:700;color:var(--ink-soft)}
  .db-pop .seg button.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .db-pop select{width:calc(100% - 18px);margin:0 9px 7px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:8px;padding:6px 8px;font-size:12.5px;font-weight:600;color:var(--ink)}
  .db-pop .sw{display:flex;align-items:center;gap:8px;padding:8px 9px;font-size:12.5px;font-weight:600}
  .db-pop .sw input{margin-left:auto}

  /* --- §5 библиотека виджетов --- */
  .db-lib{position:fixed;top:var(--hdr);right:0;bottom:0;width:334px;background:var(--surface);border-left:1px solid var(--line);
    box-shadow:-18px 0 44px rgba(40,35,90,.1);z-index:1200;display:flex;flex-direction:column;transform:translateX(102%);
    transition:transform .22s cubic-bezier(.2,.7,.3,1)}
  .db-lib.open{transform:none}
  .db-lib .lh{padding:16px 16px 10px;border-bottom:1px solid var(--line)}
  .db-lib .lh .t{display:flex;align-items:center;gap:8px}
  .db-lib .lh h3{font-size:15px;font-weight:800;margin:0}
  .db-lib .lh .x{margin-left:auto;width:26px;height:26px;border:0;background:transparent;border-radius:8px;color:var(--ink-faint);display:grid;place-items:center}
  .db-lib .lh .x:hover{background:var(--surface-2)}
  .db-lib .lh p{font-size:12px;color:var(--ink-faint);margin:5px 0 10px;line-height:1.45}
  .db-lib .lh input{width:100%;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:9px;
    padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--ink)}
  .db-lib .lb{flex:1;overflow-y:auto;padding:8px 10px 14px}
  .db-lib .gp{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);padding:12px 6px 5px}
  .db-lw{display:flex;align-items:flex-start;gap:9px;width:100%;border:0;background:transparent;border-radius:9px;
    padding:8px 6px;text-align:left}
  .db-lw:hover{background:var(--surface-2)}
  .db-lw .bx{width:16px;height:16px;border-radius:5px;border:1.6px solid var(--line-strong);flex-shrink:0;margin-top:1px;
    display:grid;place-items:center;color:transparent}
  .db-lw .bx svg{width:11px;height:11px}
  .db-lw.on .bx{background:var(--brand);border-color:var(--brand);color:#fff}
  .db-lw .tx{min-width:0;flex:1}
  .db-lw .tx b{display:block;font-size:12.5px;font-weight:700;color:var(--ink)}
  .db-lw .tx span{display:block;font-size:11px;color:var(--ink-faint);line-height:1.4;margin-top:1px}
  .db-lw[disabled]{opacity:.45;cursor:not-allowed}
  .db-lib .lf{border-top:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:9px}
  .db-lib .lf .btn{width:100%}
  .db-lib .lf .rs{border:0;background:transparent;color:var(--ink-faint);font-size:12px;font-weight:700;text-decoration:underline}
  .db-lib .lf .rs:hover{color:var(--accent)}
  body.db-lib-open .eq-fab,body.db-lib-open .eq-pill{opacity:0;pointer-events:none}
  /* на широком экране библиотека — именно drawer: сетка ужимается, а не прячется под ним */
  @media(min-width:1280px){ body.db-lib-open main{padding-right:352px;transition:padding-right .22s cubic-bezier(.2,.7,.3,1)} }

  /* --- §30 responsive --- */
  @media(max-width:1279px){
    .db-grid{grid-template-columns:repeat(6,1fr)}
    .db-w[data-s="S"],.db-ph[data-s="S"]{grid-column:span 3}
    .db-w[data-s="M"],.db-ph[data-s="M"]{grid-column:span 3}
    .db-w[data-s="L"],.db-ph[data-s="L"]{grid-column:span 6}
    .db-w[data-s="XL"],.db-ph[data-s="XL"]{grid-column:span 6}
    .db-w[data-s="XL"] .db-mini{grid-template-columns:repeat(4,minmax(0,1fr))}
  }
  /* ТЗ §8.1: планшет — 2 колонки вместо 6 (было: 6-колоночная сетка вплоть
     до 860px, то есть половина реального планшета уже попадала в
     однколоночный phone-режим ниже, минуя двухколоночный). Обычный/широкий
     вместо S/M/L/XL: S и M — половина, L и XL — во всю ширину. */
  @media(max-width:1023px) and (min-width:640px){
    .db-grid{grid-template-columns:repeat(2,1fr)}
    .db-w[data-s="S"],.db-ph[data-s="S"],.db-w[data-s="M"],.db-ph[data-s="M"]{grid-column:span 1}
    .db-w[data-s="L"],.db-ph[data-s="L"],.db-w[data-s="XL"],.db-ph[data-s="XL"]{grid-column:span 2}
    .db-w[data-s="XL"] .db-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  /* ТЗ §8.1: телефон — одна колонка */
  @media(max-width:639px){
    .db-grid{grid-template-columns:1fr}
    .db-w,.db-ph{grid-column:span 1!important}
    .db-mini,.db-w[data-s="XL"] .db-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:860px){
    .db-map{flex-direction:column}
    .db-map .mp{flex:none}
    .db-lib{width:100%;top:auto;height:82vh;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;
      transform:translateY(103%)}
    .db-lib.open{transform:none}
    .db-donut{flex-direction:column;align-items:stretch}
    .db-donut svg{margin:0 auto}
    .db-top .db-sp{margin-left:0}
    /* §30 табличные виджеты на mobile — compact ranking cards, а не горизонтальный скролл */
    .db-scroll{overflow:visible;margin:0;padding:0}
    .db-tb,.db-tb tbody,.db-tb tr,.db-tb td{display:block;width:auto}
    .db-tb thead{display:none}
    .db-tb tr{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;
      border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
    .db-tb tbody tr:hover td{background:transparent}
    .db-tb td{border:0;padding:0}
    .db-tb td.num{margin-left:auto;text-align:right}
    .db-tb td.opt{display:none}
    .db-tb .who{flex:1 1 auto}
    .db-tb tr>td:nth-child(2):not(.num){flex:1 1 55%;min-width:0}
    .db-tb td>div[style*="display:flex"]{flex:1 1 100%}
  }
  .db-scroll{overflow-x:auto;margin:0 -14px;padding:0 14px}
  /* container queries: S-карточка на десктопе и M-карточка на планшете одинаково
     узкие — перестраиваемся по ширине самой карточки, а не по ширине окна */
  .db-w{container-type:inline-size}
  @container (max-width:330px){
    .db-donut{flex-direction:column;align-items:stretch;gap:10px}
    .db-donut svg{margin:0 auto;width:118px;height:118px}
    .db-map{flex-direction:column}
    .db-map .mp{flex:none}
    .db-map .mp svg{max-height:150px}
    .db-tb th.opt,.db-tb td.opt{display:none}
  }

  /* ==========================================================================
     ЧАТЫ · центр истории коммуникаций
     ТЗ «ELYQO Business — раздел „Чаты“» v1.0 от 01.09.2026, §2–§25.
     Основной экран — история и аналитика, а не второе окно мессенджера (§1):
     таблица слева, круговые/линейные виджеты справа, KPI сверху (§29).
     ========================================================================== */
  .ch-hd{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
  .ch-hd .lede{margin-bottom:16px;max-width:720px}
  .ch-per{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-faint)}
  .ch-per select{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;
    padding:7px 10px;font-size:12.5px;font-weight:700;color:var(--ink);outline:none}
  .ch-per select:focus{border-color:var(--brand)}
  .ch-fresh{font-size:11px;font-weight:600;color:var(--ink-faint);white-space:nowrap}
  .ch-rf{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;width:30px;height:30px;
    color:var(--ink-soft);font-size:13px;display:grid;place-items:center;flex:0 0 30px}
  .ch-rf:hover{border-color:var(--brand);color:var(--brand-ink)}

  /* §3 KPI-полоса */
  .ch-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
  .ch-kpis .kpi{display:flex;flex-direction:column;min-width:0}
  .ch-kpis .kpi .l{order:-1}
  .ch-big{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-top:4px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
  .ch-big small{font-size:13px;font-weight:700;color:var(--ink-faint)}
  .ch-kpis .kpi .d{color:var(--ink-faint);font-weight:600;padding-top:6px;line-height:1.4}
  .ch-d{font-weight:800}
  .ch-d.up{color:var(--success)} .ch-d.down{color:var(--accent)} .ch-d.flat{color:var(--ink-faint)}
  .ch-kpi-hot{border-color:color-mix(in srgb,var(--brand) 32%,var(--line))}

  /* §2 верхняя навигация */
  .ch-bar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px}
  .ch-tabs{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:-1px}
  .ch-tab{border:0;background:none;padding:9px 12px;font-size:13px;font-weight:700;color:var(--ink-faint);
    border-bottom:2px solid transparent;font-family:inherit;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
  .ch-tab:hover{color:var(--ink)}
  .ch-tab.on{color:var(--brand-ink);border-bottom-color:var(--brand)}
  .ch-tab span{font-size:11px;font-weight:800;color:var(--ink-faint);background:var(--surface-2);border-radius:999px;padding:1px 6px}
  .ch-tab.on span{background:var(--brand-tint);color:var(--brand-ink)}
  .ch-tab i{font-style:normal;font-size:10.5px;font-weight:800;background:var(--accent);color:#fff;border-radius:999px;padding:1px 6px}
  .ch-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;padding-bottom:8px}

  /* §25 desktop: таблица + правая аналитическая колонка */
  .ch-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:16px;align-items:start}
  .ch-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--hdr) + 14px)}
  .ch-rail .bd{padding:14px}

  /* §6 поиск и панель инструментов */
  .ch-tools{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
  .ch-search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--surface);
    border:1px solid var(--line-strong);border-radius:10px;padding:0 11px}
  .ch-search:focus-within{border-color:var(--brand)}
  .ch-search svg{width:15px;height:15px;color:var(--ink-faint);flex:0 0 15px}
  .ch-search input{flex:1;border:0;outline:none;background:none;padding:9px 0;font-size:13.5px;color:var(--ink);min-width:0}
  .ch-search .x{border:0;background:none;color:var(--ink-faint);font-size:16px;line-height:1;padding:0 2px}
  .ch-tool{border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:8px 12px;
    font-size:12.5px;font-weight:700;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
  .ch-tool:hover{border-color:var(--brand);color:var(--brand-ink)}
  .ch-tool.on{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-ink)}
  .ch-tool svg{width:14px;height:14px}
  .ch-tool b{font-size:10.5px;font-weight:800;background:var(--brand);color:#fff;border-radius:999px;padding:1px 6px}
  .ch-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .ch-chip{border:1px solid var(--brand);background:var(--brand-tint);color:var(--brand-ink);border-radius:999px;
    padding:4px 10px;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
  .ch-chip i{font-style:normal;font-size:13px;line-height:1}
  .ch-chip.clr{border-color:var(--line-strong);background:var(--surface);color:var(--ink-soft)}

  /* §4 основная таблица истории */
  /* фиксированная раскладка: восемь колонок §4 обязаны поместиться в колонку
     истории без горизонтальной прокрутки, поэтому ширины заданы в процентах,
     а «Последнее сообщение» забирает остаток */
  .ch-tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
  .ch-tbl th{text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-faint);padding:9px 7px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface);
    position:sticky;top:0;z-index:2;overflow:hidden;text-overflow:ellipsis}
  .ch-tbl td{padding:9px 7px;border-bottom:1px solid var(--line);vertical-align:top}
  .ch-tbl th.c-cl{width:20%} .ch-tbl th.c-ch{width:11%} .ch-tbl th.c-tp{width:16%}
  .ch-tbl th.c-st{width:11%} .ch-tbl th.c-as{width:10%}  .ch-tbl th.c-dt{width:8%}
  .ch-tbl th.c-mn{width:38px}
  .ch-tbl tr:last-child td{border-bottom:0}
  .ch-row{cursor:pointer}
  .ch-row:hover td{background:var(--surface-2)}
  .ch-row.sel td{background:var(--brand-tint)}
  .ch-row.unread td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
  .ch-cl{display:flex;align-items:center;gap:8px;min-width:0}
  .ch-av{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;
    font-size:10px;font-weight:800;color:#fff;background:linear-gradient(135deg,#7C6BFF,#E85FB4)}
  .ch-av.b{background:linear-gradient(135deg,#3D5CE8,#9C5CFF)}
  .ch-av.c{background:linear-gradient(135deg,#E8794B,#F0B45D)}
  .ch-av.d{background:linear-gradient(135deg,#2E9E86,#7FD3B2)}
  .ch-cn{min-width:0;display:flex;flex-direction:column}
  .ch-cn b{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ch-cn em{font-style:normal;font-size:11px;color:var(--ink-faint);font-weight:600;white-space:nowrap}
  .ch-src{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-soft);
    white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .ch-src i{width:9px;height:9px;border-radius:3px;flex:0 0 9px;display:inline-block}
  .ch-prev{font-size:12.5px;color:var(--ink-soft);line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ch-prev b{color:var(--ink);font-weight:700}
  .ch-prev mark{background:#FFF0B8;color:inherit;border-radius:3px;padding:0 1px}
  .ch-topic{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .ch-type{font-size:10.5px;font-weight:700;color:var(--ink-faint);white-space:nowrap}
  .ch-st{font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 9px;white-space:nowrap;display:inline-block}
  .ch-st.s-OPEN{background:#E3F0FB;color:#2F6C9E}
  .ch-st.s-ASSIGNED{background:var(--brand-tint);color:var(--brand-ink)}
  .ch-st.s-CLOSED{background:color-mix(in srgb,var(--success) 14%,transparent);color:#1E7A55}
  .ch-st.s-ARCHIVED{background:var(--surface-2);color:var(--ink-soft)}
  .ch-st.s-DELETED{background:#FDE7E9;color:#A8323F}
  .ch-out{font-size:10.5px;font-weight:800;border-radius:6px;padding:2px 7px;white-space:nowrap;display:inline-block;margin-top:4px}
  .ch-out.o-booked{background:color-mix(in srgb,var(--success) 13%,transparent);color:#1E7A55}
  .ch-out.o-cancelled{background:#FDE7E9;color:#A8323F}
  .ch-out.o-consult{background:#EAF1F8;color:#3A6F9A}
  .ch-out.o-none{background:var(--surface-2);color:var(--ink-faint)}
  .ch-when{font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;display:block;
    overflow:hidden;text-overflow:ellipsis}
  .ch-when em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-faint)}
  .ch-as{font-size:11.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ch-kebab{border:0;background:none;width:28px;height:28px;border-radius:8px;color:var(--ink-faint);font-size:16px;line-height:1}
  .ch-kebab:hover{background:var(--surface-2);color:var(--ink)}
  .ch-nass{color:var(--ink-faint);font-weight:600}
  .ch-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
  .ch-tg{font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;background:var(--surface-2);color:var(--ink-soft)}

  /* §25 mobile: строки превращаются в карточки */
  .ch-cards{display:none;flex-direction:column;gap:10px}
  .ch-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    padding:13px;text-align:left;width:100%;font:inherit;display:block}
  .ch-card.unread{border-left:3px solid var(--brand)}
  .ch-card .t{display:flex;align-items:center;gap:9px;margin-bottom:7px}
  .ch-card .t .ch-cn{flex:1;min-width:0}
  .ch-card .t .ch-when{margin-left:auto;flex:0 0 auto;text-align:right}
  .ch-card .m{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}

  .ch-more{width:100%;margin-top:12px}
  .ch-empty{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);
    padding:28px 22px;text-align:center}
  .ch-empty b{font-size:15px;display:block;margin-bottom:6px}
  .ch-empty p{font-size:13px;color:var(--ink-soft);max-width:440px;margin:0 auto 14px;line-height:1.55}
  .ch-werr{border:1px solid var(--accent);background:#FEF1F2;border-radius:12px;padding:12px;font-size:12.5px}
  .ch-werr button{margin-top:8px}

  /* §13–§15 аналитика */
  .ch-ch-hd{display:flex;align-items:center;gap:8px;margin-bottom:11px}
  .ch-ch-hd b{font-size:13.5px;letter-spacing:-.01em}
  .ch-ch-hd .ch-sel{margin-left:auto}
  .ch-sel{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:5px 8px;
    font-size:11.5px;font-weight:700;color:var(--ink-soft);outline:none;font-family:inherit}
  .ch-sel:focus{border-color:var(--brand)}
  .ch-dist{display:flex;flex-direction:column;align-items:center;gap:12px}
  .ch-donut{width:132px;height:132px;flex:0 0 132px}
  .ch-dn{fill:var(--ink);font-size:23px;font-weight:800;font-family:var(--font)}
  .ch-ds{fill:var(--ink-faint);font-size:9.5px;font-weight:700;font-family:var(--font)}
  .ch-legend{width:100%;display:flex;flex-direction:column;gap:3px}
  .ch-lg{display:flex;align-items:center;gap:8px;border:0;background:none;padding:4px 5px;border-radius:7px;
    font:inherit;font-size:12px;text-align:left;width:100%}
  .ch-lg:hover{background:var(--surface-2)}
  .ch-lg.on{background:var(--brand-tint)}
  .ch-lg i{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
  .ch-lgn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink-soft)}
  .ch-lgv{font-weight:800;white-space:nowrap;color:var(--ink);font-size:11.5px}
  .ch-lgv em{font-style:normal;font-weight:700;color:var(--ink-faint)}

  .ch-rank{display:flex;flex-direction:column;gap:8px}
  .ch-rk{display:flex;flex-direction:column;gap:4px;border:0;background:none;padding:4px 5px;border-radius:8px;
    font:inherit;font-size:12px;text-align:left;width:100%}
  .ch-rk:hover{background:var(--surface-2)}
  .ch-rk.on{background:var(--brand-tint)}
  .ch-rk .rw{display:flex;align-items:baseline;gap:8px;min-width:0}
  .ch-rkn{flex:1;min-width:0;color:var(--ink-soft);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ch-track{width:100%;height:7px;background:var(--surface-2);border-radius:99px;overflow:hidden}
  .ch-fill{display:block;height:100%;border-radius:99px}
  .ch-rkv{font-weight:800;font-size:11.5px;white-space:nowrap;flex:0 0 auto}
  .ch-rkv em{font-style:normal;font-weight:700;color:var(--ink-faint)}
  .ch-all{border:0;background:none;padding:6px 4px 0;font:inherit;font-size:11.5px;font-weight:800;
    color:var(--brand-ink);text-decoration:underline;text-align:left}

  .ch-svg{width:100%;height:auto;display:block;overflow:visible}
  .ch-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
  .ch-ax{fill:var(--ink-faint);font-size:9.5px;font-weight:700;font-family:var(--font)}
  .ch-lin{fill:none;stroke:url(#chStroke);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
  .ch-prev-lin{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:4 4}
  .ch-sla{stroke:var(--warn);stroke-width:1;stroke-dasharray:4 3;opacity:.8}
  .ch-slat{fill:var(--warn);font-size:9px;font-weight:800;font-family:var(--font)}
  .ch-mark{fill:#fff;stroke:#8B5CFF;stroke-width:2.6}
  .ch-hit{cursor:crosshair}
  .ch-box{position:relative}
  .ch-tip{position:absolute;transform:translate(-50%,-100%);background:#1B1A2E;color:#fff;font-size:11.5px;
    font-weight:600;padding:6px 9px;border-radius:8px;pointer-events:none;white-space:nowrap;z-index:5;box-shadow:var(--shadow-md)}
  .ch-tip[hidden]{display:none}
  .ch-note{font-size:11px;color:var(--ink-faint);line-height:1.45;margin-top:9px}
  .ch-note b{color:var(--ink-soft)}

  /* §9 compact preview — панель быстрого просмотра, не мессенджер */
  .ch-dw{position:fixed;top:0;right:0;bottom:0;width:432px;max-width:96vw;background:var(--surface);
    border-left:1px solid var(--line-strong);box-shadow:var(--shadow-pop);z-index:110;display:flex;flex-direction:column;
    transform:translateX(102%);transition:transform .2s ease}
  .ch-dw.open{transform:none}
  .ch-dw .dh{padding:14px 16px;display:flex;align-items:flex-start;gap:10px;color:#fff;
    background:linear-gradient(120deg,var(--brand),#8E6FE8)}
  .ch-dw .dh.closed{background:linear-gradient(120deg,#2E8F5C,#3AA76D)}
  .ch-dw .dh.arch{background:linear-gradient(120deg,#5C5D72,#8A8AA0)}
  .ch-dw .dh b{font-size:14px;font-weight:800;display:block}
  .ch-dw .dh .sub{font-size:11.5px;color:rgba(255,255,255,.85);font-weight:600;margin-top:3px;line-height:1.45}
  .ch-dw .dh .x{margin-left:auto;width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.18);
    color:#fff;font-size:16px;flex:0 0 30px}
  .ch-dw .db{padding:14px 16px;overflow-y:auto;flex:1}
  .ch-dw .foot{padding:11px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
  .ch-dw .foot .btn{flex:1;min-width:132px}
  .ch-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
  .ch-mt{font-size:11px;font-weight:700;background:var(--surface-2);color:var(--ink-soft);border-radius:7px;padding:4px 8px;
    display:inline-flex;align-items:center;gap:5px}
  .ch-mt b{color:var(--ink);font-weight:800}
  .ch-mt.act{border:1px dashed var(--line-strong);background:var(--surface);cursor:pointer}
  .ch-mt.act:hover{border-color:var(--brand);color:var(--brand-ink)}
  .ch-cc{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:12px;
    margin-bottom:12px;width:100%;text-align:left;background:none;font:inherit}
  .ch-cc:hover{border-color:var(--brand)}
  .ch-cc .ch-av{width:38px;height:38px;flex:0 0 38px;font-size:12.5px}
  .ch-cc .n{flex:1;min-width:0}
  .ch-cc .n b{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ch-cc .n span{font-size:11.5px;color:var(--ink-faint);font-weight:600}
  .ch-cc .chev{color:var(--ink-faint);font-size:18px;flex:0 0 auto}
  .ch-cst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
  .ch-cst div{background:var(--surface-2);border-radius:10px;padding:8px 9px;min-width:0}
  .ch-cst b{font-size:14px;font-weight:800;display:block}
  .ch-cst span{font-size:10.5px;font-weight:700;color:var(--ink-faint)}
  .ch-feed{display:flex;flex-direction:column;gap:9px}
  .ch-day{text-align:center;font-size:10.5px;font-weight:800;color:var(--ink-faint);text-transform:uppercase;
    letter-spacing:.04em;margin:4px 0 2px}
  .ch-msg{max-width:86%;border-radius:13px;padding:9px 11px;font-size:13px;line-height:1.5;position:relative}
  .ch-msg.in{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:5px}
  .ch-msg.out{align-self:flex-end;background:var(--brand-tint);border-bottom-right-radius:5px}
  .ch-msg.sys{align-self:center;max-width:100%;background:none;border:1px dashed var(--line-strong);
    font-size:11.5px;color:var(--ink-faint);text-align:center;padding:7px 10px}
  .ch-msg .who{font-size:10.5px;font-weight:800;color:var(--ink-faint);margin-bottom:3px}
  .ch-msg .ts{font-size:10px;font-weight:600;color:var(--ink-faint);margin-top:4px;text-align:right}
  .ch-msg.auto .who::after{content:" · авто";color:var(--brand-ink)}
  .ch-lazy{width:100%;margin-bottom:10px}
  .ch-menu{position:fixed;z-index:120;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;
    box-shadow:var(--shadow-pop);padding:5px;min-width:216px;max-height:70vh;overflow:auto}
  .ch-menu .hd{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:7px 10px 4px}
  .ch-menu button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;padding:8px 10px;
    border-radius:8px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);text-align:left}
  .ch-menu button:hover{background:var(--surface-2)}
  .ch-menu button.on{background:var(--brand-tint);color:var(--brand-ink);font-weight:700}
  .ch-menu button.dng{color:var(--accent)}
  .ch-menu button svg{width:15px;height:15px;flex:0 0 15px;color:var(--ink-faint)}
  .ch-menu .sp{height:1px;background:var(--line);margin:4px 6px}
  .ch-menu .ns{font-size:11.5px;color:var(--ink-faint);padding:6px 10px 8px;line-height:1.45}

  .ch-int{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line);
    border-radius:11px;margin-bottom:8px}
  .ch-int i{width:11px;height:11px;border-radius:4px;flex:0 0 11px}
  .ch-int .n{flex:1;min-width:0}
  .ch-int .n b{font-size:13px;display:block}
  .ch-int .n span{font-size:11px;color:var(--ink-faint);font-weight:600}
  .ch-sw{position:relative;width:38px;height:22px;flex:0 0 38px;border:0;border-radius:99px;background:var(--line-strong);
    transition:background .15s}
  .ch-sw.on{background:var(--brand)}
  .ch-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
    transition:transform .15s}
  .ch-sw.on::after{transform:translateX(16px)}

  /* истории нужна ширина: раздел не ограничиваем общими 1180 px */
  main:has(.ch-main){max-width:none;padding-left:22px;padding-right:22px}

  /* §25 аналитика уезжает под таблицу раньше, чем начинается планшет: восемь
     колонок истории §4 читаются только при ширине от ~1000 px, а с правой
     колонкой такой ширины на 1280-м экране уже не остаётся */
  @media(max-width:1380px){
    .ch-main{grid-template-columns:minmax(0,1fr)}
    .ch-rail{position:static;flex-direction:row;flex-wrap:wrap}
    .ch-rail > .card{flex:1 1 300px;min-width:290px}
  }
  @media(max-width:1180px){
    .ch-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media(max-width:900px){
    .ch-tbl th.opt,.ch-tbl td.opt{display:none}
  }
  /* §25 mobile: карточки вместо таблицы, фильтры — bottom sheet, preview — отдельный экран */
  @media(max-width:720px){
    .ch-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
    .ch-per{margin-left:0;width:100%}
    .ch-per select{flex:1}
    .ch-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
    .ch-tabs::-webkit-scrollbar{display:none}
    .ch-acts{margin-left:0;width:100%}
    .ch-acts .btn,.ch-acts .ch-tool{flex:1;min-height:44px}
    .ch-tool{min-height:44px}
    .ch-tbl-wrap{display:none}
    .ch-cards{display:flex}
    .ch-dw{width:100%;max-width:none;border-left:0}
    /* круглая кнопка мессенджера висит поверх всего (z-index 2400) и на узком
       экране накрывает нижние кнопки ящика — пока он открыт, прячем её */
    body.ch-dw-on .eq-fab{display:none}
    /* §25 фильтры на мобильном приезжают снизу как bottom sheet */
    .ch-dw.sheet{top:auto;height:86vh;border-radius:18px 18px 0 0;border-left:0;
      border-top:1px solid var(--line-strong);transform:translateY(103%)}
    .ch-dw.sheet.open{transform:none}
    .ch-dw .foot .btn{min-height:44px}
    .ch-donut{width:118px;height:118px;flex:0 0 118px}
  }


  /* ==========================================================================
     КЛИЕНТЫ · CRM (ТЗ «ELYQO · BUSINESS — КЛИЕНТЫ» ULTIMATE v2.0)
     §0 верх — состояние базы, середина — аналитика, низ — операционная таблица.
     ======================================================================== */
  .modal .box.clw{max-width:760px}
  .cl-hd{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
  .cl-hd .cl-hd-t{flex:1;min-width:220px}
  .cl-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  /* CL_SVG отдаёт <svg> без width/height — без этого правила знак в кнопке
     раздувается до 100% высоты строки (как уже решено в #sv-root и .ap-head) */
  #cl-root .btn svg{width:15px;height:15px;flex-shrink:0}
  .cl-per{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--ink-faint)}
  .cl-per select{border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;
    padding:8px 10px;font-size:12.5px;font-weight:700;color:var(--ink);min-height:38px}
  .cl-note-per{font-size:11.5px;color:var(--ink-faint);font-weight:600;margin:-6px 0 14px}

  /* §3 KPI-полоса: клик по карточке применяет фильтр к списку */
  .cl-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
  .cl-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);padding:13px 14px;text-align:left;font:inherit;color:inherit;
    display:flex;flex-direction:column;min-width:0;min-height:104px;position:relative}
  .cl-kpi:hover{border-color:color-mix(in srgb,var(--brand) 42%,var(--line))}
  .cl-kpi:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .cl-kpi.on{border-color:var(--brand);background:var(--brand-tint)}
  .cl-kpi .l{font-size:11px;font-weight:700;color:var(--ink-faint);display:flex;align-items:center;gap:5px}
  .cl-kpi .n{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-top:5px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
  .cl-kpi .n small{font-size:12px;font-weight:700;color:var(--ink-faint)}
  .cl-kpi .sub{font-size:11px;font-weight:600;color:var(--ink-faint);margin-top:2px}
  .cl-kpi .sp{margin-top:auto;padding-top:8px;line-height:0}
  .cl-kpi .sp svg{width:100%;display:block}
  .cl-d{font-size:11px;font-weight:800;border-radius:999px;padding:1px 6px;white-space:nowrap}
  .cl-d.up{color:#1F7A56;background:color-mix(in srgb,var(--success) 16%,transparent)}
  .cl-d.down{color:#A83A50;background:color-mix(in srgb,var(--accent) 14%,transparent)}
  .cl-d.flat{color:var(--ink-faint);background:var(--surface-2)}
  .cl-q{width:14px;height:14px;flex:0 0 14px;border-radius:50%;border:1px solid var(--line-strong);
    color:var(--ink-faint);font-size:9px;font-weight:800;display:grid;place-items:center;background:var(--surface)}

  /* §4 аналитика */
  .cl-an-h{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
  .cl-an-h .sec{margin:0}
  .cl-fold{margin-left:auto;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;
    padding:7px 11px;font-size:12px;font-weight:700;color:var(--ink-soft);min-height:36px;display:inline-flex;align-items:center;gap:6px}
  .cl-fold:hover{border-color:var(--brand);color:var(--brand-ink)}
  .cl-fold svg{width:13px;height:13px;transition:transform .18s ease}
  .cl-fold.off svg{transform:rotate(-90deg)}
  .cl-ch{display:grid;gap:14px;margin-bottom:14px;align-items:start}
  .cl-ch-3{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr)}
  .cl-ch-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cl-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;min-width:0;overflow:hidden}
  .cl-c > .bd{padding:14px 15px;flex:1;min-width:0}
  .cl-ct{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;margin-bottom:3px}
  .cl-ct .cl-q{margin-left:2px}
  .cl-cs{font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-bottom:11px;line-height:1.45}
  .cl-lg{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-bottom:8px}
  .cl-lg i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}
  .cl-svg{width:100%;height:auto;display:block;overflow:visible}
  .cl-gl{stroke:var(--line);stroke-width:1}
  .cl-ax{font-size:9.6px;fill:var(--ink-faint);font-weight:700}
  .cl-line{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .cl-dot{cursor:pointer}
  .cl-bar{cursor:pointer;transition:opacity .12s ease}
  .cl-bar:hover{opacity:.78}

  /* горизонтальные бары (сегменты, дни с последнего визита) */
  .cl-hb{display:flex;flex-direction:column;gap:9px}
  .cl-hbr{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr) auto;align-items:center;gap:9px;
    background:none;border:0;padding:2px 0;font:inherit;color:inherit;text-align:left;width:100%;min-height:30px}
  .cl-hbr:hover .cl-hbl{color:var(--brand-ink)}
  .cl-hbr.on .cl-hbl{color:var(--brand-ink);font-weight:800}
  .cl-hbl{font-size:12px;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;gap:6px;min-width:0}
  .cl-hbl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-hbt{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden;min-width:0}
  .cl-hbt i{display:block;height:100%;border-radius:999px}
  .cl-hbv{font-size:12px;font-weight:800;white-space:nowrap}
  .cl-hbv em{font-style:normal;font-weight:700;color:var(--ink-faint);font-size:11px;margin-left:4px}

  /* donut */
  .cl-dn{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .cl-dn-s{width:132px;height:132px;flex:0 0 132px}
  .cl-dn-l{flex:1;min-width:130px;display:flex;flex-direction:column;gap:6px}
  .cl-dn-r{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;background:none;border:0;
    padding:3px 0;font-family:inherit;color:var(--ink-soft);text-align:left;width:100%;min-height:26px}
  .cl-dn-r:hover,.cl-dn-r.on{color:var(--brand-ink)}
  .cl-dn-r i{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
  .cl-dn-r span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-dn-r b{font-weight:800}
  .cl-dn-r em{font-style:normal;color:var(--ink-faint);font-weight:700;font-size:11px;min-width:26px;text-align:right}

  /* компактные таблицы аналитики */
  .cl-mt{width:100%;border-collapse:collapse;font-size:12.5px}
  .cl-mt th{text-align:left;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-faint);padding:6px 7px;border-bottom:1px solid var(--line);white-space:nowrap}
  .cl-mt td{padding:7px;border-bottom:1px solid var(--line);vertical-align:middle}
  .cl-mt tr:last-child td{border-bottom:0}
  .cl-mt .r{text-align:right;white-space:nowrap}
  .cl-mt tbody tr:hover td{background:var(--surface-2)}
  .cl-mt .lk{background:none;border:0;font:inherit;color:inherit;font-weight:700;text-align:left;padding:0;
    display:flex;align-items:center;gap:8px;min-height:26px;width:100%}
  .cl-mt .lk:hover{color:var(--brand-ink)}
  .cl-more{display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-top:1px solid var(--line);
    background:none;width:100%;padding:10px;font-size:12px;font-weight:700;color:var(--brand-ink);min-height:40px}
  .cl-more:hover{background:var(--brand-tint)}

  .cl-av{width:26px;height:26px;border-radius:50%;flex:0 0 26px;display:grid;place-items:center;
    font-size:9.5px;font-weight:800;color:#fff;letter-spacing:.02em}

  /* когорты */
  .cl-co{overflow-x:auto}
  .cl-co table{width:100%;border-collapse:collapse;font-size:11.5px;min-width:520px}
  .cl-co th{font-size:10px;font-weight:800;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;
    padding:6px 5px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line)}
  .cl-co th:first-child,.cl-co td:first-child{text-align:left;white-space:nowrap;font-weight:700}
  .cl-co td{padding:4px 5px;text-align:center;border-bottom:1px solid var(--line)}
  .cl-co td i{font-style:normal;display:block;border-radius:7px;padding:6px 4px;font-weight:800;font-size:11.5px}

  /* лента активности */
  .cl-fd{display:flex;flex-direction:column;gap:2px}
  .cl-fdr{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:10px;background:none;border:0;
    font:inherit;color:inherit;text-align:left;width:100%;min-height:44px}
  .cl-fdr:hover{background:var(--surface-2)}
  .cl-fdr .n{flex:1;min-width:0}
  .cl-fdr .n b{font-size:12.5px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-fdr .n span{font-size:11.5px;color:var(--ink-faint);font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-fdr time{font-size:11px;color:var(--ink-faint);font-weight:700;white-space:nowrap;flex:0 0 auto}

  /* §6 панель списка */
  .cl-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
  .cl-search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:var(--surface);
    border:1px solid var(--line-strong);border-radius:10px;padding:0 11px;min-height:40px}
  /* ---- узкий экран: поиск и фильтры — закреплённая строка под шапкой
     (ТЗ §8.4). :has() отличает именно тулбар от одноимённого .cl-bar
     графика (полоса сегмента) — тот же класс, другой смысл, коллизия имён
     в файле. Порог — тот же 720px, где реестр уже становится карточками
     (см. .cl-cards ниже): настраивать колонки там нечего, у карточек их
     нет вовсе (§7 «карточки»). Полноценный лист настройки колонок вместо
     кнопки на планшете (§8.4) — отдельная, более узкая задача. */
  @media(max-width:720px){
    .cl-bar:has(.cl-search){position:sticky;top:var(--hdr);z-index:10;background:var(--bg);
      padding:8px 0;margin-bottom:6px}
    #cl-cols{display:none}
  }
  .cl-search:focus-within{border-color:var(--brand)}
  .cl-search svg{width:15px;height:15px;color:var(--ink-faint);flex:0 0 15px}
  .cl-search input{flex:1;border:0;outline:none;background:none;padding:10px 0;font-size:13.5px;color:var(--ink);min-width:0}
  .cl-search .x{border:0;background:none;color:var(--ink-faint);font-size:17px;line-height:1;padding:0 4px;min-width:26px}
  .cl-tool{border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:8px 12px;
    font-size:12.5px;font-weight:700;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px;
    white-space:nowrap;min-height:40px}
  .cl-tool:hover{border-color:var(--brand);color:var(--brand-ink)}
  .cl-tool.on{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-ink)}
  .cl-tool svg{width:14px;height:14px}
  .cl-tool b{font-size:10.5px;font-weight:800;background:var(--brand);color:#fff;border-radius:999px;padding:1px 6px}
  .cl-segs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .cl-seg{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);border-radius:999px;
    padding:7px 13px;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:7px;min-height:38px}
  .cl-seg:hover{border-color:var(--brand);color:var(--brand-ink)}
  .cl-seg.on{background:var(--brand);border-color:var(--brand);color:#fff}
  /* счётчик в пилюле — «(24)» тем же шрифтом, что подпись (эталон стр. 1) */
  .cl-seg em{font-style:normal;font-size:12.5px;font-weight:700;background:none;color:inherit;padding:0}
  .cl-seg em.chev{display:inline-flex;margin-left:-2px}
  .cl-seg em.chev svg{width:13px;height:13px;transition:transform .15s}
  .cl-seg em.chev.up svg{transform:rotate(180deg)}
  .cl-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .cl-chip{border:1px solid var(--brand);background:var(--brand-tint);color:var(--brand-ink);border-radius:999px;
    padding:5px 10px;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;min-height:30px}
  .cl-chip i{font-style:normal;font-size:14px;line-height:1}
  .cl-chip.clr{border-color:var(--line-strong);background:var(--surface);color:var(--ink-soft)}

  /* §6 массовые действия */
  .cl-bulk{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--brand-tint);
    border:1px solid var(--brand);border-radius:12px;padding:9px 12px;margin-bottom:10px}
  .cl-bulk b{font-size:12.5px;font-weight:800;color:var(--brand-ink)}
  .cl-bulk .sp{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}

  /* §6–§7 таблица */
  .cl-tw{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .cl-tw .in{overflow-x:auto}
  .cl-tbl{width:100%;border-collapse:collapse;font-size:13px}
  .cl-tbl th{text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-faint);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
  .cl-tbl th.s{cursor:pointer;user-select:none}
  .cl-tbl th.s:hover{color:var(--brand-ink)}
  .cl-tbl th .ar{font-size:9px;margin-left:3px;color:var(--brand)}
  .cl-tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
  .cl-tbl tbody tr:last-child td{border-bottom:0}
  .cl-tbl tbody tr{cursor:pointer}
  .cl-tbl tbody tr:hover td{background:var(--surface-2)}
  .cl-tbl tbody tr.sel td{background:var(--brand-tint)}
  .cl-tbl tbody tr:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
  .cl-tbl td.r,.cl-tbl th.r{text-align:right}
  .cl-tbl .ck{width:34px;padding-right:0}
  .cl-tbl .ck input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
  .cl-nm{display:flex;align-items:center;gap:9px;min-width:0}
  .cl-nm .n{min-width:0}
  .cl-nm .n b{font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-nm .n span{font-size:11.5px;color:var(--ink-faint);font-weight:600;display:block;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-money{font-weight:800;white-space:nowrap;background:none;border:0;font-family:inherit;font-size:13px;
    color:inherit;padding:0;text-align:right;min-height:24px}
  .cl-money:hover{color:var(--brand-ink);text-decoration:underline}
  .cl-hid{color:var(--ink-faint);font-weight:600;letter-spacing:.06em}
  .cl-nba{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-soft);
    background:var(--surface-2);border-radius:8px;padding:4px 8px;white-space:nowrap;max-width:100%}
  .cl-nba svg{width:12px;height:12px;flex:0 0 12px}
  .cl-nba.hot{background:color-mix(in srgb,var(--warn) 18%,transparent);color:#8A5A12}
  .cl-nba.bad{background:color-mix(in srgb,var(--accent) 14%,transparent);color:#A83A50}
  .cl-nba span{overflow:hidden;text-overflow:ellipsis}
  /* бейджи сегментов — строчные, не капсом (эталон стр. 1: «Постоянный» в
     лаванде, «Новый» в голубом, «VIP» в розовом) */
  .cl-sg{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
    padding:4px 10px;border-radius:999px;white-space:nowrap;margin:0 3px 3px 0}
  .cl-sg.NEW{background:color-mix(in srgb,var(--blue) 13%,transparent);color:var(--blue)}
  .cl-sg.LOYAL{background:var(--brand-tint);color:var(--brand-ink)}
  .cl-sg.VIP{background:color-mix(in srgb,#E4568C 15%,transparent);color:#C2286A}
  .cl-sg.HIGH{background:color-mix(in srgb,var(--success) 16%,transparent);color:#1F7A56}
  .cl-sg.DORMANT{background:var(--surface-2);color:var(--ink-soft)}
  .cl-sg.RISK{background:color-mix(in srgb,var(--accent) 16%,transparent);color:#A83A50}
  .cl-sg.ARCH{background:#EFEFF6;color:#6B6C82}
  .cl-tg{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;
    background:var(--surface-2);color:var(--ink-soft);margin:0 3px 3px 0;max-width:150px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
  .cl-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 12px;border-top:1px solid var(--line);
    font-size:12px;font-weight:600;color:var(--ink-faint)}
  .cl-foot .btn{min-height:38px}
  /* эталон стр. 1: «1–5 из 24» слева, номера страниц справа */
  .cl-range{font-weight:600}
  .cl-pager{margin-left:auto;display:inline-flex;gap:6px;align-items:center}
  .cl-pager .pg{min-width:34px;height:34px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:10px;font-weight:700;font-size:12.5px;color:var(--ink-soft);display:inline-flex;
    align-items:center;justify-content:center;padding:0 6px;cursor:pointer;font-family:inherit}
  .cl-pager .pg svg{width:14px;height:14px}
  .cl-pager .pg.fw svg{transform:rotate(180deg)}
  .cl-pager .pg:hover{border-color:var(--brand);color:var(--brand-ink)}
  .cl-pager .pg.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .cl-pager .pg[disabled]{opacity:.4;cursor:default;pointer-events:none}
  /* «⋯» — компактная кнопка меню действий (шапка, заголовок таблицы, строка) */
  .cl-dots{border:0;background:none;color:var(--ink-faint);font-size:19px;font-weight:800;line-height:1;
    padding:2px 8px;border-radius:8px;cursor:pointer;min-height:30px;font-family:inherit}
  .cl-dots:hover{background:var(--surface-2);color:var(--ink)}
  /* «Записать» появляется на строке под курсором (эталон стр. 1) */
  .cl-tbl td.act{white-space:nowrap;width:1%}
  .cl-rowact{display:inline-flex;gap:4px;align-items:center;justify-content:flex-end}
  .cl-tbl .cl-rowact .bk{visibility:hidden}
  .cl-tbl tr:hover .cl-rowact .bk,.cl-tbl tr:focus-within .cl-rowact .bk{visibility:visible}

  /* §19 карточки вместо таблицы на мобильном */
  .cl-cards{display:none;flex-direction:column;gap:10px}
  .cl-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    padding:12px;text-align:left;font:inherit;color:inherit;width:100%;display:flex;flex-direction:column;gap:8px;
    content-visibility:auto;contain-intrinsic-size:auto 118px}
  .cl-card:hover{border-color:var(--brand)}
  .cl-card .t{display:flex;align-items:center;gap:10px}
  .cl-card .m{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--ink-soft)}
  .cl-card .m em{font-style:normal;color:var(--ink-faint);font-weight:600;display:block;font-size:10.5px}

  /* пустые состояния и ошибки */
  .cl-empty{padding:34px 22px;text-align:center;max-width:520px;margin:0 auto}
  .cl-empty .ic{width:52px;height:52px;border-radius:50%;background:var(--brand-tint);color:var(--brand-ink);
    display:grid;place-items:center;margin:0 auto 12px}
  .cl-empty .ic svg{width:24px;height:24px}
  .cl-empty b{font-size:15px;display:block;margin-bottom:6px}
  .cl-empty p{font-size:13px;color:var(--ink-soft);margin-bottom:12px;line-height:1.6}
  .cl-err{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));margin-bottom:14px}

  /* §8 карточка клиента — ящик 45–55 % ширины */
  .cl-dw{position:fixed;top:0;right:0;bottom:0;width:52vw;min-width:460px;max-width:820px;background:var(--surface);
    border-left:1px solid var(--line-strong);box-shadow:var(--shadow-pop);z-index:120;display:flex;flex-direction:column;
    transform:translateX(102%);transition:transform .22s ease}
  .cl-dw.open{transform:none}
  .cl-dw .dh{padding:16px 18px;color:#fff;background:linear-gradient(120deg,var(--brand),#8E6FE8);
    display:flex;align-items:flex-start;gap:13px}
  .cl-dw .dh.vip{background:linear-gradient(120deg,#9C7038,#C98A5A)}
  .cl-dw .dh.risk{background:linear-gradient(120deg,#A83A50,#C9564A)}
  .cl-dw .dh.arch{background:linear-gradient(120deg,#5C5D72,#8A8AA0)}
  .cl-dw .dh .av{width:46px;height:46px;border-radius:50%;flex:0 0 46px;display:grid;place-items:center;
    background:rgba(255,255,255,.2);font-size:15px;font-weight:800}
  .cl-dw .dh .n{flex:1;min-width:0}
  .cl-dw .dh .n b{font-size:17px;font-weight:800;display:block;letter-spacing:-.01em}
  .cl-dw .dh .n .c{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);margin-top:3px;
    display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .cl-dw .dh .n .c a{text-decoration:underline;text-underline-offset:2px}
  /* иконка без width/height растягивается на всю ширину контейнера — фиксируем */
  .cl-dw .dh .n .c > span{display:inline-flex;align-items:center;gap:6px;min-width:0}
  .cl-dw .dh .n .c svg{width:13px;height:13px;flex:0 0 13px}
  .cl-dw .dh .x{width:32px;height:32px;flex:0 0 32px;border:0;border-radius:9px;background:rgba(255,255,255,.18);
    color:#fff;font-size:17px}
  .cl-dw .dh .x:hover{background:rgba(255,255,255,.3)}
  /* на градиентной шапке пастельные плашки сегментов не читаются — там своя палитра */
  .cl-dw .dh .cl-sg{background:rgba(255,255,255,.22);color:#fff}
  .cl-dw-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);overflow-x:auto;
    scrollbar-width:none;background:var(--surface)}
  .cl-dw-tabs::-webkit-scrollbar{display:none}
  .cl-dw-tab{border:0;background:none;padding:11px 12px;font-size:12.5px;font-weight:700;color:var(--ink-faint);
    border-bottom:2px solid transparent;font-family:inherit;white-space:nowrap;min-height:44px}
  .cl-dw-tab:hover{color:var(--ink)}
  .cl-dw-tab.on{color:var(--brand-ink);border-bottom-color:var(--brand)}
  .cl-dw-tab em{font-style:normal;font-size:10.5px;font-weight:800;background:var(--surface-2);color:var(--ink-faint);
    border-radius:999px;padding:1px 6px;margin-left:5px}
  .cl-dw .db{padding:15px 18px;overflow-y:auto;flex:1}
  .cl-dw .foot{padding:11px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;background:var(--surface)}
  .cl-dw .foot .btn{flex:1;min-width:130px;min-height:42px}

  /* ==========================================================================
     КАРТОЧКА КЛИЕНТА — один в один по референсу владелицы (21.09.2026).
     Страница прокручивается ЦЕЛИКОМ (шапка, статистика, вкладки, список), внизу
     остаётся только кнопка «Новый визит» — как в присланных скринах. Поэтому
     прокрутка переехала с .db на сам ящик, а .db больше не отдельный скролл:
     два вложенных скролла на телефоне невозможно разделить пальцем.
     ========================================================================== */
  .cl-dw{overflow-y:auto;overscroll-behavior:contain}
  /* Ящик — колонка flex. Без запрета на сжатие его дети «ужимаются» под
     высоту экрана ВМЕСТО прокрутки: карточка статистики схлопывалась в 2px,
     полоса вкладок — в 1px (проверено). */
  .cl-dw > *{flex:0 0 auto}
  .cl-dw .db{overflow:visible;flex:0 0 auto;padding:0 16px 16px}
  .clx-top{display:flex;align-items:center;justify-content:space-between;
    padding:10px 10px 0;position:sticky;top:0;z-index:3;background:var(--surface)}
  .clx-tr{display:flex;align-items:center;gap:2px}
  .clx-ic{width:40px;height:40px;border:0;background:none;border-radius:12px;color:var(--ink);
    display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
  .clx-ic:hover{background:var(--surface-2)}
  .clx-ic svg{width:21px;height:21px}
  .clx-edit{border:0;background:none;font-family:inherit;font-size:14.5px;font-weight:600;
    color:var(--ink);padding:9px 10px;border-radius:10px;-webkit-tap-highlight-color:transparent}
  .clx-edit:hover{background:var(--surface-2)}

  .clx-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 18px 16px}
  /* Цвета НАШИ, а не референса (просьба владелицы 21.09.2026): у Booksy чёрные
     плитки и серый аватар, у нас — фирменный фиолетовый и градиент кабинета. */
  .clx-av{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
    font-size:30px;font-weight:800;letter-spacing:.02em;color:#fff;
    background:linear-gradient(145deg,#8E7CFF,#5B4CFF);
    box-shadow:0 12px 30px -14px rgba(91,76,255,.75)}
  .clx-av.vip{background:linear-gradient(145deg,#C9A66B,#9C7038)}
  .clx-av.risk{background:linear-gradient(145deg,#D98090,#A83A50)}
  .clx-av.arch{background:linear-gradient(145deg,#9A9AAE,#5C5D72)}
  .clx-nm{display:block;margin-top:13px;font-size:26px;font-weight:800;line-height:1.2;
    letter-spacing:-.02em;color:var(--ink);max-width:100%;overflow-wrap:anywhere}
  .clx-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:11px}
  /* Предупреждение «тот же номер у другого клиента» — карточка клиента.
     Не ошибка (сохранять ничего не мешает) и не просто подсказка: это
     расхождение данных, из-за которого визит и письмо о нём уходят не тому
     человеку (21.09.2026). Поэтому янтарный, а не красный и не серый. */
  .clx-warn{margin:2px 0 10px;max-width:520px;padding:10px 14px;border-radius:14px;
    background:#FFF7E8;border:1px solid #F2DFB4;color:#6B4E12;
    font-size:12.5px;line-height:1.5;text-align:left}
  .clx-warn b{font-weight:800}
  .clx-warn span{display:block;margin-top:3px;color:#8A7238}
  /* Было padding:0 и цель касания 19px — по ней надо попасть пальцем, чтобы
     уйти в карточку-дубль и разобраться с совпавшим номером (08.10.2026). */
  .clx-warn-l{display:inline-flex;align-items:center;min-height:38px;padding:4px 10px;border:0;
    background:rgba(107,78,18,.08);border-radius:10px;font:inherit;font-weight:800;color:#6B4E12;
    text-decoration:underline;text-underline-offset:2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .clx-warn-l:hover{color:var(--brand-ink)}
  .clx-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;
    background:var(--surface-2);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink)}
  .clx-pill.add{cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
  .clx-pill.add:hover{border-color:var(--brand);color:var(--brand-ink)}
  .clx-pill.add svg{width:14px;height:14px}
  .clx-pill.arch{background:#EDEDF3;color:var(--ink-soft)}
  .clx-pill.sg{background:var(--brand-tint);border-color:transparent;color:var(--brand-ink)}
  .clx-pill.sg.RISK{background:#FCE9EC;color:#A83A50}
  .clx-pill.sg.VIP{background:#F6EEDF;color:#8A5A0F}

  .clx-acts{display:flex;justify-content:center;gap:16px;margin-top:18px;flex-wrap:wrap}
  .clx-a{display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:none;
    font-family:inherit;color:var(--ink);-webkit-tap-highlight-color:transparent;cursor:pointer}
  .clx-a i{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;
    background:var(--brand);color:#fff;box-shadow:0 8px 20px -12px rgba(91,76,255,.85)}
  /* зелёный у WhatsApp — его собственный знак, его не перекрашиваем */
  .clx-a.wa i{background:#25D366;box-shadow:0 8px 20px -12px rgba(37,211,102,.8)}
  .clx-a i svg{width:26px;height:26px}
  .clx-a span{font-size:12.5px;font-weight:600;color:var(--ink-soft);max-width:78px}
  .clx-a:hover i{filter:brightness(1.12)}
  .clx-hidden{margin-top:14px;font-size:12.5px;color:var(--ink-faint)}

  .clx-st{margin:0 16px 14px;border:1px solid var(--line);border-radius:16px;
    background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
  .clx-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px 16px 4px}
  .clx-g3.sec{padding-top:14px}
  .clx-g3.one{grid-template-columns:1fr}
  .clx-g3 > div{min-width:0}
  .clx-g3 span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-faint)}
  /* text-transform наследуется: значения приходили ЗАГЛАВНЫМИ от правила выше
     по дереву («16 СЕН», «440 ZŁ», «ДА»). Заглавные тут только у подписей. */
  .clx-g3 b{display:block;margin-top:4px;font-size:21px;font-weight:800;letter-spacing:-.02em;
    text-transform:none;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Во втором ряду значения длиннее («16 wrz 2025», «1 200 zł»), и nowrap из
     правила выше обрезал их многоточием уже на 375px. Здесь перенос разрешён:
     строка станет в две, но дата будет видна целиком (08.10.2026). */
  .clx-g3.sec b{font-size:17px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
  .clx-mr{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:46px;
    margin-top:12px;border:0;border-top:1px solid var(--line);background:none;font-family:inherit;
    font-size:13.5px;font-weight:600;color:var(--ink-soft);-webkit-tap-highlight-color:transparent}
  .clx-mr:hover{color:var(--brand-ink)}
  .clx-mr svg{width:15px;height:15px}

  .clx-foot{position:sticky;bottom:0;z-index:3;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--line)}
  .clx-cta{width:100%;min-height:54px;border:0;border-radius:14px;background:var(--grad);color:#fff;
    box-shadow:var(--glow);font-family:inherit;font-size:14.5px;font-weight:800;letter-spacing:.03em;
    text-transform:uppercase;-webkit-tap-highlight-color:transparent}
  .clx-cta:hover{filter:brightness(1.08)}

  /* ==========================================================================
     КАРТОЧКА КЛИЕНТА · ПОЛОТНО И СЕКЦИИ (04.10.2026, «переделать полностью
     страницу… премиум вариант»).

     Диагноз, с которого всё начинается: тело вкладки лежит прямо на белом
     фоне ящика (.cl-dw{background:var(--surface)}), поэтому «карточек» на
     экране не видно вовсе — семь вкладок читаются как один сплошной лист.
     Тень 0 10px 30px, ради которой карточка и задумана, на белом не работает.
     Эталон (карточка визита) красит полотно #F4F5FA и кладёт на него белые
     секции — здесь то же самое, но только под полосой вкладок: шапка
     карточки остаётся белой и нетронутой (прямая просьба владелицы).

     Разметку НЕ меняем: классы .cl-sub/.cl-nb/.cl-vr/.cl-mt/.cl-nt/.cl-cons
     живут по всему кабинету и привязаны к обработчикам. Переодеваем их
     ОБЛАСТНО — внутри #cl-drawer .db, — поэтому список клиентов, календарь
     и реестры остаются как были.
     ========================================================================== */
  #cl-drawer .db{background:#F4F5FA;padding:16px;min-height:220px}

  /* Заголовок группы: капслок + линия до правого края. Без линии мелкая
     подпись висела в воздухе между двумя белыми карточками. */
  #cl-drawer .db .cl-sub{display:flex;align-items:center;gap:9px;margin:18px 0 10px;
    font-size:10.9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6A7288}
  #cl-drawer .db .cl-sub:first-child{margin-top:2px}
  #cl-drawer .db .cl-sub::after{content:"";flex:1;height:1px;background:#E4E7F0;order:5}
  #cl-drawer .db .cl-sub .a{order:6}

  /* Общая «карточка-секция»: белый лист 18px с мягкой тенью. Её получают
     блоки, которые раньше были голым текстом на белом. */
  #cl-drawer .db .cl-nb,
  #cl-drawer .db .cl-nt,
  #cl-drawer .db .cl-cons,
  #cl-drawer .db .cl-gd,
  #cl-drawer .db .cl-mt,
  #cl-drawer .db .cl-pf,
  #cl-drawer .db .cl-kg > div,
  #cl-drawer .db .cl-c{
    background:var(--surface);border:1px solid #E7E9F2;border-radius:18px;
    box-shadow:0 10px 30px rgba(28,33,48,.07)}

  /* «Следующее действие» — главная рекомендация экрана, а выглядела
     служебной строкой состояния. Делаем крупнее и даём иконке фирменный
     градиент; тон (nba.tone) красит левую кромку. */
  #cl-drawer .db .cl-nb{padding:15px 16px;gap:13px;align-items:center;
    border-left:4px solid var(--brand)}
  #cl-drawer .db .cl-nb .ic{width:42px;height:42px;flex:0 0 42px;border-radius:14px;
    background:linear-gradient(118deg,#6C4DF6,#9B33F0 52%,#E04BD4);color:#fff;
    box-shadow:0 8px 20px rgba(141,52,226,.28)}
  #cl-drawer .db .cl-nb .ic svg{width:19px;height:19px}
  #cl-drawer .db .cl-nb .n b{font-size:10.9px;letter-spacing:.1em;color:#8B90A6}
  #cl-drawer .db .cl-nb .n span{font-size:14.4px;font-weight:700;margin-top:3px}

  /* Строки-визиты и строки-обращения: карточка с подъёмом на наведении,
     цена табличными цифрами (без них суммы «пляшут» между строками). */
  #cl-drawer .db .cl-vr{background:var(--surface);border:1px solid #E7E9F2;border-radius:15px;
    padding:12px 14px;gap:12px;margin-bottom:9px;width:100%;
    box-shadow:0 4px 14px rgba(28,33,48,.05);
    transition:border-color .16s,box-shadow .16s,transform .16s}
  #cl-drawer .db button.cl-vr:hover,
  #cl-drawer .db a.cl-vr:hover{border-color:var(--brand);transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(91,76,255,.14)}
  #cl-drawer .db .cl-vr .dt{font-size:12.2px;font-weight:800;color:#6A7288;
    font-variant-numeric:tabular-nums;min-width:62px}
  #cl-drawer .db .cl-vr .sv{font-size:14px;font-weight:700}
  #cl-drawer .db .cl-vr .sv em{font-size:11.8px;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis}
  #cl-drawer .db .cl-vr .pr{font-size:14.6px;font-weight:800;font-variant-numeric:tabular-nums}

  /* Профиль: пары «ключ → значение» вместо реестровой таблицы. Пунктир —
     тот же приём, что у .avc-kv: он разделяет, но не рисует сетку. */
  /* Профиль — список пар «подпись → значение», а не реестровая таблица:
     .cl-mt осталась таблицей там, где это правда таблица (разбор по услугам
     на «Финансах», сегменты, импорт). Пунктир разделяет, но не рисует сетку.
     Подпись и значение в одной строке, значение прижато вправо; при длинном
     значении строка переносится, а не слипается. */
  #cl-drawer .db .cl-pf{padding:3px 16px;font-size:13.6px}
  #cl-drawer .db .cl-pf .r{display:flex;align-items:baseline;gap:14px;
    padding:11px 0;border-bottom:1px dashed #E7E9F2}
  #cl-drawer .db .cl-pf .r:last-child{border-bottom:0}
  #cl-drawer .db .cl-pf .r > span{flex:0 0 auto;font-size:13px;color:var(--ink-faint)}
  #cl-drawer .db .cl-pf .r > b{margin-left:auto;text-align:right;font-weight:600;
    min-width:0;overflow-wrap:anywhere}
  /* Незаполненное поле: это «не заполнено», а не поломка. У нового клиента
     таких строк пять подряд, и пять прочерков читались как сбой. */
  #cl-drawer .db .cl-pf b.no{font-weight:500;color:#AFB4C6}
  /* Возраст — уточнение к дате, а не вторая половина значения: раньше между
     ними стояла голая точка, и строка выбивалась из списка (жалоба 04.10). */
  #cl-drawer .db .cl-pf i.age{font-style:normal;flex:0 0 auto;margin-left:8px;
    font-size:11.4px;font-weight:700;color:var(--ink-faint);
    background:var(--surface-2);border-radius:999px;padding:3px 9px;white-space:nowrap}

  /* Внутренняя заметка: левая цветная полоса — язык старого кабинета.
     В новом это такая же белая карточка, а автор и дата — отдельной
     строкой-шапкой, а не серым хвостом в одну линию. */
  #cl-drawer .db .cl-nt{border-left-width:1px;padding:13px 15px 14px;margin-bottom:10px}
  #cl-drawer .db .cl-nt .h{font-size:11.4px;color:#8B90A6;margin-bottom:7px;
    padding-bottom:7px;border-bottom:1px dashed #E7E9F2}
  #cl-drawer .db .cl-nt .tx{font-size:13.6px;line-height:1.6}

  /* Согласие RODO и блок об удалении данных */
  #cl-drawer .db .cl-cons{padding:14px 16px;gap:13px}
  #cl-drawer .db .cl-cons .n b{font-size:14px}
  #cl-drawer .db .cl-cons .n span{font-size:11.8px;line-height:1.5;margin-top:3px;display:block;color:#8B90A6}
  #cl-drawer .db .cl-gd{border-style:solid;padding:14px 16px;font-size:12.4px;line-height:1.6}

  /* Тумблер согласия — единственный интерактивный элемент RODO-блока, и он
     выглядел системным чекбоксом ОС посреди фирменного экрана. */
  #cl-drawer .db .cl-sw{transition:background .18s,box-shadow .18s;position:relative}
  /* Ползунок остаётся 42x24 — это его вид. Но жать по нему пальцем в 24px
     высоты неудобно, поэтому невидимая накладка доводит цель до 38. */
  #cl-drawer .db .cl-sw::after{content:"";position:absolute;left:-6px;right:-6px;
    top:50%;transform:translateY(-50%);height:38px}
  #cl-drawer .db .cl-sw.on{background:linear-gradient(118deg,#6C4DF6,#9B33F0 52%,#E04BD4);
    box-shadow:0 6px 16px rgba(141,52,226,.3)}

  /* KPI-плитки «Финансов»: плоские серые квадраты -> белые карточки с
     табличными цифрами. .cl-kg живёт ещё и в модалке LTV — там правило не
     действует, оно областное. */
  /* Внутри ящика сетка 2×2 всегда: четыре колонки по 114px рвали суммы.
     Четыре — только когда ящик действительно широк. */
  #cl-drawer .db .cl-kg{gap:10px;margin-bottom:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
  #cl-drawer .db .cl-kg > div{padding:13px 14px;border-radius:16px;box-shadow:0 4px 14px rgba(28,33,48,.05)}
  #cl-drawer .db .cl-kg b{font-size:21px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  #cl-drawer .db .cl-kg span{font-size:10.6px;letter-spacing:.07em;text-transform:uppercase;margin-top:4px}

  /* Пустое состояние группы: раньше это был голый серый текст прямо на
     полотне — выглядел как экран, который не догрузился. Теперь та же белая
     карточка, что у заполненной группы, только текст спокойнее. */
  #cl-drawer .db .cl-none{background:var(--surface);border:1px solid #EDEFF6;border-radius:16px;
    padding:16px 17px;font-size:12.8px;line-height:1.55;color:#8B90A6;
    box-shadow:0 4px 14px rgba(28,33,48,.04)}

  /* Подсказки и пустые состояния на полотне читаются бледнее — им нужен
     собственный фон, иначе серый текст висит на сером. */
  #cl-drawer .db .cl-hint{background:var(--surface);border:1px solid #EDEFF6;border-radius:14px;
    padding:11px 13px;margin:12px 0;font-size:12px;line-height:1.55}
  #cl-drawer .db .muted{color:#8B90A6}

  /* Строки визитов на вкладке «Визиты» */
  /* Поля задаём здесь: базовое .clv{padding:14px 0} полей по бокам не даёт
     (дата упиралась в скруглённую кромку), а .clv.ns{padding:12px} оставался
     в силе и сдвигал строку неявки относительно соседних. Margin пишем явно
     по той же причине. */
  #cl-drawer .db .clv{background:var(--surface);border:1px solid #E7E9F2;border-radius:16px;
    box-shadow:0 4px 14px rgba(28,33,48,.05);padding:13px 15px;margin:0 0 10px;overflow:hidden;
    transition:border-color .16s,box-shadow .16s,transform .16s}
  #cl-drawer .db .clv:hover{border-color:var(--brand);transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(91,76,255,.14)}
  #cl-drawer .db .clv .clv-d b{font-variant-numeric:tabular-nums}

  /* Плашка статуса визита была СЕРОЙ у восьми статусов из девяти: .b-* и
     .clv-st весят одинаково (один класс), а .clv-st объявлена ниже и
     перекрывала фон всех токенов своим --surface-2. Цвет держался только у
     неявки — её красит двухклассовое .clv.ns .clv-st. Тон текста по тому же
     рецепту: токен, затемнённый к --ink, иначе пастель на пастели нечитаема. */
  #cl-drawer .db .clv-st.b-NEW{background:var(--st-NEW);color:color-mix(in srgb,var(--st-NEW-d) 70%,var(--ink))}
  #cl-drawer .db .clv-st.b-PENDING{background:var(--st-PENDING);color:color-mix(in srgb,var(--st-PENDING-d) 70%,var(--ink))}
  #cl-drawer .db .clv-st.b-CONFIRMED{background:var(--st-CONFIRMED);color:color-mix(in srgb,var(--st-CONFIRMED-d) 70%,var(--ink))}
  #cl-drawer .db .clv-st.b-ARRIVED{background:var(--st-ARRIVED);color:color-mix(in srgb,var(--st-ARRIVED-d) 70%,var(--ink))}
  #cl-drawer .db .clv-st.b-IN_PROGRESS{background:var(--st-IN_PROGRESS);color:color-mix(in srgb,var(--st-IN_PROGRESS-d) 70%,var(--ink))}
  #cl-drawer .db .clv-st.b-COMPLETED{background:var(--st-COMPLETED);color:color-mix(in srgb,var(--st-COMPLETED-d) 70%,var(--ink))}
  #cl-drawer .db .clv-st.b-NO_SHOW{background:var(--st-NO_SHOW);color:color-mix(in srgb,var(--st-NO_SHOW-d) 70%,var(--ink))}
  #cl-drawer .db .clv-st.b-CANCELLED_CLIENT{background:var(--st-CANCELLED_CLIENT);color:color-mix(in srgb,var(--st-CANCELLED_CLIENT-d) 70%,var(--ink))}
  #cl-drawer .db .clv-st.b-CANCELLED_BUSINESS{background:var(--st-CANCELLED_BUSINESS);color:color-mix(in srgb,var(--st-CANCELLED_BUSINESS-d) 70%,var(--ink))}

  /* Красную рамку неявки (просьба 25.09) мой же белый лист молча отменил:
     .clv.ns — два класса, #cl-drawer .db .clv — идентификатор. Возвращаем
     теми же токенами, что в календаре: оттенок «неявки» живёт в одном месте. */
  #cl-drawer .db .clv.ns{border-color:color-mix(in srgb,var(--st-NO_SHOW-d) 32%,transparent);
    background:color-mix(in srgb,var(--st-NO_SHOW-d) 5%,var(--surface));
    box-shadow:0 4px 14px rgba(253,102,119,.12)}
  #cl-drawer .db .clv.ns:hover{border-color:var(--st-NO_SHOW-d);
    box-shadow:0 10px 24px rgba(253,102,119,.20)}

  /* «Разбор по услугам» — единственная настоящая .cl-mt внутри ящика
     (профиль уехал на .cl-pf). Белый лист она получила, а полей нет:
     padding на table при border-collapse:collapse игнорируется, и шапка
     лежала в дуге скругления 18px. Отдаём поля ячейкам. */
  /* border-radius:18px, который таблица получает как «карточка-секция», при
     border-collapse:collapse не рисуется вовсе — у таблиц это правило CSS
     отменяет скругление. Переводим на separate: углы начинают работать,
     а поля ячеек и снятая нижняя линия у последней строки остаются. */
  #cl-drawer .db .cl-mt{font-size:13.4px;border-collapse:separate;border-spacing:0}
  #cl-drawer .db .cl-mt th{font-size:10.4px;color:#8B90A6;padding:14px 7px 9px;
    border-bottom:1px solid #EDEFF6}
  #cl-drawer .db .cl-mt td{padding:11px 7px;border-bottom:1px dashed #E7E9F2}
  #cl-drawer .db .cl-mt tr:last-child td{border-bottom:0;padding-bottom:14px}
  #cl-drawer .db .cl-mt th:first-child,
  #cl-drawer .db .cl-mt td:first-child{padding-left:16px}
  #cl-drawer .db .cl-mt th:last-child,
  #cl-drawer .db .cl-mt td:last-child{padding-right:16px}
  #cl-drawer .db .cl-mt td b{font-variant-numeric:tabular-nums}
  /* строки ничего не открывают — серая подсветка обещала клик */
  #cl-drawer .db .cl-mt tbody tr:hover td{background:transparent}

  /* ---------- отметка подтверждения визита ----------
     Живёт ВНУТРИ строки визита, отдельной полосой под ней: это факт о
     визите, а не самостоятельная запись, и своей карточки не заслуживает.
     Цветом разведены три разных вещи — ответил клиент, отметил салон,
     ответа нет; по этому различию владелица решает, звонить ли. */
  /* На экране от 641px .clv — сетка в две колонки («строка» + «забронировать
     ещё раз»). Полоса отметки обязана занять ОБЕ, иначе она встаёт третьим
     элементом сетки и сжимает название услуги до трёх строк (поймано глазами
     на стенде). grid-column безвреден и когда .clv не сетка. */
  #cl-drawer .db .clv-cf{grid-column:1 / -1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    margin-top:11px;padding-top:11px;border-top:1px dashed #E7E9F2}
  #cl-drawer .db .clv-cf .t{display:inline-flex;align-items:center;gap:7px;min-width:0;
    font-size:12.4px;font-weight:700;color:#6A7288}
  #cl-drawer .db .clv-cf .t svg{width:15px;height:15px;flex:0 0 auto}
  #cl-drawer .db .clv-cf .t b{font-weight:800}
  #cl-drawer .db .clv-cf .t i{font-style:normal;font-weight:600;color:var(--ink-faint);
    font-variant-numeric:tabular-nums}
  /* ответил сам клиент — зелёное: это самый надёжный из трёх случаев */
  #cl-drawer .db .clv-cf.ok .t{color:#1F7A56}
  /* отметил салон — фирменное лиловое: подтверждение есть, но со слов */
  #cl-drawer .db .clv-cf.man .t{color:var(--brand-ink)}
  #cl-drawer .db .clv-cf.bad .t{color:#A83A50}
  #cl-drawer .db .clv-cf.wait .t{color:#8A5410}
  #cl-drawer .db .clv-cf .clv-cf-a{margin-left:auto;flex:0 0 auto;border:1.5px solid #DDE0EC;
    background:var(--surface);border-radius:999px;padding:7px 14px;cursor:pointer;
    font-family:inherit;font-size:12.4px;font-weight:700;color:var(--ink);
    min-height:38px;transition:.16s;-webkit-tap-highlight-color:transparent}  /* 38 — стандарт карточки */
  #cl-drawer .db .clv-cf .clv-cf-a:hover{border-color:var(--brand);color:var(--brand-ink);
    transform:translateY(-1px);box-shadow:0 6px 16px rgba(91,76,255,.14)}
  #cl-drawer .db .clv-cf .clv-cf-a.on{background:var(--brand-tint);border-color:transparent;
    color:var(--brand-ink)}
  #cl-drawer .db .clv-cf .clv-cf-a.on:hover{background:#E6E0FD}
  #cl-drawer .db .clv-cf .clv-cf-a:active{transform:scale(.98)}
  @media(max-width:560px){
    /* на узком кнопка уходит под подпись, а не ужимает её до многоточия */
    #cl-drawer .db .clv-cf .clv-cf-a{margin-left:0;flex:1 1 100%}
  }

  /* Фокус с клавиатуры — одним правилом на ВСЕ интерактивные строки
     карточки. До этого :focus-visible во всём блоке встречался один раз, а
     карточка открывается с программным фокусом, то есть клавиатурный
     сценарий здесь штатный. */
  #cl-drawer .db .cl-vr:focus-visible,
  #cl-drawer .db .clv-main:focus-visible,
  #cl-drawer .db .clx-gc:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:15px}


  /* ==========================================================================
     ПОЛОСА РАЗДЕЛОВ КАРТОЧКИ КЛИЕНТА — ТЗ-Kartochka-klienta-v1.0, §2.

     БЫЛО: серая капсула-рельс с прокруткой, у активного белая пилюля с тенью
     и кольцом, волосяная черта между группами, подсказка о прокрутке —
     внутренняя тень 20 %. Семи польским подписям нужно 594 px, а на телефоне
     под полосу 362: «Karty podan…» обрывалось посреди буквы, «Wiarygodność»
     не было видно вовсе, и ничто не говорило, что он там есть.

     СТАЛО: одна строка на любой ширине, листается вбок, у края подпись
     РАСТВОРЯЕТСЯ. Обрубленная буква читается как поломка, растаявшая — как
     «здесь есть продолжение».

     Порогов ширины здесь нет и быть не может: .cl-dw ниже 980px во всю
     ширину окна, а выше — 52vw, поэтому при 980 под полосу 948 px, а при
     981 — уже 478. Ширина НЕМОНОТОННА по окну, и любой медиазапрос соврал
     бы в обе стороны.

     ОСТОРОЖНО: теми же классами .cl-dw-tabs/.cl-dw-tab нарисована полоса
     списка клиентов (clSectionTabsHTML, business.js), и она живёт ВНЕ
     #cl-drawer. Поэтому каждое правило ниже начинается с #cl-drawer.
     ========================================================================== */
  #cl-drawer{--clx-top-h:50px}

  /* Белая липкая полоса под шапкой карточки. Саму шапку (.clx-top/.clx-hero)
     не трогаем — прямая просьба владелицы, дважды. Нижняя граница светлее
     линий плит: она отделяет полосу от тела, а разметку групп ведут линии. */
  /* 4+38+1(линия плиты)+2 = 45..46: прежняя высота полосы, не больше. */
  #cl-drawer .cl-dw-tabs.cl-nav{display:block;padding:4px 12px 2px;
    position:sticky;top:var(--clx-top-h);z-index:2;overflow:visible;
    background:var(--surface);border-bottom:1px solid #EFF2F8;
    -webkit-mask-image:none;mask-image:none}

  /* Рельс. Прилипание к началу вкладки — чтобы после движения пальцем полоса
     не замирала на половине слова. */
  #cl-drawer .cl-nav-rail{display:flex;flex-wrap:nowrap;align-items:flex-end;
    column-gap:16px;padding:0;background:none;border-radius:0;box-shadow:none;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    scroll-padding-inline:2px}
  #cl-drawer .cl-nav-rail::-webkit-scrollbar{display:none}

  /* Растворение у края — только с той стороны, где продолжение есть.
     Классы sc-l/sc-r считает clCardRender, он же считал их и для прежних кромок.

     ИСТОРИЯ, которую нельзя повторить: растушёвку здесь уже пробовали и сняли —
     «маска гасила последнюю подпись до вида выключенной». Та маска была
     БЕЗУСЛОВНОЙ и висела даже когда листать нечего. Эта включается только
     вместе с sc-l/sc-r, то есть ровно тогда, когда продолжение есть, и
     гаснет совсем, как только всё поместилось.

     Полоса растворения узкая (26px) и с промежуточной остановкой: до
     последних 11px подпись держит почти полную плотность и остаётся
     читаемой, а тает по сути край буквы. Широкая мягкая растушёвка — это
     и был прежний изъян.

     Префикс -webkit- обязателен: без него Safari маску не применит. */
  #cl-drawer .cl-nav-rail.sc-r{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),rgba(0,0,0,.92) calc(100% - 11px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 26px),rgba(0,0,0,.92) calc(100% - 11px),transparent)}
  #cl-drawer .cl-nav-rail.sc-l{
    -webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.92) 11px,#000 26px);
            mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.92) 11px,#000 26px)}
  #cl-drawer .cl-nav-rail.sc-l.sc-r{
    -webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.92) 11px,#000 26px,#000 calc(100% - 26px),rgba(0,0,0,.92) calc(100% - 11px),transparent);
            mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.92) 11px,#000 26px,#000 calc(100% - 26px),rgba(0,0,0,.92) calc(100% - 11px),transparent)}

  /* Плита группы. Линия принадлежит ГРУППЕ и равна её ширине — поэтому она
     никогда не висит в пустоте, а разрыв между линиями и есть разделитель
     групп. Отдельная волосяная черта (класс .gs) больше не нужна.
     flex:0 0 auto ОБЯЗАТЕЛЬНО. Было min-width:0 — и это оказалось ошибкой,
     пойманной на живом телефоне 08.10.2026: в непереносящемся флексе
     элементы по умолчанию сжимаются (flex-shrink:1), а min-width:0 снимает
     последний упор — плита сжималась НИЖЕ своего содержимого
     (329→182 px), а кнопки внутри не сжимаются и вылезали на соседнюю:
     «Notatki» наезжала на «Finanse» на 131 px. Опасение, ради которого стоял
     min-width:0, было напрасным: переполнение держит сам рельс через
     overflow-x:auto, и до ящика оно не доходит. */
  #cl-drawer .cl-nav-g{display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:flex-end;
    column-gap:3px;border-bottom:1px solid var(--line)}
  #cl-drawer .cl-nav-g:empty{display:none}

  /* Вкладка. border:0 и min-height:0 обязательны: базовое правило .cl-dw-tab
     держит border-bottom:2px solid transparent и min-height, а .cl-dw-tab.on
     красит эту границу в var(--brand) — иначе у вкладки было бы ещё и
     подчёркивание во всю ширину, второй признак того же состояния. */
  #cl-drawer .cl-nav .cl-dw-tab{flex:0 0 auto;position:relative;display:inline-flex;
    align-items:center;height:38px;min-height:0;padding:0 9px;border:0;
    border-radius:8px 8px 0 0;background:none;font-family:inherit;font-size:12.2px;
    font-weight:700;color:#545A70;white-space:nowrap;cursor:pointer;
    -webkit-tap-highlight-color:transparent;scroll-snap-align:start;
    scroll-margin-inline:8px;transition:background .16s,color .16s}
  #cl-drawer .cl-nav .cl-dw-tab:hover:not(.on){color:var(--ink);background:rgba(28,33,48,.035)}
  #cl-drawer .cl-nav .cl-dw-tab:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}

  /* Выбранный раздел: лёгкая заливка и засечка НА ЛИНИИ своей группы.
     Ни капсулы с круглыми концами, ни тени — прямая просьба владелицы
     («не выделяй это в полукруг, может просто слегка подсвечивай»).
     Начертание при выборе не меняется, иначе соседи сдвигались бы под пальцем. */
  #cl-drawer .cl-nav .cl-dw-tab.on{background:rgba(108,77,246,.07);color:#3C3296}
  #cl-drawer .cl-nav .cl-dw-tab::after{content:"";position:absolute;left:7px;right:7px;
    bottom:-1px;height:2.5px;border-radius:2px 2px 0 0;background:none;
    transition:background .16s}
  #cl-drawer .cl-nav .cl-dw-tab.on::after{background:var(--brand)}

  /* Счётчик — число, а не капсула, и БЕЗ прозрачности. При opacity .62 на
     сером рельсе он давал 2,22:1 при норме 4,5 — то есть число, которое
     владелица читает, было практически невидимо. Узел <em> остаётся
     ОТДЕЛЬНЫМ: словарь ловит только целый текстовый узел. */
  #cl-drawer .cl-nav .cl-dw-tab em{font-style:normal;font-weight:800;font-size:11px;
    margin-left:5px;padding:0;border-radius:0;background:none;color:#5B6177;
    font-variant-numeric:tabular-nums}
  #cl-drawer .cl-nav .cl-dw-tab.on em{color:var(--brand-ink)}
  /* Сбой загрузки карт: знак вместо числа, красным — иначе «не загрузилось»
     неотличимо от «ничего нет». */
  #cl-drawer .cl-nav .cl-dw-tab em.err{color:#C2374F;font-weight:800}

  /* Знак при подписи, а не вместо неё: учить нечего, он помогает глазу.
     14px при обводке 2.1 — на 16px полоса заметно удлиняется, а 14
     оплачивается сокращением подписи «Подарочные карты» до «Карты». */
  #cl-drawer .cl-nav .cl-dw-tab svg{width:14px;height:14px;flex:0 0 auto;
    margin-right:5px;opacity:.72}
  #cl-drawer .cl-nav .cl-dw-tab.on svg{opacity:1}

  @media(prefers-reduced-motion:reduce){
    #cl-drawer .cl-nav .cl-dw-tab,#cl-drawer .cl-nav .cl-dw-tab::after{transition:none}
  }
  /* Телефон: четыре пикселя ширины дороже четырёх пикселей воздуха */
  @media(max-width:640px){
    #cl-drawer .cl-dw-tabs.cl-nav{padding:4px 10px 2px}
  }

  /* Длинное название услуги в «Разборе по услугам» уводило вбок ВЕСЬ ящик
     вместе с шапкой и подвалом: у .cl-dw стоит overflow-y:auto, и распирание
     по ширине двигает его целиком. Разрешаем перенос внутри слова — таблица
     остаётся на месте, названия вроде «PaznokiecZmienionyChorobowo» просто
     переносятся (08.10.2026). */
  #cl-drawer .db .cl-mt td:first-child{overflow-wrap:anywhere;word-break:normal}
  #cl-drawer .db .cl-mt{table-layout:auto;width:100%}

  /* Тумблер согласия: вид прежний, цель касания до 38 по высоте. */
  #cl-drawer .db .cl-cons .cl-sw{position:relative}
  #cl-drawer .db .cl-cons .cl-sw::after{content:"";position:absolute;left:-8px;right:-8px;
    top:50%;transform:translateY(-50%);height:38px}

  /* Телефон и почта в «Данных клиента» — ссылки, а не просто текст: с
     телефона это звонок и письмо в одно касание. Подчёркивание убрано,
     чтобы строка читалась как значение, а не как ссылка посреди таблицы. */
  #cl-drawer .db .cl-pf .cl-lnk{color:inherit;text-decoration:none;
    -webkit-tap-highlight-color:transparent}
  /* Телефон и почта — ссылки в одну строку текста, по высоте это 16px.
     Невидимая накладка доводит цель нажатия до 38, вид строки не меняя. */
  #cl-drawer .db .cl-pf .cl-lnk{position:relative;display:inline-block}
  #cl-drawer .db .cl-pf .cl-lnk::after{content:"";position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:38px}
  #cl-drawer .db .cl-pf .cl-lnk:hover,
  #cl-drawer .db .cl-pf .cl-lnk:focus-visible{color:var(--brand-ink);text-decoration:underline}
  /* Длинная почта обязана переноситься, иначе распирает строку. */
  #cl-drawer .db .cl-pf .r b{min-width:0;overflow-wrap:anywhere;text-align:right}

  /* Счётчик, вынесенный из подписи ради словаря (см. business.js): раньше
     он стоял внутри фразы «Обращения · 2», и статья словаря не совпадала. */
  #cl-drawer .db .cl-sub em.cnt{font-style:normal;font-weight:800;font-size:10.6px;
    letter-spacing:.02em;color:var(--brand-ink);background:var(--brand-tint);
    border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}

  /* Шапка заметки: автор, роль и дата теперь РАЗНЫЕ узлы (иначе роль и
     месяц не переводятся). Точки-разделители рисует CSS. */
  #cl-drawer .db .cl-nt .h{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
  #cl-drawer .db .cl-nt .h b{font-weight:800;color:var(--ink)}
  #cl-drawer .db .cl-nt .h span{display:inline-flex;align-items:center;gap:7px}
  #cl-drawer .db .cl-nt .h span:not(.r)::before{content:"\00B7";color:#C8CCDA}
  /* Было 35x24 и 29x24 в 7px друг от друга: промах пальцем стирал заметку
     без подтверждения (08.10.2026). Высота до 38, зазор до 12. */
  #cl-drawer .db .cl-nt .h .r{margin-left:auto;gap:12px}
  #cl-drawer .db .cl-nt .h .r button{min-height:38px;padding:0 10px}

  /* Согласие RODO: четыре факта вместо одной серой строки */
  #cl-drawer .db .cl-cons-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
    margin-top:5px;font-size:11.6px;color:#8B90A6}
  #cl-drawer .db .cl-cons-m .st{font-size:11px;font-weight:800;letter-spacing:.03em;
    padding:3px 10px;border-radius:999px}
  #cl-drawer .db .cl-cons-m .st.on{background:#E4F7EE;color:#1F7A56}
  #cl-drawer .db .cl-cons-m .st.off{background:#F1F2F7;color:#6A7288}
  #cl-drawer .db .cl-gd-a{margin-top:11px}

  /* Флаг «изменена» в шапке заметки — тихая плашка, а не четвёртый факт
     через точку. Дочерний селектор важен: вложенные em у звёзд отзыва и
     у счётчиков под него не попадают. */
  #cl-drawer .db .cl-nt .h > em{font-style:normal;font-size:10.6px;font-weight:800;
    letter-spacing:.03em;color:#6A7288;background:#F1F2F7;border-radius:999px;padding:3px 9px}

  /* «Не принесло выручки» — справочные строки: это <div>, не <button>, они
     ничего не открывают, а подъём и лиловая рамка обещали клик. */
  #cl-drawer .db div.cl-vr{cursor:default}
  #cl-drawer .db div.cl-vr:hover{border-color:#E7E9F2;transform:none;
    box-shadow:0 4px 14px rgba(28,33,48,.05)}

  /* Пустое «следующее действие» рисовалось с максимальным весом на экране:
     та же лиловая кромка и тот же градиент с тенью, что у срочной
     рекомендации «Риск неявки». Самый яркий элемент сообщал, что делать
     нечего. Гасим: кромка серая, плитка спокойная. */
  /* Срочность рекомендации считалась в clNBA, но класс не подставлялся —
     «позвонить до визита» и «всё спокойно» выглядели одинаково (08.10.2026). */
  #cl-drawer .db .cl-nb.hot{border-left-color:#6C4DF6;background:linear-gradient(90deg,rgba(108,77,246,.06),transparent 60%)}
  #cl-drawer .db .cl-nb.hot .ic{background:var(--brand-tint);color:var(--brand-ink)}
  #cl-drawer .db .cl-nb.bad{border-left-color:#E04560;background:linear-gradient(90deg,rgba(224,69,96,.07),transparent 60%)}
  #cl-drawer .db .cl-nb.bad .ic{background:#FCE9ED;color:#C2374F}
  #cl-drawer .db .cl-nb.ok{border-left-color:#DDE1EC}
  #cl-drawer .db .cl-nb.ok .ic{background:var(--surface-2);color:#8B90A6;box-shadow:none}
  /* Причина рекомендации — вторая строка, а не хвост первой. */
  #cl-drawer .db .cl-nb .n span.muted{font-size:11.6px;font-weight:600;
    margin-top:5px;line-height:1.45;color:#8B90A6;display:block}

  /* Черновик заметки — та же заметка: композер лежит в .cl-nt, иначе главный
     элемент взаимодействия вкладки остаётся единственным без белого листа,
     на полотне, отличимом от поля на два процента. */
  #cl-drawer .db .cl-nt-new{margin-bottom:16px}
  #cl-drawer .db .cl-nt .cl-fld{margin-bottom:11px}
  #cl-drawer .db .cl-nt .cl-fld label{font-size:10.9px;letter-spacing:.1em;color:#6A7288}
  #cl-drawer .db .cl-nt textarea{background:#F7F8FC;border:1.5px solid #E2E5F0;border-radius:13px;
    font-size:13.8px;line-height:1.55;min-height:78px;width:100%;box-sizing:border-box}
  #cl-drawer .db .cl-nt textarea:focus{border-color:var(--brand);background:var(--surface);
    box-shadow:0 0 0 4px rgba(108,77,246,.12);outline:none}

  /* Журнал — плотный список, поэтому он лежит в ОДНОЙ белой секции с
     пунктиром между строками: тридцать отдельных плиток были бы шумом.
     У последней строки линии нет — ей не под чем висеть. Правило областное:
     тот же .cl-lgr рисует общий журнал кабинета. */
  #cl-drawer .db .cl-lgr{gap:12px;padding:11px 0;border-bottom:1px dashed #E7E9F2}
  #cl-drawer .db .cl-lgr:last-child{border-bottom:0;padding-bottom:2px}
  #cl-drawer .db .cl-lgr time{flex:0 0 84px;font-size:11.2px;color:#8B90A6}
  #cl-drawer .db .cl-lgr .b b{font-size:13.4px;font-weight:700;color:var(--ink)}
  #cl-drawer .db .cl-lgr .b span{font-size:11.4px;color:#8B90A6;margin-top:3px}
  #cl-drawer .db .cl-c > .bd{padding:4px 16px}

  /* Факты согласия обязаны быть ОДНОЙ строкой, а рассыпались на пять:
     правило .cl-cons .n span выше по дереву возвращало им display:block и
     раздувало b.st до 14px. Поднимаем вес до него же. */
  #cl-drawer .db .cl-cons .n span.cl-cons-m{display:flex;flex-wrap:wrap;align-items:center;
    gap:5px 9px;margin-top:8px;font-size:11.6px;line-height:1.3;color:#8B90A6}
  #cl-drawer .db .cl-cons .n .cl-cons-m span{display:inline-flex;align-items:center;gap:4px;
    margin-top:0;font-size:11.6px;line-height:1.3}
  #cl-drawer .db .cl-cons .n .cl-cons-m b.st{display:inline-flex;align-items:center;
    font-size:11px;line-height:1.5}
  #cl-drawer .db .cl-cons .n .cl-cons-m > span + span::before{content:"\00B7";color:#C8CCDA}
  #cl-drawer .db .cl-cons .n .cl-cons-m > span > span:first-child::after{content:":"}

  @media(min-width:1420px){
    #cl-drawer .db .cl-kg{grid-template-columns:repeat(4,minmax(0,1fr))}
  }
  @media(max-width:640px){
    #cl-drawer .db{padding:12px}
    #cl-drawer .db .cl-kg{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* Строки «Не принесло выручки» несут ЧЕТЫРЁХ детей (дата, услуга,
       плашка, сумма) против трёх у соседних, и на узком услуга сжимается
       сильнее всех. Пускаем её на свою строку. */
    #cl-drawer .db .cl-vr:has(.badge){flex-wrap:wrap}
    #cl-drawer .db .cl-vr:has(.badge) .sv{flex:1 1 100%;order:3;white-space:normal}
    /* рекомендация столбиком: кнопка во всю ширину под текстом, а не
       сплющенная в одно слово сбоку */
    #cl-drawer .db .cl-nb{flex-wrap:wrap;gap:11px}
    #cl-drawer .db .cl-nb .ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px}
    #cl-drawer .db .cl-nb .n{flex:1 1 0;min-width:0}
    #cl-drawer .db .cl-nb > .clx-btn{order:3;flex:1 0 100%;width:100%}
  }

  /* ==========================================================================
     КАРТОЧКА КЛИЕНТА — единый язык кнопок (04.10.2026, просьба владелицы
     «стиль кнопок должен быть вот такой» с эталоном карточки ВИЗИТА и «все
     кнопки внутри этой страницы проработать в новом дизайне»).

     Правила ОБЛАСТНЫЕ — всё под #cl-drawer. Разметку кнопок не трогаем:
     классы .btn/.a/.clv-again/.chip живут по всему кабинету и привязаны к
     обработчикам; переписать их означало бы править десяток функций ради
     оформления. Здесь меняется только вид и только внутри карточки.

     Геометрия взята у эталона (.avc-btn, business.js ~10588): пилюля
     999px, вес 700, подъём на наведении, фирменный градиент у главного
     действия, полуторапиксельная рамка у второстепенного.
     ========================================================================== */
  #cl-drawer .btn,
  #cl-drawer .clx-btn,
  #cl-drawer .clv-again{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    border:0;border-radius:999px;font-family:inherit;font-weight:700;font-size:14.2px;
    padding:11px 20px;line-height:1.15;white-space:nowrap;cursor:pointer;
    /* 38px — собственный стандарт карточки (его держат вкладки полосы).
       Малые кнопки выходили 33px: замерено 08.10.2026. Это кнопки, которые
       жмут большим пальцем на ходу, и пять пикселей здесь ощутимы. */
    min-height:38px;
    transition:transform .16s,box-shadow .16s,background .16s,border-color .16s,color .16s;
    -webkit-tap-highlight-color:transparent;text-transform:none;letter-spacing:0}
  #cl-drawer .btn svg,
  #cl-drawer .clx-btn svg,
  #cl-drawer .clv-again svg{flex:0 0 auto;width:16px;height:16px}

  /* главное действие — фирменный градиент и его тень */
  #cl-drawer .btn,
  #cl-drawer .clx-btn.pri{
    background:linear-gradient(118deg,#6C4DF6,#9B33F0 52%,#E04BD4);color:#fff;
    box-shadow:0 10px 26px rgba(141,52,226,.34)}
  #cl-drawer .btn:hover,
  #cl-drawer .clx-btn.pri:hover{filter:brightness(1.06);transform:translateY(-1px);
    box-shadow:0 13px 30px rgba(141,52,226,.42)}

  /* второстепенное — белая пилюля с рамкой */
  #cl-drawer .btn.ghost,
  #cl-drawer .clx-btn.gh,
  #cl-drawer .clv-again{
    background:var(--surface);border:1.5px solid #DDE0EC;color:var(--ink);
    box-shadow:none;filter:none}
  #cl-drawer .btn.ghost:hover,
  #cl-drawer .clx-btn.gh:hover,
  #cl-drawer .clv-again:hover{border-color:var(--brand);color:var(--brand-ink);
    background:var(--surface);filter:none;transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(91,76,255,.14)}

  /* мягкое — для действий внутри карточек-секций */
  #cl-drawer .clx-btn.soft{background:var(--brand-tint);color:var(--brand-ink);box-shadow:none}
  #cl-drawer .clx-btn.soft:hover{background:#E6E0FD;transform:translateY(-1px)}

  /* опасное — приглушённо-красное, не кричит, пока его не наводят */
  #cl-drawer .btn.danger,
  #cl-drawer .clx-btn.dang{background:#FCE9ED;color:#D43F5A;box-shadow:none;border:0;filter:none}
  #cl-drawer .btn.danger:hover,
  #cl-drawer .clx-btn.dang:hover{background:#F9D9E0;color:#B32B45;transform:translateY(-1px);filter:none}

  /* размеры */
  #cl-drawer .btn.sm,
  #cl-drawer .clx-btn.sm,
  #cl-drawer .clv-again{padding:9px 16px;font-size:13.2px}
  #cl-drawer .clx-btn.wide{width:100%}

  #cl-drawer .btn:active,
  #cl-drawer .clx-btn:active,
  #cl-drawer .clv-again:active{transform:scale(.98)}
  #cl-drawer .btn[disabled],
  #cl-drawer .clx-btn[disabled]{opacity:.5;pointer-events:none;box-shadow:none;transform:none}

  /* Фокус с клавиатуры виден всегда и одинаково — у кнопок, ссылок-подписей,
     плиток связи и переключателей. До этого фокус рисовал браузер, и на
     градиентной кнопке его просто не было видно. */
  #cl-drawer button:focus-visible,
  #cl-drawer a:focus-visible,
  #cl-drawer [tabindex]:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:999px}
  #cl-drawer .cl-vr:focus-visible,
  #cl-drawer .clv-main:focus-visible{border-radius:14px}

  /* Ссылки-подписи секций («Все 5», «Изменить», «Редактировать») — это
     действия, а выглядели простым синим текстом вплотную к заголовку.
     Делаем мягкой пилюлей: читается как кнопка, но не спорит с главной. */
  #cl-drawer .cl-sub .a{
    margin-left:auto;display:inline-flex;align-items:center;gap:5px;
    border:0;background:var(--brand-tint);color:var(--brand-ink);
    font-family:inherit;font-size:11.6px;font-weight:800;letter-spacing:.02em;
    text-transform:none;padding:5px 11px;border-radius:999px;cursor:pointer;
    min-height:26px;transition:background .16s,transform .16s;
    -webkit-tap-highlight-color:transparent;position:relative}
  /* Площадь нажатия до 38px, не меняя вида пилюли: невидимая накладка.
     Замерено 08.10.2026 — высота была 27px при собственном стандарте
     карточки 38, и это кнопка, которую жмут большим пальцем на ходу. */
  #cl-drawer .cl-sub .a::after{content:"";position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:38px}
  #cl-drawer .cl-sub .a:hover{background:#E6E0FD;transform:translateY(-1px)}

  /* Переключатель «Будущие/Прошлые» — сегментом эталона: серое ложе,
     активный сегмент белой пилюлей с тенью. */
  #cl-drawer .clv-sw{display:flex;gap:4px;padding:4px;background:#EAECF5;border-radius:999px;
    margin:14px 0 12px;grid-template-columns:none}
  #cl-drawer .clv-sw button{flex:1;min-width:0;height:38px;border:0;border-radius:999px;
    background:none;font-family:inherit;font-weight:700;font-size:12.8px;color:#6A7288;
    transition:.18s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px;
    box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #cl-drawer .clv-sw button:hover:not(.on){color:var(--ink)}
  #cl-drawer .clv-sw button.on{background:var(--surface);color:var(--brand-ink);
    box-shadow:0 2px 9px rgba(28,33,48,.12)}
  #cl-drawer .clv-sw button em{font-style:normal;font-weight:inherit;opacity:.72}

  /* Иконочные кнопки шапки — круглые, с живым наведением */
  #cl-drawer .clx-ic{border-radius:50%;transition:background .16s,color .16s}
  #cl-drawer .clx-ic:hover{background:var(--brand-tint);color:var(--brand-ink)}
  #cl-drawer .clx-edit{border-radius:999px;transition:background .16s,color .16s}
  #cl-drawer .clx-edit:hover{background:var(--brand-tint);color:var(--brand-ink)}

  /* «Больше статистики» — не ссылка, а полноценная полоса-кнопка */
  #cl-drawer .clx-mr{border-radius:0;cursor:pointer;transition:background .16s,color .16s}
  #cl-drawer .clx-mr:hover{background:#F7F6FD;color:var(--brand-ink)}

  /* Подвал: ряд второстепенных пилюль + главное действие во всю ширину */
  #cl-drawer .clx-foot{display:flex;flex-direction:column;gap:9px;
    box-shadow:0 -10px 24px rgba(28,33,48,.05)}
  #cl-drawer .clx-frow{display:flex;gap:9px}
  #cl-drawer .clx-frow .clx-btn{flex:1;min-width:0;padding:11px 8px;font-size:13.4px}
  #cl-drawer .clx-foot .clx-btn.pri{width:100%;padding:13px 10px;font-size:14.8px}

  @media(max-width:640px){
    #cl-drawer .btn,
    #cl-drawer .clx-btn,
    #cl-drawer .clv-again{font-size:13.6px;padding:10px 16px}
    #cl-drawer .clx-frow .clx-btn{font-size:12.8px;gap:7px}
  }

  /* ВСТАВИТЬ в /Users/amelie/Desktop/site/business.css сразу ПОСЛЕ правила
     `.clx-cta:hover{filter:brightness(1.08)}` (сейчас строка 6964) и ПЕРЕД
     комментарием «КАРТОЧКА ВИЗИТА». Якорь по тексту, а не по номеру: файл
     правят параллельно, за время разбора блок .clx-* в нём уже сменился.
     Ни одного голого имени и ни одной правки существующих правил. */

  /* ==========================================================================
     ВКЛАДКА «КАРТЫ» карточки клиента — подарочные карты человека.

     Префикс clx-g. .cl-* занят списком клиентов, .gcr-* — реестром карт
     (его правила живут в <style id="gcr-css">), .avc-* — карточкой визита
     (<style id="avc-css">). Оба чужих узла появляются в DOM только когда
     открыт ИХ экран, а вкладку клиента можно открыть первой — опереться на
     них нельзя, она осталась бы без оформления. Поэтому язык эталона
     (радиусы 18/999, тень 0 10px 30px, 14.7px в кнопке, пунктир между
     парами, градиент 118deg) перенесён сюда своими правилами.
     ========================================================================== */

  /* Итог вкладки. Тот же градиент и те же радиальные подсветки, что у шапки
     визита: это одна и та же «тёмная плашка итога» в двух экранах. */
  .clx-ghero{border-radius:20px;overflow:hidden;color:#fff;margin-top:2px;
    box-shadow:0 16px 38px rgba(43,26,110,.30)}
  .clx-ghero .strip{height:6px;background:linear-gradient(100deg,#5B4CFF,#A85DFF 38%,#F05DC7 72%,#FF9B8F)}
  .clx-ghero .in{padding:16px 19px 17px;background-color:#241A52;
    background-image:radial-gradient(120% 95% at 88% -14%, rgba(255,155,143,.44), transparent 58%),
      radial-gradient(110% 100% at -8% 112%, rgba(240,93,199,.38), transparent 55%),
      linear-gradient(135deg,#4A34D8,#8F4DF0 55%,#B550DE)}
  .clx-ghero .l{display:block;font-size:11.2px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:rgba(255,255,255,.84)}
  .clx-ghero>.in>b{display:block;margin-top:7px;font-size:31px;font-weight:800;line-height:1.05;
    letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .clx-ghero .n{margin-top:13px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);
    display:flex;flex-wrap:wrap;gap:8px}
  .clx-ghero .n>span{display:inline-flex;align-items:center;gap:7px;background:rgba(22,10,64,.32);
    border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 12px;
    font-size:11.7px;font-weight:700}
  .clx-ghero .n em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}

  /* Заголовка группы своего у вкладки больше нет: «Карты клиента» рисует
     общий .cl-sub. Второе определение расходилось с ним на два пикселя
     отступа и на оттенок линии, и подпись прыгала при переходе по вкладкам. */

  /* --- карта клиента --- */
  .clx-gc{background:#fff;border:1px solid #E7E9F2;border-radius:18px;overflow:hidden;
    box-shadow:0 10px 30px rgba(28,33,48,.07)}
  .clx-gc+.clx-gc{margin-top:11px}
  .clx-gc>.bar{height:5px;background:linear-gradient(100deg,#5B4CFF,#A85DFF 38%,#F05DC7 72%,#FF9B8F)}
  .clx-gc>.in{padding:14px 16px 15px}
  .clx-gc.off{box-shadow:none;background:#FCFCFE}
  .clx-gc.off>.bar{background:#E2E4EE}
  .clx-gc .hd{display:flex;align-items:center;gap:8px}
  .clx-gc .kind{display:inline-flex;align-items:center;gap:7px;height:27px;padding:0 12px;
    border-radius:999px;background:#F1EEFE;color:#5538E8;font-size:11.5px;font-weight:700;min-width:0}
  .clx-gc .kind svg{width:14px;height:14px;flex:0 0 auto}
  .clx-gc .kind>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .clx-gc.off .kind{background:#EEF0F6;color:#6A7288}
  .clx-gc .hd .sp{flex:1;min-width:0}
  /* Плашку статуса рисует общая gcStatusHTML (.tag) — своей не заводим,
     иначе подписей статуса в кабинете стало бы две. Но .tag задуман для
     таблиц: 10.5px и радиус 6px. Переодеваем его ТОЛЬКО внутри карты. */
  .clx-gc .tag{margin:0;padding:5px 12px;border-radius:999px;font-size:11.4px;font-weight:700}

  .clx-gc .amt{margin-top:12px}
  .clx-gc .amt .l{display:block;font-size:10.9px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:#6A7288}
  .clx-gc .amt .v{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:4px}
  .clx-gc .amt b{font-size:27px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
    color:#1C2130;font-variant-numeric:tabular-nums}
  .clx-gc.off .amt b{color:#6A7288}
  .clx-gc .amt i{font-style:normal;font-size:12.8px;font-weight:600;color:#6A7288;
    font-variant-numeric:tabular-nums}
  .clx-gc .prog{height:7px;border-radius:999px;background:#ECEDF6;overflow:hidden;margin-top:11px}
  .clx-gc .prog i{display:block;height:100%;border-radius:999px;
    background:linear-gradient(118deg,#6C4DF6,#9B33F0 52%,#E04BD4)}
  .clx-gc.off .prog i{background:#C2C7D6}
  .clx-gc .spent{margin-top:8px;font-size:11.8px;font-weight:600;color:#6A7288}
  .clx-gc .spent em{font-style:normal;font-weight:800;color:#3C4357;font-variant-numeric:tabular-nums}

  /* Карта на процедуру: денег в ней нет вовсе, вместо остатка — состав. */
  .clx-gc .svc{margin-top:12px;border:1px solid #E7E9F2;border-radius:14px;overflow:hidden}
  .clx-gc .svc .r{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13.4px}
  .clx-gc .svc .r+.r{border-top:1px solid #E7E9F2}
  .clx-gc .svc .r>span{flex:1;min-width:0;overflow-wrap:anywhere}
  .clx-gc .svc .r>b{flex:0 0 auto;font-size:12.6px;font-weight:800;background:#F1EEFE;color:#5538E8;
    border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}
  .clx-gc .svc .r.out>span{color:#6A7288}
  .clx-gc .svc .r.out>b{background:#EEF0F6;color:#6A7288}

  /* Код — пунктирный купон, как корешок карты; кнопка копирования рядом. */
  .clx-gcode{display:flex;align-items:center;gap:8px;margin-top:13px;padding:8px 8px 8px 13px;
    border:1.5px dashed #CFC6F7;border-radius:14px;background:#FAF9FF}
  .clx-gcode b{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:14.6px;font-weight:700;letter-spacing:.06em;color:#3C4357;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .clx-gc.off .clx-gcode{border-style:solid;border-color:#E7E9F2;background:#F8F9FD}
  .clx-gcp{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:11px;background:#F1EEFE;
    color:#5538E8;display:grid;place-items:center;cursor:pointer;transition:.15s;
    -webkit-tap-highlight-color:transparent}
  .clx-gcp:hover{background:#6C4DF6;color:#fff}
  .clx-gcp svg{width:15px;height:15px}

  .clx-gkv{margin-top:12px}
  .clx-gkv .r{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:8px 0;font-size:13.4px}
  .clx-gkv .r+.r{border-top:1px dashed #E7E9F2}
  .clx-gkv .r>span{color:#6A7288;flex:0 0 auto}
  .clx-gkv .r>b{font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere;
    font-variant-numeric:tabular-nums}

  .clx-gterm{display:inline-flex;align-items:center;gap:7px;margin-top:12px;border-radius:999px;
    padding:6px 13px;background:#FCF2E3;color:#8A5410;font-size:11.8px;font-weight:700}
  .clx-gterm.bad{background:#FCE9ED;color:#A82B43}
  .clx-gterm svg{width:14px;height:14px;flex:0 0 auto}
  .clx-gterm em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}

  /* Чем именно нашли карту. Строка обязательная: «найдена по имени» и
     «привязана к карточке» — разные степени уверенности, и по ним владелица
     решает, списывать ли карту пришедшему человеку. */
  .clx-gsrc{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;
    border-top:1px solid #E7E9F2;font-size:11.4px;font-weight:600;color:#6A7288}
  .clx-gsrc svg{width:13px;height:13px;flex:0 0 auto;color:#A6ACBF}
  .clx-gsrc.exact svg{color:#1FA97C}

  /* --- состояния --- */
  .clx-gempty{background:#fff;border:1px solid #E7E9F2;border-radius:18px;padding:26px 20px;
    text-align:center;box-shadow:0 10px 30px rgba(28,33,48,.07)}
  .clx-gempty .ic{width:52px;height:52px;margin:0 auto 13px;border-radius:17px;display:grid;
    place-items:center;background:#F1EEFE;color:#5538E8}
  .clx-gempty .ic svg{width:24px;height:24px}
  .clx-gempty b{display:block;font-size:15.2px;font-weight:800}
  .clx-gempty p{margin-top:7px;font-size:12.6px;line-height:1.55;color:#6A7288}
  .clx-gerr{background:#FCE9ED;border:1px solid #F6D2DA;border-radius:18px;padding:14px 16px}
  .clx-gerr>b{display:flex;align-items:center;gap:9px;font-size:14.4px;font-weight:800;color:#A82B43}
  .clx-gerr>b svg{width:17px;height:17px;flex:0 0 auto}
  .clx-gerr p{margin-top:7px;font-size:12.8px;line-height:1.55;color:#8A2B40}
  .clx-gerr code{display:block;margin-top:7px;font-size:11.2px;color:#A8707E;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .clx-gerr .clx-btn{margin-top:13px}
  .clx-gnote{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px 14px;
    border:1px solid #E7E9F2;border-radius:16px;background:#F8F9FD;color:#6A7288;
    font-size:12.2px;line-height:1.5}
  .clx-gnote.warn{background:#FCF2E3;border-color:#F3DFBE;color:#8A5410}
  .clx-gnote>svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
  .clx-gnote b{display:block;margin-bottom:3px;font-weight:800;font-size:13.2px;color:inherit}
  .clx-gfoot{margin-top:13px;display:flex;gap:9px}   /* стояли вплотную */
  .clx-gfoot .clx-btn{flex:1}
  /* Скелетон: мерцание берём у общего .skel (анимация skl уже объявлена),
     здесь только раскладка — вторая копия keyframes не нужна. */
  .clx-gsk{background:#fff;border:1px solid #E7E9F2;border-radius:18px;padding:15px 16px 17px;
    box-shadow:0 10px 30px rgba(28,33,48,.07)}
  .clx-gsk+.clx-gsk{margin-top:11px}
  .clx-gsk i{display:block}
  .clx-gsk i+i{margin-top:10px}

  @media(max-width:640px){
    .clx-ghero>.in>b{font-size:27px}
    .clx-gc .amt b{font-size:24px}
  }

  /* ==========================================================================
     КАРТОЧКА ВИЗИТА — в том же языке, что карточка клиента (21.09.2026,
     просьба владелицы «сделай в таком же стиле»). Разметку не трогаем: это
     живой экран со статусами, вкладками, услугами и оплатой. Меняем только
     оформление — белая шапка вместо градиентной полосы, статус плашкой,
     поля залиты лавандой с крупным скруглением, плитки действий как в
     карточке клиента.
     ========================================================================== */
  .cal-drawer .dh,.cal-drawer .dh.done,.cal-drawer .dh.bad,.cal-drawer .dh.wait{
    background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);padding:14px 16px}
  .cal-drawer .dh b.dh-st{display:inline-block;padding:6px 12px;border-radius:999px;font-size:11px;
    font-weight:800;letter-spacing:.05em;line-height:1.25;background:var(--brand-tint);color:var(--brand-ink)}
  .cal-drawer .dh.done b.dh-st{background:#E4F4EB;color:#2E7A55}
  .cal-drawer .dh.bad  b.dh-st{background:#FCE9EC;color:#A83A50}
  .cal-drawer .dh.wait b.dh-st{background:#FBEEDF;color:#8A5A0F}
  .cal-drawer .dh-id{color:var(--ink-faint)}
  .cal-drawer .dh-chg{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
  .cal-drawer .dh-chg:hover{background:var(--surface-2);border-color:var(--brand);color:var(--brand-ink)}
  .cal-drawer .dh .x{background:var(--surface-2);color:var(--ink);width:36px;height:36px;border-radius:12px;font-size:18px}
  .cal-drawer .dh .x:hover{background:var(--brand-tint);color:var(--brand-ink)}
  /* поля — как в форме правки клиента */
  .cal-drawer .df label{font-size:11px;letter-spacing:.05em;margin-bottom:6px}
  .cal-drawer .df input,.cal-drawer .df select,.cal-drawer .df textarea{
    border:1px solid transparent;background:var(--surface-2);border-radius:14px;min-height:52px;
    padding:0 14px;font-size:15px;font-weight:600;color:var(--ink)}
  .cal-drawer .df textarea{padding:14px;font-weight:500;min-height:88px}
  .cal-drawer .df input:focus,.cal-drawer .df select:focus,.cal-drawer .df textarea:focus{
    border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px var(--brand-tint)}
  .cal-drawer .two{gap:10px}
  /* строка клиента и плитки действий */
  .cal-drawer .cl{border-radius:14px;padding:13px;border-color:var(--line-strong)}
  .cal-drawer .cl .av{width:44px;height:44px;font-size:14px;color:#fff;
    background:linear-gradient(145deg,#8E7CFF,#5B4CFF)}
  .cal-drawer .cl b{font-size:15px}
  .dw-qa{gap:10px;margin:0 0 14px}
  .dw-qa a,.dw-qa button{border:1px solid transparent;background:var(--surface-2);border-radius:14px;
    min-height:64px;padding:9px 6px;gap:6px;font-size:12px;font-weight:700;color:var(--ink)}
  .dw-qa svg{width:19px;height:19px;color:var(--brand)}
  .dw-qa a:hover,.dw-qa button:hover{border-color:var(--brand);background:var(--surface)}
  .dw-type{border-color:transparent;background:var(--surface-2);border-radius:13px;padding:4px}
  .dw-type button{min-height:40px;border-radius:10px;font-size:12.5px;line-height:1.15}
  /* по-польски «Powtarzająca się» длиннее — иначе третья вкладка в две строки
     и вся полоса выше соседних */
  @media(max-width:420px){ .dw-type button{font-size:11.5px;padding-left:6px;padding-right:6px} }
  /* Список услуг. Было: имя и цена — два гибких блока в строке, поэтому у
     длинного названия цена уезжала на вторую строку, а крестик — на третью,
     и ни цены, ни крестики между строками не совпадали (скрин владелицы
     21.09.2026). Стало: сетка в три колонки — цена и крестик всегда на одном
     месте, длительность ушла на отдельную строку под названием. */
  .dw-svcs{border:0;border-radius:14px;background:var(--surface-2);padding:5px;overflow:hidden}
  .dw-svc{display:grid;grid-template-columns:1fr auto auto;align-items:start;column-gap:12px;
    border:0;border-radius:10px;background:var(--surface);padding:11px 12px;margin-bottom:3px}
  /* единственная услуга удаляться не может — третьей колонки нет, иначе её
     пустой зазор отодвигал бы цену от края сильнее, чем в списке из двух */
  .dw-svc.nox{grid-template-columns:1fr auto}
  .dw-svc .s-n{min-width:0}
  .dw-svc .s-n b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink)}
  .dw-svc .s-n i{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-faint);
    margin-top:3px}
  /* цена и крестик держатся первой строки названия, а не середины блока */
  .dw-svc .s-p{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;text-align:right;
    line-height:1.3;padding-top:1px}
  .cal-drawer .dw-svc .x{margin-top:-4px}
  .cal-drawer .foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .cal-drawer .foot .btn{min-height:48px;border-radius:13px;min-width:0;padding-left:10px;padding-right:10px}
  /* три кнопки в ряд на 375px не помещались — «Рассчитать» уезжала за край */
  @media(max-width:480px){
    .cal-drawer .foot{gap:8px}
    .cal-drawer .foot .btn{font-size:12.5px;padding-left:6px;padding-right:6px;line-height:1.2}
  }

  /* --- свой календарь, свои иконки (21.09.2026) --------------------------
     Системный <input type=date> рисует ОС: своя иконка, своя раскладка,
     чужие цвета. Держим его в DOM ради логики, но показываем свой ряд. */
  .cal-drawer .dw-datein{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}
  .cal-drawer .df.dfd{position:relative}
  .cal-drawer .dw-date{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;
    border:1px solid transparent;background:var(--surface-2);border-radius:14px;font-family:inherit;font-size:15px;
    font-weight:600;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .cal-drawer .dw-date .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cal-drawer .dw-date .v i{font-style:normal;font-weight:600;color:var(--ink-faint)}
  .cal-drawer .dw-date svg{width:20px;height:20px;flex:0 0 20px;color:var(--brand)}
  .cal-drawer .dw-date:hover{background:var(--surface);border-color:var(--line-strong)}
  .cal-drawer .dw-date:focus-visible{outline:none;border-color:var(--brand);background:var(--surface);
    box-shadow:0 0 0 3px var(--brand-tint)}
  /* иконка слева внутри залитого поля */
  .cal-drawer .df.dfi{position:relative}
  .cal-drawer .df.dfi > svg{position:absolute;left:15px;bottom:16px;width:20px;height:20px;
    color:var(--brand);pointer-events:none}
  .cal-drawer .df.dfi > select,.cal-drawer .df.dfi > input{padding-left:45px}
  /* стрелка списка — своя, системная у каждой ОС выглядит по-разному */
  .cal-drawer .df select,.cal-drawer .df select:focus{-webkit-appearance:none;appearance:none;padding-right:40px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4CFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:18px 18px}
  /* глифы «›», «×», «＋» и эмодзи заменены вектором */
  .cal-drawer .cl .chev{display:grid;place-items:center;width:24px;height:24px;color:var(--ink-faint)}
  .cal-drawer .cl .chev svg{width:19px;height:19px}
  .cal-drawer .cl:hover .chev{color:var(--brand)}
  .dw-svc-add{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;
    border-radius:10px;background:none}
  .dw-svc-add:hover{background:var(--brand-tint)}
  .dw-svc-add svg{width:17px;height:17px;flex:0 0 17px}
  .dw-svc-add.ic{min-height:36px;border-radius:10px;background:var(--brand-tint);color:var(--brand-ink)}
  .cal-drawer .dw-svc .x,.grp-list .gi .x{width:28px;height:28px;display:inline-grid;place-items:center;
    border:0;border-radius:9px;background:var(--surface-2);color:var(--ink-faint);vertical-align:middle;
    padding:0;flex:0 0 28px}
  .grp-list .gi .x{margin-left:6px}
  .cal-drawer .dw-svc .x:hover,.grp-list .gi .x:hover{background:#FCE9EC;color:#A83A50}
  .cal-drawer .dw-svc .x svg,.grp-list .gi .x svg{width:14px;height:14px}
  .dw-pend b{display:flex;align-items:center;gap:8px}
  .dw-pend b svg{width:18px;height:18px;flex:0 0 18px}
  /* финансы жили по своим правилам и остались «системными» на фоне
     перерисованных полей — выравниваем язык */
  .dw-fin{border-color:var(--line-strong);border-radius:14px;padding:6px 14px 12px}
  .dw-fin .fr{font-size:13.5px;padding:7px 0;align-items:center;color:var(--ink-soft)}
  .dw-fin .fr > span:last-child{font-weight:700;color:var(--ink)}
  .dw-fin .fr input,.dw-fin .fr select{min-height:38px;border:1px solid transparent;border-radius:11px;
    background:var(--surface-2);font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);
    padding:0 12px;outline:none}
  .dw-fin .fr input{width:96px;text-align:right}
  .dw-fin .fr input:focus,.dw-fin .fr select:focus{border-color:var(--brand);background:var(--surface);
    box-shadow:0 0 0 3px var(--brand-tint)}
  .dw-fin .fr select{-webkit-appearance:none;appearance:none;padding-right:34px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4CFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;background-size:16px 16px}
  .dw-fin .fr.tot{padding-top:11px;font-size:14px}
  .dw-fin .fr.tot span{font-weight:800;color:var(--ink)}
  /* журнал правок: дата в 78px не помещалась и ломалась на две строки */
  .dw-hist{gap:0;font-size:12.5px;background:var(--surface-2);border-radius:14px;padding:4px 14px}
  .dw-hist .hi{display:block;padding:9px 0;border-bottom:1px solid var(--line)}
  .dw-hist .hi:last-child{border-bottom:0}
  .dw-hist .hi time{display:block;width:auto;font-size:11px;font-weight:700;color:var(--ink-faint);
    margin-bottom:2px;letter-spacing:.02em}
  .dw-hist .hi span{color:var(--ink-soft)}
  .dw-hist .hi b{color:var(--ink)}
  .dw-hist > .muted{display:block;padding:9px 0}
  /* --- сам календарь: крупнее, мягче, в наших цветах --------------------- */
  .bdp{padding:6px;border-radius:18px;box-shadow:0 18px 44px rgba(28,20,70,.18)}
  .bdp .na-cal{padding:6px 8px 8px}
  .bdp .na-cal-h{gap:6px;padding:2px 0 10px}
  .bdp .na-cal-h button{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:11px;
    background:var(--surface-2);color:var(--brand-ink)}
  .bdp .na-cal-h button:not(:disabled):hover{background:var(--brand-tint)}
  .bdp-s{height:36px;border:0;border-radius:11px;background:var(--surface-2);font-weight:700;color:var(--ink);
    padding:0 8px;-webkit-appearance:none;appearance:none}
  .bdp-s.bdp-y{flex:0 0 82px}
  /* одно окно на месяц с годом — отдельного года в шапке больше нет */
  .bdp-s.bdp-my{flex:1;min-width:0;text-align:center;text-align-last:center}
  .bdp .na-dow span{font-size:11px;font-weight:800;color:var(--ink-faint);padding-bottom:6px}
  .bdp .na-days{gap:2px}
  .bdp .na-days button{min-height:38px;border-radius:12px;font-size:14px;font-weight:600;color:var(--ink)}
  .bdp .na-days button:not(:disabled):hover{background:var(--brand-tint);color:var(--brand-ink)}
  .bdp .na-days button.td{background:transparent;color:var(--brand-ink);font-weight:800;
    box-shadow:inset 0 0 0 1.5px var(--brand)}
  .bdp .na-days button.sel,.bdp .na-days button.sel:hover{color:#fff;font-weight:800;box-shadow:none;
    background:linear-gradient(145deg,#8E7CFF,#5B4CFF)}
  /* прошедшие дни не гасим «серым по серому», а явно выключаем: записывать
     задним числом нельзя (просьба владелицы 21.09.2026) */
  .na-days button.gone,.na-days button.gone:hover{color:var(--ink-faint);opacity:.28;background:none;
    cursor:default;box-shadow:none;font-weight:500}
  .na-days button.gone.out{opacity:.16}
  .na-cal-h button:disabled{opacity:.3;cursor:default}
  /* Подпись месяца вместо списка: короткий диапазон листается стрелками
     (просьба владелицы 04.10.2026). */
  .bdp-my-lbl{flex:1;text-align:center;font-size:13.5px;font-weight:800;letter-spacing:-.01em;
    color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
  .bdp-f{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
  .bdp-f button{min-height:38px;width:100%;border-radius:11px;font-size:13px;color:var(--brand-ink);
    background:var(--surface-2)}
  .bdp-f button:hover{background:var(--brand-tint)}

  /* ==========================================================================
     ЭКРАН «РЕДАКТИРОВАТЬ КЛИЕНТА» (21.09.2026, референс владелицы).
     Отдельная страница поверх карточки: шапка с «назад», поля с подписью на
     рамке, серые полосы разделов, внизу закреплены корзина и «Сохранить».
     Переключателя «Онлайн бронирование» из референса нет — по просьбе.
     Цвета наши: сохранение — фирменный градиент, а не чёрный.
     ========================================================================== */
  .cle{position:fixed;inset:0;z-index:200;background:var(--surface);display:flex;flex-direction:column}
  /* Пока правим — карточки на экране нет вовсе. Ни один слой не может
     оказаться «под» другим, если второго слоя просто нет. */
  body.cle-on .cl-dw{display:none}
  /* Плавающие кнопки «+» и чат висели ПОВЕРХ карточки и экрана правки: у них
     свой z-index (209 и 2400), и правило с opacity их не убирало (видео
     владелицы 21.09.2026 — «+» поверх поля «Ответственный»). display:none
     не спорит ни с каким opacity. */
  /* !important здесь обязателен: кнопку «+» показывает JS ИНЛАЙНОВЫМ
     style="display:grid", а инлайн бьёт любое правило таблицы стилей. */
  body.cle-on .cal-fab,body.cle-on #fab-menu,body.cle-on .eq-fab,body.cle-on .eq-pill,
  body.cl-dw-on .cal-fab,body.cl-dw-on #fab-menu,body.cl-dw-on .eq-pill{display:none!important}
  /* Слой на весь экран ВСЕГДА, а видимую часть задаём отступами: иначе под
     ним в полосе клавиатуры видно страницу (скрин владелицы 21.09.2026). */
  @media(max-width:720px){ .cle{padding-top:var(--vvt,0px);padding-bottom:var(--vvb,0px)} }
  @media(min-width:981px){
    .cle{left:auto;width:52vw;min-width:460px;max-width:820px;border-left:1px solid var(--line-strong);
      box-shadow:var(--shadow-pop)}
  }
  .cle-top{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface)}
  .cle-top b{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink);min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cle-ic{width:40px;height:40px;flex:0 0 40px;border:0;background:none;border-radius:12px;color:var(--ink);
    display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
  .cle-ic:hover{background:var(--surface-2)}
  .cle-ic svg{width:22px;height:22px}
  .cle-b{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 18px}
  .cle-id{display:flex;align-items:center;gap:14px;padding:6px 0 4px}
  .cle-av{width:74px;height:74px;flex:0 0 74px;border-radius:50%;display:grid;place-items:center;
    font-size:22px;font-weight:800;color:#fff;background:linear-gradient(145deg,#8E7CFF,#5B4CFF);
    box-shadow:0 10px 24px -14px rgba(91,76,255,.75)}
  .cle-nm{flex:1;min-width:0;display:grid;gap:12px}
  .cle-tags{display:flex;flex-wrap:wrap;gap:7px;padding:14px 0 2px}
  /* Разделы и поля — в языке самой карточки: подпись сверху мелкими
     прописными, поле залито лавандой без рамки, скругление 14 (просьба
     владелицы 21.09.2026 «дизайн такой же, как сама карточка»). */
  .cle-sec{margin:20px 0 2px;font-size:11px;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-faint)}
  .cle-f{display:block;margin-top:12px}
  /* :not(.cle-dt) обязателен: обёртка поля даты — тоже прямой span внутри
     label, и без исключения она получала стиль ПОДПИСИ (мелкие прописные) —
     «не указана» выводилось как «НЕ УКАЗАНА» 11-м кеглем. */
  .cle-f > span:not(.cle-dt){display:block;margin-bottom:6px;font-size:11px;font-weight:800;
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
  .cle-f input,.cle-f select,.cle-f textarea{width:100%;min-height:52px;border:1px solid transparent;
    border-radius:14px;background:var(--surface-2);padding:0 14px;font-family:inherit;font-size:15px;
    font-weight:600;color:var(--ink);outline:none}
  /* Дата рождения — НЕ input[type=date]: родной календарь браузера нельзя
     оформить (серый системный блок чужим шрифтом поверх нашей формы). Здесь
     кнопка-поле, а сам выбор рисует bdOpen() в нашем стиле. */
  .cle-date{display:flex;align-items:center;gap:10px;width:100%;height:52px;border:1px solid transparent;
    border-radius:14px;background:var(--surface-2);padding:0 14px;font-family:inherit;font-size:15px;
    font-weight:600;color:var(--ink);text-align:left;-webkit-tap-highlight-color:transparent;cursor:pointer}
  .cle-date span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cle-date svg{width:18px;height:18px;flex:0 0 18px;color:var(--ink-faint)}
  .cle-date.ph span{color:var(--ink-faint);font-weight:600}
  .cle-date:hover{border-color:var(--brand)}
  .cle-date:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  /* сам календарь: та же сетка, что в форме записи, плюс месяц и год списками */
  .bdp{z-index:220;width:308px;max-width:calc(100vw - 16px)}
  .bdp-h{gap:5px}
  .bdp-s{flex:1;min-width:0;height:32px;border:1px solid var(--line-strong);border-radius:9px;
    background:var(--surface);font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink);
    padding:0 6px;appearance:none;-webkit-appearance:none;text-align:center;text-align-last:center}
  .bdp-s.bdp-y{flex:0 0 74px}
  .bdp-s:focus{border-color:var(--brand);outline:none}
  .bdp-f{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;text-align:center}
  .bdp-f button{border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:700;
    color:var(--ink-soft);padding:7px 12px;border-radius:9px;cursor:pointer}
  .bdp-f button:hover{background:var(--surface-2);color:var(--brand-ink)}
  .cle-f textarea{padding:14px;font-weight:500;resize:vertical}
  .cle-f select{appearance:none;-webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
      linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
    background-position:calc(100% - 19px) 24px,calc(100% - 14px) 24px;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
  /* Пол — сегмент, а не список: трёх значений не прячут за вторым нажатием,
     и системный <select> посреди фирменных полей выглядел чужим. Ложе и
     белая пилюля — тот же приём, что у переключателя визитов и у полосы
     разделов карточки, так что это не новый язык, а уже знакомый.
     Высота 52px — ровно как у соседних полей, иначе колонка «съезжала». */
  .cle-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
    padding:4px;background:#EDEFF6;border-radius:16px;min-height:52px;align-items:stretch}
  .cle-seg button{display:inline-flex;align-items:center;justify-content:center;gap:7px;
    min-width:0;padding:0 8px;border:0;border-radius:12px;background:none;cursor:pointer;
    font-family:inherit;font-size:13.4px;font-weight:700;color:#6A7288;
    transition:background .16s,color .16s,box-shadow .16s;-webkit-tap-highlight-color:transparent}
  .cle-seg button svg{width:17px;height:17px;flex:0 0 auto}
  .cle-seg button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cle-seg button:hover:not(.on){color:var(--ink)}
  .cle-seg button.on{background:var(--surface);color:var(--brand-ink);
    box-shadow:0 2px 9px rgba(28,33,48,.12)}
  .cle-seg button:focus-visible{outline:2.5px solid var(--brand);outline-offset:-2px}
  /* Узкий экран: «Не указан» — самая длинная подпись из трёх, и на 375px
     тройка сжимается до нечитаемого. Знаки остаются, подписи ужимаются. */
  @media(max-width:420px){
    .cle-seg{gap:3px;padding:3px}
    .cle-seg button{font-size:12.4px;gap:5px;padding:0 5px}
    .cle-seg button svg{width:16px;height:16px}
  }

  .cle-f input:focus,.cle-f select:focus,.cle-f textarea:focus{border-color:var(--brand);
    background:var(--surface);box-shadow:0 0 0 3px var(--brand-tint)}
  .cle-f input.bad,.cle-f select.bad{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
  .cle-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cle-hint{margin-top:14px;font-size:12px;line-height:1.5;color:var(--ink-faint)}
  .cle-err{margin-top:12px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;
    background:color-mix(in srgb,var(--accent) 10%,var(--surface));
    border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:#8E2C46}
  .cle-foot{display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);background:var(--surface)}
  .cle-del{width:56px;height:54px;flex:0 0 56px;border-radius:14px;background:var(--surface);
    border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line-strong));color:var(--accent);
    display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
  .cle-del:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
  .cle-del svg{width:21px;height:21px}
  .cle-save{flex:1;min-height:54px;border:0;border-radius:14px;background:var(--grad);color:#fff;
    box-shadow:var(--glow);font-family:inherit;font-size:14.5px;font-weight:800;letter-spacing:.03em;
    text-transform:uppercase;-webkit-tap-highlight-color:transparent}
  .cle-save:hover{filter:brightness(1.08)}

  /* ---- вкладка «Визиты» по референсу ---- */
  .clv-sw{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:14px 0 12px;
    background:var(--surface-2);border-radius:13px}
  .clv-sw button{border:0;background:none;font-family:inherit;min-height:42px;border-radius:10px;
    font-size:13.5px;font-weight:700;color:var(--ink-soft);-webkit-tap-highlight-color:transparent}
  .clv-sw button.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .clv-sw button em{font-style:normal;font-weight:inherit;opacity:.72}
  .clv{border-bottom:1px solid var(--line);padding:14px 0}
  .clv:last-child{border-bottom:0}
  .clv-main{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;width:100%;
    border:0;background:none;text-align:left;font-family:inherit;padding:0;
    -webkit-tap-highlight-color:transparent;cursor:pointer}
  .clv-d{text-align:center;color:var(--ink-faint)}
  .clv-d i{display:block;font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase}
  .clv-d b{display:block;font-size:22px;font-weight:800;color:var(--ink);line-height:1.1;margin:1px 0}
  .clv-d em{display:block;font-style:normal;font-size:11.5px;font-weight:600}
  .clv-c{min-width:0;border-left:3px solid var(--line-strong);padding-left:11px}
  .clv-c b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3;margin:5px 0 3px}
  .clv-c em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-faint)}
  .clv-st{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    padding:4px 8px;border-radius:7px;background:var(--surface-2);color:var(--ink-soft)}
  .clv-p{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap;align-self:center}
  .clv-again{display:block;width:100%;margin-top:11px;min-height:42px;border-radius:11px;
    border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line-strong));
    background:var(--brand-tint);font-family:inherit;
    font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink);
    -webkit-tap-highlight-color:transparent}
  .clv-again:hover{border-color:var(--brand);background:var(--surface)}
  .clv-empty{padding:22px 0;text-align:center;font-size:13px;color:var(--ink-faint)}
  /* Неявка — красной рамкой (просьба владелицы, 25.09.2026). В общем списке
     она выглядела ровно как состоявшийся визит, хотя это единственная строка,
     из-за которой у карточки вообще появился сегмент «Риск неявки».
     Цвет берём из --st-NO_SHOW-d, а не задаём здесь свой: тем же токеном
     покрашен визит в календаре, и менять оттенок «неявки» надо в ОДНОМ месте,
     иначе карточка и календарь неизбежно разъедутся. Рамка и бледная
     подложка, а не заливка: строка остаётся читаемой. */
  .clv.ns{border:1px solid color-mix(in srgb,var(--st-NO_SHOW-d) 28%,transparent);
    background:color-mix(in srgb,var(--st-NO_SHOW-d) 5%,transparent);
    border-radius:13px;padding:12px;margin:10px 0}
  .clv.ns:last-child{border-bottom:1px solid color-mix(in srgb,var(--st-NO_SHOW-d) 28%,transparent)}
  .clv.ns .clv-c{border-left-color:var(--st-NO_SHOW-d)}
  .clv.ns .clv-st{background:var(--st-NO_SHOW);
    color:color-mix(in srgb,var(--st-NO_SHOW-d) 70%,var(--ink))}
  /* «Забронировать ещё раз» остаётся фирменной — это доброе действие, красить
     его в красный нельзя. Гасим только сиреневую подложку: на розовом она
     мутнеет. */
  .clv.ns .clv-again{background:var(--surface)}
  /* На широком экране «забронировать ещё раз» встаёт справа от строки, а не
     под ней: .clv-again — СОСЕД .clv-main, поэтому колонки раздаёт сам .clv. */
  @media(min-width:641px){
    .clv{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
    .clv-main{align-items:center}
    .clv-again{width:auto;margin:0;padding:0 15px}
  }
  .cl-kg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:14px}
  .cl-kg > div{background:var(--surface-2);border-radius:11px;padding:10px 11px;min-width:0}
  .cl-kg b{font-size:16px;font-weight:800;display:block;letter-spacing:-.01em}
  .cl-kg span{font-size:10.5px;font-weight:700;color:var(--ink-faint);display:block;margin-top:1px}
  .cl-nb{border:1px solid var(--line-strong);border-radius:12px;padding:12px;margin-bottom:14px;
    display:flex;align-items:center;gap:11px;background:var(--surface-2)}
  .cl-nb .ic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--brand-tint);color:var(--brand-ink);
    display:grid;place-items:center}
  .cl-nb .ic svg{width:17px;height:17px}
  .cl-nb .n{flex:1;min-width:0}
  .cl-nb .n b{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);display:block}
  .cl-nb .n span{font-size:13.5px;font-weight:700;display:block;margin-top:2px;line-height:1.4}
  .cl-sub{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);
    margin:16px 0 8px;display:flex;align-items:center;gap:8px}
  .cl-sub:first-child{margin-top:0}
  .cl-sub .a{margin-left:auto;border:0;background:none;font:inherit;font-size:11px;font-weight:800;
    color:var(--brand-ink);text-transform:none;letter-spacing:0;min-height:26px}
  .cl-vr{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:11px;
    margin-bottom:8px;font-size:13px;background:none;width:100%;text-align:left;font-family:inherit;color:inherit}
  .cl-vr:hover{border-color:var(--brand)}
  .cl-vr .dt{font-weight:800;white-space:nowrap;font-size:12.5px;flex:0 0 auto}
  .cl-vr .sv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-vr .sv em{font-style:normal;display:block;font-size:11px;color:var(--ink-faint);font-weight:600}
  .cl-vr .pr{font-weight:800;white-space:nowrap}
  .cl-nt{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:10px;padding:10px 11px;margin-bottom:9px}
  .cl-nt .h{font-size:11px;font-weight:700;color:var(--ink-faint);margin-bottom:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .cl-nt .h .r{margin-left:auto;display:flex;gap:6px}
  .cl-nt .h .r button{border:0;background:none;font:inherit;font-size:11px;font-weight:800;color:var(--brand-ink);min-height:24px}
  .cl-nt .tx{font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
  .cl-fld{margin-bottom:12px}
  .cl-fld label{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
    color:var(--ink-faint);margin-bottom:5px}
  .cl-fld input,.cl-fld select,.cl-fld textarea{width:100%;border:1.5px solid var(--line-strong);background:var(--surface-2);
    border-radius:9px;padding:10px 11px;font-size:14px;color:var(--ink);outline:none;font-family:inherit;min-height:42px}
  .cl-fld textarea{resize:vertical;min-height:70px}
  .cl-fld input:focus,.cl-fld select:focus,.cl-fld textarea:focus{border-color:var(--brand)}
  .cl-fld input.bad,.cl-fld select.bad{border-color:var(--accent)}
  .cl-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .cl-hint{font-size:11.5px;color:var(--ink-faint);font-weight:600;line-height:1.5;margin-top:-6px;margin-bottom:12px}
  .cl-tagbox{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
  .cl-tagx{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;background:var(--surface-2);
    color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:999px;padding:4px 6px 4px 10px;min-height:30px}
  .cl-tagx button{border:0;background:none;color:var(--ink-faint);font-size:14px;line-height:1;padding:0 3px;min-width:20px}
  .cl-tagx button:hover{color:var(--accent)}
  .cl-lgr{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
  .cl-lgr time{font-size:11px;color:var(--ink-faint);font-weight:700;white-space:nowrap;flex:0 0 96px}
  .cl-lgr .b{flex:1;min-width:0}
  .cl-lgr .b span{display:block;font-size:11px;color:var(--ink-faint);font-weight:600;margin-top:2px}
  .cl-gd{border:1px dashed var(--line-strong);border-radius:11px;padding:11px 12px;font-size:12px;
    color:var(--ink-soft);line-height:1.55;margin-bottom:12px}
  .cl-gd b{color:var(--ink)}
  .cl-cons{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;
    padding:10px 11px;margin-bottom:8px}
  .cl-cons .n{flex:1;min-width:0}
  .cl-cons .n b{font-size:13px;display:block}
  .cl-cons .n span{font-size:11px;color:var(--ink-faint);font-weight:600;display:block;margin-top:2px}
  .cl-sw{position:relative;width:42px;height:24px;flex:0 0 42px;border-radius:999px;background:var(--line-strong);
    border:0;transition:background .16s ease}
  .cl-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .16s ease}
  .cl-sw.on{background:var(--brand)}
  .cl-sw.on::after{transform:translateX(18px)}

  /* §11–§12 мастер импорта */
  .cl-steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px}
  .cl-step{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--ink-faint)}
  .cl-step i{width:22px;height:22px;border-radius:50%;background:var(--surface-2);color:var(--ink-faint);
    display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;flex:0 0 22px}
  .cl-step.on{color:var(--brand-ink)}
  .cl-step.on i{background:var(--brand);color:#fff}
  .cl-step.dn i{background:color-mix(in srgb,var(--success) 22%,transparent);color:#1F7A56}
  .cl-step .ln{width:16px;height:1.5px;background:var(--line-strong);border-radius:2px}
  .cl-drop{border:1.5px dashed var(--line-strong);border-radius:13px;padding:22px 16px;text-align:center;
    background:var(--surface-2);margin-bottom:12px}
  .cl-drop.hot{border-color:var(--brand);background:var(--brand-tint)}
  .cl-drop b{display:block;font-size:14px;margin-bottom:5px}
  .cl-drop p{font-size:12px;color:var(--ink-faint);margin-bottom:11px;line-height:1.55}
  .cl-map{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:8px;align-items:center;margin-bottom:8px}
  .cl-map .src{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:9px 10px;
    font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-map .src em{font-style:normal;display:block;font-size:10.5px;font-weight:600;color:var(--ink-faint);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-map .ar{color:var(--ink-faint);text-align:center;font-size:13px}
  .cl-map select{width:100%;border:1.5px solid var(--line-strong);background:var(--surface);border-radius:9px;
    padding:9px 10px;font-size:12.5px;font-weight:700;color:var(--ink);min-height:40px}
  .cl-map select.ok{border-color:color-mix(in srgb,var(--success) 55%,var(--line-strong))}
  .cl-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:13px}
  .cl-sum > div{border:1px solid var(--line);border-radius:12px;padding:11px;text-align:center}
  .cl-sum b{font-size:20px;font-weight:800;display:block;letter-spacing:-.02em}
  .cl-sum span{font-size:10.5px;font-weight:700;color:var(--ink-faint)}
  .cl-sum .new b{color:var(--brand)}
  .cl-sum .upd b{color:var(--blue)}
  .cl-sum .cnf b{color:var(--warn)}
  .cl-sum .bad b{color:var(--accent)}
  .cl-pv{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
  .cl-pv table{width:100%;border-collapse:collapse;font-size:12px}
  .cl-pv th{position:sticky;top:0;background:var(--surface);text-align:left;font-size:10px;font-weight:800;
    text-transform:uppercase;color:var(--ink-faint);padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
  .cl-pv td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
  .cl-pv tr.bad td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
  .cl-pv tr.cnf td{background:color-mix(in srgb,var(--warn) 10%,transparent)}
  .cl-rs{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;
    border-radius:999px;white-space:nowrap}
  .cl-rs.new{background:var(--brand-tint);color:var(--brand-ink)}
  .cl-rs.upd{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
  .cl-rs.cnf{background:color-mix(in srgb,var(--warn) 22%,transparent);color:#8A5A12}
  .cl-rs.bad{background:color-mix(in srgb,var(--accent) 16%,transparent);color:#A83A50}
  .cl-cf{border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-bottom:10px}
  .cl-cf .t{font-size:12.5px;font-weight:800;margin-bottom:6px}
  .cl-cf .d{font-size:12px;color:var(--ink-soft);line-height:1.55;margin-bottom:9px}
  .cl-cf .o{display:flex;gap:7px;flex-wrap:wrap}
  .cl-cf .o button{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:7px 11px;
    font-size:12px;font-weight:700;color:var(--ink-soft);min-height:38px}
  .cl-cf .o button.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-ink)}
  .cl-prog{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:9px}
  .cl-prog i{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .25s ease}
  .cl-csv{width:100%;min-height:150px;border:1px solid var(--line-strong);border-radius:11px;padding:10px 11px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;color:var(--ink);
    background:var(--surface-2);resize:vertical;outline:none}
  .cl-fg{border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-bottom:9px}
  .cl-fg .t{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;margin-bottom:6px}
  .cl-fg .t input{width:17px;height:17px;accent-color:var(--brand)}
  .cl-fg .d{font-size:11.5px;color:var(--ink-faint);font-weight:600;line-height:1.5;padding-left:26px}
  .cl-fg.lock{opacity:.55}
  .cl-lab{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;padding:8px 0;min-height:40px}
  .cl-lab input{width:17px;height:17px;accent-color:var(--brand);flex:0 0 17px}
  .cl-ord{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;
    padding:8px 10px;margin-bottom:7px;background:var(--surface)}
  .cl-ord .g{color:var(--ink-faint);font-size:13px;cursor:grab;line-height:1;letter-spacing:-2px}
  .cl-ord .n{flex:1;min-width:0;font-size:13px;font-weight:700}
  .cl-ord input{width:17px;height:17px;accent-color:var(--brand);flex:0 0 17px}
  .cl-ord .mv{display:flex;gap:4px}
  .cl-ord .mv button{width:28px;height:28px;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:7px;color:var(--ink-soft);font-size:11px;line-height:1}
  .cl-ord .mv button:hover{border-color:var(--brand);color:var(--brand-ink)}
  .cl-ord.drag{opacity:.5}
  .cl-ord.over{border-color:var(--brand);background:var(--brand-tint)}

  /* ТЗ «Импорт / экспорт клиентов»: §1 хаб, §3 drop-zone, §8 предпросмотр, §9 история */
  /* §1 хаб. Кнопка «Импорт клиентов» в шапке раздела открывает этот экран
     напрямую, без промежуточного меню «Действия» (24.09.2026). Раз он стал
     первым, что видит владелец, — он и несёт всю навигацию: шапка-объяснение,
     две равные половины с крупной цифрой, шаблоны и журналы внизу. */
  .cl-ieh{display:flex;align-items:flex-start;gap:13px;padding:14px 15px;margin-bottom:14px;
    border:1px solid #E3DAFF;border-radius:15px;
    background:linear-gradient(118deg,var(--brand-tint) 0%,#F7ECFF 54%,#FDEDF7 100%)}
  .cl-ieh .ic{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:var(--grad);color:#fff;
    display:grid;place-items:center;box-shadow:var(--glow)}
  .cl-ieh .ic svg{width:21px;height:21px}
  .cl-ieh .t{min-width:0}
  .cl-ieh b{display:block;font-size:14.5px;letter-spacing:-.015em;margin-bottom:3px}
  .cl-ieh p{font-size:12.5px;color:var(--ink-soft);line-height:1.55;font-weight:600;text-wrap:pretty}

  .cl-ie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
  .cl-ie-c{position:relative;overflow:hidden;border:1.5px solid var(--line-strong);border-radius:16px;
    background:var(--surface);display:flex;flex-direction:column;cursor:pointer;
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
  /* Градиентная нить по верхнему краю — подсветка выбора, а не рамка: на
     :hover она проявляется, поэтому не занимает место в обычном состоянии. */
  .cl-ie-c::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);
    opacity:0;transition:opacity .16s ease}
  .cl-ie-c:hover{border-color:var(--brand);box-shadow:var(--shadow-md);transform:translateY(-2px)}
  .cl-ie-c:hover::before{opacity:1}
  .cl-ie-c:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .cl-ie-c .hd{display:flex;align-items:center;gap:11px;padding:15px 15px 0}
  .cl-ie-c .ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:var(--brand-tint);
    color:var(--brand-ink);display:grid;place-items:center;
    transition:background .16s ease,color .16s ease,box-shadow .16s ease}
  .cl-ie-c .ic svg{width:19px;height:19px}
  .cl-ie-c:hover .ic{background:var(--grad);color:#fff;box-shadow:var(--glow)}
  .cl-ie-c b{font-size:15.5px;letter-spacing:-.015em}
  .cl-ie-c p{font-size:12.5px;color:var(--ink-soft);line-height:1.55;font-weight:600;padding:9px 15px 0;flex:1;
    text-wrap:pretty}
  .cl-ie-c .fig{display:flex;align-items:baseline;gap:7px;padding:12px 15px 0;flex-wrap:wrap}
  .cl-ie-c .fig i{font-style:normal;font-size:21px;font-weight:800;letter-spacing:-.025em;white-space:nowrap;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .cl-ie-c .fig span{font-size:11px;font-weight:700;color:var(--ink-soft);letter-spacing:.05em;
    text-transform:uppercase;line-height:1.35}
  .cl-ie-c .go{margin-top:13px;padding:11px 15px;border-top:1px solid var(--line);
    font-size:12.5px;font-weight:800;color:var(--brand-ink);display:flex;align-items:center;gap:7px}
  .cl-ie-c .go svg{width:15px;height:15px;flex:0 0 15px;transition:transform .16s ease}
  .cl-ie-c:hover .go svg{transform:translateX(3px)}
  /* Без права роли половина не исчезает, а гаснет с замком: так видно, что
     возможность есть, но закрыта — а не «в этой версии такого нет». */
  .cl-ie-c.lock{opacity:.55;cursor:default}
  .cl-ie-c.lock:hover{border-color:var(--line-strong);box-shadow:none;transform:none}
  .cl-ie-c.lock:hover::before{opacity:0}
  .cl-ie-c.lock:hover .ic{background:var(--brand-tint);color:var(--brand-ink);box-shadow:none}
  .cl-ie-c.lock .go{color:var(--ink-faint)}
  .cl-ie-c.lock:hover .go svg{transform:none}

  .cl-ie-tpl{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:12px;
    border:1px dashed var(--line-strong);border-radius:14px;padding:12px 14px;background:var(--surface-2)}
  .cl-ie-tpl .t{flex:1;min-width:230px;font-size:12.5px;color:var(--ink-soft);line-height:1.55;font-weight:600;
    text-wrap:pretty}
  .cl-ie-tpl .t b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:2px}
  .cl-ie-tpl .bts{display:flex;gap:8px;flex-wrap:wrap}
  .cl-ie-more{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
  .cl-ie-more button{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 13px;
    border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);
    font:inherit;font-size:12px;font-weight:700;color:var(--ink-soft);
    transition:border-color .15s ease,color .15s ease,background .15s ease}
  .cl-ie-more button:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-tint)}
  .cl-ie-more svg{width:14px;height:14px;flex:0 0 14px}
  .cl-ie-note{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--ink-faint);
    font-weight:600;line-height:1.55;text-wrap:pretty}
  .cl-ie-note svg{width:14px;height:14px;flex:0 0 14px;margin-top:1px}
  .cl-drop .ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;
    background:var(--surface);color:var(--brand-ink);margin-bottom:9px}
  .cl-drop .tpl{margin-top:10px;font-size:11.5px;font-weight:600;color:var(--ink-faint)}
  .cl-drop .tpl button{border:0;background:none;font:inherit;font-weight:800;color:var(--brand-ink);padding:0}
  .cl-file{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;
    padding:9px 11px;margin-bottom:11px;background:var(--surface-2)}
  .cl-file .ic{color:var(--ink-faint);display:grid;place-items:center;flex:0 0 auto}
  .cl-file .n{flex:1;min-width:0}
  .cl-file .n b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-file .n span{font-size:11px;font-weight:700;color:var(--ink-faint)}
  .cl-file .x{width:26px;height:26px;flex:0 0 26px;border:1px solid var(--line-strong);border-radius:7px;
    background:var(--surface);color:var(--ink-soft);font-size:15px;line-height:1}
  .cl-alert{display:block;margin-bottom:12px;padding:9px 11px;border-radius:10px;font-size:12.5px;
    font-weight:600;line-height:1.55}
  .cl-alert.bad{background:color-mix(in srgb,var(--accent) 11%,transparent);color:#A83A50;
    border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
  .cl-alert.warn{background:color-mix(in srgb,var(--warn) 15%,transparent);color:#8A5A12;
    border:1px solid color-mix(in srgb,var(--warn) 34%,transparent)}
  /* Рассылка приглашений уходит сама, без отдельного подтверждения (решение
     владелицы 24.09.2026) — плашка должна читаться как «вот что сейчас
     произойдёт», а не как ошибка: фирменный тон, не красный и не жёлтый. */
  .cl-alert.info{background:var(--brand-tint);color:var(--brand-ink);
    border:1px solid color-mix(in srgb,var(--brand) 26%,transparent)}
  .cl-alert.info b{color:var(--ink)}
  /* ТЗ §8.4: разбор XLSX идёт в браузере и на телефоне заметно дольше —
     нужен явный статус «идёт работа», а не тишина (или, как было, та же
     красная плашка ошибки, что и у настоящего сбоя). */
  .cl-alert.busy{display:flex;align-items:center;gap:8px;background:var(--brand-tint);color:var(--brand-ink);
    border:1px solid color-mix(in srgb,var(--brand) 28%,transparent)}
  .cl-alert.busy .sp{width:13px;height:13px;flex:0 0 auto;border-radius:50%;
    border:2px solid color-mix(in srgb,var(--brand-ink) 30%,transparent);border-top-color:var(--brand-ink);
    animation:clBusySpin .7s linear infinite}
  @keyframes clBusySpin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){ .cl-alert.busy .sp{animation:none} }
  .cl-alert code{font-size:11.5px}
  /* Проверка адресов перед рассылкой (§ мастера импорта, шаг 4). Список
     отклонённых адресов живёт ВНУТРИ плашки-предупреждения, поэтому у него
     свой фон: без него восемь строк подряд сливаются в сплошное жёлтое
     полотно, и кнопку «Исправить» в нём не видно. */
  .cl-mailg{margin-top:9px}
  .cl-mailg > b{display:block;font-size:12px}
  .cl-mailg > .muted{display:block;font-size:11px;font-weight:600;line-height:1.4;margin-bottom:5px}
  .cl-maill{display:grid;gap:4px}
  .cl-mailr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 8px;border-radius:8px;
    background:color-mix(in srgb,var(--surface) 72%,transparent)}
  .cl-mailr code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Кнопка-ссылка внутри плашки: класса .lnk без контекста в кабинете нет,
     а браузерная кнопка по умолчанию выглядит здесь как чужеродная деталь. */
  .cl-alert .lnk{border:0;background:none;padding:0;font:inherit;font-size:11.5px;font-weight:800;
    color:currentColor;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .cl-alert .lnk:hover{opacity:.78}
  .cl-wl{font-size:11px;font-weight:600;color:var(--ink-faint);line-height:1.45;margin-top:2px}
  .cl-code{display:block;font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;color:var(--ink-faint);margin-top:2px}
  .cl-fixb{border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;padding:4px 8px;
    font-size:11px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
  .cl-fixb:hover{border-color:var(--brand);color:var(--brand-ink)}
  .cl-pv tr.fix td{background:var(--surface-2);padding:11px}
  .cl-fix .cl-fld{margin-bottom:8px}
  .cl-pol{display:grid;gap:7px}
  .cl-polb{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:11px;padding:9px 11px;
    text-align:left;display:block;width:100%}
  .cl-polb b{display:block;font-size:12.5px;font-weight:800;color:var(--ink)}
  .cl-polb span{display:block;font-size:11.5px;font-weight:600;color:var(--ink-faint);margin-top:2px;line-height:1.5}
  .cl-polb.on{border-color:var(--brand);background:var(--brand-tint)}
  .cl-polb.on b{color:var(--brand-ink)}
  .cl-fgrp{border:1px solid var(--line);border-radius:12px;padding:4px 12px 8px;margin-bottom:9px}
  .cl-fgrp .h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
    color:var(--ink-faint);padding:9px 0 3px}
  .cl-fgrp .cl-lab{padding:5px 0;min-height:34px;font-size:12.5px}
  .cl-lab em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
    font-weight:600;color:var(--ink-faint)}
  .cl-lab .mut{font-size:10.5px;font-weight:700;color:var(--ink-faint)}
  .cl-lab.lock{opacity:.55}
  .cl-jobs{display:grid;gap:9px}
  .cl-job{border:1px solid var(--line);border-radius:12px;padding:11px 12px}
  .cl-job .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
  .cl-job .hd b{font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-job .hd time{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-faint)}
  .cl-job .mt{font-size:11px;font-weight:600;color:var(--ink-faint);margin-bottom:7px}
  .cl-job .fig{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;font-weight:600;color:var(--ink-soft)}
  .cl-job .fig b{font-weight:800;color:var(--ink)}
  .cl-job .st{font-size:11.5px;font-weight:700;color:var(--ink-faint);margin-top:6px}
  .cl-job .ac{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
  .cl-job .ac button{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
    padding:6px 10px;font-size:11.5px;font-weight:700;color:var(--ink-soft);min-height:32px}
  .cl-job .ac button:hover{border-color:var(--brand);color:var(--brand-ink)}
  .cl-job .ac:empty{display:none}

  @media(max-width:1180px){
    .cl-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
    .cl-ch-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  }
  @media(max-width:980px){
    .cl-dw{width:100%;min-width:0;max-width:none;border-left:0}
  }
  @media(max-width:820px){
    .cl-ch-3,.cl-ch-2{grid-template-columns:minmax(0,1fr)}
    .cl-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  /* §19 mobile: таблица превращается в карточки, страница не скроллится вбок */
  @media(max-width:720px){
    .cl-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
    .cl-acts{width:100%}
    .cl-acts .btn,.cl-acts .cl-tool{flex:1;min-height:44px}
    .cl-per{width:100%}
    .cl-per select{flex:1}
    .cl-tw{display:none}
    .cl-cards{display:flex}
    .cl-kg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .cl-2{grid-template-columns:minmax(0,1fr)}
    .cl-dn-s{width:118px;height:118px;flex:0 0 118px}
    .cl-map{grid-template-columns:minmax(0,1fr);gap:5px}
    .cl-map .ar{display:none}
    .cl-ie{grid-template-columns:minmax(0,1fr)}
    .cl-ie-tpl .bts{width:100%}
    .cl-ie-tpl .bts .btn{flex:1;min-height:40px}
    .cl-job .fig{gap:8px}
    .cl-dw .foot .btn{min-width:0}
    body.cl-dw-on .eq-fab{display:none}
  }


  /* ============================================================
     BEZPIECZNE REZERWACJE · §12 таблица, §13 ящик, §29 состояния, §30 mobile
     Палитра уровней держится отдельно от статусов визита: риск — не статус.
     ============================================================ */
  :root{
    --br-hi:#A8323F;   --br-hi-bg:#FDE7E9;   --br-hi-line:#F3C6CC;
    --br-md:#8A5A12;   --br-md-bg:#FFF3DF;   --br-md-line:#F2DCB4;
    --br-lo:#2F5E85;   --br-lo-bg:#E8F1F8;   --br-lo-line:#CBDEEC;
    --br-ok:#1D7A55;   --br-ok-bg:#E4F7EF;   --br-ok-line:#BFE8D6;
    --br-na:#5C5D72;   --br-na-bg:#F1F1F6;   --br-na-line:#E2E2EC;
  }
  .br-hd{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
  .br-hd h1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .br-beta{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    background:var(--brand-tint);color:var(--brand-ink);border-radius:5px;padding:2px 6px}
  .br-hd .br-hd-a{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .br-ru{font-size:13.5px;color:var(--ink-soft)}

  .br-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
  .br-tabs::-webkit-scrollbar{display:none}
  .br-tab{border:0;background:none;padding:10px 13px;font-size:13px;font-weight:700;color:var(--ink-faint);
    border-bottom:2px solid transparent;font-family:inherit;white-space:nowrap;min-height:42px}
  .br-tab:hover{color:var(--ink)}
  .br-tab.on{color:var(--brand-ink);border-bottom-color:var(--brand)}
  .br-tab em{font-style:normal;font-size:10.5px;font-weight:800;background:var(--surface-2);color:var(--ink-faint);
    border-radius:999px;padding:1px 6px;margin-left:5px}
  .br-tab.on em{background:var(--brand-tint);color:var(--brand-ink)}

  .br-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:11px;margin-bottom:16px}
  @media(max-width:1440px){.br-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @media(max-width:1180px){.br-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .br-kpi{padding:13px 14px;min-width:0}
  .br-kpi .l{font-size:11px;font-weight:700;color:var(--ink-faint);display:flex;align-items:center;gap:6px}
  .br-kpi .n{font-size:25px;font-weight:800;letter-spacing:-.025em;margin-top:5px;line-height:1.1}
  .br-kpi .d{font-size:11px;font-weight:600;color:var(--ink-soft);margin-top:4px;line-height:1.4}
  .br-kpi .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
  .br-kpi.nd .n{color:var(--br-na)} .br-kpi.nd .dot{background:var(--br-na)}
  .br-kpi.hi .n{color:var(--br-hi)} .br-kpi.hi .dot{background:var(--br-hi)}
  .br-kpi.md .n{color:var(--br-md)} .br-kpi.md .dot{background:var(--br-md)}
  .br-kpi.lo .n{color:var(--br-lo)} .br-kpi.lo .dot{background:var(--br-lo)}
  .br-kpi.act{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand-tint)}
  .br-kpi button.lnk{border:0;background:none;font-family:inherit;font-size:11px;font-weight:700;
    color:var(--brand-ink);padding:0;text-align:left}

  /* уровень риска: цвет + всегда текст (§12) */
  .br-lvl{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.02em;
    border-radius:999px;padding:3px 9px;white-space:nowrap;border:1px solid transparent}
  .br-lvl .p{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
  .br-lvl.high{background:var(--br-hi-bg);color:var(--br-hi);border-color:var(--br-hi-line)}
  .br-lvl.high .p{background:var(--br-hi)}
  .br-lvl.medium{background:var(--br-md-bg);color:var(--br-md);border-color:var(--br-md-line)}
  .br-lvl.medium .p{background:var(--br-md)}
  .br-lvl.low{background:var(--br-lo-bg);color:var(--br-lo);border-color:var(--br-lo-line)}
  .br-lvl.low .p{background:var(--br-lo)}
  .br-lvl.none{background:var(--br-ok-bg);color:var(--br-ok);border-color:var(--br-ok-line)}
  .br-lvl.none .p{background:var(--br-ok)}
  .br-lvl.na,.br-lvl.nodata{background:var(--br-na-bg);color:var(--br-na);border-color:var(--br-na-line)}
  .br-lvl.na .p,.br-lvl.nodata .p{background:var(--br-na)}
  .br-lvl.big{font-size:12.5px;padding:5px 12px}

  .br-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .br-bar .sp{margin-left:auto}
  .br-sel{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:7px 10px;
    font-size:12.5px;font-weight:600;color:var(--ink);font-family:inherit;min-height:38px}
  .br-search{position:relative;flex:1;min-width:190px;max-width:340px}
  .br-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-faint)}
  .br-search input{width:100%;border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;
    padding:9px 12px 9px 32px;font-size:13px;font-family:inherit;color:var(--ink);outline:none;min-height:38px}
  .br-search input:focus{border-color:var(--brand)}

  .br-tblw{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .br-tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
  .br-tbl th{text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-faint);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
  .br-tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle;min-width:0}
  .br-tbl tr:last-child td{border-bottom:0}
  .br-tbl tbody tr{cursor:pointer}
  .br-tbl tbody tr:hover td{background:var(--surface-2)}
  .br-tbl tr.hi td{box-shadow:inset 3px 0 0 var(--br-hi)}
  .br-tbl tr.md td{box-shadow:inset 3px 0 0 var(--br-md)}
  .br-tbl tr.ackd{opacity:.6}
  .br-cl{display:flex;align-items:center;gap:9px;min-width:0}
  .br-av{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--surface-2);color:var(--ink-soft);
    display:grid;place-items:center;font-size:11px;font-weight:800}
  .br-av.hi{background:var(--br-hi-bg);color:var(--br-hi)}
  .br-cl .t{min-width:0}
  .br-cl b{display:block;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .br-cl span{display:block;font-size:11.5px;color:var(--ink-faint)}
  .br-mine b{display:block;font-size:12.5px;font-weight:700}
  .br-mine span{display:block;font-size:11.5px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .br-why{font-size:12px;color:var(--ink-soft);line-height:1.45}
  .br-why b{color:var(--ink);font-weight:700}
  .br-acts{display:flex;gap:5px;justify-content:flex-end;align-items:center}
  .br-ib{width:30px;height:30px;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
    display:grid;place-items:center;color:var(--ink-soft);flex:0 0 30px}
  .br-ib:hover{border-color:var(--brand);color:var(--brand-ink)}
  .br-ib svg{width:15px;height:15px}
  .br-mini{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:6px 10px;
    font-family:inherit;font-size:12px;font-weight:700;color:var(--brand-ink);white-space:nowrap;min-height:32px}
  .br-mini:hover{border-color:var(--brand);background:var(--brand-tint)}

  /* §12 мини-таймлайн: своя запись — точная, чужая — абстрактная полоса,
     у которой нет ни конца, ни подписи (§11 точное время не раскрываем) */
  .br-tl{position:relative;height:26px;border-radius:7px;background:var(--surface-2);overflow:hidden;min-width:120px}
  .br-tl i{position:absolute;top:0;bottom:0;left:0;width:100%;
    background-image:repeating-linear-gradient(90deg,transparent 0 15px,rgba(17,18,36,.07) 15px 16px)}
  .br-tl .me{position:absolute;top:4px;bottom:4px;border-radius:5px;background:var(--brand);opacity:.92;
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:9.5px;font-weight:800;overflow:hidden}
  .br-tl .ot{position:absolute;top:4px;bottom:4px;border-radius:5px;
    background:repeating-linear-gradient(45deg,#9A9AB0 0 4px,#B4B4C6 4px 8px);
    -webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);mask-image:linear-gradient(90deg,#000 60%,transparent)}
  .br-tl .ot.left{-webkit-mask-image:linear-gradient(270deg,#000 60%,transparent);mask-image:linear-gradient(270deg,#000 60%,transparent)}
  .br-tl .ov{position:absolute;top:4px;bottom:4px;border-radius:5px;background:var(--br-hi);opacity:.85}
  .br-tl-c{font-size:10.5px;font-weight:700;color:var(--ink-faint);margin-top:3px;white-space:nowrap}

  .br-empty{text-align:center;padding:38px 22px}
  .br-empty .ic{width:52px;height:52px;border-radius:15px;background:var(--br-ok-bg);color:var(--br-ok);
    display:grid;place-items:center;margin:0 auto 12px}
  .br-empty .ic svg{width:25px;height:25px}
  .br-empty b{font-size:15.5px;display:block;margin-bottom:6px}
  .br-empty p{font-size:13px;color:var(--ink-soft);line-height:1.6;max-width:520px;margin:0 auto 8px}

  .br-note{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:12px;padding:11px 13px;
    font-size:12.5px;color:var(--ink-soft);line-height:1.55;display:flex;gap:10px;align-items:flex-start}
  .br-note svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px;color:var(--brand-ink)}
  .br-note b{color:var(--ink)}
  .br-note.warn{background:var(--br-md-bg);border-color:var(--br-md-line);color:#6B4610}
  .br-note.warn svg{color:var(--br-md)}
  .br-note.bad{background:var(--br-hi-bg);border-color:var(--br-hi-line);color:#7E2531}
  .br-note.bad svg{color:var(--br-hi)}

  .br-2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
  @media(max-width:1080px){.br-2{grid-template-columns:minmax(0,1fr)}}
  .br-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
  .br-card .bd{padding:15px 16px}
  .br-ch-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
  .br-ch-h b{font-size:13.5px}
  .br-ch-h .muted{margin-left:auto;font-size:11.5px}

  .br-stack{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--surface-2)}
  .br-stack i{display:block;height:100%}
  .br-lg{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:12px;color:var(--ink-soft)}
  .br-lg span{display:inline-flex;align-items:center;gap:6px}
  .br-lg i{width:9px;height:9px;border-radius:3px;display:block}
  .br-lg b{color:var(--ink)}

  .br-bars{display:grid;gap:8px}
  .br-bars .r{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:10px;align-items:center;font-size:12.5px}
  .br-bars .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
  .br-bars .v{text-align:right;font-weight:800;font-size:12.5px}
  .br-bars .tr{grid-column:1/-1;height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:-4px}
  .br-bars .tr i{display:block;height:100%;border-radius:999px;background:var(--brand)}

  .br-spark{display:flex;align-items:flex-end;gap:3px;height:64px}
  .br-spark .c{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:1px;height:100%}
  .br-spark .c i{display:block;border-radius:2px 2px 0 0;min-height:0}
  .br-spark .c .h{background:var(--br-hi)} .br-spark .c .m{background:var(--br-md)} .br-spark .c .l{background:var(--br-lo);opacity:.55}
  .br-spark-x{display:flex;gap:3px;margin-top:5px;font-size:9.5px;color:var(--ink-faint)}
  .br-spark-x span{flex:1;text-align:center;min-width:0;overflow:hidden}

  .br-feed{display:grid;gap:0}
  .br-fi{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
  .br-fi:last-child{border-bottom:0}
  .br-fi .ic{width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;
    background:var(--surface-2);color:var(--ink-soft)}
  .br-fi .ic svg{width:14px;height:14px}
  .br-fi .ic.hi{background:var(--br-hi-bg);color:var(--br-hi)}
  .br-fi .ic.ok{background:var(--br-ok-bg);color:var(--br-ok)}
  .br-fi .ic.md{background:var(--br-md-bg);color:var(--br-md)}
  .br-fi .t{min-width:0;flex:1}
  .br-fi .t b{font-weight:700}
  .br-fi .t em{font-style:normal;display:block;color:var(--ink-faint);font-size:11.5px;margin-top:2px}
  .br-fi .ts{font-size:11px;color:var(--ink-faint);white-space:nowrap}

  /* §13 правый ящик клиента */
  .br-dw{position:fixed;top:0;right:0;bottom:0;width:48vw;min-width:430px;max-width:760px;background:var(--surface);
    border-left:1px solid var(--line-strong);box-shadow:var(--shadow-pop);z-index:120;display:flex;flex-direction:column;
    transform:translateX(102%);transition:transform .22s ease}
  .br-dw.open{transform:none}
  .br-dw .dh{padding:16px 18px;color:#fff;background:linear-gradient(120deg,#7A2E3C,#B0505C);display:flex;align-items:flex-start;gap:13px}
  .br-dw .dh.medium{background:linear-gradient(120deg,#8A5A12,#C08A32)}
  .br-dw .dh.low{background:linear-gradient(120deg,#2F5E85,#5C8CB4)}
  .br-dw .dh.none{background:linear-gradient(120deg,#1D7A55,#4CA981)}
  .br-dw .dh.na,.br-dw .dh.nodata{background:linear-gradient(120deg,#5C5D72,#8A8AA0)}
  .br-dw .dh .av{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:rgba(255,255,255,.2);
    display:grid;place-items:center;font-size:14px;font-weight:800}
  .br-dw .dh .n{flex:1;min-width:0}
  .br-dw .dh .n b{font-size:16.5px;font-weight:800;display:block;letter-spacing:-.01em}
  .br-dw .dh .n .c{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);margin-top:3px;
    display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .br-dw .dh .n .c a{text-decoration:underline;text-underline-offset:2px}
  .br-dw .dh .x{width:32px;height:32px;flex:0 0 32px;border:0;border-radius:9px;background:rgba(255,255,255,.18);
    color:#fff;font-size:17px}
  .br-dw .dh .x:hover{background:rgba(255,255,255,.3)}
  .br-dw .dh .br-lvl{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
  .br-dw .dh .br-lvl .p{background:#fff}
  .br-dw .db{padding:15px 18px;overflow-y:auto;flex:1}
  .br-dw .foot{padding:11px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;background:var(--surface)}
  .br-dw .foot .btn{flex:1;min-width:132px;min-height:42px}
  .br-dw .foot.br-ro{gap:10px;align-items:flex-start;font-size:11.5px;color:var(--ink-faint);line-height:1.5}
  .br-dw .foot.br-ro svg{width:15px;height:15px;flex:0 0 15px;margin-top:1px;color:var(--brand-ink)}
  .br-sec{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);
    margin:18px 0 8px;display:flex;align-items:center;gap:8px}
  .br-sec:first-child{margin-top:0}
  .br-sec .muted{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600;font-size:11px}
  .br-fac{display:grid;gap:7px}
  .br-fac .f{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-strong);border-radius:11px;
    padding:10px 12px;background:var(--surface)}
  .br-fac .f.hit{border-color:var(--br-hi-line);background:var(--br-hi-bg)}
  .br-fac .f.hit.md{border-color:var(--br-md-line);background:var(--br-md-bg)}
  .br-fac .f .ic{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;place-items:center;
    background:var(--surface-2);color:var(--ink-soft);font-size:12px;font-weight:800}
  .br-fac .f.hit .ic{background:rgba(168,50,63,.14);color:var(--br-hi)}
  .br-fac .f.hit.md .ic{background:rgba(138,90,18,.14);color:var(--br-md)}
  .br-fac .f .t{min-width:0;flex:1;font-size:12.5px;line-height:1.45}
  .br-fac .f .t b{display:block;font-size:13px;font-weight:700}
  .br-fac .f .t span{color:var(--ink-soft)}
  .br-fac .f .w{font-size:11px;font-weight:800;color:var(--ink-faint);white-space:nowrap}

  .br-kg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
  .br-kg > div{background:var(--surface-2);border-radius:11px;padding:10px 11px;min-width:0}
  .br-kg b{font-size:16px;font-weight:800;display:block;letter-spacing:-.01em}
  .br-kg span{font-size:10.5px;font-weight:700;color:var(--ink-faint);display:block;margin-top:1px}

  .br-stars{display:inline-flex;gap:2px;color:var(--star);font-size:14px;line-height:1}
  .br-stars i{font-style:normal}
  .br-stars i.off{color:var(--line-strong)}
  .br-relbig{display:flex;align-items:center;gap:12px;border:1px solid var(--line-strong);border-radius:13px;padding:12px 14px}
  .br-relbig .v{font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1}
  .br-relbig .t{min-width:0;font-size:12px;color:var(--ink-soft);line-height:1.45}
  .br-relbig .t b{display:block;font-size:13px;color:var(--ink)}

  .br-rsn{display:flex;flex-wrap:wrap;gap:6px}
  .br-rsn .c{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:5px 10px;
    font-size:11.5px;font-weight:700;color:var(--ink-soft);font-family:inherit;display:inline-flex;gap:6px;align-items:center}
  .br-rsn .c.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-ink)}
  .br-rsn .c.bad.on{border-color:var(--br-hi-line);background:var(--br-hi-bg);color:var(--br-hi)}
  .br-rsn .c em{font-style:normal;font-weight:800;font-size:10.5px;opacity:.65}

  .br-rate-st{display:flex;gap:5px}
  .br-rate-st button{width:40px;height:40px;border:1px solid var(--line-strong);background:var(--surface);border-radius:11px;
    font-size:19px;color:var(--line-strong);font-family:inherit;line-height:1}
  .br-rate-st button.on{color:var(--star);border-color:var(--star)}
  .br-ta{width:100%;border:1px solid var(--line-strong);border-radius:11px;padding:10px 12px;font-size:13px;
    font-family:inherit;color:var(--ink);background:var(--surface);resize:vertical;min-height:74px;outline:none}
  .br-ta:focus{border-color:var(--brand)}

  /* minmax(0,1fr) + min-width:0 — иначе дорожка грида растягивается по
     самой широкой строке (у элементов грида min-width:auto), и раздел
     выезжает за экран телефона на десяток пикселей. */
  .br-set{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;max-width:660px}
  .br-set>*{min-width:0}
  .br-set .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
    border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;background:var(--surface)}
  .br-set .row .t{min-width:0}
  .br-set .row .t b{display:block;font-size:13.5px;font-weight:700}
  .br-set .row .t span{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.45}
  .br-set .row.off{opacity:.55}
  .br-tg{width:42px;height:24px;border-radius:999px;background:var(--line-strong);border:0;position:relative;
    flex:0 0 42px;transition:background .15s}
  .br-tg::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
    transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .br-tg.on{background:var(--brand)}
  .br-tg.on::after{transform:translateX(18px)}

  .br-mx{width:100%;border-collapse:collapse;font-size:12.5px}
  .br-mx th,.br-mx td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
  .br-mx th{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);font-weight:800}
  .br-mx td.y{color:var(--br-ok);font-weight:800}
  .br-mx td.n{color:var(--ink-faint)}

  .br-pl{width:100%;border-collapse:collapse;font-size:12.5px}
  .br-pl td{padding:7px 10px;border-bottom:1px solid var(--line)}
  .br-pl td:first-child{color:var(--ink-faint);width:42%}
  .br-pl td:last-child{font-weight:700}

  .br-skel{background:linear-gradient(90deg,var(--surface-2) 25%,#EFEBFA 50%,var(--surface-2) 75%);
    background-size:400% 100%;animation:brsk 1.3s ease-in-out infinite;border-radius:12px}
  @keyframes brsk{0%{background-position:100% 0}100%{background-position:0 0}}
  @media(prefers-reduced-motion:reduce){.br-skel{animation:none}}

  /* §30 mobile: список сжимается до имени, времени, уровня и одной причины,
     ящик становится полноэкранным, действия липнут к низу */
  @media(max-width:900px){
    .br-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media(max-width:720px){
    .br-kpis{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
      margin-left:-16px;margin-right:-16px;padding:0 16px 4px;scrollbar-width:none}
    .br-kpis::-webkit-scrollbar{display:none}
    .br-kpis > .card{flex:0 0 63%;scroll-snap-align:start}
    .br-tbl thead{display:none}
    .br-tbl,.br-tbl tbody,.br-tbl tr,.br-tbl td{display:block;width:auto}
    .br-tbl tr{border-bottom:1px solid var(--line);padding:11px 13px;position:relative}
    .br-tbl tr:last-child{border-bottom:0}
    .br-tbl td{border:0;padding:0;box-shadow:none !important}
    .br-tbl td.m-hide{display:none}
    .br-tbl td.c-mine{margin-top:5px}
    .br-tbl td.c-lvl{position:absolute;right:13px;top:11px}
    .br-tbl td.c-why{margin-top:6px}
    .br-tbl td.c-act{margin-top:9px}
    .br-tbl .br-acts{justify-content:flex-start;flex-wrap:wrap}
    .br-dw{width:100%;min-width:0;max-width:none}
    .br-dw .foot{position:sticky;bottom:0}
    .br-2{grid-template-columns:minmax(0,1fr)}
    .br-search{max-width:none}
  }
  /* закрытые отзывы о клиенте */
  .br-rv{display:grid;gap:9px}
  .br-rv-i{border:1px solid var(--line-strong);border-radius:12px;padding:11px 13px;background:var(--surface)}
  .br-rv-i.mine{border-color:var(--brand-tint);box-shadow:inset 3px 0 0 var(--brand)}
  .br-rv-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
  .br-rv-src{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
    border-radius:999px;padding:2px 8px;background:var(--surface-2);color:var(--ink-faint)}
  .br-rv-src.mine{background:var(--brand-tint);color:var(--brand-ink)}
  .br-rv-src.rpt{background:var(--br-md-bg);color:var(--br-md)}
  .br-rv-i.disputed{border-style:dashed;border-color:var(--br-md-line)}
  .br-rv-h .ts{margin-left:auto;font-size:11px;color:var(--ink-faint);white-space:nowrap}
  .br-rv-i p{font-size:12.5px;color:var(--ink-soft);margin-top:8px;line-height:1.55}
  .br-rv-i .hid{font-size:11.5px;color:var(--ink-faint);margin-top:8px;line-height:1.5;font-style:italic}
  .br-rv-f{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
  .br-rv-f .muted{font-size:11px}
  .br-rv-f .br-mini{margin-left:auto}
  /* пунктир = «это не показывают клиенту» */
  .br-note.conf{background:var(--br-hi-bg);border:1px dashed var(--br-hi);color:#7E2531}
  .br-note.conf svg{color:var(--br-hi)}

  /* метка высокого риска в календаре и «Записях» */
  .br-mk{display:inline-grid;place-items:center;width:14px;height:14px;flex:0 0 14px;border-radius:4px;
    background:var(--br-hi);color:#fff;font-size:10px;font-weight:800;line-height:1;
    margin-right:5px;vertical-align:-2px;cursor:help}
  .dc-ev.br-risk{box-shadow:inset 0 0 0 1.5px var(--br-hi)}
  .wk-ev.br-risk,.mo .mc .me.br-risk{box-shadow:inset 0 0 0 1.5px var(--br-hi)}
  .ap-row.br-risk{box-shadow:inset 3px 0 0 var(--br-hi)}
  .ap-row.br-risk .cl b{align-items:center}
  @media(prefers-contrast:more){.br-mk{outline:1px solid #fff}}

  .br-fm{display:grid;gap:9px}
  .br-fm .br-sel{width:100%;min-height:46px}
  .br-fm .chip{justify-self:start;min-height:40px}
  body.br-dw-on{overflow:hidden}
  @media(min-width:721px){body.br-dw-on{overflow:auto}}

  /* ============================================================
     QR-КОДЫ (ТЗ «ELYQO BUSINESS · QR-коды — original quality»)
     Три колонки: список кодов · сцена с макетом · адрес и экспорт.
     Порог медиазапросов сдвинут на ширину боковой навигации кабинета.
     ============================================================ */
  .qrx{display:grid;grid-template-columns:250px minmax(0,1fr) 320px;gap:16px;align-items:start}
  @media(max-width:1420px){ .qrx{grid-template-columns:230px minmax(0,1fr)} .qrx .qr-side{grid-column:1/-1} }
  @media(max-width:1040px){ .qrx{grid-template-columns:1fr} }

  .qr-list{display:grid;gap:8px}
  .qr-it{display:grid;gap:3px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;
    background:var(--surface);cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
  .qr-it:hover{border-color:var(--brand)}
  .qr-it.on{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)}
  .qr-it b{font-size:13.5px;font-weight:700}
  .qr-it .al{font-size:11.5px;color:var(--ink-faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .qr-it .mt{font-size:11.5px;color:var(--ink-soft);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .qr-it .pin{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--brand);border:1px solid currentColor;border-radius:6px;padding:0 5px}

  .qr-stage{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
    padding:18px;display:grid;justify-items:center;gap:14px}
  .qr-shot{width:min(420px,100%);aspect-ratio:1;border-radius:14px;overflow:hidden;
    background:repeating-conic-gradient(rgba(127,127,127,.10) 0 25%,transparent 0 50%) 0 0/16px 16px;
    display:grid;place-items:center;position:relative}
  /* без подложки шахматка должна быть средне-серой: на светлой и серебро,
     и графит одинаково читаются, а на белой карточке серебро исчезает */
  .qr-shot.alpha{background:repeating-conic-gradient(#9aa1aa 0 25%,#c6ccd3 0 50%) 0 0/18px 18px}
  .qr-pre .th.alpha{background:repeating-conic-gradient(#9aa1aa 0 25%,#c6ccd3 0 50%) 0 0/8px 8px}
  .qr-shot img{width:100%;height:100%;display:block;object-fit:contain}
  .qr-shot .ld{position:absolute;inset:0;display:grid;place-items:center;font-size:12.5px;
    color:var(--ink-faint);background:var(--surface)}
  .qr-cap{font-size:12px;color:var(--ink-faint);text-align:center;max-width:440px}

  .qr-pres{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
  @media(max-width:620px){ .qr-pres{grid-template-columns:repeat(2,1fr)} }
  .qr-pre{border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--surface);
    cursor:pointer;display:grid;gap:6px;justify-items:center;font:inherit;color:inherit}
  .qr-pre:hover{border-color:var(--brand)}
  .qr-pre.on{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)}
  .qr-pre .th{width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--bg-soft)}
  .qr-pre .th img{width:100%;height:100%;display:block}
  .qr-pre span{font-size:11.5px;font-weight:700;text-align:center;line-height:1.25}
  .qr-pre small{font-size:10.5px;color:var(--ink-faint);text-align:center;line-height:1.2}

  .qr-side{display:grid;gap:14px}
  .qr-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:14px}
  .qr-box h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
    color:var(--ink-faint);margin:0 0 10px}
  .qr-url{display:flex;gap:8px;align-items:center;background:var(--bg-soft);border:1px solid var(--line);
    border-radius:10px;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;word-break:break-all}
  .qr-url button{flex:0 0 auto}
  .qr-note{font-size:11.5px;color:var(--ink-faint);margin-top:8px;line-height:1.45}
  .qr-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .qr-row.one{grid-template-columns:1fr}

  /* «без фона»: чекбокс живёт рядом с кнопкой скачивания */
  .qr-alpha{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);
    margin:2px 0 10px;cursor:pointer;line-height:1.3}
  .qr-alpha input{width:16px;height:16px;flex:0 0 16px;accent-color:var(--brand);margin:0}
  /* атрибут hidden сам по себе слабее авторских правил: .btn объявлен
     inline-flex и перебивал его — прячем явно и по всему разделу */
  .qrx [hidden]{display:none}

  .qr-gate{display:grid;gap:7px}
  .qr-chk{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start;font-size:12px;line-height:1.4}
  .qr-chk i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-style:normal;
    font-size:10px;font-weight:800;color:#fff;margin-top:1px}
  .qr-chk.ok i{background:#28A76A} .qr-chk.warn i{background:#E0A21A} .qr-chk.fail i{background:#E0544E}
  .qr-chk b{display:block;font-weight:700}
  .qr-chk span{color:var(--ink-soft)}
  .qr-gs{font-size:12px;font-weight:700;padding:7px 10px;border-radius:9px;margin-bottom:10px}
  .qr-gs.ok{background:rgba(40,167,106,.12);color:#1c7b4d}
  .qr-gs.warn{background:rgba(224,162,26,.14);color:#8a6209}
  .qr-gs.fail{background:rgba(224,84,78,.13);color:#a2322c}
  .qr-gs.run{background:var(--bg-soft);color:var(--ink-faint)}



/* Язык кабинета — ряд коротких кнопок в меню профиля. Коды, а не флаги:
   флаг означает страну, а не язык (для английского пришлось бы выбирать
   между Британией и США). */
.bh-langrow{display:flex;gap:6px;padding:6px 10px 10px}
.bh-lang{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 4px;border:1px solid var(--line,#E4E0F0);border-radius:10px;
  background:#fff;font:inherit;font-size:12px;font-weight:800;color:var(--ink,#16132B);cursor:pointer}
.bh-lang i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted,#6E6B84)}
.bh-lang:hover{border-color:var(--brand,#5B4BE0)}
.bh-lang.on{background:var(--brand,#5B4BE0);border-color:var(--brand,#5B4BE0);color:#fff}
.bh-lang.on i{color:rgba(255,255,255,.82)}


/* Слот переключателя языка в шапке кабинета: компонент приходит из
   lang-switcher.js, здесь только место под него. */
.bh-lang-slot{display:inline-flex;align-items:center;margin-left:4px}
@media(max-width:640px){ .bh-lang-slot{margin-left:2px} }


/* ---- §9.4 редактор шаблона запроса отзыва ----
   Подстановки стоят чипами над полем: так видно сразу весь набор, а не список
   в справке, и любую можно поставить в текст одним нажатием. */
.rv-tpl{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.rv-tpl-hint{font-size:12.5px;line-height:1.45;color:var(--mut,#6b6580)}
.rv-tpl-chips{display:flex;flex-wrap:wrap;gap:6px}
.rv-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:5px 9px;border:1px solid var(--ln,#e7e0ef);border-radius:9px;
  background:var(--bg2,#f8f6fb);cursor:pointer;text-align:left;
  transition:background .12s,border-color .12s}
.rv-chip:hover{background:#f1ecff;border-color:#cdbdfa}
.rv-chip b{font-size:12px;font-weight:700;color:#5234c9;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rv-chip i{font-size:11px;font-style:normal;color:var(--mut,#6b6580);white-space:nowrap}
.rv-tpl-ta{width:100%;min-height:112px;padding:11px 12px;border:1px solid var(--ln,#e7e0ef);
  border-radius:12px;font:inherit;font-size:14px;line-height:1.5;resize:vertical;background:#fff}
.rv-tpl-ta:focus{outline:2px solid #5234c9;outline-offset:1px;border-color:transparent}
.rv-tpl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-tpl-err{flex:1 1 auto;font-size:12.5px;font-weight:600;color:#b3261e}
.rv-tpl-err[hidden]{display:none}
.rv-tpl-err[hidden]+.rv-tpl-len{margin-left:auto}
.rv-tpl-len{font-size:12px;color:var(--mut,#6b6580);font-variant-numeric:tabular-nums}
.rv-tpl-prev{display:flex;flex-direction:column;gap:5px}
.rv-tpl-prev>b{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--mut,#6b6580)}
/* Предпросмотр держит переносы строк шаблона: письмо придёт абзацами. */
.rv-tpl-prev .rv-preview{white-space:pre-wrap}
@media(max-width:640px){
  .rv-chip i{display:none}
  .rv-chip{padding:7px 10px}
}


/* Состояние шаблона над кнопкой рассылки: пока текст не подготовлен,
   запросы не уходят — и это должно быть видно до нажатия. */
.rv-tplstate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0;
  padding:10px 12px;border:1px solid #f0d9a8;border-radius:12px;background:#fff8e9}
.rv-tplstate.ok{border-color:var(--ln,#e7e0ef);background:var(--bg2,#f8f6fb)}
.rv-tplstate>span{display:flex;flex-direction:column;gap:2px;flex:1 1 180px;min-width:0}
.rv-tplstate b{font-size:13px;font-weight:700}
.rv-tplstate em{font-size:12px;font-style:normal;color:var(--mut,#6b6580)}
.rv-tpl-meta{flex:1 1 auto;font-size:12px;color:var(--mut,#6b6580)}

/* На пустом экране раздела блок состояния стоит по центру, как и остальной
   текст карточки, и не растягивается на всю ширину. */
.rv-none .rv-tplstate{max-width:460px;margin:14px auto 0;text-align:left}

/* ===========================================================================
   §7.3 КОЛЕСО ВЫБОРА подарочной карты — процедуры и срок действия.

   Прокрутка с притяжением, как таймер в iOS: полоса выбора по центру, края
   затухают маской. Вынесено в CSS, а не в инлайн раздела карт, по одной
   причине — ::-webkit-scrollbar и mask-image инлайном не задаются, а без них
   компонент выглядит обычным списком с полосой прокрутки.
   ========================================================================= */
.gcw{position:relative;border:1.5px solid var(--line-strong);border-radius:12px;
  background:var(--surface);overflow:hidden}
.gcw-chev{display:flex;align-items:center;justify-content:center;height:24px;border:0;
  background:none;color:var(--ink-faint);width:100%;padding:0;cursor:pointer;line-height:0}
.gcw-chev:hover{color:var(--brand)}
.gcw-chev svg{width:15px;height:15px}
.gcw-bar{display:flex;border-bottom:1px solid var(--line)}
.gcw-bar.bot{border-bottom:0;border-top:1px solid var(--line)}
.gcw-bar .gcw-chev{flex:1}
.gcw-lanes{position:relative;display:flex}
.gcw-band{position:absolute;left:5px;right:5px;height:38px;top:50%;transform:translateY(-50%);
  background:var(--brand-tint);border:1px solid var(--brand-soft);border-radius:10px;
  pointer-events:none;z-index:0}
.gcw-lane{position:relative;z-index:1;flex:1;min-width:0;height:190px;
  overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%)}
.gcw-lane::-webkit-scrollbar{display:none}
.gcw-lane:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:9px}
.gcw-pad{height:76px}
.gcw-opt{height:38px;scroll-snap-align:center;display:flex;align-items:center;gap:9px;
  padding:0 12px;cursor:pointer;user-select:none;white-space:nowrap;
  font-size:14.5px;font-weight:500;color:var(--ink);
  transition:opacity .12s linear,transform .12s linear}
.gcw-opt.num{justify-content:center;font-variant-numeric:tabular-nums}
.gcw-opt .gcw-t{overflow:hidden;text-overflow:ellipsis}
.gcw-opt .gcw-sub{margin-left:auto;font-size:12px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
.gcw-opt .gcw-box{width:16px;height:16px;flex:0 0 16px;border:1.5px solid var(--line-strong);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--surface)}
.gcw-opt .gcw-box svg{width:10px;height:10px;opacity:0}
.gcw-opt.on .gcw-box{background:var(--brand);border-color:var(--brand)}
.gcw-opt.on .gcw-box svg{opacity:1}
.gcw-opt.cur{font-weight:700}
.gcw-empty{padding:72px 12px;text-align:center;color:var(--ink-faint);font-size:13px}
@media (prefers-reduced-motion:reduce){.gcw-lane{scroll-behavior:auto}.gcw-opt{transition:none}}