/* ux-v3: волны 1–2 (вынесено из index.html, этап 0). */
/* ===================== ux-v3, волна 1 (docs/ux-v3-2026-10-13.md) ===================== */
/* иконки Tabler: встроенный спрайт (js/icons.js); размер 1em, если не задан; один вес 1.75 */
.ti { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }
.ti.sm { width: 14px; height: 14px; } .ti.md { width: 18px; height: 18px; } .ti.lg { width: 24px; height: 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: .5px solid var(--glass-line); }
/* иконка-кнопка 40 × 40 обводкой */
.ibtn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 999px; border: .5px solid var(--line); background: transparent; color: var(--action); cursor: pointer; padding: 0; text-decoration: none; }
.ibtn .ti { width: 20px; height: 20px; } .ibtn:hover { border-color: var(--action); }
.ibtn[aria-pressed="true"] { background: var(--mark); border-color: var(--mark); color: #fff; } /* включено — --mark */
#console button:active:not(:disabled), #console .btn:active, .sheet button:active:not(:disabled) { transform: scale(.97); transition: transform 90ms; }
/* шаг 3 клиента: строка жестов под сценой, полная инструкция за ti-help-circle */
.scene-gest { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.hint-help summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: var(--action); }
.hint-help summary::-webkit-details-marker { display: none; }
.hint-help summary .ti { width: 18px; height: 18px; }
.hint-help p { margin: 6px 0 0; }
.hint-help[open] { flex-basis: 100%; }

/* переходы (ux-v3, 1.3): смена раздела — контент opacity + translateY(8px), 180 ms; страница настроек — translateX(16px), 220 ms */
@keyframes v3-in-y { from { opacity: 0; transform: translateY(8px); } }
@keyframes v3-in-x { from { opacity: 0; transform: translateX(16px); } }
@keyframes v3-in-xb { from { opacity: 0; transform: translateX(-16px); } }
@keyframes v3-fade-in { from { opacity: 0; } }
@keyframes v3-fade-out { to { opacity: 0; } }
@keyframes v3-sheet-up { from { transform: translateY(100%); } }
@keyframes v3-sheet-down { to { transform: translateY(100%); } }
@keyframes v3-pop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes v3-pop-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
#conMain.leave { opacity: 0; transition: opacity var(--dur-fast) linear; }
#conMain.enter { animation: v3-in-y var(--dur-base) var(--ease-out) backwards; }
#conMain.enter-x { animation: v3-in-x 220ms var(--ease-out) backwards; }
#conMain.enter-xb { animation: v3-in-xb 220ms var(--ease-out) backwards; }

/* лист снизу (телефон) / окно по центру (десктоп, решение владельца 13.10): одно API .sheet-bg > .sheet */
.sheet-bg { animation: v3-fade-in 200ms linear backwards; }
.sheet-bg > .sheet { animation: v3-sheet-up var(--dur-sheet) var(--ease-sheet) backwards; }
.sheet-bg.closing { animation: v3-fade-out var(--dur-panel) linear forwards; pointer-events: none; }
.sheet-bg.closing > .sheet { animation: v3-sheet-down var(--dur-panel) var(--ease-sheet) forwards; }
.sheet .grab { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto; flex: none; }
@media (min-width: 900px) {
  .sheet-bg { background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); } /* стеклянная подложка окна */
  .sheet-bg > .sheet { animation: v3-pop-in var(--dur-panel) var(--ease-out) backwards; }
  .sheet-bg.closing > .sheet { animation: v3-pop-out var(--dur-base) var(--ease-out) forwards; }
  .sheet-bg.closing { animation-duration: var(--dur-base); }
  .sheet .grab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* без transform-анимаций; остаётся только opacity 100 ms, чтобы лист не «прыгал» (ux-v3, 1.3) */
  .sheet-bg, #conMain.enter, #conMain.enter-x, #conMain.enter-xb { animation: v3-fade-in 100ms linear backwards !important; }
  .sheet-bg.closing { animation: v3-fade-out 100ms linear forwards !important; }
  .sheet-bg > .sheet, .sheet-bg.closing > .sheet { animation: none !important; }
  #conMain.leave { transition: none !important; }
}

