:root{
    --bg:#f6f7f8; --panel:#ffffff; --line:#e2e5e9; --ink:#1b2430; --ink-soft:#6b7684;
    --accent:#2c6e63;
    --st-booked:#aba17e; --st-confirmed:#c9d1ff; --st-arrived:#c9ffd6; --st-noshow:#ffc9ce; --st-moved:#fff3ca;
    /* Текстовые варианты того же статусного цвета — тёмные и насыщенные, для мест, где статус
       используется как цвет ТЕКСТА на светлом фоне (предупреждение о гарантии, подпись "Перезапись"
       в ячейке), а не как заливка карточки. Сами пастельные тона выше слишком светлые для текста. */
    --st-booked-text:#7a661f; --st-confirmed-text:#1a2ea8; --st-arrived-text:#007a1d; --st-noshow-text:#a3000f; --st-moved-text:#806300;
    --br1:#1f8a72; --br2:#8145c9; --badge:#1b2430;
  }
  * { box-sizing:border-box; }
  html,body{ height:100%; margin:0; }
  body{ background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
    display:flex; align-items:stretch; }
  /* Левая панель: чёрная полоска только с иконками (без подписей), названия — во всплывающей подсказке. */
  #sideNav{ width:60px; flex-shrink:0; background:#000; display:flex; flex-direction:column; align-items:center;
    padding:14px 0; gap:6px; position:sticky; top:0; align-self:flex-start; height:100vh; z-index:30; }
  .side-item{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none;
    border:none; border-radius:12px; color:#7d8590; cursor:pointer; position:relative; padding:0;
    transition:background .15s ease, color .15s ease; }
  .side-item svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .side-item:hover{ background:#1a1d21; color:#e8ebef; }
  .side-item.active{ background:#1f2328; color:#fff; }
  .side-item.active::before{ content:''; position:absolute; left:-8px; top:11px; bottom:11px; width:3px; border-radius:0 3px 3px 0; background:#fff; }
  .side-item:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .side-badge{ background:#c73f3f; color:#fff; font-size:10.5px; font-weight:700; border-radius:9px;
    padding:1px 6px; margin-left:auto; }
  /* Пайплайн (воронка лидов) */
  .lf-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
  .lf-head h2{ margin:0; font-size:22px; letter-spacing:-.01em; }
  .lf-sub{ font-size:12px; color:var(--ink-soft); }
  .lf-funnel{ display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:10px; margin-bottom:18px; }
  .lf-step{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
  .lf-step-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; color:var(--ink-soft); }
  .lf-step-top b{ font-size:22px; color:var(--ink); font-variant-numeric:tabular-nums; }
  .lf-bar{ height:6px; background:#eceef1; border-radius:4px; margin:8px 0 5px; overflow:hidden; }
  .lf-bar i{ display:block; height:100%; border-radius:4px; }
  .lf-pct{ font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .lf-board{ display:grid; grid-template-columns:repeat(5,minmax(210px,1fr)); gap:12px; align-items:start; overflow-x:auto; padding-bottom:8px; }
  .lf-col{ background:#eef0f2; border-radius:14px; padding:10px; min-height:140px; }
  .lf-colhead{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; margin:2px 4px 10px; }
  .lf-colhead i{ width:9px; height:9px; border-radius:50%; }
  .lf-colhead em{ margin-left:auto; font-style:normal; font-weight:600; font-size:11.5px; color:var(--ink-soft); background:#fff; border-radius:9px; padding:1px 8px; }
  .lf-cards{ display:flex; flex-direction:column; gap:8px; }
  .lf-card{ background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:10px; box-shadow:0 1px 2px rgba(20,30,40,.04); }
  .lf-card-top{ display:flex; align-items:center; gap:9px; }
  .lf-ava{ width:30px; height:30px; flex-shrink:0; border-radius:50%; color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
  .lf-who{ min-width:0; flex:1; }
  .lf-name{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lf-phone{ font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .lf-ago{ font-size:11px; color:var(--ink-soft); align-self:flex-start; }
  .lf-actions{ display:flex; gap:6px; margin-top:9px; }
  .lf-actions .primary{ flex:1; }
  .lf-empty{ font-size:12px; color:var(--ink-soft); text-align:center; padding:14px 0; }
  #appBody{ flex:1; min-width:0; height:100vh; overflow-y:auto; }
  .screen{ display:none; min-height:100%; }
  .screen.active{ display:block; }
  #screenCalendar.active{ display:block; }
  #screenLeads, #screenLtv{ padding:20px 26px; }
  /* Задачи и Лист ожидания — НЕ разделы левой панели (там только Пайплайн и ЛТВ,
     по явной просьбе владельца), а высокая выезжающая справа панель поверх
     календаря — открывается кнопкой из шапки календаря, закрывается крестиком,
     кликом по фону или Escape. */
  #panelBackdrop{ position:fixed; inset:0; background:rgba(10,14,20,.28); z-index:39; opacity:0; pointer-events:none; transition:opacity .18s ease; }
  #panelBackdrop.open{ opacity:1; pointer-events:auto; }
  .side-panel-slide{ position:fixed; top:0; right:0; height:100vh; width:440px; max-width:92vw;
    background:var(--panel); box-shadow:-12px 0 30px rgba(0,0,0,.22); z-index:40; overflow-y:auto;
    padding:22px 24px; transform:translateX(100%); transition:transform .22s ease; }
  .side-panel-slide.open{ transform:translateX(0); }
  .side-panel-close{ position:absolute; top:14px; right:18px; background:none; border:none;
    font-size:20px; line-height:1; cursor:pointer; color:var(--ink-soft); padding:4px; border-radius:6px; }
  .side-panel-close:hover{ background:var(--bg); color:var(--ink); }
  /* Тонкая полоска-ручка над шапкой: всегда на виду, даже когда вся шапка спрятана — по ней шапка
     и разворачивается обратно. Отдельная штука от круглой иконки ⌄ внутри шапки (та сворачивает
     только "Шахматка / День-Неделя-Месяц", как и раньше). */
  #headerHideBar{ position:sticky; top:env(safe-area-inset-top,0px); z-index:21; height:13px; display:flex;
    align-items:center; justify-content:center; background:var(--panel); border-bottom:1px solid var(--line);
    cursor:pointer; color:var(--ink-soft); font-size:9px; line-height:1; user-select:none; }
  #headerHideBar:hover{ color:var(--accent); background:#f4f9f8; }
  #headerHideBar span{ display:inline-block; transition:transform .25s ease; }
  body.header-hidden #headerHideBar span{ transform:rotate(180deg); }
  header{ position:sticky; top:calc(env(safe-area-inset-top,0px) + 13px); z-index:20; background:var(--panel);
    border-bottom:1px solid var(--line); padding:12px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    overflow:hidden; max-height:500px; opacity:1; transition:max-height .25s ease, opacity .2s ease, padding .25s ease, border-color .25s ease; }
  body.header-hidden header{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; border-color:transparent; pointer-events:none; }
  header h1{ font-size:17px; margin:0; font-weight:650; }
  .views{ display:flex; gap:4px; background:#eef0f2; padding:3px; border-radius:8px; }
  .views button{ border:none; background:transparent; padding:6px 12px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-soft); }
  .views button.active{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
  .daynav{ display:flex; align-items:center; gap:8px; }
  .daynav button{ width:30px; height:30px; border-radius:7px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:15px; }
  .daynav span{ font-size:14px; min-width:160px; text-align:center; font-weight:550; }
  .daynav #todayBtn{ width:auto; height:auto; padding:5px 11px; border-radius:20px; font-size:11px; font-weight:650; color:var(--accent); border-color:var(--accent); background:#fff; }
  .daynav #todayBtn:hover{ background:var(--accent); color:#fff; }
  .daynav #todayBtn.is-today{ color:var(--ink-soft); border-color:var(--line); background:transparent; cursor:default; font-weight:550; }
  .daynav #todayBtn.is-today:hover{ background:transparent; color:var(--ink-soft); }
  .spacer{ flex:1; }
  select, input, .btn{ font-family:inherit; font-size:14px; padding:7px 10px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--ink); }
  @media (max-width:480px){ .field input, .field select, .phonerow select, .phonerow input { font-size:16px; } }
  .btn{ cursor:pointer; font-weight:600; }
  .btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .btn.ghost{ background:#fff; }
  .btn.small{ padding:5px 9px; font-size:12.5px; }
  .btn.icon-only{ width:30px; height:30px; padding:0; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; border-radius:50%; }
  .btn.icon-only#collapseBtn{ font-size:12px; color:var(--ink-soft); }
  #collapseArrow{ display:inline-block; transition:transform .25s ease; }
  header.collapsed #collapseArrow{ transform:rotate(180deg); }
  .i-glyph{ font-style:italic; font-weight:800; font-family:Georgia,'Times New Roman',serif; font-size:13px; }
  .header-collapsible{ display:flex; align-items:center; gap:14px; overflow:hidden; max-width:600px; transition:max-width .25s ease, opacity .2s ease, margin .25s ease; opacity:1; }
  header.collapsed .header-collapsible{ max-width:0; opacity:0; margin:0; pointer-events:none; }
  .conflict-badge{ display:inline-flex; align-items:center; justify-content:center; font-size:12px; cursor:help; margin-left:6px; }
  main{ overflow-x:auto; padding:18px; }
  .day-wrap{ min-width:760px; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  .day-header{ display:flex; border-bottom:1px solid var(--line); }
  .rule-spacer{ width:58px; flex-shrink:0; border-right:1px solid var(--line); background:#fbfbfc; }
  .doc-head{ flex:1; min-width:0; padding:9px 8px; border-left:1px solid var(--line); background:#fbfbfc; }
  .doc-head:first-child{ border-left:none; }
  .doc-head .name{ font-size:13.5px; font-weight:650; display:flex; align-items:center; }
  /* Разворот кабинета на весь экран — кнопка-иконка прячется до наведения на шапку кабинета,
     чтобы не загромождать обычный вид тремя-четырьмя колонками; в развёрнутом режиме (cab-focused)
     видна всегда, как напоминание, что можно свернуть обратно. */
  .cab-focus-btn{ margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:7px; font-size:13px; color:var(--ink-soft); cursor:pointer;
    opacity:0; transition:opacity .15s, background .15s, color .15s; }
  .doc-head:hover .cab-focus-btn{ opacity:1; }
  .cab-focus-btn:hover{ background:var(--fill); color:var(--accent); }
  .day-wrap.cab-focused .cab-focus-btn{ opacity:1; color:var(--accent); }
  /* В развёрнутом режиме единственная колонка и так занимает весь экран, но засечки времени
     остаются в колонке фиксированной ширины слева — увеличиваем именно их, раз уж весь смысл
     режима в том, чтобы время было видно издалека, со стойки ресепшена. */
  .day-wrap.cab-focused .day-rule{ width:72px; }
  .day-wrap.cab-focused .rule-spacer{ width:72px; }
  .day-wrap.cab-focused .day-rule .tick.hour{ font-size:15px; }
  .day-wrap.cab-focused .day-rule .tick.half{ font-size:11.5px; }
  .doc-head .hours{ font-size:11.5px; color:var(--ink-soft); cursor:pointer; }
  .doc-head .hours:hover{ color:var(--accent); text-decoration:underline; }
  .cab-assign-row{ display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap; min-width:0; }
  .cab-shift-summary{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; line-height:1.3;
    color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:20px; padding:5px 9px 5px 11px;
    cursor:pointer; white-space:normal; min-height:26px; box-shadow:0 1px 2px rgba(0,0,0,.06);
    max-width:100%; box-sizing:border-box; transition:box-shadow .15s, background .15s; }
  .cab-shift-summary .shift-text{ min-width:0; overflow-wrap:break-word; white-space:normal; }
  /* Карандашик — как самостоятельная мини-иконка в своём кружке, а не просто приглушённый символ
     в строке: тот же язык, что и у других мелких иконок-кнопок в календаре (крестик смены, разворот
     кабинета) — едва заметен в покое, проявляется цветом акцента при наведении на весь чип. */
  .cab-shift-summary .edit-glyph{ display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; font-size:11px; color:var(--ink-soft); opacity:.7;
    flex-shrink:0; transition:opacity .15s, color .15s, background .15s; }
  .cab-shift-summary:hover{ background:#f4f9f8; border-color:var(--accent); box-shadow:0 2px 6px rgba(0,0,0,.08); }
  .cab-shift-summary:hover .edit-glyph{ opacity:1; color:var(--accent); background:rgba(0,122,255,.1); }
  .cab-shift-summary:active{ transform:scale(.97); }
  /* .cab-shift-summary делит базовый класс "hours" с обычными текстовыми подписями времени — их
     hover-стиль (.doc-head .hours:hover) добавляет подчёркивание, уместное для текстовой ссылки,
     но не для пилюли-чипа. Явно отключаем именно здесь, не трогая обычные .hours в других местах. */
  .doc-head .hours.cab-shift-summary:hover{ text-decoration:none; }
  /* Окно графика кабинета: карточка смены вместо голой строки-таблицы — ближе по духу к плашкам
     cab-shift-summary выше, чем к финансовым payline-строкам отчётов (их сетка под это не
     рассчитана — три равные колонки без акцента на имени врача). */
  .shift-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
    background:var(--fill, #f2f2f5); margin-bottom:6px; }
  .shift-row .sr-doctor{ font-size:13.5px; font-weight:650; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .shift-row .sr-time{ font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; flex-shrink:0; }
  .shift-row .sr-remove{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
    border-radius:50%; color:var(--ink-soft); cursor:pointer; flex-shrink:0; font-size:12px; transition:background .15s, color .15s; }
  .shift-row .sr-remove:hover{ background:rgba(255,59,48,.12); color:#ff3b30; }
  .docAssign{ font-size:11.5px; padding:3px 6px; max-width:100%; }
  .lbadge{ width:14px; height:14px; border-radius:50%; color:#fff; font-size:8.5px; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center; margin-right:5px; vertical-align:middle; flex-shrink:0; }
  .day-body{ display:flex; position:relative; }
  .day-rule{ width:58px; flex-shrink:0; position:relative; border-right:1px solid var(--line); background:#fbfbfc; }
  /* Раньше все засечки времени (и час, и получас) выглядели одинаково — мелкий, бледный текст,
     и глазами быстро понять "где сейчас час, а где половина" было тяжело, особенно до того как
     завёл запись и просто сканируешь сетку. Теперь целые часы — крупнее, темнее и жирнее (их и
     ищет глаз в первую очередь), получасовые — мельче и бледнее, как вспомогательные. */
  .day-rule .tick{ position:absolute; right:7px; transform:translateY(-50%); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .day-rule .tick.hour{ font-size:12.5px; font-weight:700; color:var(--ink); }
  .day-rule .tick.half{ font-size:10px; font-weight:500; color:var(--ink-soft); opacity:.8; }
  .lane{ flex:1; position:relative; border-left:1px solid var(--line); cursor:pointer; }
  .lane:first-child{ border-left:none; }
  .lane::before{ content:''; position:absolute; top:0; bottom:0; right:12%; border-left:1px dashed #cfd4da; pointer-events:none; }
  .lane::after{ content:'+'; position:absolute; top:6px; right:5px; width:20px; height:20px; border-radius:50%; background:#e3efec; color:var(--accent);
    font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; pointer-events:none; box-shadow:0 1px 3px rgba(0,0,0,.15); }
  .gridline{ position:absolute; left:0; right:0; border-top:1px solid var(--line); }
  /* Часовая линия чуть темнее получасовой — так взгляд, скользя по строке слева направо от
     времени к записи, сразу понимает "это целый час", не считая засечки. */
  .gridline:not(.half){ border-top-color:#dadee3; }
  .gridline.half{ border-top-style:dashed; border-top-color:#eef0f2; }
  .lane.dragover{ background:#f4f9f8; }
  /* Линия-призрак — это то, что видно глазами ДО создания записи: двигаешь мышкой по колонке,
     ищешь нужное время. Раньше крошечная подпись легко терялась на фоне сетки. Сделал линию и
     подпись заметно крупнее и контрастнее, с лёгкой тенью, чтобы время считывалось сразу, одним
     взглядом, не всматриваясь. */
  /* Обратная связь: прежняя толстая линия/бейдж (2.5px, крупная заливная таблетка слева) у первого
     кабинета наезжала на подписи часов в самой линейке времени слева — выглядело грузно, а не
     аккуратно. Линия тоньше и спокойнее (акцентный цвет виден, но не "жирная"), а подпись времени —
     компактная таблетка со значком-обводкой вместо сплошной заливки, и чуть смещена от самого
     края, чтобы не слипаться с линейкой. */
  .ghost-line{ position:absolute; left:0; right:0; height:0; border-top:1.5px solid var(--accent); pointer-events:none; z-index:5; display:none; box-shadow:0 1px 3px rgba(0,0,0,.12); }
  .ghost-time{ position:absolute; left:8px; top:-11px; background:#fff; color:var(--accent); font-size:11px; font-weight:700; padding:1.5px 7px; border-radius:999px; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.18); border:1.5px solid var(--accent); letter-spacing:.1px; }
  .apptblock{ position:absolute; border-radius:5px; color:#262626; font-size:11px; padding:4px 6px 4px 8px; overflow:hidden;
    border-left:6px solid; font-weight:600; cursor:grab; display:flex; flex-direction:column; box-shadow:0 0 0 1px rgba(0,0,0,.08); transition:box-shadow .1s, transform .1s, top .15s ease, height .15s ease; touch-action:none;
    /* Палитра статусов теперь светлая пастель (запрос пользователя, эталон — приложенный Adobe
       Color набор), поэтому текст тёмный, а не белый — белый текст на таком светлом фоне было бы
       почти не видно. Тень под текстом больше не нужна (была нужна для белого текста на тёмных
       тонах), её убрали. */
    user-select:none; -webkit-user-select:none; -webkit-user-drag:none; -khtml-user-drag:none; }
  .apptblock:hover{ box-shadow:0 0 0 1.5px rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.15); transform:translateY(-1px); z-index:10; }
  .apptblock.dragging{ opacity:.4; transition:none; }
  .resize-handle{ position:absolute; left:2px; right:2px; height:10px; cursor:ns-resize; z-index:16; touch-action:none; }
  .resize-handle.top{ top:-3px; } .resize-handle.bottom{ bottom:-3px; }
  .resize-handle:hover{ background:rgba(255,255,255,.35); border-radius:3px; }
  .drag-preview{ position:fixed; pointer-events:none; z-index:300; background:#1b2430; color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,.3); }
  .apptblock b{ font-size:12px; font-weight:700; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .apptblock span{ font-size:10.5px; font-weight:500; opacity:.95; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .apptblock.compact{ padding:3px 3px 3px 6px; justify-content:center; }
  .apptblock.compact b{ font-size:10px; }
  .apptblock.compact .badge{ width:11px; height:11px; font-size:7px; }
  /* 20–45 минут — раньше это были те же 3 строки (имя/телефон/услуга·время), что и в крошечной
     карточке, просто чуть крупнее — на деле всё равно мелко, приходится щуриться. Телефон отсюда
     убрали (он по наведению мышкой, как и в остальных сжатых видах) — взамен имя и "время · услуга"
     получают гораздо более крупный, спокойно читаемый шрифт. */
  .apptblock.tight{ padding:4px 8px 4px 10px; display:flex; flex-direction:column; justify-content:center; gap:1px; }
  .apptblock .appt-name-mid{ font-weight:700; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .apptblock .appt-time-mid{ font-weight:500; font-size:10px; opacity:.88; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Когда визит от получаса и длиннее и места в карточке реально много — не экономим на шрифте,
     но и не сваливаем всё в одну кучу: сверху время+услуга (это "когда и что"), затем имя —
     самое важное и крупное, отдельной строкой во всю ширину, не делит место с телефоном; телефон
     и врач (+значок ассистента, если он есть) — вместе одной приглушённой строкой снизу, это
     уже вторичные детали. Час и больше — тот же макет, но крупнее и с большим "воздухом". */
  .apptblock .appt-head{ display:flex; align-items:baseline; gap:7px; overflow:hidden; }
  .apptblock .appt-time-big{ font-weight:800; white-space:nowrap; }
  .apptblock .appt-svc-big{ opacity:.78; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .apptblock .appt-name-big{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .apptblock .appt-meta{ opacity:.78; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .apptblock .appt-asst-ic{ font-size:1em; line-height:1; }
  .apptblock.comfy{ padding:6px 9px 6px 11px; }
  .apptblock.comfy .appt-head{ margin-bottom:3px; }
  .apptblock.comfy .appt-time-big{ font-size:12px; }
  .apptblock.comfy .appt-svc-big{ font-size:10.5px; }
  .apptblock.comfy .appt-name-big{ font-size:12.5px; margin-bottom:1px; }
  .apptblock.comfy .appt-meta{ font-size:10px; }
  .apptblock.roomy{ padding:8px 11px 8px 13px; }
  .apptblock.roomy .appt-head{ margin-bottom:5px; }
  .apptblock.roomy .appt-time-big{ font-size:15px; }
  .apptblock.roomy .appt-svc-big{ font-size:12.5px; }
  .apptblock.roomy .appt-name-big{ font-size:15px; margin-bottom:2px; }
  .apptblock.roomy .appt-meta{ font-size:11.5px; }
  /* 3+ наложенных записи в одном кабинете/времени — колонка слишком узкая для имени, оставляем
     только время по центру; остальное — по наведению мышкой (showHoverPreview). */
  .apptblock.time-only{ display:flex; align-items:center; justify-content:center; padding:2px; }
  .apptblock .appt-time-solo{ font-size:10px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  /* Ровно 2 наложенных записи — вдвое шире, чем при 3+, так что помимо времени влезает ещё и
     телефон (без имени — см. комментарий в JS), тем же чистым центрированным стилем. */
  /* min-width:0 обязателен: без него flex-колонка не даёт дочерним span ужаться меньше их
     "естественной" ширины, и text-overflow:ellipsis на них просто не срабатывает — текст вроде
     как переполняет и обрезается криво с обеих сторон (а не аккуратным многоточием справа). */
  .apptblock.two-up{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:2px 4px; text-align:center; min-width:0; }
  .apptblock.two-up .appt-time-solo, .apptblock.two-up .appt-phone-solo{ min-width:0; }
  .apptblock .appt-phone-solo{ font-size:9.5px; font-weight:600; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .badge{ position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:var(--badge); color:#fff;
    font-size:8.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1.5px rgba(255,255,255,.7); }
  .status-glyph{ position:absolute; top:2px; right:2px; font-size:10px; font-weight:900; color:#262626; opacity:.8; }
  @keyframes overrunPulse{ 0%,100%{ box-shadow:inset 0 0 0 2px rgba(255,149,0,.95), 0 0 0 1px rgba(255,255,255,.55); } 50%{ box-shadow:inset 0 0 0 2px rgba(255,149,0,.25), 0 0 0 1px rgba(255,255,255,.55); } }
  .apptblock.overrun{ animation:overrunPulse 1.7s ease-in-out infinite; }
  /* Блокировка времени врача — не визит пациента, а просто "этот врач занят" (ушёл ассистировать
     в другой кабинет). Отдельный визуальный язык (штриховка, без цвета статуса), чтобы рецепция
     сразу отличала её от настоящей записи и не путала с пустым местом в сетке. */
  .apptblock.busy-block{ background:repeating-linear-gradient(135deg, #9aa3ad 0 7px, #838d98 7px 14px) !important; border-left-color:#5f6873 !important; color:#fff; }
  .apptblock.busy-block .status-glyph{ display:none; }
  .overrun-badge{ position:absolute; bottom:2px; right:2px; background:#ff9500; color:#fff; font-size:8px; font-weight:800; padding:1px 4px; border-radius:6px; line-height:1.35; box-shadow:0 0 0 1.5px rgba(255,255,255,.7); z-index:2; }
  .wa-dot{ position:absolute; top:2px; right:17px; font-size:11px; line-height:1; color:#262626; opacity:.75; }
  .wa-dot.no{ opacity:.35; }
  .apptblock.compact .wa-dot{ display:none; } /* в мелких карточках места нет — не загромождаем */
  /* Гарантийный случай — всегда видно прямо в сетке, без открытия карточки. Левый край занят
     временем (появляется во всех макетах карточки — от компактного до crупного), поэтому бейдж
     живёт справа, левее status-glyph/wa-dot, а не слева, где он перекрывал время. Нарочно не
     прячем даже в compact — это ровно тот факт, который рецепция должна видеть с первого взгляда. */
  .warranty-badge{ position:absolute; top:2px; right:32px; font-size:11px; line-height:1; filter:drop-shadow(0 0 1.5px rgba(0,0,0,.55)); z-index:3; }
  /* Подсветка дорогих визитов (кнопка-огонёк в шапке) — три уровня по сумме услуг, нарастающей
     интенсивностью цвета рамки; не трогаем background, чтобы не перебивать цвет статуса.
     Палитра — фиолетовая (премиум/VIP-ladder), сознательно вне всех 5 цветов статусов
     (хаки/лаванда/мята/розовый/жёлтый), чтобы огонёк не терялся на жёлтом статусе "перенос". */
  .apptblock.price-tier-1{ box-shadow:0 0 0 2px #c77dff, 0 2px 6px rgba(123,44,191,.18); }
  .apptblock.price-tier-2{ box-shadow:0 0 0 2px #9d4edd, 0 2px 8px rgba(123,44,191,.25); }
  .apptblock.price-tier-3{ box-shadow:0 0 0 2.5px #7b2cbf, 0 3px 10px rgba(123,44,191,.42); }
  .price-fire-badge{ position:absolute; bottom:2px; left:2px; font-size:10px; color:#7b2cbf; filter:drop-shadow(0 0 1.5px rgba(0,0,0,.5)); z-index:3; }
  #priceHighlightBtn.active{ color:#ff6a00; background:rgba(255,149,0,.16); }
  .apptblock.is-clipped{ opacity:.4; outline:2px dashed #fff; outline-offset:-3px; }
  body.move-pending .lane{ cursor:copy; }
  /* Внизу слева, подальше от шапки с датами (сверху) и от голосового шарика (справа снизу) —
     не должна мешать ни навигации по дням, ни чему-либо ещё. Компактная, в одну строку. */
  #clipboardBadge{ position:fixed; left:14px; bottom:14px; z-index:300;
    background:#1b2430; color:#fff; padding:6px 7px 6px 11px; border-radius:20px; font-size:11.5px;
    display:flex; align-items:center; gap:8px; box-shadow:0 6px 18px rgba(0,0,0,.28); max-width:min(72vw, 360px); }
  #clipboardBadge span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
  #clipboardBadge span:hover{ text-decoration:underline; }
  #clipboardBadge b{ font-weight:700; }
  #clipboardBadge button{ background:rgba(255,255,255,.14); border:none; color:#fff; width:18px; height:18px;
    border-radius:50%; cursor:pointer; font-size:10px; line-height:1; flex-shrink:0; }
  #clipboardBadge button:hover{ background:rgba(255,255,255,.26); }
  .now-line{ position:absolute; left:52px; right:0; height:0; border-top:2px solid #e0483e; z-index:22; pointer-events:none; }
  .now-line .now-dot{ position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; background:#e0483e; box-shadow:0 0 0 2px #fff; }
  .legend{ display:flex; gap:14px; padding:0 18px 14px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); align-items:center; }
  .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
  .legend .dot{ margin-right:5px; }
  .legend .bar{ width:14px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; vertical-align:middle; }
  .legend .lbadge{ background:var(--badge); }
  .week-table, .month-table{ border-collapse:collapse; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  .week-table th, .week-table td{ border:1px solid var(--line); padding:8px; font-size:12.5px; text-align:center; }
  .week-table th{ background:#fbfbfc; }
  .week-table td.doccell{ text-align:left; font-weight:600; background:#fbfbfc; }
  .week-table td.count{ cursor:pointer; }
  .week-table td.count:hover{ background:#f4f9f8; }
  .month-table td{ border:1px solid var(--line); height:76px; vertical-align:top; padding:6px; cursor:pointer; width:14.28%; }
  .month-table td:hover{ background:#f4f9f8; }
  .month-table td .dnum{ font-size:12px; font-weight:650; }
  .month-table td .dcount{ font-size:11px; color:var(--accent); margin-top:4px; }
  .month-table th{ border:1px solid var(--line); padding:6px; font-size:11.5px; color:var(--ink-soft); background:#fbfbfc; }
  /* БАГ (найден и исправлен): раньше это был flex-ряд с align-items:center — карточка записи
     (modal) центрировалась по высоте, а справочная панель кабинета рядом держалась на
     align-self:flex-start (к верху контейнера). Это две РАЗНЫЕ точки отсчёта: при высокой модалке
     (форма записи — почти во весь экран) её верхний край и так оказывался близко к верху, разница
     была небольшой и малозаметной; но при короткой модалке (например открыть существующую запись
     без доп.полей) модалка центрировалась где-то ближе к середине экрана, а панель оставалась
     прилипшей к верху — получался заметный разнобой, будто окна "не ровно" стоят друг с другом.
     Grid с align-items:start и align-content:center решает это правильно: оба элемента стартуют
     с ОДНОЙ и той же верхней границы общего ряда, а сам ряд (modal+панель как единое целое)
     центрируется по высоте экрана — так что они всегда выровнены по верху между собой, какой бы
     ни была высота модалки. */
  .overlay{ position:fixed; inset:0; background:rgba(20,25,30,.4); display:none; align-items:start; justify-content:center; align-content:center; z-index:50; padding:16px; gap:14px; }
  .overlay.open{ display:grid; grid-auto-flow:column; }
  .modal{ background:#fff; border-radius:12px; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; padding:20px; }
  .modal h2{ font-size:16px; margin:0 0 4px; }
  .modal .subtitle{ font-size:12px; color:var(--ink-soft); margin:0 0 14px; }
  .field{ margin-bottom:12px; }
  .field label{ display:block; font-size:12px; color:var(--ink-soft); margin-bottom:4px; }
  /* Справочная панель справа от окна записи: просто показывает все записи по кабинету за день —
     рецепции не нужно закрывать окно, чтобы прикинуть свободное время. Чисто информационная,
     ничего в ней не редактируется и не кликается. */
  /* Увеличено по просьбе: при создании записи рецепция поглядывает на эту панель, чтобы прикинуть
     свободное время, и щуриться на мелкий текст здесь неудобно — тот же принцип, что и у крупных
     засечек времени в сетке. */
  .cab-side-panel{ background:#fff; border-radius:12px; width:262px; max-height:90vh; overflow-y:auto; padding:18px; }
  .cab-side-panel h3{ font-size:14.5px; margin:0 0 3px; }
  .cab-side-panel .csp-sub{ font-size:12px; color:var(--ink-soft); margin:0 0 12px; }
  .cab-side-panel .csp-row{ padding:9px 0; border-top:1px solid var(--line); }
  .cab-side-panel .csp-row:first-of-type{ border-top:none; }
  .cab-side-panel .csp-row.csp-current{ background:rgba(0,122,255,.07); border-radius:9px; margin:0 -9px; padding:9px; border-top-color:transparent; }
  .cab-side-panel .csp-row-top{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
  .cab-side-panel .csp-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
  .cab-side-panel .csp-time{ font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap; }
  .cab-side-panel .csp-name{ font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cab-side-panel .csp-svc{ font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
  .cab-side-panel .csp-empty{ font-size:13px; color:var(--ink-soft); padding:4px 0; }
  @media (max-width:860px){ .cab-side-panel{ display:none !important; } }
  /* Значок голосового помощника: тёмная сфера с перетекающими цветными волнами света —
     собственная композиция «в духе» голосовых ассистентов, не копия чужой иконки. */
  #voiceBtn{ position:fixed; right:18px; bottom:18px; z-index:35; width:38px; height:38px; padding:0; border:none;
    border-radius:50%; overflow:hidden; cursor:pointer;
    background:radial-gradient(circle at 50% 30%, #362a5c 0%, #100b24 82%);
    box-shadow:0 2px 10px rgba(10,5,25,.5), inset 0 0 0 1px rgba(255,255,255,.08);
    transition:transform .18s ease, box-shadow .25s ease; }
  #voiceBtn:hover{ transform:scale(1.1); box-shadow:0 4px 16px rgba(10,5,25,.6), inset 0 0 0 1px rgba(255,255,255,.12); }
  .siri-orb{ position:relative; display:block; width:100%; height:100%; }
  .siri-orb .wave{ position:absolute; border-radius:50%; filter:blur(3px); mix-blend-mode:screen; }
  .siri-orb .wave.w1{ width:85%; height:75%; left:-18%; bottom:-22%;
    background:radial-gradient(circle, #29e2ff 0%, #29e2ff 35%, rgba(41,226,255,0) 72%);
    animation:orbDriftA 5.5s ease-in-out infinite; }
  .siri-orb .wave.w2{ width:80%; height:70%; right:-20%; top:-18%;
    background:radial-gradient(circle, #ff3fa8 0%, #ff3fa8 35%, rgba(255,63,168,0) 72%);
    animation:orbDriftB 6.5s ease-in-out infinite; }
  .siri-orb .wave.w3{ width:72%; height:64%; left:18%; top:28%;
    background:radial-gradient(circle, #9d6bff 0%, #9d6bff 35%, rgba(157,107,255,0) 72%);
    animation:orbDriftC 7.5s ease-in-out infinite; }
  .siri-orb .streak{ position:absolute; inset:-20%; mix-blend-mode:screen; opacity:.55;
    background:linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 62%);
    animation:orbStreak 4.5s ease-in-out infinite; }
  .siri-orb .sheen{ position:absolute; inset:0; border-radius:50%;
    background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.35), rgba(255,255,255,0) 26%); }
  @keyframes orbDriftA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(3px,-3px) scale(1.08); } }
  @keyframes orbDriftB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-3px,3px) scale(1.08); } }
  @keyframes orbDriftC{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(2px,2px) scale(1.1); } }
  @keyframes orbStreak{ 0%,100%{ transform:translateX(-8%) translateY(4%); } 50%{ transform:translateX(8%) translateY(-4%); } }
  #voiceBtn.listening .wave{ animation-duration:1.5s; }
  #voiceBtn.listening .streak{ animation-duration:1.8s; }
  .voice-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.15); z-index:38; display:none; }
  .voice-overlay.open{ display:block; }
  .voice-panel{ position:fixed; top:0; right:0; height:100%; width:340px; max-width:88vw; background:var(--panel);
    border-left:1px solid var(--line); box-shadow:-10px 0 28px rgba(0,0,0,.14); z-index:39;
    transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; }
  .voice-panel.open{ transform:translateX(0); }
  .voice-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font-size:14px; }
  .voice-beta{ font-size:9.5px; font-weight:700; color:var(--accent); background:rgba(44,110,99,.12); padding:2px 6px; border-radius:20px; margin-left:6px; vertical-align:1px; }
  .voice-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
  .voice-status{ display:none; align-items:center; gap:7px; padding:8px 16px; font-size:12.5px; color:var(--ink-soft); border-bottom:1px solid var(--line); }
  .voice-status.show{ display:flex; }
  .voice-status .vdot{ width:8px; height:8px; border-radius:50%; background:#ff3b30; flex-shrink:0; animation:vdotPulse 1.1s ease-in-out infinite; }
  .voice-status.processing .vdot{ background:#ff9500; animation:none; }
  @keyframes vdotPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }
  .voice-msg{ font-size:13px; line-height:1.5; padding:10px 12px; border-radius:12px; background:var(--fill, #eef0f2); color:var(--ink); }
  .voice-msg.you{ background:var(--accent); color:#fff; align-self:flex-end; max-width:85%; }
  .voice-msg.system{ background:transparent; color:var(--ink-soft); font-size:11.5px; padding:0 2px; }
  .voice-actions{ display:flex; gap:8px; }
  .field .hint{ font-size:10.5px; color:var(--ink-soft); margin-top:3px; }
  #durHint{ cursor:pointer; }
  /* Поле окончания визита должно выглядеть как настоящее поле ввода (как часы/минуты рядом),
     а не как бледная серая подсказка — это такое же равноправное значение, просто ещё и кликабельное. */
  .dur-pill{ display:inline-flex; align-items:center; gap:7px; background:var(--fill,#eef0f2); border:1px solid transparent;
    border-radius:12px; padding:11px 13px; font-size:16.5px; font-weight:600; color:var(--ink); min-width:62px; }
  #durHint:hover .dur-pill{ background:#fff; border-color:rgba(0,122,255,.3); }
  #durHint .dur-edit-glyph{ font-size:12px; opacity:.55; }
  #durHint:hover .dur-edit-glyph{ color:var(--accent); opacity:1; }
  #durHint #fDurEnd{ font-family:inherit; }
  .field input, .field select{ width:100%; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .phonerow{ display:grid; grid-template-columns:98px 1fr; gap:6px; }
  .phonerow select{ padding-left:10px; padding-right:4px; }
  .modal-actions{ display:flex; justify-content:space-between; gap:8px; margin-top:16px; }
  .swatch{ width:9px; height:9px; border-radius:50%; display:inline-block; }
  .togglebtn{ display:flex; align-items:center; justify-content:space-between; width:100%; background:#fbfbfc; border:1px solid var(--line); border-radius:7px; padding:8px 10px; font-size:13px; font-weight:600; cursor:pointer; }
  .panel{ display:none; border:1px solid var(--line); border-top:none; border-radius:0 0 7px 7px; padding:10px; background:#fcfcfd; }
  .panel.open{ display:block; }
  .payline{ display:grid; grid-template-columns:1fr 90px auto; gap:6px; margin-bottom:6px; align-items:center; }
  /* Лист записей — отдельный, заточенный под "глянул-понял-кликнул" формат (не финансовая payline-
     таблица): время всегда первым и самым заметным (на него ориентируется рецепция), статус —
     цветной точкой слева (тот же язык цвета, что в самой сетке), вся строка кликабельна и ведёт
     прямо в карточку записи — чтобы поправить что-то можно было в один клик, не выходя в сетку
     искать эту же запись руками. */
  .bl-row{ display:flex; align-items:flex-start; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer; }
  .bl-row:hover{ background:var(--panel2, rgba(0,0,0,.045)); }
  .bl-status-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; margin-top:5px; }
  .bl-time{ min-width:98px; flex:0 0 auto; font-size:13px; font-weight:700; line-height:1.3; }
  .bl-time .bl-moved, .bl-time .bl-delay{ display:block; font-size:10.5px; font-weight:600; color:var(--st-moved-text); margin-top:1px; }
  .bl-main{ flex:1; min-width:0; }
  .bl-name{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bl-sub{ font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
  .bl-cab{ font-size:11px; color:var(--ink-soft); flex:0 0 auto; text-align:right; min-width:56px; margin-top:2px; }
  .hist-list{ max-height:150px; overflow-y:auto; font-size:12px; color:var(--ink-soft); line-height:1.6; }
  .contact-list{ border:1px solid var(--line); border-top:none; border-radius:0 0 7px 7px; background:#fff; max-height:190px; overflow-y:auto; }
  .contact-item{ padding:7px 10px; font-size:12.5px; cursor:pointer; }
  .contact-item .ci-extra{ color:var(--ink-soft); font-size:11px; margin-top:2px; }
  .contact-item:hover{ background:#f4f9f8; }
  .err{ border-color:#c73f3f !important; }
  .errtext{ font-size:11px; color:#c73f3f; margin-top:3px; min-height:13px; }
  .wa-row{ display:flex; gap:6px; align-items:center; }
  .wa-row a, .icon-btn{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line); border-radius:7px; text-decoration:none; font-size:15px; background:#fff; color:var(--ink); cursor:pointer; flex-shrink:0; }
  .subhead{ font-size:11.5px; font-weight:700; color:var(--ink-soft); margin:14px 0 6px; }
  .hover-preview{ position:fixed; z-index:250; background:rgba(28,28,30,.94); color:#fff; padding:9px 13px; border-radius:12px; font-size:12px; line-height:1.55;
    box-shadow:0 10px 26px rgba(0,0,0,.32); pointer-events:none; max-width:230px; }
  .hover-preview b{ display:block; font-size:13.5px; margin-bottom:2px; }
  .hover-preview .hp-muted{ opacity:.75; }

  /* Горячие клавиши (Alt): протянуть время записи по пустому месту + быстрый статус по наведению */
  .range-ghost{ position:absolute; left:2px; right:2px; display:none; z-index:6; pointer-events:none;
    background:color-mix(in srgb, var(--accent) 16%, transparent); border:1.5px dashed var(--accent); border-radius:6px; }
  .range-ghost-time{ position:absolute; top:4px; left:7px; font-size:11.5px; font-weight:800; color:#fff; background:var(--accent); padding:2px 7px; border-radius:5px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.2); }
  body.alt-mode .lane{ cursor:crosshair; }
  .apptblock.alt-target{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent), 0 4px 10px rgba(0,0,0,.3) !important; z-index:12 !important; }
  .quick-status-pop{ position:fixed; z-index:260; background:rgba(255,255,255,.98); border-radius:11px; padding:5px;
    box-shadow:0 12px 28px rgba(0,0,0,.22), 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:2px; min-width:150px; }
  .qs-btn{ display:flex; align-items:center; gap:7px; border:none; background:none; text-align:left; padding:6px 9px; border-radius:7px;
    font-size:12.5px; color:var(--ink); cursor:pointer; }
  .qs-btn:hover{ background:color-mix(in srgb, var(--qs-color, var(--accent)) 14%, transparent); }
  .qs-btn.is-current{ font-weight:700; background:color-mix(in srgb, var(--qs-color, var(--accent)) 20%, transparent); }
  .qs-sep{ height:1px; background:var(--line); margin:4px 2px; }
  .qs-shift-head{ font-size:11px; color:var(--ink-soft); padding:2px 9px 6px; max-width:190px; line-height:1.3; }
  .qs-shift-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:0 4px; margin-bottom:2px; }
  .qs-shift-grid .qs-btn{ justify-content:center; }
  .quick-pay-pop{ position:fixed; z-index:260; background:rgba(255,255,255,.98); border-radius:14px; padding:12px;
    box-shadow:0 12px 28px rgba(0,0,0,.22), 0 0 0 1px var(--line); min-width:216px; }
  .qp-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
  .qp-title{ font-size:12.5px; font-weight:650; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .qp-close{ display:flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; color:var(--ink-soft); font-size:9px; cursor:pointer; flex-shrink:0; transition:background .12s, color .12s; }
  .qp-close:hover{ background:rgba(0,0,0,.07); color:var(--ink); }
  .qp-field{ display:flex; flex-direction:column; gap:3px; margin-bottom:7px; }
  .qp-field label{ display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--ink-soft); }
  .qp-field label svg{ opacity:.6; font-size:11px; }
  .qp-field input{ font-family:inherit; font-size:13.5px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); width:100%; box-sizing:border-box; transition:border-color .12s, box-shadow .12s; }
  .qp-field input:focus{ outline:none; border-color:rgba(0,122,255,.5); box-shadow:0 0 0 3px rgba(0,122,255,.14); }
  .qp-field input.auto{ color:var(--ink-soft); font-style:italic; }
  .qp-field.qp-price input{ font-size:16.5px; font-weight:700; padding:9px 11px; }
  .qp-div{ height:1px; background:var(--line); margin:0 0 9px; }
  .qp-row2{ display:flex; gap:7px; }
  .qp-row2 .qp-field{ flex:1; }

  .warranty-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fbfbfc; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:12px; cursor:pointer; }
  .warranty-toggle .wt-text{ display:flex; flex-direction:column; }
  .warranty-toggle .wt-title{ font-size:13px; font-weight:600; color:var(--ink); }
  .warranty-toggle .wt-sub{ font-size:11px; color:var(--ink-soft); margin-top:1px; }
  .wt-switch{ position:relative; flex:0 0 auto; display:inline-flex; }
  .wt-switch input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
  .wt-track{ display:block; width:40px; height:24px; border-radius:12px; background:#e3e3e8; position:relative; transition:background .15s; }
  .wt-thumb{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
  .wt-switch input:checked + .wt-track{ background:#34c759; }
  .wt-switch input:checked + .wt-track .wt-thumb{ transform:translateX(16px); }
  .wt-switch input:focus-visible + .wt-track{ box-shadow:0 0 0 3px rgba(0,122,255,.3); }

  /* ================= iOS 26 / Liquid Glass theme ================= */
  :root{
    --accent:#007aff; --ink:#1c1c1e; --ink-soft:#8e8e93; --line:rgba(60,60,67,.13);
    --st-booked:#aba17e; --st-confirmed:#c9d1ff; --st-arrived:#c9ffd6; --st-noshow:#ffc9ce; --st-moved:#fff3ca;
    --st-booked-text:#7a661f; --st-confirmed-text:#1a2ea8; --st-arrived-text:#007a1d; --st-noshow-text:#a3000f; --st-moved-text:#806300;
    --br1:#30b0c7; --br2:#af52de; --badge:#1c1c1e;
    --glass:rgba(255,255,255,.58); --glass-strong:rgba(255,255,255,.78); --glass-edge:rgba(255,255,255,.75);
    --fill:rgba(118,118,128,.12);
  }
  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; letter-spacing:-0.01em;
    background:
      radial-gradient(55% 45% at 12% 8%, rgba(0,122,255,.20), transparent 62%),
      radial-gradient(45% 40% at 92% 12%, rgba(175,82,222,.18), transparent 62%),
      radial-gradient(55% 45% at 75% 96%, rgba(52,199,89,.15), transparent 62%),
      radial-gradient(40% 35% at 8% 90%, rgba(255,149,0,.12), transparent 62%),
      #f2f2f7;
    background-attachment:fixed;
  }
  #headerHideBar{ top:env(safe-area-inset-top,0px); background:transparent; border-bottom:none; height:16px; }
  #headerHideBar span{ background:var(--fill); border-radius:3px; width:34px; height:4px; display:block; text-indent:-9999px; }
  body.header-hidden #headerHideBar span{ transform:none; background:var(--accent); opacity:.6; }
  header{
    top:calc(env(safe-area-inset-top,0px) + 16px); margin:6px 14px 12px; border-radius:26px; padding:10px 16px;
    background:var(--glass); backdrop-filter:blur(28px) saturate(190%); -webkit-backdrop-filter:blur(28px) saturate(190%);
    border:1px solid var(--glass-edge); box-shadow:0 8px 32px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.7);
    transition:padding .25s ease, margin .25s ease, max-height .25s ease, opacity .2s ease;
  }
  body.header-hidden header{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0; border-color:transparent; box-shadow:none; pointer-events:none; }
  header h1{ font-size:20px; font-weight:700; letter-spacing:-0.03em; }
  .views{ background:var(--fill); border-radius:999px; padding:3px; }
  .views button{ border-radius:999px; padding:6px 14px; font-weight:600; color:#3c3c43; }
  .views button.active{ background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.12); }
  .daynav button{ width:34px; height:34px; border-radius:50%; border:none; background:var(--fill); font-size:17px; color:var(--ink); }
  .daynav span{ font-weight:600; font-size:15px; }
  .daynav #todayBtn{ width:auto; height:auto; padding:6px 13px; border-radius:999px; font-size:12px; font-weight:650; background:var(--fill); color:var(--accent); }
  .daynav #todayBtn:hover{ background:var(--accent); color:#fff; }
  .daynav #todayBtn.is-today{ color:#8e8e93; background:transparent; cursor:default; }
  .daynav #todayBtn.is-today:hover{ background:transparent; color:#8e8e93; }
  select, input, .btn{ font-size:15px; }
  .btn{ border-radius:999px; padding:9px 16px; border:none; }
  .btn.ghost{ background:var(--fill); color:var(--accent); }
  .btn.primary{ background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(0,122,255,.35); }
  .btn.small{ padding:6px 12px; font-size:13px; }
  .legend{
    margin:0 14px 12px; padding:8px 16px; border-radius:18px; background:var(--glass);
    backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid var(--glass-edge); font-size:12px; color:#6c6c70;
  }
  main{ padding:0 14px 28px; }
  .day-wrap{
    background:var(--glass); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid var(--glass-edge); border-radius:28px; box-shadow:0 12px 40px rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.8);
  }
  .day-header{ border-bottom:1px solid var(--line); }
  .rule-spacer, .doc-head, .day-rule{ background:transparent; }
  .rule-spacer, .day-rule{ border-right:1px solid var(--line); }
  .doc-head{ border-left:1px solid var(--line); padding:12px 12px; }
  .doc-head .name{ font-size:15px; font-weight:650; }
  .doc-head .hours{ color:var(--ink-soft); font-size:12px; }
  .doc-head .hours:hover{ color:var(--accent); }
  .cab-shift-summary{ background:var(--fill); border:none; color:var(--ink); border-radius:999px; }
  .cab-shift-summary:hover{ background:#fff; color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.1); }
  .docAssign{ border-radius:999px; }
  .lane{ border-left:1px solid var(--line); }
  .gridline{ border-top-color:var(--line); }
  .gridline:not(.half){ border-top-color:rgba(60,60,67,.16); }
  .gridline.half{ border-top-color:rgba(60,60,67,.06); }
  .day-rule .tick.hour{ color:var(--ink); }
  .day-rule .tick.half{ color:var(--ink-soft); }
  .lane::before{ border-left-color:rgba(60,60,67,.14); }
  .lane::after{ background:rgba(0,122,255,.13); color:var(--accent); box-shadow:none; width:22px; height:22px; font-size:15px; }
  .lane.dragover{ background:rgba(0,122,255,.06); }
  .ghost-line{ border-top-color:var(--accent); }
  .ghost-time{ border-color:var(--accent); color:var(--accent); }
  .now-line{ border-top-color:#ff3b30; }
  .now-line .now-dot{ background:#ff3b30; }
  /* Без тени под карточкой (отзыв: тень "удешевляла" вид) — плоская заливка, чёткость края даёт
     только тонкая обводка. На светлых пастельных тонах тень была лишней, не декоративной. */
  .apptblock{
    border-radius:14px; border-left-width:5px;
    background-image:none !important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  }
  .apptblock:hover{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transform:translateY(-1px); }
  .apptblock b{ letter-spacing:-0.02em; }
  .badge{ background:rgba(28,28,30,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 0 0 1.5px rgba(255,255,255,.55); }
  .drag-preview{ background:rgba(28,28,30,.78); backdrop-filter:blur(14px); border-radius:999px; padding:7px 14px; }
  .hover-preview{ backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
  .resize-handle:hover{ background:rgba(255,255,255,.4); }
  .week-table, .month-table{ background:var(--glass); border:1px solid var(--glass-edge); box-shadow:0 12px 40px rgba(0,0,0,.08); }
  .week-table th, .week-table td, .month-table td, .month-table th{ border-color:var(--line); }
  .week-table th, .month-table th, .week-table td.doccell{ background:transparent; }
  /* overlays and modals */
  .overlay{ background:rgba(0,0,0,.26); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .modal{
    background:var(--glass-strong); backdrop-filter:blur(40px) saturate(200%); -webkit-backdrop-filter:blur(40px) saturate(200%);
    border:1px solid var(--glass-edge); border-radius:30px; padding:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.85);
  }
  .modal h2{ font-size:20px; font-weight:700; letter-spacing:-0.03em; }
  .modal input, .modal select{
    background:var(--fill); border:1px solid transparent; border-radius:12px; padding:11px 13px; font-size:16.5px; color:var(--ink);
  }
  .modal input:focus, .modal select:focus{ outline:none; background:#fff; border-color:rgba(0,122,255,.5); box-shadow:0 0 0 4px rgba(0,122,255,.16); }
  .field label, .subhead{ color:var(--ink-soft); font-size:12.5px; font-weight:600; text-transform:none; }
  .togglebtn{ background:var(--fill); border:none; border-radius:14px; padding:11px 14px; }
  .warranty-toggle{ background:var(--fill); border:none; border-radius:14px; padding:11px 14px; }
  .wt-track{ background:rgba(118,118,128,.24); }
  .panel{ background:rgba(118,118,128,.07); border:none; border-radius:0 0 14px 14px; }
  .contact-list{ background:rgba(255,255,255,.9); border:none; border-radius:12px; margin-top:6px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
  .contact-item:hover{ background:rgba(0,122,255,.08); }
  .wa-row a, .icon-btn{ border:none; background:var(--fill); border-radius:50%; width:38px; height:38px; }
  .quick-pay-pop{ background:var(--glass-strong); backdrop-filter:blur(30px) saturate(200%); -webkit-backdrop-filter:blur(30px) saturate(200%); border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.85); }
  .qp-field input{ background:var(--fill); border:1px solid transparent; border-radius:10px; }
  .qp-field input:focus{ background:#fff; }
  .err{ border-color:#ff3b30 !important; background:rgba(255,59,48,.06) !important; }
  .errtext{ color:#ff3b30; }
  .hint{ color:var(--ink-soft); }
  /* Значок "занято другим, кто сейчас открыл карточку" — прямо на слоте
     в календаре, а не мышкой/курсором. Статичный: появляется в момент
     открытия карточки (создание/редактирование времени) и пропадает при
     закрытии — никакого отслеживания движения мыши. */
  .slot-lock{ position:absolute; left:2px; right:2px; border-radius:5px; z-index:12; pointer-events:none;
    background:repeating-linear-gradient(135deg, rgba(0,0,0,.07) 0 8px, rgba(0,0,0,.02) 8px 16px);
    border:1.5px dashed rgba(0,0,0,.28); display:flex; align-items:flex-start; padding:3px 6px; }
  .slot-lock span{ font-size:10.5px; font-weight:700; color:#262626; background:rgba(255,255,255,.82);
    padding:1px 6px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

  /* Вход и выход */
  #loginOverlay{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:16px; }
  #loginForm{ width:100%; max-width:340px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 24px; display:flex; flex-direction:column; gap:14px; }
  #loginForm h1{ margin:0; font-size:22px; color:var(--ink); }
  #loginForm p{ margin:0; color:var(--ink-soft); font-size:14px; }
  #loginForm label{ display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--ink-soft); }
  #loginForm input{ font-size:16px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; }
  #loginForm input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  #loginErr{ min-height:18px; font-size:13px; color:#b3261e; }
  #loginBtn{ font-size:16px; padding:11px; border:none; border-radius:9px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; }
  #loginBtn:disabled{ opacity:.6; cursor:default; }
  .side-logout{ margin-top:auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:12px; color:#7d8590; cursor:pointer; padding:0; }
  .side-logout svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .side-logout:hover{ background:#1a1d21; color:#e8ebef; }
  html.auth-wait body > *:not(#loginOverlay){ visibility:hidden; }

  /* Телефон: режимы просмотр / правка (js/14-touch-mode.js) */
  body.is-touch .apptblock{ cursor:default; touch-action:pan-x pan-y; -webkit-touch-callout:none; transition:none; }
  body.is-touch .apptblock:hover{ transform:none; }
  body.is-touch .resize-handle{ height:20px; touch-action:pan-x pan-y; }
  body.is-touch .resize-handle.top{ top:-6px; } body.is-touch .resize-handle.bottom{ bottom:-6px; }
  body.touch-view .resize-handle{ display:none; }
  .apptblock.lp-armed{ box-shadow:0 0 0 3px var(--accent), 0 6px 16px rgba(0,0,0,.3); z-index:20; }
  body.is-touch .side-logout{ margin-top:0; }
  .side-mode{ margin:auto 0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:12px; color:#7d8590; cursor:pointer; padding:0; }
  .side-mode svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  body.touch-edit .side-mode{ background:var(--accent); color:#fff; }
  #touchHint{ position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 12px); transform:translateX(-50%) translateY(-20px); max-width:88vw; background:#1b2430; color:#fff; padding:10px 14px; border-radius:10px; font-size:14px; line-height:1.3; z-index:9000; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; text-align:center; }
  #touchHint.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  #hdrActions{ display:contents; }

  /* Узкий экран (телефон): компактная шапка, один кабинет на ширину экрана, шкала времени закреплена слева. */
  @media (max-width:640px){
    main{ padding:6px 6px 90px; }
    #mainHeader{ margin:4px 6px 8px; padding:8px 12px; gap:8px; border-radius:20px; }
    .header-collapsible{ max-width:none; gap:10px; }
    #mainHeader h1{ display:none; }
    .views{ flex:1; } .views button{ flex:1; padding:7px 8px; }
    .daynav{ flex:1 1 100%; justify-content:space-between; }
    .daynav span{ min-width:0; flex:1; font-size:15px; }
    #hdrActions{ flex:0 0 100%; display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    #hdrActions::-webkit-scrollbar{ display:none; }
    #hdrActions .btn{ flex:0 0 auto; white-space:nowrap; font-size:13.5px; padding:8px 14px; }
    #hdrActions .btn.icon-only{ width:36px; height:36px; }
    .day-wrap{ min-width:0; width:max-content; overflow:visible; }
    .doc-head, .lane{ flex:0 0 calc(100vw - 132px); min-width:0; }
    .rule-spacer, .day-rule{ position:sticky; left:0; z-index:12; }
    .modal-actions{ flex-wrap:wrap; justify-content:flex-end; row-gap:8px; }
    .modal-actions .btn{ padding:10px 14px; font-size:15px; white-space:nowrap; }
    .lf-funnel{ display:flex; overflow-x:auto; gap:10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .lf-funnel::-webkit-scrollbar{ display:none; }
    .lf-funnel .lf-step{ flex:0 0 150px; }
    .phonerow{ grid-template-columns:92px minmax(0,1fr); }
    .phonerow > *, .wa-row > input{ min-width:0; }
    .wa-row input{ flex:1 1 auto; }
    .overlay{ align-content:start !important; align-items:flex-start !important; padding-top:8px; }
    .modal{ max-height:calc(100dvh - 16px); overflow-y:auto; }
  }

/* ===== Помощник: мягкое открытие, чат, быстрые кнопки ===== */
#voiceBtn{ -webkit-tap-highlight-color:transparent; outline:none; transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .3s ease, box-shadow .25s ease; }
#voiceBtn:active{ transform:scale(.9); }
body.voice-open #voiceBtn{ opacity:0; transform:scale(.6); pointer-events:none; }
.voice-overlay{ display:block !important; opacity:0; visibility:hidden; background:rgba(10,12,20,.28); transition:opacity .35s ease, visibility 0s linear .35s; }
.voice-overlay.open{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.voice-panel{ transition:transform .42s cubic-bezier(.22,.8,.2,1), opacity .3s ease; opacity:0; }
.voice-panel.open{ opacity:1; }
.voice-chips{ display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:8px 14px 4px; scrollbar-width:none; }
.voice-chips::-webkit-scrollbar{ display:none; }
.vchip{ flex:0 0 auto; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:18px; padding:8px 13px; font-size:13px; cursor:pointer; white-space:nowrap; font-family:inherit; }
.vchip:active{ background:var(--fill,#eef0f2); }
.voice-input{ display:flex; gap:8px; align-items:center; padding:8px 14px calc(12px + env(safe-area-inset-bottom,0px)); }
.voice-input input{ flex:1; min-width:0; border:1px solid var(--line); background:var(--fill,#f3f4f6); border-radius:20px; padding:11px 15px; font-size:16px; font-family:inherit; outline:none; }
.voice-input input:focus{ border-color:var(--accent); background:#fff; }
.vi-btn{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:none; background:var(--fill,#eef0f2); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.vi-btn.send{ background:var(--accent); color:#fff; }
.vi-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#voiceBtn.listening ~ .voice-panel #voiceMic, body.voice-open #voiceBtn.listening{ color:#ff3b30; }

/* ===== Лист ожидания: ровная строка ===== */
.wl-row{ flex-direction:column; align-items:stretch; gap:8px; cursor:default; padding:10px 10px; border-bottom:1px solid var(--line); border-radius:0; }
.wl-name{ font-weight:700; font-size:14px; }
.wl-sub{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; word-break:break-word; }
.wl-star{ color:#e0a100; }
.wl-actions{ display:flex; gap:8px; align-items:center; }
.wl-go{ flex:1; min-height:38px; }
.wl-icon{ flex:0 0 38px; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.wl-icon.on{ color:#e0a100; border-color:#e0a100; background:rgba(224,161,0,.1); }

/* ===== Телефон: карточка внизу, меню действий, «⋯» ===== */
.hdr-tucked{ display:none !important; }
.tm-back{ position:fixed; inset:0; background:rgba(10,12,20,.35); z-index:8000; opacity:0; transition:opacity .25s ease; }
.tm-back.show{ opacity:1; }
.tm-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:8001; background:var(--panel,#fff); border-radius:20px 20px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 30px rgba(0,0,0,.2); transform:translateY(105%); transition:transform .34s cubic-bezier(.22,.8,.2,1); max-height:85dvh; overflow-y:auto; }
.tm-sheet.show{ transform:translateY(0); }
.tm-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; } .tm-head b{ font-size:17px; } .tm-head span{ color:var(--ink-soft); font-size:14px; }
.tm-label{ font-size:12.5px; color:var(--ink-soft); margin:12px 0 6px; }
.tm-row{ display:flex; gap:8px; margin-bottom:2px; } .tm-row .tm-btn{ flex:1; }
.tm-status{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tm-btn{ min-height:46px; border-radius:12px; border:1px solid var(--line); background:var(--fill,#f3f4f6); color:var(--ink); font-size:15px; font-family:inherit; cursor:pointer; padding:8px 12px; }
.tm-btn.cur{ background:var(--accent); color:#fff; border-color:var(--accent); }
.tm-wide{ display:block; width:100%; margin-bottom:8px; text-align:left; }
.tm-cancel{ display:block; width:100%; margin-top:12px; background:transparent; color:var(--ink-soft); }
#hoverPreview.touch-card{ left:68px !important; right:8px !important; top:auto !important; bottom:calc(8px + env(safe-area-inset-bottom,0px)) !important; width:auto; max-width:none; max-height:55dvh; overflow-y:auto; padding:14px 16px; font-size:14.5px; line-height:1.5; border-radius:18px; pointer-events:auto; }
#hoverPreview.touch-card b{ font-size:17px; margin:0; }
.tc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.tc-st{ font-size:13px; opacity:.85; white-space:nowrap; }
.tc-time{ opacity:.85; margin-bottom:6px; }
.tc-svc{ margin-top:6px; }
.tc-note{ margin-top:6px; padding:7px 10px; background:rgba(255,255,255,.1); border-radius:10px; font-size:13.5px; }
.tc-hint{ margin-top:10px; font-size:12px; opacity:.55; }
body.is-touch .resize-handle{ display:none !important; }
body.is-touch #sideNav{ height:100vh; height:100dvh; overflow:hidden; touch-action:none; overscroll-behavior:none; }
body.is-touch .side-item .side-badge{ position:absolute; top:3px; right:2px; margin:0; padding:1px 5px; font-size:10px; }
body.is-touch .side-logout{ margin-top:0; margin-bottom:4px; }
body.is-touch #hdrActions{ justify-content:flex-end; }

@media (max-width:640px){
  .voice-panel{ top:auto; right:0; left:0; bottom:0; width:auto; max-width:none; height:min(80dvh,620px); border-left:none; border-radius:22px 22px 0 0; transform:translateY(105%); box-shadow:0 -12px 34px rgba(0,0,0,.22); }
  .voice-panel.open{ transform:translateY(0); }
  .wa-row{ flex-wrap:wrap; row-gap:8px; }
  .wa-row select{ flex:0 0 92px; width:92px !important; }
  .wa-row input{ flex:1 1 0; min-width:0; }
  .wa-row #fWhatsapp{ flex:1 1 calc(100% - 100px) !important; }
  .wa-row .icon-btn, .wa-row a{ margin-right:6px; }
}

/* Левая панель на телефоне: тонкая черта раскрывает Пайплайн и ЛТВ */
.side-line{ width:44px; height:22px; background:none; border:none; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.side-line span{ display:block; width:26px; height:3px; border-radius:2px; background:#3a4048; }
.side-line[aria-expanded="true"] span{ background:#7d8590; }
.side-group{ display:none; flex-direction:column; align-items:center; gap:6px; }
.side-group.open{ display:flex; }
body.is-touch .side-mode{ margin:auto 0 0; }
body.is-touch .side-line{ margin-top:auto; }
body.is-touch .side-logout{ margin-top:auto !important; margin-bottom:4px; }

/* График кабинета: ровные поля времени */
.sh-times{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sh-times input{ flex:0 0 86px; min-width:0; width:86px; text-align:center; padding:11px 2px !important; font-size:17px; font-variant-numeric:tabular-nums; font-family:inherit; }
.sh-times .sh-dash{ color:var(--ink-soft); }
.sh-times .btn{ flex:0 0 auto; white-space:nowrap; }
.bb-time{ text-align:center; font-variant-numeric:tabular-nums; }
.wl-icon.holding{ background:rgba(255,59,48,.18); border-color:#ff3b30; color:#ff3b30; transition:background .8s linear; }

/* Огонёк (дорогие визиты): чёрная двойная рамка — такого цвета в календаре нет */
.apptblock.price-tier-1{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #111 !important; }
.apptblock.price-tier-2{ box-shadow:0 0 0 2px #fff, 0 0 0 4.5px #111 !important; }
.apptblock.price-tier-3{ box-shadow:0 0 0 2px #fff, 0 0 0 6px #111, 0 3px 12px rgba(0,0,0,.35) !important; }
.price-fire-badge{ color:#ff6a00 !important; }

#syncWarn{ position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 8px); transform:translateX(-50%); z-index:9500; background:#c73f3f; color:#fff; padding:9px 14px; border-radius:12px; font-size:13.5px; font-weight:600; max-width:92vw; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.3); }

/* ===== Заставка после входа ===== */
#welcomeOv{position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;background:#04060f;transition:opacity .52s ease}
#welcomeOv.wl-out{opacity:0;pointer-events:none}
#welcomeOv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}