/* Наведение (:hover) - только там, где есть мышь: каждое такое правило обернуто в @media (hover: hover) (02.11.2026,
   автор задачи Юрий @utaliiev: «в режиме распознавания на телефоне отображается черный прямоугольник»). На телефоне
   касание оставляет элемент «наведенным» до следующего нажатия в другом месте, и кнопка «Крупнее» панели сверки
   залипала: правило .btn.ghost:hover задает фон --surface2 (в темной теме почти черный) и перебивает светлый фон
   кнопок панели (.qv-bar .btn), поэтому кнопка выглядела черным прямоугольником с еле видимым значком. */
/* Телефон - вертикальная мобильная версия (01.11.2026, автор задачи Юрий @utaliiev: «при открытии построителя с
   мобильного телефона всегда открывать мобильную версию»; 02.11.2026 он же: «на планшете мобильный вид не нужен, если
   телефон боком все равно открывай вертикальную мобильную версию»). Раскладку включают медиазапросы по ширине окна, но
   окно бывает шире экрана: телефон лежа, крупное мини-приложение, встроенные браузеры, включенная в браузере «Версия
   для ПК» (там браузер задает окну свою ширину и нашу не слушает). Поэтому у каждого телефонного медиазапроса, кроме
   ширины окна, есть еще два условия - сенсорный экран и узкая сторона экрана устройства: до 540 px, а у правил для
   узких экранов - до их собственной ширины. У самых больших телефонов узкая сторона 480 px, у планшетов - от 600 px,
   поэтому планшеты и компьютеры под эти условия не попадают, у них все по-прежнему. Окно «Новое помещение» в две
   колонки (min-width: 900px ниже) на телефоне не включается - у него добавлено условие min-device-width. В мини-
   приложении Telegram экран телефона вдобавок держится вертикальным при повороте (tg.js), а скрипт в начале
   index.html только помечает телефон (window.SferaPhone, класс phone у страницы). */
:root {
  color-scheme: light; /* светлая тема: системные списки светлые */
  /* умолчание с 22.10.2026 - серая палитра «Сталь» (docs/ПРЕДЛОЖЕНИЕ-серо-синяя-палитра.md): нейтрально-серый фон и шапки карточек,
     акцент - фирменный синий, на треть разбавленный серым (тот же тон, насыщенность 45 % вместо 90 %); логотип фирменный (brand.js).
     Прежняя голубая палитра - тема brand ниже; «Лазер» (laser.html) берет эти же переменные и своей темы не имеет */
  --accent: #4174aa; --accent-hot: #355f8c; --accent-soft: #4174aa14; --accent-line: #4174aa66; --accent-top: #5c8dc1; --accent-glow: rgba(65,116,170,.3); --orange: #e0742a;
  --bg: #e2e5e9; --surface: #ffffff; --surface2: #f4f5f7; --line: #dfe2e7; --line2: #c2c8d1;
  --text: #171a20; --muted: #5e6674; --dim: #8a909b; --ok: #12965e; --warn: #b7791f; --err: #d23b3b; --info: #4174aa;
  --paper: #ffffff; --grid: #eff1f4; --grid2: #e0e4e9; --poly-fill: rgba(65,116,170,.08);
  /* 05.11.2026, автор задачи Юрий @utaliiev: «правки по дизайну не применились - отмени их и верни последний вариант дизайна».
     Оформление версии 388 (круглее углы 10/14/16, «приподнятые» кнопки на светлой поверхности, шапка цвета страницы, значки в
     сообщениях, плоская нижняя панель телефона) отменено целиком - здесь и в mbar.css, tg.js все как было до него */
  --r-sm: 8px; --r-md: 12px; --r-lg: 14px; --shadow: 0 6px 24px rgba(20,22,29,.08);
  --font: 'Segoe UI',system-ui,-apple-system,Roboto,'Noto Sans',sans-serif; --mono: 'Cascadia Mono',Consolas,ui-monospace,monospace;
  --panel-w: 430px;
  --vh100: 100vh; /* высота окна для меню и диалогов: ниже dvh, где есть; в Telegram - высота из события viewport_changed (tg.js) */
  /* блоки (03.10.2026, «выделение слабое, все сливается», затем «сделай более выраженным»): фон страницы заметно темнее
     карточек, у карточки рамка и тень, шапка - серая полоса с линией снизу и значком на серо-синей плашке (в теме brand - голубая и синяя), подразделы внутри
     отделены линией --sep; --field - фон полей ввода, --accent-ink - синий для ТЕКСТА (в темной теме светлее) */
  --card-line: #c6cdd6; --card-shadow: 0 1px 2px rgba(15,30,60,.08), 0 4px 14px rgba(15,30,60,.07);
  --head-bg: #eaedf1; --head-line: #ccd2db; --head-hover: #e0e4ea; --ico-bg: var(--accent); --ico-fg: #fff;
  --sep: #d7dce3; --field: #ffffff; --accent-ink: var(--accent);
  /* подписи на заливках (08.11.2026, «белое на белом» в темной SKAI, где акцент светлый): --accent-fg - на акценте, --on-warn,
     --on-err, --on-ok - на желтом, красном, зеленом. В темных темах эти заливки светлые, поэтому подписи на них темные */
  --accent-fg: #fff; --on-warn: #fff; --on-err: #fff; --on-ok: #fff;
  /* текст сообщений на светлой подложке своего цвета: зеленый, желтый и красный темнее заливок (08.11.2026, «Замер сходится» было 2,8-3:1) */
  --ok-ink: #0A6B42; --warn-ink: #7A4F00; --err-ink: #B42318;
}
/* темная тема (Меню -> Темная тема или Настройки -> Тема): страница почти черная, карточки светлее, шапки - синеватая полоса,
   поля ввода темнее карточки, синий текст светлее фирменного, чтобы читался на темном */
:root[data-theme="dark"] {
  color-scheme: dark; /* выпадающие списки, скроллбары и прочие системные элементы - тёмные, иначе белый текст ложится на белый фон списка */
  --bg: #0a0d12; --surface: #171c25; --surface2: #1f2530; --line: #2a313d; --line2: #3c4657;
  --text: #edeff3; --muted: #a3abb8; --dim: #7f8796; --ok: #3ecf8e; --warn: #ffc24b; --err: #ff6b6b; --info: #5aa7ff;
  --paper: #12161d; --grid: #1a1f28; --grid2: #272d38; --poly-fill: rgba(90,167,255,.14); --shadow: 0 8px 28px rgba(0,0,0,.55);
  --accent: #0B6BD3; --accent-hot: #0959B0; --accent-top: #2a8cf0; --accent-glow: rgba(11,107,211,.3); /* темная тема осталась с фирменным синим, умолчание :root теперь серое */
  --accent-soft: #5aa7ff1f; --accent-line: #5aa7ff80; --accent-ink: #6cb0ff;
  --card-line: #2c3546; --card-shadow: 0 1px 2px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35);
  --head-bg: #1c2637; --head-line: #2e3d54; --head-hover: #233149; --ico-bg: #1f6fd8; --ico-fg: #fff;
  --sep: #2a3342; --field: #0f141b;
  --on-warn: #1C1C1A; --on-err: #1C1C1A; --on-ok: #1C1C1A; /* желтый, красный и зеленый здесь светлые - подпись темная */
  --ok-ink: var(--ok); --warn-ink: var(--warn); --err-ink: var(--err); /* на темном фоне светлые цвета читаются как есть */
}
/* фирменная светлая тема (Настройки -> Тема -> Светлая (фирменная)): голубой фон и фирменный синий #0B6BD3 во всех элементах -
   так построитель выглядел до 22.10.2026, когда умолчанием (:root выше) стала серая палитра «Сталь»
   (docs/ПРЕДЛОЖЕНИЕ-серо-синяя-палитра.md). --accent-ink и --ico-bg берут var(--accent) и меняются сами */
:root[data-theme="brand"] {
  --accent: #0B6BD3; --accent-hot: #0959B0; --accent-soft: #0B6BD314; --accent-line: #0B6BD366; --accent-top: #2a8cf0; --accent-glow: rgba(11,107,211,.3);
  --bg: #dde4ee; --surface2: #f6f8fb; --line: #e1e6ee; --line2: #c0cad8;
  --text: #14161d; --muted: #5d6474; --dim: #8a8f9f; --info: #0B6BD3;
  --grid: #eef1f6; --grid2: #dfe4ec; --poly-fill: rgba(11,107,211,.08);
  --card-line: #c3cedd; --head-bg: #e6effa; --head-line: #c6d7ee; --head-hover: #dae8f8; --sep: #d5dde8;
}
@supports (height: 100dvh) { :root { --vh100: 100dvh; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-ink); }
svg.i { width: 18px; height: 18px; flex: none; }
[hidden] { display: none !important; }