/* карточка заявки v3: телефон — лист 92vh с ручкой и липкой шапкой-стеклом; десктоп — окно по центру ~760 px */
.sheet.bk { padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); gap: 12px; align-content: start; overscroll-behavior: contain; }
@media (max-width: 899px) { .sheet.bk { height: 92dvh; max-height: 92dvh; } }
@media (min-width: 900px) { .sheet.bk { width: min(760px, 92vw); max-height: 90vh; } }
.bk-top { position: sticky; top: 0; z-index: var(--z-sticky); margin: 0 -20px; padding: 8px 20px 10px; display: grid; gap: 6px; border-width: 0 0 .5px; border-radius: var(--r-panel) var(--r-panel) 0 0; }
.bk-top-row { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.bk-who { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.bk-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bk-name h2 { font: 700 20px/1.15 var(--f-display); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599px) { .bk-name { flex-wrap: wrap; row-gap: 4px; } .bk-name h2 { max-width: 100%; white-space: normal; overflow-wrap: break-word; text-overflow: clip; overflow: visible; } } /* узкий экран: чип этапа под именем, имя не обрезается до «Прим…» */
.bk-sub { margin: 0; color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-acts { display: flex; gap: 6px; align-items: center; flex: none; }
/* чип этапа: цвет этапа текстом и точкой, мягкий фон; --c/--cs — токены этапа */
.stc { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 0; color: var(--c, var(--text-2)); background: var(--cs, var(--surface-2)); font: 500 12px/1 var(--f-body); white-space: nowrap; flex: none; }
.stc::before, .dot { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-2)); flex: none; display: inline-block; }
.stc.big { height: 28px; font-size: 13px; cursor: pointer; }
.stc.xs { height: 20px; padding: 0 8px; font-size: 11px; gap: 5px; } .stc.xs::before { width: 6px; height: 6px; }
.pop-wrap { position: relative; display: inline-flex; }
.pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-pop); min-width: 230px; display: grid; padding: 6px; border-radius: var(--r-card); background: var(--surface); border: .5px solid var(--line); animation: v3-fade-in var(--dur-fast) linear; }
.pop.left { right: auto; left: 0; }
.pop button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 400 14px/1.2 var(--f-body); cursor: pointer; }
.pop button:hover { background: var(--surface-2); } .pop button[aria-checked="true"] { font-weight: 600; } .pop button.danger { color: var(--danger); }
.pop button .ti { width: 18px; height: 18px; color: var(--text-2); }
/* «Сейчас»: одна строка и одна кнопка с заливкой — единственная в карточке */
.now { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: var(--r-card); background: var(--surface-2); border: .5px solid var(--line); }
.now .lbl { display: block; font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 6px; }
.now-txt { min-width: 0; flex: 1 1 220px; } .now-txt b { font-size: 16px; font-weight: 600; } .now.warn .now-txt b { color: var(--danger); }
.now .seg.big { flex: 1 1 100%; }
.danger-t { color: var(--danger); } .ok-t { color: var(--ok); }
/* ТЗ клиента: сцена 320/400 px, колесо и жесты — только после клика (ux-v3, 1.4) */
.b3d-box { position: relative; height: 400px; border-radius: var(--r-field); overflow: hidden; background: var(--surface); }
@media (max-width: 899px) { .b3d-box { height: 320px; } }
.b3d-box > .b3d, .b3d-box > #b3dSlot { position: absolute; inset: 0; }
.b3d-guard { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0 0 12px; margin: 0; background: transparent; cursor: pointer; display: grid; align-items: end; justify-items: center; touch-action: pan-y; color: inherit; }
.b3d-ov { position: absolute; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; } .b3d-ov > * { pointer-events: auto; }
.b3d-ov.tl { top: 10px; left: 10px; right: 120px; } .b3d-ov.tr { top: 10px; right: 10px; } .b3d-ov.br { bottom: 10px; right: 10px; } .b3d-ov.bl { bottom: 10px; left: 10px; }
.b3d-ov .chip.static { font-size: 12px; padding: 4px 10px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.b3d-ov .ibtn { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.b3d-ov .ibtn[aria-pressed="true"] { background: var(--mark); }
.b3d-guard .chip.static { font-size: 12px; padding: 5px 12px; background: var(--glass-bg); color: var(--text-2); }
button.chip.static.b3d-on { cursor: pointer; border-color: var(--mark); color: var(--text); }
.b3d-box.full { position: fixed; inset: 0; z-index: var(--z-lightbox); height: auto; border-radius: 0; }
/* лента референсов 96 × 96 сразу под сценой, всегда раскрыта */
.ref-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.ref-strip > button, .ref-strip > .ins-card { position: relative; flex: none; width: 96px; height: 96px; padding: 0; border-radius: var(--r-field); overflow: hidden; border: .5px solid var(--line); background: #e9e5df; cursor: zoom-in; }
.ref-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-strip > button.on3d { border: 2px solid var(--mark); }
.ref-strip .cap { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 999px; font: 500 10px/1.2 var(--f-mono); background: rgba(0, 0, 0, .66); color: #fff; }
.ref-strip > button.on3d .cap { background: var(--mark); }
.ref-strip > .ins-card { display: grid; place-items: center; padding: 6px; background: var(--surface); color: var(--text); font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; text-align: center; cursor: default; }
/* секции под замком до «Созвон состоялся» */
.lock-line { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; margin: 0; }
.lock-line .ti { width: 16px; height: 16px; }
.bk-sec.locked .lock-body { opacity: .5; pointer-events: none; }
.bk-sec.locked { cursor: not-allowed; }
.offer-ph { display: grid; place-items: center; height: 96px; border: .5px dashed var(--line); border-radius: var(--r-field); color: var(--text-2); font-size: 13px; text-align: center; padding: 8px; }
/* «Прочее»: свёрнутые строки с итогом; раскрытие grid-template-rows 0fr → 1fr (тот же механизм — у календаря в волне 2) */
.fold-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 0; border: 0; background: none; color: var(--text); font: 500 14px/1.3 var(--f-body); text-align: left; cursor: pointer; }
.fold-h .ti { transition: transform var(--dur-base) var(--ease-out); color: var(--text-2); }
.fold-h[aria-expanded="true"] .ti { transform: rotate(180deg); }
.fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-move) var(--ease-out); }
.fold > div { overflow: hidden; min-height: 0; }
.fold.open { grid-template-rows: 1fr; }
.dep-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dep-row select, .dep-row input { padding: 6px 10px; font-size: 13px; }

/* доска и список: полоса 3 px цветом этапа, точка в заголовке колонки, чип этапа (ux-v3, 2.2) */
.card { box-shadow: inset 3px 0 0 var(--c, transparent); padding-left: 14px; }
.card .card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.card .card-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col h4 { justify-content: flex-start; align-items: center; gap: 8px; }
.col h4 .cnt { margin-left: auto; font-variant-numeric: tabular-nums; }
.bitem .nm { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* редактор этапов: образец цвета, 12 образцов + свой цвет */
.st-sw { width: 32px; height: 32px; padding: 0; border-radius: 999px; border: .5px solid var(--line); background: transparent; display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.st-sw i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); display: block; pointer-events: none; }
.st-pal { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 2px 0 8px; }
.st-pal button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; }
.st-pal button[aria-pressed="true"] { border-color: var(--text); }
.st-pal input[type="color"] { width: 36px; height: 28px; padding: 0; border: .5px solid var(--line); border-radius: 8px; background: none; }
.st-pal .auto { width: auto; border-radius: 999px; background: none; border: .5px solid var(--line); color: var(--action); font-size: 12px; padding: 0 10px; }


