:root{
  --bg:#EDE7E1; --panel:#FFFDFB; --soft:#F6F1EB; --cream:#EBE4E0;
  --ink:#2B241E; --brand:#52453C; --brand-2:#3E342C; --muted:#97897D; --faint:#B4A99E;
  --line:#E4DBD2; --coral:#FF8562; --red:#DE4A2C; --green:#6A9E71; --gold:#C2A34A;
  --shadow:0 1px 2px rgba(43,36,30,.05),0 10px 30px -18px rgba(43,36,30,.25);
  /* Производные для сетки расписания — из макета Claude Design 04.10. */
  --st-rhythm:#6A9E71; --st-signal:#C2A34A; --st-new:#2E5339; --st-back:#6b6459;
  --hour:#ddd5c5; --half:#f2ede4; --blocked:#e9e4da;
  --sel:#2B3134; --box-line:#EFEAE0; --box-bg:#FCFAF6;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* ⛔ 28.09, Андрей: «разверни Система — меню становится на три строки выше, и вниз за
   пределы экрана уходят и меню, и ДАННЫЕ СТРАНИЦЫ; нижний совет зарезан».
   Причина: строка сетки ничем не ограничена. Высота строки считается по самому высокому
   элементу — вырос список меню, выросла строка, и main уехал ниже экрана целиком.
   Прокрутка у содержимого есть (.content{overflow:auto}), но она оказалась ЗА краем
   экрана вместе с ним, а body{overflow:hidden} её срезал. Ограничиваем строку явно:
   minmax(0,1fr) — «не выше экрана и разрешено сжиматься». Без minmax(0,…) браузер
   считает минимумом высоту содержимого и сжать не даёт. */
body{font-family:'Manrope',-apple-system,'Helvetica Neue',Arial,sans-serif;background:var(--bg);
  color:var(--ink);display:grid;grid-template-columns:262px 1fr;
  grid-template-rows:minmax(0,1fr);
  overflow:hidden;
  font-size:14px;-webkit-font-smoothing:antialiased}
svg{display:block}
button{font-family:inherit}
input,select{font-family:inherit;color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D8CEC4;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ── сайдбар ─────────────────────────────────────────── */
/* ── Свёрнутое меню (Тарик 27.09) ──────────────────────────────────────────
   «Нужна возможность сузить меню до минимальной ширины, оставив пиктограммы и
   контекстную подсказку при наведении».
   ⚠️ Подписи пунктов — голые текстовые узлы внутри <a>, классом их не выключить.
   Поэтому гасим размером шрифта у самой ссылки и возвращаем его дочерним: так
   не пришлось трогать разметку десяти пунктов и рисковать ею. Подсказку JS
   складывает в data-tip из того же текста — она же и есть подпись. */
@media(min-width:769px){
  body.navmin{grid-template-columns:76px 1fr}
  body.navmin aside.nav{padding:22px 8px 14px}
  body.navmin aside.nav a,
  body.navmin aside.nav .grp{font-size:0;justify-content:center;padding:10px 0;gap:0;
    position:relative}
  body.navmin aside.nav a svg,
  body.navmin aside.nav .grp svg{width:20px;height:20px;flex:none}
  body.navmin aside.nav .arr{display:none}
  /* ⚠️ В полоске 64 пикселя за вычетом отступов остаётся 48, а «PRAMAS» даже мелким
     кеглем шире — слово срезалось по букве S. Ставим монограмму: одна буква в круге,
     срезать нечего. Разметку не трогаем, подменяем через ::after — как и подписи
     пунктов меню. Круг заодно кликабельный: это второй способ развернуть меню. */
  body.navmin .logo{padding:0 0 14px;text-align:center;cursor:pointer}
  body.navmin .logo .wm{font-size:0;letter-spacing:0;display:flex;justify-content:center}
  body.navmin .logo .wm::after{content:'P';font-size:15px;font-weight:800;letter-spacing:0;
    width:34px;height:34px;border-radius:11px;display:flex;align-items:center;
    justify-content:center;background:rgba(235,228,224,.12);color:#F4EEE9}
  body.navmin .logo:hover .wm::after{background:rgba(235,228,224,.22)}
  body.navmin .logo .sub{display:none}
  body.navmin .status{display:none}
  body.navmin .navgrp .sub{margin-left:0}
  /* счётчик не теряется: превращается в точку на углу пиктограммы */
  body.navmin aside.nav .b{position:absolute;top:6px;right:12px;min-width:8px;height:8px;
    padding:0;font-size:0;border-radius:50%}
  body.navmin aside.nav .soon{display:none}
  /* подсказка справа от пиктограммы */
  body.navmin aside.nav [data-tip]:hover::after{content:attr(data-tip);position:absolute;
    left:56px;top:50%;transform:translateY(-50%);background:#2B241E;color:#F4EEE9;
    font-size:12px;font-weight:600;letter-spacing:0;padding:6px 11px;border-radius:9px;
    white-space:nowrap;z-index:90;pointer-events:none;
    box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}
}
.navmin-btn{border:0;background:rgba(235,228,224,.10);color:var(--cream);border-radius:9px;
  cursor:pointer;font:inherit;font-size:16px;line-height:1;padding:7px 0;margin:0 0 10px;
  width:100%;opacity:.7}
.navmin-btn:hover{opacity:1;background:rgba(235,228,224,.18)}
@media(max-width:768px),(max-height:520px) and (max-width:1100px){.navmin-btn{display:none}}
aside.nav{background:linear-gradient(178deg,#554840 0%,#453A31 100%);color:var(--cream);
  display:flex;flex-direction:column;padding:22px 14px 14px;
  /* Меню выше экрана — прокручивается САМО, а не растягивает страницу. Пункты «приём
     включён» и «карточек…» стоят внизу и должны оставаться достижимыми. */
  min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
aside.nav::-webkit-scrollbar{width:6px}
aside.nav::-webkit-scrollbar-thumb{background:rgba(235,228,224,.22);border-radius:3px}
/* ⛔ 02.10, Тарик: «меня бесит, что надпись PRAMAS двигается. Поставь её ровно
   посередине коричневой строки». Двигалась она потому, что в журнале слева от неё
   появляется кнопка «Назад» и сдвигает её в потоке. Лечим ОБА состояния разом:
   заголовок centred всегда, а кнопка возврата вынута из потока и прижата влево —
   тогда её появление ничего не двигает. Выравнивать «на глаз» подбором отступа
   было бы хуже: он разъехался бы от любой правки ширины колонки. */
.logo{padding:2px 10px 20px;border-bottom:1px solid rgba(235,228,224,.14);
  margin-bottom:14px;text-align:center;position:relative}
.logo .wm{font-size:17px;font-weight:700;letter-spacing:.34em;color:#F4EEE9}
.logo .sub{font-size:10.5px;letter-spacing:.24em;color:rgba(235,228,224,.55);margin-top:4px;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  color:rgba(244,238,233,.82);text-decoration:none;font-weight:600;font-size:13.5px;
  margin-bottom:2px;transition:.15s;position:relative}
.nav a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav a:hover{background:rgba(235,228,224,.09);color:#fff}
.nav a.on{background:rgba(235,228,224,.14);color:#fff}
.nav a.on::before{content:'';position:absolute;left:-14px;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--coral)}
.nav a .b{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;
  border-radius:999px;min-width:19px;height:19px;display:flex;align-items:center;
  justify-content:center;padding:0 5px}
.nav a .soon{margin-left:auto;font-size:9.5px;letter-spacing:.08em;color:rgba(235,228,224,.45);
  border:1px solid rgba(235,228,224,.25);border-radius:999px;padding:2px 7px;text-transform:uppercase}
.nav .grow{flex:1}
.navgrp .grp{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  color:rgba(244,238,233,.82);font-weight:600;font-size:13.5px;width:100%;border:0;
  background:transparent;cursor:pointer;transition:.15s;font-family:inherit;text-align:left}
.navgrp .grp:hover{background:rgba(235,228,224,.09);color:#fff}
.navgrp .grp svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.navgrp .grp .arr{margin-left:auto;transition:transform .2s;font-size:10px;opacity:.6}
.navgrp.open .grp .arr{transform:rotate(90deg)}
.navgrp .sub{overflow:hidden;max-height:0;transition:max-height .25s ease}
.navgrp.open .sub{max-height:230px}
.navgrp .sub a{padding:8px 12px 8px 26px;font-size:12.5px;margin-bottom:1px}
.navgrp .sub a svg{width:15px;height:15px}
.navgrp .grp .b{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;
  font-weight:800;border-radius:999px;min-width:19px;height:19px;display:flex;
  align-items:center;justify-content:center;padding:0 5px}
.navgrp.open .grp .b{display:none!important}
.status{background:rgba(0,0,0,.18);border-radius:13px;padding:12px 13px;font-size:12px;
  color:rgba(235,228,224,.75);line-height:1.9}
.status .row{display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:#7BC47F;flex:none}
.dot.off{background:#8d8177}
.dot.warn{background:var(--gold)}

/* ── каркас справа ───────────────────────────────────── */
/* min-height:0 обязателен: у элемента сетки минимум по умолчанию равен высоте
   содержимого, и без этого main отказывается сжиматься, а .content не может прокрутиться. */
main{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.top{padding:18px 26px 14px;display:flex;align-items:center;gap:14px;flex:none;position:relative}
.pop{position:absolute;right:26px;top:58px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:14px;display:none;z-index:30;
  flex-direction:column;gap:10px;min-width:250px}
.pop.show{display:flex}
.pop .row{display:flex;align-items:center;gap:9px}
.pop label{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  font-weight:800;width:26px}
.pop input[type=date]{flex:1;border:1px solid var(--line);border-radius:9px;padding:7px 9px;
  font-size:13px;background:var(--soft);outline:none;color:var(--ink)}
.pop input[type=date]:focus{border-color:#B9A88F;background:#fff}
.pop .quick{display:flex;flex-wrap:wrap;gap:6px}
.pop .quick button{border:1px solid var(--line);background:var(--soft);border-radius:999px;
  padding:4px 10px;font-size:11px;font-weight:700;color:#6E6156;cursor:pointer}
.pop .quick button:hover{border-color:#B9A88F;color:var(--ink)}
.top h1{font-size:21px;font-weight:800;letter-spacing:-.01em}
.top .sp{flex:1}
/* Переключатель дашбордов в шапке (Тарик 14.09): заголовок остаётся заголовком,
   но кликабелен — рядом мягкая шеврон-стрелка, список в стиле остальных всплывашек. */
.dsw{position:relative;display:inline-flex}
.dsw>button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;
  padding:2px 8px 2px 0;margin:0;cursor:pointer;color:var(--ink);
  font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.25;border-radius:10px;
  transition:.15s}
.dsw>button:hover{background:var(--cream)}
.dsw>button svg{width:15px;height:15px;stroke:var(--faint);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:.18s;flex:none}
.dsw.open>button svg{transform:rotate(180deg);stroke:var(--brand)}
.dsw .dmenu{position:absolute;left:-6px;top:calc(100% + 8px);background:var(--panel);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:5px;
  display:none;flex-direction:column;gap:2px;min-width:216px;z-index:40}
.dsw.open .dmenu{display:flex}
.dsw .dmenu button{display:flex;align-items:center;gap:9px;border:0;background:transparent;
  border-radius:10px;padding:9px 11px;font-size:13.5px;font-weight:700;color:#6E6156;
  cursor:pointer;text-align:left;transition:.15s;white-space:nowrap}
.dsw .dmenu button:hover{background:var(--soft);color:var(--ink)}
.dsw .dmenu button.on{background:var(--cream);color:var(--ink)}
.dsw .dmenu button i{width:15px;height:15px;flex:none;display:inline-block;opacity:0}
.dsw .dmenu button.on i{opacity:1}
.dsw .dmenu .dsub{font-size:11px;font-weight:600;color:var(--muted);margin-left:auto;padding-left:14px}
/* Строки метрик фолоу-апов. Жёсткая сетка: подпись — число — доля. Колонки одинаковые
   во всех строках, поэтому числа стоят ровно друг под другом. Выделение фокусной строки
   меняет ТОЛЬКО фон и цвет доли: размеры и отступы те же, иначе колонка «съезжает». */
.furow{display:grid;grid-template-columns:1fr 84px 62px;align-items:baseline;gap:10px;
  padding:9px 12px;margin:0 -12px;border-bottom:1px solid var(--line)}
.furow:last-of-type{border-bottom:0}
.furow .fl{font-size:13px;color:#6E6156}
.furow .fn{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.furow .fp{font-size:12.5px;color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums}
/* ★ Две метрики в фокусе (Тарик 14.09): отклик за 24 ч и конверсия в продажу.
   Выделяем не число, а саму КОНВЕРСИЮ — она и есть то, за чем следим. */
.furow.key{background:#F1F5EF;border-radius:12px;border-bottom-color:transparent}
.furow.key .fl{color:#41603F;font-weight:700}
.furow.key .fp{font-size:15px;font-weight:800;color:#4E8557}
.crumb{font-size:12.5px;color:var(--muted)}
.content{flex:1;overflow:auto;padding:2px 26px 26px}

/* элементы управления */
/* ⚠️ 03.10: при экране 375 переключатель периода занимал 403 пикселя и выходил за
   край. Я замерил это ещё накануне, написал Андрею и не починил — а он увидел на
   снимке. Шесть кнопок в 375 не влезают никак, поэтому ряд прокручивается внутри
   себя: лучше короткая полоса, которую можно подвинуть, чем обрезанная кнопка,
   о существовании которой не догадываешься. */
.seg{display:flex;background:#E2D9CF;border-radius:11px;padding:3px;gap:2px;
  max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none}
.seg button{border:0;background:transparent;border-radius:9px;padding:7px 13px;font-size:12.5px;
  font-weight:700;color:#6E6156;cursor:pointer;transition:.15s}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(43,36,30,.12)}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:8px 12px;min-width:230px}
.search svg{width:15px;height:15px;stroke:var(--faint);fill:none;stroke-width:2;stroke-linecap:round}
.search input{border:0;outline:0;background:transparent;font-size:13.5px;width:100%}
.btn{border:0;background:var(--brand);color:#F4EEE9;border-radius:11px;padding:9px 16px;
  font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.btn:hover{background:var(--brand-2)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--brand)}
.btn.ghost:hover{background:var(--soft)}
.btn.danger{background:transparent;border:1px solid #DDBAB0;color:var(--red)}
.btn.danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  border-radius:999px;padding:4px 10px;background:var(--soft);color:#6E6156;border:1px solid var(--line)}

/* ── дашборд ─────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px}
/* ⛔ 03.10, Андрей: «свести пороги». Было четыре — 768, 900, 1100, 1200, —
   расставленные в разное время и между собой не согласованные. Осталось ДВА:
   768 (телефон) и 1100 (планшет и узкий десктоп). Порог — это обещание: на
   каждом из них раскладка меняется ВСЯ, а не кусками. */
@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px 16px 13px;
  box-shadow:var(--shadow)}
.kpi .lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kpi .val{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:7px}
.kpi .val small{font-size:13px;font-weight:700;color:var(--muted);margin-left:2px}
.kpi .sub{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:11.5px;color:var(--muted)}
.delta{font-weight:800;font-size:11px;border-radius:7px;padding:2px 6px}
.delta.up{color:#3E7A46;background:#E4EFE2}
.delta.dn{color:#A34A34;background:#F6E3DC}
.delta.eq{color:var(--muted);background:var(--soft)}

.grid2{display:grid;grid-template-columns:1.7fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:17px 18px}
.panel h3{font-size:13px;font-weight:800;letter-spacing:.02em;margin-bottom:2px}
.panel .note{font-size:11.5px;color:var(--muted);margin-bottom:12px}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--muted);align-items:center}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}

.fun-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fun-row .nm{width:118px;font-size:12px;font-weight:600;color:#6E6156;text-align:right;flex:none}
.fun-row .bar{flex:1;height:24px;background:var(--soft);border-radius:7px;overflow:hidden;position:relative}
.fun-row .fill{height:100%;border-radius:7px;background:linear-gradient(90deg,#52453C,#7A6656);
  display:flex;align-items:center;justify-content:flex-end;padding:0 8px;
  color:#F4EEE9;font-size:11.5px;font-weight:800;min-width:26px;transition:width .4s}
.fun-row.win .fill{background:linear-gradient(90deg,#5E8B64,#6A9E71)}
.fun-row.lose .fill{background:#C9BEB2}
.fun-row .aed{width:86px;font-size:11.5px;color:var(--muted);flex:none;text-align:right}

.src-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.src-row .dot2{width:9px;height:9px;border-radius:50%;flex:none}
.src-row .nm{font-size:12.5px;font-weight:600;flex:none;width:170px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.src-row .bar{flex:1;height:8px;background:var(--soft);border-radius:6px;overflow:hidden}
.src-row .fill{height:100%;border-radius:6px}
.src-row .n{font-size:12px;font-weight:800;width:30px;text-align:right}

.att{display:flex;flex-direction:column;gap:6px}
.att-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:var(--soft);cursor:pointer;transition:.14s;border:1px solid transparent}
.att-row:hover{border-color:var(--line);background:#F1EAE2}
.att-row .ic{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;flex:none;font-size:12px}
.att-row .ic.unread{background:#F8DED4;color:var(--red)}
.att-row .ic.link{background:#F3E9D3;color:#9A7B2F}
.att-row .ic.silent{background:#E7E0D7;color:#6E6156}
.att-row .t{flex:1;min-width:0}
.att-row .nm{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-row .st{font-size:11px;color:var(--muted)}
.att-row .ago{font-size:11px;color:var(--faint);flex:none}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;
  animation:pp 1.6s ease-in-out infinite}

.mcols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.mcol{display:flex;flex-direction:column;gap:14px}
@media(max-width:1100px){.mcols{grid-template-columns:1fr}}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.mgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
@media(max-width:1100px){.mgrid,.mgrid3{grid-template-columns:1fr}}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px 15px}
.mcard.big{background:linear-gradient(160deg,#FFFDFA,#F6F2EC)}
.mcard .ml{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.mcard .mv{font-size:34px;font-weight:800;letter-spacing:-.025em;line-height:1}
.mcard .mv2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1}
.mcard .mv2.dim{color:#B8ADA1}
.mcard .ms{font-size:11.5px;color:var(--muted);margin-top:7px}
/* ★ Кнопка «что купили» (Тарик 15.09): цифра продаж раскрывает список карточек — какие
   именно оплаты сложились в это число, с пометкой повторных, которые в счёт не идут. */
.mcard.sales-open{cursor:pointer}
.mcard.sales-open:hover{border-color:#D9CFC2}
.sales-caret{font-size:10px;color:var(--muted);margin-left:4px}
.mcard.sales-list{margin-top:-6px;padding:10px 14px 12px}
.sales-list .srow{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.sales-list .srow:last-child{border-bottom:0}
.sales-list .srow{cursor:pointer}
.sales-list .srow:hover{background:rgba(0,0,0,.03)}
.sales-list .srow .sid{font-weight:700;letter-spacing:-.01em}
.sales-list .srow .snm{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sales-list .srow .spr{font-weight:700}
.sales-list .srow.rep{opacity:.55}
.sales-list .srow .tagm{font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 5px}
.sales-list .srow .sx{cursor:pointer;color:var(--muted);font-size:11px;padding:0 2px}
.sales-list .srow .sx:hover{color:#B4462F}
.sales-list .shd{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:6px 0 2px}
.mcard .two{display:flex;gap:26px}
.prow{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.prow .pl{font-size:12px;color:#6E6156;width:112px;flex:none}
.prow .pbar{flex:1;height:7px;background:var(--soft);border-radius:5px;overflow:hidden}
.prow .pbar i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#7A6656,#52453C)}
.prow .pv{font-size:13px;font-weight:700;width:56px;text-align:right;flex:none}
table.rnp{width:100%;border-collapse:collapse;font-size:13px}
table.rnp th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:0 8px 7px}
table.rnp th.n,table.rnp td.n{text-align:right}
table.rnp td{padding:6px 8px;border-top:1px solid var(--line)}
table.rnp tr.sec td{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:800;color:#6E6156;padding-top:14px;border-top:none}
table.rnp tr.sub td{font-size:11px;color:var(--muted);padding:8px 8px 2px;border-top:none}
table.rnp tbody tr:hover td{background:var(--soft)}
/* план месяца */
.plan-row{margin-bottom:13px}
.plan-row .hd{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.plan-row .hd .l{font-size:12px;font-weight:700;color:#6E6156}
.plan-row .hd .v{margin-left:auto;font-size:12px;color:var(--muted)}
.plan-row .hd .v b{color:var(--ink);font-size:13px}
.plan-bar{height:18px;background:var(--soft);border-radius:7px;position:relative;overflow:hidden}
.plan-bar .fill{height:100%;border-radius:7px;background:linear-gradient(90deg,#52453C,#7A6656);transition:width .4s}
.plan-bar .fill.ok{background:linear-gradient(90deg,#5E8B64,#6A9E71)}
.plan-bar .exp{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--coral);border-radius:2px}
.plan-sub{display:flex;gap:14px;font-size:11px;color:var(--muted);margin-top:4px}
.plan-sub b{color:var(--ink)}
.lagchip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  border-radius:999px;padding:5px 12px}
.lagchip.bad{background:#F8DED4;color:var(--red)}
.lagchip.good{background:#E4EFE2;color:#3E7A46}
/* контролёр */
.ctrl-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  background:var(--soft);margin-bottom:7px;border:1px solid transparent;transition:.13s}
.ctrl-row:hover{border-color:var(--line)}
.ctrl-row.done{opacity:.45}
.ctrl-row .pr{width:24px;height:24px;border-radius:8px;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:800;color:#fff}
.ctrl-row .pr.p1{background:var(--red)}
.ctrl-row .pr.p2{background:var(--coral)}
.ctrl-row .pr.p3{background:var(--gold)}
.ctrl-row .pr.p4{background:#9A8C7D}
.ctrl-row .t{flex:1;min-width:0;cursor:pointer}
.ctrl-row .nm{font-size:13px;font-weight:750}
.ctrl-row .why{font-size:11.5px;color:var(--muted);margin-top:1px}
.ctrl-row .acts{display:flex;gap:6px;flex:none}
.ctrl-row .acts button{border:1px solid var(--line);background:var(--panel);border-radius:8px;
  padding:5px 9px;font-size:11px;font-weight:700;color:#5C5044;cursor:pointer}
.ctrl-row .acts button:hover{border-color:#B9A88F}
.ctrl-row .acts button:disabled{opacity:.4;cursor:default}
.ctrl-group{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:800;margin:16px 2px 8px}
.uidc{font-size:10px;font-weight:800;letter-spacing:.04em;color:#9A8C7D;background:var(--soft);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;flex:none}
/* внутренний чат — мессенджер */
.syschat{display:flex;flex-direction:column;height:100%;overflow:hidden}
.sysmsgs{flex:1;overflow-y:auto;padding:6px 4px 14px;display:flex;flex-direction:column;gap:12px}
.sm{display:flex;gap:10px;max-width:78%}
.sm.own{align-self:flex-end;flex-direction:row-reverse}
.sm .ava2{width:34px;height:34px;border-radius:11px;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:16px;background:#E7E0D7;margin-top:2px}
.sm.alertk .ava2{background:#F8DED4}
.sm .bub{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:10px 13px;box-shadow:0 1px 2px rgba(43,36,30,.05);min-width:0}
.sm.own .bub{background:var(--brand);border-color:var(--brand);color:#F6F1EC;
  border-bottom-right-radius:5px}
.sm:not(.own) .bub{border-bottom-left-radius:5px}
.sm .who{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.sm.own .who{color:rgba(246,241,236,.65)}
/* ⛔ 03.10, снимок Андрея: тело сообщения в ленте «Системы» на телефоне шло
   КАПСОМ целиком — читать такой абзац невозможно. Верхний регистр уместен у
   коротких служебных подписей («КЛОД», «ВЗЯЛ В РАБОТУ») и наследуется вниз на
   обычный текст; где именно он включается, я искать перестал — важнее, что текст
   сообщения не должен зависеть от этого вовсе. Говорим прямо: здесь регистр
   такой, каким его написал человек. */
.sm .tx,.sm .step{text-transform:none}
.sm .tx{font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
/* ★ ПЕРЕНОС СТРОК В СОСТОЯНИИ (Тарик 27.09: «иногда они длинные и это хорошо, но
   читать вправо бесконечность сложно… неужели ты не можешь расширять текстовую
   область и переносить строки?»). Был жёсткий флекс в одну линию — длинный шаг
   уезжал за край. Теперь ряд переносится, а сам шаг занимает всю ширину строкой. */
.sm .meta2{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;
  font-size:10.5px;color:var(--faint)}
.sm .step{flex-basis:100%;font-size:11.5px;line-height:1.45;color:var(--ink);
  font-weight:600;white-space:normal;overflow-wrap:anywhere;margin-top:3px}
.sm.own .step{color:rgba(246,241,236,.9)}
.sm .eta{font-weight:700;color:#6E6156;background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;white-space:nowrap}
.sm .eta.late{color:#A34A34;border-color:#EFC0B2;background:#F8E9E4}
.sm.own .meta2{color:rgba(246,241,236,.55)}
.sm .refchip{background:var(--soft);border:1px solid var(--line);border-radius:999px;
  padding:1px 8px;font-weight:700;color:#6E6156;cursor:pointer}
.sm.own .refchip{background:rgba(255,255,255,.15);border-color:transparent;color:#F6F1EC}
.sm .st-taken{color:var(--gold);font-weight:800}
.daychip{align-self:center;background:#E2D9CF;color:#6E6156;font-size:10.5px;font-weight:800;
  border-radius:999px;padding:3px 12px;letter-spacing:.05em}
/* ⛔ Андрей 03.10, снимок #3877: вложенный скриншот 1290 пикселей шириной
   выезжал из пузыря (замер: пузырь 76..365, картинка 76..1366) и тянул за собой
   весь разговор — в Safari вбок уезжала и строка вкладок, и кнопка «Отправить».
   max-width:100% на содержимое — первое правило адаптивной вёрстки, и именно его
   здесь не было (было max-width:none). */
.sm img,.sysmsgs img,.panel img,.syschat img{max-width:100%;height:auto}
.syscomposer{display:flex;gap:9px;padding:12px 2px 2px;flex:none}
.syscomposer{align-items:flex-end}
.syscomposer input,.syscomposer textarea{flex:1;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:13.5px;background:var(--panel);outline:none;
  font-family:inherit;color:inherit}
.syscomposer textarea{resize:none;line-height:1.45;max-height:46vh;overflow-y:auto;
  min-height:44px}
.syscomposer input:focus,.syscomposer textarea:focus{border-color:#B9A88F}
/* внутренний чат системы (старое) */
.feed-item{display:flex;gap:11px;padding:12px 13px;border-radius:13px;background:var(--soft);
  margin-bottom:9px;border:1px solid transparent;transition:.14s}
.feed-item.new{border-color:#E8D9C8;background:#FBF6EF}
.feed-item .ic{width:30px;height:30px;border-radius:10px;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:14px;background:#E7E0D7}
.feed-item.alert .ic{background:#F8DED4}
.feed-item.note .ic{background:#E2E9DE}
.feed-item .t{flex:1;min-width:0}
.feed-item .ttl{font-size:13.5px;font-weight:750;line-height:1.35}
.feed-item .bd{font-size:12.5px;color:#6E6156;margin-top:5px;white-space:pre-wrap;line-height:1.55}
.feed-item .tm{font-size:11px;color:var(--faint);flex:none}
.feed-more{font-size:11.5px;color:var(--brand);cursor:pointer;font-weight:700;margin-top:4px;
  display:inline-block}
/* ── канбан ──────────────────────────────────────────── */
.pipes{display:flex;gap:7px;align-items:center}
/* ★ Кнопка «мозг закрывает сам» (13.09) */
.cmode{display:flex;align-items:center;gap:9px;margin-right:auto;padding-left:14px}
.cmode button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--panel);border-radius:999px;padding:5px 11px 5px 6px;cursor:pointer;
  font-size:12.5px;font-weight:700;color:var(--ink,#2c2a26)}
.cmode button:hover{background:var(--soft)}
.cmode .knob{width:30px;height:17px;border-radius:999px;background:#cfcac2;position:relative;
  transition:background .15s}
.cmode .knob i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;transition:left .15s}
.cmode.on .knob{background:#3b7a57}
.cmode.on .knob i{left:15px}
.cmode .st{font-size:11.5px;color:var(--faint);font-weight:600;white-space:nowrap}
@media(max-width:768px){.cmode{padding-left:0;margin:0}.cmode .st{display:none}}

/* Форма окна для «полного цикла» */
.cmpop{position:fixed;inset:0;background:rgba(20,18,16,.34);display:flex;align-items:center;
  justify-content:center;z-index:80}
.cmcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  width:min(420px,92vw);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.cmcard h4{margin:0 0 6px;font-size:15px}
.cmcard p{margin:0 0 14px;font-size:12.5px;color:var(--faint);line-height:1.45}
.cmrow{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px}
.cmrow label{color:var(--faint);font-size:12.5px}
.cmrow input{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px;
  background:var(--soft);width:78px}
.cmrow input[type=date]{width:150px}
.cmhint{font-size:11.5px;color:var(--faint)}
.cmbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.cmbtns button{border-radius:9px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;
  border:1px solid var(--line);background:var(--soft)}
.cmbtns .cmyes{background:#3b7a57;border-color:#3b7a57;color:#fff}

/* ★ Глобальный поиск по всем воронкам (13.09) */
#gfind:empty{display:none}
.gfind{margin:0 0 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden}
.gfind .ghead{padding:9px 13px;font-size:12px;color:var(--faint);background:var(--soft);
  border-bottom:1px solid var(--line)}
.gfind .grow{display:flex;align-items:center;gap:12px;padding:9px 13px;cursor:pointer;
  border-bottom:1px solid var(--line);font-size:13px}
.gfind .grow:last-child{border-bottom:0}
.gfind .grow:hover{background:var(--soft)}
.gfind .guid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--faint);
  min-width:82px}
.gfind .gname{font-weight:600;min-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gfind .gpipe{color:var(--faint);font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.gfind .gpipe.ghere{color:var(--ok,#3b7a57)}
.gfind .gaed{font-size:12px;color:var(--faint)}
.gfind .gopen{font-size:12px;color:var(--accent,#c2703d);white-space:nowrap}
@media(max-width:768px){.gfind .gname{min-width:0}.gfind .guid{min-width:70px}
  .gfind .gopen{display:none}}
.pipe{border:1px solid var(--line);background:var(--panel);color:#5C5044;border-radius:999px;
  padding:7px 14px;font-size:12.5px;font-weight:700;cursor:pointer;display:flex;
  align-items:center;gap:7px;transition:.14s}
.pipe:hover{border-color:#C9BCA9}
.pipe.on{background:var(--brand);border-color:var(--brand);color:#F4EEE9}
.pipe .cnt{font-size:10.5px;background:rgba(0,0,0,.08);border-radius:999px;padding:1px 7px;font-weight:800}
.pipe.on .cnt{background:rgba(255,255,255,.22)}
.selbig{font:inherit;font-weight:800;font-size:15px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer;box-shadow:var(--shadow)}
.fltdd{position:relative}
.fltpop[hidden]{display:none}
.fltpop{position:absolute;top:calc(100% + 6px);right:0;z-index:60;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 44px -14px rgba(43,36,30,.35);
  padding:12px;width:240px;display:flex;flex-direction:column;gap:7px}
.fltpop .opt{padding:8px 10px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600}
.fltpop .opt:hover{background:var(--soft)}
.fltpop .opt.on{background:var(--brand);color:#fff}
.fltpop .per{border-top:1px solid var(--line);padding-top:9px;display:flex;flex-direction:column;gap:6px}
.fltpop input[type=date]{border:1px solid var(--line);border-radius:9px;padding:6px 8px;
  font-size:12.5px;background:#fff;width:100%}
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start;height:100%}
/* Выбор этапа — только на телефоне: на десктопе все колонки и так перед глазами. */
.fstage{display:none;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.fstage select{padding:7px 9px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:13px;background:var(--panel);color:var(--ink);max-width:62vw}
.col{flex:0 0 258px;background:#E7E0D8;border-radius:15px;padding:11px 10px 10px;
  display:flex;flex-direction:column;max-height:100%}
.col.win{background:#DFE7DC}
.col.lose{background:#E2DDD6;opacity:.85}
.col h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7A6C5E;font-weight:800;
  margin:0 4px 10px;display:flex;align-items:center;gap:7px}
.col.win h3{color:#4E7A54}
.col h3 .cnt{background:rgba(43,36,30,.1);border-radius:999px;padding:1px 8px;font-size:10.5px}
.col h3 .aed{margin-left:auto;font-weight:700;font-size:10.5px;color:#95826F;text-transform:none;letter-spacing:0}
.cards{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:30px;padding:1px}
.card{background:var(--panel);border:1px solid #E9E1D8;border-radius:13px;padding:11px 12px;
  cursor:pointer;transition:.14s;position:relative;box-shadow:0 1px 2px rgba(43,36,30,.05)}
.card:hover{border-color:#C2B29E;transform:translateY(-1px);box-shadow:0 4px 14px -6px rgba(43,36,30,.2)}
.card.sel{border-color:var(--brand);box-shadow:0 0 0 2px rgba(82,69,60,.18)}
.card.unread{border-color:#EFC0B2;animation:ring 1.8s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(222,74,44,.34)}50%{box-shadow:0 0 0 5px rgba(222,74,44,0)}}
@keyframes pp{0%,100%{opacity:1}50%{opacity:.35}}
.card .hd{display:flex;align-items:center;gap:8px}
.card .nm{font-weight:750;font-size:13.5px;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.card .ub{background:var(--red);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;
  min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  padding:0 5px;flex:none;animation:pp 1.6s ease-in-out infinite}
.chan{width:17px;height:17px;flex:none;opacity:.75}
.tg{display:inline-block;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.03em;
  padding:2.5px 8px;border-radius:8px;margin-top:6px;text-transform:uppercase}
.card .lm{font-size:12px;color:#83776B;margin-top:7px;line-height:1.45;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .ft{display:flex;align-items:center;margin-top:8px;font-size:11px;color:var(--faint)}
.card .ft .pr{margin-left:auto;font-weight:800;font-size:12.5px;color:var(--brand)}
.card .demo-chip{position:absolute;top:-6px;right:10px;background:#E2D9CF;color:#8A7B6C;
  font-size:8.5px;font-weight:800;letter-spacing:.06em;padding:1px 6px;border-radius:6px;text-transform:uppercase}

/* ── диалоги ─────────────────────────────────────────── */
.chatgrid{display:grid;grid-template-columns:330px 1fr;gap:12px;height:100%;overflow:hidden}
.chatlist{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.chatlist .search{margin:12px;border-radius:10px;background:var(--soft);border-color:transparent;min-width:0}
.citems{flex:1;overflow-y:auto;padding:0 8px 10px}
.citem{display:flex;gap:11px;padding:11px 10px;border-radius:12px;cursor:pointer;transition:.13s;
  align-items:center}
.citem.cmore{justify-content:center;text-align:center;color:var(--mut,#8a8a8a);
  font-size:13px;cursor:pointer}
.citem.cmore .nm{font-weight:500}
.citem.cmore .tm{opacity:.6;margin-left:6px}
.citem:hover{background:var(--soft)}
.citem.on{background:#EFE7DD}
.ava{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;color:#F4EEE9;font-weight:800;font-size:13px;position:relative}
.ava .ch{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;
  background:var(--panel);display:flex;align-items:center;justify-content:center}
.ava .ch svg{width:10px;height:10px}
.citem .t{flex:1;min-width:0}
.citem .r1{display:flex;align-items:baseline;gap:6px}
.citem .nm{font-weight:750;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.citem .tm{font-size:10.5px;color:var(--faint);flex:none}
.citem .r2{display:flex;align-items:center;gap:6px;margin-top:2px}
.citem .sn{font-size:12px;color:#8B7F72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.citem .ub{background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:999px;
  min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;flex:none;
  animation:pp 1.6s infinite}
.chatpane{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.chathead{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.chathead .nm{font-weight:800;font-size:15px}
.botsw{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:20px;
  font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--line);
  background:#fff;color:var(--muted);white-space:nowrap;transition:.15s}
.botsw:hover{border-color:#C9BEB2}
.botsw .dt{width:8px;height:8px;border-radius:50%;background:#C9BEB2}
.botsw.on{background:#EDF3EE;border-color:#BFD6C4;color:#3F6B4A}
.botsw.on .dt{background:#6A9E71}
.botsw.off{background:#F8E9E4;border-color:#EFC0B2;color:#A8442A}
.botsw.off .dt{background:#DE4A2C}
.chathead .ph{font-size:12px;color:var(--muted)}
.msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(180deg,#F9F5F0, #F5EFE8)}
.msg{max-width:74%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1px rgba(43,36,30,.05)}
.msg.in{background:#FFFFFF;border:1px solid #ECE4DA;align-self:flex-start;border-bottom-left-radius:5px}
.msg.out{background:var(--brand);color:#F6F1EC;align-self:flex-end;border-bottom-right-radius:5px}
.msg .t{font-size:10px;opacity:.55;margin-top:4px;text-align:right}
/* Галочки как в WhatsApp (Тарик 11.09): ✓ отправлено · ✓✓ доставлено · голубые ✓✓ прочитано.
   Приглушено только время: голубые галочки на тёмном пузыре иначе не видны. */
.msg .t.tt{opacity:1}
.msg .t.tt .tm{opacity:.55}
.msg .t .tk{display:inline-block;margin-left:5px;padding-right:3px;font-size:11px;font-weight:700;
  letter-spacing:-3px;opacity:.6}
.msg .t .tk.rd{opacity:1;color:#7DD3FC}
.ltk{color:var(--faint);font-weight:700;letter-spacing:-3px;padding-right:6px}
.ltk.rd{color:#34B7F1}
.composer{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:9px;
  align-items:flex-end}
/* Поле ввода — МНОГОСТРОЧНОЕ и растёт вместе с текстом. Было одной строкой: длинное
   сообщение, вставленное копипастом, уезжало по горизонтали, и чтобы поправить слово
   в середине, приходилось прокручивать строку мышью. Теперь виден весь текст сразу. */
.composer textarea{flex:1;border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  font-size:13.5px;background:var(--soft);outline:none;font-family:inherit;line-height:1.5;
  resize:none;min-height:44px;max-height:46vh;overflow-y:auto;display:block}
.composer textarea:focus{border-color:#B9A88F;background:#fff}
.composer .send{flex:none;align-self:flex-end}
.composer .hint{position:absolute;right:22px;bottom:2px;font-size:9.5px;color:var(--faint);
  pointer-events:none}
.composer .lock{font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center;padding:4px}
.empty{margin:auto;color:var(--faint);font-size:13.5px;text-align:center;padding:40px;line-height:1.7}

/* ── таблица клиентов ────────────────────────────────── */
.tablewrap{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow:auto;max-height:100%}
table{width:100%;border-collapse:collapse;font-size:13px}
th{position:sticky;top:0;background:var(--panel);text-align:left;font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:800;
  padding:13px 14px;border-bottom:1px solid var(--line);z-index:1}
td{padding:11px 14px;border-bottom:1px solid #F0EAE2;white-space:nowrap}
tr{cursor:pointer;transition:.1s}
tbody tr:hover{background:var(--soft)}
td .nm{font-weight:700;display:flex;align-items:center;gap:9px}
td .mini{font-size:11px;color:var(--muted)}

/* ── карточка-шторка ─────────────────────────────────── */
/* ★★★ ЗАТЕМНЕНИЕ УБРАНО СОВСЕМ (Андрей и Тарик, 30.09: «убрать функцию затемнения
   экрана»). Оно включалось из девяти разных мест — карточка сделки, ящик волны,
   статистика, шаги экскурсии — и любое из них могло не закрыться: тогда полупрозрачный
   слой оставался поверх всего интерфейса и перехватывал КАЖДЫЙ клик. Человек видел
   приглушённый экран, на котором не работает ни одна кнопка, и помогала только
   перезагрузка — да и та не всегда. За два дня это заблокировало работу и Тарику,
   и Андрею.
   Украшение, которое способно остановить работу, украшением быть перестаёт. Элемент
   оставлен в разметке, чтобы девять мест продолжали спокойно вешать на него свой класс,
   но он теперь ВСЕГДА прозрачный и ВСЕГДА пропускает клики: зависнуть нечему.
   Карточка закрывается крестиком и клавишей Escape — см. ниже. */
/* ⛔ Андрей 03.10 (#3911), второе на том же снимке: заголовок карточки визита
   уходил ПОД коричневую полосу. Замер: полоса z-index 45, шторка 41 — на телефоне
   полоса закрывала верхние 50 пикселей открытой карточки, а с ними и строку
   «2026-10-05 11:50 · 120 мин · визит №2».
   Своего z-index у полосы на настольном экране нет, поэтому беда была только на
   телефоне. Поднимаем шторку НАД полосой, оставаясь ниже всплывающих окон (60)
   и меню «Системы» (120): карточка — слой поверх страницы, а не её часть. */
.backdrop,.backdrop.show{position:fixed;inset:0;background:none;opacity:0;
  pointer-events:none;z-index:46}
/* Карточка занимает ПОЛОВИНУ экрана: в 470 px переписка и поля читались в щёлочку.
   Минимум 470 px — чтобы на узком ноутбуке не сжалась до неудобного. */
.drawer{position:fixed;top:0;right:0;width:50vw;min-width:470px;max-width:96vw;height:100%;
  background:var(--panel);z-index:47;display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .22s, width .22s;
  box-shadow:-18px 0 50px -20px rgba(43,36,30,.4)}
/* ★ ШИРОКИЙ ВИД (Тарик 27.09: «хочу, чтобы по кнопке карточка могла стать больше и
   занять почти весь экран… но важно — сохраняй логику уже существующих движений»).
   Поэтому не новое окно и не всплывашка: та же выдвижная панель, просто шире.
   Появление и уход остались прежними (translateX), ширина едет той же плавностью.
   ЛЕВОЕ МЕНЮ НЕ ЗАКРЫВАЕМ — упираемся ровно в его край, свёрнут он или развёрнут. */
.drawer.wide{width:calc(100vw - 262px)}
@media(min-width:769px){body.navmin .drawer.wide{width:calc(100vw - 76px)}}
@media(max-width:768px){.drawer.wide{width:100vw}}
/* ★ ЧАТ НЕ РАСТЯГИВАЕТСЯ ВМЕСТЕ С КАРТОЧКОЙ (Тарик 27.09: «область карточки,
   конечно, расширяй, а вот область чата/лога заморозь — пусть остаётся на месте,
   как и при виде на полэкрана»). Ширина взята оттуда же, где он её видит: панель
   на полэкрана это 50vw, из них чату достаётся 1.6 из 2.8 долей — те самые ~28.6vw.
   Растёт только левая часть, чат остаётся ровно таким, каким был. */
/* Ширина чата на полэкрана — не «доля от 50vw»: у левой колонки свой минимум 300px,
   и на узком экране он долю ломает. Считаем ТЕМ ЖЕ выражением, что и половинный вид:
   панель 50vw минус левая колонка, где левая = max(300px, 1.2 из 2.8 долей).
   Проверено измерением: на 1200px оба вида дают чату одинаковые 282px. */
:root{--chatw:max(280px, calc(50vw - max(300px, 21.43vw)))}
.drawer.wide .dbody{grid-template-columns:minmax(420px,1fr) var(--chatw)}
.drawer.wide .dleft .fields{grid-template-columns:1fr 1fr;column-gap:22px}
.drawer.wide .dbody.solo.tab-talk .dleft .fields{grid-template-columns:1fr 1fr 1fr}
.drawer.show{transform:translateX(0)}
/* ── Карточка контакта: три колонки (Тарик 27.09) ──────────────────────────
   «Делим на три вертикальные области. Слева начинка карточки, разложенная по
   строкам. Среднее и правое объединяем под диалог».
   Вкладки, которые я предложил до этого, он забраковал: лишнее действие. */
.dbody{flex:1;display:grid;grid-template-columns:minmax(300px,1.2fr) 1.6fr;min-height:0}
/* scrollbar-gutter: полоса прокрутки получает СВОЮ дорожку и не висит поверх полей.
   На маке полосы накладные — они появляются над содержимым, и правый край полей
   уходил под ползунок. Тарик 27.09: «даже если пустые, они подлазят под ползунок
   разделителя». Дорожка держится всегда, поэтому ширина полей не скачет, когда
   прокрутка то появляется, то исчезает. */
.dleft{min-height:0;min-width:0;overflow-y:auto;scrollbar-gutter:stable}
/* ★ Чат в рамке (Тарик 27.09: «сделай вокруг чата окантовки и элементы, чтобы эта
   область чуть больше напоминала мобильный телефон»). Намёк, а не макет айфона:
   скруглённый корпус, тонкая рамка, динамик сверху. Всё из тех же переменных темы —
   ни одного своего цвета, иначе получится игрушка посреди рабочего экрана. */
.dright{min-height:0;min-width:0;display:flex;flex-direction:column;
  margin:12px 14px 14px 2px;border:1px solid var(--line);border-radius:26px;
  background:var(--panel);overflow:hidden;position:relative;
  box-shadow:0 1px 3px rgba(43,36,30,.06), inset 0 0 0 3px var(--bg, transparent)}
.dright::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:46px;height:4px;border-radius:999px;background:var(--line);z-index:2}
/* ★ КОРПУС И ЭКРАН (Андрей 28.09: «центральный прямоугольник криво соприкасается
   сверху и снизу»). Я обвёл колонку скруглённой рамкой, а внутри осталась заливка
   сообщений с ПРЯМЫМИ углами — она упиралась в скругление и срезалась. Сводка сверху
   и поле ввода снизу тоже стояли впритык к краю, по одному пикселю.
   Теперь как у телефона: корпус с полями, внутри — экран со своим скруглением,
   над ним и под ним всё отступает от края. */
.dright{padding:20px 12px 12px}
.dright .prehist{margin:0 0 8px}
.dright .msgs{border-radius:18px;padding:14px;flex:1;min-height:0}
.dright .clog{border-radius:18px;padding:14px;background:var(--soft);flex:1;min-height:0}
.dright .composer{padding:10px 0 0;border-top:0}
.dright .composer textarea{min-height:40px}
@media(max-width:1100px){.dright{margin:0;border:0;border-radius:0}
  .dright::before{display:none}}
.dleft .fields{grid-template-columns:1fr;max-height:none;border-bottom:0;overflow:visible;
  gap:7px;padding:12px 16px 14px}
/* ★ Поле — это СТРОКА: подпись слева, само поле справа. Сначала я оставил подпись над
   полем, как в двухколоночной раскладке, — в узкой колонке получилась лента на полтора
   экрана, и Тарик 27.09: «поля для заполнения не поместились, ширина странная даже если
   пустые». Подпись сбоку вдвое снижает высоту, и ширина у всех полей становится одна. */
.dleft .f{flex-direction:row;align-items:center;gap:10px;min-height:32px;min-width:0}
.dleft .f label{flex:none;width:96px;line-height:1.3;letter-spacing:.04em;font-size:9.5px}
.dleft .f input,.dleft .f select{flex:1;min-width:0}
/* Составные блоки — переписка, стоп-лист, кнопки — строкой не ложатся: им вся ширина. */
.dleft .f.blk{flex-direction:column;align-items:stretch;gap:4px}
.dleft .f.blk label{width:auto}
@media(max-width:1100px){.dbody{grid-template-columns:1fr}
  .dleft{max-height:34vh}}
/* ★ Чат убирается вправо, карточка разворачивается во всю ширину (Тарик 27.09:
   «дай возможность скрыть чат очевидной кнопкой и вернуть обратно… по умолчанию
   и карточка, и чат открыты»). Место освобождается — и поля встают в два столбца,
   а не растягиваются на всю ширину без нужды. Состояние НЕ запоминается: каждая
   карточка открывается с чатом, как он и просил. */
/* «Скрыть чат» убирает ИМЕННО ЧАТ. Если открыт лог карточки — панель остаётся и
   отдаёт логу своё место: Тарик 27.09 «карточка развёрнута на полную, а чат свёрнут —
   тогда максимум места карточке, а логу карточки тоже пространство, примерно треть
   экрана». Раньше пряталась вся правая колонка, и лог исчезал вместе с чатом. */
.dbody.solo.tab-talk{grid-template-columns:1fr}
.dbody.solo.tab-talk .dright{display:none}
.dbody.solo.tab-talk .dleft .fields{grid-template-columns:1fr 1fr;column-gap:22px}
.dbody.solo.tab-talk .dleft .f.wide{grid-column:1/-1}
.dbody.solo.tab-log{grid-template-columns:minmax(0,1fr) var(--chatw)}
.drawer.wide .dbody.solo.tab-log{grid-template-columns:minmax(0,1fr) var(--chatw)}
.drawer.wide .dbody.solo.tab-log .dleft .fields{grid-template-columns:1fr 1fr;column-gap:22px}
/* Вкладки правой колонки: переписка и лог карточки. Тарик 27.09 просил именно
   вкладку — и здесь она уместна: поля слева остаются на виду, переключается только
   правая часть. (Вкладки, прячущие ПОЛЯ, он забраковал раньше, и правильно.) */
/* ★ ВКЛАДКИ ЖИВУТ В ШАПКЕ КАРТОЧКИ, А НЕ В ОБЛАСТИ ЧАТА (Тарик 27.09: «зачем
   расположил кнопку в области диалога? Если я скрываю чат и работаю с карточкой,
   то как раз кнопки лога я больше и не вижу»). Я эту дыру видел сам и отмахнулся.
   В шапке они переживают скрытие панели: нажал «Лог карточки» — панель вернулась
   уже на логе. */
.rtabs{display:flex;gap:2px;flex:none;background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:2px}
.rtabs .rt{padding:5px 13px;font-size:11.5px;font-weight:700;color:#6E6156;cursor:pointer;
  border-radius:999px;white-space:nowrap;transition:.15s}
.rtabs .rt:hover{color:var(--ink)}
.rtabs .rt.on{color:var(--ink);background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.clog{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;scrollbar-gutter:stable}
.clog .ev{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.clog .ev:last-child{border-bottom:0}
.clog .when{font-size:11.5px;color:var(--faint);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.clog .what{font-size:12.5px;color:var(--ink);line-height:1.4}
.clog .what b{font-weight:700}
.clog .val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--soft);border-radius:5px;padding:1px 5px}
.clog .val.was{color:var(--muted);text-decoration:line-through}
.clog .who{grid-column:2;font-size:11px;color:var(--faint)}
.clog .empty{color:var(--faint);font-size:12.5px;padding:18px 0;text-align:center}
.dh .wid{flex:none;border:1px solid var(--line);background:var(--panel);border-radius:999px;
  padding:5px 12px;font-size:11.5px;font-weight:700;color:#6E6156;cursor:pointer;
  white-space:nowrap}
.dh .wid:hover{border-color:#B9A88F;background:var(--soft)}
/* Сводка карточки — теми же деталями, что вся система: плашка формы .chip,
   полоса как в разрезе по источникам, цвет только точкой. Первый заход я сделал
   своими квадратиками и красной заливкой — Тарик 27.09: «нестильный кошмар,
   квадратные кнопки со слетевшими шрифтами». Своего тут больше ничего нет. */
.csum{margin:14px 16px 6px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px 13px}
.csum .t{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.csum .t b{margin-left:auto;color:var(--ink);font-weight:800;font-size:13px}
.csum .bar{height:8px;background:var(--soft);border-radius:6px;overflow:hidden;margin:9px 0 11px}
.csum .bar i{display:block;height:100%;background:var(--green);border-radius:6px}
.csum .need{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.csum .nr{font-size:12.5px;color:var(--ink);line-height:1.35}
.csum .nr b{font-weight:700}
.csum .nr::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--coral);margin:0 7px 2px 1px}
.csum .miss{display:flex;flex-wrap:wrap;gap:6px}
.csum .miss .chip{cursor:default}
.csum .cap{font-size:11px;color:var(--faint);margin-top:7px}
/* ★ Облако сегментов (Андрей 28.09: «в карточку клиента добавляешь облако
   кликабельных наименований сегментов, к которым отнесён клиент»). Это ответ на
   вопрос «где человек сейчас» — тот самый, что в «Дозорном» стоит вторым после
   «кто он». Плашки те же, что везде; клик уводит в сам сегмент. */
.segcloud{display:flex;flex-wrap:wrap;gap:6px;margin:0 16px 8px}
/* Тот же случай, что с .askwrap: свой display отменяет атрибут hidden. */
.segcloud[hidden]{display:none}
.segcloud .chip{cursor:pointer}
.segcloud .chip:hover{border-color:#B9A88F;background:var(--soft)}
.segcloud .ttl{flex-basis:100%;font-size:11px;color:var(--faint);margin-bottom:1px}
.frozen{border:1px solid #EFC0B2;background:#FBF1EC;border-radius:12px;
  padding:10px 14px;margin:0 0 12px;font-size:12.5px;color:#8A5B48}
.frozen b{color:#A8442A}
.frozen.hard{border-color:#E39A82;background:#F9E7E0}
.frozen .fz2{margin-top:4px;font-size:11.5px;opacity:.9;line-height:1.45}
.dupc{border:1px solid var(--line);border-radius:14px;background:var(--panel);
  margin-bottom:12px;overflow:hidden}
.dupc .dh2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;
  background:var(--soft);font-size:12.5px;border-bottom:1px solid var(--line)}
.dupt{width:100%;border-collapse:collapse;font-size:13px}
.dupt td,.dupt th{padding:6px 14px;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top}
.dupt th{font-size:12px;color:var(--muted);font-weight:700}
.dupt th a{cursor:pointer;color:var(--ink);border-bottom:1px dotted var(--faint)}
.dupt .k{color:var(--muted);font-size:11.5px;width:140px}
.dupt tr.same td{background:#F2F6F1}
.dupt .no{color:var(--faint)}
.dupb{display:flex;gap:9px;justify-content:flex-end;padding:11px 14px}
.csum .ok{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#3F6B47;
  font-weight:600}
.csum .ok i{width:7px;height:7px;border-radius:50%;flex:none}
/* Два ряда: сверху кто это и чем управлять, снизу факты. Раньше был один ряд
   с переносом — плашки уезжали на третий уровень, а кнопки повисали посередине. */
.dh{padding:14px 18px 12px;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center}
.dhctl{display:flex;align-items:center;gap:8px;flex:none}
.dhfacts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;
  font-size:12px;color:var(--muted);line-height:1.6;margin-top:2px}
.dhfacts b{color:var(--ink);font-weight:700}
.dhfacts i{width:7px;height:7px;border-radius:50%;flex:none;margin-right:5px;
  display:inline-block;vertical-align:middle}
.dhfacts .sep{width:auto;height:auto;border-radius:0;margin:0 6px;color:var(--faint);
  font-style:normal}
.dhfacts .vis{color:var(--ink);font-weight:700}
.dhfacts .vis.zero{color:var(--red)}
.dhfacts .admk{color:var(--ink);font-weight:700;cursor:help}
.dh .t{flex:1;min-width:0}
.dh .nm{font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh .ph{font-size:12px;color:var(--muted);margin-top:1px}
.dh .x{border:0;background:var(--soft);width:30px;height:30px;border-radius:9px;cursor:pointer;
  font-size:15px;color:var(--muted)}
.dh .x:hover{background:#EAE0D5;color:var(--ink)}
.fields{padding:13px 20px;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:1fr 1fr;gap:10px;max-height:34vh;overflow-y:auto}
.f{display:flex;flex-direction:column;gap:4px}
.f.wide{grid-column:1/-1}
.f label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
.f input,.f select{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;
  background:var(--soft);outline:none}
.f input:focus,.f select:focus{border-color:#B9A88F;background:#fff}
.saved{font-size:11.5px;color:var(--green);padding:6px 20px 0;height:18px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);
  background:var(--brand-2);color:var(--panel);border-radius:12px;padding:11px 18px;font-size:12.5px;
  font-weight:700;transition:.25s;z-index:60;box-shadow:var(--shadow)}
.toast.show{transform:translateX(-50%) translateY(0)}
.skeleton{height:100%;display:flex;align-items:center;justify-content:center;color:var(--faint)}
/* ── расписание (зеркало Altegio, этап 1) ── */
.schedNav{display:flex;gap:6px;align-items:center;margin-left:16px}
.schedNav button{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  padding:6px 10px;cursor:pointer;font-size:13px;color:var(--ink)}
.schedNav button:hover{border-color:#B9A88F}
.schedNav input[type=date]{border:1px solid var(--line);border-radius:9px;padding:5px 8px;
  background:var(--panel);font-size:13px;color:var(--ink);outline:none;font-family:inherit}
.schedSync{font-size:12px;color:var(--muted);white-space:nowrap}
.schedLegend{display:flex;gap:13px;row-gap:6px;align-items:center;padding:12px 24px 0;
  font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.schedLegend b{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:5px;
  vertical-align:-2px;border:1px solid rgba(43,36,30,.10)}
.schedWrap{display:flex;gap:8px;overflow:auto;padding:10px 22px 18px;align-items:flex-start}
.schedCol{min-width:172px;flex:1}
.schedCol.schedTime{min-width:48px;max-width:48px;flex:none}
.schedHead{font-size:13px;font-weight:700;padding:4px 4px 6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.schedHead i{display:block;font-style:normal;font-weight:500;font-size:11px;color:var(--muted)}
/* закрытое время — серое; рабочее (смена) — белое; поверх — линейка получасов */
.schedBody{position:relative;background:#E3DCD3;border-radius:12px;overflow:hidden}
.schedBody::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    repeating-linear-gradient(180deg,transparent 0,transparent 71px,rgba(43,36,30,.10) 71px,rgba(43,36,30,.10) 72px),
    repeating-linear-gradient(180deg,transparent 0,transparent 35px,rgba(43,36,30,.05) 35px,rgba(43,36,30,.05) 36px)}
.schedTime .schedBody{background:none;overflow:visible}
.schedTime .schedBody::after{display:none}
.schedHour{position:absolute;right:6px;font-size:10.5px;color:var(--faint);transform:translateY(-6px)}
.schedShiftBg{position:absolute;left:0;right:0;background:#FFFFFF;z-index:1}
.schedRec,.schedEv{position:absolute;left:3px;right:3px;z-index:3;border-radius:8px;padding:3px 6px;
  font-size:11px;line-height:1.3;overflow:hidden;border:1px solid transparent;border-left-width:3px}
.schedRec b,.schedEv b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schedRec span,.schedEv span{color:rgba(43,36,30,.62);display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* пока без раскраски по типу: все блоки одинаковые (решение Тарика 02.09) */
.schedRec,.schedEv{background:#DCE9F2;border-color:#C6D8E5;border-left-color:#7FA8C4}
/* закрытое время: подпись «со скольки до скольки» прямо на сером */
.schedClosed{position:absolute;left:0;right:0;z-index:2;pointer-events:none;
  padding:4px 7px;font-size:10.5px;color:#9A8D7E;font-weight:600}
/* точка прихода: серая ждём · зелёная пришёл · красная не пришёл */
.schedRec .att{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;
  vertical-align:1px;background:#C9BFB2}
.schedRec.came .att{background:var(--green)}
.schedRec.no .att{background:var(--red)}
.schedRec .pf{color:var(--green);font-weight:800;font-style:normal}
/* «Расписание» — отдельное окно: прячем CRM-каркас (решение Тарика 02.09) */
body.schedFull{grid-template-columns:1fr}
body.schedFull aside.nav{display:none}
body.schedFull .content{padding:0}
.schedBack{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  padding:6px 12px;cursor:pointer;font-size:13px;color:var(--ink);margin-right:14px;
  font-family:inherit;white-space:nowrap}
.schedBack:hover{border-color:#B9A88F}
/* мини-календарь слева (как в Altegio) */
.schedLayout{display:flex;gap:0;padding:0;align-items:stretch}
/* левая рейка вплотную к краю: назад, компакт-календарь, разделы, сводка зеркала */
.schedRail{width:188px;min-width:188px;background:var(--panel);border-right:1px solid var(--line);
  padding:10px 10px 12px;position:sticky;top:0;height:calc(100vh - 60px);overflow:auto;
  display:flex;flex-direction:column;gap:10px}
.schedRail .schedBack{margin:0;width:100%;text-align:center}
.schedMenu{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:8px}
.schedMenu a{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;
  font-size:12.5px;color:var(--ink);cursor:pointer;user-select:none}
.schedMenu a:hover{background:var(--soft)}
.schedMenu a.on{background:var(--soft);font-weight:700}
.schedMenu .soon2{margin-left:auto;font-size:9px;letter-spacing:.06em;color:var(--faint);
  border:1px solid var(--line);border-radius:999px;padding:2px 6px;text-transform:uppercase}
.schedFoot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--muted);line-height:1.5}
.schedCal{background:none;border:none;border-radius:0;padding:0;position:static}
.schedCal .mh{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.schedCal .mh b{flex:1;text-align:center;font-size:12.5px}
.schedCal .mh button{border:1px solid var(--line);background:var(--soft);border-radius:8px;
  width:22px;height:22px;cursor:pointer;color:var(--ink);font-size:11px}
.schedCal .wd,.schedCal .dg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.schedCal .wd span{text-align:center;font-size:10px;color:var(--faint);padding:2px 0}
.schedCal .dg button{position:relative;border:none;background:none;border-radius:8px;
  height:24px;font-size:11px;color:var(--ink);cursor:pointer;font-family:inherit}
.schedCal .dg button:hover{background:var(--soft)}
.schedCal .dg button.oth{color:var(--faint)}
.schedCal .dg button.tod{box-shadow:inset 0 0 0 1.5px var(--green)}
.schedCal .dg button.sel{background:var(--brand);color:#fff}
.schedCal .dg button.has::after{content:'';position:absolute;left:50%;bottom:3px;width:4px;
  height:4px;border-radius:50%;background:var(--green);transform:translateX(-50%)}
.schedCal .dg button.sel.has::after{background:#fff}
.schedCal .cf{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);
  font-size:11px;color:var(--muted);line-height:1.5}
.schedGrow{flex:1;min-width:0;padding:0 18px 16px}
.schedGrow .schedWrap{padding:0}
.schedGrow .schedLegend{padding:10px 0 0}
.schedDate{font-size:15px;font-weight:700;margin-left:14px;white-space:nowrap}
.schedCash{margin-left:14px;background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;white-space:nowrap}
/* карточка записи (клик по блоку в сетке) */
.schedRec{cursor:pointer}
.schedModalWrap{position:fixed;inset:0;background:rgba(43,36,30,.45);z-index:120;
  display:flex;align-items:center;justify-content:center;padding:24px}
.schedModal{background:var(--bg);border-radius:18px;width:min(1080px,96vw);
  max-height:92vh;display:grid;grid-template-columns:252px 1fr 276px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.35);position:relative}
.schedModal .cx{position:absolute;top:10px;right:12px;border:none;background:none;
  font-size:20px;color:var(--muted);cursor:pointer;z-index:2}
.smL{background:var(--panel);padding:18px 16px;overflow:auto;border-right:1px solid var(--line)}
.smM{padding:18px 18px;overflow:auto}
.smR{background:var(--panel);padding:18px 16px;overflow:auto;border-left:1px solid var(--line)}
.smMaster{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.smMaster .av{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.smMaster b{font-size:14px;display:block}
.smWhen{font-size:13px;line-height:1.5;color:var(--ink);padding:10px;background:var(--soft);
  border-radius:10px;margin-bottom:14px}
.smLbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
  margin:14px 0 6px;font-weight:700}
.smBox{background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:9px 10px;font-size:12.5px;line-height:1.45;min-height:38px}
.smColor{display:flex;align-items:center;gap:8px;font-size:12.5px;background:var(--soft);
  border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.smColor i{width:14px;height:14px;border-radius:5px;flex:none;border:1px solid rgba(0,0,0,.12)}
.smNote{font-size:10.5px;color:var(--faint);margin-top:14px;line-height:1.5}
.smChips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.smChips span{border:1px solid var(--line);background:var(--panel);border-radius:999px;
  padding:7px 12px;font-size:12px;cursor:pointer;color:var(--muted)}
.smChips span.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.smSvc{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px;margin-bottom:12px}
.smSvc b{font-size:13.5px}
.smSvc .pr{float:right;font-weight:800}
.smSvc .sub{color:var(--muted);font-size:12px;margin-top:3px}
.smPaid{display:inline-block;border-radius:999px;padding:4px 10px;font-size:11.5px;
  font-weight:700;background:#E3EEE2;color:var(--green);margin-bottom:12px}
.smPaid.no{background:#F4E3DC;color:var(--red)}
.smPayRow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 12px}
.smPayRow button{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  padding:7px 11px;cursor:pointer;font-size:12px;color:var(--ink);font-family:inherit}
.smPayRow button:hover{border-color:#B9A88F}
.smPayRow button.abo{border-color:#C0B1DC;background:#EEE8F6;font-weight:700}
.smPayRow button.dep{border-color:#B7CFDF;background:#E7F0F6;font-weight:700}
.smPayRow input{width:76px;border:1px solid var(--line);border-radius:9px;padding:7px 8px;
  font-size:12px;background:var(--panel);outline:none;font-family:inherit;color:var(--ink)}
.smLoyal .dep{font-size:13px;margin-bottom:8px}
.smLoyal .dep b{font-size:16px}
.smAbo{background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;font-size:11.5px;margin-bottom:6px;line-height:1.5}
.smAbo b{font-size:12.5px}
.smAbo .dead{color:var(--red)}
.smAbo .mini{border:1px solid var(--line);background:var(--panel);border-radius:7px;
  padding:2px 8px;cursor:pointer;font-size:11px;margin-left:4px}
.smSearch{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:8px 11px;font-size:12.5px;outline:none;font-family:inherit;color:var(--ink);margin-bottom:8px}
.smList{display:flex;flex-direction:column;gap:6px}
.smList .it{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 11px;font-size:12.5px;display:flex;gap:8px;align-items:baseline}
.smList .it em{font-style:normal;flex:1;min-width:0}
.smList .it u{text-decoration:none;color:var(--muted);font-size:11.5px;white-space:nowrap}
.smList .it b{white-space:nowrap}
.smClient b.nm{font-size:15px;display:block}
.smClient .ph{color:var(--muted);font-size:12.5px;margin:2px 0 10px}
.smWa{display:block;text-align:center;background:#25D366;color:#fff;border-radius:10px;
  padding:9px;font-weight:700;font-size:12.5px;text-decoration:none;margin-bottom:12px}
.smTabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.smTabs span{border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center;
  font-size:11.5px;cursor:pointer;color:var(--ink);background:var(--soft)}
.smTabs span.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.smStat{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px}
.smStat div b{display:block;font-size:15px;margin-top:2px}
.smHist{display:flex;flex-direction:column;gap:6px;font-size:11.5px}
.smHist .h{background:var(--soft);border-radius:9px;padding:7px 9px;line-height:1.4}
/* формы карточки и создания записи */
.smBtn{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:7px 12px;
  cursor:pointer;font-size:12.5px;color:var(--ink);font-family:inherit}
.smBtn:hover{border-color:#B9A88F}
.smBtn.acc{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.smBtn.danger{color:var(--red);border-color:#E4C5B8}
.smField{margin-bottom:8px}
.smField label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.smField input,.smField select,.smField textarea{width:100%;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);padding:7px 9px;font-size:12.5px;outline:none;
  font-family:inherit;color:var(--ink);box-sizing:border-box}
.smField textarea{min-height:56px;resize:vertical}
.schedModal2{background:var(--bg);border-radius:16px;width:min(480px,94vw);max-height:90vh;
  overflow:auto;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.35);position:relative}
.schedModal2 h3{margin:0 0 12px;font-size:15px}
.smSug{border:1px solid var(--line);border-radius:9px;background:var(--panel);margin-top:4px;
  max-height:150px;overflow:auto}
.smSug div{padding:7px 9px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--line)}
.smSug div:last-child{border-bottom:none}
.smSug div:hover{background:var(--soft)}
.smDeal{display:inline-flex;gap:6px;align-items:center;background:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:11.5px;
  font-weight:700;margin-bottom:8px;cursor:pointer}
.smDeal:hover{border-color:#B9A88F}
.smLog{display:flex;flex-direction:column;gap:5px;font-size:10.5px;color:var(--muted)}
.smLog .l{background:var(--soft);border-radius:8px;padding:6px 8px;line-height:1.4}
/* вкладки рейки: услуги, сотрудники, клиентская база */
.schedPage{padding:14px 18px;max-width:980px}
.schedPage h2{font-size:16px;margin:0 0 4px}
.schedPage .sub{font-size:12px;color:var(--muted);margin-bottom:12px}
.schedTbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;font-size:12.5px}
.schedTbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--soft)}
.schedTbl td{padding:9px 12px;border-bottom:1px solid var(--line)}
.schedTbl tr:last-child td{border-bottom:none}
.schedTbl tr:hover td{background:var(--soft)}
.schedTbl .code{font-weight:800;white-space:nowrap}
.schedTbl .off{color:var(--faint)}
.schedTbl .b1{display:inline-block;border-radius:999px;padding:2px 9px;font-size:10.5px;
  font-weight:700;background:#E3EEE2;color:var(--green)}
.schedTbl .b0{display:inline-block;border-radius:999px;padding:2px 9px;font-size:10.5px;
  font-weight:700;background:var(--cream);color:var(--muted)}
.schedPage .smSearch{max-width:340px}
/* наведение на свободную зону: ячейка «+ время» под курсором */
.schedBody{cursor:pointer}
.schedHoverCell{position:absolute;left:3px;right:3px;border:1.5px dashed var(--brand);
  border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--brand);background:rgba(255,255,255,.6);
  pointer-events:none;z-index:3}
/* шаг 1: тип записи */
.schedKind{display:flex;gap:10px;margin-top:6px}
.schedKind button{flex:1;border:1px solid var(--line);background:var(--panel);border-radius:12px;
  padding:18px 10px;cursor:pointer;font-family:inherit;color:var(--ink);font-size:13px;
  font-weight:700;line-height:1.4}
.schedKind button span{display:block;font-weight:500;font-size:11px;color:var(--muted);margin-top:4px}
.schedKind button:hover{border-color:var(--brand);background:var(--soft)}
/* график работы: недельный редактор */
.shTbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;font-size:12px}
.shTbl th{font-size:10.5px;text-transform:uppercase;color:var(--muted);padding:8px 8px;
  border-bottom:1px solid var(--line);background:var(--soft);text-align:center}
.shTbl th:first-child{text-align:left}
.shTbl td{padding:6px 6px;border-bottom:1px solid var(--line);text-align:center;cursor:pointer}
.shTbl td:first-child{text-align:left;font-weight:600;cursor:default;white-space:nowrap}
.shTbl td:hover:not(:first-child){background:var(--soft)}
.shTbl .off{color:var(--faint)}
.shTbl .today{background:#F3EEE6}
/* участники группы */
.evMember{display:flex;align-items:center;gap:8px;background:var(--soft);
  border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:12px;
  margin-bottom:5px;cursor:pointer}
.evMember:hover{border-color:#B9A88F}
.evMember .att{width:7px;height:7px;border-radius:50%;background:#C9BFB2;flex:none}
.evMember .att.came{background:var(--green)}
.evMember .att.no{background:var(--red)}
.evMember .pf{color:var(--green);font-weight:800}
/* недельный вид */
.schedSeg{display:flex;background:#E2D9CF;border-radius:10px;padding:3px;gap:2px;margin-left:10px}
.schedSeg button{border:none;background:none;border-radius:8px;padding:5px 12px;font-size:12.5px;
  cursor:pointer;color:var(--muted);font-family:inherit}
.schedSeg button.on{background:var(--panel);color:var(--ink);font-weight:700}
.schedWMast{margin-left:8px;border:1px solid var(--line);border-radius:9px;padding:6px 8px;
  background:var(--panel);font-size:12.5px;color:var(--ink);font-family:inherit;outline:none}
.schedWDay{cursor:pointer}
.schedWDay:hover{color:var(--brand)}
.schedRecW{position:absolute;left:3px;right:3px;z-index:3;border-radius:7px;padding:2px 5px;
  font-size:10.5px;line-height:1.25;overflow:hidden;background:#DCE9F2;
  border:1px solid #C6D8E5;cursor:pointer}
.schedRecW b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* drag&drop */
.schedRec.dragging{opacity:.75;z-index:50;box-shadow:0 8px 22px rgba(0,0,0,.25);pointer-events:none}
.schedBody.dropTarget{outline:2px dashed var(--coral);outline-offset:-2px}
/* линия текущего времени *//* линия текущего времени *//* линия текущего времени *//* линия текущего времени *//* линия текущего времени *//* линия текущего времени */
.schedNowline{position:absolute;left:0;right:0;border-top:2px solid var(--coral);z-index:4;pointer-events:none}
.schedNowchip{position:absolute;right:1px;transform:translateY(-9px);background:var(--coral);
  color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:6px;z-index:5}
.msgpic{display:inline-block;margin-top:6px}
.msgaud{display:flex;align-items:center;gap:8px;margin-top:6px}
.msgaud audio{height:34px;max-width:260px}
.msgaud .mini{font-size:11px;opacity:.7}
.msgpic img{max-width:230px;max-height:300px;border-radius:12px;display:block;
  border:1px solid rgba(0,0,0,.08);background:#f3f1ec;cursor:zoom-in}
.msg .rt{font-size:10.5px;opacity:.62;margin-bottom:5px;padding-left:7px;
  border-left:2px solid rgba(0,0,0,.18);line-height:1.35}
.msg.out .rt{border-left-color:rgba(255,255,255,.35)}
.msg .shp{font-size:11px;margin-top:6px;padding:7px 9px;border-radius:9px;
  background:rgba(0,0,0,.05);line-height:1.45}
.msg.out .shp{background:rgba(255,255,255,.12)}
.msg .shp a{color:inherit;text-decoration:underline}
.msg .shp .cap{opacity:.72;margin-top:3px;font-size:10.5px}
.own{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:999px;
  background:#C0392B;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.card .own{margin-left:5px}
.citem .own{margin-left:6px;font-size:9px;padding:1px 6px}

.wvwrap{max-width:900px}
.wv{margin-bottom:12px;cursor:pointer;transition:box-shadow .15s}
.wv:hover{box-shadow:0 2px 14px rgba(0,0,0,.09)}
.wvh{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.wvst{font-size:11px;color:#fff;border-radius:20px;padding:2px 9px}
.wvn{display:flex;gap:16px;font-size:12px;color:#6b6459;margin:8px 0 6px}
.wvtx{font-size:12.5px;color:#4a453d;background:#faf8f4;border-radius:8px;padding:9px 11px;
  white-space:pre-wrap;line-height:1.5}
.btn.go{background:#2e7d32;color:#fff;border-color:#2e7d32}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-weight:500;color:#8b8377;font-size:11px;padding:6px 8px;
  border-bottom:1px solid #ece7de}
.tbl td{padding:8px;border-bottom:1px solid #f3efe8;vertical-align:top}

.crumbs{font-size:12.5px;color:#8b8377;margin-bottom:14px}
.crumbs a{color:#6b6459;cursor:pointer;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 7px;opacity:.5}
.wvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.wvcard{cursor:pointer;transition:box-shadow .15s,transform .1s}
.wvcard:hover{box-shadow:0 3px 16px rgba(0,0,0,.1)}
.wvcard.off{cursor:default;opacity:.55}
.wvcard.off:hover{box-shadow:none}
.wvbig{font-size:30px;font-weight:300;line-height:1;margin-bottom:6px}
.wvttl{font-size:14px;font-weight:500;margin-bottom:5px}
.wvsoon{margin-top:9px;font-size:11px;color:#b26a00}
.wvsec{font-size:12px;color:#8b8377;font-weight:500;margin:22px 0 10px}
.btn.sm{padding:4px 11px;font-size:12px}
.lnk{background:none;border:none;color:#6b6459;text-decoration:underline;cursor:pointer;
  font-size:12px;padding:0 0 0 8px}
.tbl tr.dim{opacity:.45}

.wvchat{max-height:230px;overflow-y:auto;background:#faf8f4;border-radius:10px;padding:12px;
  margin-bottom:8px;font-size:12.5px;line-height:1.55}
.wvmsg{margin-bottom:10px}
.wvmsg.own .wvmb{background:#efe9dd}
.wvmt{font-size:10.5px;color:#a09889;margin-bottom:3px}
.wvmb{white-space:pre-wrap;background:#fff;border-radius:8px;padding:8px 10px}
.wvsend{display:flex;gap:8px;align-items:flex-start;margin-bottom:14px}
.wvsend textarea{flex:1;resize:vertical;font:inherit;padding:8px 10px;border-radius:8px;
  border:1px solid #e3ddd2}

.wvdet{margin:0 0 12px}
.wvdet summary{cursor:pointer;font-size:12px;color:#8b8377;padding:4px 0}
.wvdet textarea{width:100%;margin-top:8px;resize:vertical;font:inherit;padding:8px 10px;
  border-radius:8px;border:1px solid #e3ddd2}
.wvchat{max-height:340px}
.wvopen{font-size:12px;color:#8b6f3f;margin-top:8px}

/* Ящик — колонка на всю высоту; телу волны нужно право сжиматься и прокручиваться,
   иначе список людей обрезается на четвёртом человеке и дальше не пролистать. */
.wvbody{padding:0 18px 18px;flex:1 1 auto;min-height:0;overflow-y:auto}
.wvchat{max-height:none}

/* Пресеты — это КНОПКА, а не приписка мелким серым: Андрей просил спрятать их за
   кнопкой, и она должна выглядеть нажимаемой. Раскрывашка та же, вид другой. */
/* ══ ФОРМЫ РАЗДЕЛА: ФИРМЕННЫЙ ВИД ═══════════════════════════════════════════
   ⛔ 30.09, Андрей: «поправь дизайн карточек. Он уплыл относительно нашей стильной
   системы. Стало некрасиво. Например, текстовые области убогие». Правда: поля я
   вставлял без стиля, и они рисовались браузерными по умолчанию — серые рамки,
   другой шрифт, другая высота. Приводим к тому же виду, что и вся система. */
.wvcard .f{margin:0 0 10px}
.wvcard .f label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.wvcard input[type=text],.wvcard input[type=number],.wvcard input:not([type]),
.wvcard select,.wvcard textarea,
#drawer .f input,#drawer .f select,#drawer .f textarea,
.esfilters input,.esfilters select{
  width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none;
  transition:border-color .15s, box-shadow .15s}
.wvcard textarea,#drawer .f textarea{resize:vertical;min-height:64px;line-height:1.5}
.wvcard input:focus,.wvcard select:focus,.wvcard textarea:focus,
#drawer .f input:focus,#drawer .f select:focus,#drawer .f textarea:focus,
.esfilters input:focus,.esfilters select:focus{
  border-color:#2E5339;box-shadow:0 0 0 3px rgba(46,83,57,.10)}
.wvcard input[type=checkbox],#drawer input[type=checkbox]{width:auto}
.esfilters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.esfilters input,.esfilters select{flex:1 1 150px;min-width:120px;width:auto}
.chip.on{background:#2E5339;color:#fff}
/* Списочный вид мастеров и услуг: строки кликабельны, как везде в системе. */
.eslist tbody tr{cursor:pointer}
.eslist tbody tr:hover{background:#faf8f4}

/* ══ ВИД «ПО ДНЮ»: ПОТОК ══════════════════════════════════════════════════════
   Строка на визит, слева время, справа состояние. Ничего не налезает: у каждой
   части своя колонка, длинное имя переносится внутри своей. */

/* ══ ВИД «ПО РЕСУРСАМ»: МАТРИЦА ═══════════════════════════════════════════════
   Время сверху, ресурсы строками. Клетка фиксированной ширины — сетка не «едет»
   от длины имён: имя живёт в своей колонке слева и обрезается там же. */
/* ⛔ 30.09, Андрей: «у тех мастеров, что не поместились на один экран по горизонтали,
   ты не дорисовал полосы делители слотов. Давай сетку полную, даже если она за
   пределами видимости». Причина была в flex: строка ужималась по ширине окна, и
   колонки за краем теряли фон и рамки. min-content заставляет строку быть шириной
   ВСЕГО содержимого, а не окна. */
/* ══ СЕТКА ДНЯ — ПЕРЕНОС ИЗ CLAUDE DESIGN, schedule/01-grid.html ═════════════
   ⛔ 04.10, Тарик: «можешь просто сделать copy paste того, что сделал grid 01,
   а не твои додумки? grid 01 — это идеал того, что нам нужно».
   Он прав, и прошлый заход был именно додумкой: я переименовал классы и добавил
   горизонтальную прокрутку (width:max-content). Из-за неё шапка и тело считали
   ширину колонки по своему содержимому — и ось времени печаталась дважды.
   Здесь правила стоят ДОСЛОВНО из макета, с теми же именами. Отступления ровно
   два, оба вынужденные, и оба помечены ⚠️ ниже:
     1. правила левой панели заужены под .nav-jour — иначе .nav и .user задели бы
        главное меню CRM, у которого те же имена;
     2. разлиновка при шаге 15 и 60 минут — у макета один чередующийся градиент,
        он верен только для получаса. */
.esmwrap{background:var(--panel);display:flex;flex-direction:column}
.esrow{display:grid;grid-template-columns:var(--axis) repeat(var(--cols),var(--colw))}
/* Д19: правой оси времени нет нигде — ни «по мастерам», ни «по ресурсам».
   Разметка оси остаётся (как в макете 01-grid.html), скрывает её это правило. */
.esaxis.r,.eshead .esgap.r{display:none!important}
.esmwrap{--colw:minmax(0,1fr)}
.esmwrap.esширокая{--colw:136px;overflow-x:auto}
.esmwrap.esширокая .esrow{width:max-content;min-width:100%}
/* ⛔ Тарик 22.10: «колонки мастеров в шапке — побольше, чтобы лучше было видно аватарку и
   имя». Было: аватар 24 px сбоку, «Anastasia Sh…». Стало: аватар над именем, имя
   на всю ширину колонки, до двух строк. 22.10 (вечер, Тарик: «фотки слишком крупные —
   чуть поменьше»): аватар 36 px, на телефоне 34. День по-прежнему в один экран (esПодогнатьСетку). */
.eshead{border-bottom:1px solid var(--line);padding:10px 0 9px}
.escol{padding:0 6px;min-width:0}
.escolnm{font-size:14px;line-height:1.25;font-weight:700;white-space:normal;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.escolrole{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esbodywrap{padding:9px 0}
.esbody{position:relative;height:calc(var(--row)*var(--n))}
.eslines{position:absolute;top:0;bottom:0;left:var(--axis);right:var(--axis);
 background:repeating-linear-gradient(to bottom,var(--h0) 0 1px,transparent 1px var(--row),var(--h1) var(--row) calc(var(--row) + 1px),transparent calc(var(--row) + 1px) calc(var(--row)*2));border-bottom:1px solid var(--hour)}
.esaxis{position:relative}
.esaxis .t{position:absolute;left:0;right:0;top:calc(var(--row)*var(--s));transform:translateY(-50%);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.esaxis.l .t{text-align:right;padding-right:9px}
.esaxis.r .t{text-align:left;padding-left:9px}
.t.h{font-size:14.5px;font-weight:600;color:var(--ink)}
.t.h sup{font-size:9.5px;font-weight:500;color:var(--muted);vertical-align:top;position:relative;top:1px;margin-left:1px}
.t.m{font-size:9.5px;font-weight:500;color:var(--faint)}
.esdcol{position:relative;padding:0 3px}
.esdcell{position:absolute;left:3px;right:3px;top:calc(var(--row)*var(--s) + 1px);height:calc(var(--row)*var(--d) - 1px);overflow:hidden}
.esdcell.busy{border-radius:8px;padding:2px 6px;color:var(--ink);cursor:pointer}
.esdcell.busy .tm{font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.esdcell.busy .cl{font-size:12px;font-weight:700;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}
.esdcell.busy .cl b{overflow:hidden;text-overflow:ellipsis;font-weight:700}
.esdcell.busy .sv{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esdcell.busy .ic{flex:none;width:14px;height:14px;border-radius:999px;background:var(--panel);display:grid;place-items:center;font-size:8px;line-height:1}
.esdcell.rhythm{background:var(--st-rhythm)}
.esdcell.signal{background:var(--st-signal)}
.esdcell.new{background:var(--st-new);color:var(--panel)}
.esdcell.back{background:var(--st-back);color:var(--panel)}
.esdcell.group{background:#58AC50;color:var(--panel)}   /* Тарик 17.10: групповые — зелёные; 20.10 — зелёный Altegio */
.esdcell.busy{container-type:size}
.esdcell.busy .in{display:flex;flex-direction:column;gap:1px;height:100%;min-width:0}
.esdcell.busy .in>*{flex:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:14px}
@container (max-height:43.9px){.esdcell.busy .in{gap:0}.esdcell.busy .tm{font-size:9.5px;line-height:9.5px}.esdcell.busy .tm .du{display:none}.esdcell.busy .cl{font-size:10.5px;line-height:10px}.esdcell.busy .ic{width:10px;height:10px;font-size:6px}.esdcell.busy .sv{font-size:9.5px;line-height:9.5px}}
@container (max-height:28.9px){.esdcell.busy .in{flex-direction:row;gap:4px;align-items:center}.esdcell.busy .tm{flex:none}.esdcell.busy .cl{flex:0 1 auto}.esdcell.busy .sv{flex:1 1 0;min-width:20px}}
@container (max-height:57.9px){.esdcell.busy .by{display:none}}
@container (max-height:13.9px){.esdcell.busy .in>*{line-height:11px}}
.esdcell.blocked{left:3px;right:3px;border-radius:8px;background:var(--blocked);padding:3px 9px;display:flex;flex-direction:column;gap:1px;container-type:size}
.esdcell.blocked>*{flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:13px}
@container (max-height:26.9px){.esdcell.blocked .tm{display:none}}
@container (max-height:12.9px){.esdcell.blocked .nm{line-height:10px;font-size:10.5px}}
.esdcell.blocked .tm{font-size:10.5px;font-weight:600;color:var(--brand);font-variant-numeric:tabular-nums}
/* ⛔ 23.10: установка, которую держит блок («Pravilo #3»), — строкой под названием */
.esdcell.blocked .rs{font-size:10.5px;font-weight:700;color:var(--brand)}
@container (max-height:38.9px){.esdcell.blocked .rs{display:none}}
#esblkm .bk-res button.busy,#esblkm .bk-res button:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.esdcell.blocked .nm{font-size:11.5px;font-weight:600;color:var(--ink)}
.escol{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;text-align:center}
.escol .av{flex:none;width:36px;height:36px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;place-items:center;font-size:13.5px;font-weight:800}
.escol .tx{min-width:0;max-width:100%}
.eslines{z-index:1;pointer-events:none}
.esdcell{z-index:2}
.esoff{position:absolute;left:0;right:0;top:calc(var(--row)*var(--s));height:calc(var(--row)*var(--d));background:var(--soft);z-index:0;padding:3px 9px}
.esoff{pointer-events:none}
.esoff span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;line-height:12px;position:relative;z-index:2}
.esnow{position:absolute;left:var(--axis);right:var(--axis);top:calc(var(--row)*var(--s));border-top:1.5px solid var(--coral);z-index:3;pointer-events:none}
.esnow::before{content:"";position:absolute;left:-4px;top:-4.75px;width:8px;height:8px;border-radius:999px;background:var(--coral)}
.esaxis .t.now{z-index:4;text-align:right;padding-right:5px}
.esaxis .t.now b{display:inline-block;background:var(--coral);color:var(--ink);font-size:10.5px;font-weight:800;padding:2px 5px;border-radius:999px}
.esmwrap{flex:1;min-height:0;--row:clamp(17px,calc((100vh - 56px - 48px - 18px) / 28),34px)}
/* ⚠️ ОТСТУПЛЕНИЕ 2. Чередующийся градиент макета верен только при шаге 30 минут:
   в нём час и получас жёстко чередуются. У нас шаг переключается на 15 и 60, и
   тогда он соврал бы. При ином шаге кладём два градиента: часовые линии с
   периодом «слотов в часе» и слотовые с периодом в слот. При 30 минутах правило
   макета остаётся нетронутым. */
.esbody.esшагиной .eslines{background:
  repeating-linear-gradient(to bottom,var(--hour) 0 1px,transparent 1px calc(var(--row)*var(--ph))),
  repeating-linear-gradient(to bottom,var(--half) 0 1px,transparent 1px var(--row))}
/* ── ЧЕГО В МАКЕТЕ НЕТ, А У НАС БЫВАЕТ ──────────────────────────────────────
   Три добавки, каждая от живых данных, а не от вкуса:
   · запись без состояния клиента — в образце макета у всех есть метка, у нас нет;
     без заливки такая запись была бы невидимой;
   · связка дня — визиты одной карточки подсвечиваются вместе при наведении
     (Андрей 30.09);
   · наложение: у нас в один час бывает четыре человека, ширину делим дорожками. */
.esdcell.nocolor{background:var(--cream)}
/* ⛔ ТЗ «Статус визита» §1 (20.10): статус — только обводкой, поверх цвета записи.
   Стоит ДО связки и «новой записи»: подсветка при наведении и свежесозданная
   запись временно перекрывают обводку, а не наоборот. */
.esdcell.busy.okv{box-shadow:inset 0 0 0 2px var(--green)}
.esdcell.busy.due{box-shadow:inset 0 0 0 2px var(--red)}
.esdcell.busy.svyazon{box-shadow:inset 0 0 0 2px var(--ink)}
/* ⛔ ТЗ ч.C: вернувшись в сетку, человек должен сразу увидеть, что он создал. */
.esdcell.busy.esnew{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--coral);z-index:5}
.esdcol{cursor:pointer}
.escolnm>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.escolrole{font-size:11.5px;line-height:1.3;font-weight:400;color:#9a9388;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* ⛔ Высота КЛЕТКИ, а не минимум. С min-height запись на 60 минут растягивала свою
   строку под три строки текста, и день переставал влезать в экран — ровно то, из-за
   чего приходилось скролить. Теперь строка держит высоту, а текст записи живёт в
   отдельном слое поверх сетки и занимает столько строк, сколько длится визит.
   Так же это устроено в Altegio: карточка покрывает свой промежуток. */
/* Промежуток — ПЕРВОЙ строкой карточки, как в Altegio: «08:00–09:00», а под ним
   что это. Раньше у блока времени не было вовсе, а у визита оно пряталось во
   вторую строку под именем (Тарик 03.10: «у них написано „с 8 до 9“»). */
/* Значок «закрыть время» появляется только при наведении: он нужен редко, а место
   в клетке дорого. */
/* ★★★ ЯВНЫЙ display ОТМЕНЯЕТ АТРИБУТ hidden (30.09, двое суток заблокированной работы).
   Окно подтверждения лежит в разметке как <div class="askwrap" id="askwrap" hidden> и
   показывается строкой w.hidden=false. Но `hidden` — это всего лишь `display:none` из
   таблицы стилей браузера, и ЛЮБОЕ своё значение display его перебивает. С display:flex
   окно висело на экране ВСЕГДА: пустое, глазу невидимое, но с затемнением 34% и
   pointer-events:auto — то есть оно приглушало весь интерфейс и перехватывало каждый
   клик. Тарик: «экран затемнён, кнопки вообще не активны, кроме „Что нового“» — та
   кнопка тоже на слое 70 и стоит в разметке позже, поэтому одна и оставалась живой.
   Перезагрузка не помогала: элемент появляется вместе со страницей.
   Правило ниже возвращает `hidden` его смысл. Оно нужно КАЖДОМУ элементу, который
   прячут атрибутом и при этом задают ему display — таких в интерфейсе больше нет,
   регрессия это стережёт. */
/* ⛔⛔ Тарик 11.10: «нажимаю „В архив“ — он продолжает держать открытую карточку;
   мне сначала нужно закрыть её, а потом нажать „Убрать в архив“». Окно вопроса
   стояло на том же слое (70), что и подложка карточки, и проигрывало ей по
   порядку в разметке — вопрос физически оказывался ПОД карточкой. Вопрос всегда
   поверх того, кто его задал: выше карточек (70), окон раздела (131) и помехи (140). */
.askwrap{position:fixed;inset:0;z-index:160;display:flex;align-items:center;
  justify-content:center;background:rgba(43,36,30,.34)}
.askwrap[hidden]{display:none}
.askcard{max-width:440px;width:calc(100% - 40px);padding:16px 18px}
/* ⛔ 11.10: вопрос перетаскивания объясняет «было → станет» и предупреждает о
   занятом часе второй строкой — переносы строк в пояснении обязаны жить. */
.askcard .note{white-space:pre-line;line-height:1.5;color:var(--muted)}
.askcard .esover-ft{margin-top:6px}
/* Готовые черновики: цифра у пункта меню и уведомление поверх любого окна
   (Андрей 01.10). Уведомление НЕ модальное — оно не забирает экран. */
.navbadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;
  height:20px;padding:0 6px;margin-left:auto;border-radius:999px;background:var(--coral);
  color:#fff;font-size:11.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.wvnotes{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;
  flex-direction:column;gap:10px;max-width:340px}
.wvnote{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:12px 14px}
.wvnote .t{font-size:14px;font-weight:800}
.wvnote .h{font-size:12px;color:var(--muted);margin:4px 0 10px}
.wvnote .r{display:flex;gap:8px;justify-content:flex-end}
/* Состав визита: строки позиций с итогом (Андрей 01.10). */
.esvilist{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.esvi{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line)}
.esvi:first-child{border-top:none}
.esvi .t{flex:1;font-size:14px}
.esvi .n{font-variant-numeric:tabular-nums;font-size:14px;min-width:84px;text-align:right}
.esvi.итог{background:var(--soft)}
/* Один вход в создание записи: три крупные кнопки вместо трёх разных путей
   (Андрей 01.10: «вход в создание записи должен быть единым»). */
.esslot{display:flex;flex-direction:column;gap:10px}
.esslotb{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  text-align:left;padding:14px 16px;cursor:pointer;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);width:100%;font:inherit;color:inherit}
.esslotb:hover{background:var(--soft);border-color:var(--brand)}
.esslotb b{font-size:15px}
/* Шапка расписания двумя рядами: навигация и настройка (Андрей 01.10:
   «там уже мешанина… организуй их более удобно»). У каждого поля своя подпись. */
/* ══ ЖУРНАЛ EASYSLOT: КОПИЯ ИНТЕРФЕЙСА ALTEGIO ═══════════════════════════════
   ⛔ 02.10, Тарик: «наша задача — повторить. Копируй и делай так, как в Altegio…
   если каких-то кнопок у нас не зарегистрировано, просто поставь эту кнопку так,
   как она стоит в Altegio. Пусть она пока не несёт функционала».
   ⛔ Он же, позже: «не надо создавать дополнительные вкладки. Нужно, чтобы при
   нажатии EasySlot коричневая левая полоса ТРАНСФОРМИРОВАЛАСЬ в интерфейс
   расписания… сверху так и остаётся PRAMAS CRM Dubai, рядом кнопка Назад».
   ★ Размеры и шрифт сняты с живого экрана Altegio: фон рабочей области #F7F9FC,
   шрифт Inter, дата 20px/500, полчаса = 30px, кнопки 12px/500. ЦВЕТ панели при
   этом НАШ, коричневый: трансформируется существующая колонка, а не подменяется
   чужой. Их тёмно-синюю я пробовал — это была бы третья цветовая схема в системе,
   где две альтернативные уже отвергли.
   ⚠️ КНОПКИ-ЗАГЛУШКИ НЕ ПРИТВОРЯЮТСЯ РАБОЧИМИ: нажатие честно говорит, что
   функционала пока нет. Кнопка, молча не делающая ничего, заставит администратора
   решить, что сломалась система, и он перестанет верить остальным кнопкам тоже. */
/* ⛔ Тарик 18.10: «задний фон какой-то синий, бирюзовый — сделайте коричневым, как в
   „Графике работы“, и так везде». Голубой #F7F9FC был снят с экрана Altegio; фон
   рабочей области теперь наш общий --bg — тот же, что у графика и у тела страницы. */
body.esjour .content{padding:0;background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;min-height:0}
/* Единый отступ от тёмной панели для ВСЕХ подразделов, кроме расписания: у него
   панель инструментов идёт во всю ширину, как у Altegio, а свой отступ живёт
   внутри .esjour-body. Значение одно на весь раздел — его и правят в одном месте. */
body.esjour:not(.esjour-sched) .content{padding:16px 20px 20px;overflow:auto}
/* ⛔⛔ 06.10, Андрей: «список комплексов имеет критически малую высоту. Исправь».
   Померил: в окне 720 px список получал 129 px — пятнадцать строк в коробке на две,
   с прокруткой внутри. Причина в раскладке: у раздела .content это колонка flex,
   каждый блок сверху забирает свою высоту по содержимому, а таблице достаётся
   ОСТАТОК (flex:0 1 auto, min-height:0 — она сжимается первой). Чем больше блоков
   над ней, тем меньше остаток; на «Комплексах» их стало на один больше остальных.
   Две строки правила вместо правки каждой страницы:
   · список РАСТЁТ, а не сжимается — остаток достаётся ему;
   · и у него есть дно: меньше 320 px (примерно семь строк) он не станет никогда,
     что бы ни встало сверху. Не влезло — прокручивается вся страница, как и раньше. */
body.esjour .content > .tablewrap{flex:1 1 auto;min-height:min(320px,46vh)}
.esjour-title{font-family:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:20px;font-weight:500;color:#2B3134;margin:0 0 14px}
body.esjour .top{display:none}
.nav-jour{gap:12px}
.nav-jour .logo.jour{display:block}
.nav-jour .logo .wm{font-size:14px;font-weight:800;letter-spacing:.32em;color:var(--panel)}
.nav-jour .logo .sub{font-size:10.5px;font-weight:600;letter-spacing:.2em;
  color:var(--faint);margin-top:2px}
.nav-jour .navback{position:absolute;left:0;top:0;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  color:var(--cream);border-radius:9px;width:30px;height:30px;font:inherit;font-size:15px;
  cursor:pointer;line-height:1;padding:0}
.nav-jour .navback:hover{background:rgba(255,255,255,.16)}
.nav-jour .navback .nbt{display:none}
/* Плитки Altegio — строкой, а не блоками: Тарик, «они опять занимают много места,
   нужно сделать в строчку, как разделы». */
.nav-jour .razdel{font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);opacity:1;padding:0 10px 5px}
.esjour-menu{display:flex;flex-direction:column;gap:1px}
.esjour-menu a{position:relative;display:flex;align-items:center;height:29px;
  padding:0 10px;border-radius:9px;font-size:13px;color:var(--cream);opacity:.85;
  cursor:pointer}
.esjour-menu a:hover{background:rgba(255,255,255,.08);opacity:1}
.esjour-menu a.on{background:rgba(255,255,255,.14);opacity:1;font-weight:700}
/* Метка слева у выбранного раздела — единственное цветное пятно в колонке. */
.esjour-menu a.on::before{content:"";position:absolute;left:-10px;top:7px;bottom:7px;
  width:3px;border-radius:0 3px 3px 0;background:var(--coral)}
/* ★ 23.10 папки разделов (Catalogue, Finance, Statistics): заголовок — как пункт,
   справа шеврон; пункты внутри — с отступом. Свёрнутая папка с открытым разделом
   выделена жирным, чтобы было видно, где ты. */
.esjour-menu .esm-fold{display:flex;flex-direction:column;gap:1px}
.esjour-menu .esm-fhd{all:unset;box-sizing:border-box;position:relative;display:flex;
  align-items:center;gap:6px;height:29px;padding:0 10px;border-radius:9px;font-size:13px;
  color:var(--cream);opacity:.85;cursor:pointer}
.esjour-menu .esm-fhd:hover{background:rgba(255,255,255,.08);opacity:1}
.esjour-menu .esm-fhd:focus-visible{outline:2px solid var(--coral);outline-offset:-2px}
.esjour-menu .esm-chev{margin-left:auto;font-size:15px;line-height:1;transition:transform .15s}
.esjour-menu .esm-fold.open .esm-chev{transform:rotate(90deg)}
.esjour-menu .esm-fold.has-on:not(.open) .esm-fhd{opacity:1;font-weight:700}
.esjour-menu .esm-fbody{display:none;flex-direction:column;gap:1px}
.esjour-menu .esm-fold.open .esm-fbody{display:flex}
.esjour-menu .esm-fbody a{padding-left:22px}
@media (prefers-reduced-motion:reduce){.esjour-menu .esm-chev{transition:none}}
.nav-jour .user{margin-top:auto;border-top:1px solid rgba(255,255,255,.14);
  padding-top:10px;display:flex;align-items:center;gap:10px}
.nav-jour .user .u{flex:1;min-width:0}
.nav-jour .user b{display:block;font-size:12.5px;font-weight:700;color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-jour .user small{display:block;font-size:11px;color:var(--cream);opacity:.55;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-jour .user .out{background:transparent;border:none;width:30px;height:30px;
  border-radius:9px;color:var(--cream);opacity:.55;font-size:15px;cursor:pointer}
.nav-jour .user .out:hover{background:rgba(255,255,255,.12);opacity:1}
.nav-jour .admin{background:var(--gold);color:var(--ink);border:none;border-radius:0;
  height:36px;padding:0 16px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:8px;
  margin:10px -14px -14px}
.nav-jour .admin:hover{box-shadow:inset 0 0 0 1px rgba(43,36,30,.35)}
/* Календарь на коричневом: своя светлая подложка снимается, иначе белая карточка
   садится на коричневую колонку и заголовок месяца белеет по белому. */
.nav-jour .escal{background:transparent;border:none;padding:0;flex:none;width:auto}
.nav-jour .schedCal{color:var(--cream)}
.nav-jour .schedCal .mh b{font-size:13px;color:var(--cream)}
.nav-jour .schedCal .mh button{background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);color:var(--cream)}
.nav-jour .schedCal .wd span{color:var(--cream);opacity:.45}
.nav-jour .schedCal .dg button{width:27px;height:27px;border-radius:999px;
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--panel);opacity:1;display:grid;place-items:center}
.nav-jour .schedCal .dg button:hover{background:var(--brand)}
.nav-jour .schedCal .dg button.oth{color:var(--faint);font-weight:500}
.nav-jour .schedCal .dg button.tod{background:var(--panel);color:var(--ink);font-weight:800}
.nav-jour .schedCal .dg button.sel{box-shadow:inset 0 0 0 3px var(--faint)}
.nav-jour .escalf{border-top-color:rgba(255,255,255,.14);color:var(--cream);opacity:.7}
/* Шапка журнала: порядок кнопок — как в Altegio. */
.esjour-head{height:56px;display:flex;align-items:center;gap:8px;padding:0 14px;
  background:var(--panel);border-bottom:1px solid var(--line);flex:none}
.esjour-head .den{font-size:16px;font-weight:700;color:var(--ink);margin-left:6px;
  white-space:nowrap}
.esjour-head .sp{flex:1}
.num{font-variant-numeric:tabular-nums}
.ajbtn{box-sizing:border-box;flex:none;height:32px;padding:0 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);font:inherit;font-size:12.5px;
  font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;white-space:nowrap}
.ajbtn:hover{background:var(--soft)}
.ajbtn.ico{width:32px;padding:0;justify-content:center;font-size:15px}
.ajbtn.on{background:var(--soft);font-weight:700}
/* ⛔ ТЗ п.0: стрелка — CSS-галочка, а не символ «⌄»: тот проваливается вниз
   относительно текста и у каждого шрифта сидит по-своему. */
.ajbtn .chev{width:6px;height:6px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);
  margin-left:2px;flex:none}
/* ⛔ ТЗ п.3: «‹ ›» — пара квадратов, склеенных в одну кнопку: общая рамка,
   скругление только по внешним краям. */
.ajpair{display:flex}
.ajpair .ajbtn:first-child{border-radius:9px 0 0 9px}
.ajpair .ajbtn:last-child{border-radius:0 9px 9px 0;margin-left:-1px}
.ajbtn[data-пусто]{color:#6B7280}
.ajbtn[data-пусто]::after{content:'';width:5px;height:5px;border-radius:50%;
  background:#D8DEE7;display:inline-block}
.esjour-body{flex:1;min-height:0;overflow:auto;padding:10px 14px 14px}
/* 19.10: сетка — во всю ширину шапки, как в макете 01-grid; остаток под ней белый. */
.esjour-body.esjb-full{padding:0;background:var(--panel)}
/* Выпадающие панели управления — вместо рядов полей на экране. */
.espop{position:fixed;z-index:60;display:none;background:#fff;border:1px solid #E1E6ED;
  border-radius:12px;box-shadow:0 10px 30px -12px rgba(16,24,40,.25);padding:12px;
  width:264px;max-height:70vh;overflow:auto}
.espop.on{display:block}
.espop-t{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#8A8DA0;
  margin-bottom:7px}
.espop-vid{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.espop-vid button{border:1px solid #E1E6ED;background:#fff;border-radius:9px;
  padding:8px 10px;font:inherit;font-size:12.5px;text-align:left;cursor:pointer;color:#2B3134}
.espop-vid button:hover{background:#F2F5F9}
.espop-vid button.on{background:#2B3134;border-color:#2B3134;color:#fff;font-weight:600}
.espole{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;color:#6B7280;padding:5px 0}
.espole select{max-width:150px;padding:6px 8px;border:1px solid #E1E6ED;border-radius:8px;
  font:inherit;font-size:12px;background:#fff;color:#2B3134}
.espop-leg{display:flex;flex-wrap:wrap;gap:5px}
/* ── КАССА ДНЯ ПОД СУММОЙ В ШАПКЕ (Тарик 03.10) ─────────────────────────────
   «Когда я нажимаю на эту сумму, я хочу, чтобы у меня разворачивался список:
   оплата наличными, оплата без наличных, обзор дня». */
.espop-kassa{width:260px}
.eskrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid #F2F0EA;font-size:13px}
.eskrow b{font-variant-numeric:tabular-nums}
.eskrow.eskitog{border-bottom:0;font-weight:600}
.eskrow.eskitog span{color:#2B3134}
/* ── ОБЗОР ДНЯ ─────────────────────────────────────────────────────────────── */
.esobz-f{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.esobz-kal{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8A8DA0}
.esobz-kal input{padding:5px 8px;border:1px solid #E1E6ED;border-radius:8px;
  font:inherit;font-size:12px}
.esobz-svod{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.esobz-svod>div{flex:1 1 150px;border:1px solid #EFEAE0;border-radius:11px;
  padding:9px 12px;display:flex;flex-direction:column;gap:2px;background:#FCFAF6}
.esobz-svod b{font-size:17px;font-variant-numeric:tabular-nums}
/* ── ПАНЕЛЬ ПОИСКА ПО КЛИЕНТСКОЙ БАЗЕ ──────────────────────────────────────── */
.espoisk-q{width:100%;padding:10px 12px;border:1px solid #E1E6ED;border-radius:10px;
  font:inherit;font-size:14px;margin-bottom:12px}
.espoisk-q:focus{outline:2px solid #C2A34A;outline-offset:-1px;border-color:#C2A34A}
.espoisk-list{display:flex;flex-direction:column;gap:4px}
.espoisk-it{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  text-align:left;width:100%;padding:9px 11px;border:1px solid #EFEAE0;border-radius:10px;
  background:#fff;cursor:pointer;font:inherit}
.espoisk-it:hover{background:#FAF7F1;border-color:#E3D9C6}
.espoisk-kart{display:flex;flex-direction:column;gap:10px}
.espoisk-nm{display:flex;flex-direction:column;gap:2px}
.espoisk-nm b{font-size:17px}
.espoisk-sl{border:1px solid #EFEAE0;border-radius:11px;padding:10px 12px;background:#FCFAF6}
.espoisk-act{display:flex;flex-wrap:wrap;gap:6px}
.espoisk-act .btn{flex:1 1 140px}
.espoisk-t{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#8A8DA0;
  margin-top:4px}
.espoisk-v{display:flex;flex-direction:column;gap:1px;padding:7px 10px;border-radius:9px;
  cursor:pointer;border:1px solid transparent}
.espoisk-v:hover{background:#FAF7F1;border-color:#EFEAE0}
/* ══ КАРТОЧКА НОВОЙ ЗАПИСИ — эталон 07-new-record.html ══════════════════════
   ⛔ ТЗ 04.10, ч.B. Правила перенесены из эталона дословно, но КАЖДОЕ заужено
   под .esnz. Это вынужденно и проверено: имена эталона у нас уже заняты —
   .panel стоит в разметке 41 раз, .ghost 92, плюс .seg, .card, .col, .empty.
   Без заужения перенос перекрасил бы пол-системы. Внутри .esnz имена эталона
   сохранены один в один, чтобы правки макета ложились сюда без перевода. */
.esnz{position:fixed;inset:0;z-index:40;display:grid;
  grid-template-columns:17% minmax(0,1fr);height:100vh;overflow:hidden;background:var(--bg)}
.esnz .strip{position:relative;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-width:0;overflow:hidden}
.esnz .strip-hd{flex:none;height:48px;display:flex;align-items:center;gap:8px;
  padding:0 40px 0 10px;border-bottom:1px solid var(--line)}
.esnz .strip-hd b{font-size:15px;font-weight:700;flex:1}
.esnz .sbtn{box-sizing:border-box;height:28px;padding:0 10px;border:1px solid var(--line);
  border-radius:9px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;
  background:var(--panel);color:var(--ink)}
.esnz .sbtn.sq{width:28px;padding:0;justify-content:center;font-size:13px}
.esnz .veil{position:absolute;inset:0;background:rgba(237,231,225,.62);z-index:5;
  cursor:pointer}
.esnz .veil:hover{background:rgba(237,231,225,.5)}
.esnz .expand{cursor:pointer;position:absolute;z-index:7;top:9px;right:-1px;width:30px;
  height:30px;border-radius:9px 0 0 9px;background:var(--panel);box-shadow:var(--shadow);
  border:1px solid var(--line);border-right:0;display:grid;place-items:center;
  font-size:15px;color:var(--ink)}
.esnz .expand:hover{background:var(--soft)}
.esnz .strip .esmwrap{flex:1;min-height:0;
  --row:clamp(14px,calc((100vh - 48px - 18px) / 28),34px)}
.esnz .strip .eshead{padding:6px 0 5px}
.esnz .strip .escol{display:flex;flex-direction:column;gap:2px;padding:0 4px;
  align-items:flex-start}
.esnz .strip .escol .av{width:22px;height:22px;font-size:10.5px}
.esnz .strip .escol .n{display:none}
.esnz .strip .escolnm{font-size:11px}
.esnz .strip .escolrole{font-size:10.5px}
.esnz .strip .esdcell.busy{padding:3px 5px}
.esnz .strip .esdcell.blocked,.esnz .strip .esoff{padding:3px 6px}
.esnz .esslot-new{position:absolute;left:3px;right:3px;z-index:6;background:var(--panel);
  border-radius:8px;border:1.5px dashed var(--ink);padding:2px 6px;display:flex;
  flex-wrap:wrap;align-content:flex-start;column-gap:5px;line-height:13px;overflow:hidden;
  top:calc(var(--row)*var(--s) + 1px);height:calc(var(--row)*var(--d) - 1px)}
.esnz .esslot-new b{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.esnz .esslot-new small{font-size:10.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.esnz .card{display:flex;flex-direction:column;min-width:0;min-height:0}
/* ⛔ Тарик 17.10: при переключении вкладок средняя колонка «дышала» — боковые
   были резиновыми (160–180 / 220–260) и грид гулял по контенту. Фиксируем. */
.esnz .cols{flex:1;min-height:0;display:grid;
  grid-template-columns:180px minmax(0,1fr) 260px;
  overflow-x:auto;gap:10px;padding:10px 10px 0}
.esnz .col{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;
  padding-bottom:12px}
.esnz .panel{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);
  padding:13px 14px}
.esnz .box{border:1px solid #EFEAE0;background:#FCFAF6;border-radius:12px;padding:11px 12px}
.esnz .av{flex:none;width:34px;height:34px;border-radius:999px;background:var(--cream);
  color:var(--brand);display:grid;place-items:center;font-size:12px;font-weight:800}
.esnz .who{display:flex;gap:10px;align-items:flex-start}
.esnz .who .n{flex:1;min-width:0}
.esnz .who b{display:block;font-size:13.5px;font-weight:700}
.esnz .who small{display:block;font-size:11.5px;color:var(--muted)}
.esnz .kv{display:flex;gap:10px;align-items:flex-start;padding-top:9px}
.esnz .kv .g{width:34px;text-align:center;font-size:14px;line-height:18px;flex:none}
.esnz .kv b{display:block;font-size:12.5px;font-weight:600}
.esnz .kv small{display:block;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.esnz .link{cursor:pointer;font-size:12px;font-weight:600;color:var(--brand);
  display:inline-flex;gap:5px;align-items:center;border-radius:8px;padding:4px 6px;
  background:transparent;border:0;font-family:inherit}
.esnz .link:hover{background:var(--soft)}
.esnz .ttl{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.esnz .lbl,.espaybox .lbl{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.esnz .fld{display:flex;flex-direction:column}
.esnz .ta{width:100%;height:92px;resize:none;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);padding:9px 10px;font:inherit;font-size:12.5px;color:var(--ink)}
.esnz .sel{height:32px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  padding:0 10px;display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer}
.esnz .sel .v{flex:1}
.esnz .sel .sw{width:12px;height:12px;border-radius:3px;background:var(--brand)}
.esnz .chev{width:6px;height:6px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);
  flex:none;margin:0 2px}
.esnz .pills{display:flex;gap:5px;flex-wrap:nowrap;min-width:0}
.esnz .svc{border:1px solid var(--line);border-radius:11px;padding:9px 12px;display:flex;
  flex-direction:column;gap:3px}
.esnz .svc small{font-size:11px;color:var(--muted)}
.esnz .svc .r{display:flex;align-items:center;gap:10px}
.esnz .svc .r b{flex:1;font-size:13.5px;font-weight:600}
.esnz .svc .r .p{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.esnz .pay{display:flex;align-items:center;gap:12px;padding:0 2px}
.esnz .pay span{font-size:12.5px;color:var(--muted);white-space:nowrap}
.esnz .pay b{flex:1;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.esnz .inner{background:var(--soft);border-radius:12px;padding:10px;display:flex;
  flex-direction:column;gap:9px}
.esnz .seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--cream);
  border-radius:10px;padding:3px}
/* ⛔ Тарик 15.10 (обратный свет): «Услуги · Абонемент · Депозит · Stripe — на
   одной линии». Четыре кнопки в сетке из трёх колонок роняли Stripe вниз. */
.esnz .seg.four{grid-template-columns:repeat(4,1fr)}
/* Колокольчик уведомлений в шапке (Тарик 15.10) и его список. */
.notifbadge{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;
  border-radius:8px;background:var(--red);color:#fff;font-size:9.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  font-variant-numeric:tabular-nums}
.espop-alerts{width:300px;max-height:380px;overflow-y:auto}
.espop-alerts .al-row{display:flex;flex-direction:column;gap:2px;padding:7px 8px;
  border-radius:9px;font-size:12px}
.espop-alerts .al-row b{font-size:12.5px}
.espop-alerts .al-row small{color:var(--muted);line-height:1.35}
.espop-alerts .al-row.nw{background:var(--cream)}
.espop-alerts .al-row+.al-row{margin-top:3px}
.espop-alerts .al-btn{margin-top:4px;align-self:flex-start}
/* Галочки нескольких абонементов/услуг (Тарик 15.10, вечер). */
.pickbox{max-height:280px;overflow-y:auto;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);padding:4px;margin-top:6px;
  display:flex;flex-direction:column;gap:2px}
.pick-grp{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--faint);
  text-transform:uppercase;padding:7px 8px 3px}
.pick-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  cursor:pointer;font-size:12.5px}
.pick-row:hover{background:var(--soft)}
.pick-row.on{background:var(--cream)}
.pick-row input{accent-color:var(--brand);width:14px;height:14px;flex:none}
.pick-row .nm{flex:1;min-width:0}
.pick-row .pr{font-variant-numeric:tabular-nums;color:var(--muted);flex:none}
/* Закрытая строка мультивыбора (Тарик 15.10 ночь: «одной строкой,
   раскрывающийся список с галочками — иначе занимает слишком много места»). */
.esnz .pickhead{display:flex;align-items:center;gap:8px;cursor:pointer;
  text-align:left;height:auto;min-height:32px;padding:5px 10px}
.pickhead .ph-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--ink)}
.pickhead .ph-txt:empty::before{content:'—'}
.pickhead .ph-n{flex:none;color:var(--muted);font-weight:700}
.pickhead .chev{flex:none;width:8px;height:8px;border-right:1.6px solid var(--faint);
  border-bottom:1.6px solid var(--faint);transform:rotate(45deg) translateY(-2px);
  transition:.15s}
.pickhead .chev.up{transform:rotate(225deg) translateY(-1px)}
/* ═══ Окно «Оплата визита» v2 (ТЗ 16.10, эталон 18-visit-payment) ═══ */
.oplbox{width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 40px);
  background:var(--panel);border-radius:14px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(43,36,30,.05),0 24px 60px -20px rgba(43,36,30,.45);
  overflow:hidden;font-family:inherit;color:var(--ink)}
.opl-hd{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 10px;flex:none}
.opl-hd b{font-size:15px;font-weight:800}
.opl-x{all:unset;cursor:pointer;width:32px;height:32px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  color:var(--muted)}
.opl-x:hover{background:var(--soft);color:var(--ink)}
.opl-mid{flex:1;min-height:0;overflow:auto;padding:0 18px 14px;
  display:flex;flex-direction:column;gap:10px}
.opl-card{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;
  background:var(--box-bg);border:1px solid var(--box-line);border-radius:12px;padding:12px}
.opl-av{width:40px;height:40px;border-radius:999px;background:var(--cream);
  color:var(--brand);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800}
.opl-who{min-width:0;display:flex;flex-direction:column;gap:2px}
.opl-who b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.opl-who small,.opl-sumh small{font-size:11.5px;color:var(--muted)}
.opl-sumh{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.opl-sumh b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.opl-sumh small{font-size:11px}
.opl-pr{grid-column:1/-1;border-top:1px solid var(--box-line);padding-top:9px;
  display:flex;flex-direction:column;gap:2px}
.opl-pr b{font-size:13.5px;font-weight:700}
.opl-pr small{font-size:12px;color:var(--muted)}
.opl-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--cream);
  border-radius:10px;padding:3px;height:34px;box-sizing:border-box}
.opl-seg button{all:unset;cursor:pointer;display:flex;align-items:center;
  justify-content:center;border-radius:8px;font-size:12.5px;font-weight:700;
  color:var(--brand)}
.opl-seg button.on{background:var(--panel);color:var(--ink);
  box-shadow:0 1px 3px rgba(43,36,30,.12)}
.opl-hint{font-size:12px;color:var(--muted);line-height:1.45}
.opl-cap{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:2px}
.opl-list{display:flex;flex-direction:column;gap:6px}
.opl-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;
  align-items:center;min-height:56px;padding:10px 12px;box-sizing:border-box;
  border:1px solid var(--box-line);border-radius:11px;background:var(--panel);
  cursor:pointer;outline:none}
.opl-row:hover{background:var(--box-bg)}
.opl-row:focus-visible{box-shadow:0 0 0 2px var(--ink)}
.opl-row.on{border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
.opl-row.off{background:var(--box-bg);cursor:default}
.opl-row.off .opl-tx b,.opl-row.off .opl-r{color:var(--faint)}
.opl-mk{width:18px;height:18px;box-sizing:border-box;border:1.5px solid var(--faint);
  position:relative;align-self:center}
.opl-mk.rad{border-radius:999px}
.opl-mk.chk{border-radius:5px}
.opl-row.on .opl-mk{background:#2B3134;border-color:#2B3134}
.opl-row.on .opl-mk.rad{box-shadow:inset 0 0 0 3.5px #fff}
.opl-row.on .opl-mk.chk::after{content:'';position:absolute;left:5px;top:2px;width:4px;
  height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.opl-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.opl-tx b{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;
  flex-wrap:wrap}
.opl-tx small{font-size:11.5px;color:var(--muted);line-height:1.35}
.opl-tag{font-style:normal;height:18px;display:inline-flex;align-items:center;
  padding:0 6px;border-radius:5px;background:var(--cream);color:var(--brand);
  font-size:10.5px;font-weight:700}
.opl-plus{font-size:11.5px;color:var(--brand);font-weight:700;cursor:pointer;
  align-self:flex-start;margin-top:2px}
.opl-plus:hover{text-decoration:underline}
.opl-bad{color:var(--red) !important}
.opl-r{font-size:13px;font-weight:700;white-space:nowrap;text-align:right;
  font-variant-numeric:tabular-nums}
.opl-fx{font-weight:700}
.opl-in{display:inline-flex;align-items:center;gap:5px}
.opl-in small{font-size:11.5px;color:var(--muted);font-weight:600}
.opl-sum{width:88px;height:32px;box-sizing:border-box;border:1px solid var(--line);
  border-radius:8px;padding:0 8px;text-align:right;font:inherit;font-size:13px;
  font-weight:700;color:var(--ink);background:var(--panel)}
.opl-sum:focus{outline:none;border-color:var(--ink)}
.opl-sum.bad{border-color:var(--red)}
.opl-sobr{background:var(--soft);border-radius:11px;padding:10px 12px;
  display:flex;flex-direction:column;gap:6px}
.opl-sb-r{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.opl-sb-r b{color:var(--ink);font-variant-numeric:tabular-nums}
.opl-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.opl-bar i{display:block;height:100%;border-radius:999px;transition:width .15s}
.opl-sb-t{font-size:12px;color:var(--muted);font-weight:600}
.opl-sb-t.ok{color:var(--green,#3F6E46)}
.opl-sb-t.bad{color:var(--red)}
.opl-err{font-size:12px;color:var(--red);font-weight:600}
.opl-ft{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 18px;border-top:1px solid var(--line)}
.opl-tot{display:flex;flex-direction:column;gap:1px}
.opl-tot small{font-size:11.5px;color:var(--muted)}
.opl-tot b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.opl-go{all:unset;box-sizing:border-box;cursor:pointer;height:40px;padding:0 18px;
  border-radius:10px;background:#2B3134;color:var(--panel);font-size:13.5px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.opl-go:hover{background:var(--brand)}
.opl-go[disabled]{background:var(--line);color:var(--muted);cursor:not-allowed}
.opl-go.wide{width:100%}
.opl-done{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 22px 20px;text-align:center}
.opl-ok{width:44px;height:44px;border-radius:999px;background:var(--green,#3F6E46);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;
  font-weight:800}
.opl-dt{font-size:16px;font-weight:800}
.opl-ds{font-size:12.5px;color:var(--muted);line-height:1.45}
.opl-dl{width:100%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:8px 0 6px;padding:6px 0;display:flex;flex-direction:column}
.opl-dl>div{display:flex;justify-content:space-between;padding:6px 2px;font-size:13px}
.opl-dl>div span{color:var(--muted)}
.opl-dl>div.tot{border-top:1px dashed var(--line);margin-top:3px;padding-top:9px}
.opl-dl>div.tot b{font-size:14px;font-weight:800}
/* ═══ Раздел «Оплата Stripe» — вид по ТЗ 17.10 (макет 17-stripe) ═══ */
.stp-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;
  border-radius:999px;border:1px solid var(--line);background:var(--panel);
  font:inherit;font-size:12px;font-weight:600;color:var(--brand);cursor:pointer}
.stp-chip i{width:7px;height:7px;border-radius:999px;flex:none}
.stp-chip b{font-weight:800}
.stp-chip.on{background:#2B3134;border-color:#2B3134;color:var(--panel)}
/* ⛔ Тарик 17.10: «не могу скроллить раздел». .content — flex-колонка, и
   карточка по умолчанию СЖИМАЛАСЬ под высоту экрана, пряча строки без
   прокрутки. flex:none — карточка держит полный рост, страницу крутит
   .content (overflow:auto у разделов уже стоит). */
.stp-card{background:var(--panel);border-radius:14px;flex:none;
  box-shadow:0 1px 3px rgba(43,36,30,.07);overflow:hidden}
body.esjour .segbar{flex:none}
.stp-row{display:grid;
  grid-template-columns:64px 126px minmax(0,1fr) 108px 176px 132px;
  gap:14px;align-items:center;min-height:48px;padding:0 16px;font-size:12.5px}
@media (max-width:1100px){.stp-row{
  grid-template-columns:56px 120px minmax(0,1fr) 96px 156px 110px}}
/* ТЗ привязки §1: ≤ 1000 px «Название» не схлопывается — последняя колонка —
   только кружок «кто создал», суммы без «AED». */
@media (max-width:1000px){.stp-row{
  grid-template-columns:40px 96px minmax(120px,1fr) 70px 150px 24px;gap:8px;
  padding-left:12px;padding-right:12px}
  .stp-who>span{font-size:0}.stp-hd>span:last-child{font-size:0}
  .stp-id{padding:3px 5px;font-size:11px}.stp-st{padding:0 7px;font-size:11.5px}
  .stp-sum small{display:none}}
.stp-row:not(.stp-hd):hover{background:var(--box-bg,var(--soft))}
.stp-hd{min-height:36px;position:sticky;top:0;background:var(--panel);z-index:2;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line)}
.stp-day{display:flex;justify-content:space-between;align-items:center;
  background:var(--box-bg,var(--soft));padding:5px 14px;font-size:11.5px;
  font-weight:700;color:var(--brand)}
.stp-day small{color:var(--muted);font-weight:600}
.stp-time{color:var(--muted);font-variant-numeric:tabular-nums}
.stp-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--soft);color:var(--brand);border-radius:6px;padding:2px 7px}
.stp-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp-sum{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.stp-sum small{color:var(--muted);font-weight:600;font-size:10.5px}
.stp-stw{display:flex;align-items:center;gap:6px;min-width:0}
.stp-st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;
  border-radius:7px;background:var(--cream);color:var(--brand);font-size:11.5px;
  font-weight:600;white-space:nowrap}
.stp-st i{width:6px;height:6px;border-radius:999px;background:var(--faint)}
.stp-st.ok{background:#E7F0E8;color:#3F6E46}
.stp-st.bad{background:#FBE7E1;color:var(--red)}
.stp-st.bad i{background:var(--red)}
.stp-who{display:flex;align-items:center;gap:7px;min-width:0;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.stp-who i{width:24px;height:24px;border-radius:999px;background:var(--cream);
  color:var(--brand);font-style:normal;font-size:10px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.stp-per{width:300px;left:auto;right:0}
.stp-per .inp.bad{border-color:var(--red)}
/* Свой календарь даты (Тарик 16.10): селекты месяца/года + сетка дней. */
.dpwrap{position:relative}
.esnz .dphead{display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left}
.dphead .ph{color:var(--faint)}
.dphead span:first-child{flex:1}
.dphead .chev{width:8px;height:8px;border-right:1.6px solid var(--faint);
  border-bottom:1.6px solid var(--faint);transform:rotate(45deg) translateY(-2px)}
.dpop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(43,36,30,.16);padding:10px}
.dpop-hd{display:flex;gap:6px;margin-bottom:8px}
.dpop-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.dpop-wd span{font-size:10px;color:var(--faint);text-align:center;font-weight:700;
  text-transform:uppercase}
.dpop-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dpop-grid button{height:26px;border:0;background:transparent;border-radius:7px;
  font:inherit;font-size:12px;color:var(--ink);cursor:pointer}
.dpop-grid button:hover{background:var(--soft)}
.dpop-grid button.on{background:var(--brand-2);color:var(--panel);font-weight:700}
.esnz .seg button{white-space:nowrap;cursor:pointer;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;
  font-weight:600;color:var(--brand);background:transparent;border:0;font-family:inherit}
.esnz .seg button.on{background:var(--panel);color:var(--ink);
  box-shadow:0 1px 2px rgba(43,36,30,.05)}
.esnz .inp{width:100%;height:32px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);padding:0 10px;font:inherit;font-size:12.5px;color:var(--ink)}
.esnz .inp::placeholder,.esnz .ta::placeholder{color:var(--faint)}
.esnz .srows{display:flex;flex-direction:column;gap:5px}
.esnz .srow{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;
  border:1px solid #EFEAE0;background:var(--panel);border-radius:10px;cursor:pointer;
  min-width:0}
.esnz .srow:hover{background:#FCFAF6;border-color:var(--line)}
.esnz .srow b{flex:0 1 auto;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.esnz .srow .tag{flex:none;background:var(--cream);color:var(--brand);font-size:10.5px;
  font-weight:700;border-radius:6px;padding:1px 6px;white-space:nowrap}
.esnz .srow .tpre{background:var(--green);color:var(--ink)}
.esnz .srow .dur{margin-left:auto;flex:none;font-size:12px;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.esnz .srow .pr{flex:none;width:76px;text-align:right;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.esnz .srow.on{border-color:var(--ink)}
.esnz .cats{display:flex;flex-direction:column}
.esnz .cat{cursor:pointer;height:32px;display:flex;align-items:center;gap:8px;padding:0 6px;
  border-radius:8px;font-size:13.5px;font-weight:600;background:transparent;border:0;
  font-family:inherit;color:var(--ink);text-align:left}
.esnz .cat:hover{background:var(--cream)}
.esnz .cat.open .chev{transform:translateY(1px) rotate(225deg)}
.esnz .catlist{display:flex;flex-direction:column;gap:5px;padding:4px 0 8px}
.esnz .tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin:-2px 0 0}
.esnz .tabs button{cursor:pointer;padding:4px 2px 8px;font-size:13px;font-weight:600;
  color:var(--muted);border:0;border-bottom:2.5px solid transparent;margin-bottom:-1px;
  background:transparent;font-family:inherit}
.esnz .tabs button.on{color:var(--ink);border-bottom-color:var(--gold)}
.esnz .tabs .tedit{margin-left:auto;align-self:center;margin-bottom:4px;padding:3px 6px;
  border-bottom:0;color:var(--brand);font-size:12px}
.esnz .client{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  background:var(--soft);border-radius:11px;padding:9px 10px}
.esnz .client .av{background:var(--panel)}
.esnz .client .cprof{flex-basis:100%;justify-content:center;background:var(--panel);
  border:1px solid #EFEAE0;border-radius:9px;height:28px;padding:0 8px;box-sizing:border-box}
.esnz .client .n{flex:1;min-width:0}
.esnz .client .n b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.esnz .client .n small{display:block;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.esnz .sec{border-top:1px solid var(--line);padding-top:11px;display:flex;
  flex-direction:column;gap:8px}
.esnz .chk{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer}
.esnz .stats{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px}
.esnz .stats small{display:block;font-size:11px;color:var(--muted)}
.esnz .stats b{display:block;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;margin-top:1px}
.esnz .loy{font-size:12px;line-height:1.45}
.esnz .loy b{font-size:12.5px;font-weight:700}
.esnz .loy .m{color:var(--muted)}
.esnz .foot{flex:none;height:52px;display:flex;align-items:center;justify-content:flex-end;
  gap:10px;padding:0 14px;background:var(--panel);border-top:1px solid var(--line)}
.esnz .foot .hint{margin-right:auto;font-size:12px;color:var(--muted)}
.esnz .cancel{cursor:pointer;height:34px;padding:0 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;font-family:inherit;color:var(--ink)}
.esnz .cancel:hover{background:var(--soft)}
.esnz .save{cursor:pointer;height:34px;padding:0 16px;border-radius:10px;background:var(--gold);
  color:var(--ink);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;
  border:0;font-family:inherit}
.esnz .save:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.esnz .save[disabled]{background:var(--cream);color:var(--faint);cursor:not-allowed;
  box-shadow:none}
.esnz .stack,.espaybox .stack{display:flex;flex-direction:column;gap:10px}
.esnz .empty{border:1.5px dashed var(--line);border-radius:11px;padding:12px;
  font-size:12.5px;color:var(--muted);text-align:center}
.esnz .ghost{box-sizing:border-box;cursor:pointer;height:32px;padding:0 12px;
  border:1px dashed var(--line);border-radius:9px;display:flex;align-items:center;
  justify-content:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--brand);
  background:transparent;font-family:inherit;width:100%}
.esnz .ghost:hover{background:var(--soft)}
.esnz .dark{box-sizing:border-box;cursor:pointer;height:32px;padding:0 14px;
  border-radius:9px;background:var(--brand-2);color:var(--panel);font-size:12.5px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;border:0;font-family:inherit}
.esnz .dark:hover{background:var(--brand)}
.esnz .newc{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);
  padding-top:10px}
.esnz .phrow{display:flex;gap:6px}
.esnz .phrow .cc{flex:none;width:92px}
.esnz .phrow .np{flex:1;min-width:0}
.esnz .nerr{color:var(--red);font-size:11.5px}
.esnz .cres{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.esnz .crow{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:7px 9px;border:1px solid #EFEAE0;border-radius:10px;background:var(--panel);
  width:100%;font-family:inherit;text-align:left}
.esnz .crow:hover{background:var(--soft)}
.esnz .crow .av{width:28px;height:28px;font-size:10.5px}
.esnz .crow .n{flex:1;min-width:0}
.esnz .crow b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.esnz .crow small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.esnz .crow .n{flex:1;min-width:0;max-width:100%;overflow:hidden}
.esnz .crow .n small{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.esnz .who small{overflow-wrap:anywhere}
.esnz .crow .st{font-size:10px}
.esnz .dnote{font-size:11.5px;color:var(--muted)}
.esnz .newtag{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand);background:var(--cream);border-radius:6px;padding:2px 7px;
  align-self:flex-start}
.esnz .selw{position:relative;display:flex;align-items:center}
.esnz .nsel{appearance:none;-webkit-appearance:none;width:100%;height:32px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  padding:0 30px 0 10px;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;
  text-overflow:ellipsis}
.esnz .selw .chev{position:absolute;right:12px;pointer-events:none}
/* ── ЧАСТЬ D: карточка визита на том же экране (ТЗ D.1) ─────────────────────
   Правила из того же набора эталонов, заужены под .esnz по той же причине. */
.esnz .pill{box-sizing:border-box;cursor:pointer;flex:0 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;height:30px;padding:0 10px;border-radius:9px;background:var(--soft);
  font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;border:0;font-family:inherit;color:var(--ink)}
.esnz .pill:hover{background:var(--cream)}
.esnz .pill.on{background:#2B3134;color:var(--panel)}
.esnz .obtn{cursor:pointer;box-sizing:border-box;height:32px;padding:0 12px;border-radius:9px;
  border:1.5px solid var(--gold);background:var(--panel);font-size:12.5px;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;
  font-family:inherit;color:var(--ink)}
.esnz .obtn:hover{background:var(--soft)}
.esnz .obtn[disabled]{border-color:var(--line);color:var(--faint);cursor:not-allowed}
.esnz .ltiles{display:flex;flex-direction:column;gap:5px}
.esnz .lt{box-sizing:border-box;cursor:pointer;height:32px;border:1px solid #EFEAE0;
  background:var(--panel);border-radius:9px;padding:0 10px;display:flex;align-items:center;
  gap:8px;white-space:nowrap;font-family:inherit;font-size:12px;font-weight:600;
  color:var(--ink);text-align:left}
.esnz .lt:hover{background:var(--soft)}
.esnz .rtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.esnz .rt{box-sizing:border-box;cursor:pointer;min-height:58px;border:1px solid #EFEAE0;
  background:var(--panel);border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;padding:6px 4px;text-align:center;
  font-family:inherit;color:var(--ink)}
.esnz .rt:hover{background:var(--soft)}
.esnz .rt .g{font-size:13px;line-height:15px;color:var(--brand)}
.esnz .rt .l{font-size:11px;font-weight:600;line-height:1.25}
.esnz .kv2{display:flex;flex-direction:column;gap:8px}
.esnz .kv2 small{display:block;font-size:11px;color:var(--muted)}
.esnz .kv2 b{display:block;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;margin-top:1px}
.esnz .coderow{display:flex;gap:6px}
.esnz .inp.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  letter-spacing:.08em;background:#FCFAF6}
.esnz .sbtn2{box-sizing:border-box;cursor:pointer;flex:none;height:32px;padding:0 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:12px;
  font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;
  font-family:inherit;color:var(--ink)}
.esnz .sbtn2:hover{background:var(--soft)}
.esnz .pnote{color:var(--faint);font-variant-numeric:tabular-nums;margin-left:4px}
.esnz .pnote.chg{color:var(--gold)}
.esnz .hrow,.espaybox .hrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;
  align-items:center;background:var(--panel);border:1px solid #EFEAE0;border-radius:10px;
  padding:8px 12px;font-size:12.5px}
.esnz .hrow>span:first-child,.espaybox .hrow>span:first-child{color:var(--muted);font-size:12px}
.esnz .hrow b,.espaybox .hrow b{display:block;font-weight:600}
.esnz .hrow small,.espaybox .hrow small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.esnz .hrow>span:last-child,.espaybox .hrow>span:last-child{font-weight:600}
.esnz .dbal{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10px;
  background:var(--panel);border:1px solid #EFEAE0;border-radius:11px;padding:10px 12px}
.esnz .dbal b{display:block;font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;margin-top:1px}
.esnz .dbox{background:var(--panel);border:1px solid #EFEAE0;border-radius:11px;
  padding:10px 12px}
.esnz .drow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.esnz .dsum{font-size:12.5px;color:var(--muted)}
.esnz .dsum b{color:var(--ink);font-variant-numeric:tabular-nums}
.esnz .seg.two{grid-template-columns:1fr 1fr}
/* Окно оплаты — поверх всего экрана (ТЗ D.6). */
.espmodal{position:fixed;inset:0;z-index:80;background:rgba(43,36,30,.45);display:grid;
  place-items:center;padding:20px}
.espaybox{width:420px;max-width:100%;border-radius:14px;padding:14px;display:flex;
  flex-direction:column;gap:10px;background:var(--panel);
  box-shadow:0 1px 2px rgba(43,36,30,.05),0 24px 60px -20px rgba(43,36,30,.45)}
.espaybox .phd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.espaybox .phd .ttl{font-size:14px;font-weight:700}
.espaybox .pos{display:flex;flex-direction:column;gap:5px}
.espaybox .po{box-sizing:border-box;cursor:pointer;display:grid;
  grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;
  border:1px solid #EFEAE0;background:var(--panel);border-radius:10px;width:100%;
  font-family:inherit;text-align:left}
.espaybox .po:hover{background:var(--soft)}
/* ⛔ Тарик 16.10: раздельная оплата не читалась — кружки выглядели радио-выбором.
   Квадратик с галкой говорит «можно отметить несколько». */
.espaybox .po i{width:15px;height:15px;border-radius:4.5px;border:1.5px solid var(--line);
  box-sizing:border-box;position:relative;flex:none}
.espaybox .po.on{border-color:var(--ink)}
.espaybox .po.on i{background:#2B3134;border-color:#2B3134}
.espaybox .po.on i::after{content:'';position:absolute;left:4.5px;top:1.5px;width:4px;
  height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.espaybox .po b{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  /* ⛔ Тарик 16.10 (п.3): длинное название с бейджем наезжало на «−1 услуга» —
     nowrap выталкивал строку из колонки. Переносим, бейдж уходит целиком. */
  white-space:normal;flex-wrap:wrap;line-height:1.3;min-width:0}
.espaybox .po b::after{flex:none}
.espaybox .po small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.espaybox .po>span{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.espaybox .po[disabled]{cursor:not-allowed;background:#FCFAF6}
.espaybox .po[disabled] b,.espaybox .po[disabled]>span{color:var(--faint)}
/* Сборная оплата (14.10): рекомендованный способ, поле суммы у денежной части */
.espaybox .po.rec:not(.on){border-color:var(--gold)}
.espaybox .po.rec b::after{content:'fits now';font-size:10px;font-weight:700;
  color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:1px 7px}
.espaybox .po .po-r{display:flex;align-items:center;gap:5px;font-size:12.5px;
  font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.espaybox .po-sum{width:64px;padding:3px 6px;border:1px solid var(--line);
  border-radius:7px;font:inherit;font-size:12.5px;text-align:right;background:var(--panel);
  color:var(--ink)}
.espaybox .po-sum:focus{outline:none;border-color:var(--ink)}
#espay-итог{font-variant-numeric:tabular-nums}
.espaybox .ptag{background:var(--cream);color:var(--brand);font-size:10.5px;font-weight:700;
  border-radius:6px;padding:1px 6px}
.espaybox .dnote{font-size:11.5px;color:var(--muted)}
.espaybox .dark{box-sizing:border-box;cursor:pointer;height:32px;padding:0 14px;
  border-radius:9px;background:var(--brand-2);color:var(--panel);font-size:12.5px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:0;
  font-family:inherit}
.espaybox .dark:hover{background:var(--brand)}
.espaybox .x{cursor:pointer;border:0;background:transparent;font-size:16px;
  color:var(--muted);font-family:inherit}
.esnz .esdcell.open{z-index:6;box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--ink)}
.esnz [hidden]{display:none !important}
/* Пока открыта новая запись, левая панель CRM скрыта: экран её не предусматривает. */
body.esnz-on aside.nav{display:none}

/* ── МЕНЮ СВОБОДНОГО ВРЕМЕНИ — эталон 05-slot-menu.html ─────────────────────
   ⛔ ТЗ ч.A. Подсветка клетки под курсором и окошко 268 px рядом с ней.
   ⚠️ Рамка подсветки по ТЗ — 1.5 px --brand (в эталоне стояла 1 px --line;
   следую ТЗ, оно писалось позже и осознанно). */
.slotsel{position:absolute;left:3px;right:3px;top:calc(var(--row)*var(--s) + 1px);
  height:calc(var(--row) - 1px);background:var(--soft);border-radius:8px;
  box-shadow:inset 0 0 0 1.5px var(--brand);padding:0 7px;display:flex;
  align-items:center;font-size:10.5px;font-weight:700;color:var(--brand);
  pointer-events:none;font-variant-numeric:tabular-nums;z-index:4;pointer-events:none}
.esslotpop{position:fixed;z-index:70;width:268px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow)}
.pophd{display:flex;gap:5px;align-items:baseline;padding:6px 8px 7px;font-size:12.5px;
  font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);margin-bottom:4px;
  font-variant-numeric:tabular-nums}
.pophd b{font-weight:800}
.pophd span{color:var(--faint)}
.poprow{box-sizing:border-box;width:100%;display:flex;gap:10px;align-items:center;
  padding:7px 8px;border:0;background:transparent;border-radius:9px;cursor:pointer;
  font:inherit;text-align:left}
.poprow:hover{background:var(--soft)}
.ptx{display:flex;flex-direction:column;gap:1px;min-width:0}
.ptx b{font-size:12.5px;font-weight:700;color:var(--ink)}
.ptx small{font-size:11px;color:var(--muted)}
.esslotpop-kto{margin:0 4px 6px;padding:6px 9px;border-radius:9px;background:var(--cream);
  font-size:12px}
/* Служебный блок: готовые причины и выбор, на кого закрыть. */
.esblchips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 8px}
.esblchips .chip{cursor:pointer;border:1px solid #E3D9C6;background:#fff}
.esblchips .chip:hover{background:#FAF3E0}
.esblwho{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.esblwho label{display:flex;gap:8px;align-items:center;font-size:13px}
.esblman{display:flex;gap:8px;align-items:center;padding:5px 0;
  border-bottom:1px solid var(--line)}
.esblman b{font-size:13.5px}
.esslot-kto{margin-bottom:10px;padding:8px 11px;border-radius:10px;background:#FAF3E0;
  border:1px solid #E3D9C6;font-size:13px}
/* ══ КАРТОЧКА ЗАПИСИ В ТРИ КОЛОНКИ — копия Altegio (Тарик 03.10) ═══════════
   Слева «что и когда», посередине деньги и услуги, справа клиент. На узком
   экране колонки встают друг под друга тем же порядком. */
.esvwrap{padding:14px 18px;overflow:auto;height:calc(100% - 64px)}
.esv3{display:grid;grid-template-columns:288px minmax(360px,1fr) 300px;gap:14px;
  align-items:start}
@media(max-width:1200px){.esv3{grid-template-columns:1fr}}
.esv3col{display:flex;flex-direction:column;gap:10px;min-width:0}
.esv3card{border:1px solid #EFEAE0;border-radius:12px;padding:11px 12px;background:#FCFAF6;
  display:flex;flex-direction:column;gap:9px}
.esv3t{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#8A8DA0;
  margin-top:2px}
.esvmaster{display:flex;align-items:center;gap:9px}
.esvmn{display:flex;flex-direction:column;gap:0;min-width:0;flex:1}
.esvmn>b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esvav{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#E6DFD2;
  color:#5c5750;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;text-transform:uppercase}
.esvav.big{width:40px;height:40px;flex-basis:40px;font-size:16px}
.esvrow{display:flex;align-items:flex-start;gap:9px}
.esvrow>div{display:flex;flex-direction:column;min-width:0}
.esvrow b{font-size:13px}
.esvic{width:22px;flex:0 0 22px;text-align:center;opacity:.6;font-size:13px}
.esvedit{align-self:flex-start;border:0;background:transparent;color:#7a7266;
  font:inherit;font-size:12.5px;cursor:pointer;padding:2px 0}
.esvedit:hover{color:#2B3134;text-decoration:underline}
.esvfields{gap:7px}
.esvchk{display:flex;gap:7px;align-items:center}
.esv3card textarea{width:100%;border:1px solid #E1E6ED;border-radius:9px;padding:8px 10px;
  font:inherit;font-size:13px;resize:vertical}
/* Лента состояний — как у них: четыре кнопки в ряд, выбранная тёмная. */
.esvst{display:flex;flex-wrap:wrap;gap:6px}
.esvst button{border:1px solid #E1E6ED;background:#fff;border-radius:999px;
  padding:7px 13px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.esvst button:hover{background:#F6F2E9}
.esvst button.on{background:#2B3134;border-color:#2B3134;color:#fff;font-weight:600}
.esvst2{display:flex;flex-wrap:wrap;gap:5px}
.esvst2 button{border:1px solid #EFEAE0;background:transparent;border-radius:8px;
  padding:4px 9px;font:inherit;font-size:11.5px;color:#8A8DA0;cursor:pointer}
.esvst2 button.on{background:#EFEAE0;color:#2B3134;font-weight:600}
.esvserv{gap:7px}
.esvservline{display:flex;align-items:baseline;gap:10px}
.esvservline>b{font-size:14.5px;flex:1;min-width:0}
.esvprice{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.esvtopay{display:flex;align-items:baseline;gap:10px;padding:9px 12px;border-radius:11px;
  background:#FAF3E0;border:1px solid #E3D9C6}
.esvtopay>b{font-size:18px;font-variant-numeric:tabular-nums}
.esvfind{width:100%;padding:9px 11px;border:1px solid #E1E6ED;border-radius:10px;
  font:inherit;font-size:13px}
.esvtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px}
.esvtile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  border:1px solid #EFEAE0;border-radius:11px;padding:9px 11px;background:#fff;
  cursor:pointer;font:inherit}
.esvtile:hover{background:#FAF7F1;border-color:#E3D9C6}
.esvtile.on{border-color:#C2A34A;background:#FAF3E0}
.esvtile .nm{font-size:12.5px;font-weight:600;line-height:1.3}
.esvtile .pr{font-size:11.5px;color:#8A8DA0;font-variant-numeric:tabular-nums}
.esvtiles2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.esvtiles2.four{grid-template-columns:1fr 1fr}
.esvtiles2 button{display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px solid #EFEAE0;border-radius:11px;padding:11px 7px;background:#fff;
  cursor:pointer;font:inherit;font-size:11.5px;text-align:center;line-height:1.25}
.esvtiles2 button:hover{background:#FAF7F1;border-color:#E3D9C6}
.esvtiles2 button>b{font-size:15px;font-weight:400;opacity:.65}
.esvclient{display:flex;align-items:center;gap:9px;border:1px solid #EFEAE0;
  border-radius:12px;padding:10px 12px;background:#FCFAF6}
.esvwa{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  border:1px solid #CFE7D3;background:#F2FAF3;color:#2E5339;border-radius:10px;
  padding:7px 12px;font-size:12.5px;font-weight:600;text-decoration:none}
.esvwa:hover{background:#E6F4E8}
.esvguest{display:flex;gap:7px;margin-top:6px}
.esvguest input{flex:1;min-width:0;padding:7px 9px;border:1px solid #E1E6ED;
  border-radius:9px;font:inherit;font-size:12.5px}
.esvstat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.esvstat>div{display:flex;flex-direction:column;gap:1px;border:1px solid #EFEAE0;
  border-radius:10px;padding:7px 10px;background:#FCFAF6}
.esvstat b{font-size:14px;font-variant-numeric:tabular-nums}
/* «Сохранить изменения» — на виду снизу, как у них, а не в середине карточки. */
/* Слой поверх карточки визита: переход открывается НАД ней и, закрывшись,
   возвращает человека туда же, где он остановился. z-index выше шторки (120)
   и выше окошка слота (70) — иначе «поверх» оказалось бы под. */
.esoverbg{position:fixed;inset:0;z-index:130;background:rgba(16,24,40,.34)}
.esover{position:fixed;z-index:131;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(760px,calc(100vw - 48px));max-height:min(80vh,760px);
  display:flex;flex-direction:column;
  background:var(--panel);border-radius:16px;overflow:hidden;
  box-shadow:0 26px 60px -22px rgba(16,24,40,.45)}
.esoverb{padding:14px 18px;overflow:auto}
/* ⛔ Тарик 16.10: поверх-окна (.esover, .espaybox группового) были полуголыми —
   сегменты во всю ширину, кнопки влево. Одеваем общими правилами. */
.espaybox .seg{display:grid;grid-template-columns:repeat(2,1fr);background:var(--cream);
  border-radius:10px;padding:3px;gap:2px}
.espaybox .seg.three{grid-template-columns:repeat(3,1fr)}
.espaybox .seg.four{grid-template-columns:repeat(4,1fr)}
.espaybox .seg button{white-space:nowrap;cursor:pointer;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;
  font-weight:600;color:var(--brand);background:transparent;border:0;font-family:inherit}
.espaybox .seg button.on{background:var(--panel);color:var(--ink);
  box-shadow:0 1px 2px rgba(43,36,30,.05)}
.espaybox .fld{display:flex;flex-direction:column;margin-top:2px}
.espaybox .fld .lbl{font-size:11.5px;color:var(--muted);margin-bottom:4px;font-weight:600}
.espaybox select.inp{appearance:none;-webkit-appearance:none;height:32px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  padding:0 10px;font:inherit;font-size:12.5px;color:var(--ink);width:100%}
.espaybox .dbal{display:flex;gap:18px;background:var(--soft);border-radius:10px;
  padding:9px 12px}
.espaybox .dbal small{display:block;font-size:11px;color:var(--muted)}
.espaybox .dbal b{font-size:13.5px}
/* ⛔ Тарик 16.10 (п.4): «Правка операции — не в нашем стиле». Поля .fld/.inp/.dark
   были одеты только под .esnz; поверх-окна (.esover) ходили голыми. Одеваем. */
.esover .fld{display:flex;flex-direction:column;margin-top:8px}
.esover .lbl{font-size:11.5px;color:var(--muted);margin-bottom:4px;font-weight:600}
.esover .inp{width:100%;height:32px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);padding:0 10px;font:inherit;font-size:12.5px;color:var(--ink);
  box-sizing:border-box}
.esover .inp:focus{outline:none;border-color:var(--ink)}
.esover .note{font-size:12px;color:var(--muted);line-height:1.45}
.esover .dark{box-sizing:border-box;cursor:pointer;height:34px;padding:0 16px;
  border-radius:9px;background:var(--brand-2);color:var(--panel);font-size:12.5px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  border:0;font-family:inherit;width:100%}
.esover .dark:hover{background:var(--brand)}
.esover .segbar{display:flex;gap:6px;flex-wrap:wrap}
.esovrow{display:flex;flex-direction:column;gap:1px;padding:8px 11px;
  border:1px solid #EFEAE0;border-radius:10px;background:#FCFAF6;margin-bottom:6px}
.esovgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.esovgrid .esovrow{margin-bottom:0}
.esovermsgs{display:flex;flex-direction:column;gap:6px}
@media(max-width:768px){.esover{width:100vw;max-height:100vh;top:0;left:0;
  transform:none;border-radius:0}}
/* Вкладки и ид визита живут в шапке: Тарик — «в это окно должна влезть вся
   рабочая зона визита», и строка «3 октября, 120 мин, визит №2» там лишняя,
   она уже написана в левой карточке. */
.esvtabs{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.esvuid{font-size:11px;color:#a39b8e;letter-spacing:.03em}
.esvtopay.done{background:#F2FAF3;border-color:#CFE7D3}
.esvsave{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;
  margin-top:16px;padding:11px 0 2px;background:linear-gradient(180deg,
  rgba(252,250,246,0) 0%, var(--panel) 38%)}
/* ⛔ Андрей 03.10, снимок #3871: «Глаз дергается, когда такое вижу».
   Замер на 430×932: полоса 158 пикселей высотой, разделы разъехались в ЧЕТЫРЕ
   рваные строки (меню 180×146), а кнопка «Назад» лежала ПОВЕРХ надписи PRAMAS
   (navback 8..38, wm 12..75) — absolute внутри узкого .logo их наложил.
   ★ Собираем ОДНУ строку: «назад» — имя — разделы — администрирование.
   Своей прокрутки меню не заводим: полоса aside.nav уже ездит вбок, вложенный
   скроллер внутри скроллера пальцем не управляется. */
/* ⛔ 06.10 (сверка Design №3): было max-width:1100px — рейл ложился в строку, пока
   сама панель оставалась вертикальной колонкой 238 px, и разделы уезжали под сетку
   (замер Design: x до 349 при панели 238).
   ⛔ И сразу поправка: сузив до max-width:768px, я выбил телефон В АЛЬБОМЕ — 812×375
   шире 768, и правило до него не доставало. Условие то же, что у .navmin-btn: узкий
   по ширине ИЛИ низкий по высоте. Окно 924×800 не попадает ни туда, ни туда. */
@media(max-width:768px),(max-height:520px) and (max-width:1100px){
  .nav-jour .escal,.nav-jour .razdel,.nav-jour .user{display:none}
  .nav-jour .logo.jour{display:flex;flex-direction:row;align-items:center;
    gap:8px;padding:2px 4px;flex:none}
  .nav-jour .navback{position:static;flex:none;width:auto;min-height:34px;
    padding:0 11px;display:inline-flex;align-items:center;gap:6px}
  .nav-jour .navback .nbt{display:inline;font-size:12.5px;font-weight:600}
  .nav-jour .logo.jour .wm{white-space:nowrap}
  .esjour-menu{flex-direction:row;flex-wrap:nowrap;gap:4px;min-width:0;flex:none}
  .esjour-menu a{flex:none;white-space:nowrap}
  /* В строку папки не сворачиваются: пункты стоят подряд, как раньше. */
  .esjour-menu .esm-fhd{display:none}
  .esjour-menu .esm-fold,.esjour-menu .esm-fold .esm-fbody{display:contents}
  .esjour-menu .esm-fbody a{padding-left:10px}
  .nav-jour .admin{flex:none;white-space:nowrap;width:auto;padding:7px 11px}
  /* Ряд действий карточки визита прилипает к низу: ниже него ещё состав и таблица
     прошлых визитов, и на телефоне кнопка терялась в середине длинной страницы. */
  .esv-act{position:sticky;bottom:0;z-index:6;background:var(--panel);
    padding:10px 0;margin-top:4px;border-top:1px solid var(--line)}
}
/* ⛔ 02.10, Андрей: «пересмотри верстку шапки, чтобы органично вписать достаточно
   существенное окно календаря». Шапка стала двумя колонками: месяц слева, управление
   справа. На узком экране колонки складываются в одну — календарь при этом не
   растягивается, а остаётся своей ширины: растянутый месяц читается хуже сжатого. */
/* Клетки крупнее, чем в боковом календаре раздела «Расписание»: там он служебный,
   здесь — главный способ выбрать день. */
.escal{flex:0 0 288px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);padding:12px 14px}
.escal .mh b{font-size:14px}
.escal .mh button{width:26px;height:26px;font-size:13px}
.escal .wd span{font-size:11px;padding:3px 0}
.escal .dg button{height:34px;font-size:13px}
.escal .dg button.tod{box-shadow:inset 0 0 0 2px var(--green);font-weight:700}
.escalf{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.6}
.escalf .k{display:inline-block;width:9px;height:9px;border-radius:3px;
  vertical-align:-1px;margin-right:3px}
.escalf .k.sel{background:var(--brand)}
.escalf .k.tod{box-shadow:inset 0 0 0 2px var(--green)}
.esbar1, .esbar2{flex-wrap:wrap;row-gap:8px}
.esbar2{padding-top:0;margin-top:-4px}
.esctl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.esctl > span{white-space:nowrap}
.esctl select, .esbar1 input[type="date"]{padding:6px 8px;border:1px solid var(--line);
  border-radius:9px;font-size:13px;color:var(--ink);background:var(--panel)}
/* Подписи «с» и «по» у полей периода: видны на экране, а не только в подсказке. */
.esdates{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.esdates input{margin:0}
/* Кнопки в строке корзины: промежуток задаёт раскладка, а не пробел в шаблоне
   (Андрей 01.10: «слиплись кнопки»). Перенос вниз разрешён — на узком экране
   кнопки встанут друг под друга, а не налезут одна на другую. */
.wvacts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* Дерево семьи сегментов (Андрей 01.10) */
.segtree{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel);margin-bottom:16px}
.segtrow{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;
  border-top:1px solid var(--line)}
.segtrow:first-child{border-top:none}
.segtrow:hover{background:var(--soft)}
.segtrow .t{flex:1;font-size:14px}
.segtrow .h{font-size:12px;color:var(--muted);margin-top:2px}
.segtrow .n{font-size:18px;font-weight:800;min-width:56px;text-align:right;
  font-variant-numeric:tabular-nums}
/* Три состояния Ритма (Андрей 02.10). Карточки крупнее плиток зон нарочно:
   сначала «сколько в порядке и сколько теряем», потом «насколько». */
.rhstates{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
/* ⚠️ 03.10, по снимку Андрея: плитки обрезало справа — «Возможно отклоня…».
   Причина не в ширине плитки, а в том, что элемент flex НЕ СЖИМАЕТСЯ УЖЕ своего
   содержимого, пока ему не сказать min-width:0. Подпись «Возможно отклоняется»
   задавала минимум около 200 пикселей, две такие плитки не влезали в 375, и ряд
   вылезал за экран. Это классическая ловушка flex, и я в неё попал. */
.rhstate{flex:1 1 160px;min-width:0;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;background:var(--panel)}
.rhstate .n{font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.rhstate .l{font-size:14px;font-weight:700;margin-top:6px;overflow-wrap:anywhere}
.rhstate .h{font-size:12px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.rhstate.green .n{color:var(--green)}
.rhstate.coral .n{color:var(--coral,#e07a5f)}
.rhstate.red .n{color:var(--red)}
.rhstate.grey .n{color:var(--muted)}
.rhstate.clickable{cursor:pointer}
.rhstate.clickable:hover{border-color:var(--brand)}
.rhstate .n.door{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px;text-decoration-color:rgba(0,0,0,.18)}
.segtrow.head{background:var(--soft);padding:13px 12px}
.segtrow.head .n{font-size:22px}
/* ⛔ 02.10, Андрей: «Сегмент все ОК я бы переместил наверх где идет подсчет общего
   числа людей». Он стоит сразу под итогом семьи и нарочно спокойный: это строка «тут
   делать нечего», а не повод к действию — ради этого её и перенесли. */
.segtrow.itog{background:var(--soft);border-top-color:transparent;padding-top:0}
.segtrow.itog .t{color:var(--muted)}
.segtrow.itog .n{color:var(--green)}
.segtrow.sum{cursor:default;background:var(--cream)}
.segtrow.sum:hover{background:var(--cream)}
.segtrow.sum.ok .t{color:var(--green)}
.segtrow.sum.bad .t{color:var(--red);font-weight:700}
.segtrow.cross{opacity:.92}
.segtrow.miss{cursor:default;opacity:.7}
.segtrow.miss:hover{background:transparent}
/* ── ЛИНИИ СЕТКИ ─────────────────────────────────────────────────────────────
   Получас — едва заметная черта, час — чуть виднее. Больше никаких линий: всё, что
   человеку нужно от сетки, это понимать, где час. */
/* Ось времени отделяется от сетки заметнее, чем колонки друг от друга: в Altegio
   это первая линия, которую видит глаз, и она держит всю таблицу слева. */

/* ── БЛОК ЦЕЛЬНЫЙ, А НЕ ИЗ КВАДРАТИКОВ (Тарик 03.10) ─────────────────────────
   «Если блок стоит часовой, пусть он без разделения блокирует час». Внутренних
   границ у блока нет вовсе; рамка и скругление — только по его краям. Час выглядит
   часом, а закрытое время с 8 до 14 — одним блоком, а не двенадцатью клетками. */
/* Связка дня: визиты одной карточки в один день подсвечиваются вместе при наведении
   (Андрей 30.09: «их нужно связать, при наведении мышкой на один из них подсвечивать
   как связанные»). Подсветка — рамкой и фоном, а не цветом текста: цвет текста уже
   занят состоянием визита, и два смысла в одном признаке читаются как один. */
tr.svyazon>td{background:#FAF3E0}
tr.svyazon>td:first-child{box-shadow:inset 3px 0 0 #C2A34A}
.chip.svyaz{background:#F3E8CC;border:1px solid #DDC98E;color:#6b5a2a}
/* Служебный блок — не визит и выглядеть должен иначе: штриховка, а не карточка. */
/* ⛔ Тарик 03.10: «в идеале весь рабочий день должен умещаться в один экран,
   с 8 утра до 9 вечера — как в Altegio, не нужно ничего скролить, чтобы посмотреть
   конец дня». Высота клетки больше не константа: её считает esПодогнатьСетку()
   из НАСТОЯЩЕГО свободного места под шапкой. Константа не могла этого знать —
   на большом мониторе она оставляла пустоту, на ноутбуке прятала вечер. */
.esmlab{position:absolute;left:3px;top:7px;font-size:11px;white-space:nowrap;
  pointer-events:none;z-index:1}

.wvpresets{margin:0 0 14px}
.wvpresets>summary{cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:7px 13px;list-style:none}
.wvpresets>summary::-webkit-details-marker{display:none}
.wvpresets>summary::before{content:"▸";color:#8b8377}
.wvpresets[open]>summary::before{content:"▾"}
.wvpresets>summary:hover{border-color:#c9bfae}
.wvpresets .wvgrid{margin-top:12px}
.wvhist{margin-top:6px}
.wvhist summary{cursor:pointer;font-size:12px;color:#8b8377;padding:6px 0}
.wvhist .wv{margin-top:8px}

.wvown{margin-top:6px}
.wvownh{font-size:10.5px;color:#8b6f3f;margin-bottom:3px}
.wvown textarea{width:100%;font:inherit;font-size:12px;padding:6px 8px;border-radius:7px;
  border:1px solid #ded6c8;background:#fffdf9;resize:vertical}

.chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.chip{border:1px solid #e3ddd2;background:#fff;border-radius:20px;padding:4px 12px;
  font-size:12px;cursor:pointer;color:#6b6459}
.chip.on{background:#2b241e;color:#fff;border-color:#2b241e}
.chips .cust{font-size:12px;color:#8b8377;display:flex;gap:5px;align-items:center;margin-left:6px}
.chips input[type=date]{font:inherit;font-size:12px;padding:3px 6px;border-radius:7px;
  border:1px solid #e3ddd2}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;
  margin-bottom:14px}
.kpi{background:#faf8f4;border-radius:10px;padding:10px;font-size:11px;color:#8b8377;
  display:flex;flex-direction:column;gap:3px}
.kpi span{font-size:20px;font-weight:300;color:#2b241e;line-height:1}
.stx{font-size:11.5px;color:#6b6459;max-width:240px}

.numz{text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.4px}
.txrow td{padding-top:0;border-bottom:1px solid #f3efe8}
.txrow summary{cursor:pointer;font-size:11.5px;color:#8b8377}
.stbody{white-space:pre-wrap;font-size:12px;background:#faf8f4;border-radius:8px;
  padding:9px 11px;margin-top:6px;line-height:1.5}
.warn{background:#fdf3e7;border-radius:9px;padding:9px 12px;font-size:12px;
  color:#8b5a1f;margin-bottom:12px}
/* ★ СВОДКА ДИАЛОГА (Тарик 27.09: «некрасивые ссылки “обновить”/“развернуть”,
   улучши UI»). Было: подчёркнутые ссылки, прижатые float'ом, и четыре своих цвета
   мимо темы (#FBF7F0, #F4EDE1, #8A7A5F, #6B6154). Стало: ряд на flex, действия —
   те же капсулы, что и кнопки в шапке карточки, цвета только из переменных. */
.prehist{margin:0 0 8px;border:1px solid var(--line);background:var(--panel);
  border-radius:14px;overflow:hidden;flex:none}
.prehist .ph_h{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  padding:8px 10px 8px 12px;background:var(--soft);font-weight:700;
  cursor:pointer;user-select:none}
.prehist .ph_h span{font-weight:400;color:var(--faint)}
.prehist .ph_t{font-weight:700;font-size:11px;color:#6E6156;border:1px solid var(--line);
  background:var(--panel);border-radius:999px;padding:3px 10px;cursor:pointer;
  white-space:nowrap;text-decoration:none;flex:none}
.prehist .ph_t:first-of-type{margin-left:auto}
.prehist .ph_t:hover{border-color:#B9A88F;background:var(--soft)}
.prehist .ph_b{max-height:170px;overflow:auto;padding:9px 12px;font-size:12.5px;
  line-height:1.6;color:var(--ink)}
.prehist .ph_b div{padding:1px 0}
.prehist.closed .ph_b{display:none}
.msgvid video{max-width:280px;max-height:340px;border-radius:11px;display:block;margin-top:4px}

/* ── мобильная версия (Тарик 11.09): CRM с телефона, вертикально ──────────────
   Ничего не перестраиваем — та же разметка, другие правила при ширине ≤768px:
   сайдбар становится верхней лентой, в «Диалогах» видно ОДНО из двух (список
   или переписку, назад — кнопка ‹), карточка-шторка на весь экран. */
.cldimg{max-width:240px;max-height:240px;border-radius:10px;display:block;margin-top:6px}
/* Ритм — теми же деталями, что весь интерфейс: форма .chip, плитки .kpi,
   цвет только точкой. Четыре ступени тревоги (Тарик 26.09): зелёный — идёт по
   своему ритму, жёлтый — в пределах погрешности, оранжевый — сломался, связаться,
   красный — теряем. Серый — ритма нет и тревожить не о чем. */
.rhchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  border-radius:999px;padding:4px 10px;margin-top:6px;background:var(--soft);
  color:#6E6156;border:1px solid var(--line);max-width:100%}
.rhchip i{width:7px;height:7px;border-radius:50%;flex:none}
.rhchip u{text-decoration:none;font-weight:600;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Карточка визита — узкая колонка, таблетка в неё не влезала и резала текст
   (Тарик 26.09). Блок со скруглением 10, как у соседних вкладок «Статистика»,
   «Журнал», «История визитов». Главное — ДАТА и насколько она от сегодня;
   состояние ритма ушло во вторую строку, оно менее важно. */
/* «Касаний после расчётной даты» (Тарик 26.09). Красный ноль — это не про клиента,
   это про нас: мы его не позвали. Три и больше без ответа — серым: исчерпано,
   больше не трогаем. Рассылки в счёт не идут и стоят отдельной цифрой в подсказке. */
/* Сегментация клиентской базы (Тарик 26.09). Плитки — те же .kpi, что на
   дашборде; порядок задаёт сервер по частоте обращений. */
/* ── Экскурсия по новшествам (Тарик 26.09) ─────────────────────────────────
   Подсветка — не рисунок поверх, а дыра в затемнении: огромная тень вокруг
   рамки гасит всё остальное, а сам элемент остаётся живым и настоящим. */
/* Окно «кто за цифрой» (Тарик 26.09): дашборд не просто показывает число,
   а даёт провалиться в конкретный список. */
.mdrill{position:fixed;inset:0;z-index:75;background:rgba(30,25,21,.45);
  display:flex;align-items:center;justify-content:center;padding:24px}
.mdrillBox{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);width:min(1080px,100%);max-height:88vh;display:flex;
  flex-direction:column;overflow:hidden}
.mdrillHead{display:flex;align-items:center;gap:10px;padding:15px 18px 12px;
  border-bottom:1px solid var(--line)}
.mdrillHead b{font-size:16px}
.mdrillHead .x{margin-left:auto;border:0;background:none;font-size:20px;cursor:pointer;
  color:var(--muted);line-height:1}
.mdrillBody{overflow:auto;padding:0 18px 16px}
.mnum{cursor:pointer;border-bottom:1px dashed var(--faint)}
.mnum:hover{color:var(--brand);border-bottom-color:var(--brand)}
.tourBtn{position:fixed;right:18px;bottom:18px;z-index:70;border:1px solid var(--line);
  background:var(--panel);border-radius:999px;padding:9px 16px;font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;box-shadow:var(--shadow);color:var(--ink)}
.tourBtn:hover{border-color:#B9A88F}
.tourHole{position:fixed;z-index:80;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(30,25,21,.62),0 0 0 3px var(--gold);
  transition:all .28s cubic-bezier(.4,0,.2,1)}
.tourCard{position:fixed;z-index:81;width:min(400px,calc(100vw - 28px));background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:16px 18px 14px;box-shadow:var(--shadow);
  transition:all .28s cubic-bezier(.4,0,.2,1)}
.tourCard .step{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint)}
.tourCard h4{margin:6px 0 8px;font-size:16px;font-weight:800;line-height:1.25}
.tourCard p{font-size:13px;line-height:1.55;color:#5B5149;margin:0 0 8px}
.tourCard p b{color:var(--ink)}
.tourCard .why{background:var(--soft);border-radius:10px;padding:9px 11px;font-size:12.5px;
  line-height:1.5;color:#5B5149;margin:10px 0 0}
.tourCard .why i{font-style:normal;font-weight:800;color:var(--ink)}
.tourNav{display:flex;gap:8px;align-items:center;margin-top:13px}
.tourNav .sp{flex:1}
.tourNav button{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  padding:7px 14px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.tourNav button.acc{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.tourNav button.skip{border:0;background:none;color:var(--muted);padding-left:0}
.subtabs{display:flex;gap:6px;margin-bottom:14px}
.subtabs button{border:1px solid var(--line);background:var(--soft);border-radius:10px;
  padding:7px 14px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.subtabs button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.seggrp{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:18px 0 8px}
.seggrp:first-of-type{margin-top:0}
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* Пейджер дублей. Тем же языком, что и остальной интерфейс: та же линия, тот же
   радиус, тот же брендовый цвет на выбранном. Стоит и сверху, и снизу списка —
   человек листает десятками и не должен возвращаться наверх за кнопкой. */
/* Сводка черновика рассылки. Крупные числа — потому что это первое, что должно
   попасть в глаз; красная рамка у стоп-листа — потому что цена ошибки там другая. */
/* Кликабельная плитка ритма: подчёркнутое число и курсор — иначе непонятно,
   что за цифрой что-то есть. Плитка с нулём не кликается: пустая дверь раздражает. */
.kpi.clickable{cursor:pointer}
.kpi.clickable:hover{border-color:#B9A88F}
.kpi .val.door{text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:4px;text-decoration-color:#B9A88F}
/* ⛔ Андрей 03.10 (#3965) «Кошмар в интерфейсе»: строка состава абонемента уезжала
   за край и тянула вбок всю страницу. Выпадающий список с длинными названиями услуг
   не сжимается без min-width:0 — ровно та же ловушка, что утром в шапке карточки.
   Правило здесь, а не в разметке: раз оно повторяется, ему место в таблице стилей. */
/* Касса визита: инструменты — кнопки в ряд, переносятся на узком экране.
   ⛔ Поле скидки «уехало» (Андрей #4018) потому, что подпись «СКИДКА, %» переносилась
   на две строки и тянула своё поле вниз, ломая ряд. Подписи полей в этом ряду не
   переносим, а самим полям даём жить своей шириной. */
.esv-kassa{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:10px 0 4px;padding:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--soft)}
.esv-kassa.done{background:#EFF5EF;border-color:#C7DBC7}
.esv-kassa .btn.off{opacity:.45;cursor:not-allowed;background:var(--panel);
  color:var(--muted);border:1px solid var(--line)}
.esv-kassa .note{margin:0}
.esmoney{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.esmoney>.f{margin:0}
.esmoney label{white-space:nowrap}
.esmoney .f-sum{flex:1 1 150px;min-width:120px}
.esmoney .f-disc{flex:0 0 96px}
.esmoney .f-by{flex:1 1 170px;min-width:140px}
.abline{display:flex;gap:8px;margin-bottom:6px;align-items:center;flex-wrap:wrap}
.abline select{flex:1 1 180px;min-width:0}
.abline input{width:76px;flex:none}
@media(max-width:768px),(max-height:520px) and (max-width:1100px){
  .abline select{flex:1 1 100%}
}
/* ⛔ Андрей 03.10 (#3933): «Дашборд Follow ups — просто цифры. А мы уже везде сделали
   двери». Цифра фолоу-апа открывает тот же список, что и плитка Ритма, и помечается
   так же — пунктиром. Ноль дверью не делаем: пустая дверь раздражает. */
.furow .fn.door{text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:4px;text-decoration-color:#B9A88F;cursor:pointer}
.furow .fn.door:hover{color:var(--brand)}
.wvsum{background:var(--soft);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:12px}
.wvsumtop{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.wvsumn{font-size:30px;font-weight:800;letter-spacing:-.02em;color:#2E5339}
.wvsumn.dim{color:var(--muted)}
.wvsumsp{flex:1}
.btn.big{font-size:15px;font-weight:800;padding:12px 20px;border-radius:12px}
.wvstopbox{margin-top:12px;background:#FDF3F2;border:1px solid #E7C4C0;border-radius:11px;
  padding:11px 13px;font-size:13px;line-height:1.55}
.wvflag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;border-radius:6px;padding:2px 6px;margin-right:5px}
.wvflag.stop{background:#F3D6D2;color:#8C2F26}
.wvflag.warn{background:#F6E4C8;color:#8A5A12}
.wvflag.ok{background:#D9E7DC;color:#2E5339}
tr.wvstop td{background:#FDF6F5}
.dpgbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0}
.dpg{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  min-width:30px;height:30px;padding:0 8px;font:inherit;font-size:13px;cursor:pointer}
.dpg:hover:not(:disabled){border-color:#B9A88F}
.dpg.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.dpg:disabled{opacity:.4;cursor:default}
.dpg-sep{color:var(--muted);padding:0 2px}
.dpg-sp{flex:1}
.dpg-lbl{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.dpg-lbl select{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  height:30px;padding:0 6px;font:inherit;font-size:13px}
@media(max-width:1100px){.segs{grid-template-columns:repeat(2,1fr)}}
.segc{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:13px 15px 11px;box-shadow:var(--shadow);cursor:pointer}
.segc:hover{border-color:#B9A88F}
.segc .t{font-weight:700;font-size:13.5px;line-height:1.3}
.segc .n{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:6px 0 2px}
.segc .h{font-size:11.5px;color:var(--muted);line-height:1.4}
.segc .u{font-size:10.5px;color:var(--faint);margin-top:7px}
/* ⛔ 03.10, Тарик: в составе волны нужно видеть САМО последнее сообщение, а не
   только его дату. Текст режем по высоте, а не по символам: обрезанная на
   середине фраза хуже читается, чем три строки с многоточием от браузера. */
.wvlast{max-width:300px}
.wvlasth{font-size:10.5px;color:var(--faint);margin-bottom:2px}
.wvlastt{font-size:11.5px;line-height:1.35;max-height:4.1em;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
/* ⛔ 03.10: ответ НА РАССЫЛКУ важнее последней переписки — он и есть результат.
   Поэтому выделен цветом и показывается вместо неё, когда есть. */
.wvans{font-size:10.5px;color:#2e7d32;font-weight:700;margin-bottom:2px}
.wvanst{font-size:11.5px;line-height:1.35;color:var(--ink);max-height:5.5em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.wvbal{white-space:nowrap}
.wvbal b{font-size:15px}
/* ⛔ 02.10: «из них достижимы по WhatsApp» — приписка к числу, а не второе
   число в полный рост: главная цифра сегмента остаётся главной. */
.segc .wa{font-size:11px;color:var(--muted);font-weight:600;margin:-2px 0 4px}
.segtrow .n .wa{font-size:10.5px;color:var(--muted);font-weight:600;
  margin-top:1px;white-space:nowrap}
.segc.rare{opacity:.6}
.segth{cursor:pointer;user-select:none;white-space:nowrap}
.segth:hover{color:var(--ink)}
.segth i{font-style:normal;opacity:.35;margin-left:3px}
.segth.on i{opacity:1;color:var(--gold)}
.segbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.rhtouch{font-size:11px;font-weight:800;border-radius:6px;padding:1px 6px;flex:none;
  min-width:24px;text-align:center;border:1px solid var(--line);background:var(--panel);
  color:var(--muted)}
.rht0{background:#F8DED4;border-color:#E9C2B2;color:var(--red)}
.rht3{background:var(--soft);border-color:var(--line);color:var(--faint)}
.rhbox{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);
  border-radius:10px;background:var(--soft);padding:8px 10px;margin-top:10px;font-size:12px}
.rhbox i{width:7px;height:7px;border-radius:50%;flex:none;margin-top:5px}
.rhbox .tx{min-width:0}
.rhbox b{display:block;font-size:13px;font-weight:800;line-height:1.35}
.rhbox span{display:block;color:var(--muted);margin-top:2px;line-height:1.35}
.rhstrip{display:flex;align-items:center;gap:16px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:12px;
  box-shadow:var(--shadow);cursor:pointer;font-size:12.5px}
.rhstrip:hover{border-color:#B9A88F}
.rhstrip .t{font-weight:800;font-size:12.5px}
.rhstrip .p{display:flex;align-items:center;gap:6px;color:var(--muted)}
.rhstrip .p i{width:7px;height:7px;border-radius:50%;flex:none}
.rhstrip .p b{color:var(--ink);font-weight:800}
.rhstrip .go{margin-left:auto;color:var(--muted)}
.rhkpi .lbl{display:flex;align-items:center;gap:6px}
.rhkpi .lbl i{width:7px;height:7px;border-radius:50%;flex:none}
.rhwrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(max-width:1100px){.rhwrap{grid-template-columns:1fr}}
.rhsub{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:15px 0 3px;display:flex;align-items:center;gap:6px}
.rhsub:first-of-type{margin-top:2px}
.rhsub i{width:7px;height:7px;border-radius:50%;flex:none}
.rhsub b{margin-left:auto;font-weight:800;color:var(--ink)}
.rhrow{display:flex;align-items:center;gap:9px;padding:7px 2px;cursor:pointer;
  border-top:1px solid var(--line)}
.rhrow:hover{background:var(--soft)}
.rhrow .u{font-size:11px;color:var(--faint);width:72px;flex:none}
.rhrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.rhrow .d{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.cldfile{display:inline-block;margin:6px 6px 0 0;padding:5px 10px;border:1px solid var(--line);border-radius:8px;font-size:12px;text-decoration:none;color:inherit;background:var(--bg2, transparent)}
.cldfile:hover{border-color:var(--accent, #6A9E71)}
/* ⛔ 03.10, Андрей: «это жуть жуткая» — и это была жуть. Окно «Системы» на телефоне
   строится переносом разметки пункта меню в НОВЫЙ элемент вне aside.nav. Правила
   размера и цвета значков живут в «.nav a svg»; снаружи они не действуют, и каждый
   значок рисовался в свой натуральный размер чёрной заливкой — те самые кляксы.
   ★ Урок не про svg. Перенося разметку в другое место, я унёс её ВИД, но не правила,
   по которым она выглядит. Поэтому у окна теперь СВОИ правила, а не надежда на чужие.
   Заодно цель нажатия 44 пикселя по высоте — минимум из практик (WCAG 2.2 требует 24,
   рекомендация для пальца 44–48). */
#mobsysmenu{position:fixed;left:8px;width:256px;max-width:calc(100vw - 16px);z-index:120;
  background:#453A31;border-radius:14px;box-shadow:0 18px 44px -14px rgba(0,0,0,.55);
  padding:6px;display:flex;flex-direction:column;gap:2px}
#mobsysmenu a{display:flex;align-items:center;gap:10px;padding:0 12px;min-height:44px;
  color:#F4EEE9;text-decoration:none;font-weight:600;font-size:14px;border-radius:10px}
#mobsysmenu a:active{background:rgba(255,255,255,.12)}
#mobsysmenu svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linejoin:round}
#mobsysmenu .b{margin-left:auto;background:#C25B3F;color:#fff;border-radius:9px;
  padding:1px 7px;font-size:11px;font-weight:800}
#mobsysmenu .arr{display:none}
.mback{display:none;border:0;background:var(--soft);width:34px;height:34px;border-radius:10px;
  cursor:pointer;font-size:19px;line-height:1;color:var(--brand);flex:none}
/* ⛔ 03.10, Андрей: «меню в альбомной ориентации телефона забирает 238 пикселей из
   812». Ширина тут ни при чём: 812 — это «планшет» по любому порогу. Дело в ВЫСОТЕ:
   у лежащего телефона её 375, и боковая колонка во весь экран съедает треть ширины
   ради меню, которое в портрете само сворачивается в полосу.
   Поэтому правило по высоте, а не по ширине: экран ниже 520 — меню полосой сверху.
   Это и есть «учитывай ориентацию» из задачи: ориентация у телефона читается не по
   тому, что ширина мала, а по тому, что высоты нет. */
@media(max-height:520px) and (max-width:1100px){
  body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  /* ⚠️ nowrap обязателен: без него меню в альбоме сложилось в ДВА ряда и заняло
     105 пикселей из 375 по высоте — то есть вернуло ту же беду, от которой мы
     уходили, только по другой оси. Одна строка с прокруткой вбок. */
  aside.nav{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:2px;padding:4px 8px;
    overflow-x:auto;overflow-y:visible;position:relative;z-index:45}
  .logo{border:0;margin:0;padding:2px 10px 2px 4px;flex:none}
  .logo .wm{font-size:12px;letter-spacing:.18em}
  .logo .sub,.nav .grow,.status,.navgrp .sub{display:none}
  .nav a{flex:none;margin:0;padding:6px 10px;font-size:12.5px}
  .nav a svg{width:15px;height:15px}
  .navgrp{flex:none}
  .top{padding:6px 12px 4px;flex-wrap:wrap;row-gap:6px}
  .top h1{font-size:16px}
  /* Поиск с жёстким минимумом 230px выталкивал шапку воронки за экран на 137px.
     На коротком экране он ужимается и, если места нет, переносится строкой ниже. */
  .search{min-width:0;flex:1 1 180px}
  .content{padding:2px 12px 10px}
  /* В альбоме высота — главный дефицит: ужимаем всё вертикальное. */
  .kpi{padding:9px 11px}
  .mcard{padding:10px 12px;margin-bottom:8px}
}
/* ⛔ WCAG 2.2, критерий 2.5.8: цель нажатия не меньше 24×24 (для пальца советуют
   44, рекомендуют 48). Правило вынесено из «телефонного» блока НАРОЧНО: в альбоме
   телефон шире 768 пикселей, а палец у человека тот же самый.
   pointer:coarse ловит настоящий палец; ширина — узкое окно и мои замеры. */
/* ⛔ 03.10. Перенос имён НЕЛЬЗЯ держать в блоке max-width:768px: телефон в альбоме
   имеет ширину 812, блок туда не достаёт, и в альбоме имена снова резались
   (замер: span.nm до 243 пикселей скрытого хвоста). Условие ниже ловит ОБА
   положения телефона — узкое окно и низкое окно.
   Обрезанное имя — это потерянный смысл БЕЗ ВСЯКОГО ЗНАКА, что он потерян:
   человек читает «@places_bynorah ·» и не узнаёт, кто это. Перенос стоит одной
   лишней строки. Исключение одно и осознанное: .sn — это предпросмотр последнего
   сообщения в списке диалогов, он однострочный по замыслу, как в любом мессенджере. */
@media(max-width:768px),(max-height:520px) and (max-width:1100px){
  .sm{max-width:94%}
  .syschat{overflow:visible}
  /* Поле ввода делило строку с «📎» и «Отправить» — ему доставалось 223 пикселя,
     а кнопка «Отправить» уезжала за край (снимок Андрея #3877). Отдаём полю
     отдельную строку: кнопки уходят под него и помещаются целиком. */
  .syscomposer{flex-wrap:wrap}
  .syscomposer textarea,.syscomposer input{flex:1 1 100%;order:-1}
  .card .nm,.citem .nm,.rhrow .nm,.panel .nm{white-space:normal;overflow:visible;
    text-overflow:clip;overflow-wrap:anywhere;line-height:1.3}
  .panel .note,.rhsub{overflow-wrap:anywhere}
  /* ⛔ Шапка карточки: сетка «аватар | имя | кнопки», третья колонка auto —
     то есть по содержимому. На узкой шторке кнопки занимали 436 пикселей из 470,
     колонка имени сжималась В НОЛЬ (имя резалось на 118 пикселей), а сами кнопки
     выезжали за правый край на 46. Отдаём кнопкам отдельную строку: шапка выше
     на один ряд, зато видно, чья это карточка. */
  .dh{grid-template-columns:auto minmax(0,1fr);position:relative}
  .dhctl{grid-column:1/-1;flex-wrap:wrap;min-width:0}
  /* Крестик уводим из переноса в угол: без этого он один не влезал в строку
     (199+93+91+30 и три зазора = 437 при 434 доступных) и уезжал на второй ряд,
     раздувая шапку с 129 до 167 пикселей — при высоте окна 375 это почти
     половина экрана под одну шапку. В углу его и ищут. */
  .dh .x{position:absolute;top:10px;right:14px}
  .dh>.t{padding-right:34px}
  .dh .nm{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
}
@media(pointer:coarse),(max-width:1100px){
  .lnk,.feed-more,.crumbs a{min-height:24px;display:inline-flex;align-items:center}
  /* Поля ввода были высотой 22. Флажки и переключатели исключены нарочно:
     им min-height растянул бы саму коробочку. */
  input:not([type=checkbox]):not([type=radio]){min-height:24px}
  /* Сам флажок растягивать нельзя — растянется коробочка. Но нажимают-то строку
     целиком: текст рядом с флажком переключает его (проверил). Строке и даём рост.
     Замер был: флажок 13×13, строка 367×19 — по ширине с запасом, по высоте мало. */
  label:has(input[type=checkbox]),label:has(input[type=radio]){
    min-height:24px;display:inline-flex;align-items:center;gap:7px}
  .logo{min-height:24px;display:flex;flex-direction:column;justify-content:center}
  .mnum{min-height:24px;min-width:24px;display:inline-flex;align-items:center;
    justify-content:center}
}
@media(max-width:768px){
  body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  aside.nav{flex-direction:row;align-items:center;gap:2px;padding:6px 8px;overflow-x:auto;
    overflow-y:visible;position:relative;z-index:45}
  .logo{border:0;margin:0;padding:2px 10px 2px 4px;flex:none}
  .logo .wm{font-size:12px;letter-spacing:.18em}
  .logo .sub{display:none}
  .nav a{flex:none;margin:0;padding:8px 10px;font-size:12.5px}
  .nav a.on::before{left:8px;right:8px;top:auto;bottom:-6px;width:auto;height:3px;
    border-radius:3px 3px 0 0}
  .nav .grow{display:none}
  .status{display:none}
  .navgrp{flex:none}
  /* Встроенный список на телефоне не показываем вовсе: iOS Safari режет absolute и fixed
     внутри ленты с overflow. Вместо него toggleSys строит окно #mobsysmenu прямо в body. */
  .navgrp .sub{display:none}
  .top{padding:10px 12px 8px;flex-wrap:wrap;gap:8px}
  .top h1{font-size:17px}
  .content{padding:2px 10px 14px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .pop{left:12px;right:12px}
  /* iOS Safari приближает страницу при фокусе на поле мельче 16px */
  .search input,.composer textarea,.f input,.f select,.f textarea,.syscomposer input{font-size:16px}
  .syscomposer{gap:6px}
  .syscomposer input{min-width:0}
  .syscomposer .btn{flex:none;padding:9px 13px}
  .col{flex:0 0 84vw}
  .fstage{display:flex}
  .drawer{width:100vw;min-width:0}
  .fields{grid-template-columns:1fr;max-height:38vh}
  .chatgrid{grid-template-columns:1fr}
  .chatgrid .chatpane{display:none}
  body.mchat .chatgrid .chatpane{display:flex}
  body.mchat .chatgrid .chatlist{display:none}
  .mback{display:inline-flex;align-items:center;justify-content:center}
  .msg{max-width:88%}
  .cldimg{max-width:100%}
  .chathead{flex-wrap:wrap;row-gap:6px;padding:10px 12px}
  /* ⛔ 03.10, второй снимок Андрея: в списках Ритма строки обрезаны — «Heger —
     уехала в командировку из Д…», «Florencia — медицинская процедура…».
     ⚠️ ЭТО ДРУГАЯ ПОЛОМКА, ЧЕМ ПЕРВАЯ, и мой обход её не видел. Я искал элементы,
     которые ВЫЛЕЗАЮТ за правый край. А тут элемент аккуратно влез, но его
     СОДЕРЖИМОЕ обрезано внутри: белый текст в одну строку с многоточием. На
     широком экране это правильно, на телефоне — потеря смысла без всякого знака,
     что что-то потеряно. Обрезанное хуже вылезшего: вылезшее хотя бы видно.
     На узком экране строка переносится, а не режется. */
  /* Имя на карточке воронки обрезалось на ~19 пикселей. Колонка на телефоне 84%
     ширины экрана — место для второй строки есть, и лучше две строки, чем
     «@safaa.ghazal.coach · صفاء غ…». */
  /* Лента «Системы»: пузырь сообщения шире 78% экрана не помещался, и панель
     срезала 46 пикселей. На телефоне пузырю отдаём почти всю ширину. */
  .rhrow{align-items:flex-start}
  .rhrow .u{width:60px}
  /* ⛔ 03.10, Андрей: «таблицы 1854 пикселя при экране 375 — видно пятую часть
     колонок». Делать из каждой таблицы карточки — это выбирать по два-три главных
     поля в каждом разделе, а их пятнадцать, и выбор тут не мой.
     ★ ЧТО СДЕЛАЛ ВМЕСТО: ПЕРВАЯ КОЛОНКА ПРИЛИПАЕТ. Таблица по-прежнему ездит вбок,
     но имя (а это почти всегда первая колонка) остаётся на месте — видно, ЧЬЯ это
     строка, на любом сдвиге. Это снимает главную беду узкого экрана: не «мало
     колонок», а «непонятно, чья строка».
     Так же ужимаем плотность: на телефоне каждый лишний пиксель отступа — это
     минус полколонки. Решение моё, не Андрея: он просил карточки, и когда он
     назовёт главные поля по разделам, карточки я сделаю поверх этого. */
  table{font-size:12px}
  table th,table td{padding:6px 7px}
  table thead th:first-child,
  table tbody td:first-child{position:sticky;left:0;z-index:1;
    background:var(--panel);box-shadow:1px 0 0 var(--line)}
  table thead th:first-child{z-index:3}
  table tbody tr:hover td:first-child{background:var(--soft)}
}

/* ═════════ СПРАВОЧНИК · перенос 09-catalog.html ═════════
   Правила макета перенесены как есть; каждая обёрнута в .escat, потому что
   имена .panel .grid .tabs .top .av .tag .row .sec .note в этом файле уже
   заняты другими хозяевами. Значения не менялись. */
.escat{max-width:1240px;margin:0 auto;padding:16px 18px 40px;display:flex;flex-direction:column;gap:12px;
  font-size:12.5px;color:var(--ink)}
.escat .top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.escat .top .back{font-weight:600;color:var(--brand);text-decoration:none;cursor:pointer}
.escat .top .back:hover{color:var(--ink)}
.escat .top h1{margin:0;font-size:16px;font-weight:800}
.escat .tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-left:auto}
.escat .tabs button{all:unset;cursor:pointer;padding:8px 0;font-size:13px;font-weight:700;color:var(--muted);
  border-bottom:2.5px solid transparent;margin-bottom:-1px}
.escat .tabs button.on{color:var(--ink);border-color:var(--gold)}
.escat .rules{display:flex;flex-wrap:wrap;gap:6px}
.escat .rules span{background:var(--panel);border:1px solid var(--box-line);border-radius:999px;padding:4px 10px;
  font-size:11.5px;color:var(--brand);font-weight:600}
.escat .pane[hidden]{display:none}
.escat .panel{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);padding:14px;
  display:flex;flex-direction:column;gap:8px}
.escat .panel h2{margin:0;font-size:13.5px;font-weight:800}
.escat .panel .note{font-size:11.5px;color:var(--muted)}
.escat .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
.escat table{width:100%;border-collapse:collapse}
.escat th{text-align:left;font-size:11px;font-weight:600;color:var(--muted);padding:6px 8px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.escat td{padding:7px 8px;border-bottom:1px solid var(--box-line);vertical-align:top}
.escat tr:last-child td{border-bottom:0}
.escat td.num,.escat th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.escat td.off{color:var(--faint);text-align:right}
.escat td .who{font-size:11.5px;color:var(--muted);line-height:1.4}
.escat td b{font-weight:600}
.escat .m-hd{display:flex;align-items:center;gap:10px}
.escat .av{width:36px;height:36px;border-radius:999px;background:var(--cream);color:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.escat .m-hd b{display:block;font-size:13.5px;font-weight:700}
.escat .m-hd small{display:block;font-size:11.5px;color:var(--muted)}
.escat .tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;
  background:var(--cream);color:var(--brand);font-size:10.5px;font-weight:700;white-space:nowrap}
.escat .tag.red{color:var(--red)}
.escat .svl{display:flex;flex-direction:column;gap:6px}
.escat .svl .sec{font-size:11px;color:var(--muted);font-weight:600;margin-top:4px}
.escat .svl .row{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.escat .svl .row span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.escat .flt{display:flex;gap:6px;flex-wrap:wrap}
.escat .flt button{all:unset;cursor:pointer;height:28px;padding:0 10px;border-radius:999px;background:var(--panel);
  border:1px solid var(--box-line);font-size:12px;font-weight:600;color:var(--brand)}
.escat .flt button.on{background:var(--sel);color:var(--panel);border-color:var(--sel)}

/* ═════════ СЕТКА · добор правил из 01-grid.html (ТЗ §4.4–§4.6) ═════════ */
.esdcell.busy .by{font-size:10.5px;opacity:.85;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:13px}
.esdcell.busy.noshow{left:auto!important;right:2px;width:16px;padding:0;
  background:repeating-linear-gradient(135deg,var(--cream) 0 4px,var(--panel) 4px 8px)!important;
  color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--faint);z-index:4}
.esdcell.busy.noshow .in{display:none}
.esdcell.busy.noshow:hover{width:auto;left:3px!important;z-index:8}
.esdcell.busy.noshow:hover .in{display:flex;padding:2px 6px;opacity:.75}
.esdcell.busy.noshow:hover .cl b{text-decoration:line-through}
.esdcell.justnew{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--coral)}
.esdcell.blocked.rep .nm::after{content:" ⟳";color:var(--muted)}
.esdcell.blocked.user{cursor:pointer}
.esdcell.blocked.user:hover{filter:brightness(.97)}
.esdcell.blocked .tm,.esdcell.blocked .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eshover{position:absolute;left:3px;right:3px;z-index:3;background:rgba(43,36,30,.10);
  border-radius:8px;padding:0 7px;display:flex;align-items:center;font-size:10.5px;
  font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums;pointer-events:none}
.nschip{all:unset;cursor:pointer;white-space:nowrap;flex:none;height:28px;padding:0 10px;
  border-radius:999px;background:var(--cream);color:var(--red);font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;position:relative}
.nschip[hidden]{display:none}
.nslist{position:absolute;top:34px;left:0;z-index:30;width:300px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;
  display:flex;flex-direction:column;gap:2px;color:var(--ink);font-weight:500}
.nslist[hidden]{display:none}
.nslist a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:7px 8px;
  border-radius:9px;text-decoration:none;color:var(--ink);font-size:12.5px;cursor:pointer}
.nslist a:hover{background:var(--soft)}
.nslist a b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nslist a small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nslist .t{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}

/* ═══ ПРОСРОЧЕННЫЕ БРОНИ · пилюля в шапке дня (Тарик 10.10: «показать список») ═══ */
.phchip{background:var(--cream);color:var(--red)}
.phchip .phpast{margin-left:4px;padding:1px 6px;border-radius:999px;background:var(--red);
  color:#fff;font-size:10.5px;font-weight:700}
.phlist{width:390px;max-height:60vh;overflow:auto;gap:4px}
.phrow{border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--panel)}
.phrow.past{border-color:var(--red)}
.phrow a{grid-template-columns:48px minmax(0,1fr)}
.phrow .t{line-height:1.25;text-align:center}
.phact{display:flex;gap:4px;padding:0 8px 7px}
.phact a{display:block;cursor:pointer;flex:1;text-align:center;height:26px;line-height:26px;
  border-radius:8px;background:var(--soft);color:var(--ink);font-size:11.5px;font-weight:700;
  text-decoration:none;padding:0}
.phact a:hover{background:var(--cream)}
.phact a.del{color:var(--red)}
.phhd{display:flex;align-items:center;gap:8px;padding:4px 8px 6px;
  font-size:12px;color:var(--muted)}
.phhd b{font-size:12.5px;color:var(--ink)}
.phhd .x{margin-left:auto;cursor:pointer;width:20px;height:20px;line-height:20px;
  text-align:center;border-radius:6px;color:var(--muted)}
.phhd .x:hover{background:var(--soft);color:var(--ink)}
/* ⛔ 11.10: ряд «с — по» в окне смены. Списки наши, а не родные select:
   каждому нужна своя доля ширины, иначе кнопка жмётся к стрелке. */
.cs-times{display:flex;gap:6px;align-items:center}
.cs-times .selbtn{flex:1 1 0;min-width:0}
.cs-times .m{flex:none}
.cs-times .cs-x{flex:none}

/* ═════════ ОКНО «СЛУЖЕБНЫЙ БЛОК» · перенос openBlk из 01-grid.html (ТЗ §4.6) ═════════ */
.blkm{position:fixed;inset:0;z-index:80;background:rgba(43,36,30,.45);display:grid;
  place-items:center;padding:20px}
.blkm[hidden],.bk-days[hidden],.bk-till[hidden],.bk-ms[hidden],.bk-other[hidden],
.bk-err[hidden],.bk-del[hidden]{display:none}
.bk-box{width:440px;max-width:100%;max-height:90vh;overflow:auto;background:var(--panel);
  border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);padding:16px;
  display:flex;flex-direction:column;gap:12px;font-size:12.5px;color:var(--ink)}
.bk-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.bk-hd b{font-size:14px;font-weight:700}
.bk-hd small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.bk-x{all:unset;cursor:pointer;width:28px;height:28px;border-radius:8px;display:grid;
  place-items:center;color:var(--muted)}
.bk-x:hover{background:var(--soft)}
.bk-l{font-size:11.5px;color:var(--muted);margin-bottom:5px}
.bk-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ⛔ 08.10, Тарик: «список должен быть красивый». Своё поле выбора вместо нативного
   (системное окно <select> оформить нельзя): кнопка и попап в общем стиле. */
/* ══ Мини-окно «Диалоги отдела продаж» · макет 11-dialogs-mini (Д22, 09.10) ══
   Бронь ставится по переписке: окно висит поверх, ничего не сворачивает, и из него
   забирают PR-ID. Правый край не заходит на правую колонку записи — её левый край
   считает esДиалогиПосадка(), здесь только размеры и вид. */
.esdlg{position:fixed;bottom:16px;z-index:90;width:560px;height:460px;max-width:94vw;
  max-height:84vh;display:flex;flex-direction:column;gap:8px;padding:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(43,36,30,.06),0 28px 64px -22px rgba(43,36,30,.5),
    0 0 0 4px rgba(43,36,30,.04);
  animation:esdlgup .18s ease-out}
@keyframes esdlgup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.esdlg .dlhd{display:flex;align-items:center;gap:8px;flex:none}
.esdlg .dlhd b{font-size:13.5px;font-weight:800;white-space:nowrap}
.esdlg .dlhd .cnt{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.esdlg .dlhd .x{all:unset;cursor:pointer;margin-left:auto;width:28px;height:28px;
  display:grid;place-items:center;border-radius:9px;color:var(--muted);font-size:13px}
.esdlg .dlhd .x:hover{background:var(--soft)}

.esdlg .dlq{position:relative;flex:none}
.esdlg .dlq .inp{width:100%;box-sizing:border-box;height:32px;padding:0 30px 0 28px;
  background:var(--box-bg);border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:12.5px;color:var(--ink)}
.esdlg .dlq .ic{position:absolute;left:9px;top:50%;width:9px;height:9px;margin-top:-6px;
  border:1.5px solid var(--muted);border-radius:999px;pointer-events:none}
.esdlg .dlq .ic::after{content:"";position:absolute;right:-4px;bottom:-3px;width:5px;
  height:1.5px;background:var(--muted);transform:rotate(45deg)}
.esdlg .dlq .clr{all:unset;cursor:pointer;position:absolute;right:6px;top:50%;
  margin-top:-11px;width:22px;height:22px;display:grid;place-items:center;
  border-radius:7px;color:var(--muted);font-size:11px}
.esdlg .dlq .clr:hover{background:var(--soft)}

.esdlg .dlbody{flex:1;min-height:0;display:grid;grid-template-columns:220px minmax(0,1fr);
  gap:8px}
.esdlg .dllist{overflow:auto;display:flex;flex-direction:column;gap:2px;
  border-right:1px solid var(--box-line);padding-right:6px}

/* строка списка */
.esdlg .dlrow{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;
  align-items:flex-start;padding:8px;border-radius:10px;width:100%}
.esdlg .dlrow:hover{background:var(--soft)}
.esdlg .dlrow.on{background:var(--cream)}
.esdlg .dlav{position:relative;flex:none}
.esdlg .dlav .av{width:30px;height:30px;border-radius:999px;background:var(--soft);
  color:var(--brand);display:grid;place-items:center;font-size:11px;font-weight:800}
.esdlg .dlav.big .av{width:34px;height:34px;font-size:12px;background:var(--cream)}
.esdlg .dlav .ch{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;
  border-radius:999px;display:grid;place-items:center;font-size:8px;font-weight:800;
  font-style:normal;color:#fff;border:2px solid var(--panel)}
.esdlg .dlav .ch.wa{background:var(--green)}
.esdlg .dlav .ch.ig{background:var(--coral)}
.esdlg .dlrow.on .dlav .ch{border-color:var(--cream)}
.esdlg .dlrow .n{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.esdlg .dlrow .r1{display:flex;align-items:baseline;gap:6px;min-width:0}
.esdlg .dlrow .r1 b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1;min-width:0}
.esdlg .dlrow .r1 em{font-style:normal;font-size:10.5px;color:var(--muted);flex:none}
.esdlg .dlrow .r2{display:flex;align-items:center;gap:6px;min-width:0}
.esdlg code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  background:var(--soft);color:var(--brand);border-radius:6px;padding:1px 5px;flex:none}
.esdlg .dlrow .ph{font-size:10.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.esdlg .dlrow .pv{font-size:11.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* правая половина */
.esdlg .dlchat{position:relative;display:flex;flex-direction:column;gap:8px;min-height:0}
.esdlg .dlwho{display:flex;align-items:center;gap:8px;flex:none;padding-bottom:8px;
  border-bottom:1px solid var(--box-line)}
.esdlg .dlwho .back{display:none}
.esdlg .dlwho .who-n{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.esdlg .dlwho .who-n b{font-size:14px;font-weight:800;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.esdlg .dlwho .who-n small{display:flex;align-items:center;gap:6px;min-width:0}
.esdlg .dlwho .ph{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.esdlg .dlid{all:unset;box-sizing:border-box;cursor:pointer;flex:none;height:32px;
  padding:0 12px;border-radius:9px;background:var(--brand-2);color:var(--panel);
  font-size:12.5px;font-weight:700;display:inline-flex;align-items:center}
.esdlg .dlid:hover{background:var(--brand)}
/* Кнопки окна диалогов (17.10): одна форма на все — тёмная главная и светлая. */
/* Тарик 17.10 (картинка): «＋ Новая карточка» — в шапке окна перед ✕,
   «Взять в бронь» — в подвале переписки с подписью «В бронь · PR-ID». */
.esdlg .dlhd .dlnew{margin-left:auto}
.esdlg .dlhd .dlnew + .x{margin-left:0}
.esdlg .dlfoot{display:flex;align-items:center;gap:10px;flex:none;padding-top:8px;
  border-top:1px solid var(--box-line)}
.esdlg .dlfoot-l{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.esdlg .dlfoot-l small{font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.esdlg .dlfoot-l b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.esdlg .dlfoot .dlbtn{height:34px;padding:0 14px}
.esdlg .dlbtn{all:unset;box-sizing:border-box;cursor:pointer;height:32px;
  padding:0 12px;border-radius:9px;background:var(--brand-2);color:var(--panel);
  font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;
  justify-content:center;white-space:nowrap}
.esdlg .dlbtn:hover{background:var(--brand)}
.esdlg .dlbtn.ghost{background:var(--panel);color:var(--brand);
  border:1px solid var(--line)}
.esdlg .dlbtn.ghost:hover{background:var(--soft)}
.esdlg .dlbtn.sm{height:26px;padding:0 9px;font-size:11.5px}
.esdlg .dlform{display:flex;flex-direction:column;gap:8px;padding:4px 2px}
.esdlg .dlform-t{font-size:14px;font-weight:800}
.esdlg .dlform .dnote{font-size:11.5px;color:var(--muted);line-height:1.45}
.esdlg .dlform-r{display:flex;gap:6px}
.esdlg .dlform-r>*{flex:1}
.esdlg .dlform .inp{box-sizing:border-box;height:32px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);padding:0 10px;font:inherit;
  font-size:12.5px;color:var(--ink);width:100%}
.esdlg .dlform .inp:focus{outline:none;border-color:var(--ink)}
.esdlg .dlmore{padding:10px;text-align:center;font-size:11.5px;color:var(--muted)}

.esdlg .ch-log{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;
  gap:3px;background:var(--box-bg);border-radius:10px;padding:8px}
.esdlg .dlcnt{align-self:center;font-size:10.5px;color:var(--faint);margin-bottom:4px}
.esdlg .ch-day{align-self:center;font-size:10.5px;color:var(--muted);
  background:var(--panel);border:1px solid var(--box-line);border-radius:999px;
  padding:2px 10px;margin:6px 0 3px}
.esdlg .ch-who{font-size:10.5px;font-weight:700;color:var(--muted);align-self:flex-end;
  margin-top:5px}
.esdlg .ch-who.bot{font-size:9.5px;font-weight:800;color:var(--brand);letter-spacing:.04em;
  border:1px dashed var(--faint);border-radius:999px;padding:1px 7px}
.esdlg .ch-m{max-width:82%;padding:7px 10px;border-radius:12px;font-size:12.5px;
  line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.esdlg .ch-m.in{align-self:flex-start;background:var(--panel);
  border:1px solid var(--box-line);border-bottom-left-radius:4px}
.esdlg .ch-m.me{align-self:flex-end;background:var(--brand-2);color:var(--panel);
  border-bottom-right-radius:4px}
.esdlg .ch-m.me small{color:rgba(255,253,251,.65)}
.esdlg .ch-m.bot{align-self:flex-end;background:var(--panel);color:var(--brand);
  border:1px dashed var(--faint);border-bottom-right-radius:4px}
.esdlg .ch-m small{display:block;margin-top:3px;font-size:10px;color:var(--muted)}
.esdlg .dldown{all:unset;cursor:pointer;position:absolute;left:50%;bottom:60px;
  transform:translateX(-50%);height:28px;padding:0 12px;border-radius:999px;
  background:var(--brand-2);color:var(--panel);font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;box-shadow:var(--shadow)}

/* пусто и загрузка */
.esdlg .dlempty{margin:auto;padding:18px 14px;text-align:center;font-size:11.5px;
  color:var(--muted);line-height:1.5;max-width:230px}
.esdlg .dlempty b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:3px}
.esdlg .dlskel{display:flex;flex-direction:column;gap:6px;padding:4px}
.esdlg .dlskel i{display:block;height:44px;border-radius:10px;
  background:linear-gradient(90deg,var(--soft) 25%,var(--box-bg) 37%,var(--soft) 63%);
  background-size:400% 100%;animation:esdlgsk 1.4s ease infinite}
@keyframes esdlgsk{0%{background-position:100% 0}100%{background-position:0 0}}

/* узкий экран: одна колонка — сначала список, по тапу переписка во всё окно */
.esdlg.узкое .dlbody{grid-template-columns:minmax(0,1fr)}
.esdlg.узкое .dllist{border-right:0;padding-right:0}
.esdlg.узкое .dlchat{display:none}
.esdlg.узкое .dlbody.начат .dllist{display:none}
.esdlg.узкое .dlbody.начат .dlchat{display:flex}
.esdlg.узкое .dlwho .back{all:unset;cursor:pointer;display:inline-flex;align-items:center;
  font-size:12px;font-weight:600;color:var(--brand);margin-right:2px}

/* ⛔ 09.10: панель предварительной брони — первичка и один следующий шаг. */
/* ⛔ 09.10, Тарик: «сделай PR-ID не строкой, а столбиком пониже — третьей
   строкой». В строку с телефоном он не помещался и вылезал за карточку. */
.esnz .client .n{display:flex;flex-direction:column;gap:1px;min-width:0}
.esnz .client .n small{display:block;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.esnz .client .n small.uid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;color:var(--brand)}
/* ⛔ 09.10: код страны — свободное поле; под ним подпись, чей это код. */
.esnz .phrow .cc{flex:none;width:92px;text-align:center;font-variant-numeric:tabular-nums}
.esnz .cchint{margin-top:3px;font-size:11px}
.esnz .cchint.плохо{color:var(--red)}

.esnz .holdcard{display:flex;flex-direction:column;gap:10px}
.esnz .holdform{display:flex;flex-direction:column;gap:7px}
.esnz .holdform .lbl{font-size:11.5px;color:var(--muted)}
.esnz .holdform .inp{height:32px}
.esnz .holdform .seg.two{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.esnz .hold-tag{align-self:flex-start;font-size:10.5px;font-weight:800;
  letter-spacing:.04em;color:#fff;background:#C0552F;border-radius:999px;padding:3px 10px}
.esnz .hold-rows{display:flex;flex-direction:column;gap:7px;padding:10px 12px;
  background:var(--box-bg);border:1px solid var(--box-line);border-radius:11px}
.esnz .hold-rows>div{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px}
.esnz .hold-rows small{font-size:11.5px;color:var(--muted);flex:none}
/* ⛔ Тарик 17.10: «1 090 AED · ждёт оплаты» переносился и прилипал влево —
   все значения строк брони прижаты к правому краю. */
.esnz .hold-rows b{font-size:12.5px;font-weight:700;text-align:right}
.esnz .holdcard .dnote{line-height:1.45}

.selbtn{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:32px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  font-size:12.5px;color:var(--ink)}
.selbtn:hover{background:var(--soft)}
.selbtn>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selbtn .chev{width:6px;height:6px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:rotate(45deg);
  margin-top:-3px;flex:none}
/* ⛔ 11.10: выпадающий список живёт и ВНУТРИ окон (окно смены — z-index 140),
   а стоял на 80 — в окне он уходил под затемнение и был виден краем экрана. */
.selpop{position:fixed;z-index:200;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;max-height:340px;
  overflow:auto;min-width:220px}
.selpop .g{font-size:10.5px;letter-spacing:.04em;color:var(--muted);font-weight:700;
  padding:7px 9px 3px}
.selpop button{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;
  padding:7px 9px;border-radius:8px;font-size:12.5px;color:var(--ink)}
.selpop button:hover{background:var(--soft)}
.selpop button.on{background:var(--cream);font-weight:700}

/* ⛔ 08.10, Тарик: «кнопка „Отмена“ — откуда взялась, она должна соответствовать
   интерфейсу» и «кнопки + и − непонятно откуда взялись». Корень один: .cancel был
   описан только внутри .esnz, .cnt — только внутри .espaybox, а окно «Клиент не
   пришёл» и панель занятия живут в других контурах, и браузер рисовал свои кнопки
   по умолчанию. Описываем по роли кнопки, а не по тому, в каком окне она стоит.
   Счётчиков воронки (.pipe .cnt, .col h3 .cnt) это не касается — они вне .bk-row. */
.cancel{all:unset;box-sizing:border-box;cursor:pointer;height:32px;padding:0 14px;
  border-radius:9px;border:1px solid var(--line);background:var(--panel);
  font-size:12.5px;font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center}
.cancel:hover{background:var(--soft)}
.bk-row .cnt{all:unset;box-sizing:border-box;cursor:pointer;width:40px;height:32px;
  border-radius:9px;
  border:1px solid var(--line);background:var(--panel);font-weight:700;font-size:14px;
  color:var(--ink);display:inline-grid;place-items:center}
.bk-row .cnt:hover{background:var(--soft)}
.bk-row .cnt.wide{width:auto;padding:0 10px;font-size:12px;font-weight:600}
.bk-sel{appearance:none;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font:inherit;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.bk-chips{display:flex;flex-wrap:wrap;gap:5px}
.bk-chips button{all:unset;cursor:pointer;height:28px;padding:0 10px;border-radius:999px;
  background:var(--soft);font-size:12px;font-weight:600;color:var(--brand);white-space:nowrap}
.bk-chips button:hover{background:var(--cream)}
.bk-chips button.on{background:var(--sel);color:var(--panel)}
.bk-chips button:disabled{cursor:default;opacity:1}
.bk-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--cream);
  border-radius:10px;padding:3px}
.bk-seg button{all:unset;cursor:pointer;height:28px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--brand);white-space:nowrap}
.bk-seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.bk-inp{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font:inherit;color:var(--ink);box-sizing:border-box}
.bk-note{font-size:11.5px;color:var(--muted)}
.bk-chk{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600}
.bk-chk i{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--faint);flex:none}
.bk-chk.on i{background:var(--sel);border-color:var(--sel);box-shadow:inset 0 0 0 3px var(--panel)}
.bk-ft{display:flex;justify-content:flex-end;gap:6px;padding-top:4px}
.bk-ft button{all:unset;cursor:pointer;height:34px;padding:0 14px;border-radius:10px;
  font-weight:700;font-size:12.5px}
.bk-ft .bk-no{border:1px solid var(--line);background:var(--panel)}
.bk-ft .bk-ok{background:var(--brand-2);color:var(--panel)}
.bk-ft .bk-ok:hover{background:var(--brand)}
.bk-delq[hidden],.bk-dq button[hidden]{display:none}
.bk-dq{display:flex;flex-direction:column;gap:5px}
.bk-dq button{all:unset;cursor:pointer;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;font-weight:600;font-size:12.5px}
.bk-dq button:hover{border-color:var(--red);color:var(--red)}
.bk-ft .bk-del{color:var(--red);margin-right:auto}
.esnz .foot .hint.bad{color:var(--red);font-weight:700}
/* ⛔ 10.10: «не берёт новичков» — заметка, а не запрет (Тарик). Она заметна,
   но не красная: красным в этой строке говорит только то, что держит кнопку. */
.esnz .foot .hint.warn{color:var(--brand);font-weight:700}
/* ⛔ 10.10: час, съеденный у зала индивидуальной практикой. Виден, но тише
   групповых карточек — на него не записывают, его только учитывают. */
.esroombusy{cursor:pointer;opacity:.75}
.esroombusy span{font-size:10px}
/* ⛔ 10.10: занятие в колонке ВЕДУЩЕГО — тот же час, но записывают людей не
   здесь, а в колонке комнаты. Отличаем штриховкой по краю. */
.esdcell.group.esleads{opacity:.92}
.esdcell.group.esleads .in{border-left:3px solid rgba(255,255,255,.55)}
.esnz .notewrap{position:relative}
.esnz .notewrap .notesave{position:absolute;right:6px;bottom:6px;height:24px;
  padding:0 10px;border:0;border-radius:7px;background:var(--brand-2);
  color:var(--panel);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.esnz .notewrap .notesave:disabled{background:var(--cream);color:var(--faint);
  cursor:default}
.esnz .clrsel{display:flex;align-items:center;gap:8px;width:100%;height:32px;
  padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.esnz .clrsel .sw,.esnz .clrlist .sw{width:14px;height:14px;border-radius:5px;flex:none}
.esnz .clrsel .cname{flex:1;text-align:left;font-weight:600}
.esnz .clrlist{display:flex;flex-direction:column;gap:2px;margin-top:4px;
  border:1px solid var(--line);border-radius:9px;padding:4px;background:var(--panel)}
.esnz .clrlist button{display:flex;align-items:center;gap:8px;height:28px;
  padding:0 8px;border:0;border-radius:7px;background:transparent;font:inherit;
  font-size:12.5px;color:var(--ink);cursor:pointer;text-align:left}
.esnz .clrlist button:hover{background:var(--soft)}
/* ═════════ ПРОФИЛЬ КЛИЕНТА · панель справа 520 (ТЗ §7.3, §3.3 исключение) ═════════ */
.esprofbg{position:fixed;inset:0;z-index:90;background:rgba(43,36,30,.32);
  display:flex;justify-content:flex-end}
.esprof{width:520px;max-width:100%;height:100%;background:var(--panel);
  display:flex;flex-direction:column;box-shadow:-18px 0 48px -24px rgba(43,36,30,.45);
  font-size:12.5px;color:var(--ink)}
.esprof .pfhd{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.esprof .pfhd .av{width:36px;height:36px;border-radius:999px;background:var(--cream);
  color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.esprof .pfhd .n{flex:1;min-width:0}
.esprof .pfhd .n b{display:block;font-size:14px;font-weight:700}
.esprof .pfhd .n small{display:block;font-size:11.5px;color:var(--muted)}
.esprof .pfhd .x{all:unset;cursor:pointer;width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;color:var(--muted)}
.esprof .pfhd .x:hover{background:var(--soft)}
.esprof .pftabs{display:flex;gap:18px;padding:0 16px;border-bottom:1px solid var(--line)}
.esprof .pftabs button{all:unset;cursor:pointer;padding:9px 0;font-size:12.5px;
  font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px}
.esprof .pftabs button.on{color:var(--ink);border-color:var(--gold)}
.esprof .pfbody{flex:1;min-height:0;overflow:auto;padding:14px 16px}
.esprof .pferr{padding:0 16px 8px;color:var(--red);font-weight:700;font-size:12px}
.esprof .pfft{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-top:1px solid var(--line)}
.esprof .pfft .dnote{flex:1;font-size:11.5px;color:var(--muted)}
.esprof .pfft button{height:32px;padding:0 14px;border-radius:9px;font:inherit;
  font-size:12.5px;font-weight:700;cursor:pointer}
.esprof .pfft .cancel{border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.esprof .pfft .dark{border:0;background:var(--brand-2);color:var(--panel)}
.esprof .pfft .dark:hover{background:var(--brand)}
.esprof .pfgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.esprof .pfcell{display:flex;flex-direction:column;gap:1px;border:1px solid var(--box-line);
  border-radius:10px;padding:7px 10px;background:var(--box-bg)}
.esprof .pfcell small{font-size:11px;color:var(--muted)}
.esprof .pfcell b{font-size:13.5px;font-variant-numeric:tabular-nums}
.esprof .cp-g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.esprof .fld{display:flex;flex-direction:column;gap:5px}
.esprof .fld .lbl{font-size:11.5px;color:var(--muted)}
.esprof .stack{display:flex;flex-direction:column}
.esprof .bk-inp{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font:inherit;font-size:12.5px;color:var(--ink);box-sizing:border-box}
.esprof .ns-ta{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font:inherit;font-size:12.5px;color:var(--ink);
  box-sizing:border-box;resize:vertical}
.esprof .seg,.esprof .seg.two{display:grid;gap:4px;background:var(--cream);
  border-radius:10px;padding:3px;grid-template-columns:repeat(3,1fr)}
.esprof .seg.two{grid-template-columns:1fr 1fr}
.esprof .seg button{all:unset;cursor:pointer;height:28px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--brand)}
.esprof .seg button.on{background:var(--panel);color:var(--ink);
  box-shadow:0 1px 2px rgba(43,36,30,.08)}
.esprof .svsec{display:flex;flex-direction:column;gap:5px}
.esprof .svrow{display:flex;align-items:center;gap:10px;min-height:34px;padding:6px 11px;
  border:1px solid var(--box-line);border-radius:10px;background:var(--panel)}
.esprof .svrow .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.esprof .svrow .mt{font-size:11.5px;color:var(--muted);white-space:nowrap}
.esprof .svrow .pr{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.esprof .dnote{font-size:11.5px;color:var(--muted)}
.esnz .srow .tag.pre{background:var(--green);color:var(--panel)}
/* ═════════ ГРУППОВОЕ ЗАНЯТИЕ · перенос 08-group-event.html (ТЗ §8) ═════════ */
.esnz .svsec{display:flex;flex-direction:column;gap:5px}
.esnz .svtitle{display:flex;align-items:center;gap:8px;font-size:11.5px;
  font-weight:700;color:var(--muted);margin-bottom:2px}
.esnz .svrow{display:flex;align-items:center;gap:10px;height:38px;padding:0 11px;
  border:1px solid var(--box-line);border-radius:10px;background:var(--panel);
  font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;text-align:left}
.esnz .svrow:hover{background:var(--soft)}
.esnz .svrow.on{border-color:var(--ink)}
.esnz .svrow .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.esnz .svrow .mt{font-size:11.5px;color:var(--muted);white-space:nowrap}
.esnz .svrow .pr{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.esnz .gzbar{height:6px;border-radius:999px;background:var(--cream);overflow:hidden;
  margin-top:8px}
.esnz .gzbar i{display:block;height:100%;background:var(--brand);border-radius:999px}
.esnz .gzrow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;
  align-items:center;padding:9px 11px;border:1px solid var(--box-line);
  border-radius:11px;background:var(--panel);cursor:pointer}
.esnz .gzrow:hover{background:var(--soft)}
.esnz .gzrow.on{border-color:var(--ink)}
/* ⛔⛔ Тарик 11.10: «предварительная бронь в групповой выглядит как обычная
   запись — сделай красную обводку; у неё одна кнопка „Перевести в запись“».
   Та же краска, что у индивидуальной брони в сетке: место держат, записи нет. */
.esnz .gzrow.hold{grid-template-columns:30px minmax(0,1fr) auto auto;
  border:1.5px solid #C0552F;background:#FDF6F3}
.esnz .gzrow.hold:hover{background:#FBEEE9}
.esnz .gzrow.hold.on{border-color:#A2421F}
.esnz .gzrow.hold .hold-tag{align-self:center}
.esnz .gzrow.hold .gzpay{border-color:#C0552F;background:#C0552F;color:#fff}
.esnz .gzrow.hold .gzpay:hover{background:#A2421F;border-color:#A2421F}
.esnz .gzrow .n{min-width:0}
.esnz .gzrow .n b{display:block;font-size:12.5px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.esnz .gzrow .n small{display:block;font-size:11px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.esnz .gzrow .mt{font-size:10.5px;color:var(--muted);font-weight:600}
.esnz .gzrow .pills.gzp{grid-column:1/-1;display:flex;gap:4px;margin-top:2px}
.esnz .gzrow .pills.gzp .pill{height:26px;font-size:11.5px;padding:0 10px}
.esnz .gzbtns{grid-column:1/-1;display:flex;gap:6px;align-items:center;
  flex-wrap:wrap;margin-top:2px}
.esnz .gzpay{height:24px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);font:inherit;font-size:11.5px;font-weight:700;
  color:var(--ink);cursor:pointer}
.esnz .gzpay:hover{background:var(--soft)}
.esnz .gzsell{height:28px;padding:0 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font:inherit;font-size:11.5px;font-weight:600;
  color:var(--brand);cursor:pointer}
.esnz .gzsell:hover{background:var(--soft)}
/* ═════════ ЧАТ · перенос правил из client-panel.js (ТЗ §7.5) ═════════ */
.esnz .ch-hd{display:flex;align-items:center;gap:9px}
.esnz .ch-hd .av{width:30px;height:30px;font-size:10.5px}
.esnz .ch-hd .n b{display:block;font-size:12.5px;font-weight:700}
.esnz .ch-hd .n small{display:block;font-size:11px;color:var(--muted)}
.esnz .ch-log{flex:1;min-height:260px;max-height:calc(100vh - 330px);overflow:auto;
  background:var(--box-bg);border:1px solid var(--box-line);border-radius:11px;
  padding:10px;display:flex;flex-direction:column;gap:6px}
.esnz .ch-day{align-self:center;font-size:10.5px;color:var(--muted);background:var(--cream);
  border-radius:999px;padding:1px 8px;margin:4px 0}
.esnz .ch-m{max-width:84%;padding:7px 10px 5px;border-radius:12px;font-size:12.5px;
  line-height:1.35;white-space:pre-wrap;word-wrap:break-word}
.esnz .ch-m small{display:block;text-align:right;font-size:10px;margin-top:2px;
  opacity:.7;font-variant-numeric:tabular-nums}
.esnz .ch-m.in{align-self:flex-start;background:var(--panel);border:1px solid var(--box-line);
  border-bottom-left-radius:4px}
.esnz .ch-m.out{align-self:flex-end;background:var(--brand-2);color:var(--panel);
  border-bottom-right-radius:4px}
.esnz .ch-tpl{display:flex;gap:5px;flex-wrap:wrap}
.esnz .ch-tpl button{all:unset;cursor:pointer;height:26px;padding:0 9px;border-radius:999px;
  background:var(--soft);font-size:11.5px;font-weight:600;color:var(--brand);white-space:nowrap}
.esnz .ch-tpl button:hover{background:var(--cream)}
.esnz .ch-in{display:flex;gap:6px;align-items:flex-end}
.esnz .ch-ta{flex:1;min-width:0;height:auto;min-height:36px;max-height:110px;
  padding:8px 10px;resize:none;line-height:1.35}
.esnz .ch-send{width:36px;height:36px;padding:0;display:flex;align-items:center;
  justify-content:center;font-size:14px;border:0;border-radius:9px;
  background:var(--brand-2);color:var(--panel);cursor:pointer}
.esnz .ch-send:hover{background:var(--brand)}
.espaybox .cnt{all:unset;cursor:pointer;width:40px;height:32px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);text-align:center;
  font-weight:700;font-size:14px;color:var(--ink);line-height:32px}
.espaybox .cnt:hover{background:var(--soft)}
.espaybox .cnt.wide{width:auto;padding:0 10px;font-size:12px;font-weight:600}
.esnz .sec .ttl .lnk{float:right;cursor:pointer;color:var(--brand);
  font-weight:700;text-decoration:underline}
.espaybox .ok-ic{width:44px;height:44px;border-radius:999px;background:var(--green);
  color:var(--panel);display:grid;place-items:center;font-size:22px;font-weight:800}
.espaybox .ok-rows{width:100%;display:flex;flex-direction:column;gap:4px;margin:4px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0}
.espaybox .ok-rows div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.espaybox .ok-rows span{color:var(--muted)}
.espaybox .ok-rows b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.espaybox .rp-days{display:flex;flex-wrap:wrap;gap:5px}
.espaybox .rp-days button{all:unset;cursor:pointer;height:28px;min-width:34px;
  padding:0 10px;border-radius:999px;background:var(--soft);font-size:12px;
  font-weight:600;color:var(--brand);text-align:center}
.espaybox .rp-days button:hover{background:var(--cream)}
.espaybox .rp-days button.on{background:var(--sel);color:var(--panel)}
.espaybox .seg2{display:grid;grid-template-columns:1fr 1fr;gap:4px;
  background:var(--cream);border-radius:10px;padding:3px}
.espaybox .seg2 button{all:unset;cursor:pointer;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  font-weight:600;color:var(--brand)}
.espaybox .seg2 button.on{background:var(--panel);color:var(--ink);
  box-shadow:0 1px 2px rgba(43,36,30,.08)}
.espaybox .cp-g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.espaybox .fld{display:flex;flex-direction:column;gap:5px}
.espaybox .fld .lbl{font-size:11.5px;color:var(--muted)}
.esnz .pills .pill.plus i{color:var(--green);font-style:normal;margin-right:4px;font-weight:800}
.esnz .pills .pill.minus i{color:var(--red);font-style:normal;margin-right:4px;font-weight:800}
.esnz .pills .pill.on.plus i,.esnz .pills .pill.on.minus i{color:inherit}
/* ═════════ ОКНО «КЛИЕНТ НЕ ПРИШЁЛ» · перенос из 07-new-record.html (ТЗ §6.4) ═════════ */
.espaybox .po[disabled]{cursor:not-allowed;background:var(--box-bg)}
.espaybox .po[disabled] b,.espaybox .po[disabled]>span{color:var(--faint)}
.espaybox .ns-why[hidden],.espaybox .ns-err[hidden]{display:none}
.espaybox .ns-rs{display:flex;flex-wrap:wrap;gap:5px}
.espaybox .ns-rs button{all:unset;cursor:pointer;height:28px;padding:0 10px;
  border-radius:999px;background:var(--soft);font-size:12px;font-weight:600;color:var(--brand)}
.espaybox .ns-rs button:hover{background:var(--cream)}
.espaybox .ns-rs button.on{background:var(--sel);color:var(--panel)}
.espaybox .ns-ta{width:100%;height:60px;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);font:inherit;font-size:12.5px;
  color:var(--ink);box-sizing:border-box;resize:vertical}
.nstag{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:9px;
  background:var(--cream);color:var(--red);font-size:12.5px;font-weight:700;
  white-space:nowrap;flex:none}
.paidtag{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:9px;
  background:var(--cream);color:var(--brand);font-size:12.5px;font-weight:700;
  white-space:nowrap;flex:none}
.esnz .foot .del{height:32px;padding:0 13px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--red);font:inherit;
  font-size:12.5px;font-weight:700;cursor:pointer;margin-right:auto}
.esnz .foot .del:hover{border-color:var(--red)}


/* ══ ТЗ доработок 05.10 §2.5 (Д4–Д6): список суммы дня и окно «Обзор дня» ══════
   Дословно из макета 01-grid.html, стр. 211–236. */
.sumpop{position:absolute;top:36px;right:0;z-index:30;width:260px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px}
.sumpop[hidden]{display:none}
/* ⛔ 08.10, Тарик: «суммы опять стоят не по линии». Строки плашки — <button> с
   all:unset, а кнопка сжимается по содержимому (width:auto у form control это
   fit-content, display:flex этого не отменяет): у «0 AED», «400 AED» и «Итого»
   получались разные правые края. Тянем строку на всю ширину — тогда min-width
   и выравнивание вправо у чисел наконец работают. */
.sp-row{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;height:36px;padding:0 10px;border-radius:9px;font-size:12.5px;color:var(--ink);width:100%;box-sizing:border-box}
.sp-row:hover{background:var(--soft)}
.sp-row b{font-weight:700}.sp-ov b{font-weight:800}
.sp-row .chev.r{transform:rotate(-45deg)}
.sp-tot{display:flex;justify-content:space-between;gap:10px;padding:8px 10px 4px;margin-top:2px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.sp-tot b{color:var(--ink);font-weight:800}
.dvm{position:fixed;inset:0;z-index:50;background:rgba(43,36,30,.45);display:grid;place-items:center;padding:20px}
.dvm[hidden]{display:none}
/* ⛔ 09.10: шесть колонок обзора должны помещаться без прокрутки вбок. */
.dvbox{width:min(1280px,94vw);max-width:100%;max-height:calc(100vh - 40px);background:var(--panel);border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);display:flex;flex-direction:column;overflow:hidden}
.dv-hd{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 10px}
.dv-hd .t{flex:1}.dv-hd b{display:block;font-size:15px;font-weight:800}.dv-hd small{font-size:12px;color:var(--muted)}
.dv-x{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:var(--muted)}.dv-x:hover{background:var(--soft)}
.dv-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 16px 10px}
.dv-tiles div{background:var(--box-bg);border:1px solid var(--box-line);border-radius:11px;padding:9px 11px}
.dv-tiles small{display:block;font-size:11px;color:var(--muted)}.dv-tiles b{display:block;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
.dv-flt{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.dv-flt button{all:unset;cursor:pointer;height:28px;padding:0 10px;border-radius:999px;background:var(--soft);font-size:12px;font-weight:600;color:var(--brand)}
.dv-flt button.on{background:var(--sel);color:var(--panel)}
.dv-body{overflow:auto;padding:0 16px 14px}
.dv-t{width:100%;border-collapse:collapse;font-size:12.5px}
.dv-t th{position:sticky;top:0;background:var(--panel);text-align:left;font-size:11px;font-weight:600;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.dv-t td{padding:8px;border-bottom:1px solid var(--box-line);vertical-align:top}
.dv-t td.num,.dv-t th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dv-t td small{display:block;font-size:11px;color:var(--muted)}

/* §2.6 (Д7): сегмент шага сетки «15 мин | 30 мин | 1 час» вместо выпадающего списка */
.espop-seg{display:flex;gap:4px}
.espop-seg button{all:unset;cursor:pointer;flex:1;height:30px;display:grid;place-items:center;
  border-radius:8px;background:var(--soft);font-size:12px;font-weight:600;color:var(--brand)}
.espop-seg button.on{background:var(--sel);color:var(--panel)}
/* §3.4 (Д10): блок «Недавние клиенты» — линия сверху, подпись, до 5 строк */
.recent{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:10px;
  border-top:1px solid var(--line)}
.recent .lbl{margin:0 0 4px}

/* ТЗ доработок 05.10 §3.2 (Д9): окно «Все ресурсы заняты», 420 px */
.esover-wrap{position:fixed;inset:0;z-index:140;background:rgba(43,36,30,.45);
  display:grid;place-items:center;padding:20px}
.esresbusy-box{width:420px;max-width:100%;background:var(--panel);border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(43,36,30,.45);padding:16px;display:flex;
  flex-direction:column;gap:10px}
.esover-hd b{display:block;font-size:15px;font-weight:800}
.esover-hd small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.esover-tx{font-size:13px;line-height:1.45}
.esover-ft{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}


/* ══ ТЗ доработок 05.10 §2.7 (Д11–Д15): панель поиска клиента, 380 px ══════════
   Дословно из макета 01-grid.html. Панель БЕЗ затемнения — работает поверх сетки. */
.cs-tabs{display:flex;gap:16px;border-bottom:1px solid var(--line)}
.cs-tabs button{all:unset;cursor:pointer;padding:6px 0;font-size:12.5px;font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px}
.cs-tabs button.on{color:var(--ink);border-color:var(--gold)}
.cs-f{display:flex;flex-direction:column;gap:3px}.cs-f label{font-size:11.5px;color:var(--muted)}
.cs-f input,.cs-f textarea,.cs-f select{height:32px;border:1px solid var(--line);border-radius:9px;padding:0 9px;font:inherit;font-size:12.5px;background:var(--panel);color:var(--ink)}
.cs-f textarea{height:70px;padding:7px 9px;resize:none}
.cs-log{min-height:240px;max-height:calc(100vh - 360px);overflow:auto;background:var(--box-bg);border:1px solid var(--box-line);border-radius:11px;padding:10px;display:flex;flex-direction:column;gap:6px}
.cs-m{max-width:84%;padding:7px 10px 5px;border-radius:12px;font-size:12.5px;line-height:1.35;white-space:pre-wrap}
.cs-m small{display:block;text-align:right;font-size:10px;opacity:.7}
.cs-m.in{align-self:flex-start;background:var(--panel);border:1px solid var(--box-line)}
.cs-m.out{align-self:flex-end;background:var(--brand-2);color:var(--panel)}
.cs-tpl{display:flex;gap:5px;flex-wrap:wrap}.cs-tpl button{all:unset;cursor:pointer;height:26px;padding:0 9px;border-radius:999px;background:var(--soft);font-size:11.5px;font-weight:600;color:var(--brand)}
.cs-send{display:flex;gap:6px;align-items:flex-end}.cs-send textarea{flex:1;min-height:36px;max-height:110px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit;font-size:12.5px;resize:none}
.cs-send button{all:unset;cursor:pointer;width:36px;height:36px;border-radius:9px;background:var(--brand-2);color:var(--panel);display:grid;place-items:center}
.cspanel{position:fixed;top:0;right:0;bottom:0;z-index:45;width:380px;max-width:100vw;background:var(--panel);box-shadow:0 1px 2px rgba(43,36,30,.05),0 24px 60px -20px rgba(43,36,30,.45);display:flex;flex-direction:column}
.cspanel[hidden]{display:none}
.cs-hd{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}
.cs-hd b{flex:1;font-size:15px;font-weight:800}
.cs-x{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:var(--muted)}.cs-x:hover{background:var(--soft)}
.cs-in{margin:0 14px 10px;height:34px;border:1px solid var(--line);border-radius:10px;padding:0 10px;font:inherit;font-size:13px;background:var(--panel);color:var(--ink);outline:none}
.cs-in[hidden]{display:none}
.cs-in:focus{border-color:var(--brand)}
.cs-body{flex:1;overflow:auto;padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.cs-empty{margin:40px 10px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.5}
.cs-row{all:unset;cursor:pointer;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 8px;border-radius:10px}
.cs-row:hover{background:var(--soft)}
.cs-row .av{width:32px;height:32px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;place-items:center;font-size:11px;font-weight:800}
.cs-row b{display:block;font-size:12.5px;font-weight:700}.cs-row small{display:block;font-size:11.5px;color:var(--muted)}
.cs-card{display:flex;flex-direction:column;gap:8px}
.cs-name{font-size:16px;font-weight:800}.cs-sub{font-size:12px;color:var(--muted);margin-top:-6px}
.cs-btn{all:unset;cursor:pointer;height:34px;border-radius:10px;text-align:center;font-size:12.5px;font-weight:700;border:1px solid var(--line);color:var(--ink)}
.cs-btn:hover{background:var(--soft)}
/* ⛔ 11.10, Тарик: «как будто бы какой-то цвет другой, кнопки странно
   расположены». Главная кнопка панели была ЗОЛОТАЯ — во всей остальной CRM
   главное действие тёмное (var(--brand-2)). Приводим к общему виду. */
.cs-btn.main{background:var(--brand-2);border-color:var(--brand-2);color:var(--panel)}
.cs-btn.main:hover{background:var(--brand);border-color:var(--brand)}
/* ⛔ 11.10: состав визита — несколько услуг, каждая со своим «развернуть».
   Поля правки идут в четыре колонки, как в Altegio: кол-во, цена, скидка, итог. */
.esnz .svc.open{border-color:var(--brand)}
.esnz .svc .r{cursor:pointer}
.esnz .svc.open .chev{transform:rotate(180deg)}
.esnz .svedit{display:flex;flex-direction:column;gap:8px;padding:8px 0 2px;
  border-top:1px solid var(--line);margin-top:8px}
.esnz .sve4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.esnz .sve4 label{display:flex;flex-direction:column;gap:3px}
.esnz .sve4 span{font-size:11px;color:var(--muted)}
.esnz .sve4 .inp{height:30px;font-size:12.5px}
.esnz .svedit .del{align-self:flex-start;color:var(--red);font-size:12px;
  font-weight:700;cursor:pointer;background:none;border:0;padding:0}
/* ⛔ 11.10: «История визитов» строкой-таблицей: мастер · час · состояние ·
   практика · деньги · «Подробнее». Тарик показал Altegio и сказал сделать лучше. */
/* ⛔⛔ Тарик 11.10: перетаскивание записей и ручка длительности внизу карточки.
   Курсор-«рука» обещает захват, и обещание обязано быть только там, где он работает:
   в узкой полосе карточки записи сетка показывает занятость, а не правит её. */
.esbody .esdcell.busy{cursor:grab}
.esbody[data-no-drag] .esdcell.busy,body.esnz-on .esdcell.busy{cursor:pointer}
.esbody .esdcell.busy.group{cursor:pointer}
body.esdrag-on{cursor:grabbing;user-select:none}
body.esdrag-on .esdcell.busy{cursor:grabbing}
.esdcell.esdrag{z-index:40;box-shadow:0 10px 24px rgba(0,0,0,.28);opacity:.94;
  outline:2px solid var(--sel);outline-offset:-2px}
.esrz{position:absolute;left:0;right:0;bottom:0;height:10px;cursor:ns-resize;
  display:flex;align-items:flex-end;justify-content:center;opacity:0;
  transition:opacity .12s}
.esrz::after{content:'⇕';font-size:10px;line-height:11px;font-weight:700;
  padding:0 7px 1px;margin-bottom:1px;border-radius:7px 7px 0 0;
  background:rgba(0,0,0,.28);color:#fff}
.esdcell.busy:hover .esrz{opacity:1}
.esbody[data-no-drag] .esrz,body.esnz-on .esrz,.esdcell.group .esrz{display:none}
.vhist{display:flex;flex-direction:column;gap:2px}
.vhsum{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:0 2px 2px}
.vhsum b{font-size:14px}
.vhsum span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.vhday{font-size:12px;font-weight:800;color:var(--ink);padding:12px 2px 6px}
.vhrow{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1.6fr) auto auto;
  gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel)}
.vhrow:hover{background:var(--soft)}
.vhm{display:flex;align-items:center;gap:8px;min-width:0}
.vhm .av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--soft);
  display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--brand)}
.vhm b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.vhm small{display:block;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.vhtag{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--soft);
  font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.vhtag.ok{background:#E8F2E9;color:#3F7A49}
.vhtag.bad{background:#F7E7E4;color:var(--red)}
.vhsv{font-size:12.5px;color:var(--ink);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.vhpay{text-align:right;white-space:nowrap}
.vhpay b{font-size:12.5px;font-variant-numeric:tabular-nums}
.vhpay small{display:block;font-size:10.5px;color:var(--muted)}
.vhmore{all:unset;cursor:pointer;font-size:11.5px;font-weight:700;color:var(--brand);
  white-space:nowrap}
.vhmore:hover{text-decoration:underline}
@media (max-width:760px){.vhrow{grid-template-columns:1fr auto;row-gap:6px}
  .vhsv{grid-column:1/-1}.vhpay{text-align:left}}
.cs-more{all:unset;cursor:pointer;align-self:flex-start;font-size:12px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px;padding:2px 0}
.cs-more .chev.up{transform:rotate(-135deg)}
.cs-ttl{font-size:12.5px;font-weight:800;margin-top:4px}
.cs-v{border:1px solid var(--box-line);border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.45}
.cs-v b{font-weight:700}.cs-v .m{color:var(--muted)}
/* ── панель «Поиск» v2 (ТЗ 18.10, макет 01-grid.html): клиент — три кнопки и история ── */
.cs-back2{all:unset;cursor:pointer;align-self:flex-start;font-size:12.5px;font-weight:600;color:var(--brand);height:24px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-back2:hover{color:var(--ink)}
.cs-acts{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.cs-acts .cs-btn{height:36px;line-height:36px}
.cs-btn.dk{background:var(--brand-2);border-color:var(--brand-2);color:var(--panel);height:38px;line-height:38px}.cs-btn.dk:hover{background:var(--brand)}
.cs-hd2{margin-top:8px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;font-weight:800}
.cs-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:12px}.cs-kv span{color:var(--muted)}.cs-kv b{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.cs-h{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:start;border:1px solid var(--box-line);border-radius:10px;padding:9px 10px;font-size:12px;line-height:1.45}
.cs-h .av{width:32px;height:32px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;place-items:center;font-size:11px;font-weight:800}
.cs-h b{font-weight:700;font-size:12.5px}.cs-h .m{color:var(--muted);font-variant-numeric:tabular-nums}
.cs-h .pr{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-h.fut{background:var(--box-bg)}
.cs-h .tg{font-size:10.5px;font-weight:700;color:var(--brand);background:var(--cream);border-radius:6px;padding:1px 7px;white-space:nowrap;text-transform:none;letter-spacing:0;height:auto;display:inline-block}
.cs-h .tg::before{content:"";display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--gold);margin-right:5px;vertical-align:1px}
.pcchip{all:unset;cursor:pointer;height:28px;white-space:nowrap;flex:none;padding:0 10px;border-radius:999px;background:var(--sel,#2B3134);color:var(--panel);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.pcchip[hidden]{display:none}
.pcchip span{opacity:.7}

/* ТЗ доработок 05.10 §2.8 (Д16, Д17): окно «Добавить сотрудника в расписание», 460 px */
.esshift-box{width:460px;max-width:100%;background:var(--panel);border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(43,36,30,.45);padding:16px;display:flex;
  flex-direction:column;gap:10px;max-height:calc(100vh - 40px);overflow:auto}
/* §2.9 (Д18): меню мастера под шапкой колонки, 260 px */
.esmmenu{position:fixed;z-index:60;width:260px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;
  display:flex;flex-direction:column;gap:2px}
.esmmenu-sep{height:1px;background:var(--line);margin:4px 2px}
.escol-tap{cursor:pointer}
.escol-tap:hover{background:var(--soft)}

/* ══ ТЗ доработок 05.10 §6 (Д20, Д21): экран «График работы» ═══════════════════ */
.grwrap{position:fixed;inset:0;z-index:48;background:var(--bg);display:flex;
  flex-direction:column;overflow:hidden}
.gr-hd{display:flex;align-items:center;gap:12px;padding:0 16px;height:56px;flex:none;
  background:var(--panel);border-bottom:1px solid var(--line)}
/* ⛔ 08.10, Тарик: «текст в кнопках „Сегодня“ и „← Расписание“ стоит не по центру
   формы, которая его обводит». У .btn свой padding сверху — выравниваем по центру
   явным flex, а не наследуемым строчным боксом. */
.gr-hd .btn{height:32px;border-radius:9px;font-size:12.5px;font-weight:600;
  padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  line-height:1}
.gr-t{font-size:16px;font-weight:800}
.gr-m{font-size:14px;font-weight:800;min-width:128px;text-align:center}
.gr-leg{margin-left:auto;display:flex;gap:14px;font-size:11.5px;color:var(--muted);
  align-items:center}
.gr-leg span{display:inline-flex;align-items:center;gap:5px}
.gr-i{display:inline-block}
.gr-i.work{width:14px;height:14px;border-radius:4px;background:var(--work,rgba(106,158,113,.16))}
.gr-i.off{width:14px;height:14px;border-radius:4px;background:var(--box-bg,#FCFAF6)}
.gr-i.dot{width:6px;height:6px;border-radius:999px;background:var(--gold)}
.gr-i.bar{width:14px;height:2px;border-radius:2px;background:var(--gold);opacity:.55}
@media (max-width:1240px){.gr-leg{display:none}}
.gr-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:10px;
  padding:10px;min-height:0}
.gr-tw{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);
  overflow:auto;min-height:0;user-select:none}
/* сетка склеена: линии рисуют сами клетки, зазоров между ними нет */
table.gr-t{border-collapse:separate;border-spacing:0;min-width:100%;width:100%}
.gr-t th,.gr-t td{padding:0;border:0}
/* глобальное th{} красит шапку капсом и разрядкой — в графике ни того, ни другого
   (ТЗ п.1 «1st Category Master», п.7 дни недели строчными) */
.gr-t th{text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
.gr-t thead th{position:sticky;top:0;z-index:2;background:var(--panel);height:44px;
  font-weight:600;border-bottom:1px solid var(--line)}
.gr-t thead th b{display:block;font-size:11px;color:var(--ink);font-weight:700;line-height:1.2}
.gr-t thead th small{display:block;font-size:10.5px;font-weight:500;color:var(--muted)}
.gr-t thead th.wknd b,.gr-t thead th.wknd small{color:var(--muted)}
.gr-t thead th.today b{display:inline-grid;place-items:center;min-width:22px;height:20px;
  border-radius:6px;background:var(--sel);color:var(--panel)}
.gr-t thead th:hover{background:var(--soft)}
.gr-t thead th.gr-m-nm,.gr-t thead th.gr-sum{z-index:3}
/* колонка мастера — липкая слева, 196 px по макету */
.gr-m-nm{position:sticky;left:0;z-index:1;background:var(--panel);width:196px;
  min-width:196px;border-right:1px solid var(--line);text-align:left;cursor:pointer}
thead .gr-m-nm{padding:0 12px;font-size:11px;color:var(--muted)}
/* ⛔ 08.10, Тарик: «клетки с числами и днём недели — по центру, не слева». Глобальное
   th{text-align:left} тянуло их к краю. */
.gr-t thead th{text-align:center}
.gr-t thead th.gr-m-nm{text-align:left}
.gr-t thead th.gr-sum{text-align:center}
tbody .gr-m-nm{display:table-cell}
.gr-m-nm .mcell{display:flex;align-items:center;gap:9px;padding:0 12px;height:46px}
.gr-m-nm:hover .mcell{background:var(--soft)}
.gr-m-nm .av{width:28px;height:28px;border-radius:999px;background:var(--cream);
  color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:11px;flex:none}
.gr-m-nm .tx{min-width:0}
.gr-m-nm b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0;color:var(--ink)}
.gr-m-nm small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* день месяца */
/* ⛔ 08.10, Тарик: «давай не будем впихивать все 30 дней, пусть мы видим 15 дней и
   просто будем листать». Это отменяет требование ТЗ «октябрь целиком на 1440»
   (оно и не сходилось с «день 32 px»): день шире, в окно влезает полмесяца,
   остальное — прокруткой вбок. Слово владельца сильнее. */
.gr-c{height:46px;min-width:58px;text-align:center;cursor:cell;position:relative;
  font-variant-numeric:tabular-nums;font-size:11px;line-height:1.15;
  border-bottom:1px solid var(--box-line);border-right:1px solid var(--box-line)}
.gr-c.work{background:var(--work,rgba(106,158,113,.16))}
.gr-c.off,.gr-c.none.wknd{background:var(--box-bg,#FCFAF6)}
.gr-c.man::after{content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;
  border-radius:999px;background:var(--gold)}
.gr-c.hasblk::before{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:2px;
  border-radius:2px;background:var(--gold);opacity:.55}
/* выделение — ВНУТРЕННЯЯ обводка: соседние дни сливаются в полосу */
/* ⛔ 09.10, Тарик: «сплошная аккуратная полоска, а не чёрные клетки». Рамка идёт
   по периметру выделенного куска: сверху и снизу у всех клеток, слева у первой,
   справа у последней. Тенями, а не border — они не меняют размер клетки, и
   таблица не дёргается. Внутренние линии гасим, чтобы полоса читалась целиком. */
.gr-c.sel{background-color:var(--cream);outline:0;
  border-right-color:transparent;
  box-shadow:inset 0 2px 0 var(--ink),inset 0 -2px 0 var(--ink)}
.gr-c.sel.sel-l{box-shadow:inset 0 2px 0 var(--ink),inset 0 -2px 0 var(--ink),
  inset 2px 0 0 var(--ink)}
.gr-c.sel.sel-r{border-right-color:var(--box-line);
  box-shadow:inset 0 2px 0 var(--ink),inset 0 -2px 0 var(--ink),
  inset -2px 0 0 var(--ink)}
.gr-c.sel.sel-l.sel-r{box-shadow:inset 0 0 0 2px var(--ink)}
/* ⛔ 09.10: выбран мастер целиком — только мягкая заливка, без чёрной рамки:
   тот же вид, что при выборе мастера в «Шаблоне недели». */
.gr-c.selsoft{background-color:var(--cream)}
.gr-c.selsoft.work{background-color:#E8E0CF}
.gr-h{display:block;font-weight:700;line-height:1.15}
.gr-h sup{font-size:8px;font-weight:600;opacity:.75;vertical-align:super}
.gr-off{font-size:10.5px;font-weight:700;color:var(--muted)}
/* «Итого» — липкая справа */
/* ⛔ Тарик 17.10: «часы выглядят обрезанными — отформатируй по центру». */
.gr-sum{position:sticky;right:0;background:var(--panel);border-left:1px solid var(--line);
  min-width:84px;padding:0 10px;text-align:center;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
tbody .gr-sum{border-bottom:1px solid var(--box-line)}
.gr-sum b{display:block;color:var(--ink);font-size:12px;font-weight:700}

/* ⛔ 08.10, Тарик: «посмотри, как в макете красиво: полосочки, клеточки… у нас нет
   точности — навожу на 1-е, а выделяется будто между 1-м и 2-м». Колонки на самом
   деле совпадают до пикселя, но РАЗМЕТКИ НЕ БЫЛО ВИДНО: линии описаны у .gr-c,
   а ниже стоит сброс `.gr-t th,.gr-t td{padding:0;border:0}` — его специфичность
   выше (0,1,1 против 0,1,0), и он их съедал. Возвращаем линии с той же
   специфичностью, что и сброс. */
.gr-t td.gr-c{border-right:1px solid var(--box-line);
  border-bottom:1px solid var(--box-line)}
.gr-t th.gr-m-nm{border-right:1px solid var(--line)}
.gr-t th.gr-sum,.gr-t td.gr-sum{border-left:1px solid var(--line)}
.gr-t tbody td.gr-sum{border-bottom:1px solid var(--box-line)}
.gr-t tbody th.gr-m-nm{border-bottom:1px solid var(--box-line)}
.gr-t thead th{border-right:1px solid var(--box-line)}
.gr-t thead th.gr-m-nm{border-right:1px solid var(--line)}
/* столбец дня целиком светлеет под курсором — видно, в какое число метишь */
.gr-t td.gr-c:hover{background-color:var(--soft)}

/* ⛔ 08.10: с кем сейчас работают в «Шаблоне недели» — видно в самой таблице. */
/* ⛔ 08.10, Тарик: «когда в „Шаблоне недели“ выбираю мастера, он выделяется только
   слева — пусть выделяется полной линией, как выбор смены». Красим всю строку. */
.gr-m-nm.on .mcell{background:var(--cream);box-shadow:inset 3px 0 0 var(--sel)}
.gr-sum.on{background:var(--cream)}
.gr-t tbody tr.on td.gr-c{background-color:var(--cream)}
.gr-t tbody tr.on td.gr-c.work{background-color:#E8E0CF}
.gr-t tbody tr.on th.gr-m-nm,.gr-t tbody tr.on td.gr-sum{background:var(--cream)}
.gr-sum small{display:block;font-size:11px;color:var(--muted)}
.gr-side{width:auto;flex:none;background:var(--panel);border:0;border-radius:14px;
  box-shadow:var(--shadow);padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.gr-sel{background:var(--soft);border-radius:11px;padding:10px 12px;font-size:12px;
  line-height:1.45}
.gr-sel b{font-size:12.5px}
.gr-sel .m{font-size:11.5px;color:var(--muted)}
.gr-chips{display:flex;gap:5px;flex-wrap:wrap}
.gr-chips button{all:unset;cursor:pointer;height:26px;padding:0 9px;border-radius:999px;
  background:var(--soft);font-size:11.5px;font-weight:600;color:var(--brand);white-space:nowrap}
.gr-chips button:hover{background:var(--cream)}

/* ТЗ р.3: поля времени — не нативные стрелки. Обёртка .selw рисует галочку сама,
   сам список (шаг 30 мин) по-прежнему отдаёт esСменаЧасы(). */
.gr-side .selw{position:relative;display:block;min-width:0}
.gr-side .selw>select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;height:32px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px;
  padding:0 22px 0 9px;font-variant-numeric:tabular-nums;cursor:pointer}
.gr-side .selw>select:focus{outline:0;border-color:var(--sel)}
.gr-side .selw::after{content:"";position:absolute;right:10px;top:50%;margin-top:-4px;
  width:6px;height:6px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.gr-side .wkd.offd .wk .selw::after{opacity:.4}
/* 19.10: время — наш список (.selbtn) вместо родного <select>; колонки узкие (64 px),
   поэтому поля потеснее, цифры ровные. Галочку рисует сама кнопка. */
.gr-side .selbtn{padding:0 7px;gap:4px;font-size:12px;font-variant-numeric:tabular-nums}
.gr-side .wkd.offd .selbtn{opacity:.55}

/* служебный блок — одной строкой: «с» · «до» · название · ✕ (макет .brow) */
.gr-brow{display:grid;grid-template-columns:64px 64px minmax(0,1fr) 26px;gap:4px;
  align-items:center}
.gr-brow .selw>select{padding:0 18px 0 5px;font-size:12px}
.gr-brow>select{height:32px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:12px;padding:0 5px;
  min-width:0}

/* ТЗ р.3: «＋ Добавить служебный блок» — ссылка, а не рамка на всю ширину;
   «Применить к выбранным» — тёмная 36; «Выходной»/«Очистить» — две по 32 пополам. */
.gr-lnk{all:unset;cursor:pointer;font-size:12px;font-weight:600;color:var(--brand);
  align-self:flex-start}
.gr-lnk:hover{color:var(--ink)}
.gr-dark{all:unset;box-sizing:border-box;width:100%;cursor:pointer;height:36px;
  border-radius:10px;background:var(--brand-2);color:var(--panel);font-size:12.5px;
  font-weight:700;display:flex;align-items:center;justify-content:center}
.gr-dark:hover{background:var(--brand)}
/* ⛔ 08.10, Тарик: «галочка стоит, а само слово „Без даты окончания“ ниже галочки».
   .chk был описан только внутри .esnz — в панели графика стиля не было вовсе, и
   label разворачивался в столбик. */
.gr-side .chk{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer}
.gr-side .chk input{width:16px;height:16px;accent-color:var(--sel);margin:0;flex:none}
.gr-stack{display:flex;flex-direction:column;gap:5px}
.gr-stack:empty{display:none}
.gr-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gr-acts .btn{height:32px;padding:0 12px;border-radius:9px;font-size:12.5px;
  font-weight:600;display:inline-flex;align-items:center;justify-content:center}
/* ТЗ р.4: «Удалить шаблон» — текст --red, последней строкой */
.gr-del{all:unset;cursor:pointer;font-size:12px;font-weight:600;color:var(--red);
  align-self:flex-start}
.gr-del:hover{text-decoration:underline}
.gr-chips button.on{background:var(--sel);color:var(--panel)}
.gr-day{border:0;border-bottom:1px solid var(--box-line);border-radius:0;padding:0 0 8px;
  margin-bottom:8px;background:transparent}
.gr-day:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.gr-conf{border:1px solid var(--red);border-radius:11px;padding:10px;background:#FDF3F1}
.gr-conf b{display:block;color:var(--red);font-size:12.5px;margin-bottom:6px}
.gr-conf-l{font-size:11.5px;line-height:1.5;max-height:220px;overflow:auto}
.gr-conf .m{font-size:11.5px;color:var(--muted);margin-top:6px}

/* Аудит переноса 05.10, п.1 (ТЗ §6.10): журнал визита — чипы-фильтров и лента */
.eslog-f{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.eslog-f button{all:unset;cursor:pointer;height:26px;padding:0 9px;border-radius:999px;
  background:var(--soft);font-size:11.5px;font-weight:600;color:var(--brand)}
.eslog-f button.on{background:var(--sel);color:var(--panel)}
.eslog-b{max-height:min(60vh,520px);overflow:auto}

/* №15 сверки Design: в виде «по ресурсам» аватар колонки квадратный — ресурс это
   место, а не человек, и круглая «аватарка» у комнаты читается как лицо. */
.escol .av.avsq{border-radius:7px}

/* №21 сверки Design · §5.1: в полосе расписания (17%) имена мастеров наезжали друг на
   друга — «AlexanderAnastasiaElmira». Многоточие у .escolnm стояло, но срабатывать ему
   было негде: flex-элементы без min-width:0 раздвигаются содержимым, а не обрезают его. */
.esnz .strip .escol{min-width:0}
.esnz .strip .escol .tx{min-width:0;max-width:100%}
.esnz .strip .escolnm,.esnz .strip .escolrole{max-width:100%;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* №6 сверки Design · §2.3: «человек с плюсом» — квадрат 32×32. Класс в разметке был,
   правила не было. */
.ajbtn.jsq{width:32px;padding:0;justify-content:center}
/* №7 сверки Design · §2.5: стрелка в списке суммы. Базовые свойства уголка описаны
   только внутри .ajbtn и .esnz — здесь он оставался без размеров и границ, то есть
   невидимым, и поворот ничего не поворачивал. */
.espop .chev{width:6px;height:6px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);flex:none}
.espop .sp-row .chev.r{transform:rotate(-45deg)}
/* числа в списке — на одной вертикали с итогом */
.sp-row>span,.sp-tot>span{min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sp-row .num,.sp-tot b{min-width:68px;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.sp-ov{gap:6px}

/* 08.10: перерыв внутри смены — та же полоса, что нерабочие часы, но светлее и с
   названием: «нерабочее» и «обед» читаются по-разному, хотя занимают одинаково. */
.esoff.esbreak{background:repeating-linear-gradient(135deg,
  rgba(180,170,158,.16) 0 7px, rgba(180,170,158,.07) 7px 14px)}
/* 08.10 (Тарик): «пусть идёт столбиком — первый столбик время, второй название».
   Раньше обе части шли одной строкой и время обрезалось первым. */
.esoff span{display:flex;flex-direction:column;gap:1px;line-height:1.2;min-width:0}
.esoff span b{font-weight:700;font-variant-numeric:tabular-nums}
.esoff.esbreak span{font-size:10.5px;opacity:.9}
.esoff.esbreak span b{font-size:10.5px}

/* ТЗ «График работы», раздел 4: дни шаблона — компактные строки, а не карточки.
   Одна строка: день · галочка · «с» — «до»; блоки под ней с отступом; выключенный
   день бледнеет и прячет блоки. */
.gr-side .wkd{display:flex;flex-direction:column;gap:5px;padding-bottom:8px;
  border-bottom:1px solid var(--box-line)}
.gr-side .wkd:last-child{border-bottom:0;padding-bottom:0}
.gr-side .wk{display:grid;grid-template-columns:30px 22px minmax(0,1fr) 12px minmax(0,1fr);
  gap:4px;align-items:center}
.gr-side .wk .d{font-weight:700;font-size:12px}
.gr-side .wk input[type=checkbox]{width:16px;height:16px;accent-color:var(--sel);margin:0}
.gr-side .wk .m{text-align:center}
.gr-side .wkb{display:flex;flex-direction:column;gap:5px}
.gr-side .wkb:empty{display:none}
/* ⛔ 08.10, Тарик: «окна, в которые я вбиваю время, выглядят скукоженными». Строка
   блока шла по сетке дня (30/22/1fr/12/1fr/auto/auto): длинное название забирало
   место через auto, а поля времени сжимались в ноль. Своя сетка: отступ под день,
   два поля времени, название, крестик. */
.gr-side .wkbr{grid-template-columns:24px 64px 64px minmax(0,1fr) 22px;gap:4px}
.gr-side .wkbr .selw>select{padding:0 18px 0 6px;font-size:12px}
.gr-side .wkn{min-width:0}
.gr-side .wkadd{font-size:11.5px;align-self:flex-start;padding-left:56px}
.gr-side .wkd.offd .wk select{opacity:.4;pointer-events:none}
.gr-side .wkd.offd .wkb,.gr-side .wkd.offd .wkadd{display:none}

/* ═══════════ РАЗДЕЛ «МАСТЕРА» v2 · макет 12-masters.html (ТЗ 09.10.2026) ═══════════
   Экран собран по макету 1:1: одна строка поиска, список без горизонтальной
   прокрутки, окна 440 и 620. Переключателя «плитки/список» и выбора «по 25/50/100»
   здесь нет — их убрали из кода вместе со старым экраном. */
.ms-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ms-top>b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.ms-cnt{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:var(--panel);border:1px solid var(--box-line);font-size:11.5px;font-weight:700;
  color:var(--brand)}
.ms-find{position:relative;display:flex;align-items:center;flex:1 1 240px;max-width:380px}
.ms-find svg{position:absolute;left:11px;width:15px;height:15px;stroke:var(--faint);
  fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.ms-find input{width:100%;height:32px;padding:0 12px 0 32px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);font:inherit;font-size:13px;color:var(--ink);
  outline:none}
.ms-find input:focus{border-color:var(--faint)}
.ms-arch,.ms-add{height:32px;padding:0 14px;border-radius:9px;font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;white-space:nowrap}
.ms-arch{border:1px solid var(--line);background:var(--panel);color:var(--brand)}
.ms-arch:hover{background:var(--soft)}
.ms-arch.on{background:var(--sel);border-color:var(--sel);color:#fff}
.ms-add{border:0;background:var(--brand-2);color:#FFFDFB}
.ms-add:hover{background:#342B24}
/* ⛔⛔ Тарик 09.10: «в услугах 46 строк, а скролла вниз нет». Область содержимого —
   flex-колонка, и мои блоки по умолчанию сжимались (flex-shrink:1): таблица на
   2392 px ужималась до высоты экрана, а overflow:hidden (он тут ради скруглённых
   углов) обрезал всё, что не влезло. Высоту таблицы задаёт её содержимое, прокрутка
   остаётся у области. */
.ms-top,.ms-tbl,.ms-foot{flex:none}
.ms-tbl{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.ms-hd,.ms-row{display:grid;grid-template-columns:112px 1.4fr 1fr 150px 24px;
  align-items:center;gap:12px;padding:0 18px}
.ms-hd{height:36px;font-size:11px;font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--box-line)}
.ms-hd>div:nth-child(-n+3){cursor:pointer;user-select:none}
.ms-hd>div:nth-child(-n+3):hover{color:var(--brand)}
.ms-ar{margin-left:5px;font-size:9px}
.ms-row{height:52px;cursor:pointer;border-bottom:1px solid var(--box-line)}
.ms-row:last-child{border-bottom:0}
.ms-row:hover{background:var(--box-bg)}
.ms-uid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--brand)}
.ms-nm{display:flex;align-items:center;gap:10px;min-width:0}
.ms-nm b{font-size:13px;font-weight:700;display:block}
.ms-nm small{display:block;font-size:11px;color:var(--red);margin-top:1px}
.ms-av{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  flex:0 0 30px;border-radius:999px;background:var(--cream);font-size:11px;font-weight:700;
  color:var(--brand)}
.ms-av.big{width:38px;height:38px;flex-basis:38px;font-size:13px}
.ms-cat{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;
  font-size:11.5px;font-weight:700}
.ms-cat.ord{background:var(--cream);color:var(--brand)}
.ms-cat.vip{background:var(--brand-2);color:#FFFDFB}
.ms-cat.diag{background:var(--soft);color:var(--brand);border:1px solid var(--line)}
.ms-cat.none{color:var(--faint);font-weight:600}
.ms-sv{height:28px;padding:0 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font:inherit;font-size:12px;font-weight:600;color:var(--brand);
  cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ms-sv:hover{background:var(--soft)}
.ms-sv i{font-style:normal;font-size:11px;font-weight:700;background:var(--cream);
  border-radius:999px;padding:1px 7px}
.ms-nosv{font-size:12px;color:var(--faint);border:1px dashed var(--line);border-radius:9px;
  padding:5px 10px}
.ms-go{color:var(--faint);text-align:right;font-size:15px}
.ms-row.arch .ms-uid,.ms-row.arch .ms-nm b{color:var(--muted)}
.ms-empty{padding:28px 18px;text-align:center;font-size:13px;color:var(--muted)}
.ms-foot{margin-top:10px;font-size:11.5px;color:var(--muted)}

/* окна раздела: 440 — услуги мастера, 620 — карточка (ТЗ §3.1 и §4) */
.mswbg{position:fixed;inset:0;background:rgba(43,36,30,.45);z-index:70;display:flex;
  align-items:center;justify-content:center;padding:24px}
.msw{background:var(--panel);border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);
  display:flex;flex-direction:column;max-height:88vh;max-width:100%;overflow:hidden}
.msw-hd{display:flex;align-items:center;gap:12px;padding:18px 20px 12px}
.msw-hd b{font-size:15px;font-weight:800;display:block}
.msw-hd small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.msw-x{border:0;background:none;font-size:15px;color:var(--faint);cursor:pointer;
  line-height:1;padding:4px}
.msw-x:hover{color:var(--brand)}
.msw-body{padding:0 20px;overflow:auto;flex:1}
.msw-ft{display:flex;align-items:center;gap:8px;padding:14px 20px;
  border-top:1px solid var(--box-line)}
.msw-ghost,.msw-go{height:32px;padding:0 16px;border-radius:9px;font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer}
.msw-ghost{border:1px solid var(--line);background:var(--panel);color:var(--brand)}
.msw-ghost:hover{background:var(--soft)}
.msw-go{border:0;background:var(--brand-2);color:#FFFDFB}
.msw-go:hover{background:#342B24}

/* §3.1 — услуги мастера */
.msv-body{padding-bottom:6px}
.msv-sec{display:flex;align-items:center;gap:8px;padding:12px 2px 6px;font-size:11.5px;
  font-weight:700;color:var(--brand)}
.msv-sec i{font-style:normal;color:var(--muted);font-weight:600}
.msv-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  font-size:12.5px}
.msv-row:nth-child(even){background:var(--box-bg)}
.msv-row b{font-weight:500;flex:1;min-width:0}
.msv-min{color:var(--muted);font-size:11.5px;white-space:nowrap}
.msv-price{font-weight:700;white-space:nowrap}

/* §4 — карточка мастера */
.msf-body{padding-bottom:14px}
.msf-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.msf-two label{font-size:11.5px;color:var(--muted);display:block}
.msf-inp{width:100%;height:32px;margin-top:5px;padding:0 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);font:inherit;font-size:13px;color:var(--ink);
  outline:none}
.msf-inp:focus{border-color:var(--faint)}
.msf-inp.bad{border-color:var(--red)}
.msf-lbl{font-size:11.5px;color:var(--muted);margin:14px 0 5px}
.msf-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;
  background:var(--cream);border-radius:9px}
.msf-seg.bad{outline:1px solid var(--red)}
.msf-seg button{height:30px;border:0;border-radius:7px;background:none;font:inherit;
  font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer}
.msf-seg button.on{background:var(--panel);box-shadow:0 1px 2px rgba(43,36,30,.12)}
.msf-list{border:1px solid var(--box-line);border-radius:9px;overflow:hidden}
.msf-list.bad{border-color:var(--red)}
.msf-hint{padding:24px 16px;text-align:center;font-size:12.5px;color:var(--muted);
  border:1px dashed var(--line);border-radius:9px;margin:0}
.msf-sec+.msf-sec{border-top:1px solid var(--box-line)}
.msf-shd{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--box-bg)}
.msf-shd b{font-size:12px;font-weight:700}
.msf-shd span{font-size:11.5px;color:var(--muted);font-weight:600}
.msf-shd a{font-size:11.5px;font-weight:700;color:var(--brand);cursor:pointer}
.msf-shd a:hover{text-decoration:underline}
.msf-row{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:12.5px;
  cursor:pointer}
.msf-row:hover{background:var(--box-bg)}
.msf-row b{font-weight:500;flex:1;min-width:0}
.msf-row.off{cursor:default;color:var(--faint)}
.msf-row.off:hover{background:none}
.msf-row.off b{color:var(--faint)}
.msf-min{width:84px;text-align:right;white-space:nowrap;color:var(--muted);font-size:11.5px}
.msf-price{width:92px;text-align:right;white-space:nowrap;font-weight:700}
.msf-row.off .msf-price{font-weight:500;color:var(--faint)}
.msf-box{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  flex:0 0 16px;border:1px solid var(--line);border-radius:5px;background:var(--panel);
  font-size:10px;color:#fff;line-height:1}
.msf-box.on{background:var(--sel);border-color:var(--sel)}
.msf-row.off .msf-box{background:var(--soft);border-style:dashed}
.msf-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.msf-checks label{display:flex;align-items:center;gap:9px;font-size:12.5px;cursor:pointer}
.msf-err{font-size:12.5px;font-weight:700;color:var(--red)}

/* ═══════════ РАЗДЕЛЫ «УСЛУГИ» и «РЕСУРСЫ» v2 (ТЗ 09.10.2026) ═══════════
   Таблицы и окна те же, что у «Мастеров» (.ms-*, .msw-*, .msf-*) — здесь только
   свои колонки и поля карточки. */
.sv-row{grid-template-columns:112px minmax(0,1.6fr) 124px 44px 170px 120px 120px 24px}
.rs-row{grid-template-columns:112px minmax(0,1fr) 150px 24px}
.sv-nm{min-width:0}
.sv-nm b{font-size:13px;font-weight:700;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sv-min{text-align:right;font-variant-numeric:tabular-nums}
.sv-price{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  font-size:12.5px}
.sv-price b{font-weight:700}
.sv-price i{font-style:normal;color:var(--faint)}
.sv-price small{color:var(--muted);font-size:11px}
.ms-dash{color:var(--faint)}
/* ТЗ §3: на узком экране сначала уходит колонка «Ресурсы» — она видна в карточке */
@media (max-width:1100px){
  /* ⚠️ Колонку схлопываем, а ячейку оставляем в потоке: display:none у ячейки
     сдвинул бы все следующие на одну колонку — «Мастера» уехали бы в нулевую
     ширину, а стрелка встала на их место. Прячем содержимое, не сетку. */
  .sv-row{grid-template-columns:112px minmax(0,1.5fr) 118px 40px 160px 0 118px 24px}
  .sv-row .sv-res{overflow:hidden}
  .sv-row .sv-res>*{display:none}
}
@media (max-width:1000px){
  .ms-hd,.ms-row{gap:8px;padding:0 12px}
  /* Колонки считаны под 960 px: метка вида «Индивидуальная» и кнопка «Мастера [N]»
     должны помещаться целиком — обрезка здесь читается как потеря данных. */
  .sv-row{grid-template-columns:70px minmax(0,1fr) 100px 28px 118px 0 116px 0}
  .sv-row .ms-go{display:none}
  .ms-cat{padding:0 6px;font-size:10px}
  .ms-sv{padding:0 7px;font-size:11px;gap:5px}
  .ms-sv i{padding:1px 5px;font-size:10px}
  .sv-price{font-size:11.5px}
}

/* карточка услуги */
.sv-lbl{display:block;font-size:11.5px;color:var(--muted)}
.sv-lbl .msf-inp{margin-top:5px}
.sv-min-row{display:flex;align-items:center;gap:10px}
.sv-quick{display:flex;gap:6px}
.sv-quick button{height:32px;min-width:46px;padding:0 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);font:inherit;font-size:12.5px;font-weight:700;
  color:var(--brand);cursor:pointer}
.sv-quick button:hover{background:var(--soft)}
.sv-quick button.on{background:var(--sel);border-color:var(--sel);color:#fff}
.sv-prow{display:flex;align-items:center;gap:10px;margin:14px 0 5px}
.sv-one{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--brand);
  cursor:pointer}
.sv-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sv-prices.one{grid-template-columns:1fr}
.sv-prices label{font-size:11.5px;color:var(--muted);display:block}
.sv-inp{display:flex;align-items:center;height:32px;margin-top:5px;padding:0 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.sv-inp input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:13px;
  color:var(--ink);outline:none;text-align:right;font-variant-numeric:tabular-nums}
.sv-inp i{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:7px}
.sv-bad .sv-inp,.sv-bad.sv-chips{outline:1px solid var(--red);border-radius:9px}
.sv-hint{font-size:11.5px;color:var(--muted);margin-top:6px}
.sv-chips{display:flex;flex-wrap:wrap;gap:7px}
.sv-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);font:inherit;
  font-size:12.5px;color:var(--brand);cursor:pointer}
.sv-chip:hover{background:var(--soft)}
.sv-chip.on{background:var(--box-bg);border-color:var(--faint)}
.sv-uid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--cream);border-radius:6px;padding:2px 7px;color:var(--brand)}
.msf-row .ms-av{width:24px;height:24px;flex-basis:24px;font-size:9.5px}

/* карточка ресурса */
.rs-find{max-width:none;margin-bottom:8px}
.rs-list{max-height:300px;overflow:auto}

/* заголовок группы услуг в списке (Тарик 09.10: «нужно группирование») */
.sv-grp{display:flex;align-items:center;gap:8px;padding:9px 18px;background:var(--box-bg);
  border-bottom:1px solid var(--box-line);font-size:11.5px;font-weight:700;color:var(--brand)}
.sv-grp span{color:var(--muted);font-weight:600}

/* ⛔ Тарик 09.10: «„Отмена“ чуть-чуть вылазит за рамки». Левая панель карточки
   визита узкая, а кнопки стояли во flex: «Готово» занимала всё, «Отмена» не
   сжималась и выходила за край. Делим ширину поровну и разрешаем сжатие. */
.vp-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:2px}
.vp-btns>button{min-width:0;width:100%;justify-content:center;padding:0 8px}

/* ═══════════ РАЗДЕЛ «АБОНЕМЕНТЫ» v2 (ТЗ 09.10.2026) ═══════════ */
.ab-tabs{display:flex;gap:4px;padding:3px;background:var(--cream);border-radius:10px}
.ab-tabs button{height:28px;padding:0 12px;border:0;border-radius:8px;background:none;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.ab-tabs button.on{background:var(--panel);box-shadow:0 1px 2px rgba(43,36,30,.12)}
.ab-tabs i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.ab-chips{display:flex;gap:7px;margin:0 0 12px}
.ab-chips button{height:28px;padding:0 11px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);font:inherit;font-size:12px;font-weight:600;color:var(--brand);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ab-chips button:hover{background:var(--soft)}
.ab-chips button.on{background:var(--sel);border-color:var(--sel);color:#fff}
.ab-chips i{font-style:normal;font-size:11px;opacity:.75}
.ab-row{grid-template-columns:104px minmax(0,1.5fr) 150px 64px 72px 92px 72px 112px 24px;
  align-items:center}
.ab-sold{grid-template-columns:104px minmax(0,1fr) minmax(0,1.4fr) 88px 80px 96px 108px}
.ab-tbl .ms-row{height:auto;min-height:52px;padding-top:7px;padding-bottom:7px}
.ab-nm b{font-size:13px;font-weight:700;display:block;white-space:normal;line-height:1.3}
.ab-nm span{font-size:12.5px;white-space:normal;line-height:1.3;display:block}
.ab-sec{font-size:12px;color:var(--muted)}
.ab-sec2{display:none}
.ab-num{text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px}
.ab-grp{display:flex;align-items:center;gap:9px;height:48px;padding:0 18px;
  background:var(--box-bg);border-bottom:1px solid var(--box-line);cursor:pointer;
  font-size:13.5px;font-weight:800;color:var(--ink);user-select:none}
.ab-grp:hover{background:var(--cream)}
.ab-ch{display:inline-block;color:var(--faint);transition:transform .12s}
.ab-grp.on .ab-ch{transform:rotate(90deg)}
.ab-n{font-size:11.5px;font-weight:600;color:var(--muted)}
.ab-st{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;
  font-size:11.5px;font-weight:700}
.ab-st.live{background:var(--cream);color:var(--brand)}
.ab-st.frozen{background:#E4EDF2;color:#3E5C6B}
.ab-st.debt{background:#fbf6e8;color:#8a5a00;border:1px solid var(--gold)}
.ab-st.arch{background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.ab-blk{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 8px}
.ab-blk:first-child{margin-top:4px}
.ab-seg4{grid-template-columns:repeat(5,1fr)}
.ab-срок{display:flex;align-items:center;gap:4px;height:32px;margin-top:5px}
.ab-срок input{width:64px;height:32px;padding:0 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);font:inherit;font-size:13px;color:var(--ink);
  outline:none;text-align:right;font-variant-numeric:tabular-nums}
.ab-срок button{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font:inherit;font-size:12px;font-weight:600;color:var(--brand);
  cursor:pointer}
.ab-срок button.on{background:var(--sel);border-color:var(--sel);color:#fff}
.ab-name{margin-top:14px;padding:11px 13px;background:var(--box-bg);
  border:1px solid var(--box-line);border-radius:9px}
.ab-name small{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.ab-name b{font-size:13px;font-weight:700}
@media (max-width:1100px){
  .ab-row{grid-template-columns:96px minmax(0,1.6fr) 0 56px 68px 86px 64px 104px 24px}
  .ab-row .ab-sec{overflow:hidden}
  /* ⛔ 26.10: было display:none — ячейка выпадала из сетки, и «10» (практики) вставала в
     нулевую колонку раздела, «3 months» — в колонку практик: всё съезжало на одну влево
     (на любом экране до 1100 px, ноутбук 1024 тоже). Ячейка остаётся, просто не видна. */
  .ab-row .ab-sec:not(.ms-hd *){visibility:hidden}
  .ab-sec2{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
}

/* Доступ мастера в его кабинет (ТЗ кабинета §1.1). Блок живёт в карточке мастера:
   доступ выдаёт тот же человек, который заводит мастера. */
.msf-dost{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--box-bg)}
.msf-drow{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0}
.msf-drow span{color:var(--muted)}
.msf-dpass{margin-top:8px;padding:8px 10px;border-radius:9px;background:var(--cream);font-size:13px}
.msf-dbtn{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* Последняя практика в пакете (решение Тарика 11.10): её видно и в сетке цветом,
   и здесь словами — чтобы разговор о продлении состоялся до практики, а не после. */
.vlast{margin-top:4px;display:inline-block;font-size:11.5px;font-weight:700;
  color:var(--ink);background:var(--cream);border-radius:7px;padding:3px 8px}

/* Оплата онлайн: строка ссылки Stripe в карточке визита (14.10) */
.pay.slrow{flex-wrap:wrap;row-gap:6px}
.sl-wait{font-size:12px;color:var(--gold);font-weight:700}
.sl-paid{font-size:12px;color:var(--green);font-weight:700}

/* карандашик у строки истории операций (14.10) */
.hbtn{all:unset;cursor:pointer;font-size:11px;color:var(--muted);border:1px solid var(--line);
  border-radius:6px;padding:1px 6px;line-height:1.4}
.hbtn:hover{color:var(--ink);border-color:var(--ink)}

/* маяк пакета в списке проданных (15.10) */
.ab-bk{font-size:10px;font-weight:800;letter-spacing:.04em;padding:1px 7px;
  border-radius:999px;vertical-align:1px}
.ab-bk.risk{color:var(--gold);border:1px solid var(--gold)}
.ab-bk.end{color:var(--red);border:1px solid var(--red)}
.ms-row.click{cursor:pointer}
.ms-row.click:hover{background:var(--soft)}

/* пилюля маяка пакетов в шапке дня (15.10) — как просроченные, но золотая */
.nschip.abchip{border-color:var(--gold);color:var(--brand)}
.nschip.abchip .nsn{color:var(--gold)}
/* «↻ Перезаписаться» участника занятия (17.10): список занятий с местами */
.gzrbl{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.gzrb{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:center;
  text-align:left;padding:9px 12px;border:1px solid var(--box-line,var(--line));
  border-radius:11px;background:var(--panel);font:inherit;color:var(--ink);cursor:pointer}
.gzrb:hover{background:var(--box-bg,var(--soft))}
.gzrb.off{opacity:.5;cursor:default}
.gzrb .d,.gzrb .n{display:flex;flex-direction:column;min-width:0}
.gzrb b{font-size:12.5px;font-weight:700}
.gzrb small{font-size:11.5px;color:var(--muted)}
.gzrb .f{font-size:11.5px;color:var(--brand);font-weight:600;white-space:nowrap}


/* ═══ Окно «Перезаписать» — макет schedule/19-reschedule 1:1 (ТЗ 16.10) ═══
   Классы макета короткие (.d .m .t .card .note .empty) и в CRM уже заняты —
   поэтому приставка rb-, значения те же, что в эталоне. */
.rb-veil{position:fixed;inset:0;background:rgba(43,36,30,.45);display:grid;place-items:center;padding:20px;z-index:120}
.rb-rs{width:720px;max-width:100%;max-height:calc(100vh - 40px);background:var(--panel);border-radius:14px;box-shadow:0 1px 2px rgba(43,36,30,.05),0 24px 60px -20px rgba(43,36,30,.45);display:flex;flex-direction:column;overflow:hidden;font-size:12.5px;color:var(--ink)}
.rb-rs button{font:inherit}
.rb-hd{display:flex;align-items:flex-start;gap:12px;padding:16px 14px 12px 18px;border-bottom:1px solid var(--line)}
.rb-hd .rb-ti{flex:1;min-width:0}
.rb-hd b{display:block;font-size:15px;font-weight:800}
.rb-hd small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.rb-x{all:unset;cursor:pointer;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--muted);font-size:15px;flex:none}
.rb-x:hover{background:var(--soft);color:var(--ink)}
.rb-bd{display:grid;grid-template-columns:minmax(0,1fr) 230px;min-height:0;flex:1}
.rb-fm{padding:14px 18px 16px;overflow:auto;display:flex;flex-direction:column;gap:16px;min-height:0}
.rb-side{border-left:1px solid var(--line);background:var(--box-bg);padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.rb-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.rb-lbl i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;color:var(--faint)}
.rb-sec{display:flex;flex-direction:column;gap:8px}
.rb-pr{position:relative}
.rb-prb{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 12px;gap:10px;align-items:center;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.rb-prb:hover{border-color:var(--faint)}
.rb-prb b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.rb-prb small{font-size:11.5px;color:var(--muted)}
.rb-prb .rb-p{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.rb-chev{width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px)}
.rb-prd{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px;max-height:300px}
.rb-prd input{height:32px;border:1px solid var(--line);border-radius:9px;background:var(--box-bg);padding:0 10px;font:inherit;color:var(--ink);margin-bottom:4px}
.rb-prd input:focus{outline:none;border-color:var(--ink)}
.rb-prl{overflow:auto;display:flex;flex-direction:column;gap:1px}
.rb-prl .rb-g{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;padding:8px 8px 3px}
.rb-prl button{all:unset;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:7px 8px;border-radius:8px;font-size:12.5px}
.rb-prl button:hover{background:var(--soft)}
.rb-prl button.on{background:var(--cream);font-weight:700}
.rb-prl button.off{cursor:default;color:var(--faint)}
.rb-prl button.off:hover{background:transparent}
.rb-prl button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-prl button em{font-style:normal;color:var(--muted);font-size:11.5px;white-space:nowrap}
.rb-prl button i{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rb-prl .rb-no{padding:14px;color:var(--muted);text-align:center}
.rb-ms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.rb-m{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center;padding:7px 9px;border:1px solid var(--box-line);border-radius:10px;background:var(--panel);min-height:46px}
.rb-m:hover{background:var(--box-bg)}
.rb-m .rb-av{width:28px;height:28px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;place-items:center;font-size:10.5px;font-weight:800}
.rb-m b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-m small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.rb-m.on{border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
.rb-m.on .rb-av{background:var(--sel);color:var(--panel)}
.rb-m.off{cursor:default;background:var(--box-bg)}.rb-m.off b,.rb-m.off small{color:var(--faint)}.rb-m.off .rb-av{color:var(--faint)}
.rb-m.off:hover{background:var(--box-bg)}
.rb-dt{display:grid;grid-template-columns:32px repeat(7,minmax(0,1fr)) 32px;gap:4px;align-items:stretch}
.rb-nv{all:unset;cursor:pointer;border-radius:9px;display:grid;place-items:center;color:var(--brand);font-size:15px}
.rb-nv:hover{background:var(--soft)}
.rb-d{all:unset;cursor:pointer;border-radius:10px;border:1px solid var(--box-line);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:48px}
.rb-d small{font-size:10.5px;color:var(--muted);font-weight:600}
.rb-d b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.rb-d:hover{background:var(--box-bg)}
.rb-d.on{background:var(--sel);border-color:var(--sel);color:var(--panel)}.rb-d.on small{color:var(--panel);opacity:.75}
.rb-d.off{cursor:default;background:var(--box-bg)}.rb-d.off b,.rb-d.off small{color:var(--faint)}
.rb-d.td b::after{content:"";display:block;width:4px;height:4px;border-radius:999px;background:var(--gold);margin:2px auto 0}
.rb-tg{display:flex;flex-direction:column;gap:8px}
.rb-tg .rb-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:start}
.rb-tg .rb-row>span{font-size:11.5px;color:var(--muted);padding-top:7px}
.rb-ts{display:flex;flex-wrap:wrap;gap:5px}
.rb-ts .rb-t{all:unset;cursor:pointer;height:30px;min-width:56px;box-sizing:border-box;padding:0 8px;border-radius:8px;border:1px solid var(--box-line);background:var(--panel);display:grid;place-items:center;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.rb-ts .rb-t:hover{border-color:var(--faint)}
.rb-ts .rb-t.on{background:var(--sel);border-color:var(--sel);color:var(--panel)}
.rb-ts .rb-t.off{cursor:default;color:var(--faint);background:var(--box-bg);text-decoration:line-through;text-decoration-color:var(--line)}
.rb-ts .rb-t.off:hover{border-color:var(--box-line)}
.rb-ts .rb-t.cur{box-shadow:inset 0 0 0 1.5px var(--gold)}
.rb-empty{font-size:12px;color:var(--muted);padding:10px 12px;border:1px dashed var(--line);border-radius:10px}
.rb-card{background:var(--panel);border:1px solid var(--box-line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.rb-card .rb-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.rb-card .rb-r{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;font-size:12px;line-height:1.35}
.rb-card .rb-r span{color:var(--muted)}
.rb-card .rb-r b{font-weight:600;overflow-wrap:anywhere}
.rb-card .rb-r.ch b{font-weight:800}
.rb-card .rb-r.ch b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--gold);margin-right:6px;vertical-align:1px}
.rb-card.now{border-color:var(--ink)}
.rb-res{display:flex;align-items:center;gap:6px;font-size:12px}
.rb-res i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--brand);background:var(--cream);border-radius:6px;padding:1px 6px}
.rb-warn{font-size:11.5px;line-height:1.4;color:var(--red);font-weight:600}
.rb-note{font-size:11.5px;line-height:1.4;color:var(--muted)}
.rb-ft{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.rb-ft .rb-s{flex:1;min-width:0;font-size:12px;color:var(--muted)}
.rb-ft .rb-s.bad{color:var(--red);font-weight:600}
.rb-cn{all:unset;cursor:pointer;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:13px;font-weight:700;color:var(--brand);display:flex;align-items:center}
.rb-cn:hover{background:var(--soft)}
.rb-go{all:unset;cursor:pointer;height:36px;padding:0 18px;border-radius:10px;background:var(--brand-2);color:var(--panel);font-size:13px;font-weight:700;display:flex;align-items:center;white-space:nowrap}
.rb-go:hover{background:var(--brand)}
.rb-go[disabled]{background:var(--cream);color:var(--faint);cursor:not-allowed}
.rb-done{padding:28px 24px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.rb-done .rb-ic{width:44px;height:44px;border-radius:999px;background:var(--green);color:var(--panel);display:grid;place-items:center;font-size:22px;font-weight:800}
.rb-done .rb-tt{font-size:15px;font-weight:800}
.rb-done .rb-rows{width:100%;max-width:440px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:6px 0;text-align:left}
.rb-done .rb-rows div{display:grid;grid-template-columns:70px minmax(0,1fr) 16px minmax(0,1fr);gap:8px;font-size:12.5px;align-items:baseline}
.rb-done .rb-rows span{color:var(--muted)}.rb-done .rb-rows s{color:var(--muted);text-decoration-color:var(--faint)}.rb-done .rb-rows em{font-style:normal;color:var(--faint)}
.rb-done .rb-rows b{font-weight:700}
.rb-done .rb-go{min-width:200px;justify-content:center}
@media (max-width:860px){.rb-bd{grid-template-columns:minmax(0,1fr)}.rb-side{border-left:0;border-top:1px solid var(--line)}}

/* ═══ «ОБЗОР ДНЯ» v2 И ПРАВКА ОПЕРАЦИИ — макет 20-day-overview.html 1:1 (ТЗ 17.10) ═══
   Приставка do- обязательна: имена макета (.row, .btn, .inp, .x, .seg, .k…) в CRM
   уже заняты, и чужое правило молча легло бы на окно. */
.do-veil{position:fixed;inset:0;background:rgba(43,36,30,.45);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px;z-index:60;font-family:Manrope,-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--ink);font-size:12.5px;-webkit-font-smoothing:antialiased}
.do-veil button,.do-ev button{font:inherit;color:inherit}
.do-veil [hidden],.do-ev [hidden]{display:none!important}
.do-ov{width:min(1080px,100%);min-width:0;max-height:calc(100vh - 48px);background:var(--panel);border-radius:16px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);display:flex;flex-direction:column;overflow:hidden}
.do-hd{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px}
.do-hd .do-t{flex:1;min-width:0}
.do-hd .do-t b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em}
.do-hd .do-t small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.do-x{all:unset;cursor:pointer;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--muted);font-size:16px}
.do-x:hover{background:var(--soft);color:var(--ink)}
.do-kpi{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:10px;padding:0 20px}
.do-k{border:1px solid var(--box-line);background:var(--box-bg);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.do-k .do-l{font-size:11.5px;color:var(--muted);font-weight:600}
.do-k .do-v{font-size:20px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.do-k .do-s{font-size:11.5px;color:var(--muted)}
.do-k.do-main{background:var(--brand-2);border-color:var(--brand-2);color:var(--panel)}
.do-k.do-main .do-l,.do-k.do-main .do-s{color:var(--faint)}
.do-k.do-main .do-v{font-size:24px}
.do-split{display:flex;height:6px;border-radius:999px;overflow:hidden;background:rgba(255,253,251,.14);margin-top:4px}
.do-split i{display:block;height:100%}
.do-split .do-c{background:var(--gold)}.do-split .do-b{background:var(--panel)}
.do-leg{display:flex;gap:12px;font-size:11.5px;color:var(--faint)}
.do-leg span{display:inline-flex;align-items:center;gap:5px}
.do-leg span::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--gold)}
.do-leg span.do-lb::before{background:var(--panel)}
.do-k .do-v.do-red{color:var(--red)}.do-k .do-v.do-zero{color:var(--faint)}
.do-bar{display:flex;align-items:center;gap:10px;padding:14px 20px 10px;flex-wrap:wrap}
.do-chips{display:flex;gap:4px;background:var(--cream);border-radius:11px;padding:3px}
.do-chips button{all:unset;cursor:pointer;height:30px;padding:0 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.do-chips button em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.do-chips button:hover{color:var(--ink)}
.do-chips button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.do-chips button.on em{color:var(--brand)}
.do-sr{margin-left:auto;position:relative}
.do-sr input{all:unset;box-sizing:border-box;width:220px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:0 12px 0 32px;font-size:12.5px}
.do-sr input::placeholder{color:var(--faint)}
.do-sr input:focus{border-color:var(--brand)}
.do-sr::before{content:"";position:absolute;left:12px;top:11px;width:9px;height:9px;border:1.6px solid var(--muted);border-radius:999px}
.do-sr::after{content:"";position:absolute;left:21px;top:21px;width:5px;height:1.6px;background:var(--muted);transform:rotate(45deg)}
.do-tb{flex:1;min-height:0;overflow:auto;margin:0 20px;border:1px solid var(--box-line);border-radius:12px}
.do-row{display:grid;grid-template-columns:62px minmax(150px,1.1fr) minmax(0,2.4fr) 110px 112px 104px;gap:12px;align-items:center;padding:0 14px;min-height:56px;border-bottom:1px solid var(--box-line)}
#do-rows .do-row:last-child{border-bottom:0}
.do-row.do-h{min-height:38px;position:sticky;top:0;z-index:1;background:var(--box-bg);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.do-row.do-h .do-r{text-align:right}
.do-row:not(.do-h):hover{background:var(--soft)}
.do-row.do-fresh{animation:do-fr 2.4s ease-out}
@keyframes do-fr{0%{background:rgba(194,163,74,.22)}100%{background:transparent}}
.do-tm{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.do-cl{min-width:0}
.do-cl b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.do-cl small{display:block;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px}
.do-op{min-width:0}
.do-op b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.do-op small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.do-mt{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;background:var(--soft);font-size:12px;font-weight:600;color:var(--brand);white-space:nowrap;justify-self:start}
.do-mt::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--brand)}
.do-mt.do-cash::before{background:var(--gold)}
.do-mt.do-stripe::before{background:var(--sel)}
.do-mt.do-free::before{background:var(--green)}
.do-mt.do-none{background:none;color:var(--faint);padding:0}
.do-mt.do-none::before{display:none}
.do-sum{text-align:right;white-space:nowrap}
.do-sum b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.do-sum b.do-dash{color:var(--faint);font-weight:500}
.do-sum small{display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:10.5px;color:var(--brand);font-weight:700;margin-top:1px}
.do-sum small::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--gold)}
.do-act{display:flex;justify-content:flex-end}
.do-ed{all:unset;cursor:pointer;height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-size:12px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;white-space:nowrap}
.do-ed:hover{border-color:var(--brand);color:var(--ink)}
.do-ed:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.do-lock{font-size:11px;color:var(--faint);text-align:right;line-height:1.3}
.do-row.do-no .do-op b{color:var(--red)}
.do-empty{padding:40px 0;text-align:center;color:var(--muted);font-size:12.5px}
.do-ft{display:flex;align-items:center;gap:10px;padding:12px 20px 16px;font-size:12px;color:var(--muted)}
.do-ft b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.do-ft .do-sp{flex:1}
.do-fsum{white-space:nowrap}
.do-fnote{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* окно правки */
.do-ev{position:fixed;inset:0;background:rgba(43,36,30,.35);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:20px;z-index:61;font-family:Manrope,-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--ink);font-size:12.5px;-webkit-font-smoothing:antialiased}
.do-eb{width:min(500px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--panel);border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.5);display:flex;flex-direction:column}
.do-eb .do-ehd{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 12px}
.do-eb .do-ehd .do-t{flex:1;min-width:0}
.do-eb .do-ehd .do-t b{display:block;font-size:15px;font-weight:800}
.do-eb .do-ehd .do-t small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.do-ebody{padding:0 16px;display:flex;flex-direction:column;gap:12px}
.do-info{border:1px solid var(--box-line);background:var(--box-bg);border-radius:11px;padding:10px 12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;font-size:12px}
.do-info span{color:var(--muted)}
.do-info b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.do-fld .do-lbl{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:5px}
.do-fld .do-lbl em{font-style:normal;color:var(--red)}
.do-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.do-inp{all:unset;box-sizing:border-box;width:100%;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:0 11px;font-size:13px;font-variant-numeric:tabular-nums}
.do-inp:focus{border-color:var(--brand)}
.do-inp.do-bad{border-color:var(--red)}
.do-inp.do-ta{height:64px;padding:8px 11px;line-height:1.4;white-space:pre-wrap}
.do-amt{position:relative}
.do-amt .do-inp{padding-right:48px;font-weight:700}
.do-amt::after{content:"AED";position:absolute;right:11px;top:10px;font-size:12px;color:var(--muted);font-weight:600}
.do-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--cream);border-radius:10px;padding:3px;gap:3px}
.do-seg button{all:unset;cursor:pointer;height:30px;border-radius:8px;text-align:center;font-size:12.5px;font-weight:600;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.do-seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.do-seg button:disabled{color:var(--faint);cursor:not-allowed}
.do-seg.do-m4{grid-auto-flow:row;grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.45fr)}
.do-seg.do-m4 button{font-size:12px;padding:0 4px}
.do-stp{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;height:40px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.do-stp button{all:unset;cursor:pointer;display:grid;place-items:center;font-size:18px;font-weight:600}
.do-stp button:hover{background:var(--soft)}
.do-stp button:disabled{color:var(--faint);cursor:not-allowed;background:none}
.do-stp>button:first-child{border-right:1px solid var(--line)}.do-stp>button:last-child{border-left:1px solid var(--line)}
.do-stp input{all:unset;text-align:center;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.do-hint{font-size:11.5px;color:var(--muted);margin-top:4px}
.do-diff{border-radius:11px;background:var(--soft);padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.do-diff .do-dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.do-diff div{display:flex;justify-content:space-between;gap:10px}
.do-diff span{color:var(--muted)}
.do-diff b{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.do-diff s{color:var(--faint);font-weight:500;margin-right:6px}
.do-diff .do-none{color:var(--faint)}
.do-ef{display:flex;flex-direction:column;gap:12px}
.do-err{font-size:12px;color:var(--red)}
.do-fld .do-err{margin-top:4px}
.do-cpk{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 8px 8px 10px;background:var(--panel)}
.do-cpk.do-chg{border-color:var(--gold);background:var(--box-bg)}
.do-cav{width:30px;height:30px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.do-cnm{flex:1;min-width:0}.do-cnm b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.do-cnm small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.do-cbox{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.do-cres{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto}
.do-crow{all:unset;cursor:pointer;padding:7px 10px;border-radius:9px}
.do-crow:hover,.do-crow:focus-visible{background:var(--soft)}
.do-crow b{display:block;font-weight:600}.do-crow small{display:block;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.do-chint{color:var(--brand);font-weight:600;display:flex;gap:6px;align-items:baseline}
.do-chint::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--gold);transform:translateY(-1px)}
.do-eft{display:flex;align-items:center;gap:8px;padding:14px 16px 16px}
.do-eft .do-sp{flex:1}
.do-btn{all:unset;cursor:pointer;height:36px;padding:0 14px;border-radius:10px;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.do-btn.do-ghost{border:1px solid var(--line);background:var(--panel);color:var(--brand)}
.do-btn.do-ghost:hover{border-color:var(--brand)}
.do-btn.do-dark{background:var(--brand-2);color:var(--panel)}
.do-btn.do-dark:hover{background:var(--brand)}
.do-btn.do-dark:disabled{background:var(--cream);color:var(--faint);cursor:not-allowed}
.do-btn.do-dark.do-redbtn{background:var(--red)}
.do-btn.do-del{color:var(--red);padding:0 4px}
.do-btn.do-del:hover{text-decoration:underline}
.do-cf{border:1px solid var(--box-line);border-radius:11px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--box-bg)}
.do-cf b{font-size:12.5px}
.do-cf .do-row2{display:flex;gap:8px;justify-content:flex-end}
.do-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:70;background:var(--brand-2);color:var(--panel);font-family:Manrope,-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:12.5px;font-weight:600;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow)}
.do-toast[hidden]{display:none}
@media (max-width:1100px){
 .do-row{grid-template-columns:52px minmax(120px,1fr) minmax(0,1.8fr) 96px 96px 96px;gap:10px;padding:0 10px}
 .do-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
 .do-sr input{width:180px}
}


/* ═══ КЛИЕНТСКАЯ БАЗА — макет 12-client-base.html 1:1 (ТЗ 17.10) ═══
   Приставка cb- обязательна: имена макета (.row, .btn, .inp, .md, .dr, .x…) в CRM заняты. */
.cb-wrap{box-sizing:border-box;width:100%;max-width:760px;margin:0 auto;padding:22px 20px 40px;display:flex;flex-direction:column;gap:14px;font-size:12.5px;color:var(--ink)}
.cb-wrap button,.cb-cm button,.cb-md button,.cb-sl button{font:inherit;color:inherit}
.cb-wrap [hidden],.cb-cm [hidden],.cb-md [hidden],.cb-sl [hidden]{display:none!important}
.cb-ph{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.cb-ph .cb-t{flex:1;min-width:0}
.cb-ph h1{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em}
.cb-ph small{display:block;font-size:12px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.cb-btn{all:unset;box-sizing:border-box;cursor:pointer;height:38px;padding:0 15px;border-radius:10px;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.cb-btn.cb-dark{background:var(--brand-2);color:var(--panel)}.cb-btn.cb-dark:hover{background:var(--brand)}
.cb-btn.cb-ghost{border:1px solid var(--line);background:var(--panel);color:var(--brand)}.cb-btn.cb-ghost:hover{border-color:var(--brand);color:var(--ink)}
.cb-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cb-srch{position:relative;display:block}
.cb-srch input{all:unset;box-sizing:border-box;width:100%;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 40px 0 40px;font-size:13.5px;box-shadow:var(--shadow)}
.cb-srch input::placeholder{color:var(--faint)}
.cb-srch input:focus{border-color:var(--brand)}
.cb-srch::before{content:"";position:absolute;left:15px;top:15px;width:10px;height:10px;border:1.7px solid var(--muted);border-radius:999px}
.cb-srch::after{content:"";position:absolute;left:25px;top:26px;width:6px;height:1.7px;background:var(--muted);transform:rotate(45deg)}
.cb-srch .cb-clr{all:unset;cursor:pointer;position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:13px}
.cb-srch .cb-clr:hover{background:var(--soft);color:var(--ink)}
.cb-res{font-size:12px;color:var(--muted);min-height:16px}
.cb-res b{color:var(--ink)}
.cb-list{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.cb-lt{position:sticky;top:0;z-index:1;padding:6px 18px;background:var(--box-bg);border-bottom:1px solid var(--box-line);font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.cb-row{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:12px;padding:0 18px;min-height:46px;border-bottom:1px solid var(--box-line)}
.cb-row:hover{background:var(--soft)}
.cb-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.cb-row .cb-go{width:7px;height:7px;border-right:1.6px solid var(--faint);border-top:1.6px solid var(--faint);transform:rotate(45deg);flex:none;margin-left:4px}
.cb-row:hover .cb-go{border-color:var(--brand)}
.cb-row.cb-on{background:var(--box-bg);box-shadow:inset 3px 0 0 var(--brand)}
.cb-list .cb-row:last-child{border-bottom:0}
.cb-row .cb-av{width:30px;height:30px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.cb-row b{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-row b mark{background:rgba(194,163,74,.28);color:inherit;border-radius:3px;padding:0 1px}
.cb-row small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cb-row.cb-new{animation:cb-nw 2.6s ease-out}
@keyframes cb-nw{0%{background:rgba(194,163,74,.24)}100%{background:transparent}}
.cb-more{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;font-size:12px;color:var(--muted);border-top:1px solid var(--box-line)}
.cb-empty{padding:44px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.cb-empty b{font-size:15px;font-weight:800}
.cb-empty span{font-size:12.5px;color:var(--muted);max-width:380px;line-height:1.5}
.cb-empty .cb-btn{margin-top:6px}
.cb-md{position:fixed;inset:0;z-index:60;background:rgba(43,36,30,.45);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:20px;font-size:12.5px;color:var(--ink)}
.cb-mb{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--panel);border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);display:flex;flex-direction:column;gap:12px;padding:16px}
.cb-mh{display:flex;align-items:flex-start;gap:10px}
.cb-mh .cb-t{flex:1;min-width:0}
.cb-mh b{display:block;font-size:15px;font-weight:800}
.cb-mh small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.cb-x{all:unset;cursor:pointer;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--muted);font-size:15px;flex:none}
.cb-x:hover{background:var(--soft);color:var(--ink)}
.cb-g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cb-lbl{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:5px}
.cb-lbl em{font-style:normal;color:var(--red)}
.cb-inp{all:unset;box-sizing:border-box;display:block;width:100%;height:38px;line-height:36px;font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:0 11px;font-size:13px}
.cb-inp:focus{border-color:var(--brand)}
.cb-inp.cb-bad{border-color:var(--red)}
.cb-inp::placeholder{color:var(--faint)}
.cb-ph2{display:grid;grid-template-columns:104px minmax(0,1fr);gap:6px}
.cb-selw{position:relative}
.cb-selw select{all:unset;box-sizing:border-box;display:block;width:100%;height:38px;line-height:36px;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:0 26px 0 10px;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums}
.cb-selw::after{content:"";position:absolute;right:11px;top:14px;width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.cb-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--cream);border-radius:10px;padding:3px;gap:3px}
.cb-seg button{all:unset;cursor:pointer;height:32px;border-radius:8px;text-align:center;font-size:12.5px;font-weight:600;color:var(--brand)}
.cb-seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.cb-err{font-size:12px;color:var(--red)}
.cb-dup{border-radius:11px;background:var(--soft);padding:10px 12px;font-size:12px;line-height:1.5;color:var(--brand)}
.cb-dup b{color:var(--ink)}
.cb-mf{display:flex;justify-content:flex-end;gap:8px}
.cb-note{font-size:11.5px;color:var(--muted)}
.cb-cb{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px}
.cb-cb h3{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cb-ab{border:1px solid var(--box-line);background:var(--box-bg);border-radius:11px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.cb-ab .cb-hd{display:flex;align-items:center;gap:6px}
.cb-ab .cb-hd b{font-weight:800;font-variant-numeric:tabular-nums}
.cb-ab .cb-nm{font-size:12px;color:var(--brand)}
.cb-ab .cb-ln{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cb-ab .cb-ln b{color:var(--ink);font-weight:700}
.cb-ab .cb-bar{height:6px;border-radius:999px;background:var(--cream);overflow:hidden;margin-top:3px}
.cb-ab .cb-bar i{display:block;height:100%;background:var(--brand)}
.cb-ab.cb-old{background:var(--panel)}
.cb-ab.cb-old .cb-hd b,.cb-ab.cb-old .cb-nm{color:var(--muted)}
.cb-tg{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--cream);color:var(--brand);font-size:10.5px;font-weight:700}
.cb-tg.cb-warn{background:var(--soft);color:var(--brand)}
.cb-tg.cb-warn::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--gold);margin-right:5px}
.cb-mt{font-size:12.5px;color:var(--faint);font-weight:600}
.cb-ef{display:flex;flex-direction:column;gap:12px}
.cb-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;background:var(--brand-2);color:var(--panel);font-size:12.5px;font-weight:600;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow)}
.cb-toast[hidden]{display:none}
/* ── v2 (ТЗ PROMPT-klientskaya-baza-v2, 18.10): карточка — окно по центру с вкладками,
   окно «Продажа». Перенос макета 12-client-base.html 1:1, приставка cb- та же. */
.cb-cm{position:fixed;inset:0;z-index:70;background:rgba(43,36,30,.45);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:20px;font-size:12.5px;color:var(--ink)}
.cb-cmb{width:min(980px,100%);height:min(740px,calc(100vh - 40px));background:var(--bg);border-radius:16px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);display:flex;flex-direction:column;overflow:hidden;animation:cb-cmin .18s ease-out}
@keyframes cb-cmin{from{transform:translateY(8px) scale(.99);opacity:0}to{transform:none;opacity:1}}
.cb-cmh{flex:none;display:flex;align-items:center;gap:14px;padding:18px 18px 0 20px;background:var(--panel)}
.cb-cmh .cb-av{width:52px;height:52px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;place-items:center;font-size:16px;font-weight:800;flex:none}
.cb-cmh .cb-t{flex:1;min-width:0}
.cb-cmh .cb-t b{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-cmh .cb-t small{display:block;font-size:12px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-cmt{flex:none;display:flex;gap:24px;padding:0 20px;margin-top:12px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto}
.cb-cmt button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:44px;font-size:13px;font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cb-cmt button:hover{color:var(--ink)}
.cb-cmt button.on{color:var(--ink);border-bottom-color:var(--gold)}
.cb-cmt button:disabled{opacity:.4;cursor:not-allowed}
.cb-cmt button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.cb-cmt .cb-c{min-width:18px;height:18px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--cream);color:var(--brand);font-size:10.5px;font-weight:800;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.cb-cmc{flex:1;min-height:0;overflow:auto;padding:18px 20px 24px;display:flex;flex-direction:column;gap:14px}
.cb-cmf{flex:none;display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--panel);border-top:1px solid var(--line)}
.cb-cmf .cb-note{margin-right:auto}
.cb-sh{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.cb-eb{all:unset;cursor:pointer;height:30px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font-size:12px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.cb-eb:hover{border-color:var(--brand);color:var(--ink)}
.cb-pd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--box-line);margin:0 -14px -14px}
.cb-pf{padding:12px 14px;border-bottom:1px solid var(--box-line);border-right:1px solid var(--box-line);min-width:0}
.cb-pf:nth-child(3n){border-right:0}
.cb-pf:nth-last-child(-n+3){border-bottom:0}
.cb-pf small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.cb-pf b{display:block;font-size:13.5px;font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cb-pf b.cb-no,.cb-k b.cb-no{color:var(--faint);font-weight:600}
.cb-pf em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:1px}
.cb-kt{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.cb-kt.cb-k3{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
.cb-k{background:var(--panel);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:2px}
.cb-k small{font-size:11px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.cb-k b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px;line-height:1.3;text-wrap:balance}
.cb-k.cb-big b{font-size:20px}
.cb-k em{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-k.cb-nx small::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--gold)}
.cb-k.cb-dk{background:var(--brand-2);color:var(--panel)}
.cb-k.cb-dk small,.cb-k.cb-dk em{color:var(--faint)}
.cb-k.cb-dk b{font-size:20px}
.cb-vt{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.cb-vh{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
.cb-vh h3{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cb-leg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.cb-leg i,.cb-vr .cb-dt i{width:7px;height:7px;border-radius:999px;background:var(--gold);display:inline-block;flex:none}
.cb-vr{display:grid;grid-template-columns:minmax(150px,1.1fr) 56px minmax(0,2fr) minmax(0,1.2fr);gap:12px;align-items:center;padding:0 14px;min-height:40px;border-top:1px solid var(--box-line);font-size:12.5px}
.cb-vr.cb-hd{min-height:30px;background:var(--box-bg);font-size:11px;font-weight:700;color:var(--muted)}
.cb-vr span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-vr .cb-dt{font-weight:600;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.cb-vr .cb-tm{font-variant-numeric:tabular-nums;color:var(--brand)}
.cb-vr .cb-ms{color:var(--brand)}
.cb-vr.cb-fut{background:var(--box-bg)}
.cb-vr:not(.cb-hd):hover{background:var(--soft)}
.cb-vt .cb-mt{padding:0 14px 14px}
.cb-abl{display:flex;flex-direction:column;gap:8px}
.cb-tg.cb-red{color:var(--red)}.cb-tg.cb-ok{color:var(--green)}
.cb-ab.cb-nw{border-color:var(--gold)}
.cb-ab2,.cb-pr2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.cb-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cb-seg.cb-s3{grid-template-columns:repeat(3,1fr)}
.cb-seg.cb-s4{grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.45fr)}
.cb-seg button:disabled{color:var(--faint);cursor:not-allowed}
.cb-seg.cb-big button{height:36px;font-size:13px;font-weight:700}
.cb-pr .cb-pb b{display:block;font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-pr .cb-pb small{display:block;font-size:12px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.cb-pl{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--box-line);padding-top:12px}
.cb-pi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:12.5px}
.cb-pi span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--brand)}
.cb-pi b{font-variant-numeric:tabular-nums;font-weight:700}
.cb-pi .cb-bar{grid-column:1/-1;height:6px;border-radius:999px;background:var(--cream);overflow:hidden}
.cb-pi .cb-bar i{display:block;height:100%;background:var(--faint)}
.cb-pi.cb-top span{color:var(--ink);font-weight:700}.cb-pi.cb-top .cb-bar i{background:var(--brand)}
.cb-fh{display:flex;align-items:center;gap:10px}.cb-fh .cb-t{flex:1;min-width:0;font-size:12px;color:var(--muted)}
.cb-sl{position:fixed;inset:0;z-index:75;background:rgba(43,36,30,.35);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:20px;font-size:12.5px;color:var(--ink)}
.cb-slb{width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--panel);border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);display:flex;flex-direction:column;gap:12px;padding:16px;animation:cb-cmin .16s ease-out}
.cb-hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.cb-hint.cb-gold{color:var(--brand)}
.cb-hint.cb-gold::before{content:"";display:inline-block;width:5px;height:5px;border-radius:999px;background:var(--gold);margin-right:6px;vertical-align:2px}
.cb-hint.cb-red{color:var(--red)}
.cb-cdr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.cb-cdr .cb-inp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;background:var(--box-bg)}
.cb-sm2{all:unset;cursor:pointer;height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font-size:12px;font-weight:700;color:var(--brand);white-space:nowrap}
.cb-sm2:hover{border-color:var(--brand);color:var(--ink)}
.cb-sum2{position:relative}.cb-sum2 .cb-inp{padding-right:46px;font-weight:700}
.cb-sum2 span{position:absolute;right:12px;top:11px;font-size:12px;color:var(--muted);font-weight:700}
.cb-srl{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:6px}
.cb-srl button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid var(--box-line);font-size:12.5px}
.cb-srl button:first-child{border-top:0}
.cb-srl[hidden]{display:none}
.cb-srl button:hover,.cb-srl button.cb-hi{background:var(--soft)}
.cb-srl b{font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-srl b mark{background:rgba(194,163,74,.28);color:inherit;border-radius:3px}
.cb-srl span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cb-chip2{display:flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:10px;padding:9px 10px 9px 12px;font-size:12.5px}
.cb-chip2 b{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-chip2 span{font-variant-numeric:tabular-nums;color:var(--brand);font-weight:700}
.cb-chip2 button{all:unset;cursor:pointer;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--muted)}
.cb-chip2 button:hover{background:var(--soft);color:var(--ink)}
.cb-okv{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:8px 4px 2px}
.cb-okv .cb-ic{width:46px;height:46px;border-radius:999px;background:var(--green);color:var(--panel);display:grid;place-items:center;font-size:22px;font-weight:800}
.cb-okv b.cb-tt{font-size:15px;font-weight:800}
.cb-okr{width:100%;display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:4px 0}
.cb-okr div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.cb-okr span{color:var(--muted)}
.cb-okr b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
@media(max-width:860px){.cb-kt.cb-k3{grid-template-columns:minmax(0,1fr)}
 .cb-pd{grid-template-columns:repeat(2,minmax(0,1fr))}.cb-pf:nth-child(3n){border-right:1px solid var(--box-line)}.cb-pf:nth-child(2n){border-right:0}.cb-pf:nth-last-child(-n+3){border-bottom:1px solid var(--box-line)}.cb-pf:last-child{border-bottom:0}
 .cb-ab2,.cb-pr2,.cb-g3{grid-template-columns:minmax(0,1fr)}
 .cb-vr{grid-template-columns:minmax(0,1fr) auto;padding:8px 14px;gap:2px 10px}.cb-vr.cb-hd{display:none}.cb-vr .cb-ms{text-align:right}}

/* «Оплата Stripe» · свободная ссылка и прямые оплаты Stripe (Тарик 18.10) */
/* привязка оплаты к клиенту в один клик (Тарик 18.10) */
.sb-list{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto}
.sb-row{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:12.5px}
.sb-row:hover{border-color:var(--brand);background:var(--soft)}
.sb-row b{font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-row small{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-row[disabled]{opacity:.5;cursor:default}
.stp-stw .sbtn2{box-sizing:border-box;cursor:pointer;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font:inherit;font-size:11.5px;font-weight:700;white-space:nowrap;color:var(--brand)}
.stp-stw .sbtn2:hover{border-color:var(--brand);color:var(--ink)}
.stp-stw .stp-unb{color:var(--muted)}
.stp-stw{flex-wrap:wrap;row-gap:4px}
.stp-name small.stp-sub{display:block;font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-veil{position:fixed;inset:0;z-index:60;background:rgba(43,36,30,.45);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:20px}
.sf-box{width:min(440px,100%);background:var(--panel);border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);display:flex;flex-direction:column;gap:12px;padding:16px;font-size:12.5px;color:var(--ink)}
.sf-hd{display:flex;align-items:flex-start;gap:10px}.sf-hd>div,.sf-hd>b{flex:1;min-width:0}
.sf-hd b{display:block;font-size:15px;font-weight:800}.sf-hd small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.sf-x{all:unset;cursor:pointer;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--muted);font-size:15px}
.sf-x:hover{background:var(--soft);color:var(--ink)}
.sf-box .fld .lbl em{font-style:normal;color:var(--red)}
.sf-box .inp{width:100%;box-sizing:border-box;height:36px;border:1px solid var(--line);border-radius:9px;padding:0 11px;font:inherit;font-size:13px;background:var(--panel);color:var(--ink)}
.sf-box textarea.inp{height:72px;padding:9px 11px;line-height:1.4;resize:vertical}
.sf-box .inp.bad{border-color:var(--red)}
.sf-err{font-size:12px;color:var(--red)}
.sf-url{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--soft);border-radius:9px;padding:10px 12px;word-break:break-all}
.sf-ft{display:flex;justify-content:flex-end;gap:8px}
.sf-box .fld{display:flex;flex-direction:column;gap:5px}
.sf-box .lbl{font-size:11.5px;color:var(--muted);font-weight:600}
.sf-box .dark,.sf-box .cancel{box-sizing:border-box;cursor:pointer;height:36px;padding:0 14px;border-radius:10px;font:inherit;font-size:12.5px;font-weight:700}
.sf-box .dark{border:0;background:var(--brand-2);color:var(--panel)}.sf-box .dark:hover{background:var(--brand)}
.sf-box .dark:disabled{background:var(--cream);color:var(--faint);cursor:not-allowed}
.sf-box .cancel{border:1px solid var(--line);background:var(--panel);color:var(--brand)}.sf-box .cancel:hover{border-color:var(--brand)}

/* ═══ «Оплата Stripe»: привязка оплаты без клиента (ТЗ PROMPT-stripe-privyazka, 19.10) ═══
   Макет 17-stripe 1:1. Классы окна — с приставкой spb-: имена макета (.mdl, .box,
   .cand, .seg3, .info…) в CRM уже заняты другими блоками. */
.stp-row.stp-nolink{background:#FFFBF3}
.stp-row.stp-nolink:hover{background:var(--box-bg,#FCFAF6)}
.stp-lnk{all:unset;box-sizing:border-box;cursor:pointer;justify-self:start;height:22px;
  padding:0 8px;border-radius:6px;border:1px dashed var(--brand);background:var(--panel);
  color:var(--brand);font-size:11px;font-weight:700;white-space:nowrap;display:inline-flex;
  align-items:center;gap:3px}
.stp-lnk:hover{background:var(--soft);border-style:solid}
.stp-name small.stp-sub b{color:var(--brand);font-weight:600}
.stp-who>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.spb-mdl{position:fixed;inset:0;z-index:150;background:rgba(43,36,30,.45);display:grid;
  place-items:center;padding:20px}
.spb-box{width:min(560px,100%);max-height:calc(100vh - 40px);background:var(--panel);
  border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);display:flex;
  flex-direction:column;overflow:hidden;font-size:12.5px;color:var(--ink)}
.spb-mh{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 12px}
.spb-mh>div{flex:1;min-width:0}
.spb-mh b{display:block;font-size:15px;font-weight:800}
.spb-mh small{display:block;font-size:12px;color:var(--muted);margin-top:2px;
  font-variant-numeric:tabular-nums}
.spb-x{all:unset;cursor:pointer;width:28px;height:28px;border-radius:8px;display:grid;
  place-items:center;font-size:15px;color:var(--muted);flex:none}
.spb-x:hover{background:var(--soft);color:var(--ink)}
.spb-mb{flex:1;min-height:0;overflow:auto;padding:0 18px 14px;display:flex;
  flex-direction:column;gap:14px}
.spb-payer{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  background:#FCFAF6;border:1px solid #EFEAE0}
.spb-payer>div{flex:1;min-width:0}
.spb-payer small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.spb-payer b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.spb-payer span{display:block;font-size:12px;color:var(--brand);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.spb-payer em{font-style:normal;font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.spb-payer em small{display:inline;font-size:11px;color:var(--muted);margin-left:3px}
.spb-stp{display:flex;flex-direction:column;gap:8px}
.spb-stp.spb-g6{gap:6px}
.spb-stp.off{opacity:.45;pointer-events:none}
.spb-sh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}
.spb-sh i{font-style:normal;width:20px;height:20px;border-radius:999px;background:var(--cream);
  color:var(--brand);display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.spb-sh i.ok{background:var(--green);color:var(--panel)}
.spb-cap2{font-size:11.5px;color:var(--muted);font-weight:600}
.spb-cands{display:flex;flex-direction:column;gap:6px}
.spb-cand{all:unset;box-sizing:border-box;cursor:pointer;display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;
  border-radius:10px;border:1px solid #EFEAE0;background:var(--panel)}
.spb-cand:hover{border-color:var(--brand)}
.spb-av{width:32px;height:32px;border-radius:999px;background:var(--cream);color:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:11px;flex:none;
  text-transform:uppercase}
.spb-cand b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.spb-cand small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.spb-why{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;
  background:var(--cream);color:var(--brand);font-size:10.5px;font-weight:700;margin-top:3px;
  white-space:nowrap}
.spb-yes{height:28px;padding:0 12px;border-radius:8px;background:var(--brand-2,#3E342C);
  color:var(--panel);font-size:12px;font-weight:700;display:inline-flex;align-items:center;
  white-space:nowrap}
.spb-cand:hover .spb-yes{background:var(--brand)}
.spb-cand.sm .spb-yes{background:var(--panel);color:var(--brand);box-shadow:inset 0 0 0 1px var(--line)}
.spb-picked{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;
  gap:10px;padding:9px 10px;border-radius:10px;border:1.5px solid var(--ink);background:var(--panel)}
.spb-picked .spb-av{font-size:13px;background:var(--green);color:var(--panel)}
.spb-picked b{display:block;font-size:13px;font-weight:700}
.spb-picked small{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.spb-chg{all:unset;cursor:pointer;font-size:12px;font-weight:600;color:var(--brand)}
.spb-chg:hover{color:var(--ink)}
.spb-res{display:flex;flex-direction:column;gap:4px;max-height:196px;overflow:auto}
.spb-none{font-size:12px;color:var(--muted);padding:2px 0}
.spb-inp{width:100%;box-sizing:border-box;height:34px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);padding:0 8px;font:inherit;font-size:12.5px;
  color:var(--ink);outline:none}
.spb-inp:focus{border-color:var(--brand)}
.spb-seg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--cream);
  padding:3px;border-radius:10px;gap:2px}
.spb-seg3 button{all:unset;cursor:pointer;height:30px;border-radius:8px;font-size:12.5px;
  font-weight:600;color:var(--brand);display:flex;align-items:center;justify-content:center;
  text-align:center;white-space:nowrap}
.spb-seg3 button:hover{color:var(--ink)}
.spb-seg3 button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.spb-auto{font-size:11.5px;color:var(--brand);font-weight:600}
.spb-pane{display:flex;flex-direction:column;gap:8px}
.spb-srow{all:unset;box-sizing:border-box;cursor:pointer;display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:36px;
  padding:0 10px;border-radius:9px;border:1px solid #EFEAE0;background:var(--panel);font-size:12.5px}
.spb-srow:hover{background:#FCFAF6}
.spb-srow b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spb-srow b mark{background:none;color:var(--ink);font-weight:800;text-decoration:underline}
.spb-srow span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.spb-plq{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 6px 0 12px;
  border-radius:9px;border:1.5px solid var(--ink);background:var(--panel)}
.spb-plq b{flex:1;min-width:0;font-size:12.5px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.spb-plq span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.spb-warn{font-size:12px;color:#8A6A1E;background:#FBF4E2;border-radius:8px;padding:7px 10px;
  line-height:1.4}
.spb-lbl{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.spb-code{display:flex;gap:6px}
.spb-code .spb-inp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  letter-spacing:.08em;background:#FCFAF6}
.spb-sbtn{all:unset;cursor:pointer;box-sizing:border-box;height:32px;padding:0 12px;
  border-radius:9px;border:1px solid var(--line);background:var(--panel);font-size:12px;
  font-weight:600;color:var(--brand);white-space:nowrap;display:inline-flex;align-items:center}
.spb-sbtn:hover{background:var(--soft)}
.spb-info{font-size:12.5px;line-height:1.45;padding:10px 12px;border-radius:10px;
  background:#FCFAF6;border:1px solid #EFEAE0}
.spb-info b{font-variant-numeric:tabular-nums}
.spb-err{font-size:12px;color:var(--red)}
.spb-mf{flex:none;display:flex;align-items:center;gap:8px;padding:12px 18px;
  border-top:1px solid var(--line)}
.spb-sum2{flex:1;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.spb-sum2 b{color:var(--ink);font-weight:700}
.spb-cancel{all:unset;cursor:pointer;box-sizing:border-box;height:34px;padding:0 14px;
  border-radius:9px;border:1px solid var(--line);background:var(--panel);font-size:12.5px;
  font-weight:600;color:var(--brand)}
.spb-cancel:hover{background:var(--soft)}
.spb-go{all:unset;cursor:pointer;box-sizing:border-box;height:34px;padding:0 16px;
  border-radius:9px;background:var(--brand-2,#3E342C);color:var(--panel);font-size:12.5px;
  font-weight:700}
.spb-go:hover{background:var(--brand)}
.spb-go:disabled{background:var(--cream);color:var(--faint);cursor:not-allowed}
.spb-box .selbtn{height:34px}

/* ═══ КАБИНЕТ АДМИНИСТРАТОРА НА ТЕЛЕФОНЕ (Тарик 19.10) ═══════════════════════════
   «Боевую систему с компьютера максимально точно перенести на телефон — чтобы человек
   не чувствовал перехода». Экраны те же, меняется только раскладка (static/es/phone.js
   ставит body.es-phone на узком экране внутри раздела). Каркас — по макету
   21-admin-mobile: пять вкладок снизу, полоса недели, шапка «дата · Сегодня · сумма ·
   колокольчик · ☰», сетка по пять мастеров с прилипанием страниц. */
.den .den-s,.den .chev,.esjour-head .phmenu{display:none}
body.es-phone{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;
  --esph-tab:calc(58px + env(safe-area-inset-bottom));--esph-wk:0px;
  height:100dvh;overflow:hidden;background:var(--panel)}
body.es-phone.esph-wk{--esph-wk:86px}
body.es-phone aside.nav{display:none!important}
body.es-phone main{height:calc(100dvh - var(--esph-tab) - var(--esph-wk));min-height:0;min-width:0}
body.es-phone .content{height:100%;max-height:100%}
body.es-phone:not(.esjour-sched) .content{padding:12px 12px 20px!important;overflow:auto}
/* нижние вкладки и неделя */
.esph-tab{position:fixed;left:0;right:0;bottom:0;z-index:47;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;
  padding:4px 10px calc(env(safe-area-inset-bottom) + 6px);background:var(--panel);
  border-top:1px solid var(--line)}
.esph-tab button{all:unset;cursor:pointer;height:46px;border-radius:12px;text-align:center;
  font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.15;display:flex;
  align-items:center;justify-content:center;padding:0 2px;-webkit-tap-highlight-color:transparent}
.esph-tab button.on{background:var(--soft);color:var(--ink)}
.esph-week{position:fixed;left:0;right:0;bottom:var(--esph-tab);z-index:46;padding:5px 10px 4px;
  background:var(--panel);border-top:1px solid var(--line)}
.esph-wkn{display:flex;align-items:center;justify-content:space-between;padding:0 6px 3px;
  font-size:11.5px;color:var(--muted);font-weight:600}
.esph-wkn button{all:unset;cursor:pointer;width:44px;height:26px;display:grid;place-items:center;
  border-radius:8px;font-size:16px;color:var(--brand)}
.esph-strip{background:var(--brand-2);border-radius:14px;display:block;padding:4px;
  overflow:hidden;position:relative;touch-action:pan-y}
/* ⛔ 23.10: ряд недели ездит за пальцем внутри полосы (свайп на соседнюю неделю) */
.esph-strip .esph-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;will-change:transform}
/* ⛔ 23.10: на касании сетку ведёт свой обработчик — одна ось за жест (phone.js) */
html.esax body.es-phone .esjour-body .esmwrap{touch-action:none;scroll-snap-type:none}
.esph-strip button{all:unset;cursor:pointer;min-height:42px;border-radius:10px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;color:var(--panel);
  font-size:10.5px;font-weight:600;position:relative;line-height:1.15}
.esph-strip button b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.esph-strip button.we{color:var(--coral)}
.esph-strip button.today::after{content:"";position:absolute;bottom:3px;width:14px;height:2px;
  border-radius:2px;background:currentColor}
.esph-strip button.sel{background:var(--gold);color:var(--ink)}
/* нижние листы: месяц и «☰» */
.esph-veil{position:fixed;inset:0;z-index:150;background:rgba(43,36,30,.45)}
.esph-sheet{position:fixed;left:0;right:0;bottom:0;z-index:151;background:var(--panel);
  border-radius:18px 18px 0 0;padding:8px 16px calc(env(safe-area-inset-bottom) + 16px);
  max-height:90dvh;overflow:auto;box-shadow:0 -10px 40px -20px rgba(43,36,30,.45);
  display:flex;flex-direction:column;gap:12px}
.esph-grab{width:40px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 2px;flex:none}
.esph-shh{display:flex;align-items:flex-start;gap:10px}
.esph-shh>div{flex:1;min-width:0}
.esph-shh b{display:block;font-size:17px;font-weight:800;line-height:1.25}
.esph-shh small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.esph-x{all:unset;cursor:pointer;width:36px;height:36px;border-radius:999px;background:var(--soft);
  display:grid;place-items:center;font-size:14px;color:var(--brand);flex:none}
.esph-menu{display:flex;flex-direction:column;gap:6px}
.esph-mi{all:unset;cursor:pointer;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;
  min-height:52px;justify-content:center;padding:8px 14px;border-radius:12px;
  border:1px solid var(--box-line);background:var(--panel)}
.esph-mi b{font-size:15px;font-weight:700}.esph-mi small{font-size:12.5px;color:var(--muted)}
.esph-mi.on{border:1.5px solid var(--ink)}
/* ★ 23.10 папки разделов в «☰»: заголовок — та же плитка с шевроном, пункты — с отступом. */
.esph-fold{display:flex;flex-direction:column;gap:6px}
.esph-fhd{flex-direction:row;align-items:center;justify-content:space-between}
.esph-fhd .esm-chev{font-size:20px;line-height:1;color:var(--muted);transition:transform .15s}
.esph-fold.open .esph-fhd .esm-chev{transform:rotate(90deg)}
.esph-fold.has-on:not(.open) .esph-fhd{border:1.5px solid var(--ink)}
.esph-fbody{display:none;flex-direction:column;gap:6px;padding-left:16px}
.esph-fold.open .esph-fbody{display:flex}
@media (prefers-reduced-motion:reduce){.esph-fhd .esm-chev{transition:none}}
.esph-cal .escal{background:var(--brand-2);border-radius:14px;padding:10px 12px;color:var(--panel)}
.esph-cal .escal .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.esph-cal .escal .mh button{all:unset;cursor:pointer;width:44px;height:40px;display:grid;
  place-items:center;border-radius:10px;font-size:18px;color:var(--panel)}
.esph-cal .escal .mh b{font-size:16px;font-weight:800}
.esph-cal .escal .wd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;
  font-size:11px;color:var(--faint);font-weight:700;padding:4px 0}
.esph-cal .escal .dg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.esph-cal .escal .dg button{all:unset;cursor:pointer;height:44px;border-radius:12px;display:grid;
  place-items:center;font-size:15px;font-weight:700;color:var(--panel);font-variant-numeric:tabular-nums}
.esph-cal .escal .dg button.oth{color:var(--faint)}
.esph-cal .escal .dg button.tod{box-shadow:inset 0 0 0 1.5px var(--panel)}
.esph-cal .escal .dg button.sel{background:var(--gold);color:var(--ink)}
/* шапка дня: «19 окт, пн ⌄ · Сегодня · сумма · колокольчик · ☰» */
body.es-phone .esjour-head{height:auto;min-height:56px;flex-wrap:wrap;row-gap:6px;
  padding:calc(env(safe-area-inset-top) + 8px) 10px 6px 14px;border-bottom:1px solid var(--line)}
body.es-phone .esjour-head .ajpair,body.es-phone .esjour-head .shiftbtn,
body.es-phone .esjour-head .srchbtn{display:none}
body.es-phone .esjour-head .ajbtn[onclick^="esПопап('vid'"]{display:none}
body.es-phone .esjour-head .den{order:-2;margin:0;display:flex;align-items:center;gap:8px;
  min-height:44px;font-size:clamp(16px,4.8vw,19px);font-weight:800;cursor:pointer}
body.es-phone .esjour-head .den .den-l{display:none}
body.es-phone .esjour-head .den .den-s{display:inline}
body.es-phone .esjour-head .den .chev{display:block;width:9px;height:9px;
  border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
  transform:rotate(45deg) translate(-2px,-2px)}
body.es-phone .esjour-head>.ajbtn:first-child{order:-1;height:34px;padding:0 12px;
  border-radius:999px;border:0;background:var(--soft);color:var(--brand);font-size:12.5px;font-weight:700}
body.es-phone .esjour-head>.ajbtn:first-child[disabled]{background:var(--brand-2);color:var(--panel);opacity:1}
body.es-phone .esjour-head .sp{order:0;flex:1 1 0;min-width:0}
body.es-phone .esjour-head .ajbtn[onclick^="esПопап('kassa'"]{order:1;height:34px;
  border-radius:999px;border:0;background:var(--soft);font-size:13px;font-weight:800;padding:0 10px 0 12px}
body.es-phone .esjour-head .notifbtn{order:2;width:40px;height:40px;border:0;background:none}
body.es-phone .esjour-head .phmenu{order:3;display:inline-flex;width:40px;height:40px;border:0;
  background:none;font-size:20px}
/* пилюли «Не пришли», «Просрочено», «Запись для» — второй строкой во всю ширину */
body.es-phone .esjour-head>:not(.ajbtn):not(.den):not(.sp):not(.ajpair){order:5}
/* сетка: пять мастеров на экран, листание страницами, шапка и ось прилипают */
body.es-phone .esjour-body{padding:0!important;overflow:hidden}
body.es-phone .esmwrap{height:100%;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;scroll-snap-type:x mandatory;scroll-padding-left:52px}
body.es-phone .esmwrap.esширокая{--colw:calc((100vw - 52px) / 5)}
body.es-phone .esmwrap:not(.esширокая){min-width:0}
body.es-phone .eshead{position:sticky;top:0;z-index:8;background:var(--panel)}
body.es-phone .eshead>div:first-child{position:sticky;left:0;z-index:9;background:var(--panel)}
body.es-phone .esaxis.l{position:sticky;left:0;z-index:7;background:var(--panel)}
body.es-phone .eshead>.escol:nth-child(5n+2){scroll-snap-align:start}
/* «Обзор дня» и «Поиск» — вкладки: от верха до нижних вкладок, без затемнения */
body.es-phone #esdo.do-veil{inset:0 0 var(--esph-tab) 0;padding:0;background:var(--panel);
  z-index:44;place-items:stretch}
body.es-phone #esdo .do-ov{width:100%;max-height:none;height:100%;border-radius:0;box-shadow:none}
body.es-phone #escspanel.cspanel{width:100vw;bottom:var(--esph-tab);z-index:44;box-shadow:none}
.escolsn{display:none}
body.es-phone .esjour-head .srchbtn{display:none!important}
body.es-phone .esjour-head{column-gap:6px}
body.es-phone .esjour-head .den{gap:6px;font-size:clamp(15px,4.4vw,18px)}
body.es-phone .eshead{height:62px}
body.es-phone .eshead>.escol{flex-direction:column;justify-content:center;align-items:center;gap:3px;
  padding:0 2px;min-width:0}
body.es-phone .eshead>.escol .av{width:30px;height:30px;font-size:10.5px;margin:0}
body.es-phone .eshead>.escol .tx{min-width:0;max-width:100%;text-align:center}
body.es-phone .eshead>.escol .escolnm,body.es-phone .eshead>.escol .escolrole{display:none}
body.es-phone .eshead>.escol .escolsn{display:block;font-size:11.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body.es-phone .esjour-head{column-gap:4px;padding-right:6px}
body.es-phone .esjour-head>.ajbtn:first-child{padding:0 10px}
body.es-phone .esjour-head .ajbtn[onclick^="esПопап('kassa'"]{padding:0 8px 0 10px;font-size:12.5px}
body.es-phone .esjour-head .notifbtn{width:34px;padding:0}
body.es-phone .esjour-head .phmenu{width:32px;padding:0}
/* меню времени, меню мастера, окна шапки (сумма, колокольчик, «Вид») — листом снизу */
body.es-phone .esslotpop,body.es-phone .esmmenu,body.es-phone .espop.on{position:fixed!important;
  left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;
  max-width:none!important;max-height:85dvh;overflow:auto;border:0!important;
  border-radius:18px 18px 0 0!important;padding:14px 16px calc(env(safe-area-inset-bottom) + 16px)!important;
  z-index:150!important;box-shadow:0 0 0 100vmax rgba(43,36,30,.45)!important;box-sizing:border-box}
body.es-phone .esslotpop::before,body.es-phone .esmmenu::before,body.es-phone .espop.on::before{
  content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--line);
  margin:0 auto 10px}
body.es-phone .esslotpop .poprow,body.es-phone .esmmenu .poprow{min-height:56px;padding:8px 14px;
  border-radius:12px;border:1px solid var(--box-line);margin-bottom:6px;box-sizing:border-box;width:100%}
body.es-phone .espop-kassa,body.es-phone .espop-alerts{width:auto!important;max-height:85dvh}
/* окно записи — новая запись, карточка визита, групповое занятие (#esnz): на весь
   экран, колонки одна под другой (мастер и время → клиент → услуги), кнопки снизу */
body.es-phone .esnz{grid-template-columns:minmax(0,1fr);height:100dvh;background:var(--panel)}
/* окно записи — свой слой (как на компьютере), окна поверх него (оплата, «Не пришёл»,
   продажа, перезапись, карточка клиента) ложатся выше; вкладки и неделю прячем */
body.es-phone.esnz-on .esph-tab,body.es-phone.esnz-on .esph-week{display:none}
body.es-phone .esnz>.strip{display:none}
body.es-phone .esnz .card{height:100dvh;min-height:0}
body.es-phone .esnz .cols{display:flex!important;flex-direction:column;gap:12px;overflow:auto;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 16px!important;margin:0!important;
  -webkit-overflow-scrolling:touch}
body.es-phone .esnz .cols>.col{width:auto!important;min-width:0!important;max-width:none!important;
  flex:none!important;height:auto!important;max-height:none!important;overflow:visible!important}
body.es-phone .esnz .cols>.col:nth-child(1){order:1}
body.es-phone .esnz .cols>.col:nth-child(3){order:2}
body.es-phone .esnz .cols>.col:nth-child(2){order:3}
body.es-phone .esnz .foot{height:auto;min-height:56px;flex-wrap:wrap;gap:8px;
  padding:10px 12px calc(env(safe-area-inset-bottom) + 10px)!important;border-top:1px solid var(--line);
  background:var(--panel)}
body.es-phone .esnz .foot .hint{flex:1 1 100%;order:-1;font-size:12px}
body.es-phone .esnz .foot button{height:46px!important;flex:1 1 0;border-radius:12px!important;
  font-size:14px!important;justify-content:center}
body.es-phone .esnz input,body.es-phone .esnz textarea,body.es-phone .esnz select,
body.es-phone .esmmenu input,body.es-phone .cspanel input,body.es-phone .do-ov input{font-size:16px!important}
/* закрыть окно — та же кнопка, что у мини-расписания на компьютере (.expand зовёт
   выход именно этого окна: визит, новая запись, занятие), — «✕» слева сверху */
body.es-phone .esnz>.strip{display:block!important;position:fixed;top:0;left:0;width:0;height:0;
  overflow:visible;z-index:170;border:0;background:none}
body.es-phone .esnz>.strip>*:not(.expand){display:none!important}
body.es-phone .esnz>.strip .expand{position:fixed;top:calc(env(safe-area-inset-top) + 6px);left:6px;
  right:auto;width:44px;height:44px;border-radius:12px;border:0;box-shadow:none;background:var(--panel);
  font-size:0;display:grid;place-items:center}
body.es-phone .esnz>.strip .expand::after{content:"✕";font-size:18px;color:var(--ink)}
body.es-phone .esnz .cols{padding-top:calc(env(safe-area-inset-top) + 54px)!important}
/* сообщения — над нижними вкладками, а не поверх них */
body.es-phone .toast,body.es-phone #toast{bottom:calc(var(--esph-tab) + var(--esph-wk) + 12px)!important}
/* поднятое сообщение уже не уезжает за край на 80px — пустая тёмная пилюля торчала
   из-под вкладок. Спрятанное — прозрачное и не ловит пальцы. */
body.es-phone .toast:not(.show),body.es-phone #toast:not(.show){opacity:0;pointer-events:none}
/* карточка визита: главное — статус, услуги и оплата — сразу под мастером и временем,
   клиент ниже (новой записи — наоборот: без клиента услуги не откроются) */
body.es-phone .esnz:has(.expand[onclick^="esВЭВыйти"]) .cols>.col:nth-child(2){order:2}
body.es-phone .esnz:has(.expand[onclick^="esВЭВыйти"]) .cols>.col:nth-child(3){order:3}
/* модальные окна раздела (оплата, «Не пришёл», абонемент, повтор, продажа участнику…)
   — листом снизу во всю ширину */
body.es-phone .espmodal{place-items:end stretch;padding:0;grid-template-columns:minmax(0,1fr)}
body.es-phone .espmodal>*{width:100%!important;max-width:none!important;max-height:92dvh!important;
  overflow:auto;border-radius:18px 18px 0 0!important;box-sizing:border-box;
  padding-bottom:calc(env(safe-area-inset-bottom) + 16px)!important;margin:0!important}
body.es-phone .espmodal>*::before{content:"";display:block;width:40px;height:4px;border-radius:4px;
  background:var(--line);margin:0 auto 10px}
/* окна смены дня, выходного, служебного блока (.esover) — тоже снизу */
body.es-phone .esover-wrap{display:grid;place-items:end stretch;padding:0}
body.es-phone .esover{position:fixed!important;top:auto!important;bottom:0!important;left:0!important;
  right:0!important;transform:none!important;width:auto!important;max-width:none!important;
  max-height:92dvh!important;border-radius:18px 18px 0 0!important;overflow:auto}
/* клиентская база: карточка — на весь экран без скруглений, продажа и новый клиент —
   листом снизу (ТЗ admin-mobile §8: «раскладка телефона») */
body.es-phone .cb-cm{padding:0;place-items:stretch;z-index:70}
body.es-phone .cb-cmb{width:100%!important;max-width:none!important;height:100dvh!important;
  max-height:none!important;border-radius:0!important;box-shadow:none!important}
body.es-phone .cb-sl{padding:0;place-items:end stretch}
body.es-phone .cb-slb{width:100%!important;max-width:none!important;max-height:92dvh!important;
  border-radius:18px 18px 0 0!important;padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}
body.es-phone .cb-cmt{scrollbar-width:none}
body.es-phone .cb-cmt::-webkit-scrollbar{display:none}
body.es-phone .cb-srch input{font-size:16px!important;height:48px}
/* окно привязки оплаты Stripe — снизу во всю ширину */
body.es-phone .spb-mdl{padding:0;place-items:end stretch}
body.es-phone .spb-box{width:100%!important;max-height:92dvh!important;border-radius:18px 18px 0 0!important}
body.es-phone .spb-mf{padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}
/* «Обзор дня» на телефоне: строка — время · клиент и операция · сумма и способ,
   «Изменить» под суммой (макет 21, вкладка «Обзор дня») */
body.es-phone #esdo .do-hd{padding:calc(env(safe-area-inset-top) + 12px) 14px 10px}
body.es-phone #esdo .do-x{display:none}
body.es-phone #esdo .do-kpi{padding:0 12px;gap:8px}
body.es-phone #esdo .do-bar{padding:12px 12px 8px;gap:8px}
body.es-phone #esdo .do-chips{overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none}
body.es-phone #esdo .do-chips::-webkit-scrollbar{display:none}
body.es-phone #esdo .do-chips button{flex:none}
body.es-phone #esdo .do-tb{margin:0 12px 12px}
body.es-phone #esdo .do-row.do-h{display:none}
body.es-phone #esdo .do-row{grid-template-columns:44px minmax(0,1fr) auto;
  grid-template-areas:"tm cl sum" "tm op mt" "tm act act";gap:2px 10px;padding:10px 8px;
  align-items:start;min-height:0}
body.es-phone #esdo .do-row>.do-tm{grid-area:tm;padding-top:1px}
body.es-phone #esdo .do-row>.do-cl{grid-area:cl;min-width:0}
body.es-phone #esdo .do-row>.do-op{grid-area:op;min-width:0}
body.es-phone #esdo .do-row>.do-mt{grid-area:mt;justify-self:end;align-self:start}
body.es-phone #esdo .do-row>.do-sum{grid-area:sum;text-align:right}
body.es-phone #esdo .do-row>.do-act{grid-area:act;justify-self:end;text-align:right}
body.es-phone #esdo .do-row>.do-act:empty{display:none}
body.es-phone #esdo .do-ed{height:30px;border-radius:999px;padding:0 12px}
body.es-phone #esdo input{font-size:16px!important}
/* «Оплата Stripe» на телефоне — строки карточками (макет 21, вкладка «Stripe»):
   название и плательщик · сумма; ниже время · PR-номер или «＋ Привязать» · статус */
body.es-phone .stp-card{background:none;box-shadow:none;overflow:visible;border-radius:0}
body.es-phone .stp-row.stp-hd{display:none}
body.es-phone .stp-day{background:none;padding:10px 2px 4px;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
body.es-phone .stp-row:not(.stp-hd){grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-areas:"name name name sum" "time id st st";gap:6px 8px;padding:11px 12px;
  margin-bottom:6px;border:1px solid var(--box-line);border-radius:12px;background:var(--panel);
  min-height:0;align-items:center}
body.es-phone .stp-row.stp-nolink{background:#FFFBF3}
body.es-phone .stp-row>:nth-child(1){grid-area:time}
body.es-phone .stp-row>:nth-child(2){grid-area:id}
body.es-phone .stp-row>:nth-child(3){grid-area:name;white-space:normal;font-size:13.5px;line-height:1.3}
body.es-phone .stp-row>:nth-child(4){grid-area:sum;align-self:start;font-size:14px}
body.es-phone .stp-row>:nth-child(5){grid-area:st;justify-self:end}
body.es-phone .stp-row>:nth-child(6){display:none}
body.es-phone .stp-row .stp-sub{white-space:normal}
body.es-phone .stp-lnk{height:28px;padding:0 10px;font-size:12px}
body.es-phone .segbar{flex-wrap:wrap;row-gap:8px}
body.es-phone .dpwrap{max-width:100%;overflow-x:auto;scrollbar-width:none}
body.es-phone .dpwrap::-webkit-scrollbar{display:none}
body.es-phone .dpwrap .seg{flex-wrap:nowrap;width:max-content}
body.es-phone .segbar .stp-chip{flex:none}
/* перенос пальцем: без выделения текста и меню iOS при долгом нажатии; поднятая — ярче */
body.es-phone .esjour-body .esdcell{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
body.es-phone .esdcell.esph-lift{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--coral)}
/* «Перезаписать» (#esrb) — на весь экран: практика → мастер → дата → время в одну колонку */
body.es-phone .rb-veil{padding:0;place-items:stretch}
body.es-phone .rb-rs{width:100%!important;max-width:none!important;height:100dvh;max-height:none!important;
  border-radius:0!important}
body.es-phone .rb-hd{padding-top:calc(env(safe-area-inset-top) + 12px)}
body.es-phone .rb-x{width:44px;height:44px;font-size:18px}
/* «График работы» на телефоне: таблица мастера × дни листается вбок, панель смены —
   под ней; шапка в две строки */
body.es-phone .grwrap{bottom:0;z-index:48}
body.es-phone .gr-hd{height:auto;flex-wrap:wrap;row-gap:6px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px}
body.es-phone .gr-body{grid-template-columns:minmax(0,1fr)!important;overflow:auto;padding:8px;
  grid-template-rows:auto auto}
body.es-phone .gr-tw{max-height:60dvh;overflow:auto}
body.es-phone .gr-side{max-height:none;overflow:visible}

/* ═══ ТЕЛЕФОН v5: «Обзор дня» и «Stripe» (ТЗ PROMPT-admin-mobile-day-stripe, 19.10) ═══
   Стили макета 21-admin-mobile — значения без правок, к классам добавлена приставка
   mph- (имена макета в CRM заняты). Ниже — только слои и отступы под каркас CRM. */

/* дополнено 19.10 при сверке: базовые .av и .st и уточнения окна по центру — из макета дословно */
.mph-av{width:36px;height:36px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.mph-st{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:7px;font-size:11.5px;font-weight:700;white-space:nowrap}
.mph-st.mph-created{background:var(--cream);color:var(--brand)}
.mph-st.mph-paid,.mph-st.mph-stripe{background:#E7F0E8;color:#3F6E46}
.mph-st.mph-unpaid{background:#FBE7E1;color:var(--red)}
.mph-st i{width:6px;height:6px;border-radius:999px;background:currentColor}
.mph-sheet.mph-ctr .mph-mi small{font-size:13.5px}
.mph-sheet.mph-ctr .mph-shh b{font-size:19px}
.mph-sheet.mph-ctr .mph-shh small{font-size:13.5px}
/* переменные макета — только для экранов телефона */
.mph,.mph-fs,.mph-sheet,.mph-veil{--bg:#EDE7E1;--panel:#FFFDFB;--soft:#F6F1EB;--cream:#EBE4E0;--ink:#2B241E;--brand:#52453C;--brand-2:#3E342C;--muted:#97897D;--faint:#B4A99E;--line:#E4DBD2;--coral:#FF8562;--red:#DE4A2C;--green:#6A9E71;--gold:#C2A34A;--blocked:#e9e4da;--sel:#2B3134;--box-line:#EFEAE0;--box-bg:#FCFAF6;--shadow:0 1px 2px rgba(43,36,30,.05),0 10px 30px -18px rgba(43,36,30,.25);--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--ax:44px;--mh:62px}
@keyframes mph-sr{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes mph-fi{from{opacity:0}to{opacity:1}}
@keyframes mph-su{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes mph-zc{from{opacity:0;transform:translateY(-46%) scale(.96)}to{opacity:1;transform:translateY(-50%)}}
/* сетка: одна прокрутка в обе стороны, шапка мастеров и ось — липкие */
.mph-sc{flex:1;min-height:0;overflow:auto;position:relative;scroll-snap-type:x mandatory;scroll-padding-left:var(--ax);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* страницы «График» и «Stripe» */
.mph-pg{flex:1;min-height:0;overflow:auto;padding:4px 14px 20px;display:flex;flex-direction:column;gap:12px}
.mph-ph{display:flex;align-items:center;gap:8px}
.mph-ph b{font-size:clamp(17px,5vw,21px);font-weight:800}
.mph-ph .mph-sp{flex:1}
.mph-nav2{display:flex;align-items:center;justify-content:space-between;background:var(--soft);border-radius:12px;padding:3px}
.mph-nav2 button{all:unset;cursor:pointer;width:44px;height:36px;display:grid;place-items:center;border-radius:10px;font-size:17px;color:var(--brand)}
.mph-nav2 span{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.mph-tot{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mph-tot b{color:var(--ink)}
.mph-dh{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:6px 2px 0;display:flex;justify-content:space-between}
.mph-empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px}
.mph-empty b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
/* общее: полноэкранная карточка и нижнее окно */
.mph-fs{position:fixed;inset:0;z-index:30;max-width:560px;margin:0 auto;background:var(--panel);display:flex;flex-direction:column;animation:mph-sr .2s ease-out}
.mph-fs-hd{flex:none;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 6px) 12px 6px 6px;border-bottom:1px solid var(--line)}
.mph-fs-hd .mph-x{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;font-size:18px;border-radius:12px}
.mph-fs-hd b{font-size:17px;font-weight:800}
.mph-fs-b{flex:1;min-height:0;overflow:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:14px}
.mph-fs-ft{flex:none;display:flex;gap:8px;padding:10px 16px calc(env(safe-area-inset-bottom) + 12px);border-top:1px solid var(--line);background:var(--panel)}
.mph-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--cream);border-radius:12px;padding:3px;gap:2px}
.mph-seg button{all:unset;cursor:pointer;min-height:38px;border-radius:10px;text-align:center;font-size:13px;font-weight:700;color:var(--brand);display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1.15}
.mph-seg button.mph-on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.mph-seg button.mph-on.mph-no{color:var(--red)}
.mph-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mph-kv div{border:1px solid var(--box-line);background:var(--box-bg);border-radius:12px;padding:9px 11px;min-width:0}
.mph-kv small{display:block;font-size:11.5px;color:var(--muted)}
.mph-kv b{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.mph-ab{all:unset;cursor:pointer;box-sizing:border-box;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:700;color:var(--ink);padding:0 8px}
.mph-ab:active{background:var(--soft)}
.mph-ab.mph-red{color:var(--red);grid-column:1/-1}
.mph-big{all:unset;cursor:pointer;box-sizing:border-box;flex:1;height:50px;border-radius:14px;background:var(--brand-2);color:var(--panel);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;text-align:center}
.mph-big:active{background:var(--brand)}
.mph-big:disabled,.mph-big.mph-dis{background:var(--cream);color:var(--faint);cursor:not-allowed}
.mph-sheet>*,.mph-fs-b>*,.mph-pg>*,.mph-fld>.mph-big{flex:none}
.mph-big.mph-lt{flex:0 0 auto;padding:0 16px;background:var(--soft);color:var(--brand)}
.mph-big.mph-gold{background:var(--gold);color:var(--ink)}
.mph-sbtn{all:unset;cursor:pointer;box-sizing:border-box;height:32px;padding:0 12px;border-radius:9px;background:var(--brand-2);color:var(--panel);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;white-space:nowrap}
.mph-sbtn:disabled{background:var(--cream);color:var(--faint);cursor:default}
.mph-sbtn.mph-lt{background:var(--soft);color:var(--brand)}
.mph-fld{display:flex;flex-direction:column;gap:5px}
.mph-lbl{font-size:12px;color:var(--muted);font-weight:600}
.mph-inp{width:100%;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 12px;font-size:15px;color:var(--ink);outline:none}
.mph-inp:focus{border-color:var(--brand)}
.mph-inp.mph-bad{border-color:var(--red)}
.mph-inp.mph-mono{font-family:var(--mono);letter-spacing:.08em;background:var(--box-bg)}
.mph-selw{position:relative}
.mph-selw select{appearance:none;-webkit-appearance:none;width:100%;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 34px 0 12px;font-size:15px;color:var(--ink);outline:none}
.mph-selw::after{content:"";position:absolute;right:15px;top:16px;width:7px;height:7px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.mph-err{font-size:13px;color:var(--red);line-height:1.4}
.mph-warn{font-size:12.5px;color:#8A6A1E;background:#FBF4E2;border-radius:10px;padding:8px 11px;line-height:1.4}
.mph-hint{font-size:12.5px;color:var(--muted);line-height:1.4}
.mph-res{display:flex;flex-direction:column;gap:6px}
.mph-row{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:52px;padding:6px 10px;border-radius:12px;border:1px solid var(--box-line);background:var(--panel)}
.mph-row:active{background:var(--soft)}
.mph-row .mph-av{width:34px;height:34px;font-size:11px}
.mph-row b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mph-row small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.mph-row .mph-why{display:inline-flex;height:20px;align-items:center;padding:0 7px;border-radius:6px;background:var(--cream);color:var(--brand);font-size:10.5px;font-weight:700;margin-top:3px}
.mph-row .mph-go{height:30px;padding:0 11px;border-radius:9px;background:var(--brand-2);color:var(--panel);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center}
.mph-row.mph-lt .mph-go{background:var(--soft);color:var(--brand)}
.mph-row.mph-on{border:1.5px solid var(--ink)}
.mph-picked{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:52px;padding:6px 10px;border-radius:12px;border:1.5px solid var(--ink)}
.mph-picked .mph-av{width:34px;height:34px;background:var(--green);color:var(--panel)}
.mph-picked b{display:block;font-size:14px;font-weight:700}
.mph-picked small{display:block;font-size:12px;color:var(--muted)}
.mph-picked button{all:unset;cursor:pointer;font-size:13px;font-weight:700;color:var(--brand);min-height:36px;display:flex;align-items:center}
.mph-veil{position:fixed;inset:0;z-index:40;background:rgba(43,36,30,.45);animation:mph-fi .18s ease-out}
.mph-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:560px;margin:0 auto;background:var(--panel);border-radius:18px 18px 0 0;padding:8px 16px calc(env(safe-area-inset-bottom) + 16px);max-height:90dvh;overflow:auto;animation:mph-su .22s ease-out;box-shadow:0 -10px 40px -20px rgba(43,36,30,.45);display:flex;flex-direction:column;gap:12px}
.mph-grab{width:40px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 2px;flex:none}
.mph-shh{display:flex;align-items:flex-start;gap:10px}
.mph-shh div{flex:1;min-width:0}
.mph-shh b{display:block;font-size:17px;font-weight:800;line-height:1.25}
.mph-shh small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.mph-shh .mph-x{all:unset;cursor:pointer;width:36px;height:36px;border-radius:999px;background:var(--soft);display:grid;place-items:center;font-size:14px;color:var(--brand);flex:none}
.mph-menu{display:flex;flex-direction:column;gap:6px}
.mph-mi{all:unset;cursor:pointer;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-height:56px;justify-content:center;padding:8px 14px;border-radius:12px;border:1px solid var(--box-line);background:var(--panel)}
.mph-mi:active{background:var(--soft)}
.mph-mi b{font-size:15px;font-weight:700}
.mph-mi small{font-size:12.5px;color:var(--muted)}
.mph-mi.mph-red b{color:var(--red)}
.mph-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mph-tile{all:unset;cursor:pointer;box-sizing:border-box;border:1px solid var(--box-line);background:var(--box-bg);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.mph-tile small{font-size:12px;color:var(--muted)}
.mph-tile b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mph-tile.mph-dk{background:var(--brand-2);border-color:var(--brand-2);color:var(--panel)}
.mph-tile.mph-dk small{color:var(--panel);opacity:.75}
.mph-tile.mph-red b{color:var(--red)}
.mph-mi b{font-size:15.5px}
.mph-mi small{font-size:13px}
.mph-mi{min-height:64px}
.mph-big{min-height:54px!important;font-size:16px!important}
.mph-ab{min-height:52px!important;font-size:14.5px!important}
.mph-seg button{min-height:46px!important;font-size:14.5px!important}
.mph-sbtn{min-height:38px!important;padding:0 16px!important;font-size:13.5px!important}
/* v5: Обзор дня, Stripe */
.mph-fbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:var(--soft);font-size:13.5px;font-weight:700;color:var(--brand)}
.mph-fbtn::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.mph-fbtn.mph-on{background:var(--sel);color:var(--panel)}
.mph-fbtn.mph-on::after{display:none}
.mph-fbtn i{font-style:normal;font-size:12px;opacity:.8}
.mph-mi.mph-cur{border-color:var(--ink)}
.mph-dhero{background:var(--brand-2);color:var(--panel);border-radius:18px;padding:16px 16px 12px;display:flex;flex-direction:column;gap:2px}
.mph-dhero>small{font-size:13px;opacity:.75}
.mph-dhero>b{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.mph-dhero>b em{font-style:normal;font-size:16px;opacity:.7}
.mph-dsplit{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mph-dsplit button{all:unset;cursor:pointer;background:rgba(255,253,251,.1);border-radius:12px;padding:9px 12px;display:flex;flex-direction:column;gap:1px}
.mph-dsplit span{font-size:12.5px;opacity:.75}
.mph-dsplit b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.mph-dstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mph-dstrip>*{all:unset;box-sizing:border-box;border:1px solid var(--box-line);background:var(--box-bg);border-radius:14px;padding:9px 12px;display:flex;flex-direction:column}
.mph-dstrip b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.mph-dstrip span{font-size:12.5px;color:var(--muted)}
.mph-dstrip .mph-r{cursor:pointer}
.mph-dstrip .mph-r b{color:var(--red)}
.mph-dstrip .mph-h b{color:var(--red)}
.mph-feed{display:flex;flex-direction:column;border-top:1px solid var(--box-line)}
.mph-fr{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--box-line);min-height:62px}
.mph-fr:active{background:var(--soft)}
.mph-fr .mph-tm2{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.mph-fr .mph-who{min-width:0}
.mph-fr .mph-who b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mph-fr .mph-who small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.mph-fr .mph-am{text-align:right;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mph-fr .mph-am small{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.mph-fr .mph-am small.mph-c{color:var(--green)}
.mph-fr .mph-am small.mph-r{color:var(--red)}
.mph-fr.mph-no .mph-who b{text-decoration:line-through;color:var(--muted)}
.mph-sttab{margin:2px 0}
.mph-sttab em{font-style:normal;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:var(--panel);font-size:11.5px;margin-left:6px}
.mph-sc{border:1px solid var(--box-line);background:var(--panel);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px}
.mph-sct{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mph-sct b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.mph-sct b em{font-style:normal;font-size:13px;color:var(--muted)}
.mph-sct span{font-size:12.5px;color:var(--muted);white-space:nowrap}
.mph-scp b{display:block;font-size:15px;font-weight:700}
.mph-scp small{display:block;font-size:12.5px;color:var(--brand);margin-top:1px;word-break:break-all}
.mph-scn{font-size:12.5px;color:var(--muted);margin-bottom:4px}
.mph-scm{font-size:12px;color:var(--muted)}
.mph-sc.mph-lk .mph-sct b{font-size:18px}
.mph-sc .mph-st{font-size:12px;font-weight:700;color:var(--green)}
.mph-sc .mph-st.mph-created,.mph-sc .mph-st.mph-unpaid{color:var(--red)}
.mph-drow2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mph-lsteps{display:flex;align-items:center;gap:6px}
.mph-lsteps i{width:26px;height:5px;border-radius:999px;background:var(--line)}
.mph-lsteps i.mph-on{background:var(--ink)}
.mph-lsteps i.mph-ld{background:var(--green)}
.mph-lsteps i{all:unset;display:block;flex:none;width:26px;height:5px;border-radius:999px;background:var(--line)}
.mph-lsteps i.mph-on{background:var(--ink)}
.mph-lsteps i.mph-ld{background:var(--green)}
.mph-lsteps span{margin-left:6px;font-size:13px;font-weight:700;color:var(--muted)}
.mph-lpay{background:var(--soft);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.mph-lpay b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.mph-lpay b em{font-style:normal;font-size:13px;color:var(--muted)}
.mph-lpay span{font-size:14px;font-weight:600}
.mph-lpay small{font-size:12.5px;color:var(--muted)}
.mph-ltype{display:flex;flex-direction:column;gap:8px}
.mph-ltype button{all:unset;cursor:pointer;box-sizing:border-box;display:flex;gap:12px;align-items:center;min-height:66px;padding:10px 14px;border-radius:14px;border:1.5px solid var(--box-line)}
.mph-ltype button i{flex:none;width:20px;height:20px;border-radius:999px;border:2px solid var(--faint)}
.mph-ltype button.mph-on{border-color:var(--ink)}
.mph-ltype button.mph-on i{border:6px solid var(--sel)}
.mph-ltype b{display:block;font-size:15px;font-weight:700}
.mph-ltype small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.mph-lsum{border:1px solid var(--box-line);border-radius:14px;overflow:hidden}
.mph-lsum div{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--box-line);font-size:14px}
.mph-lsum div:last-child{border-bottom:0}
.mph-lsum span{color:var(--muted)}
.mph-lsum b{text-align:right;font-weight:700}
/* каркас CRM: страницы макета — во всю область над вкладками; окна макета — поверх
   нижних вкладок (у нас они fixed, в макете — часть страницы) */
.mph{font-size:14px;color:var(--ink);display:flex;flex-direction:column;min-height:0;flex:1}
body.es-phone .content:has(>.mph){padding:0!important;overflow:hidden;display:flex;flex-direction:column}
body.es-phone .content>.mph>.mph-pg{flex:1;min-height:0}
body.es-phone .content>.mph-hd{flex:none}
.mph-fs{z-index:160!important}
.mph-veil{z-index:150!important}
.mph-sheet{z-index:151!important}
/* окно по центру (openSheet(..., true) макета — класс .ctr), правила макета дословно */
.mph-sheet.mph-ctr{top:50%;bottom:auto;left:16px;right:16px;transform:translateY(-50%);border-radius:22px;padding:14px 16px 16px;max-width:420px;animation:mph-zc .18s ease-out}
.mph-sheet.mph-ctr .mph-grab{display:none}
.mph-sheet.mph-ctr .mph-menu{gap:10px;margin-top:12px}
.mph-sheet.mph-ctr .mph-mi{min-height:76px;padding:12px 18px;border-radius:16px;gap:4px}
.mph-sheet.mph-ctr .mph-mi b{font-size:17px}
.mph-fs input,.mph-sheet input,.mph-fs select{font-size:16px}
/* фон страниц макета — светлая панель, шапка без линии (.hd макета) */
body.es-phone .content:has(>.mph){background:var(--panel)}
body.es-phone .esjour-head.mph-hd{border-bottom:0}
/* шапка вкладок v5 — размеры .hd и .bell макета; колокольчик остаётся нашим (те же тревоги) */
body.es-phone .esjour-head.mph-hd{gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 12px 6px 16px;min-height:0}
body.es-phone .esjour-head.mph-hd .notifbtn{width:44px;height:44px;border-radius:12px}
/* полоса прокрутки ленты: на iPhone её нет вовсе, в узком окне компьютера она
   отъедала 10px справа — карточки становились уже макета */
body.es-phone .mph .mph-pg{scrollbar-width:none}
body.es-phone .mph .mph-pg::-webkit-scrollbar{display:none}
body.es-phone .mph-fs .mph-fs-b{scrollbar-width:none}
body.es-phone .mph-fs .mph-fs-b::-webkit-scrollbar{display:none}
/* спрятанная боковая панель стоит за правым краем, но её тень (-18px 0 50px)
   ложилась серой полосой на правый край телефона */
body.es-phone .drawer:not(.show){box-shadow:none}

/* карточка визита на телефоне — макет 21 renderVisit (Тарик 20.10: «вот так должно быть»), стили дословно */
.mph-pid{font-family:var(--mono);font-size:11.5px;color:var(--brand);background:var(--soft);border-radius:6px;padding:2px 7px}
.mph-pill{margin-left:auto;height:28px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:700;display:flex;align-items:center;background:var(--soft);color:var(--brand);white-space:nowrap}
.mph-pill.mph-came{background:var(--sel);color:var(--panel)}
.mph-pill.mph-no{background:var(--cream);color:var(--red)}
.mph-pill.mph-hold{background:#FBE7E1;color:var(--red)}
.mph-cl h2{margin:0;font-size:clamp(21px,6vw,25px);font-weight:800;line-height:1.15}
.mph-cl .mph-id{margin-top:4px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.mph-cl .mph-id span{white-space:nowrap}
.mph-cl .mph-by{margin-top:6px;font-size:12.5px;color:var(--brand)}
.mph-sec{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.mph-sec>.mph-h{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em;display:flex;justify-content:space-between;align-items:center}
.mph-sec>.mph-h button{all:unset;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--brand);min-height:32px;display:flex;align-items:center}
.mph-tm{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.mph-tm b{font-size:17px;font-weight:800}
.mph-tm span{font-size:13px;color:var(--muted)}
.mph-mr{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.mph-mr .mph-av{width:26px;height:26px;font-size:9.5px}
.mph-mr small{color:var(--muted);font-weight:500}
.mph-svc{font-size:15px;font-weight:600;line-height:1.35}
.mph-tags{display:flex;flex-wrap:wrap;gap:6px}
.mph-tg{height:26px;padding:0 9px;border-radius:8px;background:var(--soft);font-size:12.5px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.mph-tg i{width:9px;height:9px;border-radius:3px}
.mph-payr{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--box-bg);border:1px solid var(--box-line)}
.mph-payr span{font-size:13px;color:var(--muted)}
.mph-payr b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.mph-payr span b{color:var(--ink)}
.mph-payr .mph-ok{margin-left:auto;font-size:12.5px;font-weight:700;color:#3F6E46;background:#E7F0E8;border-radius:8px;padding:4px 9px}
.mph-payr .mph-wait{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--brand);background:var(--cream);border-radius:8px;padding:4px 9px}
.mph-payr .mph-nsx{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--red);background:var(--cream);border-radius:8px;padding:4px 9px}
.mph-ta{width:100%;min-height:76px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:9px 11px;font-size:14px;color:var(--ink);resize:vertical;outline:none;line-height:1.4}
.mph-ta:focus{border-color:var(--brand)}
.mph-cmrow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.mph-cmrow .mph-sbtn{margin-left:auto}
.mph-box{border:1px solid var(--box-line);background:var(--box-bg);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;font-size:13px}
.mph-box .mph-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.mph-box .mph-top b{font-size:14px}
.mph-box .mph-top span{font-size:12px;color:var(--muted);white-space:nowrap}
.mph-box .mph-m{font-size:12.5px;color:var(--muted);line-height:1.4}
.mph-pb{height:6px;border-radius:6px;background:var(--cream);overflow:hidden}
.mph-pb i{display:block;height:100%;background:var(--green);border-radius:6px}
.mph-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mph-sec>.mph-big{flex:none}
.mph-svr{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;min-height:48px;padding:7px 12px;border-radius:12px;border:1px solid var(--box-line);background:var(--panel)}
.mph-svr b{font-size:13.5px;font-weight:600;line-height:1.3}
.mph-svr span{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.mph-svr small{grid-column:1/-1;font-size:11.5px;color:var(--muted)}
.mph-svr.mph-on{border:1.5px solid var(--ink)}
.mph-colr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.mph-colr button{all:unset;cursor:pointer;box-sizing:border-box;min-height:72px;border-radius:14px;border:2px solid var(--box-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:700;text-align:center;padding:6px}
.mph-colr button i{width:28px;height:28px;border-radius:999px}
.mph-colr button.mph-on{border-color:var(--ink)}
.mph-colr .mph-auto{grid-column:1/-1;min-height:52px;flex-direction:row;gap:10px;font-size:14px}
.mph-tgc{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:600}
.mph-tgc i{width:12px;height:12px;border-radius:999px}
.mph-tgc::after{content:"";width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-1px,-1px);margin-left:2px}
/* карточка визита стоит на слое прежней (40): наши окна — оплата, «Не пришёл»,
   подтверждение, перезапись — на 80 и выше и обязаны открываться ПОВЕРХ неё */
#esnz.mph-vis{z-index:40!important}
/* базовые правила макета для полей и кнопок внутри его окон: шрифт — от страницы */
:where(.mph-fs,.mph-sheet) button{font-family:inherit;color:inherit}
:where(.mph-fs,.mph-sheet) :is(input,select,textarea){font-family:inherit}
/* Stripe на телефоне — раздел компьютера (Тарик 20.10). В окне привязки «Предоплаченная
   услуга» шире трети листа и вылезала за край — на телефоне подпись переносится */
body.es-phone .spb-seg3 button{white-space:normal;height:auto;min-height:40px;line-height:1.2;padding:4px 6px;box-sizing:border-box}
/* окно «Создать ссылку» (Тарик 20.10): клиент — обязательное красное поле, пока не выбран;
   невыбранное «что продаём» и список подсвечиваются красным при попытке создать */
.sf-box .sl-bad{box-shadow:0 0 0 1.5px var(--red);border-radius:10px}
.sf-box .spb-res{max-height:180px}
.sf-box .spb-seg3 button{white-space:normal;height:auto;min-height:34px;line-height:1.2;padding:4px 6px;box-sizing:border-box}
/* на iPhone поле мельче 16px при касании увеличивает страницу */
body.es-phone .sf-box .inp{font-size:16px}
/* комментарий о клиенте (Тарик 20.10): в карточке клиента — поле с «Сохранить», в записи — текст */
.cb-cmtx{height:auto;min-height:76px;line-height:1.45;padding:9px 11px;white-space:pre-wrap;resize:vertical}
.cb-cmrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.cb-cmrow .cb-eb:disabled{opacity:.45;cursor:default}
.ccm{white-space:pre-wrap;font-size:12.5px;line-height:1.45;color:var(--ink);background:var(--box-bg,#FCFAF6);border:1px solid var(--box-line,#EFEAE0);border-radius:10px;padding:8px 10px}
/* фото мастера в кружке (Тарик 20.10): картинка занимает весь кружок; нет фото — буквы, как было */
.esmph{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
:is(.av,.esvav,.ms-av,.rb-av,.mph-av,.spb-av):has(>.esmph){overflow:hidden;padding:0;background:var(--cream)}
.msf-photo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ms-av.xl{width:64px;height:64px;flex-basis:64px;font-size:20px}
.msf-up{cursor:pointer}
.msw-hd>.ms-av.big{margin-right:4px}
.msf-st{font-size:12px;color:var(--muted)}

/* ═══ БЫСТРЫЙ ПРОСМОТР ВИЗИТА + ПИЛЮЛЯ «НЕ ЗАКРЫТЫ» (ТЗ «Статус визита», 20.10) ═══
   Эталон вида — schedule/20-quick-view.html, перенос 1:1. Окно живёт в body и
   ставится position:fixed рядом с карточкой (esБППоставить). */
.ncchip{background:var(--red);color:var(--panel)}
.ncchip .nslist{max-height:60vh;overflow:auto}
#esqv{position:fixed;z-index:60;color:var(--ink);font-family:inherit}
.qv{width:320px;background:var(--panel);border-radius:14px;box-shadow:0 1px 2px rgba(43,36,30,.05),0 18px 40px -16px rgba(43,36,30,.32);border:1px solid var(--box-line);overflow:hidden}
.qv-hd{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:start;padding:14px 14px 12px}
.qv-av{width:40px;height:40px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;place-items:center;font-size:13px;font-weight:800}
.qv-nm{min-width:0}
.qv-nm b{display:block;font-size:15px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-ph{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;color:var(--brand);font-variant-numeric:tabular-nums;white-space:nowrap}
.qv-cp{all:unset;cursor:pointer;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}
.qv-cp:hover{background:var(--soft);color:var(--ink)}
.qv-cp svg{width:13px;height:13px}
.qv-cp.ok{color:var(--st-new)}
.qv-pid{color:var(--muted);font-size:11.5px}
.qv-by{margin-top:3px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-stl{margin-top:7px}
.qv-st{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.qv-st i{width:6px;height:6px;border-radius:999px;background:currentColor}
.qv-st.ok{background:color-mix(in oklab,var(--green) 18%,var(--panel));color:var(--st-new)}
.qv-st.due{background:color-mix(in oklab,var(--red) 13%,var(--panel));color:var(--red)}
.qv-st.wait{background:var(--soft);color:var(--brand)}
.qv-seg{margin:0 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--cream);border-radius:10px;padding:3px;gap:2px}
.qv-seg button{all:unset;cursor:pointer;height:28px;border-radius:8px;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--brand);white-space:nowrap}
.qv-seg button:hover{background:color-mix(in oklab,var(--panel) 55%,transparent)}
.qv-seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.qv-seg button.on.no{color:var(--red)}
.qv-svc{padding:12px 14px 0;display:flex;flex-direction:column;gap:6px}
.qv-svc b{font-size:13.5px;font-weight:700;line-height:1.3}
.qv-meta{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--brand)}
.qv-meta div{display:flex;gap:6px;align-items:baseline;min-width:0}
.qv-meta span{color:var(--muted);flex:none;width:52px}
.qv-meta em{font-style:normal;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-sum{margin:12px 14px 0;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--box-line);background:var(--box-bg);border-radius:11px}
.qv-sum>div{padding:9px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.qv-sum>div+div{border-left:1px solid var(--box-line)}
.qv-sum small{font-size:11px;color:var(--muted)}
.qv-sum b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.qv-sum b.paid{color:var(--st-new);font-size:13.5px}
.qv-sum b.due{color:var(--red)}
.qv-sum em{font-style:normal;font-size:11px;color:var(--muted)}
.qv-why{margin:10px 14px 0;font-size:12px;font-weight:600;color:var(--red);line-height:1.4}
.qv-ft{display:flex;gap:8px;padding:12px 14px 14px}
.qv-ft button{all:unset;cursor:pointer;flex:1;height:36px;border-radius:10px;display:grid;place-items:center;font-size:12.5px;font-weight:700;text-align:center}
.qv-ft .pay{background:var(--brand-2);color:var(--panel)}.qv-ft .pay:hover{background:var(--brand)}
.qv-ft .op{border:1px solid var(--line);color:var(--brand)}.qv-ft .op:hover{background:var(--soft);color:var(--ink)}
body.es-phone #esqv{display:none}

/* ═══ КАДР ФОТО МАСТЕРА (Тарик 20.10): выбрать фрагмент перед сохранением ═══ */
.mscrop-bg{position:fixed;inset:0;z-index:80;background:rgba(43,36,30,.5);display:flex;
  align-items:center;justify-content:center;padding:16px}
.mscrop{background:var(--panel);border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);
  padding:18px;display:flex;flex-direction:column;gap:14px;max-width:100%}
.mscrop-hd{display:flex;flex-direction:column;gap:3px}
.mscrop-hd b{font-size:15px;font-weight:800}
.mscrop-hd small{font-size:12px;color:var(--muted)}
.mscrop-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.mscrop-st{position:relative;overflow:hidden;border-radius:10px;background:var(--soft);cursor:grab;
  touch-action:none;user-select:none;flex:none;max-width:100%}
.mscrop-st:active{cursor:grabbing}
.mscrop-st img{position:absolute;left:0;top:0;max-width:none;pointer-events:none;transform-origin:0 0}
.mscrop-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 400px rgba(43,36,30,.45);
  outline:2px solid rgba(255,255,255,.85);outline-offset:-2px;pointer-events:none}
.mscrop-pv{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
.mscrop-pv canvas{border-radius:50%;background:var(--soft);display:block}
.mscrop-pv canvas:first-of-type{width:64px;height:64px}
.mscrop-pv canvas:last-of-type{width:30px;height:30px}
.mscrop-zoom{display:flex;align-items:center;gap:10px;color:var(--brand);font-weight:700}
.mscrop-zoom input{flex:1;accent-color:var(--brand-2)}
.mscrop-ft{display:flex;align-items:center;gap:8px}
.mscrop-ft .msf-st{flex:1}

/* ═══ «Настроить» абонемент в карточке визита (Тарик 20.10): кнопка + выбор ═══ */
.esnz .sec .ttl{display:flex;align-items:center;gap:8px}
.abset-w{margin-left:auto;position:relative}
.abset{all:unset;box-sizing:border-box;cursor:pointer;margin-left:auto;height:26px;padding:0 10px;
  border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--brand);
  font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;display:inline-flex;
  align-items:center;gap:6px;white-space:nowrap}
.abset:hover{background:var(--soft);color:var(--ink)}
.abset:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.abset-ch{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px)}
.abmenu{position:absolute;right:0;top:32px;z-index:40;width:260px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;
  display:flex;flex-direction:column;gap:2px;text-transform:none;letter-spacing:0}
.abmenu[hidden]{display:none}
.abmenu-h{font-size:11px;color:var(--muted);font-weight:600;padding:4px 8px 6px}
.abmenu button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:1px;
  padding:7px 9px;border-radius:9px;font-size:12px;color:var(--ink)}
.abmenu button:hover,.abmenu button:focus-visible{background:var(--soft)}
.abmenu button b{font-weight:800}
.abmenu button span{color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abmenu button small{font-size:11px;color:var(--muted)}
/* Тарик 20.10: внесённая предоплата под «К оплате» в карточке визита */
.esnz .prenote{margin-top:-4px;font-size:12px;font-weight:600;color:var(--st-new);line-height:1.4}

/* ═══ ГРАФИК РАБОТЫ v2 (Тарик 20.10, эталон 10-staff-schedule-v2.html) ═══════════════
   Перенос вида 1:1 поверх прежней разметки: всё под #esgrafik.gr2, чтобы старые правила
   .gr-* (их специфичность ниже) не спорили с новыми. */
#esgrafik.gr2{--work:color-mix(in oklab,var(--green) 17%,var(--panel));
  --pv:color-mix(in oklab,var(--gold) 16%,var(--panel));
  --shadow2:0 1px 2px rgba(43,36,30,.05),0 14px 34px -20px rgba(43,36,30,.28);font-size:12.5px}
#esgrafik.gr2 .gr-hd{height:62px;gap:12px;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--line)}
#esgrafik.gr2 .gr-back{all:unset;cursor:pointer;font-weight:600;color:var(--brand);white-space:nowrap}
#esgrafik.gr2 .gr-back:hover{color:var(--ink)}
#esgrafik.gr2 h1.gr-t{margin:0 6px 0 2px;font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
#esgrafik.gr2 .gr-mnav{display:flex;align-items:center;gap:2px;background:var(--soft);border-radius:12px;padding:3px}
#esgrafik.gr2 .gr-sq{all:unset;box-sizing:border-box;cursor:pointer;width:30px;height:30px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600}
#esgrafik.gr2 .gr-sq:hover{background:var(--panel)}
#esgrafik.gr2 .gr-m{font-size:13.5px;font-weight:800;min-width:124px;text-align:center}
#esgrafik.gr2 .gr-btn{all:unset;box-sizing:border-box;cursor:pointer;height:34px;padding:0 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);font-size:12.5px;font-weight:600;display:inline-flex;
  align-items:center;white-space:nowrap}
#esgrafik.gr2 .gr-btn:hover{background:var(--soft)}
#esgrafik.gr2 .gr-leg{margin-left:auto;gap:14px;font-size:11.5px;color:var(--muted)}
#esgrafik.gr2 .gr-leg span{gap:6px;white-space:nowrap}
#esgrafik.gr2 .gr-i.work{width:14px;height:14px;border-radius:5px;background:var(--work)}
#esgrafik.gr2 .gr-i.off{width:14px;height:14px;border-radius:5px;background:transparent;border:1px dashed var(--faint);box-sizing:border-box}
#esgrafik.gr2 .gr-i.dot{width:6px;height:6px;border-radius:999px;background:var(--gold)}
#esgrafik.gr2 .gr-i.bar{width:14px;height:2px;border-radius:2px;background:var(--gold);opacity:.6}
#esgrafik.gr2 .gr-i.pv{width:14px;height:14px;border-radius:5px;background:var(--pv);box-shadow:inset 0 0 0 1.5px var(--gold)}
@media (max-width:1320px){#esgrafik.gr2 .gr-leg{display:none}}
#esgrafik.gr2 .gr-body{grid-template-columns:minmax(0,1fr) 344px;gap:12px;padding:12px}
#esgrafik.gr2 .gr-tw{border-radius:16px;box-shadow:var(--shadow2)}
#esgrafik.gr2 .gr-t thead th{height:54px;border-right:0;border-bottom:1px solid var(--line)}
#esgrafik.gr2 .gr-t thead th.gr-m-nm{padding:0 16px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);border-right:1px solid var(--box-line)}
#esgrafik.gr2 .gr-t th.gr-dh{min-width:40px;cursor:pointer;font-size:12.5px;line-height:1.25;color:var(--ink);background:var(--panel)}
#esgrafik.gr2 .gr-t th.gr-dh:hover{background:var(--panel)}
#esgrafik.gr2 .gr-t th.gr-dh b{display:inline-grid;place-items:center;min-width:24px;height:22px;border-radius:7px;
  font-size:12.5px;font-weight:800;color:var(--ink)}
#esgrafik.gr2 .gr-t th.gr-dh small{display:block;font-size:10.5px;font-weight:600;color:var(--muted)}
#esgrafik.gr2 .gr-t th.gr-dh.we b,#esgrafik.gr2 .gr-t th.gr-dh.we small{color:var(--faint)}
#esgrafik.gr2 .gr-t th.gr-dh.today b{background:var(--sel);color:var(--panel)}
#esgrafik.gr2 .gr-t th.gr-dh:hover b{background:var(--soft)}
#esgrafik.gr2 .gr-t th.gr-dh.today:hover b{background:var(--sel)}
#esgrafik.gr2 .gr-t th.gr-m-nm{width:212px;min-width:212px;border-right:1px solid var(--box-line)}
#esgrafik.gr2 .gr-t tbody th.gr-m-nm{border-bottom:1px solid var(--box-line)}
#esgrafik.gr2 .gr-m-nm .mcell{gap:10px;padding:0 16px;height:52px}
#esgrafik.gr2 .gr-m-nm .av{width:32px;height:32px;font-size:11.5px}
#esgrafik.gr2 .gr-m-nm b{font-size:13px}
#esgrafik.gr2 tr.pvrow th.gr-m-nm .mcell{box-shadow:inset 3px 0 0 var(--gold)}
#esgrafik.gr2 .gr-t td.gr-c{height:52px;min-width:40px;padding:3px 2px;border-right:0;border-bottom:1px solid var(--box-line);
  background:transparent;cursor:cell;position:relative;font-variant-numeric:tabular-nums;box-shadow:none}
#esgrafik.gr2 .gr-t td.gr-c::before,#esgrafik.gr2 .gr-t td.gr-c::after{content:none}
#esgrafik.gr2 .gr-t td.gr-c.we{background:var(--box-bg)}
#esgrafik.gr2 .gr-t td.gr-c.td{background:color-mix(in oklab,var(--cream) 45%,var(--panel))}
#esgrafik.gr2 .gr-t td.gr-c:hover{background-color:transparent}
#esgrafik.gr2 .gr-t td.gr-c.we:hover{background:var(--box-bg)}
#esgrafik.gr2 .pl{height:100%;border-radius:10px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;position:relative;font-size:11px;line-height:1.15;transition:box-shadow .12s,background .12s}
#esgrafik.gr2 td.gr-c.work .pl{background:var(--work)}
#esgrafik.gr2 .pl b{display:block;font-weight:800;color:var(--ink)}
#esgrafik.gr2 .pl i{display:block;font-style:normal;font-weight:600;color:var(--brand)}
#esgrafik.gr2 .pl sup{font-size:7.5px;vertical-align:4px;margin-left:1px}
#esgrafik.gr2 td.gr-c.off .pl{box-shadow:inset 0 0 0 1px var(--line);background:repeating-linear-gradient(135deg,
  transparent 0 5px,color-mix(in oklab,var(--cream) 60%,transparent) 5px 6px)}
#esgrafik.gr2 .pl .off{font-size:10.5px;color:var(--muted);font-weight:700}
#esgrafik.gr2 td.gr-c:hover .pl{box-shadow:inset 0 0 0 1px var(--faint)}
#esgrafik.gr2 td.gr-c.man .pl::after{content:"";position:absolute;top:5px;right:5px;width:5px;height:5px;
  border-radius:999px;background:var(--gold)}
#esgrafik.gr2 td.gr-c.brk .pl::before{content:"";position:absolute;left:9px;right:9px;bottom:5px;height:2px;
  border-radius:2px;background:var(--gold);opacity:.6}
#esgrafik.gr2 td.gr-c.sel .pl{box-shadow:inset 0 0 0 2px var(--ink);background:var(--cream)}
#esgrafik.gr2 td.gr-c.sel.work .pl{background:color-mix(in oklab,var(--green) 26%,var(--panel))}
#esgrafik.gr2 td.gr-c.pv .pl{background:var(--pv);box-shadow:inset 0 0 0 1.5px var(--gold)}
#esgrafik.gr2 td.gr-c.pv.off .pl{background:var(--pv)}
#esgrafik.gr2 .gr-t tbody tr.on td.gr-c,#esgrafik.gr2 .gr-t tbody tr.on td.gr-c.work{background-color:transparent}
#esgrafik.gr2 .gr-t th.gr-sum,#esgrafik.gr2 .gr-t td.gr-sum{min-width:92px;padding:0 14px;text-align:right;
  font-size:11.5px;color:var(--muted);border-left:1px solid var(--box-line)}
#esgrafik.gr2 .gr-t thead th.gr-sum{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
#esgrafik.gr2 .gr-t td.gr-sum b{display:block;color:var(--ink);font-size:13px;font-weight:800}
#esgrafik.gr2 .gr-side{border-radius:16px;box-shadow:var(--shadow2);padding:0;display:flex;flex-direction:column;min-height:0;gap:0}
#esgrafik.gr2 .gr-side .cs-tabs{gap:18px;padding:0 16px;border-bottom:1px solid var(--line);flex:none}
#esgrafik.gr2 .gr-side .cs-tabs button{padding:15px 0 11px;font-size:12.5px;white-space:nowrap}
#esgrafik.gr2 .gr-pane{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
#esgrafik.gr2 .gr-sel{border-radius:12px;padding:11px 13px}
#esgrafik.gr2 .gr-dark{height:38px;border-radius:11px;font-size:13px}
#esgrafik.gr2 .gr-dark[disabled]{background:var(--cream);color:var(--faint);cursor:default}
#esgrafik.gr2 .gr-chips button{height:28px;padding:0 10px}
#esgrafik.gr2 .gr-err{border:1px solid var(--red);border-radius:12px;padding:10px 12px;font-size:12px;
  line-height:1.45;display:flex;flex-direction:column;gap:6px}
#esgrafik.gr2 .gr-err b{color:var(--red)}
/* «Автоматически» */
#esgrafik.gr2 .steps{display:flex;flex-direction:column;gap:6px;counter-reset:s}
#esgrafik.gr2 .steps div{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;font-size:12px;
  color:var(--brand);line-height:1.45}
#esgrafik.gr2 .steps div::before{counter-increment:s;content:counter(s);width:20px;height:20px;border-radius:999px;
  background:var(--cream);color:var(--brand);display:grid;place-items:center;font-size:10.5px;font-weight:800}
#esgrafik.gr2 .ms-t{width:100%;min-height:196px;height:auto;resize:vertical;border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;font:inherit;font-size:13px;line-height:1.55;color:var(--ink);background:var(--box-bg);outline:none;box-sizing:border-box}
#esgrafik.gr2 .ms-t:focus{border-color:var(--brand);background:var(--panel)}
#esgrafik.gr2 .ms-t::placeholder{color:var(--faint)}
#esgrafik.gr2 .ms-load{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 0;color:var(--brand);
  font-size:12.5px;font-weight:600}
#esgrafik.gr2 .dots{display:flex;gap:5px}
#esgrafik.gr2 .dots i{width:7px;height:7px;border-radius:999px;background:var(--gold);animation:grdt 1s infinite ease-in-out}
#esgrafik.gr2 .dots i:nth-child(2){animation-delay:.15s}
#esgrafik.gr2 .dots i:nth-child(3){animation-delay:.3s}
@keyframes grdt{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){#esgrafik.gr2 .dots i{animation:none;opacity:.7}}
#esgrafik.gr2 .ms-who{display:flex;align-items:center;gap:10px}
#esgrafik.gr2 .ms-who .av{width:32px;height:32px;border-radius:999px;background:var(--cream);color:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:11.5px;flex:none;overflow:hidden}
#esgrafik.gr2 .ms-who b{display:block;font-size:13.5px;font-weight:800}
#esgrafik.gr2 .ms-who small{display:block;font-size:11px;color:var(--muted)}
#esgrafik.gr2 .ms-und{margin-top:8px;font-size:12px;color:var(--brand);line-height:1.45}
#esgrafik.gr2 .ms-st{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#esgrafik.gr2 .ms-st span{height:24px;padding:0 9px;border-radius:999px;background:var(--panel);font-size:11.5px;
  color:var(--brand);display:inline-flex;align-items:center;gap:4px}
#esgrafik.gr2 .ms-st span b{color:var(--ink)}
#esgrafik.gr2 .ms-st span.r,#esgrafik.gr2 .ms-st span.r b{color:var(--red)}
#esgrafik.gr2 .ms-list{display:flex;flex-direction:column;gap:5px}
#esgrafik.gr2 .pvr{display:grid;grid-template-columns:16px 58px minmax(0,1fr);gap:9px;align-items:start;padding:9px 11px;
  border:1px solid var(--box-line);border-radius:11px;background:var(--panel);cursor:pointer;font-size:12px;line-height:1.4}
#esgrafik.gr2 .pvr:hover{border-color:var(--line);background:var(--box-bg)}
#esgrafik.gr2 .pvr input{width:16px;height:16px;accent-color:var(--sel);margin:1px 0 0}
#esgrafik.gr2 .pvr .dd{font-variant-numeric:tabular-nums;color:var(--brand)}
#esgrafik.gr2 .pvr .dd b{color:var(--ink);font-weight:800}
#esgrafik.gr2 .pvr .vv{display:flex;flex-direction:column;gap:1px;min-width:0}
#esgrafik.gr2 .pvr .vv s{color:var(--faint);text-decoration-thickness:1px}
#esgrafik.gr2 .pvr .vv b{font-weight:700;color:var(--ink)}
#esgrafik.gr2 .pvr .vv em{font-style:normal;color:var(--red);font-weight:600}
#esgrafik.gr2 .pvr .vv .mute{color:var(--muted)}
#esgrafik.gr2 .pvr.conf{border-color:color-mix(in oklab,var(--red) 45%,var(--panel));
  background:color-mix(in oklab,var(--red) 5%,var(--panel));cursor:default}
#esgrafik.gr2 .pvr.same{opacity:.62;cursor:default}
#esgrafik.gr2 .ms-unc{border:1px solid var(--gold);background:color-mix(in oklab,var(--gold) 8%,var(--panel));
  border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.5;display:flex;flex-direction:column;gap:3px}
#esgrafik.gr2 .ms-unc b{font-weight:800;color:var(--brand-2)}
#esgrafik.gr2 .ms-unc span{color:var(--brand)}
/* телефон: панель под таблицей */
@media (max-width:900px){
  #esgrafik.gr2 .gr-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(260px,1fr) auto;overflow:auto}
  #esgrafik.gr2 .gr-hd{height:auto;min-height:56px;flex-wrap:wrap;row-gap:6px;padding:8px 12px}
  #esgrafik.gr2 .gr-t th.gr-m-nm{width:118px;min-width:118px}
  #esgrafik.gr2 .gr-m-nm .mcell{padding:0 8px;gap:6px}
  #esgrafik.gr2 .gr-m-nm .av{width:26px;height:26px;flex-basis:26px}
  #esgrafik.gr2 .gr-m-nm small{display:none}
  #esgrafik.gr2 .gr-m-nm b{font-size:12px;white-space:normal;line-height:1.2}
  #esgrafik.gr2 .gr-t th.gr-sum,#esgrafik.gr2 .gr-t td.gr-sum{min-width:58px;padding:0 8px}
}


/* Тарик 21.10: «Нужно занять Правило?» — два варианта на всю ширину */
.bk-seg.bk-prq{grid-template-columns:1fr 1fr}

/* ═══ ↩ ВОЗВРАТ ПО STRIPE (Тарик 21.10) ═══ */
.stp-rfbtn{background:var(--panel);color:var(--brand);border:1px solid var(--line)}
.stp-rf{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:var(--red);white-space:nowrap}
.rf-box{width:min(560px,100%)}
.rf-list{display:flex;flex-direction:column;gap:5px;max-height:260px;overflow:auto}
.rf-row{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:var(--panel);font-size:12.5px}
.rf-row:hover{background:var(--soft)}
.rf-row.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.rf-row[disabled]{opacity:.5;cursor:default}
.rf-row small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.rf-d{font-variant-numeric:tabular-nums;font-weight:700}
.rf-t{min-width:0}.rf-t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-s{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.rf-sum{display:flex;gap:8px;align-items:center}.rf-sum .inp{flex:1}
.rf-eff{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--brand)}
.rf-warn{border:1px solid var(--red);border-radius:11px;padding:10px 12px;font-size:12.5px;font-weight:600;color:var(--red)}
.rf-go{background:var(--red)!important}

/* ═══ РАЗДЕЛ «STRIPE» (макет 17-stripe v3.1 + PROMPT-stripe-boy, Тарик 21.10) ═════════
   ⛔ «Повтори один к одному»: правила ниже — CSS макета БЕЗ ИЗМЕНЕНИЙ, только с
   префиксом .stp2 (обёртка раздела и окна). Имена макета (.dh, .chip, .seg, .dark, .kv…)
   уже заняты в CRM — без префикса они ломают чужие экраны (урок графика работы, 20.10).
   Обёртка повторяет body и .wrap макета: Manrope 12.5px, ширина до 1320 (минус поля). */
.stp2{--mono:ui-monospace,SFMono-Regular,Menlo,monospace;font-family:Manrope,-apple-system,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);font-size:12.5px;line-height:normal;-webkit-font-smoothing:antialiased}
.stp2 [hidden]{display:none!important}
/* у этих классов в макете свой display — атрибут hidden их не прячет без явного правила
   (урок 30.09: невидимое окно ловило все клики) */
.stp2 .ov[hidden],.stp2 .mb[hidden],.stp2 .mf[hidden],.stp2 .fld[hidden],.stp2 .pop[hidden],
.stp2 .res[hidden],.stp2 .pick[hidden],.stp2 .ddp[hidden],.stp2 .eff[hidden]{display:none!important}
.stp2 button{font:inherit}
.stp2-sec{max-width:1280px;margin:0 auto;padding:0 0 20px;display:flex;flex-direction:column;gap:12px}
/* сброс того, что общие правила CRM навешивают на те же имена классов (сверено
   вычисленными стилями: макет и раздел в одном окне, 21.10) */
.stp2 .chips{margin:0}
.stp2 .seg{overflow:visible}
.stp2 .dh{gap:normal;grid-template-columns:none}
.stp2 .pop .inp,.stp2 .row2 .inp{flex:0 1 auto;background:var(--panel);padding:0 11px}
.stp2 .inp{min-height:0}
.stp2 .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stp2 .hd h1{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.stp2 .cnt{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:var(--panel);font-size:11.5px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.stp2 .sp{flex:1}
.stp2 .dark{all:unset;cursor:pointer;height:32px;padding:0 14px;border-radius:9px;background:var(--brand-2);color:var(--panel);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.stp2 .dark:hover{background:var(--brand)}
.stp2 .dark:disabled{background:var(--cream);color:var(--faint);cursor:not-allowed}
.stp2 .ghost{all:unset;cursor:pointer;height:32px;padding:0 13px;border-radius:9px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.stp2 .ghost:hover{background:var(--soft)}
.stp2 .seg{display:flex;background:var(--cream);border-radius:10px;padding:3px;gap:2px}
.stp2 .seg button{all:unset;cursor:pointer;height:26px;padding:0 11px;border-radius:8px;font-size:12px;font-weight:600;color:var(--brand);display:flex;align-items:center;justify-content:center;white-space:nowrap}
.stp2 .seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.stp2 .rng{position:relative}
.stp2 .pop{position:absolute;right:0;top:36px;z-index:20;width:260px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:8px}
.stp2 .chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stp2 .chip{all:unset;cursor:pointer;height:30px;padding:0 12px;border-radius:999px;background:var(--panel);border:1px solid var(--box-line);font-size:12.5px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.stp2 .chip:hover{background:var(--soft)}
.stp2 .chip.on{background:var(--sel);color:var(--panel);border-color:var(--sel)}
.stp2 .chip .n{font-weight:800;font-variant-numeric:tabular-nums}
.stp2 .dt{width:7px;height:7px;border-radius:999px;flex:none}
.stp2 .tot{margin-left:auto;font-size:13px;color:var(--brand);white-space:nowrap}
.stp2 .tot b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.stp2 .tbl{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.stp2 .th,.stp2 .tr{display:grid;grid-template-columns:64px minmax(170px,1.1fr) minmax(220px,2fr) 110px 150px 120px 30px;gap:12px;align-items:center;padding:0 18px}
.stp2 .th{height:38px;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.stp2 .th .r,.stp2 .tr .r{text-align:right}
.stp2 .dh{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 18px;background:var(--box-bg);border-bottom:1px solid var(--box-line);font-size:12px;font-weight:700}
.stp2 .dh small{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.stp2 .tr{min-height:56px;padding-top:7px;padding-bottom:7px;border-bottom:1px solid var(--box-line);cursor:pointer}
.stp2 .tr:hover{background:var(--soft)}
.stp2 .tr:last-child{border-bottom:0}
.stp2 .tm{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.stp2 .cl{min-width:0}
.stp2 .pid{display:inline-flex;height:20px;padding:0 7px;align-items:center;border-radius:6px;background:var(--cream);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--brand)}
.stp2 .cl b{display:block;margin-top:3px;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp2 .ti{min-width:0}
.stp2 .ti b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp2 .ti small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.stp2 .am{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.stp2 .am small{font-size:10.5px;font-weight:600;color:var(--muted);margin-left:2px}
.stp2 .st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--soft);color:var(--brand)}
.stp2 .st.paid{color:var(--green)}
.stp2 .st.unpaid{color:var(--muted)}
.stp2 .st.refund{color:var(--red)}
.stp2 .by{display:flex;align-items:center;gap:7px;min-width:0;font-weight:600}
.stp2 .av{width:24px;height:24px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;place-items:center;font-size:10.5px;font-weight:800;flex:none;text-transform:uppercase}
.stp2 .empty{padding:40px 18px;text-align:center;color:var(--muted)}
.stp2 .ov{position:fixed;inset:0;z-index:50;background:rgba(43,36,30,.45);display:grid;place-items:center;padding:20px}
.stp2 .box{width:560px;max-width:100%;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--panel);border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45)}
.stp2 .mh{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 10px}
.stp2 .mh div{flex:1}
.stp2 .mh b{display:block;font-size:15px;font-weight:800}
.stp2 .mh small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.stp2 .x{all:unset;cursor:pointer;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:14px}
.stp2 .x:hover{background:var(--soft);color:var(--ink)}
.stp2 .mb{flex:1;min-height:0;overflow:auto;padding:4px 18px 14px;display:flex;flex-direction:column;gap:14px}
.stp2 .mf{flex:none;display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.stp2 .mf .hint{margin-right:auto}
.stp2 .fld{display:flex;flex-direction:column;gap:5px}
.stp2 .lbl{font-size:11.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px}
.stp2 .lbl i{font-style:normal;color:var(--red)}
.stp2 .lbl .r{margin-left:auto;font-weight:500}
.stp2 .inp{all:unset;box-sizing:border-box;width:100%;height:36px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:13px;color:var(--ink)}
.stp2 .inp:focus{border-color:var(--brand)}
.stp2 .inp::placeholder{color:var(--faint)}
.stp2 .inp.num{font-variant-numeric:tabular-nums;font-weight:700}
.stp2 textarea.inp{height:60px;padding:8px 11px;resize:none;line-height:1.4}
.stp2 .hint{font-size:11.5px;color:var(--muted)}
.stp2 .hint.chg{color:var(--gold);font-weight:600}
.stp2 .err{font-size:12px;color:var(--red);font-weight:600}
.stp2 .row2{display:flex;gap:8px;align-items:center}
.stp2 .pk{position:relative}
.stp2 .res{display:flex;flex-direction:column;gap:3px;margin-top:4px;max-height:264px;overflow:auto;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.stp2 .ri{all:unset;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-height:38px;padding:5px 10px;border-radius:8px}
.stp2 .ri:hover,.stp2 .ri.act{background:var(--soft)}
.stp2 .ri b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp2 .ri small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp2 .ri .p{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.stp2 .ri mark{background:var(--cream);color:var(--ink);font-weight:800;border-radius:3px;padding:0 1px}
.stp2 .bm{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:var(--green);color:var(--panel);font-size:10.5px;font-weight:700;margin-left:6px;vertical-align:1px}
.stp2 .nores{padding:10px;color:var(--muted);font-size:12px}
.stp2 .pick{display:flex;align-items:center;gap:10px;min-height:48px;padding:7px 12px;border:1.5px solid var(--ink);border-radius:11px;background:var(--box-bg)}
.stp2 .pick .av{width:32px;height:32px;font-size:11.5px}
.stp2 .pick div{flex:1;min-width:0}
.stp2 .pick b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp2 .pick small{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.stp2 .pick .p{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.stp2 .lnk{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--brand);white-space:nowrap}
.stp2 .lnk:hover{color:var(--ink)}
.stp2 .kind{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stp2 .kind button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.stp2 .kind button b{font-size:12.5px;font-weight:700}
.stp2 .kind button small{font-size:11px;color:var(--muted)}
.stp2 .kind button:hover{background:var(--soft)}
.stp2 .kind button.on{border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink);background:var(--box-bg)}
.stp2 .cats{display:flex;gap:6px;flex-wrap:wrap}
/* ★ 22.10 частичная оплата абонемента: долги клиента под карточкой и «Full / Partial» */
.stp2 .debts{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.stp2 .debts[hidden]{display:none}
.stp2 .debts .db{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--gold);border-radius:10px;background:#fbf6e8}
.stp2 .debts .db.on{border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
.stp2 .debts .db>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stp2 .debts .db b{font-size:12.5px;font-weight:700}
.stp2 .debts .db small{font-size:11.5px;color:#8a5a00}
.stp2 .debts .db button{flex:none}
.stp2 .seg.part{display:grid;grid-template-columns:1fr 1fr;margin-bottom:8px}
.stp2 .seg.part[hidden]{display:none}
.stp2 .seg.part button{height:30px}
.stp2 .hint.debtn{margin-top:6px;color:#8a5a00}
.stp2 .hint.debtn[hidden]{display:none}
.stp2 .cats button{all:unset;cursor:pointer;height:30px;padding:0 11px;border-radius:999px;background:var(--soft);font-size:12px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.stp2 .cats button b{font-variant-numeric:tabular-nums;color:var(--ink)}
.stp2 .cats button.on{background:var(--sel);color:var(--panel)}
.stp2 .cats button.on b{color:var(--panel)}
.stp2 .pays{display:flex;flex-direction:column;gap:6px}
.stp2 .pay{all:unset;cursor:pointer;display:grid;grid-template-columns:18px 70px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.stp2 .pay:hover{background:var(--soft)}
.stp2 .pay.on{border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink);background:var(--box-bg)}
.stp2 .pay i{width:14px;height:14px;border-radius:999px;border:1.5px solid var(--faint)}
.stp2 .pay.on i{border-color:var(--sel);background:var(--sel);box-shadow:inset 0 0 0 3px var(--panel)}
.stp2 .pay .d{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3}
.stp2 .pay .d small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.stp2 .pay .t{min-width:0}
.stp2 .pay .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp2 .pay .t small{display:block;font-size:11px;color:var(--muted)}
.stp2 .pay .p{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.stp2 .pay .p small{display:block;font-size:10.5px;font-weight:600;color:var(--red)}
.stp2 .rs{display:flex;gap:6px;flex-wrap:wrap}
.stp2 .rs button{all:unset;cursor:pointer;height:30px;padding:0 12px;border-radius:999px;background:var(--soft);font-size:12px;font-weight:600;color:var(--brand)}
.stp2 .rs button:hover{background:var(--cream)}
.stp2 .rs button.on{background:var(--sel);color:var(--panel)}
.stp2 .eff{border:1px solid var(--box-line);background:var(--box-bg);border-radius:11px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.stp2 .eff .h{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.stp2 .eff div:not(.h){font-size:12.5px;display:flex;gap:8px}
.stp2 .eff div:not(.h)::before{content:"·";color:var(--muted)}
.stp2 .urlb{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--box-line);background:var(--box-bg);border-radius:11px}
.stp2 .urlb code{flex:1;min-width:0;font-family:var(--mono);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp2 .okc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 4px;text-align:center}
.stp2 .okc .ic{width:44px;height:44px;border-radius:999px;background:var(--green);color:var(--panel);display:grid;place-items:center;font-size:22px;font-weight:800}
.stp2 .okc b{font-size:15px;font-weight:800}
.stp2 .kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:6px 12px;font-size:12.5px}
.stp2 .kv span{color:var(--muted)}
.stp2 .kv b{font-weight:600}
.stp2 .cp{all:unset;cursor:pointer;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--panel);position:relative;justify-self:end;flex:none}
.stp2 .cp:hover{background:var(--soft);border-color:var(--brand)}
.stp2 .cp::before,.stp2 .cp::after{content:"";position:absolute;width:8px;height:10px;border:1.5px solid var(--brand);border-radius:2px}
.stp2 .cp::before{left:8px;top:7px}
.stp2 .cp::after{left:11px;top:10px;background:var(--panel)}
.stp2 .cp:hover::after{background:var(--soft)}
.stp2 .dd{position:relative}
.stp2 .ddh{all:unset;box-sizing:border-box;cursor:pointer;width:100%;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.stp2 .ddh:hover{border-color:var(--brand)}
.stp2 .ddh{cursor:text}
.stp2 .ddh:focus-within{border-color:var(--ink)}
.stp2 .ddh input{all:unset;flex:1;min-width:0;height:36px;font-size:13px;font-weight:500;color:var(--ink)}
.stp2 .ddh input::placeholder{color:var(--faint)}
.stp2 .ddh .chev{cursor:pointer;padding:2px}
.stp2 .dd.open .ddh{border-color:var(--ink);border-radius:9px 9px 0 0}
.stp2 .ddh #ddv{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp2 .ddh .ph{color:var(--faint);font-weight:500}
.stp2 .ddh .more{color:var(--muted);font-weight:600}
.stp2 .chev{width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);flex:none}
.stp2 .dd.open .chev{transform:translateY(2px) rotate(-135deg)}
.stp2 .ddp{border:1px solid var(--ink);border-top:0;border-radius:0 0 11px 11px;background:var(--panel);padding:8px;display:flex;flex-direction:column;gap:6px}
.stp2 .ddl{display:flex;flex-direction:column;gap:2px;max-height:250px;overflow:auto}
.stp2 .ci{all:unset;cursor:pointer;display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:38px;padding:4px 8px;border-radius:8px}
.stp2 .ci:hover,.stp2 .ci.act{background:var(--soft)}
.stp2 .ci i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--faint);display:grid;place-items:center;font-style:normal;font-size:10px;line-height:1;color:var(--panel)}
.stp2 .ci.on i{background:var(--sel);border-color:var(--sel)}
.stp2 .ci.on i::after{content:"✓";font-weight:800}
.stp2 .ci b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp2 .ci small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp2 .ci .p{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.stp2 .ci mark{background:var(--cream);color:var(--ink);font-weight:800;border-radius:3px;padding:0 1px}
.stp2 .ddf{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted);padding:4px 4px 0;border-top:1px solid var(--box-line)}
.stp2 .sel{display:flex;flex-direction:column;gap:4px}
.stp2 .sl{display:grid;grid-template-columns:minmax(0,1fr) auto 24px;gap:10px;align-items:center;padding:6px 6px 6px 11px;border:1px solid var(--box-line);background:var(--box-bg);border-radius:9px}
.stp2 .sl b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.stp2 .sl small{display:block;font-size:11px;color:var(--muted)}
.stp2 .sl .p{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.stp2 .sl .rm{all:unset;cursor:pointer;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--muted);font-size:12px}
.stp2 .sl .rm:hover{background:var(--cream);color:var(--red)}
.stp2 .toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;background:var(--brand-2);color:var(--panel);font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:10px;box-shadow:var(--shadow)}
@media (max-width:1180px){.stp2 .th,.stp2 .tr{grid-template-columns:44px minmax(0,1fr) minmax(0,1.5fr) 82px 118px minmax(0,80px) 30px;gap:8px;padding-left:12px;padding-right:12px}.stp2 .tot{margin-left:0;width:100%}.stp2 .st{padding:0 7px;font-size:11.5px}.stp2 .by{font-size:12px}}
@media (max-width:1000px){.stp2 .th,.stp2 .tr{grid-template-columns:44px minmax(0,1fr) minmax(0,1.4fr) 78px 112px 30px}.stp2 .th .byh{display:none}.stp2 .tr .by{display:none}}
/* телефон: в макете раскладки нет — строка таблицы становится карточкой из тех же
   частей (время · клиент · сумма · копировать / название · статус), окна — во всю ширину */
body.es-phone .stp2-sec{padding:0 0 24px;gap:10px;min-width:0;width:100%}
body.es-phone .stp2 .hd{position:relative}
body.es-phone .stp2 .hd h1{flex:1 1 auto}
body.es-phone .stp2 .hd .sp{display:none}
body.es-phone .stp2 .seg{order:5;width:100%;overflow-x:auto;scrollbar-width:none}
body.es-phone .stp2 .seg button{flex:1 0 auto}
body.es-phone .stp2 .rng{order:6;position:static}
body.es-phone .stp2 .pop{left:0;right:0;width:auto;top:auto;margin-top:4px}
body.es-phone .stp2 .tot{margin-left:0;width:100%}
body.es-phone .stp2 .th{display:none}
body.es-phone .stp2 .tr{grid-template-columns:40px minmax(0,1fr) auto 28px;
  grid-template-areas:"tm cl am cp" "tm ti ti ti" "tm st st st";gap:4px 8px;padding:9px 12px}
body.es-phone .stp2 .tr>.tm{grid-area:tm;align-self:start;padding-top:3px}
body.es-phone .stp2 .tr>.cl{grid-area:cl}
body.es-phone .stp2 .tr>.am{grid-area:am;align-self:start}
body.es-phone .stp2 .tr>.cp{grid-area:cp;align-self:start}
body.es-phone .stp2 .tr>.ti{grid-area:ti}
body.es-phone .stp2 .tr>:nth-child(5){grid-area:st}
body.es-phone .stp2 .tr>.by{display:none}
body.es-phone .stp2 .dh{padding-left:12px;padding-right:12px}
body.es-phone .stp2 .ov{padding:10px;grid-template-columns:minmax(0,1fr)}
body.es-phone .stp2 .box{width:100%!important}
body.es-phone .stp2 .kind{grid-template-columns:1fr}
body.es-phone .stp2 .pay{grid-template-columns:18px 62px minmax(0,1fr) auto;gap:8px}

/* ⛔ Тарик 22.10: шапка колонок крупнее — правила стоят в блоке сетки (.eshead, .escol, .escol .av).
   Телефон: колонки ~64 px — крупнее только аватар, короткое имя прежнее, иначе «Anastasia S.» обрежется. */
body.es-phone .eshead{height:68px}
body.es-phone .eshead>.escol .av{width:34px;height:34px;font-size:11.5px}
/* ★ 22.10 частичная оплата абонемента — строка долга (одна на все экраны) */
.ab-debt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px;padding:7px 9px;
  border-radius:9px;background:#fbf6e8;border:1px solid var(--gold);font-size:12px;line-height:1.35;color:#6b4a00}
.ab-debt>span{flex:1;min-width:150px}
.ab-debt b{font-weight:700;color:#4a3300}
.ab-debt .ab-debt-b{all:unset;cursor:pointer;flex:none;height:26px;padding:0 10px;border-radius:7px;
  background:var(--ink,#2b241e);color:#fff;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center}
.ab-debt .ab-debt-b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dnote.ab-debtnote{color:#8a5a00}
/* ★ 22.10 комментарий о клиенте правится в карточке визита (ПК и телефон) */
.ccm-sec .ccm-ta{width:100%;box-sizing:border-box;min-height:72px;resize:vertical;font:inherit;font-size:12.5px;line-height:1.45}
.ccm-sec .ccm-act{display:flex;justify-content:flex-end;gap:6px;margin-top:6px}
.ccm-sec .ccm-act .dark{all:unset;box-sizing:border-box;cursor:pointer;height:32px;padding:0 14px;border-radius:10px;
  background:var(--brand-2);color:var(--panel);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center}
.ccm-sec .ccm-act .dark:hover{background:var(--brand)}
.ccm-sec .ccm-act button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ccm-sec .ccm-act button:disabled{opacity:.55;cursor:default}
.ccm-sec .ccm-err{color:var(--red,#b42318)}
.ccm-sec .ccm-err[hidden]{display:none}
.mph-ccm-ed{all:unset;cursor:pointer;margin-left:auto;font-size:12.5px;font-weight:700;color:var(--brand);padding:4px 2px}
.mph-ccm-ed[hidden]{display:none}
.ccm-sec .abset[hidden]{display:none}

/* ⛔ 23.10, Тарик: старший мастер (Мила) на компьютере — визит виден целиком, но без
   оплаты, продаж и списаний; клиентская база и абонементы — только чтение; услуги
   правит, но не создаёт и не убирает; мастеров правит, но не архивирует. Настоящий
   запрет — на сервере (_SENIOR_ALLOWED и проверки в ручках), здесь — чтобы не было
   кнопок, которые отвечают «нет прав». */
body.esSenior [onclick^="esВЭОплата"],
body.esSenior [onclick^="esРесурсОкно(0)"],
body.esSenior [onclick^="esРесурсАрхив"],
body.esSenior [onclick^="esРесурсВернуть"],
body.esSenior [onclick^="esВизитСторно"],
body.esSenior [onclick^="esВЭПродажа('abon')"],
body.esSenior [onclick^="esВЭПродажа('dep')"],
body.esSenior [onclick^="esАбонНастроить"],
body.esSenior [onclick^="esАбонВыборПоказать"],
body.esSenior .abset-w,
body.esSenior [onclick*="esАбДоплата("],
body.esSenior [onclick^="esБроньСсылкаОткрыть"],
body.esSenior [onclick*="esТревогаЗачесть"],
body.esSenior [onclick="esБПДело('pay')"],
body.esSenior [onclick*="esГЗОплата"],
body.esSenior [onclick*="esГЗПродажа"],
body.esSenior [onclick*="esГЗСсылкаОткрыть"],
body.esSenior [onclick^="esГЗСсылкаСоздать"],
body.esSenior [onclick^="esНЗОплатить"],
body.esSenior [onclick^="esНЗПродажа('abon')"],
body.esSenior [onclick^="esНЗПродажа('dep')"],
body.esSenior [onclick*="esНЗСсылкаСоздать"],
body.esSenior [onclick^="esТВПродать"],
body.esSenior [onclick="ES_ВЭ.вкладка='chat';esВЭРисуй()"],
body.esSenior [onclick="ES_НЗ.вкладка='chat';esНЗРисуй()"],
body.esSenior [onclick="ES_ГЗ.вкладка='chat';esГЗРисуй()"],
body.esSenior [onclick^="esКБНовый("],
body.esSenior [onclick="esКБПравка()"],
body.esSenior [onclick^="esКБКомментСохр"],
body.esSenior [onclick="esКБПродажа()"],
body.esSenior [onclick^="esККМИзм"],
body.esSenior [onclick^="esПрофиль"],
body.esSenior [onclick="esУслугаОкно(0)"],
body.esSenior [onclick^="esУслугаАрхив"],
body.esSenior [onclick^="esУслугаВернуть"],
body.esSenior [onclick^="esSГалка"],
body.esSenior [onclick="esABОкно(0)"],
body.esSenior [onclick^="esABСохранить"],
body.esSenior [onclick^="esABАрхив"],
body.esSenior [onclick^="esABВернуть"],
body.esSenior [onclick^="esABSoldDelta"],
body.esSenior [onclick^="esABSoldFreeze"],
body.esSenior [onclick^="esABSoldExpires"],
body.esSenior [onclick^="openDeal"],
body.esSenior [onclick^="esМАрхив"],
body.esSenior [onclick="esМОкно(0)"],
body.esSenior [onclick^="esМВернуть"]{display:none!important}
body.esSenior .sve4 input[readonly]{background:var(--soft,#f4f1ee);color:var(--muted,#8a8079);cursor:default}

/* ═══ РАЗДЕЛ «NOTIFICATIONS» (макет 23-notifications + PROMPT-notifications-en, Тарик 23.10) ═══
   ⛔ «Повторить макет 1:1»: правила ниже — CSS макета без изменений, только с префиксом
   .ntf2 (обёртка раздела и окна удаления); id #tList → #ntf-tList, тост — .ntf2-toast
   (он живёт в body), анимация spin → ntfspin. Имена макета (.seg, .chip, .tr, .del…)
   заняты в CRM — без префикса ломают чужие экраны (урок графика работы, 20.10).
   Обёртка повторяет body и .wrap макета: Manrope 12.5px, ширина до 1320 (минус поля). */
.ntf2{--mono:ui-monospace,SFMono-Regular,Menlo,monospace;font-family:Manrope,-apple-system,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);font-size:12.5px;line-height:normal;-webkit-font-smoothing:antialiased}
.ntf2 *{box-sizing:border-box}
.ntf2 [hidden]{display:none!important}
/* у этих классов в макете свой display — атрибут hidden их не прячет без явного правила
   (урок 30.09: невидимое окно ловило все клики) */
.ntf2 .ov[hidden],.ntf2 .fld[hidden],.ntf2 .vseg[hidden],.ntf2 .test[hidden],.ntf2 .dirty[hidden],
.ntf2 .ed[hidden],.ntf2 .wrap[hidden]{display:none!important}
.ntf2 button{font:inherit}
.ntf2-sec{max-width:1280px;margin:0 auto;padding:0 0 20px;display:flex;flex-direction:column;gap:12px}
/* сброс того, что общие правила CRM навешивают на те же имена классов (сверено
   вычисленными стилями: макет и раздел в одном окне 1024 px, 23.10) */
.ntf2 .chips{margin:0}
.ntf2 .seg{overflow:visible;max-width:none}
.ntf2 .cl .top{padding:0;flex:0 1 auto;position:static}
.ntf2 .col{flex:initial;background:none;border-radius:0;padding:0;max-height:none}
.ntf2 .dh{gap:0;position:static}
.ntf2 .box .f{flex-direction:row}
.ntf2 .dot{flex:0 1 auto}
.ntf2 .empty{margin:0;font-size:inherit;line-height:normal}
.ntf2 .wrap{max-width:1320px;margin:0 auto;padding:16px 20px 40px;display:flex;flex-direction:column;gap:12px}
.ntf2 .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ntf2 .hd h1{margin:0;font-size:16px;font-weight:800}
.ntf2 .test{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;background:var(--panel);border:1px solid var(--box-line);font-size:12px;font-weight:600;color:var(--brand)}
.ntf2 .test i{width:7px;height:7px;border-radius:999px;background:var(--gold)}
.ntf2 .test b{font-variant-numeric:tabular-nums;color:var(--ink)}
.ntf2 .sp{flex:1}
.ntf2 .seg{display:flex;background:var(--cream);border-radius:10px;padding:3px;gap:2px}
.ntf2 .seg button{all:unset;cursor:pointer;height:28px;padding:0 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--brand);display:flex;align-items:center;white-space:nowrap}
.ntf2 .seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.ntf2 .dark{all:unset;cursor:pointer;height:32px;padding:0 14px;border-radius:9px;background:var(--brand-2);color:var(--panel);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ntf2 .dark:hover{background:var(--brand)}
.ntf2 .dark:disabled{background:var(--cream);color:var(--faint);cursor:not-allowed}
.ntf2 .ghost{all:unset;cursor:pointer;height:32px;padding:0 12px;border-radius:9px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ntf2 .ghost:hover{background:var(--soft)}
.ntf2 .ghost svg{width:14px;height:14px;stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ntf2 .ghost.spin svg{animation:ntfspin .6s linear}
@keyframes ntfspin{to{transform:rotate(360deg)}}
.ntf2 .upd{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ntf2 .chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ntf2 .chip{all:unset;cursor:pointer;height:30px;padding:0 12px;border-radius:999px;background:var(--panel);border:1px solid var(--box-line);font-size:12.5px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ntf2 .chip:hover{background:var(--soft)}
.ntf2 .chip.on{background:var(--sel);color:var(--panel);border-color:var(--sel)}
.ntf2 .chip .n{font-weight:800;font-variant-numeric:tabular-nums}
.ntf2 .dt{width:7px;height:7px;border-radius:999px;flex:none}
.ntf2 .srch{margin-left:auto;flex:1 1 180px;max-width:260px;min-width:0}
.ntf2 .rf{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap}
.ntf2 .inp{all:unset;box-sizing:border-box;width:100%;height:34px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:13px;color:var(--ink)}
.ntf2 .inp:focus{border-color:var(--brand)}
.ntf2 .inp::placeholder{color:var(--faint)}
.ntf2 .tbl{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.ntf2 .th,.ntf2 .tr{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr) 118px 16px;gap:14px;align-items:center;padding:0 18px}
.ntf2 .th{height:38px;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.ntf2 .dh{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 18px;background:var(--box-bg);border-bottom:1px solid var(--box-line);font-size:12px;font-weight:700}
.ntf2 .dh small{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ntf2 .tr{min-height:56px;padding-top:7px;padding-bottom:7px;border-bottom:1px solid var(--box-line);cursor:pointer}
.ntf2 .tr:hover{background:var(--soft)}
.ntf2 .tr.open{background:var(--soft);border-bottom-color:transparent}
.ntf2 .tm{color:var(--muted);font-variant-numeric:tabular-nums}
.ntf2 .ev b{display:block;font-weight:600}
.ntf2 .ev small{display:block;font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntf2 .cl{min-width:0;display:flex;flex-direction:column;gap:2px}
.ntf2 .cl .top{display:flex;align-items:center;gap:7px;min-width:0}
.ntf2 .cl b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntf2 .pid{display:inline-flex;height:19px;padding:0 6px;align-items:center;border-radius:6px;background:var(--cream);font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--brand);flex:none}
.ntf2 .cl small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ntf2 .st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--soft);color:var(--brand);justify-self:start}
.ntf2 .st.sent{color:var(--green)}
.ntf2 .st.skip{color:var(--muted)}
.ntf2 .chev{width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);justify-self:end}
.ntf2 .tr.open .chev{transform:translateY(2px) rotate(-135deg)}
.ntf2 .xp{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;padding:4px 18px 16px 102px;background:var(--soft);border-bottom:1px solid var(--box-line)}
.ntf2 .bub{background:var(--panel);border:1px solid var(--box-line);border-radius:12px 12px 12px 4px;padding:10px 12px;white-space:pre-wrap;line-height:1.45;font-size:12.5px;max-height:260px;overflow:auto}
.ntf2 .meta{display:flex;flex-direction:column;gap:8px;font-size:12px}
.ntf2 .meta div span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-bottom:2px}
.ntf2 .meta b{font-weight:600}
.ntf2 .empty{padding:40px 18px;text-align:center;color:var(--muted)}
.ntf2 .tp{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;align-items:start}
.ntf2 .tl{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
.ntf2 .tl .cap{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 8px}
.ntf2 .tl .cap b{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.ntf2 #ntf-tList{display:flex;flex-direction:column;gap:2px}
.ntf2 .ti{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px;border-radius:10px}
.ntf2 .ti:hover{background:var(--soft)}
.ntf2 .ti.on{background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ntf2 .ti b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntf2 .ti small{display:block;font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntf2 .ti.off b{color:var(--muted)}
.ntf2 .dot{width:8px;height:8px;border-radius:999px;background:var(--green)}
.ntf2 .ti.off .dot{background:var(--faint)}
.ntf2 .lnk{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--brand)}
.ntf2 .lnk:hover{color:var(--ink)}
.ntf2 .ed{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}
.ntf2 .eh{display:flex;align-items:center;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--box-line)}
.ntf2 .eh input{all:unset;flex:1;min-width:0;font-size:16px;font-weight:800;color:var(--ink);border-bottom:1.5px dashed transparent}
.ntf2 .eh input:hover{border-bottom-color:var(--line)}
.ntf2 .eh input:focus{border-bottom-color:var(--brand)}
.ntf2 .tg{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--brand)}
.ntf2 .tg i{width:32px;height:18px;border-radius:999px;background:var(--faint);position:relative;transition:background .15s}
.ntf2 .tg i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:999px;background:var(--panel);transition:left .15s}
.ntf2 .tg.on i{background:var(--green)}
.ntf2 .tg.on i::after{left:16px}
.ntf2 .eb{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;padding:14px 18px 16px}
.ntf2 .col{display:flex;flex-direction:column;gap:14px;min-width:0}
.ntf2 .fld{display:flex;flex-direction:column;gap:6px}
.ntf2 .lbl{font-size:11.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px}
.ntf2 .lbl .r{margin-left:auto;font-weight:500}
.ntf2 .selw{position:relative}
.ntf2 .selw select{all:unset;box-sizing:border-box;width:100%;height:38px;padding:0 34px 0 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.ntf2 .selw select:focus{border-color:var(--brand)}
.ntf2 .selw::after{content:"";position:absolute;right:14px;top:14px;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.ntf2 .trg{font-size:12px;color:var(--muted);line-height:1.4}
.ntf2 .row2{display:flex;gap:8px;align-items:center}
.ntf2 .row2 .inp{width:76px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.ntf2 .vseg{display:flex;background:var(--cream);border-radius:10px;padding:3px;gap:2px;align-self:flex-start}
.ntf2 .vseg button{all:unset;cursor:pointer;height:26px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--brand)}
.ntf2 .vseg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.ntf2 textarea.txt{all:unset;box-sizing:border-box;width:100%;min-height:300px;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel);font-size:13px;line-height:1.5;white-space:pre-wrap;resize:vertical;color:var(--ink)}
.ntf2 textarea.txt:focus{border-color:var(--brand)}
.ntf2 .vars{display:flex;gap:5px;flex-wrap:wrap}
.ntf2 .vars button{all:unset;cursor:pointer;height:26px;padding:0 9px;border-radius:7px;background:var(--soft);font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--brand)}
.ntf2 .vars button:hover{background:var(--cream);color:var(--ink)}
.ntf2 .pv{background:var(--box-bg);border:1px solid var(--box-line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;position:sticky;top:12px}
.ntf2 .pv .h{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.ntf2 .pv .h small{font-size:11px;letter-spacing:0;text-transform:none;font-weight:600}
.ntf2 .pv .bub{max-height:520px}
.ntf2 .var{background:var(--cream);border-radius:3px;padding:0 2px;font-weight:700}
.ntf2 .ef{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.ntf2 .del{all:unset;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--red);margin-right:auto}
.ntf2 .del:hover{text-decoration:underline}
.ntf2 .dirty{font-size:11.5px;color:var(--gold);font-weight:700}
.ntf2 .ov{position:fixed;inset:0;z-index:50;background:rgba(43,36,30,.45);display:grid;place-items:center;padding:20px}
.ntf2 .box{width:400px;max-width:100%;background:var(--panel);border-radius:14px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.ntf2 .box b{font-size:15px;font-weight:800}
.ntf2 .box p{margin:0;color:var(--muted);line-height:1.45}
.ntf2 .box .f{display:flex;justify-content:flex-end;gap:8px}
.ntf2 .redb{background:var(--red)}
.ntf2 .redb:hover{background:var(--red);filter:brightness(.92)}
.ntf2-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;background:var(--brand-2);color:var(--panel);font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:10px;box-shadow:var(--shadow)}
@media (max-width:1180px){.ntf2 .th,.ntf2 .tr{gap:10px;padding-left:14px;padding-right:14px}.ntf2 .upd{display:none}.ntf2 .eb{grid-template-columns:minmax(0,1fr)}.ntf2 .pv{position:static}.ntf2 .tp{grid-template-columns:240px minmax(0,1fr)}.ntf2 .xp{grid-template-columns:minmax(0,1fr);padding-left:18px}}
@media (max-width:900px){.ntf2 .th,.ntf2 .tr{grid-template-columns:48px minmax(0,1fr) minmax(0,1.2fr) 96px 12px;gap:8px;padding:0 12px}.ntf2 .srch{margin-left:0;flex-basis:100%;max-width:none;order:9}.ntf2 .tr{padding-top:7px;padding-bottom:7px}.ntf2 .tp{grid-template-columns:minmax(0,1fr)}.ntf2 .tl{position:static}}

/* ═══ РАЗДЕЛ «VISITS» (макет 24-visits + PROMPT-visits-en, Тарик 23.10) ════════════════
   ⛔ «Повторить макет 1:1»: правила ниже — CSS макета без изменений, с префиксом .vz2
   (обёртка раздела, шторка визита и затемнение внутри неё); анимации spin → vzspin,
   dwin → vzdwin. Имена макета (.seg, .tbl, .tr, .kv, .x…) заняты в CRM — без префикса
   они ломают чужие экраны. Обёртка повторяет body и .wrap макета. */
.vz2{--mono:ui-monospace,SFMono-Regular,Menlo,monospace;font-family:Manrope,-apple-system,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);font-size:12.5px;line-height:normal;-webkit-font-smoothing:antialiased}
.vz2 *{box-sizing:border-box}
.vz2 [hidden]{display:none!important}
/* у этих классов свой display — hidden их не прячет без явного правила (урок 30.09) */
.vz2 .tags[hidden],.vz2 .veil[hidden],.vz2 .dw2[hidden],.vz2 .pop[hidden]{display:none!important}
.vz2 button{font:inherit}
.vz2 a{color:var(--brand);text-decoration:none}.vz2 a:hover{color:var(--ink)}
.vz2-sec{max-width:1280px;margin:0 auto;padding:0 0 20px;display:flex;flex-direction:column;gap:12px}
/* сброс того, что общие правила CRM навешивают на те же имена (сверено вычисленными
   стилями: макет и раздел в одном окне 1024 px, 23.10) */
.vz2 .seg{overflow:visible;max-width:none}
.vz2 .kpi{background:none;border:0;border-radius:0;padding:0;box-shadow:none;font-size:inherit;color:inherit}
.vz2 .pop{right:auto;min-width:0}
.vz2 .wrap{max-width:1320px;margin:0 auto;padding:16px 20px 40px;display:flex;flex-direction:column;gap:12px}
.vz2 .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vz2 .hd h1{margin:0;font-size:16px;font-weight:800}
.vz2 .test{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;background:var(--panel);border:1px solid var(--box-line);font-size:12px;font-weight:600;color:var(--brand)}
.vz2 .test i{width:7px;height:7px;border-radius:999px;background:var(--gold)}
.vz2 .test b{font-variant-numeric:tabular-nums;color:var(--ink)}
.vz2 .sp{flex:1}
.vz2 .seg{display:flex;background:var(--cream);border-radius:10px;padding:3px;gap:2px}
.vz2 .seg button{all:unset;cursor:pointer;height:28px;padding:0 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--brand);display:flex;align-items:center;white-space:nowrap}
.vz2 .seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.vz2 .dark{all:unset;cursor:pointer;height:32px;padding:0 14px;border-radius:9px;background:var(--brand-2);color:var(--panel);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vz2 .dark:hover{background:var(--brand)}
.vz2 .dark:disabled{background:var(--cream);color:var(--faint);cursor:not-allowed}
.vz2 .ghost{all:unset;cursor:pointer;height:32px;padding:0 12px;border-radius:9px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.vz2 .ghost:hover{background:var(--soft)}
.vz2 .ghost svg{width:14px;height:14px;stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vz2 .ghost.spin svg{animation:vzspin .6s linear}
@keyframes vzspin{to{transform:rotate(360deg)}}
.vz2 .upd{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.vz2 .chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vz2 .chip{all:unset;cursor:pointer;height:30px;padding:0 12px;border-radius:999px;background:var(--panel);border:1px solid var(--box-line);font-size:12.5px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vz2 .chip:hover{background:var(--soft)}
.vz2 .chip.on{background:var(--sel);color:var(--panel);border-color:var(--sel)}
.vz2 .chip .n{font-weight:800;font-variant-numeric:tabular-nums}
.vz2 .dt{width:7px;height:7px;border-radius:999px;flex:none}
.vz2 .srch{margin-left:auto;flex:1 1 180px;max-width:260px;min-width:0}
.vz2 .rf{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap}
.vz2 .inp{all:unset;box-sizing:border-box;width:100%;height:34px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:13px;color:var(--ink)}
.vz2 .inp:focus{border-color:var(--brand)}
.vz2 .inp::placeholder{color:var(--faint)}
.vz2 .live{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;background:var(--panel);border:1px solid var(--box-line);font-size:12px;font-weight:600;color:var(--brand)}
.vz2 .live i{width:7px;height:7px;border-radius:999px;background:var(--green);box-shadow:0 0 0 3px rgba(106,158,113,.2)}
.vz2 .live b{font-variant-numeric:tabular-nums;color:var(--ink)}
.vz2 .bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vz2 .dts{display:flex;align-items:center;gap:6px}
.vz2 .dts .inp{width:140px;height:32px}
.vz2 .dts span{color:var(--muted);font-size:12px}
.vz2 .flt{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vz2 .fb{position:relative}
.vz2 .fbb{all:unset;cursor:pointer;height:32px;padding:0 11px 0 12px;border-radius:9px;background:var(--panel);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.vz2 .fbb:hover{background:var(--soft)}
.vz2 .fbb.act{border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink);background:var(--box-bg)}
.vz2 .fbb .c{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sel);color:var(--panel);font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums}
.vz2 .fbb .chev{width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg)}
.vz2 .pop{position:absolute;left:0;top:38px;z-index:30;width:280px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:6px}
.vz2 .pop .inp{height:32px}
.vz2 .ol{display:flex;flex-direction:column;gap:1px;max-height:280px;overflow:auto}
.vz2 .oi{all:unset;cursor:pointer;display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:32px;padding:3px 8px;border-radius:8px;font-size:12.5px}
.vz2 .oi:hover{background:var(--soft)}
.vz2 .oi i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--faint);display:grid;place-items:center;font-style:normal;font-size:10px;color:var(--panel)}
.vz2 .oi.on i{background:var(--sel);border-color:var(--sel)}
.vz2 .oi.on i::after{content:"✓";font-weight:800}
.vz2 .oi span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vz2 .oi small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.vz2 .pf{display:flex;justify-content:space-between;padding:6px 4px 0;border-top:1px solid var(--box-line)}
.vz2 .lnk{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--brand)}
.vz2 .lnk:hover{color:var(--ink)}
.vz2 .tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vz2 .tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 10px;border-radius:999px;background:var(--cream);font-size:12px;font-weight:600;color:var(--brand)}
.vz2 .tag b{color:var(--ink);font-weight:700}
.vz2 .tag button{all:unset;cursor:pointer;width:18px;height:18px;border-radius:999px;display:grid;place-items:center;font-size:10px;color:var(--muted)}
.vz2 .tag button:hover{background:var(--panel);color:var(--red)}
.vz2 .kpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.vz2 .kp{background:var(--panel);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px}
.vz2 .kp small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.vz2 .kp b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
.vz2 .kp b em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted);margin-left:3px}
.vz2 .tbl{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.vz2 .th,.vz2 .tr{display:grid;grid-template-columns:96px 104px minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 64px 104px;gap:12px;align-items:center;padding:0 16px}
.vz2 .th{height:38px;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.vz2 .th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.vz2 .th button:hover{color:var(--ink)}
.vz2 .th button.s{color:var(--ink)}
.vz2 .th button.s::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-1px) rotate(45deg)}
.vz2 .th button.s.up::after{transform:translateY(2px) rotate(-135deg)}
.vz2 .th .r,.vz2 .tr .r{text-align:right;justify-self:end}
.vz2 .tr{min-height:52px;padding-top:6px;padding-bottom:6px;border-bottom:1px solid var(--box-line);cursor:pointer}
.vz2 .tr:hover{background:var(--soft)}
.vz2 .tr:last-child{border-bottom:0}
.vz2 .vid{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--brand)}
.vz2 .wh{font-variant-numeric:tabular-nums;line-height:1.3}
.vz2 .wh small{display:block;font-size:11px;color:var(--muted)}
.vz2 .c2{min-width:0;line-height:1.3}
.vz2 .c2 b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vz2 .c2 small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.vz2 .c2 .first{color:var(--coral);font-weight:700}
.vz2 .ms{font-variant-numeric:tabular-nums;font-weight:700;text-align:center}
.vz2 .ms.last{color:var(--red)}
.vz2 .ms.none{color:var(--faint);font-weight:500}
.vz2 .st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--soft);justify-self:start}
.vz2 .st.came{color:var(--green)}
.vz2 .st.no{color:var(--red)}
.vz2 .st.plan{color:var(--brand)}
.vz2 .st .dt{width:7px;height:7px;border-radius:999px;background:currentColor}
.vz2 .empty{padding:40px 18px;text-align:center;color:var(--muted)}
.vz2 .pg{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vz2 .pg .inf{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:auto}
.vz2 .pb{all:unset;cursor:pointer;min-width:30px;height:30px;padding:0 8px;box-sizing:border-box;border-radius:8px;background:var(--panel);border:1px solid var(--box-line);display:grid;place-items:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--brand)}
.vz2 .pb:hover{background:var(--soft)}
.vz2 .pb.on{background:var(--sel);color:var(--panel);border-color:var(--sel)}
.vz2 .pb:disabled{opacity:.4;cursor:default}
.vz2 .dw2{position:fixed;top:0;right:0;bottom:0;z-index:50;width:440px;max-width:100vw;background:var(--panel);box-shadow:0 24px 60px -20px rgba(43,36,30,.45);display:flex;flex-direction:column;animation:vzdwin .2s ease-out}
@keyframes vzdwin{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
.vz2 .veil{position:fixed;inset:0;z-index:49;background:rgba(43,36,30,.32)}
.vz2 .dhd{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--box-line)}
.vz2 .dhd div{flex:1}
.vz2 .dhd .vid{font-size:13px}
.vz2 .dhd b{display:block;font-size:16px;font-weight:800;margin-top:3px}
.vz2 .dhd small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.vz2 .x{all:unset;cursor:pointer;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:14px}
.vz2 .x:hover{background:var(--soft);color:var(--ink)}
.vz2 .dbd{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:14px}
.vz2 .kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:9px 12px;font-size:12.5px}
.vz2 .kv span{color:var(--muted)}
.vz2 .kv b{font-weight:600}
.vz2 .sec .h{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.vz2 .dft{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.vz2 .hlp{font-size:11.5px;color:var(--muted)}
@media (max-width:1240px){.vz2 .th,.vz2 .tr{grid-template-columns:86px 92px minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,1fr) 54px 96px;gap:10px;padding:0 12px}.vz2 .th .hm,.vz2 .tr .hm{display:none}.vz2 .kpi{grid-template-columns:repeat(3,minmax(0,1fr))}.vz2 .kpi .kp:nth-child(n+4){display:none}}
@media (max-width:960px){.vz2 .th,.vz2 .tr{grid-template-columns:84px 70px minmax(0,1fr) minmax(0,1.1fr) 44px 92px;gap:8px}.vz2 .th .hs,.vz2 .tr .hs{display:none}}
/* ⛔ 23.10: телефон (body.es-phone) — у макета 24 правил уже 960 px нет, а таблица в 375 px
   сжимала клиента и услугу в ноль. Та же строка — карточкой из тех же клеток: клиент и
   статус, услуга и время, номер визита и занятие абонемента; заголовок таблицы скрыт. */
body.es-phone .vz2 .th{display:none}
body.es-phone .vz2 .tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cl st" "sv wh" "vid ms";
  gap:4px 10px;padding:10px 14px;align-items:center}
body.es-phone .vz2 .tr>:nth-child(1){grid-area:vid}
body.es-phone .vz2 .tr>:nth-child(2){grid-area:wh;text-align:right;justify-self:end}
body.es-phone .vz2 .tr>:nth-child(3){grid-area:cl}
body.es-phone .vz2 .tr>:nth-child(4){grid-area:sv}
body.es-phone .vz2 .tr>.hm,body.es-phone .vz2 .tr>.hs{display:none}
body.es-phone .vz2 .tr>.ms{grid-area:ms;justify-self:end}
body.es-phone .vz2 .tr>.st{grid-area:st;justify-self:end}
body.es-phone .vz2 .dts .inp{width:auto;flex:1;min-width:0}
body.es-phone .vz2 .dts{flex:1 1 100%}
body.es-phone .vz2 .dw2{width:100vw}

/* ══ КАБИНЕТ ДАШИ НА ТЕЛЕФОНЕ (Тарик 23.10, макет 25-admin-dasha-mobile) ══════════════
   Вкладка «Диалоги» (классы макета dl-* → esdt-*), четыре вкладки со счётчиком, «↻» и
   «Имя · Администратор» в шапке, тёмная плашка брони над сеткой, панель брони в карточке. */
.esdt{position:fixed;left:0;right:0;top:0;bottom:var(--esph-tab,0px);z-index:44;background:var(--bg);
  display:flex;flex-direction:column;min-height:0;font-size:14px;color:var(--ink)}
.esdt.over{bottom:0;z-index:60}
.esdt-hd{flex:none;display:flex;align-items:center;min-height:52px;
  padding:calc(env(safe-area-inset-top) + 6px) 16px 2px;font-size:clamp(17px,5vw,21px);font-weight:800}
.esdt-top{flex:none;display:flex;gap:8px;padding:6px 14px 8px}
.esdt-q{all:unset;box-sizing:border-box;flex:1;min-width:0;height:46px;padding:0 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:16px;color:var(--ink)}
.esdt-q::placeholder{color:var(--faint)}.esdt-q:focus{border-color:var(--brand)}
.esdt-rf{all:unset;cursor:pointer;box-sizing:border-box;flex:none;width:46px;height:46px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;font-size:19px;color:var(--brand)}
.esdt-f{flex:none;margin:0 14px 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--cream);border-radius:12px;padding:3px;gap:3px}
.esdt-f button{all:unset;cursor:pointer;height:38px;border-radius:9px;text-align:center;font-size:13.5px;
  font-weight:700;color:var(--brand);display:flex;align-items:center;justify-content:center;gap:5px}
.esdt-f button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.esdt-f button i{font-style:normal;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.esdt-pg{flex:1;min-height:0;overflow:auto;padding:0 14px 20px;-webkit-overflow-scrolling:touch}
.esdt-l{display:flex;flex-direction:column;background:var(--panel);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.esdt-r{all:unset;cursor:pointer;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:12px 14px;border-bottom:1px solid var(--box-line)}
.esdt-r:last-child{border-bottom:0}.esdt-r:active{background:var(--soft)}
.esdt-av{flex:none;width:46px;height:46px;border-radius:999px;background:var(--cream);color:var(--brand);
  display:grid;place-items:center;font-size:14px;font-weight:800;position:relative}
.esdt-ch{position:absolute;right:-2px;bottom:-2px;min-width:18px;height:18px;padding:0 3px;box-sizing:border-box;
  border-radius:999px;border:2px solid var(--panel);display:grid;place-items:center;font-size:8.5px;font-weight:800;color:var(--panel)}
.esdt-ch.wa{background:var(--green)}.esdt-ch.ig{background:var(--coral)}
.esdt-m{min-width:0}
.esdt-m .t{display:flex;align-items:center;gap:6px;min-width:0}
.esdt-m b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esdt-m .pid{flex:none;height:19px;padding:0 6px;border-radius:6px;background:var(--cream);
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center}
.esdt-m .pid.no{background:var(--soft);color:var(--muted);font-family:inherit}
.esdt-m p{margin:3px 0 0;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esdt-r.un .esdt-m p{color:var(--ink);font-weight:600}
.esdt-s{display:flex;flex-direction:column;align-items:flex-end;gap:5px;max-width:112px;min-width:0}
.esdt-s small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.esdt-s .n{min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--coral);
  color:var(--panel);font-size:11.5px;font-weight:800;display:grid;place-items:center}
.esdt-s .stg{max-width:112px;height:20px;line-height:20px;padding:0 7px;box-sizing:border-box;border-radius:6px;
  background:var(--soft);color:var(--brand);font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esdt-e{padding:30px 10px;text-align:center;color:var(--muted);font-size:14px;display:flex;flex-direction:column;align-items:center;gap:12px}
.esdt-e b{color:var(--ink)}
.esdt-more{padding:12px;text-align:center;color:var(--muted);font-size:12.5px}
.esdt-more a{color:var(--brand);font-weight:700;text-decoration:underline;cursor:pointer}
.esdt-btn{all:unset;cursor:pointer;box-sizing:border-box;min-height:44px;padding:0 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);font-size:14px;font-weight:700;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;text-align:center}
.esdt-chh{flex:none;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 6px) 12px 8px}
.esdt-bk{all:unset;cursor:pointer;box-sizing:border-box;flex:none;min-width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;font-size:26px;color:var(--ink)}
.esdt-bk.wide{font-size:14px;font-weight:700;padding:0 12px;background:var(--panel);border:1px solid var(--line)}
.esdt-chh .esdt-av{width:40px;height:40px;font-size:13px}
.esdt-chh .w{flex:1;min-width:0}
.esdt-chh .w b{display:block;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esdt-chh .w small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esdt-a{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 12px 8px}
.esdt-a button{all:unset;cursor:pointer;box-sizing:border-box;min-width:0;min-height:44px;padding:4px 6px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);text-align:center;font-size:12.5px;font-weight:700;line-height:1.2;
  color:var(--ink);display:flex;align-items:center;justify-content:center;gap:3px}
.esdt-a button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esdt-a button.pri{background:var(--brand-2);border-color:var(--brand-2);color:var(--panel)}
.esdt-a button:active{background:var(--soft)}.esdt-a button.pri:active{background:var(--brand)}
.esdt-log{flex:1;min-height:0;overflow:auto;padding:8px 12px 10px;display:flex;flex-direction:column;gap:6px;
  -webkit-overflow-scrolling:touch}
.esdt-day{align-self:center;font-size:11.5px;color:var(--muted);background:var(--cream);border-radius:999px;padding:2px 10px;margin:6px 0}
.esdt-b{max-width:82%;width:fit-content;box-sizing:border-box;padding:9px 12px 6px;border-radius:16px;font-size:15px;
  line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.esdt-b small{display:block;text-align:right;font-size:11px;margin-top:3px;opacity:.7;font-variant-numeric:tabular-nums}
.esdt-b .who{display:block;font-style:normal;font-size:11px;font-weight:700;opacity:.75;margin-bottom:2px}
.esdt-b .q{display:block;font-size:12.5px;opacity:.75;border-left:2px solid currentColor;padding-left:7px;margin-bottom:5px}
.esdt-b img{display:block;max-width:100%;border-radius:10px;margin-bottom:5px}
.esdt-b audio,.esdt-b video{display:block;max-width:100%;margin-bottom:5px}
.esdt-b .doc{color:inherit;font-weight:700}
.esdt-b.in{align-self:flex-start;background:var(--panel);border:1px solid var(--box-line);border-bottom-left-radius:5px}
.esdt-b.out{align-self:flex-end;background:var(--brand-2);color:var(--panel);border-bottom-right-radius:5px}
.esdt-b.out.bot{background:var(--brand)}
.esdt-in{flex:none;display:flex;gap:8px;align-items:flex-end;padding:8px 12px 10px;background:var(--panel);border-top:1px solid var(--line)}
.esdt.over .esdt-in{padding-bottom:calc(env(safe-area-inset-bottom) + 10px)}
.esdt-in textarea{all:unset;box-sizing:border-box;flex:1;min-width:0;min-height:44px;max-height:120px;padding:11px 14px;
  border:1px solid var(--line);border-radius:22px;font-size:16px;line-height:1.35;white-space:pre-wrap;overflow:auto;background:var(--panel)}
.esdt-in textarea:focus{border-color:var(--brand)}
.esdt-in button{all:unset;cursor:pointer;flex:none;width:44px;height:44px;border-radius:999px;background:var(--brand-2);
  color:var(--panel);display:grid;place-items:center;font-size:17px}
.esdt-in button:disabled{background:var(--cream);color:var(--faint);cursor:default}
.esdt-st{display:flex;flex-direction:column;gap:4px;max-height:60dvh;overflow:auto}
.esdt-st button{all:unset;cursor:pointer;box-sizing:border-box;min-height:44px;padding:0 12px;border-radius:10px;
  font-size:14.5px;font-weight:600;display:flex;align-items:center;border:1px solid var(--box-line)}
.esdt-st button.on{background:var(--soft);border-color:var(--ink)}
/* вкладки: четыре, счётчик непрочитанных на «Диалогах» */
body.es-dasha .esph-tab{grid-template-columns:repeat(4,minmax(0,1fr))}
.esph-tab button{position:relative}
.esph-tbd{position:absolute;top:5px;right:calc(50% - 40px);min-width:17px;height:17px;padding:0 5px;box-sizing:border-box;
  border-radius:999px;background:var(--coral);color:var(--panel);font-size:10.5px;font-weight:800;display:grid;place-items:center}
.esph-tbd[hidden]{display:none}
/* шапка: «↻» и «Имя · Администратор» вместо «☰» — только у Даши */
.esjour-head .phupd,.esjour-head .phme{display:none}
body.es-dasha .esjour-head .phmenu{display:none}
body.es-dasha .esjour-head .ajbtn[onclick^="esПопап('kassa'"]{order:1}
body.es-dasha .esjour-head .phupd{order:2;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:40px;padding:0;border:0;background:none;font-size:20px;color:var(--brand)}
body.es-dasha .esjour-head .notifbtn{order:3}
body.es-dasha .esjour-head .phme{order:4;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0;border:0;background:none}
.phme .n{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.phme .n b{font-size:13px;font-weight:800;color:var(--ink)}.phme .n small{font-size:11px;color:var(--muted)}
.phme .av{width:34px;height:34px;border-radius:999px;background:var(--cream);color:var(--brand);display:grid;
  place-items:center;font-size:13px;font-weight:800}
@media (max-width:459px){body.es-dasha .esjour-head .phme .n{display:none}}
/* плашка «Предварительная бронь · выберите время» — тёмная, как bookbar макета */
.pcchip.pchold{height:auto;min-height:40px;white-space:normal;padding:6px 6px 6px 12px;border-radius:12px;
  background:var(--brand-2);gap:8px;text-align:left;max-width:100%}
.pcchip.pchold span{opacity:1;flex:1;min-width:0;font-size:11.5px;line-height:1.3;color:rgba(255,253,251,.75)}
.pcchip.pchold b{display:block;font-size:13px;color:var(--panel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcchip.pchold i{flex:none;width:30px;height:30px;border-radius:999px;background:rgba(255,253,251,.14);
  display:grid;place-items:center;font-style:normal;font-size:12px}
body.es-phone .pcchip.pchold{width:100%}
/* панель брони в телефонной карточке: та же, что на компьютере, плюс «Назад к диалогу» */
.mph-hold{display:flex;flex-direction:column;gap:10px}
/* стили панели на ПК живут под .esnz — здесь те же, но под палец; имя и метка брони
   уже стоят в шапке карточки, второй раз их не показываем */
.mph-hold .hold-tag,.mph-hold .holdcard>.client{display:none}
.mph-hold .holdcard{display:flex;flex-direction:column;gap:10px}
.mph-hold .hold-rows{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--box-bg);
  border:1px solid var(--box-line);border-radius:14px}
.mph-hold .hold-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mph-hold .hold-rows small{font-size:13px;color:var(--muted);flex:none}
.mph-hold .hold-rows b{font-size:14.5px;font-weight:700;text-align:right}
.mph-hold .dnote{font-size:12.5px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.mph-hold .lbl{font-size:12.5px;color:var(--muted);font-weight:600}
.mph-hold .stack{display:flex;flex-direction:column;gap:8px}
.mph-hold .fld{display:flex;flex-direction:column;gap:4px}
.mph-hold .pnote{color:var(--faint);margin-left:4px}.mph-hold .pnote.chg{color:var(--gold)}
.mph-hold .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--cream);border-radius:12px;padding:3px;gap:3px}
.mph-hold .seg button{all:unset;cursor:pointer;height:40px;border-radius:9px;text-align:center;font-size:14px;font-weight:700;color:var(--brand)}
.mph-hold .seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(43,36,30,.08)}
.mph-hold .inp{box-sizing:border-box;width:100%;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);font:inherit;font-size:16px;color:var(--ink)}
.mph-hold .dark,.mph-hold .sbtn2,.mph-hold .cancel,.mph-hold .ghost{all:unset;cursor:pointer;box-sizing:border-box;width:100%;
  min-height:48px;padding:0 14px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:15px;font-weight:700}
.mph-hold .dark{background:var(--brand-2);color:var(--panel)}
.mph-hold .sbtn2,.mph-hold .ghost{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.mph-hold .cancel{background:none;color:var(--muted)}
.mph-hold .holdform{display:flex;flex-direction:column;gap:8px}
.mph-hold .mph-holdchat{width:100%;justify-content:center}
/* шапка Даши на 390 px: дата · «Сегодня» · сумма · ↻ · колокольчик · аватар — в одну строку */
body.es-dasha .esjour-head>.ajbtn:first-child{padding:0 9px}
body.es-dasha .esjour-head .ajbtn[onclick^="esПопап('kassa'"]{padding:0 6px 0 9px}
body.es-dasha .esjour-head .phupd{width:28px}
body.es-dasha .esjour-head .notifbtn{width:30px}
body.es-dasha .esjour-head .phme .av{width:30px;height:30px;font-size:12px}
body.es-dasha .esjour-head{column-gap:3px;padding-left:12px;padding-right:4px}
body.es-dasha .esjour-head>.ajbtn:first-child{padding:0 8px;font-size:12px}
.pcchip.pchold{box-sizing:border-box}
body.es-phone .pcchip.pchold{width:100%;max-width:calc(100vw - 20px)}
/* окно новой брони у Даши — компактно (Тарик 23.10): время → услуга → клиент со ссылкой;
   состояние визита и пустая история у брони не нужны */
body.es-dasha .esnz.nz-hold .cols>.col:nth-child(2){order:2}
body.es-dasha .esnz.nz-hold .cols>.col:nth-child(3){order:3}
body.es-dasha .esnz.nz-hold .col .pills,body.es-dasha .esnz.nz-hold .ltiles{display:none}

/* ══ «DAILY REVENUE» (Тарик 23.10, макет 26-daily-revenue): правила макета под .dr2 ══════
   Имена макета (.kc, .mt, .eb, .md, .t2…) в CRM частью заняты — всё живёт под .dr2 и .dr2-mv. */
.dr2{max-width:1180px;margin:0 auto;padding:22px 26px 30px;display:flex;flex-direction:column;gap:16px;
  font-size:12.5px;color:var(--ink)}
.dr2 .dr2-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dr2 .dr2-hd h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
.dr2 .sp{flex:1}
.dr2 .dnav{display:flex;align-items:center;gap:6px}
.dr2 .dnav button{all:unset;cursor:pointer;height:34px;min-width:34px;padding:0 12px;border-radius:10px;background:var(--panel);
  border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:13px;box-sizing:border-box}
.dr2 .dnav button:hover{background:var(--soft)}
.dr2 .dnav b{font-size:15px;font-weight:800;min-width:190px;text-align:center}
.dr2 .dnav input{height:34px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:0 10px;font:inherit;color:var(--ink);box-sizing:border-box}
.dr2 .livep{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--panel);
  border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--brand)}
.dr2 .livep i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.dr2 .drk{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:12px}
.dr2 .kc{background:var(--panel);border:1px solid var(--box-line);border-radius:14px;padding:16px 18px;display:flex;
  flex-direction:column;gap:4px;min-width:0}
.dr2 .kc small{font-size:12px;color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0}
.dr2 .kc b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dr2 .kc span{font-size:12px;color:var(--muted)}
.dr2 .kc.tot{background:var(--brand-2);border-color:var(--brand-2);color:var(--panel)}
.dr2 .kc.tot small,.dr2 .kc.tot span{color:var(--faint)}
.dr2 .kc.tot b{font-size:30px}
.dr2 .mix{height:6px;border-radius:999px;background:var(--panel);overflow:hidden;margin-top:8px}
.dr2 .mix i{display:block;height:100%;background:var(--gold)}
.dr2 .leg{display:flex;gap:14px;margin-top:6px;font-size:12px;color:var(--faint)}
.dr2 .leg em{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.dr2 .leg em::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--gold)}
.dr2 .leg em.c::before{background:var(--panel)}
.dr2 .kc.ns b{color:var(--red)}
.dr2 .bar2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dr2 .tabs2{display:flex;gap:3px;background:var(--cream);border-radius:12px;padding:3px}
.dr2 .tabs2 button{all:unset;cursor:pointer;height:32px;padding:0 13px;border-radius:9px;font-size:13px;font-weight:700;color:var(--brand);
  display:flex;align-items:center;gap:6px;white-space:nowrap}
.dr2 .tabs2 button i{font-style:normal;font-weight:600;color:var(--muted);font-size:12px}
.dr2 .tabs2 button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.dr2 .srch{position:relative;flex:0 1 300px;min-width:200px;margin:0;max-width:none}
.dr2 .srch input{width:100%;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:0 12px 0 34px;
  font:inherit;font-size:13px;color:var(--ink);box-sizing:border-box}
.dr2 .srch::before{content:'⌕';position:absolute;left:12px;top:50%;transform:translateY(-52%);font-size:17px;color:var(--muted)}
.dr2 .t2{background:var(--panel);border:1px solid var(--box-line);border-radius:14px;overflow-x:auto}
.dr2 .t2 .r{display:grid;grid-template-columns:52px minmax(110px,1fr) minmax(150px,2fr) 112px 92px 74px;min-width:660px;gap:12px;
  align-items:center;padding:12px 18px;border-top:1px solid var(--box-line)}
.dr2 .t2 .r.h{border-top:0;background:var(--box-bg);padding-top:10px;padding-bottom:10px;font-size:11px;font-weight:800;
  letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.dr2 .t2 .r.h .am{text-align:right;font-size:11px;font-weight:800}
.dr2 .t2 .tm{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.dr2 .t2 .cl,.dr2 .t2 .op{min-width:0}
.dr2 .t2 .cl b,.dr2 .t2 .op b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr2 .t2 .cl small,.dr2 .t2 .op small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:2px}
.dr2 .t2 .op.ns b,.dr2 .t2 .op.rf b{color:var(--red)}
.dr2 .mt{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;background:var(--soft);
  font-size:12.5px;font-weight:700;white-space:nowrap}
.dr2 .mt::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ink)}
.dr2 .mt.cash::before{background:var(--gold)}
.dr2 .mt.nm{background:var(--cream);color:var(--brand)}.dr2 .mt.nm::before{background:var(--faint)}
.dr2 .t2 .am{text-align:right;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.dr2 .t2 .am.neg{color:var(--red)}
.dr2 .t2 .dash{color:var(--faint);font-weight:600}
/* «Кнопка Edit видна всегда» (ТЗ §5): при прокрутке вбок колонка с ней прилипает справа */
.dr2 .t2 .ebw{justify-self:end;position:sticky;right:0}
.dr2 .eb{all:unset;cursor:pointer;height:30px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);
  font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.dr2 .eb:hover{background:var(--soft)}
.dr2 .empty2{padding:34px;text-align:center;color:var(--muted);font-size:13px}
.dr2 .ft2{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.dr2 .ft2 b{color:var(--ink);font-weight:800}
@media (max-width:1100px){.dr2 .drk{grid-template-columns:1fr 1fr}
  .dr2 .t2 .r{grid-template-columns:52px minmax(110px,1fr) minmax(150px,1.6fr) 112px 92px 74px}}
body.es-phone .dr2{padding:4px 0 20px}
body.es-phone .dr2 .dnav{flex-wrap:wrap}
body.es-phone .dr2 .dnav b{min-width:0}
/* окно «Edit operation» */
.dr2-mv{position:fixed;inset:0;background:rgba(43,36,30,.45);z-index:150;display:grid;place-items:center;padding:20px;font-size:12.5px;color:var(--ink)}
.dr2-mv[hidden]{display:none}
.dr2-md{width:460px;max-width:100%;background:var(--panel);border-radius:16px;box-shadow:0 24px 60px -20px rgba(43,36,30,.45);padding:18px;
  display:flex;flex-direction:column;gap:12px;max-height:92vh;overflow:auto;box-sizing:border-box}
.dr2-md .mh{display:flex;align-items:flex-start;gap:10px}.dr2-md .mh div{flex:1}
.dr2-md .mh b{display:block;font-size:16px;font-weight:800}.dr2-md .mh small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.dr2-md .x{all:unset;cursor:pointer;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:15px}
.dr2-md .x:hover{background:var(--soft)}
.dr2-md .lb{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:5px}
.dr2-md input,.dr2-md textarea{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:0 12px;
  font:inherit;font-size:13.5px;color:var(--ink);box-sizing:border-box}
.dr2-md textarea{height:70px;padding:9px 12px;resize:none}
.dr2-md .ms{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dr2-md .ms button{all:unset;cursor:pointer;height:36px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;
  font-size:12.5px;font-weight:700;text-align:center}
.dr2-md .ms button.on{background:var(--sel);border-color:var(--sel);color:var(--panel)}
.dr2-md .cs{position:relative}
.dr2-md .cr{position:absolute;left:0;right:0;top:44px;z-index:2;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);max-height:200px;overflow:auto}
.dr2-md .cr[hidden]{display:none}
.dr2-md .cr button{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;padding:8px 12px;font-size:13px}
.dr2-md .cr button:hover{background:var(--soft)}.dr2-md .cr small{color:var(--muted);margin-left:6px}
.dr2-md .er{color:var(--red);font-size:12px}.dr2-md .er[hidden]{display:none}
.dr2-md .fb{display:flex;justify-content:flex-end;gap:8px}
.dr2-md .fb button{all:unset;cursor:pointer;height:38px;padding:0 16px;border-radius:10px;font-weight:700;font-size:13px}
.dr2-md .fb .c{border:1px solid var(--line)}.dr2-md .fb .s{background:var(--brand-2);color:var(--panel)}
/* раздел не шире своего места: таблица листается вбок внутри себя, Edit прилипает справа */
.dr2{width:100%;min-width:0;box-sizing:border-box}
.dr2>*{min-width:0;max-width:100%}
body.es-phone .dr2 .drk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
body.es-phone .dr2 .kc.tot{grid-column:1/-1}
body.es-phone .dr2 .kc{padding:12px 14px}
body.es-phone .dr2 .kc b{font-size:20px}
body.es-phone .dr2 .kc.tot b{font-size:26px}
body.es-phone .dr2 .tabs2{overflow-x:auto;max-width:100%;scrollbar-width:none}
body.es-phone .dr2 .tabs2 button{flex:none}
body.es-phone .dr2 .srch{flex:1 1 100%;min-width:0}
body.es-phone .dr2 .dnav{width:100%;justify-content:space-between}
body.es-phone .dr2 .dnav b{flex:1;font-size:14px}
body.es-phone .dr2 .dnav input{width:100%;order:9}
body.es-phone .dr2 .t2 .ebw{background:var(--panel);padding-left:6px;box-shadow:-8px 0 8px -8px rgba(43,36,30,.25)}
body.es-phone .dr2 .t2 .r.h>span:last-child{position:sticky;right:0;background:var(--box-bg);align-self:stretch}

/* ⛔ 24.10: плитка Status (метка клиента) убрана — нечётная последняя плитка во всю ширину */
.esprof .pfgrid .pfcell:last-child:nth-child(odd){grid-column:1/-1}

/* ══ ЛЕВОЕ МЕНЮ CRM — макет 27-crm-sidebar (Тарик 24.10) ═════════════════════════════
   Правила макета перенесены дословно; имена классов свои (.nv, .nvg, .nvh, .nvs, .nvbot),
   чтобы не задеть .grp/.sub/.it журнала EasySlot. Панель EasySlot (aside.nav.nav-jour)
   живёт по своим правилам — сюда не попадает.
   ⚠️ Одно отступление от макета, и оно нужно ТЗ: в макете полоска у свёрнутой группы стоит
   в left:-18px и целиком срезается прокруткой .nav — её не видно. ТЗ §2 требует полоску,
   поэтому все полоски стоят у края прокрутки (left -35 / -4 / -4), видны одинаково. */
aside.nav:not(.nav-jour){background:var(--brand);color:var(--panel);padding:22px 14px 14px;
  overflow:hidden}
aside.nav:not(.nav-jour) .logo{padding:4px 0 18px;margin:0;border-bottom:1px solid rgba(255,253,251,.12);
  text-align:center;min-height:0}
aside.nav:not(.nav-jour) .logo .wm{font-size:17px;font-weight:700;letter-spacing:.42em;padding-left:.42em;
  color:var(--panel)}
aside.nav:not(.nav-jour) .logo .sub{font-size:10.5px;letter-spacing:.3em;color:var(--faint);margin-top:6px;
  padding-left:.3em;text-transform:uppercase}
aside.nav:not(.nav-jour) .navmin-btn{all:unset;box-sizing:border-box;cursor:pointer;display:grid;
  place-items:center;height:30px;margin:14px 0 10px;border-radius:10px;background:rgba(255,253,251,.07);
  color:var(--faint);font-size:14px;width:100%}
aside.nav:not(.nav-jour) .navmin-btn:hover{background:rgba(255,253,251,.12);color:var(--panel)}
aside.nav .nv{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px;
  margin:0 -4px;padding:0 4px}
aside.nav .nv a,aside.nav .nvbot a,aside.nav .nvh{all:unset;box-sizing:border-box;cursor:pointer;
  display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;border-radius:11px;
  font-size:14px;font-weight:600;color:rgba(255,253,251,.88);position:relative;margin:0}
aside.nav .nv a:hover,aside.nav .nvbot a:hover,aside.nav .nvh:hover{background:rgba(255,253,251,.07);
  color:var(--panel)}
aside.nav .nv a:focus-visible,aside.nav .nvbot a:focus-visible,aside.nav .nvh:focus-visible,
aside.nav .navmin-btn:focus-visible{outline:2px solid var(--coral);outline-offset:-2px}
aside.nav .nv svg,aside.nav .nvbot a svg{flex:none;width:19px;height:19px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
aside.nav .nv .t,aside.nav .nvbot .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
aside.nav .nvh{font-weight:700;color:var(--panel)}
aside.nav .nvh .chev{flex:none;width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);margin-right:3px;opacity:.6;
  transition:transform .18s}
aside.nav .nvg.open>.nvh .chev{transform:rotate(45deg);margin-top:-4px}
aside.nav .nvs{display:none;flex-direction:column;gap:2px;padding:2px 0 6px 21px;margin-left:9px;
  border-left:1px solid rgba(255,253,251,.12)}
aside.nav .nvg.open>.nvs{display:flex}
aside.nav .nvs a{height:36px;padding-left:12px;font-size:13.5px;font-weight:500;gap:10px}
aside.nav .nvs a svg{width:17px;height:17px}
aside.nav .nv a.on,aside.nav .nvbot a.on{background:rgba(255,253,251,.13);color:var(--panel);font-weight:700}
aside.nav .nv a.on::before,aside.nav .nvbot a.on::before{content:'';position:absolute;left:-35px;
  top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--coral)}
aside.nav .nvbot a.on::before{left:-4px}
/* EasySlot — пункт верхнего уровня, вид как у шапки группы, но без стрелки (Тарик 24.10) */
aside.nav .nv>a.nvtop{font-weight:700;color:var(--panel)}
aside.nav .nv>a.nvtop.on::before{left:-4px}
aside.nav .nvg.has-on:not(.open)>.nvh::after{content:'';position:absolute;left:-4px;top:10px;bottom:10px;
  width:3px;border-radius:0 3px 3px 0;background:var(--coral)}
aside.nav .nv a .b{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--red);color:var(--panel);font-size:11px;font-weight:800;display:grid;place-items:center;
  margin:0;box-sizing:border-box}
aside.nav .nvh .gcnt{display:none;flex:none;width:7px;height:7px;border-radius:50%;background:var(--red)}
aside.nav .nvg.un:not(.open)>.nvh .gcnt{display:block}
aside.nav .nvbot{display:flex;flex-direction:column;gap:2px;margin-top:10px}
aside.nav .nvbot .sep{height:1px;background:rgba(255,253,251,.1);margin:8px 6px}
aside.nav .nvbot .soon{flex:none;height:22px;padding:0 9px;border-radius:999px;
  border:1px solid rgba(255,253,251,.3);font-size:10px;font-weight:700;letter-spacing:.08em;
  color:var(--faint);display:grid;place-items:center;text-transform:uppercase;margin:0;box-sizing:border-box}
aside.nav .nvbot .status{margin-top:10px;background:rgba(0,0,0,.18);border-radius:13px;padding:11px 13px;
  display:flex;flex-direction:column;gap:5px;font-size:12.5px;line-height:normal;color:rgba(255,253,251,.82)}
aside.nav .nvbot .status .row{gap:8px}
aside.nav .nvbot .status small{font-size:11.5px;color:var(--faint);margin-top:2px}
/* свёрнутое меню — 76 px, только иконки групп и нижних пунктов (макет .mini) */
@media(min-width:769px){
  body.navmin{grid-template-columns:76px 1fr}
  body.navmin aside.nav:not(.nav-jour){padding:22px 10px 14px}
  body.navmin aside.nav:not(.nav-jour) .logo{padding:4px 0 18px}
  body.navmin aside.nav:not(.nav-jour) .logo .wm{font-size:15px;letter-spacing:0;padding:0;display:block}
  body.navmin aside.nav:not(.nav-jour) .logo .wm::after{content:none}
  body.navmin aside.nav:not(.nav-jour) .navmin-btn{transform:scaleX(-1)}
  body.navmin aside.nav .nv .t,body.navmin aside.nav .nvbot .t,body.navmin aside.nav .nvh .chev,
  body.navmin aside.nav .nvbot .soon,body.navmin aside.nav .nvbot .status,
  body.navmin aside.nav .nvs{display:none!important}
  body.navmin aside.nav .nv a,body.navmin aside.nav .nvbot a,body.navmin aside.nav .nvh{
    justify-content:center;padding:0;font-size:14px}
  body.navmin aside.nav .nvg{position:relative}
  body.navmin aside.nav .nvg.un .gcnt{display:block;position:absolute;top:9px;right:12px}
  body.navmin aside.nav [data-tip]:hover::after{content:none}
}
/* телефон и альбом: меню — полоса сверху. Группы раскладываются в одну строку пунктов,
   шапки групп и низ меню (разделитель, статус) не показываем — как было до групп. */
@media(max-width:768px),(max-height:520px) and (max-width:1100px){
  aside.nav:not(.nav-jour){padding:6px 8px;overflow-x:auto;overflow-y:visible}
  aside.nav:not(.nav-jour) .logo{border:0;padding:2px 10px 2px 4px;flex:none}
  aside.nav:not(.nav-jour) .logo .wm{font-size:12px;letter-spacing:.18em;padding:0}
  aside.nav:not(.nav-jour) .logo .sub,aside.nav:not(.nav-jour) .navmin-btn{display:none}
  /* !important: у открытой группы .nvs{display:flex} сильнее, и полоса складывалась столбиком */
  aside.nav .nv,aside.nav .nvg,aside.nav .nvg>.nvs,aside.nav .nvg.open>.nvs,aside.nav .nvbot{display:contents!important}
  aside.nav .nvh,aside.nav .nvbot .sep,aside.nav .nvbot .status{display:none}
  aside.nav .nv a,aside.nav .nvbot a{flex:none;width:auto;height:auto;padding:8px 10px;font-size:12.5px;
    gap:8px;font-weight:600}
  aside.nav .nv a svg,aside.nav .nvbot a svg{width:15px;height:15px}
  aside.nav .nv a.on::before,aside.nav .nvbot a.on::before{left:8px;right:8px;top:auto;bottom:-6px;
    width:auto;height:3px;border-radius:3px 3px 0 0}
  aside.nav .nv .t,aside.nav .nvbot .t{overflow:visible}
}

/* ══ EASYSLOT → CHATS (Тарик 24.10, макет 28-chats) ══════════════════════════════════════
   Правила макета под .esch: его имена (.row, .box, .ms, .btn, .pill) в CRM заняты. */
.esch{flex:1 1 auto;min-height:520px;display:flex;flex-direction:column;gap:14px;font-size:12.5px;color:var(--ink)}
.esch *{box-sizing:border-box}
.esch .ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.esch .ph h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
.esch .ph .base{font-size:12.5px;color:var(--muted);font-weight:600}
.esch .ph .sp{flex:1}
.esch .pill{height:34px;padding:0 14px;border-radius:11px;background:var(--panel);border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink)}
.esch .body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,260px);gap:14px;
  container-type:inline-size}
@container (max-width:860px){.esch .body{grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(0,220px)}}
@media (max-width:1240px){.esch .body{grid-template-columns:minmax(0,240px) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .esch .body>.info{display:none}.esch .chd .t{min-width:0}.esch .chd .btn{height:34px;padding:0 12px}}
.esch .box{background:var(--panel);border:1px solid var(--box-line);border-radius:16px;box-shadow:var(--shadow);min-height:0;
  display:flex;flex-direction:column;overflow:hidden}
.esch .ls-s{padding:10px}
.esch .ls-s label{position:relative;display:block}
.esch .ls-s input{width:100%;height:38px;border:0;border-radius:11px;background:var(--soft);padding:0 12px 0 34px;font:inherit;
  font-size:13px;color:var(--ink);outline:none}
.esch .ls-s input:focus{box-shadow:0 0 0 1.5px var(--line)}
.esch .ls-s label::before{content:'⌕';position:absolute;left:12px;top:50%;transform:translateY(-52%);font-size:17px;color:var(--muted)}
.esch .ls{flex:1;min-height:0;overflow:auto;padding:0 6px 8px}
.esch .row{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;
  align-items:center;width:100%;padding:9px 10px;border-radius:12px}
.esch .row:hover{background:var(--box-bg)}
.esch .row.on{background:var(--cream)}
.esch .av{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--panel);font-weight:800;
  font-size:13px;flex:none}
.esch .av .chn{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;background:var(--panel);display:grid;
  place-items:center;font-size:8px;font-weight:800;font-style:normal;color:var(--green);box-shadow:0 0 0 1.5px var(--panel)}
.esch .av .chn.ig{color:var(--coral)}
.esch .row .t{min-width:0}
.esch .row .t b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esch .row .t small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.esch .row .t small em{font-style:normal;color:var(--faint)}
.esch .row .m{display:flex;flex-direction:column;align-items:flex-end;gap:5px;align-self:start;padding-top:2px}
.esch .row .m span{font-size:11.5px;color:var(--faint);white-space:nowrap}
.esch .empty{padding:30px 14px;text-align:center;color:var(--muted);font-size:13px}
.esch .chd{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--box-line);flex-wrap:wrap;row-gap:8px}
.esch .chd .bk{display:none}
.esch .chd .av{width:44px;height:44px;font-size:14px}
.esch .chd .t{flex:1;min-width:120px}
.esch .chd .t b{display:block;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esch .chd .t small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esch .chd .t small b{display:inline;font-size:12.5px;font-weight:700;color:var(--brand)}
.esch .btn{all:unset;box-sizing:border-box;cursor:pointer;height:38px;padding:0 16px;border-radius:11px;display:inline-flex;
  align-items:center;gap:7px;font-size:13px;font-weight:700;white-space:nowrap}
.esch .btn.ghost{border:1px solid var(--line);background:var(--panel);color:var(--ink)}.esch .btn.ghost:hover{background:var(--soft)}
.esch .btn.dark{background:var(--brand-2);color:var(--panel)}.esch .btn.dark:hover{background:var(--brand)}
.esch .btn[disabled]{opacity:.55;cursor:default}
.esch .btn:focus-visible,.esch .row:focus-visible{outline:2px solid var(--coral);outline-offset:-2px}
.esch .log{flex:1;min-height:0;overflow:auto;padding:16px 22px;display:flex;flex-direction:column;gap:8px;background:var(--box-bg)}
.esch .day{align-self:center;font-size:11px;font-weight:700;color:var(--muted);background:var(--cream);border-radius:999px;padding:3px 10px;margin:6px 0}
.esch .ms{max-width:min(620px,78%);padding:10px 14px 7px;border-radius:14px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.esch .ms small{display:block;text-align:right;font-size:10.5px;margin-top:4px;opacity:.7;font-variant-numeric:tabular-nums}
.esch .ms.in{align-self:flex-start;background:var(--panel);border:1px solid var(--box-line);border-bottom-left-radius:5px}
.esch .ms.out{align-self:flex-end;background:var(--brand);color:var(--panel);border-bottom-right-radius:5px}
.esch .ms .q{display:block;font-size:12px;opacity:.75;border-left:2px solid currentColor;padding:2px 0 2px 8px;margin-bottom:6px;white-space:normal}
.esch .ms .pic{display:block;margin:2px 0 6px}
.esch .ms img{display:block;max-width:min(320px,100%);max-height:320px;border-radius:10px}
.esch .ms video{display:block;max-width:min(360px,100%);max-height:360px;border-radius:10px;margin:2px 0 6px;background:#000}
.esch .ms audio{display:block;max-width:100%;margin:2px 0 6px}
.esch .ms .doc{display:inline-block;margin:2px 0 6px;color:inherit;text-decoration:underline}
.esch .sys{align-self:center;font-size:12px;color:var(--muted)}
.esch .cmp{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--box-line)}
.esch .cmp textarea{flex:1;min-width:0;min-height:42px;max-height:140px;resize:none;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);padding:11px 14px;font:inherit;font-size:13.5px;color:var(--ink);line-height:1.4;outline:none}
.esch .cmp textarea:focus{border-color:var(--brand)}
.esch .cmp .att{width:42px;height:42px;padding:0;justify-content:center;font-size:16px}
.esch .cmp .snd{height:42px;padding:0 20px}
.esch .info{overflow:auto;padding:14px 14px 16px;gap:14px}
.esch .ib{display:flex;flex-direction:column;gap:6px}
.esch .ib .h{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.esch .ib .h i{font-style:normal;margin-left:auto;font-size:11px;letter-spacing:0;color:var(--faint);font-weight:700}
.esch .kv3{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.esch .kv3 div{background:var(--box-bg);border:1px solid var(--box-line);border-radius:10px;padding:8px 10px;min-width:0}
.esch .kv3 small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.esch .kv3 b{display:block;font-size:15px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esch .kv3 b.no{color:var(--faint);font-weight:600;font-size:13px}
.esch .vi{border:1px solid var(--box-line);border-radius:10px;padding:8px 10px;background:var(--panel)}
.esch .vi.fu{background:var(--soft);border-color:var(--soft)}
.esch .vi .d{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.esch .vi .d span{font-weight:600;color:var(--muted)}
.esch .vi b{display:block;font-size:12.5px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esch .vi small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.esch .more{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--brand);padding:2px 0}
.esch .more:hover{color:var(--ink)}
.esch .ab{border:1px solid var(--box-line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.esch .ab b{font-size:12.5px;font-weight:800}
.esch .ab span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esch .ab em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--green)}
.esch .nn{font-size:12.5px;color:var(--faint)}
.esch .nochat{flex:1;display:grid;place-items:center;color:var(--muted);font-size:13px}
/* телефон: одна колонка — список, а открытый чат поверх него, со стрелкой назад */
body.es-phone .esch{min-height:0}
body.es-phone .esch .body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body.es-phone .esch .body>.info{display:none}
body.es-phone .esch .body>#esch-chat{display:none}
body.es-phone .esch .body.open>.box:first-child{display:none}
body.es-phone .esch .body.open>#esch-chat{display:flex}
body.es-phone .esch .chd .bk{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:var(--soft);
  font-size:20px;color:var(--brand);cursor:pointer;flex:none}
body.es-phone .esch .chd .btn{height:34px;padding:0 12px}

/* ★ Тарик 24.10: «Create link» в Pre-booking (запись, новая запись, телефон, группа) — ярко-зелёная */
.sbtn2.go,.dark.go,.gzsell.go,.esnz .sbtn2.go,.esnz .dark.go,.mph-hold .sbtn2.go,.mph-hold .dark.go{
  background:#1FA463!important;border-color:#1FA463!important;color:#fff!important}
.sbtn2.go:hover,.dark.go:hover,.gzsell.go:hover{background:#18904F!important;border-color:#18904F!important}

/* ★ 24.10: оплата абонементом другого клиента — поле номера под строкой */
.opl-alien{margin:-2px 0 6px 34px;display:flex;flex-direction:column;gap:6px}
.opl-alien-r{display:flex;gap:6px}
.opl-alien-in{flex:1;min-width:0;height:38px;border:1px solid var(--line);border-radius:10px;padding:0 12px;
  font:inherit;font-size:13.5px;background:var(--panel);color:var(--ink);font-variant-numeric:tabular-nums}
.opl-alien-b{height:38px;padding:0 16px;border:0;border-radius:10px;background:var(--brand-2);color:var(--panel);
  font:inherit;font-weight:700;cursor:pointer}
.opl-alien small{font-size:12px;color:var(--muted)}
.opl-alien .opl-alien-ok{color:var(--green)}.opl-alien .opl-alien-ok b{color:var(--ink)}

/* ★ 24.10 «Prepaid service settings» (Тарик): окно смены услуги и доплаты остатка — prepaid.js */
.prp-box{width:480px}
.prp-now{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px;padding:9px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--soft)}
.prp-now small{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.prp-now b{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.prp-list{margin-top:6px;max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column}
.prp-list>.dnote{padding:8px 10px}
.prp-row{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-bottom:1px solid var(--line)}
.prp-row:last-child{border-bottom:0}
.prp-row:hover{background:var(--soft)}
.prp-row.on{background:var(--soft)}
.prp-row.on b{font-weight:800}
.prp-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.prp-row span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.prp-row b{font-size:12.5px;font-weight:600}
.prp-row small{font-size:11px;color:var(--muted)}
.prp-row em{font-style:normal;font-size:11.5px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.prp-out{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);
  font-size:12px;line-height:1.4}
.prp-out.more{background:#fbf6e8;border-color:var(--gold);color:#6b4a00}
.prp-out.less{background:#eef7f0;border-color:#9fd3b0;color:#1d5a33}
.prp-pick{display:flex;flex-direction:column;gap:4px}
.prp-pick button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;gap:8px;
  padding:7px 10px;border:1px solid var(--line);border-radius:9px;font-size:12px}
.prp-pick button.on{border-color:var(--ink);background:var(--soft)}
.prp-pick button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.prp-pick small{color:var(--muted)}
.cb-ab .cb-hd .abset{margin-left:auto}
@media (max-width:560px){ .prp-now{grid-template-columns:1fr 1fr} .prp-now>div:first-child{grid-column:1/-1} }
/* окно вне карточки (body): поле и пометка у подписи — как внутри карточки визита */
.espaybox .pnote{color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums;margin-left:6px}
.prp-box .inp{width:100%;box-sizing:border-box;height:34px;border:1px solid var(--line);border-radius:9px;
  padding:0 10px;font:inherit;font-size:12.5px;background:var(--panel);color:var(--ink)}
.prp-box .inp::placeholder{color:var(--faint)}
.prp-box .inp:focus{outline:2px solid var(--brand);outline-offset:-1px}

/* ★ 24.10 (Тарик): выбор абонементов и предоплаченных услуг в карточке визита — тот же, что в
   окне «Create link» раздела Stripe (.stp2 .dd/.ci/.sl): правила перенесены как есть */
.esdd{position:relative}
.esdd [hidden],.esdd .ddp[hidden]{display:none!important}
.esdd .ddh{box-sizing:border-box;cursor:text;width:100%;min-height:38px;padding:0 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.esdd .ddh:hover{border-color:var(--brand)}
.esdd .ddh:focus-within{border-color:var(--ink)}
.esdd .ddh input{all:unset;flex:1;min-width:0;height:36px;font-size:13px;font-weight:500;color:var(--ink)}
.esdd .ddh input::placeholder{color:var(--faint)}
.esdd .chev{cursor:pointer;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);flex:none;margin:0 2px}
.esdd.open .ddh{border-color:var(--ink);border-radius:9px 9px 0 0}
.esdd.open .chev{transform:translateY(2px) rotate(-135deg)}
.esdd .ddp{border:1px solid var(--ink);border-top:0;border-radius:0 0 11px 11px;background:var(--panel);padding:8px;
  display:flex;flex-direction:column;gap:6px}
.esdd .ddl{display:flex;flex-direction:column;gap:2px;max-height:250px;overflow:auto}
.esdd .ci{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;
  align-items:center;min-height:38px;padding:4px 8px;border-radius:8px}
.esdd .ci:hover,.esdd .ci.act{background:var(--soft)}
.esdd .ci i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--faint);display:grid;place-items:center;
  font-style:normal;font-size:10px;line-height:1;color:var(--panel)}
.esdd .ci.on i{background:var(--sel);border-color:var(--sel)}
.esdd .ci.on i::after{content:"✓";font-weight:800}
.esdd .ci b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esdd .ci small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esdd .ci .p{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.esdd .ci mark{background:var(--cream);color:var(--ink);font-weight:800;border-radius:3px;padding:0 1px}
.esdd .bm{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:var(--green);
  color:var(--panel);font-size:10.5px;font-weight:700;margin-left:6px;vertical-align:1px}
.esdd .nores{padding:10px;color:var(--muted);font-size:12px}
.esdd .ddf{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted);
  padding:4px 4px 0;border-top:1px solid var(--box-line)}
.esdd .lnk{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--brand);white-space:nowrap}
.esdd .lnk:hover{color:var(--ink)}
.essel{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.essel .sl{display:grid;grid-template-columns:minmax(0,1fr) auto 24px;gap:10px;align-items:center;padding:6px 6px 6px 11px;
  border:1px solid var(--box-line);background:var(--box-bg);border-radius:9px}
.essel .sl b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.essel .sl small{display:block;font-size:11px;color:var(--muted)}
.essel .sl .p{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.essel .sl .rm{all:unset;cursor:pointer;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  color:var(--muted);font-size:12px}
.essel .sl .rm:hover{background:var(--cream);color:var(--red)}
.esdd .ci:focus-visible,.essel .sl .rm:focus-visible,.esdd .lnk:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* ★ 25.10 (Тарик): новая запись и бронь на телефоне — окно кабинета Милы (phone-booking.js) */
.mph-nz .mph-g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.mph-nz .mph-ph2{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px}
.mph-nz .mph-newc{gap:8px}
.mph-nz .mph-fs-hd .mph-pill{margin-left:auto}
.mph-nz .mph-svr b{min-width:0;overflow-wrap:anywhere}
.mph-nz .mph-tq{display:inline-flex;height:18px;align-items:center;padding:0 6px;border-radius:5px;background:var(--cream);
  color:var(--brand);font-size:10.5px;font-weight:700;margin-left:6px;vertical-align:1px;white-space:nowrap}
.mph-nz .mph-h .mph-cat{font-weight:600;color:var(--faint);letter-spacing:0}
.mph-nz .mph-note{color:#8a5a00}
.mph-nz .mph-big.mph-go{background:#1FA463;color:#fff}
.mph-nz .mph-big.mph-go:active{background:#178a52}
.mph-nz .mph-big:disabled{background:var(--cream);color:var(--faint);cursor:not-allowed}
.mph-nz .mph-fs-ft .mph-big.mph-lt{flex:0 0 auto;min-width:88px}
/* ★ 25.10: окно новой записи на телефоне — тем же слоем, что карточка визита (#esnz.mph-vis):
   поверх него встают оплата, «Create anyway», чаты отдела продаж и листы */
#esnz.mph-nz{z-index:40!important}
.mph-nz .mph-big.mph-dlg{background:var(--panel);color:var(--ink);border:1.5px solid var(--ink);flex:none}
.esdt-a.one{grid-template-columns:minmax(0,1fr)}
.esdt-hd .esdt-pick{margin-left:10px;font-size:16px}


/* ═══ ⛔ Тарик 26.10: «размер окна и кнопочек — под экран, во всех кабинетах». На ноутбуке 1024
   шапка расписания уводила за край «AED дня», «View», колокольчик и «Search», а шапка раздела —
   переключатель периода и поиск воронки: строки не переносились, лишнее молча обрезалось.
   Теперь шапки на компьютере переносятся на вторую строку, когда не влезают (на 1440+ — одна). ═══ */
body:not(.es-phone) .esjour-head{height:auto;min-height:56px;flex-wrap:wrap;row-gap:6px;padding-top:6px;padding-bottom:6px}
.top{flex-wrap:wrap;row-gap:10px}
.top .seg{max-width:100%}
/* ⛔ 26.10 (обход всех кабинетов по ширинам): таблицы каталога (Masters, Services, Memberships)
   на телефоне сжимались в 351 px — колонки «Name» и «Section» (minmax(0,1fr)) схлопывались в
   ноль, заголовки налезали друг на друга, последняя колонка обрезалась. На телефоне таблица
   держит свою ширину и листается вбок внутри себя, как график работы. */
body.es-phone .ms-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
body.es-phone .ms-tbl>*{min-width:900px}
/* ⛔ 26.10: строка «Ритм» на главной не переносилась — на телефоне «открыть списки» уезжало
   за край и раздувало страницу вбок (scrollWidth 411 при экране 375). */
.rhstrip{flex-wrap:wrap;row-gap:6px}
.rhstrip .p{white-space:nowrap}
/* ⛔ 26.10: телефонная раскладка CRM включается до 768 px — и на планшете окна телефона
   (карточка визита, новая запись, листы) были полосой 560 px во всю высоту без затемнения.
   С 600 px — окна по центру с затемнением, листы — карточкой по центру, как в кабинетах мастеров. */
@keyframes mph-ctr{from{opacity:0;transform:translate(-50%,-47%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%)}}
@media (min-width:600px){
 body.es-phone .mph-fs{top:3vh;bottom:3vh;border-radius:20px;overflow:hidden;
   box-shadow:0 0 0 100vmax rgba(43,36,30,.45),0 24px 60px rgba(43,36,30,.25)}
 body.es-phone .mph-fs .mph-fs-hd{padding-top:8px}
 body.es-phone .mph-fs .mph-fs-ft{padding-bottom:14px}
 body.es-phone .mph-sheet{top:50%;bottom:auto;left:50%;right:auto;margin:0;width:min(560px,calc(100vw - 48px));max-width:none;
   transform:translate(-50%,-50%);border-radius:22px;max-height:88vh;padding-bottom:18px;animation:mph-ctr .18s ease-out}
}