/* ───── header ───── */
/* шапка ниже на 30 %: логотип 28 px, кнопки и поля компактнее (01.10.2026) */
.top #logo svg { height: 28px; width: auto; display: block; }
.top #logo svg.logo-mark { display: none; } /* знак без надписи - только на телефоне (ниже, max-width: 520px) */
.top .btn { padding-top: 4px; padding-bottom: 4px; }
.top .project-name { padding-top: 3px; padding-bottom: 3px; }
.top .tab { padding-top: 3px; padding-bottom: 3px; }
.top { display: flex; align-items: center; gap: 14px; padding: 4px 16px; background: var(--surface); border-bottom: 3px solid var(--accent); position: sticky; top: 0; z-index: 20; }
.logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.logo svg { height: 40px; width: auto; display: block; }
.project { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.objnum { flex: none; border: 1px dashed var(--accent-line); background: transparent; color: var(--accent-ink); border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; line-height: 1.2; }
@media (hover: hover) { .objnum:hover { background: var(--accent-soft); } }
.objnum:disabled { opacity: .7; cursor: progress; }
.objnum.in-db { border-style: solid; background: var(--accent-soft); cursor: default; }
.objnum.in-db.saving { border-color: var(--warn); color: var(--warn); }
.objnum.in-db.error { border-color: var(--err); color: var(--err); cursor: pointer; }
.project-name { border: 1px solid transparent; background: transparent; border-radius: var(--r-sm); padding: 6px 8px; font-weight: 700; min-width: 120px; max-width: 260px; width: 100%; }
@media (hover: hover) { .project-name:hover, .project-name:focus { border-color: var(--line2); background: var(--surface2); outline: none; } }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 1px solid var(--line); background: var(--surface2); border-radius: 999px; padding: 5px 12px; white-space: nowrap; cursor: pointer; color: var(--muted); font-weight: 600; }
.tab.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.tab.add { padding: 5px 10px; font-weight: 800; }
/* номер потолка (r.no) перед названием помещения во вкладке */
.tab .tab-no { display: inline-block; min-width: 1.5em; margin: 0 6px 0 -5px; padding: 0 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 800; line-height: 1.45; text-align: center; font-variant-numeric: tabular-nums; }
.tab.active .tab-no { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
#diagTable input.dname { width: 64px; text-transform: uppercase; font-weight: 700; }
#diagTable tr.dnew td { background: var(--surface2); } /* пустая строка для новой диагонали */
#diagSides .dopen { border: 0; background: none; padding: 0 4px 0 0; cursor: pointer; color: var(--accent-ink); font-size: 12px; width: 16px; }
#diagSides .dopen:disabled { color: var(--dim); cursor: default; }
#diagSides tr.dsub td { background: var(--surface2); font-size: 13px; }
#diagSides tr.dsub td.n { padding-left: 22px; color: var(--muted); } /* диагонали из угла раскрытой стороны */
.tabs.compact { overflow: visible; }
select option, select optgroup { background: var(--surface); color: var(--text); } /* пункты выпадающих списков: цвет и фон из темы - у select цвет текста свой, а фон списка рисует браузер */
.tab.tab-sel { max-width: 220px; min-width: 0; padding-right: 26px; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center; border-color: var(--accent-line); color: var(--text); appearance: none; -webkit-appearance: none; text-overflow: ellipsis; } /* помещения списком, когда вкладки не помещаются */
.actions { display: flex; align-items: center; gap: 4px; flex: none; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--btn-bg, var(--accent)); background: var(--btn-bg, var(--accent)); color: var(--accent-fg, #fff); border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; font-weight: 700; line-height: 1; white-space: nowrap; transition: background .15s, border-color .15s; }
@media (hover: hover) { .btn:hover { background: var(--btn-bg-hot, var(--accent-hot)); border-color: var(--btn-bg-hot, var(--accent-hot)); } }
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: transparent; color: var(--text); border-color: transparent; font-weight: 600; }
@media (hover: hover) { .btn.ghost:hover { background: var(--surface2); border-color: var(--line); } }
.btn.small { padding: 5px 9px; font-size: 13px; }
.btn.icon { padding: 7px; }
@media (hover: hover) { .btn.danger:hover { color: var(--err); } }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 6px; min-width: 240px; max-height: calc(100vh - 70px); overflow-y: auto; z-index: 30; display: flex; flex-direction: column; }
.menu-list button, .menu-list .menu-file { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; color: var(--text); }
@media (hover: hover) { .menu-list button:hover, .menu-list .menu-file:hover { background: var(--surface2); } }
.menu-list svg.i { color: var(--accent-ink); }
.menu-cap { display: flex; align-items: center; gap: 6px; padding: 8px 10px 2px; font-size: 11px; color: var(--accent-ink); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } /* заголовок группы в меню шапки (PDF, Экспорт) */
.menu-list .menu-cap:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.menu-sep { border-top: 1px solid var(--line); margin: 6px 0 4px; }
/* шапка 19.10.2026: значок истории изменений у номера объекта, значок пользователя с инициалами (блок пользователя - в его меню) */
.top .btn.hist-btn { padding: 3px; color: var(--accent-ink); }
.actions .btn.user-btn { position: relative; padding: 1px; border-radius: 999px; }
.actions .btn span.ava { display: inline-flex; } /* у кнопок шапки подписи-span прячутся на узком экране, кружок - нет */
.ava { align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line2); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.ava.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
.ava svg.i { width: 15px; height: 15px; }
.user-btn.offline::after { content: ''; position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); border: 2px solid var(--surface); } /* нет связи с сервером */
.user-menu { min-width: 260px; }
.user-menu .menu-user { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

/* ───── layout ───── */
.app { display: grid; grid-template-columns: var(--panel-w) minmax(0, 1fr); gap: 12px; padding: 12px; height: calc(100vh - 59px); min-height: 520px; }
/* overflow-x: hidden - панель не уезжает вбок, даже если что-то внутри окажется шире карточки (03.10.2026: таблица комплектации) */
.panel { overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; scrollbar-width: thin; }
.card { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: var(--card-shadow); }
/* шапка карточки - полоса на всю ширину (отрицательные поля перекрывают padding карточки) с разделителем под ней;
   у свернутой карточки шапка и есть вся карточка */
details.card > summary { cursor: pointer; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; list-style: none; user-select: none; margin: -12px -14px; padding: 9px 12px; min-height: 48px; background: var(--head-bg); border-radius: calc(var(--r-lg) - 1px); transition: background .15s; }
@media (hover: hover) { details.card > summary:hover { background: var(--head-hover); } }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: '›'; margin-left: auto; font-size: 20px; color: var(--dim); transform: rotate(90deg); transition: transform .15s; }
details.card[open] > summary::after { transform: rotate(-90deg); }
details.card[open] > summary { margin-bottom: 12px; border-bottom: 1px solid var(--head-line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.card > summary svg.i, .room-head > svg.room-ico { color: var(--ico-fg); width: 28px; height: 28px; padding: 5px; border-radius: 8px; background: var(--ico-bg); }
details.card > summary .chip:not(.active) { background: var(--surface); }
.badge { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-ink); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.badge:empty { display: none; }
.room-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* карточка помещения: имя с кнопками - шапка, под ней размеры, диагонали и сдвиг стены */
.room-card > .room-head { margin: -12px -14px 12px; padding: 9px 8px 9px 12px; min-height: 48px; background: var(--head-bg); border-bottom: 1px solid var(--head-line); border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
@media (hover: hover) { .room-card .room-head .btn.ghost:hover { background: var(--surface); border-color: var(--card-line); } }
.room-name { flex: 1; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px; background: var(--surface2); font-weight: 700; min-width: 0; }
.room-card .room-name { background: var(--field); border-color: var(--line2); padding: 5px 10px; font-size: 15px; }
.room-no { flex: none; box-sizing: border-box; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 8px; background: var(--ico-bg); color: var(--ico-fg); font-weight: 800; font-size: 13px; line-height: 28px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: help; } /* код изделия 123/2 на плашке значка карточки */
.room-btns { display: flex; align-items: center; gap: 1px; } /* кнопки и знак «?» - одним рядом по центру строки (06.11.2026) */
.seg { display: flex; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-btn { flex: 1; border: 0; background: transparent; padding: 8px 6px; border-radius: 8px; cursor: pointer; font-weight: 700; color: var(--muted); white-space: nowrap; }
.seg-btn.active { background: var(--accent); color: var(--accent-fg, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.seg.mini .seg-btn { padding: 4px 10px; font-size: 13px; }
.lbl { color: var(--muted); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--accent); }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; margin-top: 8px; }
.hint { color: var(--dim); font-size: 12px; line-height: 1.35; margin-top: 6px; }
/* подсказка «?»: пояснительный текст показывается при наведении или нажатии, место в панели не занимает */
.faq { width: 20px; height: 20px; padding: 0; flex: none; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: help; vertical-align: middle; }
@media (hover: hover) { .faq:hover, .faq.open { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); } }
details.card > summary .faq { margin-left: 4px; }
.set-head { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.faq-tip { --tip-py: 8px; --tip-px: 10px; position: fixed; inset: auto; margin: 0; z-index: 70; max-width: min(300px, calc(100vw - 16px)); background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: var(--tip-py) var(--tip-px); font-size: 12px; line-height: 1.35; max-height: calc(100vh - 16px); overflow-y: auto; white-space: pre-line; } /* pre-line: переносы строк в длинных подсказках (диктовка) */
/* длинная подсказка (app.js TIP_WIDE, от 500 знаков) - окно шире и шрифт крупнее; с разметкой (app.js faqTipHtml) - разделы,
   пункты и выделения, сверху строка разделов, которая остается на месте при прокрутке (08.11.2026, владелец: «очень сложно
   читать сделай с выделениями и разбивкой по пунктам плюс для такого текста увеличь размер окна») */
.faq-tip.faq-wide { --tip-py: 10px; --tip-px: 14px; max-width: min(680px, calc(100vw - 16px)); font-size: 13px; line-height: 1.45; color: var(--text); }
.faq-tip.faq-rich { white-space: normal; color: var(--text); }
.faq-tip h4 { margin: 12px 0 4px; font-size: 13px; font-weight: 800; color: var(--accent-ink); }
.faq-tip > h4:first-child, .faq-tip > .tip-toc + h4 { margin-top: 2px; }
.faq-tip p { margin: 0 0 4px; }
.faq-tip ul { margin: 0 0 4px; padding-left: 18px; }
.faq-tip li { margin: 3px 0; }
.faq-tip li::marker { color: var(--accent-ink); }
.faq-tip b { font-weight: 700; }
.faq-tip .tip-toc { position: sticky; top: calc(-1 * var(--tip-py)); z-index: 1; display: flex; flex-wrap: wrap; gap: 3px; margin: calc(-1 * var(--tip-py)) calc(-1 * var(--tip-px)) 8px; padding: var(--tip-py) var(--tip-px) 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.faq-tip .tip-toc button { font: inherit; font-size: 11.5px; line-height: 1.3; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; }
@media (hover: hover) { .faq-tip .tip-toc button:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface2); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-weight: 600; color: var(--muted); }
.chip.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
/* готовые формы вкладки «Фигура»: значок формы крупнее, подпись в одну строку */
.chips.shapes .chip { padding: 5px 10px 5px 8px; font-size: 12.5px; white-space: nowrap; }
.chips.shapes svg.i { width: 22px; height: 22px; }
.chips.shapes .chip.active svg.i { color: var(--accent-ink); }
#quickShapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } /* окно быстрого построения: 9 форм в две строки */
#quickShapes .chip[data-shape="cut"] { grid-column: span 2; } /* длинное название - на две клетки, формы встают 5 + 5 */
#quickShapes .chip { min-width: 0; flex-direction: column; justify-content: center; gap: 2px; border-radius: 12px; padding: 6px 3px; white-space: normal; text-align: center; line-height: 1.15; font-size: clamp(10px, 2.7vw, 12px); }
#modeShape .hint { margin: 0; }
/* быстрый ввод угла: 45° / 90° / 135° / 270° в выбранную строку таблицы углов */
.deg-row { gap: 6px; }
.deg-row .lbl b { color: var(--accent-ink); }
.chip.deg { padding: 5px 10px; font-variant-numeric: tabular-nums; }
.chip.deg.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
#anglesTable tbody tr { cursor: pointer; }
#anglesTable tbody tr.sel td { background: var(--accent-soft); }
#anglesTable tbody tr.sel td.n { color: var(--accent-ink); }
.fields { display: flex; flex-direction: column; gap: 8px; }
.fields.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.fields label.span2 { grid-column: 1 / -1; flex-direction: row; align-items: center; color: var(--text); font-size: 13px; }
.fields label.span2col { grid-column: 1 / -1; }
.fields label.need select { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(183,121,31,.22); } /* заказ дилера без фактуры */
.fields label .need-hint { color: var(--warn); font-weight: 600; }
.badge.need { background: rgba(183,121,31,.14); border-color: var(--warn); color: var(--warn); } /* --warn читается и в светлой, и в темной теме */
.fields .field-note { font-size: 11px; font-weight: 600; color: var(--accent-ink); }
input:disabled, select.sel:disabled { background: var(--surface2); color: var(--dim); cursor: not-allowed; }
input[type=number], input[type=text], input[type=tel], input[type=url], input[type=date], input[type=password], select.sel, textarea { border: 1px solid var(--line2); background: var(--field); color: var(--text); border-radius: var(--r-sm); padding: 7px 9px; min-width: 0; width: 100%; }
input:focus, select.sel:focus, textarea:focus { outline: 2px solid var(--accent-line); outline-offset: 0; border-color: var(--accent); }
input.bad { border-color: var(--err); background: rgba(210,59,59,.06); }
input.diff { border-color: var(--warn); }
textarea { resize: vertical; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper input { width: 58px; text-align: center; padding: 5px 4px; }
.tbl { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-size: 11px; color: var(--accent-ink); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 4px; border-bottom: 2px solid var(--accent-soft); }
.tbl td { padding: 3px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl td.n { color: var(--muted); font-weight: 700; white-space: nowrap; }
.tbl td.calc { color: var(--dim); font-size: 12px; white-space: nowrap; }
.tbl td.calc[colspan] { white-space: normal; }
.tbl td.calc.diff { color: var(--warn); font-weight: 700; }
.tbl td.calc.bad { color: var(--err); font-weight: 700; }
.tbl input[type=number] { padding: 5px 7px; }
.tbl select.sel { padding: 5px 4px; width: auto; } /* «От»/«До» в диагоналях: при width:100% колонка сжимается до стрелки и номер угла не виден */
.tbl .x { border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 6px; }
@media (hover: hover) { .tbl .x:hover { color: var(--err); background: var(--surface2); } }
.tbl .gw-tg { font-size: 13px; color: var(--accent-ink); }
@media (hover: hover) { .tbl .gw-tg:hover { color: var(--accent-ink); } }
/* подраздел внутри карточки («Диагонали», «Сдвиг стены», группы «Раскроя»): линия сверху и синяя метка у заголовка.
   Сам заголовок - тоже цветом (04.11.2026, автор задачи Юрий @utaliiev по снимку мини-приложения: «выдели цветом
   заголовки разделов, такие как „из остатка полотна", „шов: положение" и т.д., чтобы они не сливались, и внутри раздела
   сделай разделение линиями, чтобы информация не сливалась»): до этого заголовок отличался от строк с данными только
   жирностью. Цвет берется из переменной темы (--accent-ink в темной теме светлее), поэтому одинаково читается во всех
   темах, в телефонной версии (mbar.css) и в «Лазере» - он берет этот же файл. */
.sub-head { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sep); font-weight: 700; font-size: 14.5px; color: var(--accent-ink); }
.sub-head > span:first-child::before { content: ''; display: inline-block; width: 4px; height: 16px; margin-right: 8px; border-radius: 2px; background: var(--accent-ink); vertical-align: -2px; }
.seam-title { font-size: 14.5px; font-weight: 700; color: var(--accent-ink); }
.seam-title::before { content: ''; flex: none; width: 4px; height: 16px; margin-right: 2px; border-radius: 2px; background: var(--accent-ink); }
/* в «Раскрое» эти блоки лежат внутри подразделов (index.html .cmd-sec-b), поэтому своей линии сверху и отступа под нее
   им больше не нужно - раздел отделяет цветной заголовок (04.11.2026); остался только зазор между строками */
#secLayout .seam-set { gap: 8px; }
/* блоки внутри подраздела разделены пунктиром: «Положение шва» и «Настройка шва» в «Шве», строка с кнопками и список
   вырезов в «Вырезах и разрезах» (отступ между блоками дает gap самого .seam-set, строкам списка - своя margin) */
.seam-set > *:not([hidden]) + *:not(:empty) { padding-top: 8px; border-top: 1px dashed var(--sep); }
.seam-set .seam-row.cut-row + .seam-row.cut-row { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--sep); }
/* числа замеров в полях панели - полужирные: их ищут глазами в первую очередь */
.panel input[type=number] { font-weight: 600; }
.panel input::placeholder { font-weight: 400; }
.compare { margin-top: 8px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.compare b { color: var(--text); }
.compare .ok { color: var(--ok); } .compare .warn { color: var(--warn); } .compare .bad { color: var(--err); }
.fix-add { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fix-add select, .fix-add input { width: 100%; }
/* галочка - своего размера, не во всю колонку: из-за width 100% подпись («чёрная решётка», «чёрный спот», «чёрный профиль»,
   «подсветка гардины», «3-рядный карниз», «угловые 30x30») вставала за правым краем ячейки - на телефоне уходила за край
   карточки и была не видна (01.11.2026). min-width: 0 - чтобы длинная подпись переносилась, а не раздвигала колонки. */
.fix-add > * { min-width: 0; }
.fix-add input[type=checkbox] { width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.fix-add .btn { justify-content: center; white-space: normal; text-align: center; } /* подпись кнопки («Поставить на чертеже», «Ставим: трек встраиваемый…») переносится, а не раздвигает карточку шире экрана */
/* объекты: выделенные строки, номер — переключатель выделения, вершины линии — с отступом */
.tbl tr.sel td { background: var(--accent-soft); }
.tbl td.selc { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
@media (hover: hover) { .tbl td.selc:hover { color: var(--accent-ink); } }
.tbl tr.line-pt td.n { padding-left: 14px; font-weight: 600; color: var(--dim); }
.tbl tr.line-head td { border-bottom: 0; }
/* панель команд над выделением */
.fix-cmd { margin-top: 10px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.fix-cmd-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.fix-cmd-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fix-cmd-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fix-cmd input[type=number] { width: 72px; padding: 5px 7px; }
.fix-cmd .cmd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fix-cmd .cmd-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.fix-cmd .cmd-grid input[type=number] { width: 100%; }
.fix-cmd .cmd-grid .faq { cursor: help; }
/* ломаная линия: подпись-пояснение и кнопка «+» для деления отрезка */
.fix-cmd .cmd-note { font-size: 12px; color: var(--muted); font-weight: 600; }
.fix-cmd .cmd-grid .cg-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fix-cmd .cg-add { border: 0; background: var(--accent); color: var(--accent-fg, #fff); border-radius: 6px; width: 20px; height: 20px; font-weight: 800; font-size: 13px; line-height: 1; cursor: pointer; flex: none; }
@media (hover: hover) { .fix-cmd .cg-add:hover { background: var(--accent-hot); } }
.log-add { display: grid; grid-template-columns: 1fr; gap: 6px; }
.log-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.log-item { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: 6px 10px; font-size: 13px; }
.log-item .meta { color: var(--dim); font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }
.log-item .meta .x { border: 0; background: none; color: var(--dim); cursor: pointer; }
.log-item .txt { white-space: pre-wrap; margin-top: 2px; }
.panel-foot { color: var(--muted); font-size: 12px; text-align: center; padding: 6px 0 0; }

/* ───── stage ───── */
.stage { display: flex; flex-direction: column; gap: 7px; min-height: 0; } /* зазоры уже - чертежу больше высоты (03.11.2026) */
/* итоги над чертежом (#results, app.js renderResults; 19.10.2026, владелец: «переработай блок, компактнее, чтобы сам
   подстраивался под экран устройства, современный и стильный»). Было: плашка на каждое число и «Всего» второй строкой -
   синей полосой во всю ширину, на ПК 1366 высота 123 px. Стало: одна карточка .rs - ячейки помещения .rs-room через тонкие
   разделители («Смета» на голубой подложке), синяя ячейка итога объекта .res.obj (подпись, площадь и периметр, сумма) и
   ячейка долга дилера .res.debt; на широком экране все в одну строку высотой 53 px.
   Раскладку решает ширина самого блока (container query res), а не окна: на ПК слева панель 430 px. Шрифт и отступы
   плавно меняются с шириной блока (единицы cqi). Блок 520-1100 px (ноутбук 1366, планшет): ячейки одним потоком, итог
   объекта и долг - тонкой полосой в одну строку (на ПК 1366 высота 52-90 px). Уже 520 px (телефон): ячейки помещения по три
   в строке, пояснение к числу второй строкой, подписи короче («Периметр», «Криволин.», «3 пом.»).
   Разделители: у ячейки линия слева и сверху со сдвигом на 1 px, линии у края карточки срезает overflow. */
.results { container: res / inline-size; }
.results:empty { display: none; }
.rs { display: flex; flex-wrap: wrap; align-items: stretch; overflow: hidden; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.rs-room { flex: 1000 1 auto; display: flex; flex-wrap: wrap; min-width: 0; }
.rs > .res, .rs-room > .res { margin: -1px 0 0 -1px; border-left: 1px solid var(--sep); border-top: 1px solid var(--sep); }
.rs-room > .res { flex: 1 1 auto; }
/* Сводка над чертежом - одной строкой и вдвое ниже (03.11.2026, автор задачи Юрий @utaliiev: «увеличить размер экрана
   чертежа, верхнее поле подчеркнутое красным уменьши в два раза, оптимизируй размер шрифта под новый размер экрана»):
   подпись стоит слева от числа, а не над ним, поэтому полоса занимает около 24 px вместо 50, а освободившуюся высоту
   забирает чертеж (.canvas-wrap тянется). На узком блоке (контейнер до 520 px) ячейки снова в два этажа - там они по
   три в строке; телефонный вид - в mbar.css. */
.res { --px: 12px; min-width: 0; padding: 2px var(--px) 3px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; }
.res .k { font-size: 9px; line-height: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res .v { margin-top: 0; font-size: 15px; line-height: 18px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res small { margin-left: 2px; font-size: .62em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.res .d { margin-left: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.res .d::before { content: '·'; margin-right: 6px; }
.res .k3 { display: none; } /* окончание короткой подписи на телефоне («Криволин.») */
.res.seam { background: rgba(210,59,59,.06); background: color-mix(in srgb, var(--err) 7%, var(--surface)); }
.res.seam .v { color: var(--err); } /* «ЕСТЬ ШОВ» */
.res.money { background: var(--accent-soft); }
.res.money .k, .res.money .v { color: var(--accent-ink); }
.res.money small { color: inherit; opacity: .75; }
.res.obj { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k m" "v m"; align-items: center; color: var(--accent-fg, #fff); border-color: var(--accent); background: var(--accent); background: linear-gradient(135deg, var(--accent-top) 0%, var(--accent) 55%, var(--accent-hot) 100%); }
.res.obj .k { grid-area: k; color: rgba(255,255,255,.82); }
.res.obj .v { grid-area: v; font-size: 13px; font-weight: 600; }
.res.obj .q + .q::before { content: '·'; margin: 0 7px; opacity: .6; }
.res.obj .m { grid-area: m; margin-left: 14px; font-size: 17px; line-height: 20px; font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res.obj small { color: rgba(255,255,255,.78); }
/* фирменная голубая тема: светлый угол градиента (#2a8cf0) лежал под подписью «Всего · N помещения» - 2,8:1 (08.11.2026) */
:root[data-theme="brand"] .res.obj { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hot) 100%); }
:root[data-theme="brand"] .res.obj .k { color: rgba(255,255,255,.95); }
.res.debt { flex: 1 1 auto; }
.res.debt.bad { background: rgba(210,59,59,.07); background: color-mix(in srgb, var(--err) 9%, var(--surface)); }
.res.debt.ok { background: rgba(18,150,94,.06); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.res.debt.bad .k, .res.debt.bad .v { color: var(--err); }
.res.debt.ok .k, .res.debt.ok .v { color: var(--ok); }
/* ячейки-кнопки (role=button: «Смета», «Всего» - вкладка «Смета», долг - акт сверки): шеврон у подписи, подсветка, Tab и Enter */
.res[role="button"] { cursor: pointer; transition: background-color .15s, filter .15s; }
.res[role="button"] .k::after { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 0 1px 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: .8; vertical-align: middle; }
.res[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.res.obj[role="button"]:focus-visible { outline-color: #fff; }
@media (hover: hover) { .res.money[role="button"]:hover { background: rgba(11,107,211,.15); background: color-mix(in srgb, var(--accent) 15%, var(--surface)); } }
@media (hover: hover) { .res.obj[role="button"]:hover { filter: brightness(1.08); } }
@media (hover: hover) { .res.debt.bad[role="button"]:hover { background: rgba(210,59,59,.13); background: color-mix(in srgb, var(--err) 15%, var(--surface)); } }
@media (hover: hover) { .res.debt.ok[role="button"]:hover { background: rgba(18,150,94,.12); background: color-mix(in srgb, var(--ok) 13%, var(--surface)); } }
@media (prefers-reduced-motion: reduce) { .res[role="button"] { transition: none; } }
@supports (width: 1cqi) {
  .res { --px: clamp(9px, 1.05cqi, 16px); }
  .res .k { font-size: clamp(10px, 8.6px + .14cqi, 11px); }
  .res .v { font-size: clamp(15px, 10.6px + .55cqi, 19px); }
  .res.obj .v { font-size: clamp(13px, 10px + .36cqi, 15.5px); }
  .res.obj .m { font-size: clamp(17px, 12.4px + .66cqi, 22px); }
}
/* 520-1100 px (ноутбук 1366, планшет, телефон боком): ячейки помещения и итог объекта одним потоком (у карточки помещения
   display: contents) - итог объекта и долг тонкой полосой в одну строку: в последней строке ячеек, если помещаются, иначе ниже */
/* блок уже 820 px (ноутбук 1366 с открытой панелью): подписи короче - «Периметр», «Криволин.» - и полоса остается
   в одну строку, а не разъезжается на две (03.11.2026) */
@container res (520px < width <= 820px) {
  .res .k2 { display: none; }
  .res .k3 { display: inline; }
}
@container res (520px < width < 1100px) {
  .rs-room { display: contents; }
  .res.obj { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k v m"; align-items: baseline; align-content: center; column-gap: 14px; }
  .res.obj .v, .res.debt .v { margin-top: 0; }
  .res.obj .m { margin-left: 0; line-height: 24px; }
  .res.debt { display: flex; align-items: baseline; align-content: center; flex-wrap: wrap; column-gap: 12px; }
}
/* телефон: ячейки помещения по три в строке, пояснение к числу второй строкой, короткие подписи (.k2 скрыта, .k3 видна) */
@container res (width <= 520px) {
  .res { --px: 9px; padding-top: 4px; padding-bottom: 5px; display: block; } /* узкий блок: подпись снова над числом */
  .res .k { font-size: 10px; line-height: 12px; }
  .res .v { margin-top: 1px; font-size: 15px; line-height: 19px; }
  .rs-room { display: contents; }
  .rs-room > .res { flex: 1 1 30%; }
  .res .k2 { display: none; }
  .res .k3 { display: inline; }
  .res .d { display: block; margin: 0; font-size: 10px; line-height: 12px; overflow: hidden; text-overflow: ellipsis; }
  .res .d::before { content: none; }
  .res.obj, .res.debt { flex: 1 1 60%; } /* седьмая ячейка («Смета» у круга) встает в строку итога, а не одна */
  .res.obj .v { font-size: 13px; }
  .res.obj .m { margin-left: 10px; font-size: 18px; line-height: 22px; }
  .res.debt .d { display: inline; margin-left: 6px; }
  .res.debt .d::before { content: '·'; }
}
@supports not (container-type: inline-size) { /* старые браузеры без container query: телефонная раскладка по ширине окна */
  @media (max-width: 540px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
    .res { padding: 4px 9px 5px; display: block; }
    .res .k { font-size: 10px; line-height: 12px; }
    .res .v { margin-top: 1px; font-size: 15px; line-height: 19px; }
    .rs-room { display: contents; }
    .rs-room > .res { flex: 1 1 30%; }
    .res .k2 { display: none; }
    .res .k3 { display: inline; }
    .res .d { display: block; margin: 0; font-size: 10px; line-height: 12px; overflow: hidden; text-overflow: ellipsis; }
    .res .d::before { content: none; }
    .res.obj, .res.debt { flex: 1 1 60%; }
    .res.obj .v { font-size: 13px; }
    .res.obj .m { margin-left: 10px; font-size: 18px; line-height: 22px; }
    .res.debt .d { display: inline; margin-left: 6px; }
    .res.debt .d::before { content: '·'; }
  }
}
.canvas-wrap { position: relative; flex: 1 1 auto; min-height: 320px; background: var(--paper); border: 1px solid var(--card-line); border-radius: var(--r-lg); overflow: hidden; touch-action: none; box-shadow: var(--card-shadow); }
#draw { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; position: relative; } /* position - над слоем фото эскиза (.draw-photo стоит раньше в разметке) */
/* фото эскиза под чертежом (01.11.2026, app.js photoBgUpdate): картинка в натуральную величину, матрица и обрезка по рамке
   эскиза - из app.js; полупрозрачная, чтобы контур, размеры и буквы углов читались поверх рисунка */
.draw-photo { position: absolute; overflow: hidden; pointer-events: none; }
.draw-photo img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; opacity: .5; user-select: none; }
:root[data-theme="dark"] .draw-photo img { opacity: .38; }
#draw.placing { cursor: crosshair; }
#draw.dragging { cursor: grabbing; }
.toolbar { position: absolute; right: 10px; top: 10px; display: flex; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; box-shadow: var(--shadow); }
.tb { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; font-weight: 800; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
@media (hover: hover) { .tb:hover { background: var(--surface2); color: var(--text); } }
.tb:disabled { opacity: .35; cursor: default; }
.tb.tog.on, .tb.tb-act.on { background: var(--accent-soft); color: var(--accent-ink); }
#draw.ruling { cursor: crosshair; } /* линейка (app.js: ruler) */
/* замок над чертежом: включён — чертёж заблокирован, углы и объекты не перетаскиваются */
.tb.tb-lock.on { background: var(--warn); color: var(--on-warn, #fff); }
@media (hover: hover) { .tb.tb-lock.on:hover { background: var(--warn); color: var(--on-warn, #fff); opacity: .9; } }
.canvas-wrap:has(#draw.locked) { border-color: var(--warn); }
/* кнопка вызова подсказки в углу чертежа (02.11.2026, автор задачи Юрий @utaliiev: «добавь в угол окна чертежа кнопку с
   вызовом подсказок»): текст - под текущий режим (app.js drawTipText), окно подсказки - общее для всех «?» (.faq-tip).
   На компьютере не нужна: там подсказки помещаются над чертежом, поэтому показывается только на телефоне (mbar.css) */
.draw-tip { display: none; position: absolute; left: 10px; top: 10px; z-index: 3; width: 28px; height: 28px; font-size: 15px; background: var(--surface); border-color: var(--line2); box-shadow: var(--card-shadow); }
.lock-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; background: var(--warn); color: var(--on-warn, #fff); padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: .95; transition: opacity .18s ease; }
/* плашка блокировки: замок и одна строка, на время масштабирования чертежа уходит (03.11.2026, автор задачи Юрий
   @utaliiev: «сделай окно блокировки меньше ... и динамичным, чтобы оно исчезало во время масштабирования поля
   чертежа, а после того как масштабирование прекращается оно появлялось снова»; возвращает app.js lockHintFade) */
.lock-hint svg.i { width: 13px; height: 13px; flex: none; }
.lock-hint.fade { opacity: 0; }
/* корзина быстрого удаления (08.11.2026, автор задачи Юрий @utaliiev: «после двухсекундного зажатия снизу поля чертежа
   должна появиться полупрозрачная корзина ... после наведения объекта на корзину она остается полупрозрачной, но становится
   немного ярче и окрашивается в красный цвет»): app.js bindCanvas - .on, пока объект несут, .over - палец над корзиной */
.draw-trash { position: absolute; left: 50%; bottom: 16px; z-index: 7; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #4b5563; color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 3px 12px rgba(0,0,0,.3); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85);
  transition: opacity .18s ease, transform .18s ease, background-color .15s ease, visibility 0s linear .18s; }
.draw-trash.on { opacity: .5; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, background-color .15s ease; }
.draw-trash.on.over { opacity: .75; background: #e53935; }
.draw-trash svg.i { width: 30px; height: 30px; }
/* объект, который несут в корзину: чуть прозрачнее и с тенью, без выносок к стенам (их расстояния - от прежнего места),
   над корзиной - еще прозрачнее; .back - возврат на место */
#draw .g-trash-drag { opacity: .85; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
#draw .g-trash-drag .lead, #draw .g-trash-drag .coord, #draw .g-trash-drag .gdim, #draw .g-trash-drag .g-dim { display: none; }
#draw .g-trash-drag.over { opacity: .45; }
#draw .g-trash-drag.back { transition: transform .18s ease-out; }
#draw { -webkit-user-select: none; -webkit-touch-callout: none; } /* iPhone: удержание пальца на объекте не выделяет подписи и не открывает меню */
.tb-sep { width: 1px; background: var(--line); margin: 4px 2px; }
.tb.tb-3d { font-size: 12px; color: var(--accent-fg, #fff); background: var(--accent); } /* кнопка 3D-визуализатора над чертежом */
@media (hover: hover) { .tb.tb-3d:hover { background: var(--accent-hot); } }
.click-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); flex-wrap: nowrap; white-space: nowrap; justify-content: center; opacity: .96; transition: opacity .25s ease; }
/* плашка подсказки гаснет сама (03.11.2026, автор задачи Юрий @utaliiev: «уменьши размер окна, пропиши подсказку в одну
   строчку и сделай его исчезающим»): суть режима - одной строкой, через 4 секунды она уходит и остаются только кнопки
   действий (app.js hintShow), а без кнопок плашка скрывается целиком - чертеж открыт */
.click-hint > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.click-hint.faded { padding: 3px 5px; opacity: .8; }
.click-hint.faded > span { display: none; }
/* кнопки в подсказке над чертежом: «Готово» / «− точка» / «Отмена» при наборе ломаной линии */
.hint-btn { border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-fg, #fff); padding: 4px 11px; font-size: 13px; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .hint-btn:hover { background: var(--accent-hot); } }
.hint-btn.ghost { background: transparent; color: var(--bg); box-shadow: inset 0 0 0 1px currentColor; }
/* режим «Поставить на чертеже» включён: кнопка залита акцентом, чертёж обведён */
#btnClickFix.on { background: var(--accent); color: var(--accent-fg, #fff); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.canvas-wrap:has(#draw.placing) { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-soft); }
.messages { display: flex; flex-direction: column; gap: 4px; }
.messages:empty { display: none; }
.msg { border-radius: var(--r-sm); padding: 5px 10px; font-size: 12.5px; line-height: 1.3; font-weight: 600; border: 1px solid; }
.msg.err { color: var(--err-ink, var(--err)); border-color: rgba(210,59,59,.35); background: rgba(210,59,59,.06); }
.msg.warn { color: var(--warn-ink, var(--warn)); border-color: rgba(183,121,31,.35); background: rgba(183,121,31,.07); }
.msg.ok { color: var(--ok-ink, var(--ok)); border-color: rgba(18,150,94,.35); background: rgba(18,150,94,.07); }
.msg.info { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }

/* ───── SVG drawing ───── */
.g-poly { fill: var(--poly-fill); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.g-poly.bad { stroke: var(--err); }
.g-grid line { stroke: var(--grid); stroke-width: 1; } .g-grid line.m { stroke: var(--grid2); }
.g-dim { font-size: 13px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; text-anchor: middle; dominant-baseline: middle; } /* стороны - главные подписи чертежа: крупнее прочих и с толстой белой обводкой (05.11.2026) */
.g-dim.calc { fill: var(--muted); font-weight: 600; }
.g-dim.moved { fill: #7a1424; font-weight: 800; } /* сторона по чертежу не равна замеру */
:root[data-theme="dark"] .g-dim.moved { fill: #f08a98; }
.p-draw .g-dim.moved { fill: #7a1424; }
.g-ang { font-size: 11px; fill: var(--info); font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; text-anchor: middle; dominant-baseline: middle; }
.g-arc { fill: none; stroke: var(--info); stroke-width: 1.2; opacity: .8; }
.g-diag { stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 7 5; fill: none; opacity: .9; }
.g-diag.check { stroke: var(--ok); }
.g-diag.calc { opacity: .55; stroke-dasharray: 3 5; } /* расчётная диагональ (не замерена): длина по чертежу */
.g-diag-lbl { font-size: 11px; fill: var(--orange); font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; text-anchor: middle; dominant-baseline: middle; }
.g-diag-lbl.check { fill: var(--ok); }
.g-diag.arc { stroke: #8a5cd0; stroke-width: 0.9; stroke-dasharray: 4 4; } /* диагонали к точкам дуги: разметка кривой на объекте */
.g-diag.arc.lvl { stroke: #1a8f7a; stroke-dasharray: 5 3; } /* диагонали к точкам криволинейного перегиба уровня */
.g-corner.lvx circle { fill: var(--surface); stroke: #1a8f7a; stroke-width: 1.4; }
.g-corner.lvx text { font-size: 10px; font-weight: 800; fill: #14705f; } /* буквы вершин перегибов и вырезов - продолжение букв углов */
.g-diag-lbl.arc { font-size: 9.5px; fill: #6f44b0; stroke-width: 2.5px; }
.g-diag-lbl.calc { font-weight: 500; opacity: .75; }
.tbl input.auto::placeholder { color: var(--muted); font-style: italic; } /* незамеренная диагональ: серым длина по чертежу */
.g-seam { stroke: var(--err); stroke-width: 1.6; stroke-dasharray: 10 6; }
.g-seam-lbl { font-size: 11px; fill: var(--err); font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; text-anchor: middle; }
.g-corner { cursor: move; }
@media (hover: hover) { .g-corner:hover circle { stroke: var(--accent); stroke-width: 2.5; } }
.g-corner circle { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; }
.g-corner.base circle { fill: var(--accent); stroke: var(--accent); }
.g-corner.soft text { font-size: 9px; } /* точка дуги */
.g-ang.fix { font-weight: 900; text-decoration: underline; } /* угол, заданный в конструкторе */
.g-spec { fill: var(--warn); stroke: var(--paper); stroke-width: 1.5px; } /* внешний угол спецраскроя на экране */
#draw.editing { cursor: pointer; }
/* Всплывающие окна над чертежом - компактные, по образцу плашки блокировки и подсказки постановки (03.11.2026, автор
   задачи Юрий @utaliiev: «уменьши все всплывающие окна с уведомлениями и подсказками на экране чертежа, по примеру
   окна разблокировки чертежа и окна постановки объектов на чертеж»): окно конструктора, подсказка «?», уведомления,
   плашка обновления и сообщения под чертежом - мельче по полям и шрифту, чертежа видно больше. */
.edit-pop { position: absolute; z-index: 15; width: 232px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 7px 9px 8px; font-size: 12px; max-height: calc(100% - 12px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; } /* на телефоне окно выше поля чертежа - прокручивается внутри себя */
.edit-pop .ep-head { display: flex; align-items: center; gap: 6px; }
.edit-pop .ep-head span { color: var(--muted); }
.edit-pop .ep-head .x { margin-left: auto; }
.edit-pop .ep-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.edit-pop .ep-row input { width: 76px; }
/* подпись функции и ее «?» (05.11.2026, Юрий @utaliiev: «подсказки под функциями спрячь под иконкой со знаком „?"»):
   пояснения переехали из абзацев .ep-note в подсказку кнопки .faq - окно конструктора стало вдвое ниже */
.edit-pop .ep-cap { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--muted); }
.edit-pop .ep-faq { width: 17px; height: 17px; font-size: 11px; }
.edit-pop .ep-head .ep-faq { margin-left: auto; } /* у окна угла линии «?» стоит в строке заголовка, перед крестиком */
.edit-pop .ep-head .ep-faq + .x { margin-left: 0; }
.edit-pop .ep-note { margin-top: 6px; font-size: 11px; color: var(--dim); }
.edit-pop .ep-info { margin-top: 5px; font-size: 11.5px; color: var(--muted); } /* что получится: у скругления - радиус и новые длины сторон, у дуги - радиус, длина и шаг точек */
.edit-pop .ep-chips { margin: 6px 0 0; }
.edit-pop .ep-chips .chip { padding: 2px 8px; font-size: 11.5px; }
.g-corner text { font-size: 12px; font-weight: 800; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.g-corner.base text { fill: var(--accent-fg, #fff); }
.g-fix { cursor: move; }
.g-fix circle.body { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; }
.g-fix.spot circle.body { stroke: var(--info); }
.g-fix.spot .mount { fill: none; stroke: var(--info); stroke-width: 1.4; } /* накладной спот: кольцо корпуса вокруг точки */
.g-fix.spot rect.body { fill: var(--surface); stroke: var(--info); stroke-width: 1.6; } /* прямоугольный светильник на 2 лампы */
.g-fix.spot .lamp2 { fill: var(--surface); stroke: var(--info); stroke-width: 1.2; }
.g-fix.spot.c-black rect.body { fill: #2a2d35; stroke: var(--text); } .g-fix.spot.c-black .lamp2 { fill: #d9dce3; stroke: var(--text); }
.g-fix.spot.c-black circle.body { fill: #2a2d35; } .g-fix.spot.c-black .mount { stroke: var(--text); } /* чёрный корпус спота */ .g-fix.chand circle.body { stroke: var(--orange); stroke-width: 2.2; } .g-fix.pipe circle.body { stroke: var(--muted); }
.g-fix.vent .body { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; } /* решётка видна так же чётко, как остальные приборы (на тёмной теме приглушённая обводка сливалась с полем) */
.g-fix.vent .grille { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
.g-fix.vent.c-black .body { fill: #2a2d35; stroke: var(--text); } /* чёрная магнитная решётка */
.g-fix.vent.c-black .grille { stroke: #c9ccd4; }
.g-fix text { font-size: 11px; font-weight: 800; fill: var(--text); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.g-fix line { stroke: var(--text); stroke-width: 1.2; pointer-events: none; }
.g-fix .lead { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 3; } /* выноска точки привязки объекта к стене - заметнее (05.11.2026) */
.g-fix .coord { font-size: 10px; font-weight: 700; fill: var(--muted); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; text-anchor: start; } /* отступ точки привязки - читаемее, но мельче и светлее сторон */
.g-fix .coord.mid { text-anchor: middle; }
.g-fix .coord.end { text-anchor: end; }
/* линии: треки, гардина, световая линия; hit — широкая невидимая зона захвата, vx — ручки вершин, halo — выделение */
.g-fix.ln .hit { fill: none; stroke: transparent; stroke-width: 16; }
.g-fix.ln .body { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.g-fix.ln.trackIn .body { stroke-dasharray: 9 5; }
.g-fix.ln.curtain .body { stroke: var(--muted); stroke-width: 2.4; stroke-dasharray: 12 4 3 4; }
/* светильники в треке на чертеже: спот - кружок, линейный - полоска в натуральную длину */
.g-fix.ln .lamp { fill: var(--text); stroke: var(--paper); stroke-width: 1; }
.g-fix.ln .lampln { stroke: var(--text); stroke-width: 7; stroke-linecap: butt; fill: none; }
.g-fix.ln.sel .lamp { fill: var(--accent); }
.g-fix.ln.sel .lampln { stroke: var(--accent); }
/* светильники в треке двигаются вдоль него: за кружок или полоску */
.g-fix.ln [data-lamp] { cursor: move; }
@media (hover: hover) { .g-fix.ln .lamp[data-lamp]:hover { fill: var(--accent); } }
@media (hover: hover) { .g-fix.ln .lampln[data-lamp]:hover { stroke: var(--accent); } }
/* перегиб уровня: жирная ступень, засечки в сторону второго уровня, подпись понижения */
.g-fix.ln.level .body { stroke: var(--text); stroke-width: 3.5; stroke-linecap: butt; }
.g-fix.ln.level.sel .body { stroke: var(--accent); }
.g-fix.ln.level .lvtick { stroke: var(--text); stroke-width: 1.4; }
.g-fix.ln.level.sel .lvtick { stroke: var(--accent); }
.g-fix.ln.level .lvlbl { font-size: 11px; font-weight: 800; fill: var(--text); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; text-anchor: middle; dominant-baseline: middle; }
.g-tier { fill: var(--text); stroke: none; pointer-events: none; } /* участок второго уровня - затенен */
/* гардина: белый профиль - светлее, черный - темнее; с подсветкой - желтая подложка под линией */
.g-fix.ln.curtain.c-white .body { stroke: var(--dim); }
.g-fix.ln.curtain.c-black .body { stroke: var(--text); stroke-width: 3; }
.g-fix.ln.curtain.lit .hit { stroke: #e0a40055; stroke-width: 9; }
.g-fix.ln.curtain.sel .body { stroke: var(--accent); }
.g-fix.ln.light .body { stroke: #e0a400; stroke-width: 5; }
/* накладной карниз: шина в натуральную ширину, ее ряды (2 или 3) - тонкими линиями вдоль */
.g-fix.ln.cornice .body { fill: var(--surface); stroke: var(--text); stroke-width: 1.4; stroke-linejoin: miter; }
.g-fix.ln.cornice .krow { fill: none; stroke: var(--text); stroke-width: 1; pointer-events: none; }
.g-fix.ln.cornice.sel .body { stroke: var(--accent); stroke-width: 2; }
.g-fix.ln.cornice.sel .krow { stroke: var(--accent); }
.g-fix.ln .core { fill: none; stroke: #fff5c2; stroke-width: 1.6; pointer-events: none; }
.g-fix.ln .vx { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; cursor: move; }
@media (hover: hover) { .g-fix.ln .vx:hover { stroke: var(--accent); stroke-width: 2.5; } }
.g-fix .ang { font-size: 10px; fill: var(--info); font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; text-anchor: start; }
.g-fix .ang[data-bend] { cursor: pointer; } /* подпись градусов у точки линии: нажатие открывает окно угла (app.js: openBendPop) */
.g-fix .lbl { text-anchor: middle; }
.g-fix .halo { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; pointer-events: none; }
.g-fix.ln .halo { stroke-width: 11; stroke-dasharray: none; opacity: .3; stroke-linecap: round; stroke-linejoin: round; }
.g-fix.sel circle.body, .g-fix.sel rect, .g-fix.sel .body { stroke: var(--accent); stroke-width: 2.4; }
.g-fix.ln.sel .body { stroke: var(--accent); }
.g-fix.ln.sel .vx { stroke: var(--accent); }
.g-place circle { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.g-place .trail { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 8 5; stroke-linejoin: round; }
.g-place .snap { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.g-place .trail.close { stroke-dasharray: 3 6; opacity: .75; }
.g-place text { font-size: 11px; font-weight: 700; fill: var(--accent); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.g-scale line { stroke: var(--text); stroke-width: 2; } .g-scale text { font-size: 11px; fill: var(--muted); font-weight: 700; }
.g-ellipse { fill: var(--poly-fill); stroke: var(--accent); stroke-width: 2.5; }
.g-axis { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 4 4; }
/* легенда чертежа (05.11.2026, владелец: «сделай чертеж понятнее»): карточка в левом нижнем углу поля, поясняет
   линии и цвета (контур, размеры, диагонали, углы, шов, сетка). Как всплывающие окна — на surface, с тенью и скруглением */
.draw-legend { position: absolute; left: 10px; bottom: 10px; z-index: 6; width: 250px; max-width: calc(100% - 20px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow);
  padding: 8px 10px 9px; font-size: 11.5px; line-height: 1.45; color: var(--text); }
.draw-legend-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-size: 12px; font-weight: 700; }
.draw-legend-x { border: 0; background: none; color: var(--dim); font-size: 16px; line-height: 1; padding: 0 3px; cursor: pointer; border-radius: 6px; }
@media (hover: hover) { .draw-legend-x:hover { color: var(--text); background: var(--surface2); } }
.draw-legend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.draw-legend-list li { display: flex; align-items: center; gap: 8px; }
.draw-legend-list .lg { flex: none; width: 22px; height: 14px; display: inline-flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; font-style: normal; }
.lg-wall { border: 2px solid var(--accent); border-radius: 2px; background: var(--poly-fill); }
.lg-dim { font-size: 9.5px; font-weight: 800; color: var(--text); }
.lg-diag::before, .lg-seam::before { content: ''; position: absolute; left: 1px; right: 1px; top: 50%; margin-top: -0.9px; border-top: 1.8px dashed var(--orange); }
.lg-seam::before { border-top-color: var(--err); }
.lg-ang::before { content: ''; width: 12px; height: 12px; border-top: 1.8px solid var(--info); border-left: 1.8px solid var(--info); border-top-left-radius: 12px; }
.lg-grid::before { content: ''; position: absolute; inset: 1px; background:
  linear-gradient(var(--grid2), var(--grid2)) center/100% 1px no-repeat,
  linear-gradient(var(--grid2), var(--grid2)) center/1px 100% no-repeat; }
.draw-legend-note { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--dim); }

/* ───── dialogs, toast ───── */
.dlg { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); padding: 0; width: min(720px, 94vw); max-height: 90vh; box-shadow: var(--shadow); }
.dlg::backdrop { background: rgba(0,0,0,.45); }
/* обязательный вход (07.11.2026): чертеж, цены и данные клиента под окном входа не видны */
html.login-wall #dlgLogin::backdrop { background: var(--bg, #e9edf1); }
/* Окна с поиском (09.10.2026, «при быстром поиске двигалась только нижняя часть блока»): окно прижато к верху экрана, при наборе
   меняется только его нижний край. По центру окно с каждой буквой меняло высоту, браузер центрировал его заново - строка поиска и
   вкладки прыгали. Список id - отдельным правилом: если :has() не поддерживается, отбрасывается только второе правило. */
#dlgSettings, #dlgProjects, #dlgDealer, #dlgItems1c { margin-top: max(16px, 5vh); margin-bottom: auto; }
.dlg:has(input[type="search"]) { margin-top: max(16px, 5vh); margin-bottom: auto; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 3px solid var(--accent); }
.dlg-head h2 { margin: 0; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.dlg-body { padding: 16px 18px; overflow-y: auto; max-height: calc(90vh - 64px); }
.help ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.help-fig { width: 100%; max-width: 440px; display: block; margin: 12px auto; }
.help .seg, #setSeg { margin-bottom: 12px; }
#setSeg { flex-wrap: wrap; } /* шесть вкладок — на телефоне в два ряда, а не за край */
.set-page .fields { margin-top: 8px; }
.set-page > .set-head:not(:first-child) { margin-top: 16px; }
/* кнопки быстрого выбора полотна — вторая строка шапки карточки «Полотно» (восемь кнопок, переносятся; активна не больше одной);
   длинный бейдж в шапке обрезается многоточием, а не вылезает за карточку */
details.card > summary .ttl { white-space: nowrap; }
details.card > summary .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#secParams > summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
#secParams > summary::after { grid-area: 1 / 4; margin-left: 0; justify-self: end; }
#secParams > summary .badge { justify-self: start; max-width: 100%; box-sizing: border-box; }
.chips.presets { grid-area: 2 / 1 / 3 / -1; margin: 0; font-weight: 600; }
.chips.presets .chip { padding: 4px 12px; font-size: 12px; }
.chips.presets .chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
.proj-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.proj { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; }
.proj .name { font-weight: 700; } .proj .sub { grid-column: 1 / -1; color: var(--dim); font-size: 12px; }
.proj .num { color: var(--accent-ink); margin-right: 4px; }
.proj.current { border-color: var(--accent-line); background: var(--accent-soft); }
.proj.deleted { opacity: .7; } .proj.deleted .name { text-decoration: line-through; }
.proj .kit { color: var(--muted); }
.proj .sub.ceil-hit { color: var(--text); font-size: 13.5px; } .proj .sub.ceil-hit b { color: var(--accent-ink); } /* поиск по коду изделия 123/2: найденный потолок */
.proj .sub.ceil-miss { color: var(--err); font-size: 13px; }
.proj .sub.o1c-words { color: var(--text); font-size: 12.5px; } /* этапы заказа 1С словами у дилера (30.10.2026): оплата с суммами, производство, отгрузка */
.status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); }
.reg-filters { margin-top: 10px; }
.reg-filters input[type=search] { flex: 1 1 200px; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px; background: var(--surface2); }
#localProjects { margin-top: 12px; } #localProjects > summary { cursor: pointer; }
.dlg.ask { width: min(460px, 94vw); }
/* предпросмотр файла перед скачиванием: страницы PDF в рамке, чертеж картинкой */
/* предпросмотр чертежа - во весь экран: на маленьких мониторах окно в полэкрана было неудобным */
.dlg.preview { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; inset: 0; margin: 0; border-radius: 0; border: 0; flex-direction: column; }
.dlg.preview[open] { display: flex; } /* display только у открытого: правило без [open] перебивает display:none закрытого dialog, и окно висит поверх построителя */
.dlg.preview .dlg-body { flex: 1 1 auto; max-height: none; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 14px; }
.dlg.preview .dlg-head .hint { margin-left: auto; margin-right: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* длинное название файла не выталкивает значок скачивания и крестик за край экрана (04.11.2026: скачивание переехало в угол окна) */
.dlg.preview .dlg-head { gap: 10px; } .dlg.preview .dlg-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg.preview .pv-view { flex: 1 1 auto; height: auto; min-height: 0; }
.dlg.preview .pv-foot { margin-top: 0; }
.pv-view { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-md); min-height: 240px; height: min(62vh, 760px); overflow: auto; display: flex; align-items: center; justify-content: center; }
.pv-view iframe { width: 100%; height: 100%; border: 0; background: #fff; border-radius: var(--r-md); }
.pv-view img { max-width: 100%; max-height: 100%; background: #fff; display: block; }
.pv-view img.full { max-width: none; max-height: none; cursor: zoom-out; }
.pv-view img.fit { cursor: zoom-in; }
.pv-view .pv-wait { color: var(--muted); font-weight: 600; }
/* PDF в предпросмотре - листами A4 в натуральную величину: 210 × 297 мм при масштабе 100%, без подгонки под окно */
.pv-view.a4 { display: block; }
.pv-sheets { width: 210mm; margin: 0 auto; padding: 16px 0; display: flex; flex-direction: column; gap: 16px; }
.pv-view img.pv-a4 { display: block; width: 210mm; height: 297mm; max-width: none; max-height: none; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.pv-foot { margin-top: 12px; align-items: center; }
.pv-foot .chk { margin-left: auto; color: var(--muted); font-size: 13px; }
.ask-text { font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
/* История изменений объекта (history-ui.js, 17.10.2026): версии карточками, новая сверху; чертежи версии - стилями страницы (.g-*) */
#dlgHistory { width: min(820px, 96vw); margin-top: max(16px, 5vh); margin-bottom: auto; }
.hist-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hv { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface); }
.hv.cur { border-color: var(--accent-line); background: var(--accent-soft); }
.hv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; }
.hv-kind { color: var(--muted); }
.hv-badge { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: var(--accent); color: var(--accent-fg, #fff); }
.hv-meta { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.hv-ch { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.45; }
.hv-ch li { margin: 1px 0; overflow-wrap: anywhere; }
.hv-rest summary { cursor: pointer; color: var(--accent-ink, var(--accent)); font-size: 13px; margin: 2px 0 0 18px; }
.hv .hint { margin-top: 6px; }
.hv-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hist-more { margin-top: 10px; text-align: center; }
.hv-view-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.hv-sub { font-size: 15px; margin: 14px 0 4px; }
.hist-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.hist-room { margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px; background: var(--paper); }
.hist-room figcaption { font-size: 13px; color: var(--muted); padding: 4px 2px 0; }
.hist-svg { display: block; width: 100%; height: auto; }
.hist-svg * { pointer-events: none; }
@media (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) { .hv-meta { margin-left: 0; width: 100%; } .hist-rooms { grid-template-columns: 1fr; } }
.ask-input { width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--surface2); font-family: var(--mono); font-size: 13px; }
.ask-btns { margin-top: 16px; justify-content: flex-end; }
.btn.danger-solid { background: var(--err); border-color: var(--err); color: var(--on-err, #fff); }
@media (hover: hover) { .btn.danger-solid:hover { background: #b32f2f; border-color: #b32f2f; } }
.ai-preview { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; font-size: 12px; max-height: 200px; overflow: auto; white-space: pre-wrap; color: var(--muted); }
.ai-result { white-space: pre-wrap; font-family: var(--font); background: var(--accent-soft); border-radius: var(--r-sm); padding: 12px; margin-top: 10px; font-size: 14px; }
/* окно быстрого построения помещения (dlgQuick): число углов / фигура, таблица стен обхода, предпросмотр, диктовка */
.dlg.quick { width: min(640px, 94vw); }
.quick-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quick-top .quick-name { flex: 1 1 180px; display: flex; gap: 8px; min-width: 0; }
.quick-top .room-name { flex: 1 1 auto; min-width: 0; }
.quick-next { flex: none; width: 40px; font-size: 22px; font-weight: 700; line-height: 1; } /* «+»: создать помещение и сразу открыть окно следующего */
.quick-next:disabled { opacity: .4; cursor: not-allowed; }
.quick-top .seg { flex: 1 1 250px; }
.quick-page { margin-top: 12px; }
.quick-nrow { margin-top: 0; }
.quick-nrow .chips { margin: 0; }
.quick-nrow .chip { padding: 4px 11px; font-variant-numeric: tabular-nums; }
.quick-nrow .chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
.quick-scroll { max-height: 240px; overflow-y: auto; margin-top: 6px; }
.quick-walls select.sel { width: 136px; padding: 4px 6px; }
.quick-walls select.sel.deg { width: 74px; font-variant-numeric: tabular-nums; }
.quick-walls input[type=number] { width: 96px; }
.quick-walls tr.next td.n { color: var(--accent-ink); }
.quick-walls tr.cur td { background: var(--accent-soft); }
.quick-walls input.auto { color: var(--dim); font-style: italic; } /* длина, которую дописала программа, чтобы замкнуть контур */
.quick-mirror { position: absolute; top: 6px; right: 6px; z-index: 1; padding: 3px 8px; font-size: 12px; }
.quick-mirror.active { color: var(--accent-ink); }
.quick-preview.photo.all .quick-mirror { display: none; } /* весь лист: выбор эскиза, отражать нечего - место подсказке */
.quick-fab { margin-top: 10px; align-items: center; gap: 8px; }
.quick-fab .chips { margin: 0; }
.quick-fab .lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.quick-fab .chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
.quick-fab select.sel { width: auto; flex: 0 1 165px; min-width: 120px; padding: 5px 8px; font-size: 13px; } /* «Все фактуры» - справочник фактур (app.js renderQuickFabs) */
.quick-fab select.sel.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); font-weight: 600; } /* фактура выбрана в списке, а не кнопкой - как активная кнопка */
.quick-walls td.cc select { outline: 2px solid var(--accent); outline-offset: 1px; } /* поле, в которое пойдет нажатая кнопка */ /* выделенная строка - ее заполняют кнопки под таблицей */
.dlg.quick.no-qdir .quick-walls .qd { display: none; } /* столбец «Куда» скрыт в личных настройках (app.js applyQuickPrefs, 26.10.2026) */
.quick-pad { margin-top: 8px; display: grid; gap: 6px; }
.quick-pad .row.wrap { margin: 0; gap: 5px; align-items: center; }
.quick-pad .lbl { width: 40px; font-size: 12px; color: var(--muted); font-weight: 600; }
.quick-pad .chip { padding: 4px 10px; min-width: 40px; justify-content: center; font-variant-numeric: tabular-nums; }
#quickShapeFields label.next { color: var(--accent-ink); } /* поле, которое заполнит следующее продиктованное число */
.quick-preview { position: relative; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); overflow: hidden; }
.quick-preview svg { width: 100%; height: 180px; display: block; }
/* окно без прокрутки: на широком экране две колонки - слева фигура или таблица стен, справа контур, подсказка и диктовка.
   Окно - по высоте экрана (23.10.2026, владелец: «сделай так чтоб не нужно было скролить подсказки и создать помещение»): тело -
   под заголовком, сетка ужимается под высоту. Не хватает высоты - таблица стен прокручивается внутри, фото сверки становится ниже,
   подсказки и кнопки «Отмена» / «Создать помещение» остаются на экране; рамка поменяла размер - чертеж перерисовывается
   (app.js: ResizeObserver у #quickSvg) */
@media (min-width: 900px) and (min-device-width: 641px) {
  .dlg.quick { width: min(980px, 96vw); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .dlg.quick[open] { display: flex; flex-direction: column; } /* display только у открытого - как у .dlg.preview */
  .dlg.quick .dlg-head { flex: none; }
  .dlg.quick .dlg-body { flex: 0 1 auto; min-height: 0; max-height: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 18px;
    grid-template-areas: "top top" "page prev" "page info" "page fab" "page voice" "btns btns";
    --qv-min: 172px; --qv-max: 234px; grid-template-rows: auto minmax(var(--qv-min), var(--qv-max)) auto auto 1fr 38px; } /* ряд рамки с отступом 12 px: контур 220 px, при нехватке высоты до 158 px; последний ряд - место кнопок */
  .dlg.quick .dlg-body:has(> .quick-preview.photo) { --qv-min: 214px; --qv-max: 374px; } /* фото сверки: 360 px, при нехватке высоты до 200 px */
  .dlg.quick .quick-fab { grid-area: fab; }
  .dlg.quick .quick-top { grid-area: top; }
  .dlg.quick .quick-top .quick-debt { order: 3; flex: 1 1 auto; white-space: nowrap; } /* долг дилера - в одной строке с названием и вкладками, если помещается (иначе ниже, как раньше): +46 px таблице и подсказкам ИИ */
  .dlg.quick .quick-page { grid-area: page; }
  .dlg.quick .dlg-body > .quick-page:not([hidden]) { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; } /* ужимается только таблица; не хватило и ей - прокрутка страницы */
  .dlg.quick .dlg-body > .quick-page > * { flex: none; }
  .dlg.quick .dlg-body > .quick-page > .quick-scroll { flex: 0 1 auto; min-height: 76px; max-height: none; } /* не ниже шапки и строки */
  .dlg.quick .quick-preview { grid-area: prev; margin-top: 12px; }
  .dlg.quick .quick-preview svg { height: 220px; }
  .dlg.quick .dlg-body > .quick-preview:not(.big) svg { height: 100%; } /* по высоте ряда; «Крупнее» (.big) - на весь экран */
  .dlg.quick #quickInfo { grid-area: info; }
  .dlg.quick .quick-voice { grid-area: voice; align-self: start; }
  .dlg.quick .quick-heard:empty { min-height: 0; margin-top: 0; } /* на компьютере поля команд нет - пустая строка места не занимает */
  /* кнопки - на всю высоту сетки и прижаты вниз, в последний ряд: экран совсем низкий и тело прокручивается - они остаются внизу окна */
  .dlg.quick .ask-btns { grid-column: 1 / -1; grid-row: 1 / -1; align-self: end; position: sticky; bottom: -16px; z-index: 2; margin: 0 -18px -16px; padding: 8px 18px 16px; background: var(--surface); } /* bottom -16px: Chrome держит sticky внутри отступа тела; z-index 2 - окно правки длины (.qv-pop, 3) выше кнопок */
}
/* узкий экран: контур и таблица ниже, чтобы окно помещалось по высоте */
@media (max-width: 899px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .dlg.quick .quick-preview svg { height: 140px; }
  .dlg.quick .quick-scroll { max-height: max(100px, calc(100vh - 800px)); } /* 80px - кнопки углов и направлений */
  .dlg.quick .quick-heard:empty { min-height: 0; margin-top: 0; }
  /* кнопки внизу окна и на узком экране (23.10.2026, владелец: «закрепи кнопки «Отмена» / «Создать помещение» внизу окна «Новое
     помещение» и на телефоне»): тело окна прокручивается, плашка с кнопками остается у нижнего края - как на компьютере */
  .dlg.quick .ask-btns { position: sticky; bottom: -16px; z-index: 2; margin: 8px -18px -16px; padding: 8px 18px 16px; background: var(--surface); box-shadow: 0 -1px 0 var(--line); }
}
@media (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) { .dlg.quick .quick-preview svg { height: 100px; } .dlg.quick .quick-fab { margin-top: 6px; } .dlg.quick .quick-voice { margin-top: 8px; padding-top: 6px; } .dlg.quick .quick-page { margin-top: 8px; } .dlg.quick .ask-btns { margin-top: 10px; } .dlg.quick #quickInfo { font-size: 12px; line-height: 1.3; } .quick-pad .row.wrap { flex-wrap: nowrap; gap: 3px; } .quick-pad .lbl { width: 34px; flex: none; } .quick-pad .chip { flex: 1 1 0; min-width: 0; padding: 4px 0; font-size: 13px; } .dlg.quick .dlg-body { max-height: calc(100dvh - 64px); padding: 12px 14px; } } /* на телефоне окно во весь экран - тело тоже */
@media (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) { .dlg.quick .ask-btns { bottom: -12px; margin: 10px -14px -12px; padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); } } /* плашка кнопок: отступы тела на телефоне 12 и 14 px, снизу - полоса жестов iPhone */
.qp-poly { fill: var(--poly-fill); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.qp-open { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.qp-dim { font-size: 11px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.qp-corner circle { fill: var(--surface); stroke: var(--text); stroke-width: 1.3; }
.qp-corner.first circle { fill: var(--accent); stroke: var(--accent); }
.qp-corner text { font-size: 10px; font-weight: 700; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.qp-corner.first text { fill: var(--accent-fg, #fff); }
.qp-hint { font-size: 13px; fill: var(--dim); text-anchor: middle; }
.quick-voice { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.quick-voice .row.wrap { margin-top: 0; }
/* зеленая кнопка «Новый заказ» (04.11.2026, Юрий): в окне «Новое помещение» рядом с синей «Фото эскиза» и в базе «Сфера»; цвет один
   в обеих темах - белая подпись на светлом зеленом темной темы (--ok) не читалась бы */
.btn.ok-solid { background: #12965e; border-color: #12965e; color: #fff; }
@media (hover: hover) { .btn.ok-solid:hover { background: #0f7f50; border-color: #0f7f50; } }
.quick-text { width: 100%; margin-top: 8px; border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 7px 10px; background: var(--surface); }
.quick-heard { min-height: 24px; margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--muted); }
.quick-heard .tk { border-radius: 999px; padding: 2px 9px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.quick-heard .tk.dir { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
.quick-heard .tk.skip { background: none; border-color: transparent; color: var(--dim); text-decoration: line-through; font-weight: 400; padding: 2px 2px; }
.quick-heard .interim { color: var(--dim); font-style: italic; }
.quick-sketch { margin-top: 12px; display: flex; gap: 12px; align-items: flex-start; }
.quick-sketch img { width: 160px; max-height: 240px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: zoom-in; flex: none; }
.quick-sketch.big { flex-direction: column; }
.quick-sketch.big img { width: 100%; max-height: 70vh; cursor: zoom-out; }
.quick-sketch .hint { margin: 0; }
.quick-sketch .hint.bad { color: var(--err); }
/* робот-чтец поверх предпросмотра контура, пока модель читает фото (версии 310, 314, app.js: quickSketchBox(..., reading)):
   глаза ходят по строке, полоса идет по листу; слой закрывает заглушку и прежнюю сверку, если фото меняют в том же окне */
/* высота предпросмотра 100-360 px (телефон, узкое окно, компьютер): по умолчанию робот слева, подпись справа - влезает в 100 px;
   от 170 px - крупный робот, подпись под ним. Без поддержки @container остается первый вид. Размер робота - через #quickPreview:
   правила .quick-preview svg (высота предпросмотра) иначе растягивают и его */
.qv-read { position: absolute; inset: 0; z-index: 7; container-type: size; background: var(--paper); } /* выше кнопки лупы телефона (quick-phone.css, z-index 6) */
.qv-read[hidden] { display: none; }
.qv-read-in { height: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; }
#quickPreview .qv-read .sketch-bot { width: 76px; height: 76px; flex: none; overflow: visible; position: static; cursor: default; }
.qv-read-text { max-width: 260px; color: var(--muted); font-size: 13px; line-height: 1.4; text-align: left; }
@container (min-height: 170px) {
  .qv-read-in { flex-direction: column; gap: 10px; }
  #quickPreview .qv-read .sketch-bot { width: 104px; height: 104px; }
  .qv-read-text { max-width: 320px; text-align: center; }
}
.sketch-bot .sb-shell { fill: var(--surface2); stroke: var(--line2); stroke-width: 1.4; }
.sketch-bot .sb-wire { stroke: var(--line2); stroke-width: 1.6; stroke-linecap: round; }
.sketch-bot .sb-lamp { fill: var(--orange); }
.sketch-bot .sb-face { fill: #1d2633; }
:root[data-theme="dark"] .sketch-bot .sb-shell { fill: #3a4659; stroke: #5b6a82; } /* иначе корпус сливается с экраном лица */
.sketch-bot .sb-eye { fill: #6fd3ff; }
.sketch-bot .sb-paper { fill: #fff; stroke: var(--line2); stroke-width: 1.2; }
.sketch-bot .sb-plan { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.sketch-bot .sb-num { stroke: var(--dim); stroke-width: 1.6; stroke-linecap: round; }
.sketch-bot .sb-band { fill: var(--accent); opacity: .3; }
.qv-read .sb-head { transform-box: fill-box; transform-origin: 50% 100%; animation: sbNod 2.4s ease-in-out infinite alternate; }
.qv-read .sb-look { animation: sbDown 2.4s ease-in-out infinite alternate; }
.qv-read .sb-scan { animation: sbSide .8s ease-in-out infinite alternate; }
.qv-read .sb-eye { transform-box: fill-box; transform-origin: center; animation: sbBlink 4.2s infinite; }
.qv-read .sb-band { animation: sbBand 2.4s ease-in-out infinite alternate; }
.qv-read .sb-lamp { animation: sbLamp 1s ease-in-out infinite alternate; }
@keyframes sbNod { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes sbDown { from { transform: translateY(-1px); } to { transform: translateY(1.5px); } }
@keyframes sbSide { from { transform: translateX(-2.6px); } to { transform: translateX(2.6px); } }
@keyframes sbBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes sbBand { from { transform: translateY(0); } to { transform: translateY(18px); } }
@keyframes sbLamp { from { opacity: .35; } to { opacity: 1; } }
/* без отключения по prefers-reduced-motion: движение в пределах робота 104 px, а «уменьшить движение» сообщают и ПК с выключенной
   анимацией Windows, и RDP-сессии - там робот стоял бы, как будто программа зависла */
/* сверка с фото эскиза (app.js: drawQuickView): фото под чертежом в рамке предпросмотра; цвета чертежа не зависят от темы - он лежит на бумаге */
.quick-sketch.qv img { display: none; } /* миниатюра не нужна: фото - в сверке */
.quick-preview.photo { background: #dfe3e8; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; overflow: clip; } /* clip: фото больше рамки, а фокус в окне правки не должен прокручивать рамку */
.quick-preview.photo svg { position: relative; height: 360px; cursor: grab; }
.quick-preview.photo.all svg { cursor: crosshair; }
.quick-preview.photo.plan { background: var(--paper); } /* эскиз на фото не найден: чертеж по прочтению без фото */
.quick-preview.photo.plan .qv-note { right: 104px; margin: 0; text-align: left; } /* справа - кнопка «Зеркально» */
.dlg.quick .quick-preview.photo svg { height: 360px; }
.qv-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; pointer-events: none; image-orientation: from-image; }
.qv-dim { fill: rgba(255,255,255,.66); }
.qv-poly { fill: var(--poly-fill); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.qv-open { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.qv-sel { stroke: #f08c00; stroke-width: 5; stroke-linecap: round; opacity: .9; }
.qv-hit { stroke: transparent; stroke-width: 20; cursor: pointer; }
.qv-len { cursor: pointer; }
.qv-len rect { fill: rgba(255,255,255,.93); stroke: var(--accent); stroke-width: 1; }
.qv-len text { font-size: 12px; font-weight: 700; fill: #10233f; text-anchor: middle; dominant-baseline: central; }
.qv-len.auto rect { stroke-dasharray: 3 2; } .qv-len.auto text { font-style: italic; fill: #5b6675; } /* вычислено по остальным стенам */
.qv-len.sel rect { stroke: #f08c00; stroke-width: 2; }
.qv-corner { cursor: pointer; }
.qv-corner circle { fill: #fff; stroke: #10233f; stroke-width: 1.3; }
.qv-corner.first circle { fill: var(--accent); stroke: var(--accent); }
.qv-corner text { font-size: 11px; font-weight: 700; fill: #10233f; text-anchor: middle; dominant-baseline: central; }
.qv-corner.first text { fill: var(--accent-fg, #fff); }
/* углы в градусах на вершинах (28.10.2026): прямой - темно-синим, больше 180° (внутренний угол комнаты) - фиолетовым,
   не прямой - янтарным; буква угла, приколотая к рисунку, - с зеленой обводкой, та, что тянут, - крупнее и прозрачнее */
.qv-ang { cursor: pointer; }
.qv-ang rect { fill: #29438f; }
.qv-ang text { font-size: 10px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; }
.qv-ang.in rect { fill: #6d28d9; }
.qv-ang.odd rect { fill: #b45309; }
.qv-corner.pin circle { stroke: #16a34a; stroke-width: 3; }
.qv-corner.pin.auto circle { stroke: #2563eb; } /* угол сел на рисунок сам */
.qv-corner.drag circle { fill: rgba(255,255,255,.55); stroke: #f08c00; stroke-width: 3; }
.qv-corner.drag.snap circle { stroke: #16a34a; } /* буква на углу рисунка (магнит) */
.qv-target { fill: none; stroke: #16a34a; stroke-width: 2; opacity: .85; pointer-events: none; } /* углы рисунка, к которым прилипнет буква */
/* стена, которая на рисунке идет не туда, куда в таблице: пунктир и стрелка рисунка */
.qv-off { stroke: #dc2626; stroke-width: 4; stroke-dasharray: 8 5; stroke-linecap: round; pointer-events: none; }
.qv-offm { cursor: pointer; }
.qv-offm circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; }
.qv-offm text { font-size: 13px; font-weight: 800; fill: #fff; text-anchor: middle; dominant-baseline: central; }
.qv-cand { fill: rgba(11,107,211,.04); stroke: #8a96a6; stroke-width: 1.5; stroke-dasharray: 6 4; }
.qv-frame rect.fr { fill: none; stroke: #5b6675; stroke-width: 2; }
.qv-frame.cur rect.fr { stroke: var(--accent); stroke-width: 3.5; fill: var(--accent-soft); }
.qv-frame.done { opacity: .55; }
.qv-badge rect { fill: #5b6675; } .qv-frame.cur .qv-badge rect { fill: var(--accent); }
.qv-badge text { font-size: 12px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; }
.qv-band { fill: rgba(240,140,0,.12); stroke: #f08c00; stroke-width: 2; stroke-dasharray: 6 3; }
.qv-note { position: absolute; left: 8px; right: 8px; top: 8px; width: fit-content; margin: 0 auto; z-index: 2; padding: 4px 12px; border-radius: 12px; background: rgba(16,35,63,.84); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: center; pointer-events: none; }
.qv-bar { position: absolute; left: 6px; bottom: 6px; display: flex; flex-wrap: wrap; gap: 5px; z-index: 2; }
.qv-bar .btn { padding: 3px 9px; font-size: 12px; background: rgba(255,255,255,.92); color: #10233f; border-color: #c4ccd6; min-width: 30px; justify-content: center; }
.qv-bar .btn[aria-pressed="false"] { color: #8a96a6; text-decoration: line-through; }
.qv-bar .btn:disabled { opacity: .45; }
@media (hover: hover) { .qv-bar .btn:hover { background: #fff; border-color: #9fb0c4; color: #10233f; } } /* на компьютере наведение не красит кнопку в цвет карточки: в темной теме текст на ней не читался */
.qv-pop { position: absolute; z-index: 3; width: 252px; padding: 8px 10px 9px; background: var(--surface); color: var(--text); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); }
.qv-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.qv-pop-head .qv-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 2px; }
.qv-pop-row { display: flex; align-items: center; gap: 6px; }
.qv-pop-row input { width: 100px; border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 6px 8px; background: var(--field, var(--surface)); color: var(--text); font-size: 15px; font-weight: 700; }
.qv-pop-row .u { color: var(--muted); font-size: 13px; }
.qv-pop-dirs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.qv-pop-dirs .chip { min-width: 0; padding: 3px 7px; font-variant-numeric: tabular-nums; }
.qv-pop-dirs .chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
.qv-pop .hint { margin: 6px 0 0; font-size: 12px; }
.qv-pop-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; padding: 5px 7px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--err) 10%, var(--surface)); color: var(--err); font-size: 12.5px; font-weight: 600; }
/* «Крупнее»: сверка на весь экран поверх окна */
@media (max-width: 899px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) { .dlg.quick .quick-preview.photo svg { height: min(360px, 50vh); } }
.quick-preview.photo.big { position: fixed; inset: 8px; z-index: 20; margin: 0; border-radius: var(--r-md); box-shadow: var(--shadow); }
/* ввод длин по фото на телефоне (28.10.2026, app.js qvTyping): сверка над клавиатурой размеров во весь экран, кнопки сверки не нужны */
.quick-preview.photo.type { position: fixed; left: 0; right: 0; top: 0; bottom: var(--np-h, 400px); z-index: 20; margin: 0; border: 0; border-radius: 0; }
.dlg.quick .quick-preview.photo.type svg, .quick-preview.photo.type svg { height: 100%; }
.quick-preview.photo.type .qv-bar, .quick-preview.photo.type .quick-mirror { display: none; }
.dlg.quick .quick-preview.photo.big svg, .quick-preview.photo.big svg { height: calc(100vh - 16px); height: calc(100dvh - 16px); }
/* «Построю сам» (22.10.2026): стороны, углы в градусах и диагонали по фото эскиза - кнопки под фото, страница «По фото», панель и подписи на чертеже */
.seg-btn[hidden] { display: none; }
.quick-sketch { flex-wrap: wrap; }
.quick-sketch-acts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.quick-sketch-acts[hidden] { display: none; }
.quick-self .quick-nrow { gap: 8px; }
.self-walls input[type=number].deg { width: 74px; }
.self-walls input.auto { color: var(--dim); font-style: italic; }
.self-diags { margin-top: 8px; }
.self-diags input.dname { width: 64px; text-transform: uppercase; }
.self-diags input[type=number] { width: 96px; }
.self-diags .x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.qv-self { position: absolute; left: 6px; right: 6px; top: 6px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.qv-self[hidden] { display: none; }
.qv-self .btn { padding: 3px 9px; font-size: 12px; background: rgba(255,255,255,.92); color: #10233f; border-color: #c4ccd6; min-width: 30px; justify-content: center; }
.qv-self .btn.primary { background: var(--accent); color: var(--accent-fg, #fff); border-color: var(--accent); }
.qv-self .btn.active { background: #f08c00; color: #1C1C1A; border-color: #f08c00; }
.qv-self .btn:disabled { opacity: .45; }
.qv-self .n { min-width: 26px; text-align: center; font-weight: 700; font-size: 13px; color: #10233f; background: rgba(255,255,255,.92); border-radius: 6px; padding: 3px 4px; }
.qv-self .lbl { font-size: 12px; font-weight: 700; color: #10233f; background: rgba(255,255,255,.85); border-radius: 6px; padding: 3px 6px; }
.quick-preview.photo.self .qv-note { top: 44px; }
.quick-preview.photo.self .quick-mirror { display: none; }
.qv-poly.bad { stroke: #b02a2a; }
.qv-deg { cursor: pointer; }
.qv-deg rect { fill: #eef8f0; stroke: #2b7a3d; stroke-width: 1.3; }
.qv-deg text { font-size: 12px; font-weight: 700; fill: #1f5f30; text-anchor: middle; dominant-baseline: central; }
.qv-deg.auto rect { stroke-dasharray: 3 2; stroke: #8a96a6; } .qv-deg.auto text { font-style: italic; fill: #5b6675; }
.qv-deg.sel rect { stroke: #f08c00; stroke-width: 2; }
.qv-len.ask text { fill: #b02a2a; } .qv-len.ask rect { stroke: #b02a2a; stroke-dasharray: 3 2; }
.qv-diag { stroke: #f08c00; stroke-width: 2; stroke-dasharray: 7 5; fill: none; opacity: .9; pointer-events: none; }
.qv-diag.sel { stroke-width: 4; }
.qv-dlen { cursor: pointer; }
.qv-dlen rect { fill: rgba(255,245,230,.95); stroke: #f08c00; stroke-width: 1; }
.qv-dlen text { font-size: 12px; font-weight: 700; fill: #8a4b00; text-anchor: middle; dominant-baseline: central; }
.qv-dlen.sel rect { stroke-width: 2.5; }
.qv-corner.pick circle { fill: #f08c00; stroke: #f08c00; } .qv-corner.pick text { fill: #1C1C1A; }
.qv-pop-row input.deg { width: 80px; }
/* левая панель «Построю сам» на весь экран: страница «По фото» поверх фото слева (на телефоне - снизу), фото и подписи сдвинуты */
.qv-pane { position: absolute; left: 0; top: 0; bottom: 0; width: 380px; z-index: 4; overflow: auto; padding: 10px 12px; background: var(--surface); color: var(--text); border-right: 1px solid var(--line); box-sizing: border-box; }
.qv-pane[hidden] { display: none; }
.qv-pane .quick-page { margin-top: 0; }
.qv-pane #selfBig { display: none; }
.dlg.quick .qv-pane .quick-scroll { max-height: none; overflow: visible; } /* сильнее .dlg.quick .quick-scroll */
.quick-self .self-acts { display: none; margin-top: 10px; }
.qv-pane .self-acts { display: flex; }
.quick-self .self-fab { display: none; } /* полотно листа - только в левой панели: в окне есть своя строка #quickFabs */
.qv-pane .self-fab { display: flex; }
.quick-preview.photo.big.self.pane { padding-left: 380px; }
.quick-preview.photo.big.self.pane .qv-img { left: 380px; }
.quick-preview.photo.big.self.pane .qv-bar, .quick-preview.photo.big.self.pane .qv-self { left: 386px; }
.quick-preview.photo.big.self.pane .qv-note { left: 388px; }
.self-walls tr[data-row^="d"] td { background: var(--surface2); padding: 4px 6px; }
.self-walls .sdg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.self-walls .sdg .lbl { color: var(--muted); font-weight: 600; }
.self-walls .sdg label { display: inline-flex; align-items: center; gap: 4px; }
.self-walls .sdg label span { font-weight: 700; font-variant-numeric: tabular-nums; }
.self-walls input.sdg { width: 64px; padding: 3px 5px; }
.self-walls input.sdg.auto { color: var(--dim); font-style: italic; }
/* диагонали из угла - выпадающие (details) под стороной с заданным углом; общий список «Все диагонали» тоже свернут */
.self-walls details.sdg-d summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent-ink); list-style: none; display: flex; align-items: center; gap: 6px; }
.self-walls details.sdg-d summary::-webkit-details-marker { display: none; }
.self-walls details.sdg-d summary::before { content: '\25B8'; font-size: 11px; color: var(--muted); }
.self-walls details.sdg-d[open] summary::before { content: '\25BE'; }
.self-walls details.sdg-d .sdg { margin-top: 5px; }
.self-walls .cnt, .self-diags-all .cnt { color: var(--muted); font-weight: 600; }
.self-diags-all { margin-top: 8px; }
.self-diags-all > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--accent-ink); } /* заголовок раздела - цветом, как остальные (04.11.2026) */
.quick-self .quick-pad { margin-top: 8px; }
.quick-self #selfHint { display: none; margin-top: 6px; }
/* выделение строки, которую правят (app.js selfMark): стена и угол на чертеже оранжевым; бледные - углы, к которым диагональ прошла бы через стену */
.qv-cur { stroke: #f08c00; stroke-width: 7; stroke-linecap: round; opacity: .45; pointer-events: none; }
.qv-corner.cur circle { stroke: #f08c00; stroke-width: 3; }
.qv-corner.off { opacity: .3; }
.qv-len.cur rect, .qv-deg.cur rect { stroke: #f08c00; stroke-width: 2; }
.qv-lead { stroke: #2b7a3d; stroke-width: 1.2; stroke-dasharray: 3 2; pointer-events: none; }
.qv-diag.pre { opacity: .55; stroke-width: 2; }
/* лупа окна «Новое помещение» (lens.js, 01.11.2026): Shift над рамкой - круг у указателя, чертеж крупнее, подписи прежнего
   размера разложены заново; кегль подписей здесь и в lens.js (FS) - один и тот же, по нему считается ширина плашек */
.qv-lens { position: fixed; z-index: 30; border-radius: 50%; overflow: hidden; pointer-events: none; background: var(--paper); border: 2px solid #10233f; box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 10px 30px rgba(0,0,0,.35); }
.qv-lens[hidden] { display: none; }
.qv-lens.photo { background: #dfe3e8; }
.qv-lens-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; image-orientation: from-image; }
.qv-lens-img[hidden] { display: none; }
.qv-lens-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.qv-lens .qv-len text, .qv-lens .qv-dlen text { font-size: 12.5px; }
.qv-lens .qv-ang text { font-size: 11px; }
.qv-lens .qv-deg text { font-size: 12px; }
.qv-lens .qv-corner text, .qv-lens .qp-corner text { font-size: 12px; }
.lens-lead { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 3 2; opacity: .7; }
.lens-dot { fill: var(--text); }
.lens-vx { fill: var(--text); stroke: var(--paper); stroke-width: 1.5; } /* тесный угол: точка в вершине, буква - рядом */
.qv-lens.photo .lens-lead { stroke: #10233f; } .qv-lens.photo .lens-dot { fill: #10233f; } .qv-lens.photo .lens-vx { fill: #10233f; stroke: #fff; }
.lens-hl rect, .lens-hl circle { fill: none; stroke: #f08c00; stroke-width: 2.5; } /* под перекрестием - то, что выберет щелчок */
.lens-hl line { stroke: #f08c00; stroke-width: 7; stroke-linecap: round; opacity: .5; }
.lens-x { fill: none; stroke-linecap: round; }
.lens-x .b { stroke: rgba(255,255,255,.9); stroke-width: 4; } .lens-x .f { stroke: #f08c00; stroke-width: 1.8; }
.qv-lens-z { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 1px 8px; border-radius: 9px; background: rgba(16,35,63,.78); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .4s; }
.qv-lens-z.on { opacity: 1; transition: none; } /* кратность - на 1,6 с после появления лупы и смены кратности (lens.js zShow) */
#quickSvg.lens-on, #quickSvg.lens-on * { cursor: none !important; } /* указатель - перекрестие лупы */
/* о лупе - подсказкой в углу рамки, пока над ней мышь (на телефоне клавиши Shift нет) */
@media (hover: hover) and (pointer: fine) {
  .quick-preview::after { content: 'Shift - лупа'; position: absolute; right: 8px; bottom: 6px; z-index: 1; padding: 1px 7px; border-radius: 8px; background: rgba(16,35,63,.62); color: #fff; font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; }
  .quick-preview:hover::after { opacity: 1; }
  .quick-preview:has(svg.lens-on)::after, .quick-preview:has(.qp-hint)::after, .quick-preview.photo.type::after { opacity: 0; } /* лупа открыта, контура еще нет */
}
.self-walls input.sdg.out { color: #b02a2a; border-color: #b02a2a; }
/* кнопки углов листа - заметные; в левой панели - всегда видны внизу */
.quick-self .quick-pad .lbl { width: auto; min-width: 58px; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.quick-self .quick-pad .chip { border: 1.5px solid var(--accent); color: var(--accent-ink); background: var(--surface); font-weight: 700; min-width: 48px; padding: 5px 10px; }
@media (hover: hover) { .quick-self .quick-pad .chip:hover { background: var(--accent-soft); } }
.quick-self .quick-pad .chip.active { background: var(--accent); color: var(--accent-fg, #fff); }
.qv-pane .quick-pad { position: sticky; bottom: -10px; z-index: 2; margin: 8px -12px 0; padding: 8px 12px 10px; background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); border-top: 2px solid var(--accent); } /* подложка непрозрачная: строки под кнопками не просвечивают */
@media (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) { .quick-self .quick-pad .chip { min-width: 0; padding: 5px 0; } .quick-self .quick-pad .lbl { min-width: 0; font-size: 12px; } } /* телефон: шесть кнопок в строку */
.qv-pane #selfHint { display: block; }
@media (max-width: 899px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .qv-pane { top: auto; bottom: 0; width: auto; right: 0; height: 42vh; height: 42dvh; border-right: 0; border-top: 1px solid var(--line); }
  .quick-preview.photo.big.self.pane { padding-left: 0; padding-bottom: 42vh; padding-bottom: 42dvh; }
  .quick-preview.photo.big.self.pane .qv-img { left: 0; }
  .quick-preview.photo.big.self.pane .qv-bar, .quick-preview.photo.big.self.pane .qv-self { left: 6px; }
  .quick-preview.photo.big.self.pane .qv-note { left: 8px; }
  .quick-preview.photo.self .qv-note { top: 72px; } /* панель над фото в две строки */
  .quick-preview.photo.big.self.pane .qv-bar { bottom: calc(42vh + 6px); bottom: calc(42dvh + 6px); }
  .dlg.quick .quick-preview.photo.big.self.pane svg, .quick-preview.photo.big.self.pane svg { height: calc(100vh - 16px - 42vh); height: calc(100dvh - 16px - 42dvh); }
}
.room-photo { margin-top: 8px; display: flex; gap: 10px; align-items: center; color: var(--accent-ink); text-decoration: none; font-size: 13px; }
.room-photo img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.quick-heard .err { color: var(--err); font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.3; z-index: 50; box-shadow: var(--shadow); max-width: 90vw; }
.toast-btn { margin-left: 9px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-fg, #fff); padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
/* плашка «Построитель обновлен» (update-ui.js): внизу слева, поверх чертежа и 3D, под тостами */
.upd { position: fixed; left: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 46; display: flex; align-items: center; gap: 8px; max-width: min(480px, calc(100vw - 32px)); padding: 7px 7px 7px 11px; font-size: 12.5px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-md); box-shadow: var(--shadow); font-size: 14px; }
.upd[hidden] { display: none; }
.upd-text { display: grid; gap: 2px; min-width: 0; }
.upd-text span { color: var(--muted); font-size: 11.5px; }
.upd-new { color: var(--accent-ink); font-size: 11.5px; white-space: nowrap; }
.upd-x { border: 0; background: none; color: var(--dim); font-size: 14px; line-height: 1; padding: 4px; cursor: pointer; border-radius: var(--r-sm); }
@media (hover: hover) { .upd-x:hover { color: var(--text); background: var(--surface2); } }
/* в окне входа (модальное окно делает все вне себя инертным, update-ui.js place): строкой под формой - текст и ✕ сверху,
   «Что нового» и «Обновить» под ними; display только у видимой, иначе перебил бы .upd[hidden] */
.upd.upd-in { position: static; margin: 0 18px 16px; max-width: none; box-shadow: none; }
.upd.upd-in:not([hidden]) { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 10px; }
.upd-in .upd-text { grid-column: 1 / 3; } .upd-in .upd-x { grid-column: 3; grid-row: 1; align-self: start; }
.upd-in .upd-new { grid-column: 1; justify-self: start; } .upd-in .btn { grid-column: 2 / 4; justify-content: center; }
@media (max-width: 640px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) { /* телефон: текст и ✕ строкой, «Что нового» и «Обновить» под ними */
  .upd { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: none; display: grid; grid-template-columns: 1fr auto auto; gap: 6px 10px; }
  .upd-text { grid-column: 1 / 3; } .upd-x { grid-column: 3; grid-row: 1; align-self: start; }
  .upd-new { grid-column: 1; justify-self: start; } .upd .btn { grid-column: 2 / 4; justify-content: center; }
}

/* ───── 3D-визуализатор (viz.js): сцена во весь экран + панель стиля справа, на телефоне — снизу ───── */
body.viz-open { overflow: hidden; }
.viz { position: fixed; inset: 0; z-index: 45; display: grid; grid-template-columns: 1fr 380px; background: #0b0d12; color: var(--text); }
.viz.panel-off { grid-template-columns: 1fr 0; }
.viz-stage { position: relative; min-width: 0; min-height: 0; background: #0b0d12; }
.viz-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: grab; }
.viz-canvas:active { cursor: grabbing; }
.viz-top { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.viz-top > * { pointer-events: auto; }
.viz-top .btn.ghost, .viz-top .tb { background: rgba(22,26,33,.82); color: #edeef2; border-color: rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.viz-top .tb { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.12); }
/* замок в 3D — тот же, что над чертежом: включён — объекты не перетаскиваются */
.viz-top .tb.viz-lock.on { background: var(--warn); color: var(--on-warn, #fff); border-color: var(--warn); }
.viz-title { color: #edeef2; font-weight: 700; font-size: 13px; background: rgba(22,26,33,.72); padding: 7px 12px; border-radius: 999px; backdrop-filter: blur(6px); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-seg { display: inline-flex; background: rgba(22,26,33,.82); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 3px; gap: 2px; backdrop-filter: blur(6px); }
.viz-seg button { border: 0; background: transparent; color: #cfd3db; border-radius: 7px; padding: 6px 10px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.viz-seg button.on { background: var(--accent); color: var(--accent-fg, #fff); }
.viz-panel .viz-seg { background: var(--surface2); border-color: var(--line); backdrop-filter: none; }
.viz-panel .viz-seg button { color: var(--muted); }
.viz-panel .viz-seg button.on { color: var(--accent-fg, #fff); }
.viz-top .viz-menu { margin-left: auto; }
.viz-joy { display: none; position: absolute; left: 18px; bottom: 22px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); touch-action: none; }
.viz-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
@media (pointer: coarse) { .viz-joy { display: block; } }
.viz-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: #cfd3db; font-size: 12px; background: rgba(22,26,33,.72); padding: 6px 12px; border-radius: 999px; max-width: 92%; text-align: center; pointer-events: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* при наборе ломаной линии в подсказке появляются кнопки — они должны нажиматься */
.viz-hint .hint-btn { pointer-events: auto; }
.viz-hint .hint-btn.ghost { color: #edeef2; }
.viz-pop { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; color: #edeef2; font-size: 13px; background: rgba(22,26,33,.9); border: 1px solid rgba(255,255,255,.12); padding: 8px 12px; border-radius: 12px; max-width: 92%; }
.viz-pop .btn.ghost { color: #edeef2; border-color: rgba(255,255,255,.18); }
.viz-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cfd3db; font-weight: 700; background: #0b0d12; padding: 20px; text-align: center; }
.viz-panel { background: var(--surface); border-left: 1px solid var(--line); overflow-y: auto; padding: 10px 12px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.viz.panel-off .viz-panel { display: none; }
.viz-sec { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface); }
.viz-sec-h { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.viz-sec-h .hint { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 600; }
.viz-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.viz-row:last-child { margin-bottom: 0; }
.viz-row .lbl input[type=number] { width: 64px; }
.viz-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.viz-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border: 1px solid var(--line); background: var(--surface2); border-radius: 10px; padding: 8px; cursor: pointer; text-align: left; color: var(--text); }
.viz-card .sw { width: 100%; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); }
.viz-card b { font-size: 12.5px; }
.viz-card small { font-size: 10.5px; color: var(--muted); line-height: 1.2; } /* описание стиля 3D: --dim давал 2,9:1 (08.11.2026) */
.viz-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.viz-auto { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); margin-bottom: 8px; }
.viz-panel textarea { width: 100%; border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 8px; background: var(--surface2); resize: vertical; margin-bottom: 8px; font-size: 13px; }
.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.viz-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 0; }
.viz-grid input[type=color] { width: 100%; height: 34px; border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 2px; background: var(--surface2); cursor: pointer; }
.viz-grid input[type=number], .viz-grid select { width: 100%; }
.viz-color { display: flex; gap: 4px; align-items: center; }
.viz-color input[type=color] { flex: 1 1 auto; min-width: 0; }
.viz-color select { flex: 1 1 auto; min-width: 0; }
/* «Указать в 3D»: включённый режим выбора стены с окном */
#vzPickWall { flex: none; white-space: nowrap; }
#vzPickWall.on { background: var(--accent); color: var(--accent-fg, #fff); border-color: var(--accent); }
.viz-objs { max-height: 220px; overflow-y: auto; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; font-size: 13px; }
.viz-obj { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: pointer; color: var(--muted); }
.viz-obj b { color: var(--text); }
@media (hover: hover) { .viz-obj:hover { background: var(--surface2); } }
.viz-obj.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.viz-obj .bad { color: var(--err); font-weight: 700; }
.viz-obj .viz-x { margin-left: auto; border: 0; background: transparent; color: var(--dim); cursor: pointer; font-weight: 800; padding: 2px 6px; border-radius: 6px; }
@media (hover: hover) { .viz-obj .viz-x:hover { color: var(--err); background: var(--surface); } }
#vzAddBtn.on { background: var(--accent); color: var(--accent-fg, #fff); border-color: var(--accent); }
@media (max-width: 960px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .viz { grid-template-columns: 1fr; grid-template-rows: 1fr minmax(0, 46vh); }
  .viz.panel-off { grid-template-columns: 1fr; grid-template-rows: 1fr 0; }
  .viz-panel { border-left: 0; border-top: 1px solid var(--line); padding: 8px 10px 20px; }
  .viz-title { max-width: 100%; order: 5; flex-basis: 100%; font-size: 12px; }
  .viz-cards { grid-template-columns: 1fr 1fr; }
  .viz-hint { font-size: 11px; bottom: 8px; left: 150px; transform: none; max-width: calc(100% - 160px); }
  .viz-pop { bottom: 40px; left: 150px; transform: none; max-width: calc(100% - 160px); }
}

/* ───── print sheet ───── */
.print-sheet { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; color: #000; }
  .top, .app, .toast, .dlg, .viz, .upd { display: none !important; }
  .print-sheet { display: block; }
  .p-room { page-break-after: always; break-after: page; }
  .p-room:last-child { page-break-after: auto; break-after: auto; }
  .p-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #0B6BD3; padding-bottom: 6px; margin-bottom: 10px; }
  .p-head h1 { font-size: 18px; margin: 0; } .p-head .p-meta { font-size: 12px; color: #444; text-align: right; }
  .p-head svg { height: 40px; width: auto; }
  .p-head .p-code { flex: none; margin: 0 14px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #000; line-height: 1.2; }
  .p-head .p-code svg { height: 11mm; display: block; margin: 0 auto 1px; }
  .p-head .p-code.none { font-weight: 400; letter-spacing: 0; color: #777; }
  .p-client { font-size: 12px; margin-bottom: 6px; color: #333; }
  .p-draw svg { width: 100%; height: auto; max-height: 125mm; display: block; border: 1px solid #ddd; border-radius: 6px; }
  .p-res { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0; font-size: 13px; }
  .p-res b { font-size: 15px; }
  .p-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 12px; }
  .p-tables table { width: 100%; border-collapse: collapse; }
  .p-tables th, .p-tables td { border-bottom: 1px solid #ddd; padding: 2px 4px; text-align: left; }
  .p-tables th { font-size: 10px; text-transform: uppercase; color: #0B6BD3; }
  .p-notes { margin-top: 8px; font-size: 12px; white-space: pre-wrap; }
  /* смета помещения сразу под чертежом листа замера (07.11.2026): рамка, суммы справа, ИТОГО белым по синему */
  .p-est { margin: 10px 0; padding: 6px 10px 8px; border: 2px solid #0B6BD3; border-radius: 8px; background: #f6faff; font-size: 13px; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-est h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: #0B6BD3; }
  .p-est table { width: 100%; border-collapse: collapse; }
  .p-est th, .p-est td { border-bottom: 1px solid #d9dde6; padding: 3px 4px; text-align: left; }
  .p-est th { font-size: 10px; text-transform: uppercase; color: #0B6BD3; }
  .p-est th:last-child, .p-est td:last-child { text-align: right; white-space: nowrap; }
  .p-est td:first-child { font-weight: 700; }
  .p-est tr.tot td { border: 0; padding: 6px; background: #0B6BD3; color: #fff; font-size: 16px; font-weight: 800; }
  .p-foot { margin-top: 10px; font-size: 10px; color: #777; border-top: 1px solid #ddd; padding-top: 4px; }
  .p-draw .g-poly, .p-draw .g-ellipse { fill: #fff; stroke: #0B6BD3; } .p-draw .g-dim, .p-draw .g-corner text { fill: #000; stroke: #fff; }
  .p-draw .g-corner circle { fill: #fff; stroke: #000; } .p-draw .g-corner.base circle { fill: #0B6BD3; stroke: #0B6BD3; } .p-draw .g-corner.base text { fill: #fff; }
  .p-draw .g-grid line { stroke: #eee; } .p-draw .g-grid line.m { stroke: #ddd; }
}

/* ───── узкий экран: в шапке только иконки, чтобы хватило места номеру и названию объекта ───── */
@media (max-width: 1240px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .actions .btn span { display: none; }
  .actions .btn { padding: 7px 8px; }
  .actions .btn.user-btn { padding: 4px; } /* кружок 24 px - высота как у кнопок со значком 18 px */
}
/* ───── mobile ───── */
@media (max-width: 960px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .top { padding: 6px 10px; gap: 8px; flex-wrap: wrap; }
  .logo svg { height: 32px; }
  /* шапка на телефоне (08.10.2026): строка 1 - логотип, «В базу», название объекта и кнопки Объекты / Сервис / Меню / значок
     пользователя (до 19.10.2026 - Объекты / Ссылка / Меню); строка 2 - вкладки помещений на всю ширину и «Смета». Раньше кнопки
     занимали строку одни, а вкладкам и «+» оставалось около 110 px */
  .project { display: contents; }
  .logo { order: 0; } .objnum, .hist-btn { order: 1; } .project-name { order: 2; flex: 1 1 80px; min-width: 60px; max-width: none; width: auto; }
  .actions { order: 3; margin-left: auto; }
  .tabs { order: 4; flex: 1 1 200px; min-width: 0; } #tabEst { order: 5; flex: none; }
  .actions .btn span { display: none; }
  .actions .btn { padding: 7px 8px; }
  .app { display: flex; flex-direction: column; height: auto; padding: 8px; gap: 8px; }
  /* страница на телефоне длиннее экрана и прокручивается вся (на компьютере прокручивается только панель внутри .app). При
     height: 100% у body закрепленная шапка (position: sticky) держалась лишь первый экран, а ниже уезжала вверх: после перехода
     к карточке кнопок разделов на экране не оставалось. min-height вместо height - шапка видна на всей длине страницы
     (01.11.2026, владелец: «сделай так, чтобы верхняя строка меню не исчезала при скроллинге») */
  body { height: auto; min-height: 100%; } /* у html высота остается 100%, иначе min-height в процентах не от чего считать */
  .stage { order: 1; }
  .panel { order: 2; overflow: visible; }
  .canvas-wrap { height: 52vh; min-height: 280px; }
  .toolbar { right: 6px; top: 6px; }
  :root { --panel-w: 100%; }
  .menu-list { right: auto; left: 0; }
  .actions .menu .menu-list { right: 0; left: auto; }
}
/* телефон: 16 кнопок над чертежом не помещались в ряд - панель 589 px обрезалась слева, «Вписать», «+», «−» и переключатели
   размеров оставались за экраном (08.10.2026). Теперь это полоса в две строки над чертежом, а не поверх него */
@media (max-width: 640px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .canvas-wrap { display: flex; flex-direction: column; height: 56vh; }
  #draw { flex: 1 1 auto; height: auto; min-height: 0; }
  /* 9 колонок (08.11.2026): кнопок 17 («Обозначения» - семнадцатая), с фото эскиза под чертежом - 18. При 8 колонках
     «Обозначения» уходила одна в третью строку и отнимала у чертежа 37 px; теперь при любом наборе - две строки (80 px) */
  .toolbar { position: static; order: -1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; width: 100%; padding: 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .toolbar .tb { width: auto; min-width: 0; height: 34px; }
  .toolbar .tb-sep { display: none; }
}
@media (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) {
  .seg-btn { font-size: 12px; padding: 8px 4px; }
  .tbl th, .tbl td { padding: 3px 2px; font-size: 13px; }
  .tbl input[type=number] { padding: 5px 5px; }
  .fields.grid2 { grid-template-columns: 1fr 1fr; }
  .logo svg { height: 22px; } .project-name { flex-basis: 56px; min-width: 56px; } /* логотип, «В базу», название и три кнопки - в одной строке шапки (при 32 px кнопки уходили на третью строку) */
  /* 19.10.2026: кнопок в строке четыре (Объекты, Сервис, Меню, значок пользователя) - от логотипа остается знак «С» 28 px (полный
     логотип 90 px), значок истории у номера скрыт (история - в «Сервисе»). Иначе кнопки уходили второй строкой, шапка 123 px */
  .top #logo svg { display: none; } .top #logo svg.logo-mark { display: block; width: 28px; height: 28px; }
  .top .btn.hist-btn { display: none; }
  .dlg { width: 100vw; max-width: 100vw; max-height: var(--vh100); border-radius: 0; } /* max-width: без него браузер ограничивает окно своим calc(100% - 6px - 2em), и оно остается с полями */
  .dlg-body { max-height: calc(var(--vh100) - 64px); }
  #dlgSettings, #dlgProjects, #dlgDealer, #dlgItems1c { margin-top: 0; } /* телефон: окно с поиском - от верха экрана */
  .dlg:has(input[type="search"]) { margin-top: 0; }
  /* меню шапки на телефоне - лист снизу на всю ширину: выпадающий список 240 px с переносами строк был выше экрана и уходил за его край (08.10.2026) */
  .menu-list, .actions .menu .menu-list { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; min-width: 0; max-height: calc(var(--vh100) - 48px); border-radius: 14px 14px 0 0; padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(20,22,29,.25); }
  .menu-list::before { content: ''; display: block; flex: none; width: 36px; height: 4px; border-radius: 2px; background: var(--line2); margin: 2px auto 8px; } /* ручка листа */
  .menu-list button, .menu-list .menu-file { padding: 10px 10px; flex: none; }
  .menu-list .menu-cap, .menu-list .menu-user { flex: none; }
  html.menu-open body::after { content: ''; position: fixed; inset: 0; background: rgba(20,22,29,.35); z-index: 19; } /* затемнение под листом; касание по нему закрывает меню (app.js closeMenus) */
  .quick-walls select.sel { width: 88px; } .quick-walls select.sel.deg { width: 64px; } .quick-walls input[type=number] { width: 70px; } .quick-walls td.calc { font-size: 11px; white-space: normal; }
}

/* ───── вход и права (auth-ui.js): окно входа, меню пользователя, «Пользователи и права», вкладка «Доступ» ───── */
.dlg.login { width: min(440px, 94vw); }
.login-msg:empty { display: none; }
.login-msg { color: var(--warn); font-weight: 600; margin: 0 0 10px; }
.hint.err { color: var(--err); font-weight: 600; margin-top: 0; }
.setup-box { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; background: var(--surface2); }
.setup-box summary { cursor: pointer; font-weight: 700; color: var(--accent-ink); }
.setup-box .fields { margin-top: 8px; }
.menu-user:empty { display: none; }
.menu-user { display: flex; flex-direction: column; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.menu-who { display: flex; flex-direction: column; padding: 2px 10px 6px; line-height: 1.3; }
.menu-who span { color: var(--dim); font-size: 12px; }
.objnum.in-db.readonly { border-style: dashed; color: var(--muted); border-color: var(--line2); background: var(--surface2); cursor: help; }
.status.ro { background: var(--surface2); color: var(--muted); border: 1px solid var(--line2); }
.status.dno { background: var(--surface2); color: var(--text); border: 1px solid var(--line2); font-weight: 600; } /* номер заказа у дилера и номер заказа 1С в списке «Объекты» (28.10.2026) */
.status.dep { background: var(--surface2); color: var(--muted); border: 1px solid var(--line2); } /* подразделение 1С объекта в списке «Объекты» (06.11.2026) */
.set-ro { margin: 10px 0 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--muted); }
.acc-info p { margin: 0 0 8px; }
.perm-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.perm-list li.yes { color: var(--ok); } .perm-list li.no { color: var(--dim); }
.usr-key { padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface2); line-height: 1.45; }
.usr-key.warn { border-color: var(--warn); }
.usr-key .btn { margin-top: 8px; }
.usr-form { margin-top: 12px; padding: 12px; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft); }
.usr-form .set-head { margin-top: 10px; }
.usr-form .set-head:first-child { margin-top: 0; }
.perm-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.perm-checks .chk { align-items: flex-start; font-weight: 500; font-size: 13px; }
.perm-checks .chk input { margin-top: 1px; flex: none; }
.perm-checks .hint { grid-column: 1 / -1; }
.proj.usr .kit { font-size: 12px; }
.usr-group { margin: 12px 2px 4px; font-weight: 700; font-size: 13px; color: var(--text); } /* группа подразделения 1С в окне «Пользователи» (06.11.2026) */
.usr-group span { color: var(--muted); font-weight: 600; margin-left: 4px; }
.usr-group:first-child { margin-top: 2px; }
/* «Идеи пользователей» в окне «Пользователи и права» (06.11.2026): кнопка со счетчиком новых идей дилеров и список обращений */
#usrIdeas.has { border-color: var(--accent-line); color: var(--accent-ink, var(--accent)); font-weight: 700; }
#usrIdeas.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
.usr-ideas { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.idea-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.idea-bar .chk { font-size: 13px; }
.idea-row { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 8px 12px; }
.idea-row.done { border-left-color: var(--line2); opacity: .85; }
.idea-row.focus { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); opacity: 1; } /* идея, к которой перешли из колокольчика (07.11.2026) */
.idea-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 13px; color: var(--muted); }
.idea-head b { color: var(--text); }
.idea-when { margin-left: auto; font-size: 12px; color: var(--dim); white-space: nowrap; }
.idea-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; font-size: 14px; line-height: 1.4; }
.idea-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 10px; }
#usrUser1cRow.with-dept { flex-wrap: wrap; } /* подразделение и склады пользователя 1С - строкой под выбором (06.11.2026) */
#usrUser1cDept { flex-basis: 100%; font-weight: 400; }
@media (max-width: 640px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) { .perm-checks { grid-template-columns: 1fr; } }
/* Telegram Mini App (бот дилеров, tg.js): то, что в Telegram на телефоне не работает или не нужно, скрыто; вход - через Telegram.
   Логотип скрыт, только пока он ссылка на построитель: после входа (класс start-on, app.js applyRoleUi) он открывает начальный
   экран, а другого пути к экрану нет - с 08.11.2026 в Telegram он виден, как в браузере телефона */
.tg #btnLaser, .tg [data-export="dxf"], .tg [data-export="svg"], .tg [data-pdf="print"], .tg .menu-file, .tg [data-au="logout"], .tg [data-au="password"], .tg #logo:not(.start-on) { display: none !important; }
.tg body { overscroll-behavior: none; }
.tg header.top { padding-top: max(6px, env(safe-area-inset-top)); }
.tg .app { padding-bottom: env(safe-area-inset-bottom); }
/* раскрой: усадка X/Y в одной ячейке, настройка шва строками */
.shrink-xy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.shrink-xy .field-note { grid-column: 1 / -1; }
.shrink-xy input.manual { border-color: var(--accent); }
/* Спецраскрой в карточке «Раскрой полотна» (docs/ПЛАН-спецраскрой.md): галка, крест помещения, углы с подрезками, подсказки */
.fields .spec-cut { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--sep); } /* тот же пунктир, что у остальных разделителей внутри разделов (04.11.2026) */
.spec-cut .spec-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.spec-cut label.chk { flex-direction: row; align-items: center; color: var(--text); font-size: 13px; }
.spec-cut label.spec-cross { flex-direction: row; align-items: center; gap: 6px; margin-left: auto; color: var(--text); font-size: 13px; }
.spec-cut label.spec-cross input { width: 72px; }
.spec-cut label.spec-cross + label.spec-cross { margin-left: 0; } /* «Стороны угла» и «Крест» - справа рядом */
.spec-note { display: grid; gap: 4px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.spec-note b { color: var(--text); }
.spec-note .btn { margin-left: 6px; }
.seam-set { display: grid; gap: 6px; margin-top: 8px; }
.seam-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.seam-row > .lbl:first-child { flex-basis: 100%; color: var(--text, inherit); }
.seam-row .sel { width: auto; flex: 1 1 150px; }
.seam-row input[type=number] { width: 64px; }
.chk.mini { font-size: 12px; font-weight: 500; color: var(--muted); gap: 4px; }
.chk.mini input { width: 13px; height: 13px; margin: 0; }
/* сворачивание блока размеров помещения */
.fold-btn { font-size: 12px; gap: 3px; }
.fold-btn .chev { display: inline-block; transition: transform .15s; transform: rotate(-90deg); }
.fold-btn.on .chev { transform: none; }
/* полоса «Размеры и диагонали свернуты - показать» убрана 06.11.2026 (Юрий @utaliiev): размеры показывает та же кнопка
   «Размеры», а что это за строка - знак «?» в конце строки помещения, после корзины (index.html .room-head) */
.room-btns .faq { width: 22px; height: 22px; font-size: 12px; margin-left: 3px; align-self: center; }
.room-btns .btn.small { padding: 5px 7px; } /* значки чуть ближе друг к другу: строка помещения со знаком «?» умещается целиком */
/* «Поставить на чертеже» - черная кнопка (просьба владельца 02.10.2026); в темной теме - светлая на темном */
.btn.black { background: var(--text); color: var(--paper); border-color: var(--text); }
@media (hover: hover) { .btn.black:hover { background: var(--text); border-color: var(--text); opacity: .86; } }
/* гардина с привязкой к стенам: полоса в натуральную ширину, ось, размер участка у окна; ниша (гардина Г) и окно */
.g-fix.ln .strip { fill: var(--surface); stroke: var(--muted); stroke-width: 1.2; pointer-events: none; }
.g-fix.ln.c-black .strip { fill: #2a2d35; stroke: var(--text); }
.g-fix.ln .axis { fill: none; stroke: var(--dim); stroke-width: 1; stroke-dasharray: 6 3; pointer-events: none; }
.g-fix.ln.c-black .axis { stroke: #c9ccd4; }
.g-fix.ln.gard .halo { fill: none; stroke: var(--accent); stroke-width: 6; opacity: .35; stroke-dasharray: none; }
.g-fix.ln.gard.sel .strip { stroke: var(--accent); stroke-width: 1.8; }
.g-fix .gdim { stroke: var(--text); stroke-width: 1.2; }
.g-fix .g-dim.part, .g-dim.part { font-size: 11px; font-weight: 800; fill: var(--text); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.g-part.niche { fill: url(#gNiche); stroke: none; }
.g-hatch { stroke: var(--dim); stroke-width: 1; opacity: .55; }
.g-win { stroke: var(--accent); stroke-width: 9; }
.g-win-in { stroke: var(--paper); stroke-width: 5; }
.g-win-mid { stroke: var(--accent); stroke-width: 1; }
/* строка гардины в таблице объектов: вдоль стороны, от стены, начало, конец */
.gw-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; }
.gw-row label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); font-weight: 600; }
.gw-row input[type=number] { width: 62px; padding: 5px 6px; }
.gw-row select.sel { width: auto; min-width: 74px; padding: 5px 6px; }
.tbl tr.line-pt.gw td { padding-top: 0; }
/* Настройки -> Профили: галки, какие профили световых линий и гардин показывать в списках выбора. Таблица по маркам
   (03.10.2026, «все разбросано»): слева марка с галкой «вся марка» и счетчиком на голубой полосе, справа профили ровной
   сеткой - модель и ширина у правого края ячейки; неотмеченный профиль серым */
.set-head .prof-cnt { margin: 0 4px 0 auto; font-weight: 500; }
.set-page .prof-head { margin: 16px 0 8px; font-size: 15px; }
.prof-head::before { content: ''; flex: none; width: 4px; height: 16px; border-radius: 2px; background: var(--accent); }
.prof-tbl { border: 1px solid var(--card-line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.prof-brand { display: grid; grid-template-columns: minmax(136px, 16%) minmax(0, 1fr); }
.prof-brand + .prof-brand { border-top: 1px solid var(--sep); }
.prof-bh { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 8px; row-gap: 1px; padding: 8px 10px; background: var(--head-bg); border-right: 1px solid var(--sep); cursor: pointer; }
.prof-bh input { grid-row: 1 / 3; margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--accent); }
.prof-bh b { font-size: 13.5px; line-height: 1.3; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.prof-bn { grid-column: 2; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.prof-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 12px; align-content: start; padding: 5px 8px; } /* колонки профилей: длинное название переносится по словам, описание - под ним */
.prof-item { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 7px; min-width: 0; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1.25; }
@media (hover: hover) { .prof-item:hover { background: var(--surface2); } }
.prof-item input { flex: none; margin: 0; width: 15px; height: 15px; accent-color: var(--accent); }
.prof-item .pm { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: break-word; word-break: normal; }
.prof-item .pw { flex: none; margin-left: auto; padding-left: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prof-item:has(input:not(:checked)) .pm, .prof-item:has(input:not(:checked)) .pw { color: var(--dim); font-weight: 500; }
@media (max-width: 560px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) { /* телефон: марка строкой над своими профилями */
  .prof-brand { grid-template-columns: 1fr; }
  .prof-bh { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; border-right: 0; border-bottom: 1px solid var(--sep); }
  .prof-bh input { grid-row: auto; margin: 0; }
  .prof-bn { grid-column: auto; }
}
/* Раскрой -> Внутренний вырез: строки вырезов в карточке и штриховка выреза на чертеже */
.cut-row .x { border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 6px; }
@media (hover: hover) { .cut-row .x:hover { color: var(--err); background: var(--surface2); } }
.cut-row .note { font-weight: 500; color: var(--dim); }
.cut-row .note.err { color: var(--err); }
.g-cut { fill: url(#gCut); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; } /* периметр выреза рисуется как периметр полотна */
.g-cut.bad { fill: none; stroke: var(--err); stroke-width: 1.5; stroke-dasharray: 5 3; }
.g-cut.trim { fill: none; stroke: var(--dim); stroke-width: 1.2; stroke-dasharray: 6 4; } /* обрезка края: контур наложенного потолка, полотно уже обрезано по нему */
.g-cut.slit { fill: var(--err); stroke: var(--err); stroke-width: 1.6; } /* разрез полотна от выреза к краю: полоса 0,5 см, на чертеже - красная линия */
.g-cutg { cursor: default; } /* вырез закреплён на чертеже: положение задают отступы в карточке «Раскрой» */
.g-dim.cut.side { font-size: 11px; font-weight: 700; }
.g-dim.cut { font-size: 11px; font-weight: 700; fill: var(--text); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
/* Сдвиг стены: контур по замерам пунктиром, длины измененных стен, подпись сдвига, строки сдвигов в карточке */
.g-poly-old { fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.g-dim.shift { fill: var(--accent); font-weight: 800; }
.g-dim.shift-note { font-size: 10px; font-weight: 700; fill: var(--dim); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; pointer-events: none; }
/* «Сдвиг стены» (05.11.2026, автор задачи Юрий @utaliiev по фото: «оптимизируй размеры окон выбора угла, сделай их в одну
   строку, при необходимости немного уменьши кнопку „Сдвинуть"»): в списках углов одна буква, поэтому они короткие и не
   тянутся на всю строку (общее правило .seam-row .sel растягивало первый список, и остальное уезжало на вторую строку);
   поля, подписи и кнопка компактнее - строка выбора и каждая строка списка сдвигов умещаются целиком */
/* Строку выбора раньше ломало общее правило .seam-row > .lbl:first-child (заголовок строки во всю ширину): поле «от» с
   углом занимало первую строку, а «до», отступ и кнопка уходили на вторую. Здесь первая метка - обычная (05.11.2026).
   06.11.2026 (Юрий @utaliiev: «сделай поменьше поля выбора сторона и ввода размеров... кнопку „Сдвинуть" расположи справа»):
   раздел стал сворачиваемым подразделом (index.html details.cmd-sec), поэтому строка выбора - прямой потомок .cmd-sec-b;
   списки и поле отступа еще уже, кнопка «Сдвинуть» прижата к правому краю строки. */
.room-shift .cmd-sec-b > .seam-row > .lbl:first-child { flex: 0 0 auto; flex-basis: auto; color: var(--muted); }
.room-shift .seam-row { gap: 5px; }
.room-shift .seam-row .sel { flex: 0 0 auto; width: auto; min-width: 40px; padding: 4px 13px 4px 5px; font-size: 11.5px; }
.room-shift .seam-row .sel.dir { min-width: 56px; } /* окно направления: в нем слова «внутрь» и «наружу» (05.11.2026) */
.room-shift .seam-row .lbl { gap: 3px; font-size: 11.5px; }
.room-shift .seam-row input[type=number] { width: 40px; padding: 4px 5px; font-size: 11.5px; }
.room-shift .seam-row .btn.small { padding: 4px 7px; font-size: 11.5px; }
.room-shift .cmd-sec-b > .seam-row > .btn.small { margin-left: auto; } /* «Сдвинуть» - справа строки */
.room-shift .cmd-sec-b { padding: 6px 7px 8px; } /* узкая панель: строка выбора умещается целиком */
.room-shift .cmd-sec-b > .seam-row { margin-bottom: 2px; }
.room-shift #shiftList .seam-row { margin-top: 5px; }
/* подпись «какие стены выбраны» убрана 06.11.2026 (Юрий @utaliiev): она в подсказке кнопки «Сдвинуть», а строка выбора -
   окна «от», «до», отступ, направление и кнопка - одной ровной строкой; порядок полей: сначала расстояние, потом направление */
.room-shift .cmd-sec-b > .seam-row > .lbl { white-space: nowrap; } /* «от A», «до B», «5 см» - каждое целиком */
.room-shift .cmd-sec-b > .seam-row > .sel.dir { margin-left: 1px; }
.shift-row .x { border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 6px; }
@media (hover: hover) { .shift-row .x:hover { color: var(--err); background: var(--surface2); } }
.shift-row .note { font-weight: 500; color: var(--dim); }
.shift-row .note.err { color: var(--err); }
/* профиль по периметру: таблица стен в карточке */
.perim-tbl select.sel { width: 100%; }
.perim-hint { margin: 6px 0; }
/* окно выбора профиля (app.js: openPicker): быстрый поиск, группа «Популярные»; список профиля открывает обертка .prof-pick */
.prof-pick { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.prof-pick::after { content: ''; position: absolute; inset: 0; cursor: pointer; }
.pick-pop { position: fixed; z-index: 65; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 8px; font-size: 13px; }
.pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pick-head > b { flex: 1 1 100%; font-size: 13px; }
.pick-q { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line2); background: var(--field); color: var(--text); border-radius: var(--r-sm); padding: 7px 9px; }
.pick-q:focus, .prof-q:focus { outline: 2px solid var(--accent-line); outline-offset: 0; border-color: var(--accent); }
.pick-head .x { flex: none; border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 7px; border-radius: 6px; }
@media (hover: hover) { .pick-head .x:hover { color: var(--text); background: var(--surface2); } }
.pick-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; }
.pick-cap { position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 6px 8px 3px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.pick-grp.pop .pick-cap { color: #e67700; }
.pick-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: 1px solid transparent; background: none; color: var(--text); padding: 5px 8px; border-radius: 8px; cursor: pointer; font: inherit; }
.pick-item b { font-weight: 600; }
.pick-item span { font-size: 11.5px; color: var(--muted); }
@media (hover: hover) { .pick-item:hover, .pick-item.act { background: var(--surface2); } }
.pick-item.on { border-color: var(--accent-line); background: var(--accent-soft); }
.pick-item.on b { font-weight: 700; }
.pick-note { padding: 2px 8px 6px; font-size: 11.5px; color: var(--dim); }
/* значки типов объектов (app.js FIX_ICON): в окне выбора - слева от названия, без строки поиска; в поле списка #fixType - слева от
   выбранного. Цвета и толщины - как у знаков на чертеже (.g-fix) */
.pick-pop.pick-nos .pick-list { margin-top: 0; }
.pick-pop:focus { outline: none; }
.pick-item:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -1px; }
.pick-pop.pick-nos .pick-cap { padding: 5px 8px 2px; }
.pick-item.ico { flex-direction: row; align-items: center; gap: 10px; padding: 2px 8px; }
@media (pointer: coarse) { .pick-item.ico { padding: 8px 8px; } } /* под палец - строки выше */
.pick-item.ico b { font-weight: 500; }
.pick-item.ico.on b { font-weight: 700; }
.pick-item .pick-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: inherit; color: inherit; }
.pick-item .pick-tx > span { font-size: 11.5px; color: var(--muted); }
.fx-pick { container-type: inline-size; }
.fx-pick .fx-cur { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.fx-pick select.sel { padding-left: 34px; }
@container (max-width: 179px) { /* узкое поле (телефон): значок не отнимает места у названия - значки остаются в окне выбора */
  .fx-pick .fx-cur { display: none; }
  .fx-pick select.sel { padding-left: 9px; }
}
.fxi { display: block; flex: none; width: 20px; height: 20px; overflow: visible; }
.fxi .b { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; }
.fxi .l { fill: none; stroke: var(--text); stroke-width: 1.2; }
.fxi.spot .b { stroke: var(--info); }
.fxi.chand .b { stroke: var(--orange); stroke-width: 2.2; }
.fxi.pipe .b { stroke: var(--muted); }
.fxi.vent .l { stroke: var(--muted); stroke-width: 1.1; }
.fxi.cornice .b { stroke-width: 1.4; }
.fxi.cornice .l { stroke-width: 1; }
.fxi .ln { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.fxi.trackIn .ln { stroke-linecap: butt; }
.fxi .lamp { fill: var(--text); stroke: var(--paper); stroke-width: 1; }
.fxi .strip { fill: var(--surface); stroke: var(--muted); stroke-width: 1.2; }
.fxi .axis { fill: none; stroke: var(--dim); stroke-width: 1; stroke-dasharray: 3 1.5; }
.fxi.light .ln { stroke: #e0a400; stroke-width: 5; stroke-linecap: butt; }
.fxi .core { fill: none; stroke: #fff5c2; stroke-width: 1.6; }
.fxi.level .ln { stroke-width: 2.8; stroke-linecap: butt; stroke-linejoin: miter; }
.pick-empty { padding: 10px 8px; color: var(--muted); }
/* Настройки -> Профили: быстрый поиск и звездочка «популярный» */
.prof-q { width: 100%; margin: 6px 0 0; border: 1px solid var(--line2); background: var(--field); color: var(--text); border-radius: var(--r-sm); padding: 7px 9px; }
.prof-star { flex: none; margin-left: 2px; padding: 0 2px; border-radius: 4px; font-size: 16px; line-height: 1; color: var(--dim); cursor: pointer; }
@media (hover: hover) { .prof-star:hover { color: #e67700; } }
.prof-star.on { color: #f59f00; }
.prof-star:focus-visible { outline: 2px solid var(--accent-line); }

/* Заказ дилера (05.10.2026): в панели только помещение, «Полотно» и «Раскрой»; в карточке клиента - контрагент и телефон.
   Заказ по чертежу (html.order-full, state.full, дилерская версия 26.10.2026) - все карточки панели, как у розничного объекта */
.order-mode:not(.order-full) #secPerim, .order-mode:not(.order-full) #secFixtures, .order-mode:not(.order-full) #secLed,
.order-mode:not(.order-full) #secNotes, .order-mode:not(.order-full) #secLog,
.order-mode #secClient .obj-only { display: none !important; }
#secClient .order-only { display: none; }
.order-mode #secClient .order-only { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.order-mode #secClient .order-only .hint { flex: 1 1 160px; margin: 0; }
.order-mode #secClient #fullWrap, .order-mode #secClient #consWrap { flex-wrap: nowrap; align-items: flex-start; } /* галка «Смета по чертежу»: подпись рядом с галкой, переносится сама */
.order-mode #secClient #fullWrap input, .order-mode #secClient #consWrap input { flex: none; margin-top: 1px; }
/* план объекта в карточке клиента (plan-ui.js, 27.10.2026): время замера, монтаж, исполнители, история статуса и этапа */
#planBox { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
#planBox[hidden] { display: none; }
#planBox .pl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
#planBox .pl-form:empty, #planBox .pl-logs:empty { display: none; }
#planBox .pl-head, #planBox .pl-note { grid-column: 1 / -1; }
#planBox .pl-head { font-size: 12px; font-weight: 700; color: var(--text); }
#planBox .pl-note { margin: 0; }
#planBox .pl-logs { display: flex; flex-direction: column; gap: 6px; }
.pl-log summary { cursor: pointer; font-size: 12px; color: var(--muted); font-weight: 600; }
.pl-log summary b { color: var(--text); }
.pl-log ol { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.pl-log li { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.pl-log li span { color: var(--dim); }
/* Заказ без потолков (20.10.2026, кнопка «Смета» окна «Новое помещение»; html.no-rooms - app.js noRoomsUi): в панели только
   карточка «Заказ дилера», вместо итогов и чертежа - пояснение #noRoomsNote с кнопками «Открыть смету» и «+ Добавить потолок» */
.no-rooms #roomCard, .no-rooms #secParams, .no-rooms #secLayout, .no-rooms #secPerim, .no-rooms #secFixtures,
.no-rooms #secLed, .no-rooms #secNotes, .no-rooms #results, .no-rooms #canvasWrap, .no-rooms #messages { display: none !important; }
/* карточка «Фото объекта» (04.11.2026, Юрий): плитки фото, подпись (дата, кто добавил), крестик «убрать» - видна и у заказа без
   сметы по чертежу, и у заказа без потолков: фото с места не зависят от сметы */
/* «Фото объекта» (05.11.2026): список файлов - плитка фото или видео слева (104 px), справа дата и автор, комментарии к файлу и поле
   нового комментария; у видео на плитке первый кадр и знак ▶, нажатие открывает файл целиком. До 05.11 - сетка плиток без комментариев */
.photo-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.photo-grid:empty { display: none; }
.ph { position: relative; margin: 0; min-width: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: start; }
.ph .ph-media { position: relative; display: block; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface2); }
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph video { background: #000; }
.ph-play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 34px; text-align: center; padding-left: 3px; box-sizing: border-box; pointer-events: none; }
.ph-body { min-width: 0; }
.ph figcaption { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-cmts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ph-cmts:empty { display: none; }
.ph-cmt { position: relative; font-size: 12.5px; line-height: 1.3; padding: 4px 24px 4px 8px; border-radius: 10px; background: var(--surface2); overflow-wrap: anywhere; }
.ph-cmt b { font-weight: 700; margin-right: 4px; }
.ph-cmt time { font-size: 11px; color: var(--dim); }
.ph-cmt span { display: block; white-space: pre-line; }
.ph-cdel { position: absolute; top: 3px; right: 4px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: var(--dim); font-size: 11px; line-height: 18px; cursor: pointer; padding: 0; }
@media (hover: hover) { .ph-cdel:hover { background: var(--err); color: var(--on-err, #fff); } }
.ph-cin-row { display: flex; gap: 5px; margin-top: 5px; }
.ph-cin-row .ph-cin { flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: 12.5px; }
.ph-del { position: absolute; top: 4px; left: 76px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 24px; cursor: pointer; padding: 0; z-index: 1; }
@media (hover: hover) { .ph-del:hover { background: var(--err); } }
/* заказ дилера и дилерская версия - без карточки «Фото объекта» и ее пункта в листе «⋯» (05.11.2026, Юрий); то же делает app.js renderPhotos */
.order-mode #secPhotos, .role-dealer #secPhotos, .order-mode #mbMenu [data-mb="secPhotos"], .role-dealer #mbMenu [data-mb="secPhotos"] { display: none !important; }
.no-rooms-note { margin: 24px auto; max-width: 520px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: center; }
.no-rooms-note p { margin: 0 0 14px; }
.no-rooms-note .row { justify-content: center; gap: 8px; }
.status.ord { background: var(--accent); color: var(--accent-fg, #fff); }
.status.off { background: var(--surface2); color: var(--muted); }
/* статус заказа 1С и иконки этапов (оплата, отгрузка, производство) в «Объектах», 23.10.2026 (app.js o1cHtml): иконка серая -
   этап не пройден, зеленая - пройден, бледно-зеленая - частично; подсказка по наведению и касанию (bindFaq) */
.status.c1c { border: 1px solid var(--line2); background: var(--surface2); color: var(--muted); font-family: inherit; line-height: inherit; cursor: help; }
.status.c1c.work { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.status.c1c.done { border-color: rgba(18,150,94,.4); background: rgba(18,150,94,.1); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ok); }
.status.c1c.cancel { border-color: rgba(210,59,59,.35); background: rgba(210,59,59,.07); color: var(--err); }
.status.c1c.open { color: var(--text); }
.status.c1c .src { margin-right: 4px; opacity: .65; font-weight: 800; }
.o1c-steps { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.o1c-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dim); opacity: .5; cursor: help; }
.o1c-step svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.o1c-step.on { color: var(--ok); opacity: 1; }
.o1c-step.part { color: var(--ok); opacity: .55; }
@media (hover: hover) { .o1c-step:hover, .o1c-step.open { background: var(--surface2); opacity: 1; } }
.o1c-step:focus-visible, .status.c1c:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
#dealerSearch { width: 100%; margin: 10px 0 4px; }
.dealer-list { display: grid; gap: 6px; margin-top: 8px; max-height: 55vh; overflow: auto; }
.dealer-row { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--card-line); border-radius: var(--r-sm); background: var(--field); color: var(--text); font: inherit; cursor: pointer; }
@media (hover: hover) { .dealer-row:hover, .dealer-row:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; } }
.dealer-row .nm { font-weight: 600; }
.dealer-row .sub { font-size: 12px; color: var(--muted); }
#price1cInfo { margin: 6px 0 10px; }

/* Сворачиваемые подразделы: группы карточки «Раскрой полотна» («Рулон и усадка», «Из остатка полотна», «Шов: положение и
   подгонка», «Вырезы и разрезы полотна»), углы в «Диагоналях», подразделы окна настроек выделенной линии.
   Заголовок - цветная полоса с меткой слева, а блоки внутри раздела разделены пунктиром (04.11.2026, автор задачи
   Юрий @utaliiev по снимку мини-приложения: «выдели цветом заголовки разделов, такие как „из остатка полотна", „шов:
   положение" и т.д., чтобы они не сливались, и внутри раздела сделай разделение линиями, чтобы информация не
   сливалась»). Раньше заголовок был обычным черным текстом, только жирнее, и читался как еще одна строка с данными.
   Цвета - переменные темы: светлая, фирменная и темная получают свой оттенок сами; телефонная версия подраздела -
   в mbar.css (.cmd-sec.sub), иначе перенесенное на телефон «Полотно» осталось бы без заливки. */
.cmd-sec { border: 1px solid var(--card-line); border-radius: 10px; background: var(--surface); margin-top: 6px; }
.cmd-sec > summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-weight: 700; font-size: 13px; cursor: pointer; list-style: none; border-radius: 10px;
  color: var(--accent-ink); background: var(--accent-soft); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent-ink); }
.cmd-sec > summary::-webkit-details-marker { display: none; }
.cmd-sec > summary::before { content: '▸'; flex: none; color: var(--accent-ink); font-size: 11px; transition: transform .12s; }
.cmd-sec[open] > summary::before { transform: rotate(90deg); }
.cmd-sec[open] > summary { border-bottom: 1px solid var(--accent-line); border-radius: 10px 10px 0 0; }
.cmd-sec > summary .faq { background: var(--surface); } /* знак вопроса на цветной полосе: своя заливка, иначе сливается с ней */
@media (hover: hover) { .cmd-sec > summary:hover { background: var(--surface2); background: color-mix(in srgb, var(--accent) 20%, var(--surface)); } }
.cmd-sec-n { margin-left: auto; font-weight: 600; font-size: 11.5px; color: var(--muted); }
.cmd-sec-b { padding: 6px 10px 9px; }
.cmd-sec-b > .fix-cmd-row:first-child, .cmd-sec-b > .cmd-note:first-child, .cmd-sec-b > .cmd-grid:first-child { margin-top: 0; }
/* соседние блоки внутри раздела - через пунктир (строка с полями и список под ней, пояснение и кнопки). Черта идет
   только между двумя видимыми блоками: пустой блок (:empty, список без строк) и блок после скрытого (hidden) ее не
   получают - иначе линия висела бы сразу под заголовком или в пустом низу раздела */
.cmd-sec-b > *:not([hidden]) + *:not(:empty) { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--sep); }

/* диагонали подгруппами по углам: у каждого угла свой сворачиваемый блок со всеми диагоналями из него */
.diag-groups { display: grid; gap: 6px; margin: 6px 0 10px; }
.diag-groups .cmd-sec-b { padding: 4px 8px 8px; }
.tbl.diag-grp { margin: 0; }
.tbl.diag-grp td, .tbl.diag-grp th { padding: 3px 6px; }
.tbl.diag-grp tr.dchk td.n { color: var(--muted); font-style: italic; }
.tbl.diag-grp input[type=number] { width: 100%; }

/* ───── комплектующие 1С (08.10.2026): раздел настроек «База данных 1С», окно «Каталог 1С», карточка позиции, строки в смете ───── */
.db1c-tbl td:first-child { color: var(--muted); font-weight: 700; white-space: nowrap; }
.db1c-tbl td.dim { color: var(--dim); font-size: 12px; }
.db1c-flags label.span2 input[type=checkbox] { width: auto; margin: 0; flex: none; }
.db1c-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin-top: 6px; }
.db1c-folders label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.db1c-folders label input { width: auto; margin: 0; flex: none; }
.db1c-tools { display: flex; gap: 6px; margin-left: auto; }
/* справочник фактур из 1С (26.10.2026): Настройки -> Прайсы, кнопка «Обновить из 1С», отчет и таблица добавленных фактур */
.fab1c-box { margin-top: 16px; }
.fab1c-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fab1c-bar .btn { flex: none; }
.fab1c-bar .hint { margin: 0; flex: 1 1 260px; }
.fab1c-report { margin-top: 6px; }
.fab1c-tbl td:first-child { width: 1%; text-align: center; }
.fab1c-tbl td:last-child { width: 1%; }
.fab1c-tbl input[type=checkbox] { width: auto; margin: 0; accent-color: var(--accent); }
.fab1c-tbl .w { color: var(--dim); font-size: 12px; font-weight: 400; }
#dlgItems1c { width: min(1100px, 96vw); }
.i1c-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.i1c-bar .prof-q { flex: 1 1 220px; margin: 0; }
.i1c-bar .sel { width: auto; max-width: 260px; }
.i1c-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.i1c-folders { display: flex; flex-direction: column; gap: 2px; max-height: min(62vh, 600px); overflow-y: auto; }
.i1c-folders button { text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--text); font-weight: 600; font-size: 13px; }
.i1c-folders button.active { background: var(--accent-soft); color: var(--accent-ink); }
.i1c-folders button small { color: var(--dim); font-weight: 500; font-size: 11px; margin-left: 4px; }
.i1c-subs { margin-bottom: 10px; }
.i1c-subs:empty { display: none; }
.i1c-grid > .hint { grid-column: 1 / -1; margin: 0; }
.i1c-main .hint { margin: 0 0 8px; }
.i1c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.i1c-item { display: flex; flex-direction: column; gap: 6px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 8px; cursor: pointer; color: var(--text); }
@media (hover: hover) { .i1c-item:hover { border-color: var(--accent-line); background: var(--accent-soft); } }
.i1c-item img, .i1c-item .i1c-noimg { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; background: #fff; }
.i1c-noimg { display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 12px; background: var(--surface2); }
.i1c-item .nm { font-weight: 600; font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.i1c-item .pr { color: var(--accent-ink); font-weight: 700; font-size: 13px; margin-top: auto; }
.i1c-item .pr.none { color: var(--dim); font-weight: 500; }
.i1c-more { display: flex; justify-content: center; margin-top: 12px; }
.i1c-card-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.i1c-card-wrap img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); }
.i1c-card-wrap .i1c-noimg { aspect-ratio: 1; border-radius: var(--r-sm); }
.i1c-meta { color: var(--dim); font-size: 12px; margin-bottom: 8px; }
.i1c-desc { white-space: pre-wrap; font-size: 13px; line-height: 1.4; margin-top: 12px; }
.i1c-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.est-pick-row img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; flex: none; }
.est-pick-row .i1c-noimg { width: 36px; height: 36px; flex: none; font-size: 0; border-radius: 6px; }
.est-pick-row.i1c .nm { flex: 1; }
.est-pick-cap { padding: 8px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); background: var(--surface2); border-bottom: 1px solid var(--line); }
.est-jr.i1c td.im { width: 48px; }
.est-jr.i1c td.nm { width: auto; }
.est-jr.i1c td.un { width: 70px; }
.est-jr.i1c td.p, .est-jr.i1c td.st { width: 120px; }
.est-jr.i1c td.im img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 6px; display: block; }
.est-jr.i1c td.nm small { display: block; color: var(--dim); font-size: 11px; }
.est-jr.i1c td.p { white-space: nowrap; }
.est-jr.i1c .lnk { border: 0; background: none; padding: 0; color: var(--text); font-weight: 600; cursor: pointer; text-align: left; text-decoration: underline dotted; text-underline-offset: 3px; font-size: inherit; }
@media (hover: hover) { .est-jr.i1c .lnk:hover { color: var(--accent-ink); } }
.est-jseg { margin: 10px 0; width: max-content; max-width: 100%; }
.est-j1c-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.est-j1c-bar .est-find { flex: 1 1 200px; }
.est-j1c-bar .sel { width: auto; max-width: 240px; }
/* Папки комплектующих 1С, как список с группами в 1С (08.10.2026): путь, подпапки со счетчиками, остаток сотруднику */
.i1c-path, .est-pick-crumbs, .est-j1c-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; margin: 0 0 8px; min-width: 0; }
.i1c-path .sep, .est-pick-crumbs .sep, .est-j1c-path .sep { color: var(--dim); }
.i1c-path b, .est-pick-crumbs b, .est-j1c-path b { overflow-wrap: anywhere; }
.i1c-path .lnk, .est-pick-crumbs .lnk, .est-j1c-path .lnk, .i1c-scope .lnk, .est-pick-list .hint .lnk, .i1c-grid .hint .lnk { border: 0; background: none; padding: 0; color: var(--accent-ink); cursor: pointer; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.i1c-scope { font-size: 12px; color: var(--dim); margin: 0 0 8px; }
.i1c-subs-list, .est-pick-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin: 0 0 10px; }
.i1c-sub, .est-pick-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; text-align: left; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface2); padding: 8px 10px; cursor: pointer; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; }
.i1c-sub span, .est-pick-sub span { min-width: 0; overflow-wrap: anywhere; }
.i1c-sub small, .est-pick-sub small { flex: none; color: var(--dim); font-weight: 500; font-size: 11px; }
@media (hover: hover) { .i1c-sub:hover, .est-pick-sub:hover { border-color: var(--accent-line); background: var(--accent-soft); } }
.i1c-item .pa { color: var(--dim); font-size: 11px; line-height: 1.25; }
.i1c-item .st, .est-pick-row .pr small.st { color: var(--ok); font-size: 12px; font-weight: 600; }
.i1c-item .st.none, .est-pick-row .pr small.st.none, .est-jr.i1c td.st.none { color: var(--dim); font-weight: 500; }
.i1c-stock { font-size: 13px; margin: 0 0 8px; }
.i1c-stock b { color: var(--ok); }
.i1c-stock.none b { color: var(--dim); }
/* склад остатка комплектующих 1С (05.11.2026): выбор в окнах товаров и разбивка по складам в карточке позиции */
.set-page > .pref-staff > .set-head { margin-top: 16px; }
label.i1c-store { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); margin: 0; }
label.i1c-store .sel { width: auto; max-width: 240px; }
.est-pick-store { margin: 0 0 8px; }
.i1c-stores { font-size: 13px; margin: -4px 0 10px; }
.i1c-stores summary { cursor: pointer; color: var(--dim); }
.i1c-stores .tbl { margin: 4px 0 0; max-width: 360px; }
.i1c-stores .tbl td { padding: 3px 8px; }
.i1c-stores .tbl td.p { text-align: right; white-space: nowrap; }
.i1c-stores tr.mine td { font-weight: 600; }
.i1c-stores tr.grp td { padding-top: 8px; color: var(--dim); font-weight: 700; border-bottom: 1px solid var(--line); } /* итог подразделения 1С над его складами (06.11.2026) */
.i1c-stores tr.grp.mine td { color: var(--text); }
.est-jr.i1c td.st { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ok); font-weight: 600; }
.est-pick-seg { margin-top: 8px; width: max-content; max-width: 100%; }
.est-pick-seg .seg-btn { flex: 1 1 auto; min-width: 0; white-space: normal; }
.est-pick-seg .seg-btn small { margin-left: 4px; opacity: .75; font-weight: 600; }
.est-pick-path { margin-top: 8px; }
.est-pick-path:empty, .est-pick-list:empty { display: none; }
.est-pick-path .est-pick-subs { max-height: 30vh; overflow-y: auto; }
.est-pick-row .pr small { display: block; text-align: right; }
.est-pick-more { display: block; margin: 8px auto; }
.est-j1c-subs { margin-top: 4px; }
@media (max-width: 640px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .i1c-wrap { grid-template-columns: 1fr; }
  .i1c-folders { flex-direction: row; flex-wrap: nowrap; max-height: none; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
  .i1c-folders button { flex: none; white-space: nowrap; }
  .i1c-card-wrap { grid-template-columns: 1fr; }
  .i1c-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .i1c-subs-list, .est-pick-subs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .est-jr:not(.i1c) td.un { min-width: 60px; } /* таблица журнала на телефоне листается вбок; единица не сжимается до нуля */
  .est-jr.i1c td.nm { min-width: 140px; }
  .est-jr.i1c td.im { width: 36px; }
  .est-jr.i1c td.im img { width: 32px; height: 32px; }
  .est-jr.i1c td.st { white-space: normal; }
}
@media (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) { /* телефон: папки списком в одну колонку, длинные названия не рвутся посреди слова */
  .i1c-subs-list, .est-pick-subs { grid-template-columns: minmax(0, 1fr); }
}

/* Вход дилера по номеру телефона в Mini App и строка «Дилер 1С» в карточке пользователя (08.10.2026) */
.tg-phone { margin: 4px 0 12px; align-items: center; }
.usr-dealer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.usr-dealer .lbl { font-weight: 600; }
/* долг дилера заказа из 1С (debt-ui.js, 16.10.2026): красный - дилер должен, зеленый - долга нет или должны мы;
   плашка над чертежом (.res.debt - в блоке итогов, раздел «stage»), строка окна «Новое помещение» и шапка листа сметы (на экране; в печать и PDF не идет) */
.quick-debt, .est-debt { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; }
.quick-debt { flex: 1 1 100%; }
.est-debt { display: inline-block; margin-top: 8px; }
.quick-debt small, .est-debt small { color: var(--muted); font-weight: 500; }
.quick-debt.debt-bad, .est-debt.debt-bad { color: var(--err); border-color: rgba(210,59,59,.45); background: rgba(210,59,59,.06); }
.quick-debt.debt-ok, .est-debt.debt-ok { color: var(--ok); border-color: rgba(18,150,94,.45); background: rgba(18,150,94,.07); }
/* заказ дилера по чертежу из Сфера Чатов (01.11.2026): откуда чертеж и почему подставлен этот дилер - строка окна «Новое помещение»
   (app.js paintQuickChat) и окна выбора дилера (chatAsk) */
.quick-chat, .dealer-chat { padding: 6px 10px; border: 1px solid rgba(11,107,211,.35); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--text); font-size: 13px; }
.quick-chat { flex: 1 1 100%; order: -1; }
.dealer-chat { margin: 6px 0 8px; }
.quick-chat .btn { margin-left: 6px; vertical-align: baseline; } /* «Пропустить чертеж» в строке заказа из чата (02.11.2026) */
/* окно «Сообщение дилера» заказа из Сфера Чатов (02.11.2026, app.js chatMsg): полотно и гарпун из текста, комплектующие с позицией 1С */
.chat-msg-dlg { width: min(1000px, 96vw); }
.chat-msg-set { gap: 14px; margin: 10px 0 2px; }
.chat-msg-set label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.chat-msg-set .sel { max-width: 300px; }
.chat-msg-tbl td.cm-raw { max-width: 240px; font-size: 13px; }
.chat-msg-tbl td.cm-item .sel { width: 100%; min-width: 220px; }
.chat-msg-tbl td.cm-qty { white-space: nowrap; }
.chat-msg-tbl td.cm-qty input { width: 76px; }
.chat-msg-tbl td.cm-qty .u { margin-left: 4px; color: var(--muted); font-size: 12px; }
.chat-msg-tbl td.cm-qty .cm-uoff { display: block; margin-top: 2px; color: var(--warn); font-size: 12px; } /* дилер написал другую единицу */
.chat-msg-find { display: block; width: 100%; margin-top: 4px; }
.chat-msg-tbl .cm-st { white-space: nowrap; }
.chat-msg-tbl tr.cm-check .cm-st { background: transparent; color: var(--warn); border: 1px solid var(--warn); }
.chat-msg-tbl tr.cm-none .cm-st { background: var(--surface2); color: var(--muted); }
.chat-msg-tbl tr.cm-ok .cm-st, .chat-msg-tbl tr.cm-saved .cm-st, .chat-msg-tbl tr.cm-pick .cm-st { background: transparent; color: var(--ok); border: 1px solid var(--ok); }
.chat-msg-text { margin-top: 10px; }
.chat-msg-text pre { white-space: pre-wrap; font: inherit; font-size: 13px; margin: 6px 0 0; padding: 8px 10px; background: var(--surface2); border-radius: var(--r-sm); }
@media (max-width: 640px) { /* телефон: строка сообщения - карточкой, позиция во всю ширину */
  .chat-msg-tbl thead { display: none; }
  .chat-msg-tbl tr { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .chat-msg-tbl td { border: 0; padding: 0; }
  .chat-msg-tbl td.cm-raw { max-width: none; }
  .chat-msg-tbl td.cm-item { grid-column: 1 / -1; }
  .chat-msg-tbl td.cm-item .sel { min-width: 0; }
}
/* окно оплаты: варианты суммы (с учетом задолженности, по заказу, своя) и сальдо дилера в 1С (pay-ui.js, 16.10.2026) */
.payw-modes { margin-top: 12px; }
.payw-modes .seg-btn { white-space: normal; line-height: 1.2; }
.payw-modes .seg-btn small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; opacity: .85; }
.payw-modes .seg-btn:disabled { opacity: .45; cursor: not-allowed; }
.payw-saldo { margin-top: 8px; font-size: 13px; color: var(--muted); }
.payw-saldo b.bad { color: var(--err); }
.payw-saldo b.ok { color: var(--ok); }
/* раздел «Касса» (cash-ui.js, 16.10.2026): кассы с остатками и оборотами за период, документы выбранной кассы;
   приход - зеленым с плюсом, расход - красным с минусом; на телефоне документы - карточками */
.dlg.cash { width: min(980px, 96vw); }
.cash-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cash-bar .seg { flex: 0 1 auto; }
.cash-dates-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cash-dates-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cash-dates { font-weight: 700; font-variant-numeric: tabular-nums; }
.cash-wait { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cash-wait small { color: var(--muted); }
.cash-scroll { margin-top: 12px; max-height: 260px; overflow: auto; }
.cash-scroll .tbl { margin-top: 0; }
.tbl th.r, .tbl td.r { text-align: right; }
.cash-boxes tbody tr { cursor: pointer; }
@media (hover: hover) { .cash-boxes tbody tr:hover td { background: var(--surface2); } }
.cash-boxes tbody tr.on td { background: var(--accent-soft); }
.cash-boxes tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }
.cash-in { color: var(--ok); font-weight: 700; white-space: nowrap; }
.cash-out { color: var(--err); font-weight: 700; white-space: nowrap; }
.cash-zero { color: var(--dim); white-space: nowrap; }
.cash-detail { margin-top: 16px; }
.cash-detail h3 { margin: 0 0 8px; font-size: 16px; }
.cash-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cash-tiles > div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--surface); min-width: 0; }
.cash-tiles > div > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.cash-tiles b { font-size: 18px; font-variant-numeric: tabular-nums; }
.cash-tiles .in { border-color: rgba(18,150,94,.45); background: rgba(18,150,94,.06); }
.cash-tiles .out { border-color: rgba(210,59,59,.45); background: rgba(210,59,59,.05); }
.cash-docs { margin-top: 10px; font-size: 13px; }
.cash-docs td { vertical-align: top; }
.cash-none { margin-top: 10px; color: var(--muted); }
@media (max-width: 600px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .cash-bar .seg { width: 100%; }
  .cash-bar .seg.mini .seg-btn { padding: 4px 2px; font-size: 12px; }
  /* длинная подпись периода переносится (08.11.2026): у акта сверки «С начала года» и «Прошлый год» в строку не умещались, и
     «Период» уходил за край окна на телефоне */
  .cash-bar .seg.mini .seg-btn { flex: 1 1 auto; white-space: normal; line-height: 1.15; }
  .cash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-tiles b { font-size: 16px; }
  .cash-boxes th:nth-child(2), .cash-boxes td:nth-child(2) { display: none; }
  .cash-docs thead { display: none; }
  .cash-docs, .cash-docs tbody, .cash-docs tr, .cash-docs td { display: block; width: auto; }
  .cash-docs tr { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; margin-top: 8px; }
  .cash-docs td { border: 0; padding: 2px 0; text-align: left; }
  .cash-docs td:empty { display: none; }
  .cash-docs td::before { content: attr(data-l) ": "; color: var(--muted); font-size: 12px; }
  .cash-docs td.r { text-align: left; font-size: 15px; }
}
@media (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) { .payw-seg .seg-btn { white-space: normal; line-height: 1.2; } } /* способ оплаты и варианты суммы на телефоне - в две строки, а не за край окна */
/* раздел «Подотчет» (advance-ui.js, 08.11.2026): плитки остатка, выдачи и отчеты таблицами (на телефоне - карточками, правила как у
   .cash-docs), форма выдачи с подбором сотрудника, форма отчета: выдачи галками с суммой из каждой, строки расходов, фото чеков */
.dlg.adv { width: min(980px, 96vw); }
.adv-tabs { margin-bottom: 4px; }
.adv-wait { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.adv-wait small { color: var(--muted); }
.adv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.adv-tiles > div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--surface); min-width: 0; }
.adv-tiles > div > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.adv-tiles b { font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adv-tiles .warn { border-color: rgba(210,140,20,.5); background: rgba(210,140,20,.07); }
.dlg.adv h3 { margin: 16px 0 6px; font-size: 15px; }
.adv-tbl { margin-top: 4px; font-size: 13px; }
.adv-tbl td { vertical-align: top; }
.adv-tbl td small { display: block; color: var(--muted); }
.adv-tbl tr.open td { font-weight: 600; }
.adv-none { margin-top: 10px; color: var(--muted); }
.adv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.adv-actions .hint { flex: 1 1 260px; font-size: 12px; color: var(--muted); }
.adv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.adv-foot small { color: var(--muted); }
.adv-form > label, .adv-row > label { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 13px; color: var(--muted); position: relative; }
.adv-form > label > input, .adv-form > label > select, .adv-row > label > input, .adv-row > label > select { color: var(--text); font-size: 15px; }
.adv-row { display: grid; grid-template-columns: 2fr 1fr; gap: 0 12px; }
.adv-unpick { position: absolute; right: 6px; bottom: 5px; }
.adv-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 6px; }
.adv-pick button { text-align: left; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 6px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--text); }
.adv-pick button:hover { background: var(--surface2); }
.adv-pick button b { font-size: 14px; overflow-wrap: anywhere; }
.adv-pick button span, .adv-pick button i { font-size: 12px; color: var(--muted); font-style: normal; }
.adv-advs { display: flex; flex-direction: column; gap: 6px; }
.adv-adv { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; }
.adv-adv.on { border-color: var(--accent); background: var(--accent-soft); }
.adv-adv > span { min-width: 0; }
.adv-adv > span small { display: block; color: var(--muted); }
.adv-adv .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.adv-adv .adv-used { grid-column: 2 / 4; width: min(100%, 220px); justify-self: end; }
.adv-lines { display: flex; flex-direction: column; gap: 8px; }
.adv-line { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.adv-line-top { display: grid; grid-template-columns: 1fr 140px auto; gap: 6px; align-items: center; position: relative; }
.adv-line-top [data-l="unpick"] { position: absolute; right: 190px; top: 50%; transform: translateY(-50%); }
.adv-line-more { display: grid; grid-template-columns: 90px 1fr 120px 150px; gap: 6px; margin-top: 6px; }
.adv-sums { font-size: 13px; color: var(--muted); }
.adv-sums b { color: var(--text); font-variant-numeric: tabular-nums; }
.adv-sums em { color: var(--err); font-style: normal; font-weight: 700; }
.adv-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.adv-file { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 6px; max-width: 100%; }
.adv-file.err { border-color: var(--err); }
.adv-file img, .adv-pdf { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }
.adv-pdf { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--surface2); color: var(--muted); }
.adv-file small { color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-addfile { cursor: pointer; }
.adv-done { margin-top: 10px; display: flex; align-items: flex-start; gap: 8px; }
.adv-done > span { flex: 1 1 auto; }
.adv-step { display: inline-block; white-space: nowrap; font-size: 12px; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
.adv-step.ok { border-color: rgba(18,150,94,.5); color: var(--ok); }
.adv-step.wait { border-color: rgba(210,140,20,.5); color: var(--text); }
.adv-arrow { color: var(--dim); font-style: normal; padding: 0 3px; }
.adv-state { white-space: nowrap; font-weight: 600; }
.adv-state.ok { color: var(--ok); }
.adv-state.err { color: var(--err); }
.adv-state.wait { color: var(--text); }
.dlg.adv .est-note.err { border-color: rgba(210,59,59,.5); }
@media (max-width: 600px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .adv-tabs.seg { width: 100%; }
  .adv-tabs.seg.mini .seg-btn { padding: 4px 2px; font-size: 12px; }
  .adv-tiles b { font-size: 15px; }
  .adv-tbl thead { display: none; }
  .adv-tbl, .adv-tbl tbody, .adv-tbl tr, .adv-tbl td { display: block; width: auto; }
  .adv-tbl tr { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; margin-top: 8px; }
  .adv-tbl td { border: 0; padding: 2px 0; text-align: left; }
  .adv-tbl td:empty { display: none; }
  .adv-tbl td::before { content: attr(data-l) ": "; color: var(--muted); font-size: 12px; }
  .adv-tbl td.r { text-align: left; font-size: 15px; }
  .adv-row { grid-template-columns: 1fr; }
  .adv-line-top { grid-template-columns: 1fr auto; }
  .adv-line-top [data-l="sum"] { grid-column: 1; }
  .adv-line-top [data-l="unpick"] { position: static; transform: none; grid-column: 2; grid-row: 1; }
  .adv-line-more { grid-template-columns: 1fr 1fr; }
  .adv-adv .adv-used { width: 100%; }
}
/* раздел «Согласования» (approvals-ui.js, 08.11.2026): копия раздела Сфера CRM в окне построителя. Классы CRM (.tabs, .toolbar,
   .badge, .tag, .kv, .section, .pager, .empty, .stack, .files, .ap-*) действуют только внутри .apx, цвета - переменные построителя
   (светлая и темные темы). Модальные окна раздела - внутри диалога: снаружи showModal держал бы их под собой */
.dlg.apx { width: min(1100px, 96vw); }
.apx .page.ap { font-size: 14px; }
.apx .row { display: flex; align-items: center; gap: 8px; } .apx .grow { flex: 1; min-width: 0; } .apx .stack { display: flex; flex-direction: column; gap: 8px; }
.apx .small { font-size: 12px; } .apx .dim { color: var(--muted); }
.apx .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }
.apx .btn .ico { width: 14px; height: 14px; }
.apx .btn.sm { padding: 3px 8px; font-size: 12px; }
.apx .btn.ok { color: var(--ok-ink); border-color: rgba(18,150,94,.45); } .apx .btn.danger { color: var(--err-ink); border-color: rgba(210,59,59,.45); }
/* APX-BTN (09.11.2026): у кнопок решения фон прозрачный - иначе он шел из .btn (акцент темы: в SKAI темно-синий, в темной
   теме кремовый), и зеленая и красная подписи на нем не читались; наведение - легкая заливка своим цветом, не акцентом */
.apx .btn.ok, .apx .btn.danger { background: transparent; }
@media (hover: hover) { .apx .btn.ok:hover { background: rgba(18,150,94,.10); border-color: var(--ok-ink); color: var(--ok-ink); }
  .apx .btn.danger:hover { background: rgba(210,59,59,.08); border-color: var(--err-ink); color: var(--err-ink); } }
.apx .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface2); color: var(--muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.apx .badge.warn { background: rgba(183,121,31,.15); color: var(--warn-ink); }
.apx .tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: 12px; background: var(--surface2); }
.apx .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; overflow-x: auto; }
.apx .tabs button { background: none; border: 0; padding: 8px 12px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font: inherit; }
.apx .tabs button.active { color: var(--text); border-color: var(--accent); font-weight: 600; }
.apx .toolbar { position: static; right: auto; top: auto; width: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; border: 0; border-radius: 0; box-shadow: none; padding: 0; background: none; } /* не панель инструментов чертежа (.toolbar: absolute) - иначе фильтры ложатся на шапку окна (08.11.2026) */
.apx .toolbar input, .apx .toolbar select { padding: 6px 9px; font: inherit; } .apx .toolbar .search { min-width: 200px; flex: 1 1 200px; }
.apx .seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r-sm); overflow: hidden; }
.apx .seg button { background: transparent; border: 0; padding: 6px 10px; color: var(--muted); cursor: pointer; font: inherit; } .apx .seg button.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.apx .empty { padding: 32px 16px; text-align: center; color: var(--dim); }
.apx .kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 13px; } .apx .kv .k { color: var(--dim); } .apx .kv .v { min-width: 0; word-break: break-word; }
.apx .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .apx .tbl th.right { text-align: right; }
.apx .pager { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.apx .section { margin-bottom: 14px; } .apx .section h4 { margin: 0 0 6px; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
.apx .files { display: flex; flex-wrap: wrap; gap: 8px; } .apx .files a { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 8px; color: var(--text); background: var(--surface2); font-size: 12px; text-decoration: none; }
.apx .files img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.apx textarea, .apx input[type=search] { font: inherit; }
.apx-modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 5; display: grid; place-items: center; padding: 16px; }
.apx-modal { background: var(--surface); border: 1px solid var(--line2); border-radius: 12px; width: min(560px, 100%); max-height: 92vh; overflow: auto; box-shadow: var(--shadow); }
.apx-modal .mh { padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.apx-modal .mb { padding: 14px 16px; } .apx-modal .mf { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.apx-modal textarea { width: 100%; box-sizing: border-box; font: inherit; }
.apx .ap-agent { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 12px; border: 1px solid rgba(183,121,31,.45); background: rgba(183,121,31,.1); border-radius: var(--r-sm); color: var(--warn-ink); }
.apx .ap-agent svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.apx .ap-sum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 10px; color: var(--muted); font-size: 13px; min-height: 30px; }
.apx .ap-list { display: flex; flex-direction: column; gap: 10px; }
.apx .ap-one { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.apx .ap-card { background: var(--surface); border: 1px solid var(--card-line); border-left: 3px solid var(--line2); border-radius: var(--r-sm); padding: 10px 14px 8px; box-shadow: var(--card-shadow); }
.apx .ap-card.lvl-high { border-left-color: var(--err); } .apx .ap-card.lvl-medium { border-left-color: var(--warn); } .apx .ap-card.lvl-low { border-left-color: var(--ok); }
.apx .ap-card.ap-focus { box-shadow: 0 0 0 2px var(--accent); }
.apx .ap-head { display: flex; align-items: flex-start; gap: 10px; }
.apx .ap-check, .apx .ap-check-ph { margin-top: 6px; width: 16px; flex: none; }
.apx .ap-risk { flex: none; min-width: 48px; text-align: center; padding: 3px 6px; border-radius: 8px; font-weight: 700; font-size: 13px; background: var(--surface2); color: var(--muted); margin-top: 1px; }
.apx .ap-risk.bad { background: rgba(210,59,59,.14); color: var(--err-ink); } .apx .ap-risk.warn { background: rgba(183,121,31,.16); color: var(--warn-ink); } .apx .ap-risk.ok { background: rgba(18,150,94,.14); color: var(--ok-ink); }
.apx .ap-title { font-size: 15px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.apx .ap-amount { margin-left: 4px; font-weight: 700; font-size: 16px; color: var(--text); }
.apx .ap-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.apx .ap-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.apx .ap-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0 74px; }
.apx .ap-status { margin: 8px 0 0 74px; padding: 6px 10px; border-radius: 8px; background: var(--surface2); font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.apx .ap-status svg { width: 15px; height: 15px; }
.apx .ap-status.wait { background: var(--accent-soft); color: var(--accent-ink); } .apx .ap-status.bad { background: rgba(210,59,59,.1); color: var(--err-ink); } .apx .ap-status.done { background: rgba(18,150,94,.1); color: var(--ok-ink); }
.apx .ap-body { margin: 8px 0 0 74px; display: flex; flex-direction: column; gap: 8px; }
.apx .ap-factors { margin: 0; padding-left: 18px; font-size: 13px; } .apx .ap-factors li { margin: 1px 0; } .apx .ap-factors li.strong { color: var(--err-ink); } .apx .ap-factors li.weak { color: var(--warn-ink); }
.apx .ap-advice { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--surface2); } .apx .ap-advice.ok b { color: var(--ok-ink); } .apx .ap-advice.warn b { color: var(--warn-ink); } .apx .ap-advice.bad b { color: var(--err-ink); }
.apx .ap-sec { display: flex; flex-direction: column; gap: 6px; }
.apx .ap-lines td { vertical-align: top; font-size: 13px; } .apx .ap-lines th { font-size: 12px; }
.apx .ap-up { color: var(--err-ink); font-weight: 600; } .apx .ap-down { color: var(--ok-ink); font-weight: 600; }
.apx .ap-spark { width: 90px; height: 22px; vertical-align: middle; } .apx .ap-spark path { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.apx .ap-kv { grid-template-columns: 170px 1fr; }
.apx .ap-months { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; } .apx .ap-months span { white-space: nowrap; }
.apx .ap-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.apx .ap-trip { padding: 6px 10px; border-radius: 8px; background: var(--surface2); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.apx .ap-dups { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(210,59,59,.1); color: var(--err-ink); }
.apx .ap-points { display: flex; flex-wrap: wrap; gap: 4px; } .apx .ap-own { background: var(--accent-soft); }
.apx .ap-files a { max-width: 260px; } .apx .ap-files svg, .apx .ap-files .tag svg { width: 14px; height: 14px; }
.apx .ap-more { margin-left: 74px; } .apx .ap-more-in { padding-top: 6px; }
.apx .ap-toggle { margin: 4px 0 0 66px; }
.apx .ap-ftoggle { display: none; } .apx .ap-warn-text { color: var(--err-ink); }
.apx .ap-talk { gap: 12px; } .apx .ap-talk-who { font-size: 14px; }
.apx .ap-talk-sec { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.apx .ap-talk-sec a.btn { max-width: 100%; white-space: normal; text-align: left; text-decoration: none; }
.apx .ap-talk-h { font-weight: 600; font-size: 13px; color: var(--muted); }
.apx .ap-talk-link { display: flex; gap: 6px; width: 100%; } .apx .ap-talk-link input { flex: 1; min-width: 0; font: inherit; }
.apx .ap-talk-text { white-space: pre-wrap; word-break: break-word; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--surface2); }
.apx-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--err); color: var(--on-err); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: middle; }
@media (max-width: 760px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .apx .ap-ftoggle { display: inline-flex; } .apx .ap-filters:not(.open) { display: none; }
  .apx .ap-head { flex-wrap: wrap; } .apx .ap-actions { width: 100%; justify-content: flex-start; }
  .apx .ap-meta, .apx .ap-status, .apx .ap-body, .apx .ap-more { margin-left: 0; } .apx .ap-toggle { margin-left: -8px; }
  .apx .ap-kv { grid-template-columns: 1fr; } .apx .ap-lines th:nth-child(4), .apx .ap-lines td:nth-child(4) { display: none; }
}
/* касса организации дилера (dcash-ui.js, 07.11.2026): окно по образцу кассы «Сферы» (стили cash-*) плюс кнопки «+ Приход»,
   «− Расход», «⇄ Перемещение», форма записи (приход - зеленая рамка, расход - красная), список касс ответственного, строка
   «Все кассы», записи со щелчком для правки, суммы по статьям; на телефоне записи - карточками (правила .cash-docs) */
.dc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.btn.dc-in { background: var(--ok); border-color: var(--ok); color: var(--on-ok, #fff); }
.btn.dc-out { background: var(--err); border-color: var(--err); color: var(--on-err, #fff); }
.btn.dc-move, .btn.dc-boxes-btn { border-color: var(--line2); }
.dc-boxes-btn[aria-expanded="true"] { background: var(--accent-soft); }
.dc-form, .dc-boxes { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft); }
.dc-form.in { border-color: rgba(18,150,94,.5); background: rgba(18,150,94,.06); }
.dc-form.out { border-color: rgba(210,59,59,.5); background: rgba(210,59,59,.05); }
.dc-form-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dc-form-head > b { font-size: 15px; }
.dc-form-head .seg { flex: 0 1 auto; }
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 10px; margin: 10px 0 8px; }
.dc-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 0; }
.dc-grid label.wide { grid-column: 1 / -1; }
.dc-grid input, .dc-grid select { width: 100%; min-width: 0; font-size: 14px; }
.dc-form .hint.err { margin: 0; align-self: center; }
.cash-boxes tr.dc-all td { border-bottom: 2px solid var(--line); }
.dc-docs tr.can { cursor: pointer; }
@media (hover: hover) { .dc-docs tr.can:hover td { background: var(--surface2); } }
.dc-docs .dc-kind { color: var(--muted); font-weight: 600; }
.dc-move-sum { color: var(--muted); font-weight: 700; white-space: nowrap; }
.dc-ed { color: var(--dim); font-size: 11px; }
.dc-obj { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink, var(--accent)); text-decoration: underline; cursor: pointer; text-align: left; }
.dc-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 14px; }
.dc-cats h4 { margin: 0 0 4px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dc-cat-tbl { margin-top: 0; font-size: 13px; }
.dc-cat-tbl .dc-n { margin-left: 6px; color: var(--dim); font-size: 11px; }
.dc-cat-tbl .dc-n::before { content: "× "; }
.dc-box-row { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(120px, 1fr) minmax(130px, 1fr) auto auto; gap: 6px 8px; align-items: end; margin-top: 8px; }
.dc-box-row.off > input[data-bf="name"] { color: var(--muted); }
.dc-box-row .dc-start { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.dc-box-row .chk { font-size: 13px; padding-bottom: 6px; }
.dc-boxes .row.wrap { margin-top: 8px; }
@media (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) {
  .dc-cats { grid-template-columns: 1fr; }
  .dc-grid { grid-template-columns: 1fr 1fr; }
  .dc-grid label.wide { grid-column: 1 / -1; }
  .dc-box-row { grid-template-columns: 1fr 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .dc-box-row > input[data-bf="name"] { grid-column: 1 / -1; }
  .dc-docs tr.can { position: relative; }
}
/* «Снять кассу» и одноразовый код (dcash-ui.js, 07.11.2026): кнопка и форма снятия - янтарным; окно кода - поле 4 цифр крупно и
   обратный отсчет; «Перемещение» и «Инкассация» без трех подписок - бледные (нажимаются: объясняют условие), их окно - серым */
.btn.dc-take { background: var(--warn); border-color: var(--warn); color: var(--on-warn, #fff); }
.btn.dc-take[aria-expanded="true"] { box-shadow: 0 0 0 2px rgba(183,121,31,.3); }
.btn.dc-lock { opacity: .45; border-style: dashed; cursor: help; }
.btn.dc-lock:hover, .btn.dc-lock:focus-visible { opacity: .7; }
.dc-form.take { border-color: rgba(183,121,31,.55); background: rgba(183,121,31,.07); }
.dc-form.take .dc-form-head .hint { margin: 0; }
.dc-docs .dc-kind.take, .dc-form-head .dc-kind.take { color: var(--warn); }
.dc-code-note { margin: 0 0 8px; }
.dc-code { border-color: var(--accent-line); }
.dc-code p { margin: 8px 0; font-size: 14px; line-height: 1.4; }
.dc-timer { margin-left: auto; font: 700 22px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--accent-ink, var(--accent)); font-variant-numeric: tabular-nums; }
.dc-timer.off { color: var(--err); }
.dc-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 4px; }
.dc-code-in { width: 8.5ch; padding: 8px 10px; font: 700 28px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .3em; text-align: center; }
.dc-code-exp { color: var(--err); font-weight: 600; }
.dc-code .row.wrap .hint.err { margin: 0; align-self: center; }
.dc-lock-box { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: var(--r-md); background: var(--surface2); }
.dc-lock-box p { margin: 8px 0; font-size: 14px; line-height: 1.4; }
.dc-lock-box .hint.err { margin: 0; align-self: center; }
.ntc-code { margin: 2px 0 10px; font: 800 44px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .25em; text-align: center; color: var(--accent-ink, var(--accent)); }
.cu-cash-note { margin-top: 4px; }
/* карточка контрагента и акт сверки (cpty-ui.js, 17.10.2026): разделы карточки, форма правки, новый контрагент; в акте строки
   увеличения долга - красным фоном, уменьшения - зеленым, на телефоне - карточками; плашка долга заказа открывает акт */
.dlg.cpty { width: min(860px, 96vw); }
.cp-sub { margin: -4px 0 10px; color: var(--muted); font-size: 13px; }
.cp-tabs { margin-bottom: 12px; max-width: 360px; }
.cp-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }
.est-note + .cp-sections, .est-note + .cp-form { margin-top: 10px; }
.cp-sec { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px 10px; min-width: 0; }
.cp-sec h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-ink); }
.cp-sec h3 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--dim); }
.cp-f { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 2px 10px; padding: 3px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cp-sec h3 + .cp-f { border-top: 0; }
.cp-f > span { color: var(--muted); font-size: 12px; padding-top: 2px; }
.cp-f > div { overflow-wrap: anywhere; }
.cp-comment { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.cp-trace { margin-top: 8px; color: var(--dim); font-size: 12px; white-space: pre-wrap; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.cp-in { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 0; }
.cp-in.wide { grid-column: 1 / -1; }
.cp-in-btn { justify-content: flex-end; align-items: flex-start; }
.cp-in input, .cp-in select, .cp-in textarea { font-size: 14px; font-weight: 400; }
.cp-kis { margin-top: 12px; }
.cp-ki { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-top: 6px; }
.cp-dups { display: grid; gap: 6px; margin-top: 8px; }
.cp-dup { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.cp-dup small { display: block; color: var(--muted); font-size: 12px; }
.cp-tiles { margin-top: 12px; }
.cp-tiles b { font-size: 16px; }
.cp-tiles .bad { border-color: rgba(210,59,59,.45); background: rgba(210,59,59,.05); }
.cp-tiles .bad b { color: var(--err); }
.cp-tiles .ok b { color: var(--ok); }
.cp-act-scroll { margin-top: 10px; max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.cp-act { margin-top: 0; font-size: 13px; }
.cp-act thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.cp-act td { vertical-align: top; }
.cp-act td small { display: block; color: var(--muted); font-size: 11px; }
/* заказы построителя у строки акта (30.10.2026): кнопка открывает заказ, удаленный - текстом */
.cp-objs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.cp-obj { font: inherit; font-size: 12px; line-height: 1.3; padding: 1px 7px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
@media (hover: hover) { .cp-obj:hover { border-color: var(--accent); } }
.cp-obj.off { cursor: default; border-color: var(--line); background: transparent; color: var(--muted); }
.cp-act tr.up td { background: rgba(210,59,59,.07); background: color-mix(in srgb, var(--err) 9%, var(--surface)); }
.cp-act tr.down td { background: rgba(18,150,94,.08); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.cp-search { width: 100%; margin: 10px 0 4px; }
.quick-debt.cp-go { cursor: pointer; }
@media (hover: hover) { .quick-debt.cp-go:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 700px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) { .cp-sections, .cp-form { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .cp-tabs { max-width: none; }
  .cp-ki { grid-template-columns: minmax(0, 1fr) auto; }
  .cp-ki select { grid-column: 1 / -1; }
  .cp-act-scroll { max-height: none; overflow: visible; border: 0; }
  .cp-act thead { display: none; }
  .cp-act, .cp-act tbody, .cp-act tr, .cp-act td { display: block; width: auto; }
  .cp-act tr { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; margin-top: 8px; }
  .cp-act tr.up { border-color: rgba(210,59,59,.45); background: rgba(210,59,59,.07); }
  .cp-act tr.down { border-color: rgba(18,150,94,.45); background: rgba(18,150,94,.08); }
  .cp-act td, .cp-act tr.up td, .cp-act tr.down td { border: 0; padding: 2px 0; text-align: left; background: none; }
  .cp-act td:empty { display: none; }
  .cp-act td::before { content: attr(data-l) ": "; color: var(--muted); font-size: 12px; }
  .cp-act td.r { text-align: left; font-size: 15px; }
}
/* потолок из остатка полотна другого потолка (20.10.2026): подраздел карточки «Раскрой полотна» и окно предложений */
.rest-box .rest-note { font-size: 13px; line-height: 1.4; margin-top: 6px; }
.rest-box .rest-note.err { color: var(--err); }
.rest-box .rest-note .btn { margin-left: 4px; }
/* строки подраздела («кроится из остатка…», свободный остаток, кнопка «Остатки объекта…») - через пунктир, чтобы не сливались */
.rest-box > *:not([hidden]) + *:not(:empty) { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--sep); }
.rest-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rest-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; }
.rest-row .rest-txt { font-size: 13px; line-height: 1.4; }
.rest-row .rest-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) { .rest-row { grid-template-columns: 1fr; } .rest-row .rest-btns { justify-content: flex-start; } }

/* заявка дилера в «Сферу» и уведомления сотрудника (req-ui.js, notice-ui.js, 27.10.2026) */
.ntc-btn { position: relative; }
.ntc-btn .ntc-n { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--err); color: var(--on-err, #fff); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.ntc-btn.has svg.i { color: var(--accent-ink, var(--accent)); }
.menu-list.ntc-list { width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; }
.ntc-cap { justify-content: space-between; }
.ntc-cap .btn { text-transform: none; letter-spacing: 0; }
.menu-list button.ntc-item { display: grid; gap: 2px; width: 100%; white-space: normal; align-items: start; }
.ntc-item b { font-weight: 700; } .ntc-item span { color: var(--text); font-size: 13px; } .ntc-item small { color: var(--dim); font-size: 11px; }
.ntc-item small { display: flex; gap: 8px; } .ntc-item .ntc-to { margin-left: auto; font-style: normal; font-weight: 600; color: var(--accent); white-space: nowrap; } /* куда ведет уведомление (07.11.2026) */
.menu-list button.ntc-item.unread { background: var(--accent-soft); }
.menu-list button.ntc-item.unread b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.ntc-empty { padding: 10px 12px; }
.ntc-text { font-size: 15px; line-height: 1.45; margin: 0 0 6px; }
.status.req { background: rgba(18,150,94,.1); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ok); border: 1px solid rgba(18,150,94,.4); }
.req-note { color: var(--ok); }
.req-sum { max-height: 50vh; overflow: auto; margin: 6px 0 10px; }
.req-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.req-tab td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.req-tab td.n { text-align: right; white-space: nowrap; }
.req-tab tfoot td { font-weight: 800; border-bottom: 0; padding-top: 8px; }
.req-cmt { display: grid; gap: 4px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.req-cmt textarea { width: 100%; resize: vertical; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 6px 8px; }
.idea-dlg textarea { min-height: 130px; } /* «Предложить идею» (06.11.2026): место для текста обращения */
.idea-dlg #ideaWho { margin-bottom: 10px; }
/* Чат поддержки дилера (support-ui.js, 06.11.2026): окно по образцу Сфера Мессенджера - лента с пузырями (вопросы дилера справа
   зеленым, ответы помощника слева белым, служебные строки по центру), шапка с аватаром, строка ввода внизу; на телефоне - во весь экран */
.dlg.sup-dlg { width: min(560px, 96vw); height: min(760px, 92vh); max-height: 92vh; flex-direction: column; overflow: hidden; }
.dlg.sup-dlg[open] { display: flex; }
.sup-head { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.sup-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-fg, #fff); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex: none; }
.sup-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.sup-who b { font-size: 15px; }
.sup-who span { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 12px; display: flex; flex-direction: column; background: var(--bg); background-image: radial-gradient(circle at 1px 1px, var(--line2) 1px, transparent 0); background-size: 18px 18px; }
.sup-day, .sup-sys { align-self: center; margin: 8px 0 2px; padding: 3px 10px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; max-width: 92%; line-height: 1.35; }
.sup-sys { margin-top: 10px; }
.sup-msg { display: flex; margin-top: 2px; max-width: 100%; }
.sup-msg.first { margin-top: 8px; }
.sup-msg.out { justify-content: flex-end; }
.sup-msg.tmp { opacity: .7; }
.sup-bubble { position: relative; max-width: min(440px, 86%); padding: 7px 11px 18px; border-radius: 15px; background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(16,35,47,.15); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.sup-msg.in.last .sup-bubble { border-bottom-left-radius: 4px; }
.sup-msg.out .sup-bubble { background: #eeffde; color: #0f1419; }
.sup-msg.out.last .sup-bubble { border-bottom-right-radius: 4px; }
:root[data-theme="dark"] .sup-msg.out .sup-bubble { background: #2b5278; color: #f1f3f4; }
.sup-bubble a { color: var(--accent-ink, var(--accent)); text-decoration: underline; }
.sup-msg.out .sup-bubble a { color: #2c7a2a; } :root[data-theme="dark"] .sup-msg.out .sup-bubble a { color: #a9d1f5; }
.sup-meta { position: absolute; right: 9px; bottom: 3px; font-size: 11px; line-height: 14px; color: var(--dim); }
.sup-msg.out .sup-meta { color: #4fae4e; } :root[data-theme="dark"] .sup-msg.out .sup-meta { color: #9cc3e8; }
.sup-fwd { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--line2); font-size: 12px; color: var(--muted); font-weight: 600; }
/* ответ сотрудника «Сферы» в чате поддержки (07.11.2026): подпись с именем и полоса цвета акцента у края пузыря */
.sup-from { margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--accent-ink, var(--accent)); }
.sup-msg.staff .sup-bubble { box-shadow: inset 3px 0 0 var(--accent), 0 1px 2px rgba(16,35,47,.15); }
.sup-msg.out.staff .sup-bubble { box-shadow: inset -3px 0 0 #4fae4e, 0 1px 2px rgba(16,35,47,.15); }
.sup-msg.out .sup-from { color: #2c7a2a; }
:root[data-theme="dark"] .sup-msg.out .sup-from { color: #a9d1f5; } :root[data-theme="dark"] .sup-msg.out.staff .sup-bubble { box-shadow: inset -3px 0 0 #9cc3e8, 0 1px 2px rgba(0,0,0,.3); }
.sup-typing { display: flex; gap: 4px; align-items: center; padding: 12px 12px 13px; }
.sup-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); animation: sup-dot 1.2s infinite; }
.sup-typing i:nth-child(2) { animation-delay: .2s; } .sup-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes sup-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.sup-err { padding: 4px 12px 0; }
.sup-bar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 6px; border-top: 1px solid var(--line); background: var(--surface); }
.sup-bar textarea { flex: 1; resize: none; min-height: 38px; max-height: 120px; padding: 9px 12px; border-radius: 19px; border: 1px solid var(--line2); background: var(--surface2); color: var(--text); font: inherit; font-size: 14px; line-height: 1.3; }
.sup-send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-fg, #fff); font-size: 15px; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; padding: 0 0 0 2px; }
.sup-send:disabled { opacity: .5; cursor: default; }
.sup-foot { display: flex; justify-content: space-between; gap: 8px; padding: 0 8px 6px; background: var(--surface); }
.sup-foot .btn.small { font-size: 12px; padding: 4px 8px; color: var(--muted); }
@media (max-width: 520px) { .dlg.sup-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; inset: 0; margin: 0; border-radius: 0; border: 0; } .sup-bubble { max-width: 90%; } }
/* бренд «Купол» (30.10.2026): внешним пользователям - дилеру без привязки к карточке 1С Сферы и его клиенту - свой знак и имя
   (app.js applyBrand, brand.js KupolBrand). Слово логотипа - цветом текста темы (currentColor); окно входа - значок, имя, подпись */
.logo { color: var(--text); }
/* SKAI-THEME (08.11.2026, решение владельца): светлая тема - вариант 5 «Серый с индиго» (поверхности «Графита», акценты «Неба»): белая шапка с линией индиго и цветным логотипом, кнопки и
   значки индиго, ссылки голубые #2962D9, контур чертежа индиго. Бренд - в акценте, фон нейтральный. */
/* SKAI-ALL (08.11.2026, владелец: «сделай дизайн skai на всех версиях»): эта тема - у всех версий построителя: сотрудники и дилеры
   «Сферы», дилеры SKAI, «Лазер». Светлая - по умолчанию у всех, кроме выбравших в настройках «Светлая (фирменная)» (голубая тема
   :root[data-theme="brand"] выше остается как была); темная - у всех. html:root - та же сила селектора, что была у html.brand-kupol.
   Логотип SKAI - у всех версий (SKAI-LOGO-ALL), логотип «Сферы» - в PDF и печати (brandLogo). Красная подпись - у прозрачных
   кнопок удаления (.btn.ghost.danger), как на снимках SKAI; у сплошной .btn.danger на акценте она не читалась. */
html:root:not([data-theme="brand"]) {
  --accent: #1E2A78; --accent-hot: #16205E; --accent-top: #3F4DA8; --accent-soft: rgba(79,140,255,.13); --accent-line: rgba(79,140,255,.6); --accent-glow: rgba(79,140,255,.3);
  --accent-ink: #2962D9; --info: #2962D9; --accent-fg: #fff; --ico-bg: #1E2A78; --ico-fg: #fff;
  --bg: #ECECEA; --surface: #FFFFFF; --surface2: #F4F4F2; --line: #DEDEDA; --line2: #C6C6C1;
  --card-line: #CFCFCA; --head-bg: #EFEFEC; --head-line: #D6D6D1; --head-hover: #E6E6E2; --sep: #DADAD6; --field: #FFFFFF;
  --text: #1C1C1A; --muted: #5F5F5B; --dim: #8C8C87;
  --paper: #FFFFFF; --grid: #F2F2F0; --grid2: #E2E2DF; --poly-fill: rgba(30,42,120,.07);
  --shadow: 0 6px 24px rgba(28,28,26,.10); --card-shadow: 0 1px 2px rgba(28,28,26,.08), 0 4px 14px rgba(28,28,26,.07);
}
html:root .logo { color: #1E2A78; } /* SKAI-LOGO-ALL: логотип SKAI у всех версий */
/* темная SKAI (08.11.2026, решение владельца - «Голубой SKAI»): выбранное, отметки, первый угол и контур - голубой бренда #7FB0FF с темной
   подписью, кнопки действий - кремовые (--btn-bg). Раньше акцент был кремовым, и белые подписи на нем не читались */
html:root[data-theme="dark"] {
  --accent: #7FB0FF; --accent-hot: #A6C8FF; --accent-top: #9DC2FF; --accent-soft: rgba(127,176,255,.12); --accent-line: rgba(127,176,255,.5); --accent-glow: rgba(127,176,255,.25);
  --btn-bg: #E8E6DC; --btn-bg-hot: #FFFFFF;
  --accent-ink: #ECEAE3; --info: #ECEAE3; --accent-fg: #1C1C1A; --ico-bg: #E8E6DC; --ico-fg: #1C1C1A;
  --bg: #262624; --surface: #30302E; --surface2: #393937; --line: #42423F; --line2: #565652;
  --card-line: #474744; --head-bg: #363634; --head-line: #4A4A47; --head-hover: #3E3E3B; --sep: #42423F; --field: #1F1E1D;
  --text: #ECEAE3; --muted: #A8A69E; --dim: #9A988F; /* было #807E77 - 2,85:1 на --surface2 (08.11.2026) */
  --paper: #2B2B29; --grid: #333331; --grid2: #424240; --poly-fill: rgba(232,230,220,.10);
  --shadow: 0 8px 28px rgba(0,0,0,.5); --card-shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.35);
}
html:root[data-theme="dark"] .logo { color: #fff; }
/* логотип «Сферы» в шапке построителя и «Лазера» в темной теме - белый (брендбук: синий на темном фоне не ставится;
   08.11.2026, «ФЕРА» #0B6BD3 на #30302E было 2,6:1). Селекторы - под рисунок brand.js из дуг (path[stroke]), слова и плашки:
   плашка белая, «НАТЯЖНЫЕ ПОТОЛКИ» цветом шапки - как вырез в одноцветном логотипе. В PDF логотип - отдельный SVG, он синий */
html:root:not(.brand-kupol)[data-theme="dark"] #logo svg path[stroke], html:root:not(.brand-kupol)[data-theme="dark"] #hubLogo svg path[stroke] { stroke: #fff; }
html:root:not(.brand-kupol)[data-theme="dark"] #logo svg text, html:root:not(.brand-kupol)[data-theme="dark"] #hubLogo svg text, html:root:not(.brand-kupol)[data-theme="dark"] #logo svg polygon, html:root:not(.brand-kupol)[data-theme="dark"] #hubLogo svg polygon { fill: #fff; }
html:root:not(.brand-kupol)[data-theme="dark"] #logo svg polygon + text, html:root:not(.brand-kupol)[data-theme="dark"] #hubLogo svg polygon + text { fill: var(--surface); }
html:root[data-theme="dark"] .top, html:root[data-theme="dark"] .dlg-head { border-bottom-color: #4A4A47; }
.btn.ghost.danger { color: var(--err); }
html:root .tab.active .tab-no { color: var(--accent-fg); }
html:root .res.obj, html:root .res.obj small { color: var(--accent-fg); }
html:root[data-theme="dark"] .res.obj .k { color: rgba(28,28,26,.72); }
html:root .mbar .mb.mb-main, html:root .mbar .mb.mb-main.act { color: var(--accent-fg); box-shadow: 0 4px 14px rgba(28,28,26,.3); }
html:root .est-add .est-add-btn.g { color: var(--accent-fg); }
html:root[data-theme="dark"] .est-add .est-add-btn.g { background: var(--btn-bg); border-color: var(--btn-bg); box-shadow: 0 3px 10px rgba(0,0,0,.35); }
@media (hover: hover) { html:root[data-theme="dark"] .est-add .est-add-btn.g:hover { background: var(--btn-bg-hot); border-color: var(--btn-bg-hot); } }
/* конец SKAI-THEME; исходники вариантов и снимки - docs/бренд-построителя-2026-10-30/круг4-2026-11-07/design-2026-11-08 (skai-themes.css, apply_theme.py в plans/potolok/skai-theme) */
/* логотип дилера открывает начальный экран (05.11.2026, Юрий @utaliiev: «экран „с чего начнем" вызывался не через меню, а
   нажатием на логотип слева вверху»): курсор-указатель и легкое затемнение при наведении - видно, что логотип нажимается */
.logo.start-on { cursor: pointer; }
@media (hover: hover) { .logo.start-on:hover { opacity: .82; } }
.logo.start-on:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.login-brand svg { width: 48px; height: 48px; flex: none; border-radius: 11px; }
.login-brand b { display: block; font-size: 18px; line-height: 1.2; }
.login-brand span { display: block; font-size: 12px; color: var(--muted); }
.login-by { color: var(--dim); font-size: 11.5px; }

/* страница «Кастомизация» дилера (02.11.2026): строки товаров по умолчанию (app.js renderCuItems) и окно выбора товара #dlgCuPick */
/* статусы заказов и объектов дилера (06.11.2026): галочки со значками статусов (status.css .status.tone) на странице «Кастомизация» */
.cu-st-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-top: 8px; }
.cu-st { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; font-weight: 500; }
.cu-st input { margin: 0; flex: none; }
.cu-st .status { flex: none; }
.cu-st-how { font-size: 11px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-st-note { margin-top: 8px; }
@media (max-width: 600px) { .cu-st-list { grid-template-columns: minmax(0, 1fr); } }
/* логотип организации дилера в «Кастомизации» (08.11.2026, app.js renderCuLogo): просмотр как шапка листа - белая бумага с синей
   чертой и в темной теме; логотип слева, организация справа, на узком экране организация переносится под логотип */
.set-page > .cu-logo > .set-head { margin-top: 16px; }
.cu-logo-view { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; min-height: 70px;
  background: #fff; color: #14161d; border: 1px solid var(--line); border-bottom: 3px solid #0B6BD3; border-radius: var(--r-md); }
.cu-logo-view svg.dlogo { display: block; flex: 0 1 auto; max-width: 100%; }
.cu-logo-meta { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; min-width: 0; text-align: right; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.cu-logo-meta span { color: #5d6474; font-size: 12px; }
.cu-logo-view.empty { justify-content: center; border: 1px dashed var(--line2); background: var(--surface2); color: var(--muted); }
.cu-logo-none { font-weight: 600; }
.cu-logo-btns { margin-top: 8px; }
.cu-logo-note { margin-top: 6px; }
.cu-items { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cu-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 6px; align-items: center; }
.cu-row .sel { min-width: 0; }
.cu-pick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.cu-pick.empty { background: var(--surface); color: var(--muted); border: 1px dashed var(--line2); font-weight: 600; } /* пустая строка: «Выбрать товар…» без заливки */
.cu-q { width: 100%; box-sizing: border-box; }
.cu-seg { margin-top: 8px; display: inline-flex; }
.cu-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 50vh; overflow: auto; }
.cu-res { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; }
.cu-res span { color: var(--muted); white-space: nowrap; font-size: 12px; }
@media (hover: hover) { .cu-res:hover { border-color: var(--accent); } }
@media (max-width: 600px) { .cu-row { grid-template-columns: minmax(0, 1fr) auto; } .cu-row .sel { grid-column: 1 / -1; } }

/* Начальный экран дилера (05.11.2026, Юрий @utaliiev: «экран, который будет появляться при входе после авторизации; 5 кнопок
   плиткой»). Окно #dlgStart: плитки в две колонки, на телефоне - в одну; «Новый заказ» зеленая, как кнопка заказа в «Объектах». */
.dlg.start { width: min(620px, 94vw); }
.start-who { margin: 0 0 10px; font-weight: 700; color: var(--text); }
.start-who:empty { display: none; }
.start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.start-t { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; width: 100%; padding: 12px 14px;
  border: 1px solid var(--card-line); border-radius: var(--r-md); background: var(--surface2); color: var(--text); font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s ease, background-color .15s ease; }
.start-t[hidden] { display: none; }
.start-t .i { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--accent); }
.start-t b { font-size: 15px; }
.start-t span { font-size: 12px; color: var(--muted); }
.start-t.ok .i { color: var(--ok); }
@media (hover: hover) { .start-t:hover { border-color: var(--accent); background: var(--head-hover); } }
.start-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.start-note { margin: 12px 0 0; }
@media (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) {
  .start-grid { grid-template-columns: 1fr; gap: 8px; }
  .start-t { padding: 10px 12px; }
  .start-t .i { width: 22px; height: 22px; }
  .start-t b { font-size: 14.5px; }
  .start-t span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .start-t { transition: none; } }