/* ---------- волна 2 (ux-v3): единый календарь, календарь периода, FAB, листы ---------- */
:root { --ev-call: var(--action); --ev-session: var(--st-sessions, var(--ok)); --ev-trip: var(--mark-soft); }
.cbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: .5px solid var(--line); background: transparent; color: var(--text); cursor: pointer; flex: none; }
.cbtn:hover { border-color: var(--action); }
/* шапка календаря: стекло, липкая */
.cal-bar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; margin-bottom: 10px; border-radius: var(--r-card); }
.cal-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
.cal-bar .sp { flex: 1 1 0; }
.cal-title { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text); font: 500 16px/1 var(--f-body); cursor: pointer; padding: 8px 6px; border-radius: var(--r-field); }
.cal-title .ti { width: 16px; height: 16px; color: var(--text-2); transition: transform var(--dur-base) var(--ease-out); }
.cal-title[aria-expanded="true"] .ti { transform: rotate(180deg); }
.cal-bar .seg button { padding: 6px 12px; font-size: 13px; }
@media (max-width: 480px) { .cal-bar .seg { order: 5; flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, 1fr); } .cal-bar .sp { display: none; } .cal-title { flex: 1 1 0; justify-content: flex-start; } }
/* фильтр = легенда: чипы с точками цвета типа */
.leg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: .5px solid var(--line); background: var(--surface-2); color: var(--text); font: 500 13px/1 var(--f-body); cursor: pointer; }
.fchip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.fchip.call { --c: var(--ev-call); } .fchip.session { --c: var(--ev-session); } .fchip.trip { --c: var(--mark); }
.fchip[aria-pressed="false"] { color: var(--text-2); } .fchip[aria-pressed="false"] i { background: var(--line); }
/* раскрывающийся месяц */
.mini { padding: 10px; border: .5px solid var(--line); border-radius: var(--r-card); background: var(--surface); margin-bottom: 10px; }
.mini-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mini-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.mini-g small { font: 400 10px/1.8 var(--f-mono); color: var(--text-2); text-transform: uppercase; }
.mini-d { display: grid; align-content: center; justify-items: center; gap: 3px; height: 40px; border: .5px solid transparent; border-radius: var(--r-field); background: none; color: var(--text); cursor: pointer; }
.mini-d b { font: 500 13px/1 var(--f-mono); }
.mini-d.out { opacity: .45; } .mini-d.today b { color: var(--action); }
.mini-d.sel { border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); } .mini-d.sel b { color: var(--mark); }
.dots { display: flex; justify-content: center; gap: 3px; height: 5px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.dots i.call, .ml.call { --c: var(--ev-call); } .dots i.session, .ml.session { --c: var(--ev-session); }
.cal-strip .wk-d { padding: 8px 0 6px; }
/* полоса «весь день»: поездки и закрытые дни */
.cal-band { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; margin-bottom: 8px; }
.band { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; font: 500 12px/1 var(--f-body); overflow: hidden; white-space: nowrap; }
.band.trip { background: var(--ev-trip); color: var(--text); cursor: pointer; }
.band.closed { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, transparent 6px 12px); color: var(--text-2); }
@media (min-width: 900px) { .cal-band { padding-left: 40px; } }
/* десктоп: сетка по часам (48 px/час), телефон: полоса дней + лента */
.cal-desk { display: none; }
@media (min-width: 900px) { .cal-desk { display: block; } .cal-phone { display: none; } }
.hgrid { border: .5px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.hg-hd, .hg-bd { display: grid; grid-template-columns: 40px repeat(var(--n), minmax(0, 1fr)); }
.hg-hd { border-bottom: .5px solid var(--line); }
.hg-day { display: flex; justify-content: center; align-items: baseline; gap: 6px; padding: 8px 0; border: 0; border-left: .5px solid var(--line); background: none; color: var(--text); cursor: pointer; font: inherit; }
.hg-day small { font: 400 11px/1 var(--f-mono); color: var(--text-2); text-transform: uppercase; }
.hg-day b { font: 500 15px/1 var(--f-mono); }
.hg-day.today b { color: var(--action); } .hg-day.sel b { color: var(--mark); }
.hg-hours { position: relative; }
.hg-hours span { position: absolute; right: 6px; transform: translateY(-6px); font: 400 11px/1 var(--f-mono); color: var(--text-2); }
.hg-col { position: relative; border-left: .5px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 .5px, transparent .5px 48px); }
.hg-col.today { background-color: var(--surface-2); }
.hg-col.closed { background-image: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, transparent 6px 12px); }
.cal-now { position: absolute; left: 0; right: 0; height: 1px; background: var(--mark); pointer-events: none; z-index: 2; }
.cal-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--mark); }
.hev { position: absolute; box-sizing: border-box; display: grid; align-content: start; gap: 1px; padding: 3px 6px 3px 8px; margin: 0; border: 0; border-left: 3px solid var(--c); border-radius: 6px; background: color-mix(in srgb, var(--c) 18%, var(--surface)); color: var(--text); font: 500 12px/1.25 var(--f-body); text-align: left; overflow: hidden; cursor: pointer; z-index: 1; }
.hev.call { --c: var(--ev-call); } .hev.session { --c: var(--ev-session); }
.hev b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hev small { font: 400 11px/1.2 var(--f-mono); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hev.short { display: flex; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; }
.hev.missed { box-shadow: inset 0 0 0 .5px var(--danger); }
.hev.done { opacity: .6; }
.hev.free { left: 2px; right: 2px; width: auto; border: .5px dashed var(--line); background: transparent; color: var(--text-2); z-index: 0; }
.hev.free:hover { border-color: var(--action); color: var(--text); }
.hg-un { padding: 8px 12px; margin: 0; border-top: .5px solid var(--line); }
/* лента (телефон): полоса слева цветом типа */
.ev.call { border-left: 3px solid var(--ev-call); } .ev.ses { border-left: 3px solid var(--ev-session); }
button.ev.free { width: 100%; font: inherit; text-align: left; }
/* месяц */
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: .5px solid var(--line); border-left: .5px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.mgrid .mh { padding: 6px 0; text-align: center; font: 400 11px/1 var(--f-mono); color: var(--text-2); text-transform: uppercase; border-right: .5px solid var(--line); border-bottom: .5px solid var(--line); }
.mc { position: relative; display: grid; align-content: start; gap: 3px; min-width: 0; min-height: 56px; padding: 22px 4px 4px; border: 0; border-right: .5px solid var(--line); border-bottom: .5px solid var(--line); background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.mc > b { position: absolute; top: 4px; left: 6px; font: 500 12px/1 var(--f-mono); }
.mc.out { background: color-mix(in srgb, var(--surface-2) 50%, transparent); color: var(--text-2); }
.mc.today > b { color: var(--action); } .mc.sel { box-shadow: inset 0 0 0 1px var(--mark); }
.mc .mtrip { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ev-trip); font-size: 0; }
.mc .ml { display: none; }
@media (min-width: 900px) {
  .mc { min-height: 110px; }
  .mc .mtrip { height: 16px; padding: 2px 6px 0 40px; font: 500 10px/14px var(--f-body); color: var(--text); overflow: hidden; white-space: nowrap; }
  .mc .dots { display: none; }
  .mc .ml { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 6px; border-left: 3px solid var(--c); font: 400 12px/1.4 var(--f-body); border-radius: 3px; background: color-mix(in srgb, var(--c) 14%, transparent); }
  .mc .ml.more { border-left: 0; background: none; color: var(--text-2); }
}
/* Аналитика: календарь периода и иерархия */
.per-row { display: flex; margin-bottom: 10px; }
.per-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: .5px solid var(--line); background: var(--surface-2); color: var(--text); font: 500 14px/1 var(--f-body); cursor: pointer; }
.per-btn:hover { border-color: var(--action); } .per-btn .ti:last-child { color: var(--text-2); transition: transform var(--dur-base) var(--ease-out); }
.per-btn[aria-expanded="true"] .ti:last-child { transform: rotate(180deg); }
.per { display: grid; gap: 12px; padding: 14px; margin-bottom: 12px; border-radius: var(--r-card); border: .5px solid var(--line); background: var(--surface); }
.rg-f { display: flex; gap: 10px; flex-wrap: wrap; } .rg-f .field { flex: 1 1 140px; } .rg-f input { font-family: var(--f-mono); }
.rg-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rg-ms { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .rg-ms { grid-template-columns: 1fr 1fr; } }
@media (max-width: 699px) { .rg-2 { display: none; } }
.rg-t { display: block; text-align: center; margin-bottom: 6px; font-weight: 500; }
.rg-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; text-align: center; }
.rg-g small { font: 400 10px/1.8 var(--f-mono); color: var(--text-2); text-transform: uppercase; }
.rg-d { height: 36px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); font: 500 13px/1 var(--f-mono); cursor: pointer; }
.rg-d.in { background: var(--surface-2); }
.rg-d.s, .rg-d.e { background: var(--mark); color: #fff; }
.rg-d.s { border-radius: 8px 0 0 8px; } .rg-d.e { border-radius: 0 8px 8px 0; } .rg-d.s.e { border-radius: 8px; }
.rg-d.today:not(.s):not(.e) { color: var(--action); }
.stats.main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats.main { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats.main .stat b { font-size: 26px; } .stats.main .stat span { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ph { margin: 0 0 8px; font-size: 17px; display: flex; align-items: center; gap: 6px; }
.ibtn-h { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer; border-radius: 50%; }
.fun { display: grid; gap: 8px; }
.fun-r { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: 14px; }
.fun-r b { text-align: right; font-variant-numeric: tabular-nums; }
.fun-b { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; } .fun-b i { display: block; height: 100%; background: var(--btn); border-radius: 5px; } .fun-b i.last { background: var(--mark); }
.mon { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; } .mon b { text-align: right; font-variant-numeric: tabular-nums; }
.sub-h { margin: 14px 0 6px; font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
/* доска: FAB «+ Новая» на телефоне (стекло, над нижним меню) */
.fab { display: none; }
@media (max-width: 899px) {
  .fab { display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(8px + 56px + 12px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-nav); width: 48px; height: 48px; padding: 0; border-radius: 50%; color: var(--text); cursor: pointer; }
  .fab .ti { width: 22px; height: 22px; }
  .bk-bar #bNew { display: none; }
}
/* листы: новая заявка и этапы */
.nb-sheet, .st-sheet { gap: 14px; align-content: start; padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
@media (max-width: 899px) { .nb-sheet { height: 92dvh; max-height: 92dvh; } }
.nb { display: grid; gap: 16px; }
.nb-top { display: flex; justify-content: space-between; align-items: center; }
.nb-s { display: grid; gap: 10px; }
.nb-s .row { gap: 10px; }
.nb-refs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nb-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.nb-th { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; border: .5px solid var(--line); }
.nb-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nb-th button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--glass-bg); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.nb-up { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#nb3dSt.need { color: var(--warn); }
.nb-3d { position: relative; height: 320px; border-radius: 14px; overflow: hidden; background: var(--surface-2); touch-action: none; }
@media (min-width: 900px) { .nb-3d { height: 400px; } }
.nb-3d canvas { display: block; width: 100%; height: 100%; }
.nb-3d .b3d-msg { position: absolute; inset: 0; display: grid; place-items: center; }
.nb-3dtool { margin-top: 10px; align-items: end; } .nb-size { flex: 1 1 160px; }
.stchip { display: inline-flex; align-items: center; gap: 8px; } .stchip .sd { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.nb-foot { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom, 0px)); display: flex; justify-content: flex-end; gap: 10px; margin: 0 -20px -24px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-width: .5px 0 0; z-index: var(--z-sticky); }
.nb-foot .btn:last-child { flex: 1 1 auto; }
.st-sheet .stages-ed { max-width: none; margin: 0; }

.cbtn .ti { width: 20px; height: 20px; }

/* Настройки → Депозит (волна 3, ux-v3 6.3): «Когда просить» списком с пояснением под каждым, липкая «Сохранить» */
.when-list { display: grid; gap: 8px; }
.when-opt { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: .5px solid var(--line); border-radius: 14px; background: none; color: var(--text); cursor: pointer; font: inherit; transition: border-color var(--dur-fast, 120ms) var(--ease-out, ease), background var(--dur-fast, 120ms) var(--ease-out, ease); }
.when-opt b { font-size: 15px; font-weight: 600; } .when-opt small { color: var(--text-2); font-size: 13px; }
.when-opt[aria-checked="true"] { border-color: var(--mark); background: color-mix(in srgb, var(--mark) 8%, transparent); }
.sticky-save { position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 20; display: flex; justify-content: flex-start; padding: 8px 0; }
@media (min-width: 900px) { .sticky-save { bottom: 12px; } }

/* Шаг 4 клиента (ux-v3, 7.5): слоты чипами + «Другой день» с раскрытием календаря (220 ms, grid-template-rows) */
.slot-chips .chip { display: grid; gap: 1px; text-align: left; padding-block: 8px; } .slot-chips .chip small { color: var(--text-2); font-size: 11px; }
.slot-chips .chip[aria-pressed="true"] small { color: inherit; opacity: .8; }
.other-day { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; }
.other-day .ti { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base, 180ms) var(--ease-out, ease); }
.other-day[aria-expanded="true"] .ti { transform: rotate(180deg); }
.cx { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--ease-out, ease); }
.cx > div { overflow: hidden; min-height: 0; }
.cx.open { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .cx { transition: none; } }

/* График: поездки карточками вместо таблицы на 7 колонок (ux-v3, 6.2) */
.trip-cards { display: grid; gap: 10px; }
.trip-card { display: grid; gap: 10px; padding: 12px; border: .5px solid var(--line); border-radius: 14px; background: var(--surface-2); }

/* AlmasZXC-crg: единая шапка экрана с «назад» (стиль Teper): слева шеврон ‹ акцентом --mark без текста, по центру заголовок, под шапкой тонкая линия.
   Один компонент на все экраны: страницы Настроек, карточка клиента, листы (расходники, завершение сеанса, этапы), карточка заявки на телефоне, вход и регистрация. */
.navhead { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 48px; margin: 0 0 14px; border-bottom: .5px solid var(--line); }
.navhead .nh-t { margin: 0; text-align: center; font: 600 17px/1.2 var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navback { width: 44px; height: 44px; margin-left: -8px; display: grid; place-items: center; flex: none; border: 0; border-radius: 50%; background: none; color: var(--mark); cursor: pointer; padding: 0; }
.navback .ti { width: 28px; height: 28px; stroke-width: 2.25; }
.navback:hover { background: color-mix(in srgb, var(--mark) 10%, transparent); }
.navback:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; }
.bk-top-row > .navback { display: none; margin-left: -10px; }
@media (max-width: 899px) { .bk-top-row > .navback { display: grid; } #bkClose { display: none; } }
/* «Выйти» — последняя строка Настроек, тот же размер и форма, что у строк списка */
.set-exit { margin-top: 14px; }
.set-row.out { width: 100%; font: inherit; cursor: pointer; border-bottom: 0; color: var(--danger); }
.set-row.out b { color: var(--danger); font-size: 15px; }
.set-row.out .ico { color: var(--danger); }
/* Расходники (как «Услуги» в Teper): карточки категорий → строки позиций → пунктирная «+ Позиция»; внизу большая «Категория» */
.stk { display: grid; gap: 14px; padding-bottom: 84px; }
.stk-low { margin: 0; }
.stk-cat { border: .5px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.stk-chead { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; }
.stk-chead:hover, .stk-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.stk-chead b { display: block; font-size: 16px; font-weight: 600; } .stk-chead small { display: block; color: var(--mute); font-size: 13px; margin-top: 2px; }
.stk-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; }
.stk .chev { color: var(--mute); display: grid; place-items: center; }
.stk-list { display: grid; }
.stk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 20px; gap: 8px; align-items: center; padding: 12px 16px 12px 10px; border-top: .5px solid var(--line); cursor: pointer; background: var(--surface); }
.stk-row .grip { display: grid; place-items: center; height: 36px; color: var(--mute); cursor: grab; touch-action: none; }
.stk-row .nm b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stk-row .nm small { display: block; color: var(--mute); font-size: 13px; margin-top: 2px; }
.stk-row .avg { color: var(--text-2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-row.low .nm small { color: var(--warn); }
.stk-row.drag { background: var(--surface-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); position: relative; z-index: 2; }
.stk-row.drag .grip { cursor: grabbing; }
.stk-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 32px); margin: 10px 16px 14px; padding: 12px; border: 1.5px dashed var(--line); border-radius: 12px; background: none; color: var(--text-2); font: 500 14px/1 var(--f-body); cursor: pointer; }
.stk-add:hover { color: var(--text); border-color: var(--text-2); }
.stk-foot { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 4; }
@media (min-width: 900px) { .stk-foot { bottom: 16px; } .stk { padding-bottom: 16px; } }
.stk-foot .btn { width: 100%; min-height: 52px; font-size: 16px; }
.stk-empty { text-align: center; }
.stk-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stk-sum > div { border: .5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.stk-sum b { display: block; font-size: 15px; } .stk-sum small { color: var(--mute); font-size: 12px; }
.stk-hist { display: grid; }
.stk-hist > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-top: .5px solid var(--line); font-size: 14px; }
.stk-hist small { grid-column: 1 / -1; color: var(--mute); }
.stk-buy { display: grid; gap: 8px; }
.ic-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ic-opt { width: 44px; height: 44px; display: grid; place-items: center; border: .5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; }
.ic-opt[aria-pressed="true"] { border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); color: var(--mark); }
.btn.wide { width: 100%; }
.danger-b { color: var(--danger); }
.stk-del { display: grid; gap: 10px; }

/* ===== AlmasZXC-hq9: шаги 1–3 — пропуск описания, сворачиваемые «Эскизы/Работы», настройка шага 2, лента картинок на 3D ===== */
.idea-actions .btn.ghost { flex: 0 1 auto; }
/* шаг 2: эскизы и работы мастера — сворачиваемые разделы */
.libs { display: grid; gap: 10px; margin-top: 14px; }
.lib-sec { border: .5px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.lib-sec[hidden] { display: none; }
.lib-h { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 0; background: none; color: var(--text); font: 600 15px/1.2 var(--f-body); text-align: left; cursor: pointer; }
.lib-h .lib-t { flex: 1; min-width: 0; }
.lib-n { color: var(--text-2); font-weight: 500; font-size: 13px; white-space: nowrap; }
.lib-n b { color: var(--mark); font-weight: 600; }
.lib-chev { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms var(--ease-out); }
.lib-sec.open .lib-chev { transform: rotate(180deg); }
.lib-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease-out); }
.lib-sec.open .lib-body { grid-template-rows: 1fr; }
.lib-in { min-height: 0; overflow: hidden; }
.lib-in .thumbs { padding: 2px 14px 14px; opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 240ms var(--ease-out); }
.lib-sec.open .lib-in .thumbs { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lib-body, .lib-chev, .lib-in .thumbs { transition: none; } }

/* правка шага 2: карточка «Что видит клиент» и лист «Что показывать» */
.ed-refs-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border: .5px dashed var(--line); border-radius: var(--r-card); background: var(--surface); }
.ed-refs-prev { display: flex; }
.ed-refs-prev img { width: 40px; height: 52px; object-fit: cover; border-radius: 8px; border: 2px solid var(--surface); background: #e9e5df; margin-left: -10px; }
.ed-refs-prev img:first-child { margin-left: 0; }
.ed-refs-t { flex: 1 1 200px; display: grid; gap: 2px; }
.ed-refs-t small { color: var(--text-2); }
.ed-sheet-bg { position: fixed; inset: 0; z-index: 9600; background: rgba(0, 0, 0, 0); display: grid; place-items: center; padding: 16px; transition: background 200ms ease; }
.ed-sheet-bg.open { background: rgba(0, 0, 0, .55); }
.ed-sheet { width: min(720px, 100%); max-height: min(86vh, 860px); overflow: auto; display: grid; gap: 12px; padding: 18px; border-radius: var(--r-panel); background: var(--surface); color: var(--text); border: .5px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); transform: translateY(12px); opacity: 0; transition: transform 240ms var(--ease-sheet), opacity 200ms ease; }
.ed-sheet-bg.open .ed-sheet { transform: none; opacity: 1; }
.ed-sheet > .btn { justify-self: end; }
.ed-sheet p { margin: 0; }
.ed-sheet-h { display: flex; align-items: center; gap: 10px; }
.ed-sheet-h h3 { flex: 1; margin: 0; font-size: 18px; }
.ed-sheet-h .ed-ib { width: 34px; height: 34px; border-radius: 999px; border: .5px solid var(--line); background: none; color: var(--text); cursor: pointer; }
.ed-sheet .ed-seg { display: flex; gap: 6px; }
.ed-sheet .ed-seg button { flex: 1; padding: 10px; border-radius: 10px; border: .5px solid var(--line); background: none; color: var(--text); font: 600 14px/1.2 var(--f-body); cursor: pointer; }
.ed-sheet .ed-seg button small { color: var(--text-2); font-weight: 500; }
.ed-sheet .ed-seg button[aria-pressed="true"] { border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); }
.ed-rs-tools { display: flex; gap: 8px; }
.ed-rs-tools button { padding: 6px 12px; border-radius: 999px; border: .5px solid var(--line); background: none; color: var(--text); cursor: pointer; font-size: 13px; }
.ed-rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.ed-rs-item { position: relative; aspect-ratio: 3 / 4; padding: 0; border-radius: 10px; overflow: hidden; border: .5px solid var(--line); background: #e9e5df; cursor: pointer; }
.ed-rs-item img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 160ms ease; }
.ed-rs-item .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 11px; text-align: left; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
.ed-rs-chk { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 7px; border: 2px solid #fff; background: rgba(0, 0, 0, .35); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.ed-rs-item[aria-checked="true"] { outline: 2px solid var(--mark); outline-offset: -2px; }
.ed-rs-item[aria-checked="true"] .ed-rs-chk { background: var(--mark); border-color: var(--mark); }
.ed-rs-item[aria-checked="true"] .ed-rs-chk::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ed-rs-item[aria-checked="false"] img { opacity: .35; }
.ed-rs-add { aspect-ratio: 3 / 4; display: grid; place-content: center; justify-items: center; gap: 4px; border: 1px dashed var(--action); border-radius: 10px; color: var(--action); cursor: pointer; text-align: center; padding: 8px; }
.ed-rs-add span { font-size: 28px; line-height: 1; }
.ed-rs-add small { font-size: 12px; }
@media (max-width: 640px) {
  .ed-sheet-bg { place-items: end stretch; padding: 0; }
  .ed-sheet { width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(40px); }
  .ed-rs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* панель блока в правке: иконки + «Настроить»; лист настроек с подписями */
.ed-bar .ed-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ed-bar .ed-ib { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; }
.ed-bar .ed-tb { display: inline-flex; align-items: center; gap: 6px; height: 30px; }
.ed-bar .ed-tb .ed-i { width: 15px; height: 15px; }
.ed-blockp .ed-ph { margin: 0; font-weight: 600; }
.ed-blockp .ed-row { display: grid; gap: 6px; }
.ed-blockp .ed-rl { font-size: 12px; color: var(--text-2); }
.ed-blockp .ed-seg.ed-wrap { flex-wrap: wrap; }
.ed-blockp .ed-seg.ed-wrap button { flex: 1 1 auto; padding: 7px 10px; }
.ed-blockp .ed-two { grid-template-columns: 1fr 1fr; }
.ed-blockp .ed-two button { padding: 8px 10px; }
.ed-blockp .ed-upwide { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 7px 12px; }
.ed-blockp .ed-i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* шаг 3: лента «Ваши картинки» над сценой */
.ribbon { display: grid; gap: 6px; padding: 10px 12px 8px; border-bottom: .5px solid var(--line); background: var(--surface); }
.ribbon-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ribbon-h b { font-size: 14px; }
#ribbonHint { color: var(--text-2); }
#ribbonHint.on { color: var(--mark); font-weight: 600; }
.ribbon .strip .thumb { flex: 0 0 64px; cursor: grab; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.ribbon .strip .thumb[aria-pressed="true"] { outline: 2px solid var(--mark); outline-offset: -2px; }
.stage-wrap:has(.ribbon.armed) #stage3d { cursor: copy; }
body.ref-dragging, body.ref-dragging * { cursor: grabbing !important; user-select: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 9999; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; pointer-events: none; background: #e9e5df; border: 2px solid var(--btn); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); opacity: .95; transition: opacity 120ms ease, width 120ms ease, height 120ms ease; }
.drag-ghost img { width: 100%; height: 100%; object-fit: contain; display: block; }
.drag-ghost.over { opacity: 0; } /* над телом эскиз уже лежит на коже с подсветкой — призрак не закрывает его */
#stage3d.drop-over { box-shadow: inset 0 0 0 2px var(--btn); }
/* панель выбранного места и свёрнутый список мест */
.controls { gap: 14px; }
.place-panel .pp { display: grid; gap: 10px; }
.pp-h { display: flex; align-items: center; gap: 10px; }
.pp-h img { width: 40px; height: 52px; object-fit: contain; border-radius: 8px; background: #e9e5df; border: .5px solid var(--line); }
.pp-h > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pp-h small { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-del { display: inline-grid; place-items: center; min-width: 36px; height: 36px; }
.pp-del .ti { width: 18px; height: 18px; }
.pp-sl { display: grid; grid-template-columns: 70px minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: 13px; }
.pp-sl input[type=range] { margin: 0; width: 100%; }
.pp-sl b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* AlmasZXC-c4m: размер числом — см по большей стороне краски (от 1 см), рядом с ползунком */
.pp-sl.sz { grid-template-columns: 70px minmax(0, 1fr) 86px; }
.sz-n { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.sz-n input { width: 60px; min-width: 0; height: 32px; min-height: 0; margin: 0; padding: 2px 6px; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; border-radius: 8px; -moz-appearance: textfield; }
.sz-n input::-webkit-inner-spin-button, .sz-n input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sz-n i { font-style: normal; opacity: .7; }
.pp-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tools .icon { min-width: 36px; height: 36px; font-size: 15px; }
.pp-tools .icon.wide { font-size: 13px; padding-inline: 12px; }
.pp-tools .icon[aria-pressed="true"] { border-color: var(--mark); color: var(--mark); }
.pp-empty { margin: 0; padding: 12px; border: .5px dashed var(--line); border-radius: var(--r-field); }
.places-box { border-top: .5px solid var(--line); padding-top: 10px; }
.places-box[hidden] { display: none; }
.places-box summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; padding: 4px 0; }
.places-box summary::-webkit-details-marker { display: none; }
.places-box summary .pn { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; text-align: center; }
.places-box summary .chev { margin-left: auto; width: 18px; height: 18px; transition: transform 220ms var(--ease-out); }
.places-box[open] summary .chev { transform: rotate(180deg); }
.places-box .places { margin-top: 8px; }
.places-box .place { grid-template-columns: 48px minmax(0, 1fr) 32px; align-items: center; gap: 8px; }
.places-box .place-shot { width: 48px; height: 48px; }
.places-box .place-main { padding: 4px 2px; border: 0; background: none; font-size: 13px; }
.places-box .place-main span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.places-box .place .x { width: 32px; height: 32px; padding: 0; }
/* телефон: сцена липкая, под ней панель места — лента и сцена ниже, чтобы панель места была видна целиком */
@media (max-width: 900px) {
  .ribbon { padding: 6px 10px 4px; gap: 4px; }
  .ribbon-h { flex-wrap: nowrap; } .ribbon-h b { flex: none; font-size: 13px; } #ribbonHint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .ribbon .strip .thumb { flex-basis: 44px; }
  #stage3d { height: 38vh; min-height: 250px; }
}

/* AlmasZXC-abe (архив владельца 13.10): только нужные элементы из его premium.css, в наших токенах */
/* шаг 1: надписи сверху, необязательное описание внизу */
#inscriptionBox { margin-bottom: 18px; }
#inscriptionBox > .sub { margin: 0; }
.v5-client-brief { display: grid; gap: 10px; border-top: .5px solid var(--line); padding-top: 16px; margin-block: 18px 14px; }
.v5-client-brief .sub, .v5-client-brief p { margin: 0; }
.v5-client-brief textarea { min-height: 64px; }
#findReferences { justify-self: start; }
#pinLinks:empty { display: none; }
/* шаг 2: подписи миниатюр ленты, «Отражение, фон и слои» под ползунками */
.ribbon .strip { align-items: start; }
.ribbon .strip .thumb { flex: 0 0 76px; aspect-ratio: auto; display: grid; grid-template-rows: 64px auto; background: var(--surface-2); }
.ribbon .strip .thumb img { height: 64px; background: #e9e5df; }
.ribbon .strip .thumb .cap { position: static; display: block; padding: 3px 5px 4px; background: none; color: var(--text-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ribbon .strip .thumb[aria-pressed="true"] .cap { color: var(--mark); }
.v5-3d-extra { border-top: .5px solid var(--line); padding-top: 4px; }
.v5-3d-extra summary { cursor: pointer; font-size: 14px; color: var(--action); padding: 8px 0; }
.v5-3d-extra .pp-tools { margin-top: 6px; }
@media (max-width: 900px) {
  .ribbon .strip .thumb { flex-basis: 60px; grid-template-rows: 44px auto; }
  .ribbon .strip .thumb img { height: 44px; }
  .ribbon .strip .thumb .cap { font-size: 10px; padding: 2px 3px 3px; }
}

/* Проекты и поиск (bead 5cx): название проекта крупно, клиент мельче; стеклянная строка поиска; подсветка <mark> */
.srch { position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; padding: 0 12px; height: 42px; border-radius: 12px; border: .5px solid var(--line); margin: 0 0 12px; }
.cl-bar .srch { margin: 0; }
.srch > svg { flex: none; width: 18px; height: 18px; color: var(--text-2); }
.srch input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; font-size: 16px; color: var(--text); outline: none; -webkit-appearance: none; appearance: none; }
.srch input::-webkit-search-cancel-button, .srch input::-webkit-search-decoration { display: none; -webkit-appearance: none; }
.srch:focus-within { border-color: var(--mark); }
.srch-x { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text-2); cursor: pointer; padding: 0; }
.srch-x[hidden] { display: none; }
.srch-x svg { width: 14px; height: 14px; }
.srch-n { flex: none; font: 500 12px/1 var(--f-mono); color: var(--text-2); white-space: nowrap; }
.srch-n:empty { display: none; }
.srch-empty { text-align: center; color: var(--text-2); }
mark { background: color-mix(in srgb, var(--mark) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.card .card-top b.pj, .bitem b.pj { font-size: 16px; font-weight: 700; line-height: 1.25; }
.bitem b.pj { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-by { font-size: 13px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-hit { display: block; color: var(--text-2); }
.bk-title-in { flex: 1 1 auto; min-width: 0; width: 100%; font: 700 20px/1.15 var(--f-display); padding: 4px 8px; border-radius: 8px; border: .5px solid var(--mark); background: var(--surface); color: var(--text); }
.bk-ren { flex: none; width: 28px; height: 28px; }

/* v4 blocks (2D): мини-блок «Разделитель», блок «До и после» */
.dv { display: block; width: 100%; color: var(--dv-c, var(--line)); height: var(--dv-h, 48px); }
.dv-line { display: flex; align-items: center; }
.dv-line hr { width: 100%; margin: 0; border: 0; border-top: var(--dv-t, 1px) solid var(--dv-c, var(--line)); }
.dv-wave svg { display: block; width: 100%; height: 100%; color: var(--dv-c, var(--line)); overflow: visible; }
.dv-fade { background: linear-gradient(to bottom, transparent, var(--dv-c, var(--line))); }
.dv-space.dv-ed { box-sizing: border-box; border: 1px dashed var(--line); border-radius: 8px; }

.ba { display: grid; gap: 10px; width: 100%; min-width: 0; }
.ba-hint { margin: 0; }
.ba-pair { margin: 0; display: grid; gap: 8px; min-width: 0; }
.ba-pair[hidden] { display: none; }
.ba-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); user-select: none; -webkit-user-select: none; --ba: 50%; }
@media (min-width: 641px) { .ba-frame { aspect-ratio: 3 / 2; } }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #0B0B0B; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.ba-ic { width: 20px; height: 20px; flex: none; }
.ba-tag { position: absolute; top: 10px; padding: 3px 8px; border-radius: 999px; font-size: 12px; line-height: 1.3; color: var(--text); background: color-mix(in srgb, var(--bg) 60%, transparent); pointer-events: none; }
.ba-tag-l { left: 10px; }
.ba-tag-r { right: 10px; }
.ba-frame input.ba-range[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; accent-color: transparent; }
.ba-frame input.ba-range[type="range"]::-webkit-slider-runnable-track { height: 100%; border-radius: 0; background: transparent; }
.ba-frame input.ba-range[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; }
.ba-frame input.ba-range[type="range"]::-moz-range-track { height: 100%; background: transparent; }
.ba-frame input.ba-range[type="range"]::-moz-range-thumb { width: 1px; height: 100%; border: 0; border-radius: 0; background: transparent; }
.ba-frame input.ba-range[type="range"]:focus-visible { opacity: 1; outline: 2px solid var(--action); outline-offset: -2px; }
.ba-cap { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.ba-incomplete { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.ba-incomplete .ba-img { position: static; }
.ba-slot { display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8px; text-align: center; font-size: 13px; color: var(--text-2); background: var(--surface); border: 1px dashed var(--line); box-sizing: border-box; }
.ba-dots { display: flex; justify-content: center; gap: 0; touch-action: pan-y; }
.ba-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ba-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--line); transition: background .15s ease; }
.ba-dot[aria-current]::before { background: var(--mark); }
.ba-dot:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .ba-dot::before { transition: none; } }
/* панель мастера */
.ba-panel { display: grid; gap: 12px; }
.ba-plist { display: grid; gap: 12px; }
.ba-prow { display: grid; grid-template-columns: auto minmax(0, 1fr) 36px; gap: 8px; align-items: start; }
.ba-thumbs { display: flex; gap: 6px; }
.ba-thumb { position: relative; width: 64px; height: 80px; display: grid; place-items: center; border-radius: var(--r-field); border: 1px dashed var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; overflow: hidden; }
.ba-thumb.has { border-style: solid; }
.ba-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-thumb-l { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 999px; font-size: 11px; color: var(--text); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.ba-pcap { min-width: 0; height: 36px; padding: 0 10px; border-radius: var(--r-field); border: .5px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.ba-pdel { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--r-field); background: transparent; color: var(--text-2); cursor: pointer; }
.ba-pdel:hover { color: var(--danger); }
.ba-padd { height: 40px; border-radius: var(--r-field); border: .5px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.ba-padd:disabled { opacity: .5; cursor: default; }
.ba-tip { margin: 0; font-size: 13px; color: var(--text-2); }